@charset "utf-8";
/* ==========================================================================
   RustyRemains — design system, 2026-07-25 round 2.
   Dark + red, table-first. Stats are tabular data and live in tables:
   a category tab decides the table's COLUMNS. No stat cards anywhere.
   Order: 1 fonts 2 tokens 3 reset 4 primitives 5 shell 6 tabs/controls
          7 tables 8 landing 9 profile 10 tickets 11 admin 12 responsive
   ========================================================================== */

/* ---------- 1. fonts (self-hosted, no external requests) ---------- */
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter.woff2") format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Rajdhani"; src:url("/assets/fonts/rajdhani-600.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Rajdhani"; src:url("/assets/fonts/rajdhani-700.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"JBMono"; src:url("/assets/fonts/jbmono.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"JBMono"; src:url("/assets/fonts/jbmono-b.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }

/* ---------- 2. tokens ---------- */
:root{
  /* dark, but panels sit clearly above the page so nothing reads as a void */
  --bg:#1b1d23;
  --bg-2:#15171c;
  --panel:#24272f;
  --panel-2:#2d313b;
  --panel-3:#373c48;
  --line:#3c414e;
  --line-2:#4d5464;

  --ink:#f3f5f8;
  --ink-2:#b6bfcc;
  /* #8792a1 measured 4.73:1 on --panel and, once anything applied opacity on
     top of it, 4.09:1 at 10px. Muted must still be legible. */
  --ink-3:#9aa5b5;

  --red:#e33a45;
  --red-2:#c02733;
  --red-soft:rgba(227,58,69,.13);
  --green:#3ac06d;
  --amber:#eda63c;
  --blue:#4f9dff;
  --violet:#9b7dff;
  --gold:#f0c04a;
  --silver:#c8d2de;
  --bronze:#cd8a52;

  --h:var(--red);              /* per-context accent */

  --f-ui:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-disp:"Rajdhani","Inter","Segoe UI",system-ui,sans-serif;
  --f-mono:"JBMono","Cascadia Code",Consolas,ui-monospace,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  --r1:4px; --r2:8px; --r3:12px; --r4:16px;

  --lift:0 1px 0 rgba(255,255,255,.035) inset, 0 10px 24px -18px rgba(0,0,0,.9);
  --lift-2:0 1px 0 rgba(255,255,255,.05) inset, 0 22px 44px -26px rgba(0,0,0,.95);

  --bar-h:62px;
  --wrap:1400px;
}

/* ---------- 3. reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:var(--f-ui);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* one soft red pool top-left, nothing else. no scene, no texture. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 640px at 8% -10%, rgba(227,58,69,.09), transparent 68%),
    radial-gradient(900px 520px at 96% 0%, rgba(227,58,69,.045), transparent 70%);
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
/* any display: rule on a class beats the UA [hidden] rule, and tab panes
   are grids. Make hidden mean hidden. */
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;line-height:1.15;letter-spacing:.005em}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
::selection{background:rgba(227,58,69,.3)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ---------- 4. primitives ---------- */
.mut{color:var(--ink-2)} .mut3{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.code{font-family:var(--f-mono);font-size:.86em;letter-spacing:-.02em}
.link{color:var(--blue);font-weight:600}
.link:hover{text-decoration:underline}

/* the uppercase letterspaced label used for scopes, table heads, captions */
.cap{font-family:var(--f-disp);font-size:12px;font-weight:700;letter-spacing:.13em;
     text-transform:uppercase;color:var(--ink-3)}

.panel{position:relative;background:var(--panel);border:1px solid var(--line);
       border-radius:var(--r3);box-shadow:var(--lift)}
/* a 2px accent line across the top, for the panel that wants attention */
.panel.seam::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
                    background:var(--h);border-radius:var(--r3) var(--r3) 0 0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
            padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-head h2,.panel-head h3{font-size:17px;letter-spacing:.01em}
.panel-body{padding:var(--s5)}
.panel-body.flush{padding:0}
.panel-foot{padding:var(--s3) var(--s5);border-top:1px solid var(--line);
            display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
     height:42px;padding:0 18px;border-radius:var(--r2);
     font-size:14px;font-weight:650;white-space:nowrap;
     border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);
     transition:background .14s,border-color .14s,color .14s}
.btn:hover{background:var(--panel-3);border-color:#4a5060}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-primary{background:linear-gradient(180deg,var(--red),var(--red-2));
             border-color:#d33341;color:#fff;font-weight:700;
             box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -12px rgba(227,58,69,.9)}
.btn-primary:hover{filter:brightness(1.09)}
.btn-hue{background:color-mix(in srgb,var(--h) 15%,var(--panel-2));
         border-color:color-mix(in srgb,var(--h) 45%,var(--line-2));color:var(--h);font-weight:700}
.btn-hue:hover{background:color-mix(in srgb,var(--h) 25%,var(--panel-2))}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--panel-2);color:var(--ink)}
.btn-danger{background:var(--red-soft);border-color:rgba(227,58,69,.42);color:#ff8b94}
.btn-danger:hover{background:rgba(227,58,69,.22)}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:6px}
.btn-lg{height:50px;padding:0 24px;font-size:16px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:5px;
      font-size:11.5px;font-weight:650;letter-spacing:.02em;
      background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
.chip b{color:var(--ink);font-weight:750}
.chip-hue{background:color-mix(in srgb,var(--h) 14%,transparent);
          border-color:color-mix(in srgb,var(--h) 42%,transparent);color:var(--h)}
.chip-live{background:rgba(58,192,109,.13);border-color:rgba(58,192,109,.4);color:var(--green)}
.chip-warn{background:rgba(237,166,60,.13);border-color:rgba(237,166,60,.4);color:var(--amber)}
.chip-bad{background:var(--red-soft);border-color:rgba(227,58,69,.4);color:#ff8b94}
.chip-ai{background:rgba(155,125,255,.14);border-color:rgba(155,125,255,.42);color:#b39dff}
/* role badge: --rc comes from the ladder in app/lib/roles.php */
.rolechip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;
          font-size:11.5px;font-weight:750;letter-spacing:.02em;white-space:nowrap;color:var(--rc);
          background:color-mix(in srgb,var(--rc) 14%,transparent);
          border:1px solid color-mix(in srgb,var(--rc) 42%,transparent)}

/* view-as banner: sits above the sticky topbar and scrolls away with the page */
.viewas{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
        padding:9px var(--s6);font-size:13.5px;color:var(--amber);
        background:rgba(237,166,60,.12);border-bottom:1px solid rgba(237,166,60,.4)}
.viewas b{color:var(--ink)}
.viewas form{display:flex}

.pip{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
     box-shadow:0 0 0 3px rgba(58,192,109,.16)}
.pip-off{background:var(--ink-3);box-shadow:none}

.meter{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;
         background:linear-gradient(90deg,color-mix(in srgb,var(--h) 55%,transparent),var(--h))}

.ava{width:32px;height:32px;border-radius:6px;flex:none;overflow:hidden;
     background:var(--panel-3);border:1px solid var(--line)}
.ava img{width:100%;height:100%;object-fit:cover}
.ava-lg{width:80px;height:80px;border-radius:var(--r3)}
.ava-sm{width:26px;height:26px;border-radius:5px}

.note{padding:var(--s3) var(--s4);border-radius:var(--r2);font-size:14px;
      border:1px solid var(--line);background:var(--panel-2)}
.note-err{border-color:rgba(227,58,69,.45);background:var(--red-soft);color:#ffb0b6}
.note-ok{border-color:rgba(58,192,109,.45);background:rgba(58,192,109,.1);color:#95e6b6}

.blank{padding:var(--s9) var(--s5);text-align:center;color:var(--ink-2)}
.blank h3{font-size:19px;color:var(--ink);margin-bottom:var(--s2)}
.blank .btn{margin-top:var(--s5)}

/* forms */
.field{display:block;margin-bottom:var(--s5)}
.field>span{display:block;font-size:13px;font-weight:650;color:var(--ink-2);margin-bottom:6px}
.field>span em{font-style:normal;color:var(--ink-3);font-weight:500}
.inp,.sel,.txa{width:100%;background:var(--bg-2);border:1px solid var(--line-2);
               border-radius:var(--r2);padding:11px 13px;font-size:15px;
               transition:border-color .14s}
.inp:focus,.sel:focus,.txa:focus{border-color:var(--red);outline:none}
.txa{resize:vertical;min-height:118px;line-height:1.6}
.sel{appearance:none;cursor:pointer;padding-right:36px;background-repeat:no-repeat;
     background-position:right 13px center;
     background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23737d8b' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>")}
.filepick{border:1px dashed var(--line-2);border-radius:var(--r2);padding:var(--s4);
          background:rgba(255,255,255,.015);font-size:14px;color:var(--ink-2);cursor:pointer}
.filepick:hover{border-color:var(--red)}
.filepick input{display:block;width:100%;margin-top:6px;font-size:13px}

/* ---------- 5. shell ---------- */
.topbar{position:sticky;top:0;z-index:80;height:var(--bar-h);
        background:rgba(27,29,35,.9);backdrop-filter:blur(14px) saturate(1.2);
        border-bottom:1px solid var(--line)}
.tb-in{max-width:var(--wrap);margin:0 auto;height:100%;padding:0 var(--s6);
       display:flex;align-items:center;gap:var(--s5)}
.tb-brand{display:flex;align-items:center;gap:9px;flex:none}
.tb-brand .glyph{width:28px;height:28px;border-radius:6px;flex:none;display:grid;place-items:center;
                 background:linear-gradient(150deg,var(--red),var(--red-2));
                 box-shadow:0 6px 14px -8px rgba(227,58,69,.9)}
.tb-brand .glyph svg{width:16px;height:16px}
.tb-brand .word{font-family:var(--f-disp);font-size:19px;font-weight:700;letter-spacing:.05em}
.tb-brand .word i{font-style:normal;color:var(--ink-2);font-weight:600}

.tb-tabs{display:flex;align-items:center;gap:0;height:100%;flex:1 1 auto}
.tb-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 13px;
        font-family:var(--f-disp);font-size:15px;font-weight:600;letter-spacing:.06em;
        text-transform:uppercase;color:var(--ink-2);transition:color .14s}
.tb-tab:hover{color:var(--ink)}
.tb-tab.on{color:var(--ink)}
.tb-tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
                  background:var(--red);box-shadow:0 -4px 12px rgba(227,58,69,.6)}
.tb-tab .badge{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);
               color:#fff;font-family:var(--f-ui);font-size:11px;font-weight:800;
               display:grid;place-items:center;font-variant-numeric:tabular-nums}
.tb-right{display:flex;align-items:center;gap:var(--s3);flex:none}

.finder{position:relative}
.finder .inp{height:36px;width:190px;padding:0 12px 0 32px;font-size:13.5px;border-radius:6px}
.finder>svg{position:absolute;left:10px;top:10px;width:16px;height:16px;color:var(--ink-3)}
.finder-pop{position:absolute;top:44px;right:0;width:300px;z-index:90;background:var(--panel);
            border:1px solid var(--line-2);border-radius:var(--r2);box-shadow:var(--lift-2);
            overflow:hidden auto;max-height:380px}
.finder-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:14px}
.finder-pop a:hover{background:var(--panel-2)}
.finder-pop .none{padding:14px;font-size:13px;color:var(--ink-3)}

.tb-user{display:flex;align-items:center;gap:8px;padding:4px 11px 4px 4px;border:1px solid var(--line);
         border-radius:99px;background:var(--panel-2)}
.tb-user:hover{border-color:var(--line-2)}
.tb-user span{font-size:13px;font-weight:650;max-width:120px;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.tb-out{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;
        border:1px solid var(--line);color:var(--ink-3)}
.tb-out:hover{color:var(--red);border-color:rgba(227,58,69,.4)}
.tb-burger{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:6px;
           place-items:center}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s6)}
.page{padding:var(--s7) 0 var(--s10)}

/* page header band */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);
          padding-bottom:var(--s4);margin-bottom:var(--s6);border-bottom:1px solid var(--line)}
.masthead h1{font-size:clamp(28px,3.4vw,38px);letter-spacing:.01em;margin:2px 0 3px}
.mh-sub{font-size:14px;color:var(--ink-2)}
.mh-act{display:flex;align-items:center;gap:var(--s2);flex:none;flex-wrap:wrap}

.sitefoot{border-top:1px solid var(--line);background:rgba(21,23,28,.6);margin-top:var(--s10)}
.sf-in{max-width:var(--wrap);margin:0 auto;padding:var(--s8) var(--s6);
       display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s7) var(--s8)}
.sf-in>*{min-width:0}
.sf-in h4{font-family:var(--f-disp);font-size:13px;letter-spacing:.13em;text-transform:uppercase;
          color:var(--ink-3);margin-bottom:var(--s3);font-weight:700}
.sf-in a{display:block;font-size:14px;color:var(--ink-2);padding:4px 0}
.sf-in a:hover{color:var(--ink)}
.sf-conn{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:12.5px;color:var(--ink-3);padding:3px 0}
.sf-conn b{color:var(--ink-2);font-weight:650}
.sf-conn .code{overflow-wrap:anywhere}
.sf-legal{border-top:1px solid var(--line);padding:var(--s4) var(--s6);font-size:12.5px;
          color:var(--ink-3);max-width:var(--wrap);margin:0 auto}

/* ---------- 6. tabs and controls ---------- */
/* the category strip: this is what decides a table's columns */
.tabstrip{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);
          margin-bottom:var(--s5)}
/* only scroll it when wrapping is not an option (narrow phones) */
@media (max-width:620px){
  .tabstrip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabstrip::-webkit-scrollbar{display:none}
}
.tabstrip button,.tabstrip a{position:relative;flex:none;display:inline-flex;align-items:center;
                 padding:11px 16px;
                 font-family:var(--f-disp);font-size:15px;font-weight:600;letter-spacing:.09em;
                 text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
                 transition:color .14s,background .14s}
.tabstrip button:hover,.tabstrip a:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.tabstrip button.on,.tabstrip a.on{color:var(--red)}
.tabstrip button.on::after,.tabstrip a.on::after{content:"";position:absolute;left:8px;right:8px;
                           bottom:-1px;height:2px;background:var(--red)}

/* row of pill filters (servers) */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills button,.pills a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
                       border-radius:var(--r2);border:1px solid var(--line);background:var(--panel);
                       font-size:13.5px;font-weight:600;color:var(--ink-2);
                       transition:border-color .14s,color .14s,background .14s}
.pills button:hover,.pills a:hover{color:var(--ink);border-color:var(--line-2)}
.pills button.on,.pills a.on{background:var(--red-soft);border-color:rgba(227,58,69,.5);color:#ff9aa2}
.pills .rate{font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}

/* segmented control (timeframe) */
.seg{display:inline-flex;padding:3px;background:var(--bg-2);border:1px solid var(--line);
     border-radius:var(--r2);gap:2px}
.seg button,.seg a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:5px;
                   font-size:13px;font-weight:650;color:var(--ink-3);white-space:nowrap;
                   transition:background .13s,color .13s}
.seg button:hover,.seg a:hover{color:var(--ink)}
.seg button.on,.seg a.on{background:var(--panel-3);color:var(--ink)}
.seg .n{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}

.toolbar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.toolbar .spacer{flex:1}

/* ---------- 7. tables (the core component) ---------- */
.dt-wrap{border:1px solid var(--line);border-radius:var(--r3);background:var(--panel);
         box-shadow:var(--lift);overflow-x:auto}
/* same scroll containment, no chrome: for a table already inside a panel */
.dt-wrap.bare{border:0;border-radius:0;background:none;box-shadow:none}
.dt{font-variant-numeric:tabular-nums;min-width:100%}
.dt thead th{
  padding:12px var(--s4);background:rgba(21,23,28,.55);border-bottom:1px solid var(--line);
  font-family:var(--f-disp);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:left;white-space:nowrap;
}
.dt thead th.n{text-align:right}
.dt thead th button{display:inline-flex;align-items:center;gap:5px;color:inherit;font:inherit;
                    letter-spacing:inherit;text-transform:inherit}
.dt thead th button:hover{color:var(--ink)}
.dt thead th .car{font-size:9px;opacity:.45}
.dt thead th.sorted{color:var(--red)}
.dt thead th.sorted .car{opacity:1}
.dt tbody td{padding:11px var(--s4);border-bottom:1px solid rgba(60,65,78,.55);font-size:14.5px;
             white-space:nowrap}
.dt tbody tr:last-child td{border-bottom:0}
.dt tbody tr:hover td{background:rgba(255,255,255,.022)}
.dt tbody tr.me td{background:var(--red-soft)}
.dt tbody tr.me td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.dt td.n{text-align:right}
.dt td.strong{font-weight:750}
.dt .pos{width:66px}
/* the player column is the one that may grow, and must never truncate */
.dt .who-col{width:auto;min-width:210px;white-space:normal}
/* narrow variant for tables that live in a sidebar */
.dt-compact{min-width:0}
.dt-compact thead th{padding:9px 10px;font-size:11.5px;letter-spacing:.06em}
.dt-compact tbody td{padding:8px 10px;font-size:13px}
.dt-compact .who-col{min-width:0;white-space:normal;overflow-wrap:anywhere}
.dt-compact .n{white-space:nowrap}

.who{display:flex;align-items:center;gap:10px;min-width:0}
.who span{font-weight:600;overflow-wrap:anywhere}
a.who:hover span{color:var(--red)}

.rk{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 7px;border-radius:5px;
    font-family:var(--f-disp);font-size:14px;font-weight:700;color:var(--ink-3);
    background:var(--panel-2);border:1px solid var(--line)}
.rk.r1{color:#241a03;background:linear-gradient(150deg,#f7d071,#e0a92a);border-color:#eebd47}
.rk.r2{color:#14171c;background:linear-gradient(150deg,#e3ebf5,#aab9c9);border-color:#ccd7e4}
.rk.r3{color:#1d1207;background:linear-gradient(150deg,#e8ab73,#bd7a3c);border-color:#d99a61}

.kd{font-weight:700}
.kd.hi{color:var(--green)} .kd.lo{color:#ff8b94}

/* "your rank" strip */
.yours{display:flex;align-items:center;gap:var(--s5);padding:var(--s3) var(--s5);
       margin-bottom:var(--s4);border-radius:var(--r3);
       background:linear-gradient(90deg,var(--red-soft),transparent);
       border:1px solid rgba(227,58,69,.32)}
.yours .big{font-family:var(--f-disp);font-size:26px;font-weight:700;color:var(--red)}
.yours .tx{flex:1;font-size:14px;color:var(--ink-2)}
.yours .tx b{color:var(--ink)}

.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
       margin-top:var(--s4);flex-wrap:wrap}
.pager .pg{display:flex;align-items:center;gap:var(--s3)}
.pager .cur{font-size:13.5px;color:var(--ink-2)}

/* ---------- 8. landing ---------- */
/* Sections are tall and breathe. The page is meant to be scrolled, not to fit
   in one viewport: that was the "tiny website" problem. */
.sect{padding:var(--s10) 0}
.sect-head{max-width:720px;margin:0 auto var(--s7);text-align:center}
.sect-head h2{font-size:clamp(30px,4.2vw,48px);letter-spacing:.02em;text-transform:uppercase;
              margin-top:6px}
.sect-sub{margin-top:var(--s4);font-size:16px;line-height:1.65;color:var(--ink-2)}
.sect-cta{display:flex;justify-content:center;margin-top:var(--s7)}

/* scroll reveal: sections rise in once, then stay put */
/* scoped to .js: without JavaScript the sections are simply visible, never
   stuck at opacity 0 */
.js .reveal{opacity:0;transform:translateY(22px);
        transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Server tabs. Boards are never merged across servers, so every board-shaped
   section carries one of these. --h is the selected server's accent. */
.srvtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s5)}
.srvtab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;
        border-radius:var(--r2);border:1px solid var(--line);background:var(--panel);
        color:var(--ink-2);font-family:var(--f-disp);font-size:14.5px;font-weight:700;
        letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
        transition:background .16s,border-color .16s,color .16s}
.srvtab::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--h)}
.srvtab:hover{border-color:var(--line-2);color:var(--ink)}
.srvtab.on{background:color-mix(in srgb,var(--h) 16%,var(--panel));
           border-color:color-mix(in srgb,var(--h) 55%,transparent);color:var(--ink)}

/* the boards shown inside a frame */
.shot{position:relative;max-width:1100px;margin:0 auto;border-radius:var(--r4);overflow:hidden;
      border:1px solid var(--line-2);background:var(--panel);
      box-shadow:0 40px 80px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04) inset}
.shot-tabs{margin:0;padding:11px 12px;background:var(--panel-2);
           border-bottom:1px solid var(--line)}
.shot-body{max-height:420px;overflow:hidden}
.shot-fade{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
           background:linear-gradient(to top,var(--bg),transparent)}

/* three compact ladders, this wipe */
.ladders{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);
         align-items:start}
.ladders>*{min-width:0}
.ladder{display:flex;flex-direction:column}
.ladder .panel-head{padding:var(--s3) var(--s5)}
.ladder .panel-head h3{font-size:15px;display:flex;align-items:center;gap:9px;letter-spacing:.05em;
                       text-transform:uppercase}
.ladder .panel-head img{width:22px;height:22px;flex:none}
.lad-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;
         padding:9px var(--s5);border-bottom:1px solid rgba(60,65,78,.45);font-size:14px}
.lad-row:last-child{border-bottom:0}
.lad-row .pos{font-family:var(--f-disp);font-size:13px;font-weight:700;color:var(--ink-3);
              text-align:right}
.lad-row.p1 .pos{color:var(--gold)} .lad-row.p2 .pos{color:var(--silver)}
.lad-row.p3 .pos{color:var(--bronze)}
.lad-row .nm{overflow-wrap:anywhere;line-height:1.35}
.lad-row .vl{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ladder .panel-foot .cap{font-size:11px;letter-spacing:.1em}
.ladder .panel-foot .link{font-size:12.5px;white-space:nowrap}


/* Full-bleed image hero, the treatment every competitor site uses and the one
   thing this landing never had. Real in-game art from the server, scrimmed
   hard so the type stays readable and the red identity still leads. */
.hero{position:relative;margin:0 0 var(--s7);min-height:clamp(360px,52vh,540px);
      display:flex;align-items:flex-end;overflow:hidden;
      border-bottom:1px solid var(--line)}
.hero-img{position:absolute;inset:0;background-image:url("/assets/img/hero.jpg");
          background-size:cover;background-position:center 42%;
          transform:scale(1.03);filter:saturate(.85) contrast(1.05)}
@media (max-width:900px){.hero-img{background-image:url("/assets/img/hero-sm.jpg")}}
/* scrim: dark from the bottom, red wash from the left, so text never fights the art */
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(27,29,35,.92) 22%, rgba(27,29,35,.45) 58%, rgba(27,29,35,.25) 100%),
    linear-gradient(105deg, rgba(227,58,69,.42) 0%, rgba(227,58,69,.10) 42%, transparent 68%)}
.hero-in{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;
         padding:var(--s8) var(--s6) var(--s7)}
.hero-mark{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.hero-mark h1{font-size:clamp(38px,6.4vw,76px);letter-spacing:.02em;line-height:.95;
              text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.75)}
.hero-mark h1 i{font-style:normal;color:var(--red)}
.hero-facts{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s4)}
.hero-facts>span{display:inline-flex;align-items:baseline;gap:7px;font-size:14px;color:var(--ink-2);
                 text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero-facts b{font-family:var(--f-disp);font-size:23px;font-weight:700;color:var(--ink);
              font-variant-numeric:tabular-nums}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}

/* ---------- 8. landing: interactive server picker ---------- */
.pickwrap{display:grid;grid-template-columns:300px 1fr;gap:var(--s5);align-items:start}
.pickwrap>*{min-width:0}

/* rail */
.rail-servers{display:grid;gap:6px}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
           padding:0 2px var(--s2)}
.rail-live{font-size:12.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.rail-live b{color:var(--ink);font-weight:750}
.rail-srv{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;
          background:var(--panel);border:1px solid var(--line);border-left:3px solid transparent;
          border-radius:var(--r2);transition:background .14s,border-color .14s,transform .14s}
.rail-srv:hover{background:var(--panel-2);transform:translateX(2px)}
.rail-srv.on{border-color:color-mix(in srgb,var(--h) 45%,var(--line));
             border-left-color:var(--h);background:color-mix(in srgb,var(--h) 9%,var(--panel))}
.rs-rate{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r2);
         font-family:var(--f-disp);font-size:19px;font-weight:700;color:var(--h);
         background:color-mix(in srgb,var(--h) 18%,var(--bg-2));
         border:1px solid color-mix(in srgb,var(--h) 45%,var(--line))}
.rs-rate i{font-style:normal;font-size:12px;opacity:.75}
.rs-body{min-width:0;flex:1}
.rs-name{display:block;font-family:var(--f-disp);font-size:16px;font-weight:700;letter-spacing:.03em;
         text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-state{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);margin-top:2px}

/* featured panel */
.feature{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
         border-radius:var(--r4);box-shadow:var(--lift-2)}
.feature::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--h)}
.ft-glow{position:absolute;inset:0;pointer-events:none;
         background:radial-gradient(760px 340px at 84% -20%,
                    color-mix(in srgb,var(--h) 22%,transparent),transparent 68%)}
.feature.swap .ft-head,.feature.swap .ft-body,.feature.swap .ft-act{animation:ftin .28s ease both}
@keyframes ftin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ft-head{position:relative;display:flex;align-items:center;gap:var(--s5);
         padding:var(--s6) var(--s6) var(--s4);flex-wrap:wrap}
.ft-rate{flex:none;display:grid;place-items:center;width:74px;height:74px;border-radius:var(--r3);
         font-family:var(--f-disp);line-height:1;color:var(--h);
         background:color-mix(in srgb,var(--h) 20%,var(--bg-2));
         border:1px solid color-mix(in srgb,var(--h) 55%,var(--line));
         box-shadow:0 0 30px -10px var(--h)}
.ft-rate span{font-size:34px;font-weight:700}
.ft-rate i{font-style:normal;font-size:16px;opacity:.75}
.ft-id{flex:1;min-width:0}
.ft-id h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:.02em;text-transform:uppercase}
.ft-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ft-live{flex:none;text-align:right}
.ft-live-n{display:flex;align-items:center;justify-content:flex-end;gap:8px;
           font-family:var(--f-disp);font-size:38px;font-weight:700;line-height:1}
.ft-live-l{display:block;font-size:12px;color:var(--ink-3);margin-top:4px;
           letter-spacing:.06em;text-transform:uppercase}

.ft-body{position:relative;display:grid;grid-template-columns:1fr 300px;gap:var(--s5);
         padding:0 var(--s6) var(--s5);align-items:end}
.ft-body>*{min-width:0}
.ft-wipe .cap{display:block;margin-bottom:2px}
.ft-clock{display:block;font-family:var(--f-disp);font-size:clamp(40px,6vw,64px);font-weight:700;
          line-height:1;letter-spacing:.01em;color:var(--h);font-variant-numeric:tabular-nums}
.ft-when{display:block;font-size:13px;color:var(--ink-3);margin-top:6px}
.ft-side{display:grid;gap:var(--s3)}
.ft-top .cap,.ft-last .cap{display:block;margin-bottom:5px}
.ft-top-who{display:flex;align-items:center;gap:9px;font-size:14.5px}
.ft-top-who b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-top-n{margin-left:auto;font-family:var(--f-disp);font-size:19px;font-weight:700;color:var(--h)}
.ft-last b{font-size:15px;font-weight:650}

/* connect line: monospace address plus a copy affordance */
.copyline{display:flex;align-items:center;gap:9px;height:50px;padding:0 14px;min-width:0;
          border-radius:var(--r2);background:var(--bg-2);border:1px solid var(--line);
          font-family:var(--f-mono);font-size:13px;color:var(--ink-2);
          transition:border-color .14s,color .14s}
.copyline:hover{border-color:var(--line-2);color:var(--ink)}
.copyline span{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;
               white-space:nowrap}
.copyline svg{width:15px;height:15px;flex:none;color:var(--ink-3)}
.copyline.done{border-color:var(--green);color:var(--green)}
.copyline.done svg{color:var(--green)}

/* an unknown schedule must not shout: no giant "not set" */
.ft-clock.unset{font-size:22px;color:var(--ink-3);font-weight:600}

.ft-act{position:relative;display:flex;align-items:center;gap:var(--s3);
        padding:var(--s4) var(--s6) var(--s6);flex-wrap:wrap}
.ft-act .copyline{flex:1;min-width:220px}
.ft-join{flex:none;min-width:150px}

.entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);
       margin-top:var(--s7)}
.entry>*{min-width:0}
.entry-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);background:var(--panel);
            border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--lift);
            transition:border-color .15s,transform .15s}
.entry-card:hover{border-color:color-mix(in srgb,var(--h) 45%,var(--line));transform:translateY(-2px)}
.entry-card .ic{width:42px;height:42px;flex:none;border-radius:var(--r2);display:grid;place-items:center;
                background:color-mix(in srgb,var(--h) 14%,var(--panel-2));
                border:1px solid color-mix(in srgb,var(--h) 34%,transparent);color:var(--h)}
.entry-card .ic svg{width:21px;height:21px}
.entry-card .tx{flex:1;min-width:0}
.entry-card .tx b{display:block;font-family:var(--f-disp);font-size:17px;font-weight:700;
                  letter-spacing:.04em;text-transform:uppercase}
.entry-card .tx span{font-size:13px;color:var(--ink-3)}
.entry-card .go{color:var(--ink-3);flex:none}

/* ---------- 9. profile ---------- */
.pf-head{display:flex;align-items:center;gap:var(--s5);padding:var(--s5);border-radius:var(--r3);
         background:linear-gradient(100deg,var(--red-soft),var(--panel) 42%);
         border:1px solid var(--line);box-shadow:var(--lift);margin-bottom:var(--s5)}
.pf-head .id{flex:1;min-width:0}
.pf-head h1{font-size:clamp(26px,3vw,34px);letter-spacing:.01em;overflow-wrap:anywhere}
.pf-head .sid{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.pf-head .seen{font-size:13px;color:var(--ink-2);margin-top:6px}
.pf-links{display:flex;gap:var(--s2);flex:none;flex-wrap:wrap}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s3);
      margin-bottom:var(--s5)}
.kpis>*{min-width:0}
.kpi{padding:var(--s4);border-radius:var(--r2);background:var(--panel);border:1px solid var(--line)}
.kpi b{display:block;font-family:var(--f-disp);font-size:29px;font-weight:700;line-height:1.1;
       font-variant-numeric:tabular-nums}
.kpi span{display:block;font-family:var(--f-disp);font-size:12px;color:var(--ink-3);margin-top:3px;
          letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.kpi.k-kd b{color:var(--red)}

.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--s5);align-items:start}
.pf-grid>*{min-width:0}
.pf-belowsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4);
               align-items:start}
.pf-belowsplit>*{min-width:0}

/* every grid child here must be allowed to shrink, or one long row widens the
   whole column and pushes the page sideways */
.side-stack{display:grid;gap:var(--s4)}
.side-stack>*,.tk-main>*,.queue>*,.tix>*,.cans>*,.kpis>*,.qtiles>*{min-width:0}
.dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);
    overflow:hidden}
.dl>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
        padding:9px var(--s4);background:var(--panel);font-size:13.5px;min-width:0}
.dl>div>span:first-child{color:var(--ink-3);font-size:12.5px;flex:none}
.dl>div>b{font-weight:650;text-align:right;min-width:0;overflow-wrap:anywhere}

.place{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
       padding:9px var(--s4);border-bottom:1px solid rgba(60,65,78,.5);font-size:13.5px}
.place:last-child{border-bottom:0}
.place .nm{overflow-wrap:anywhere}
.place .vl{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mv{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:750;margin-left:6px}
.mv-up{color:var(--green)} .mv-dn{color:#ff8b94} .mv-flat{color:var(--ink-3)}

.badges{display:flex;flex-wrap:wrap;gap:7px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:var(--r2);
       font-size:12.5px;font-weight:650;background:var(--red-soft);
       border:1px solid rgba(227,58,69,.3);color:#ffa8ae}
.badge img{width:18px;height:18px}

.played-row{display:flex;align-items:center;gap:10px;padding:9px var(--s4);
            border-bottom:1px solid rgba(60,65,78,.5);font-size:13.5px}
.played-row:last-child{border-bottom:0}
.played-row b{flex:1;font-weight:650;min-width:0;overflow-wrap:anywhere}
.played-row .m{font-size:12px;color:var(--ink-3);white-space:nowrap}

/* ---------- 10. tickets ---------- */
.tix{display:grid;gap:8px}
.tix-row{display:grid;grid-template-columns:auto 96px 1fr auto auto;gap:var(--s4);align-items:center;
         padding:var(--s4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
         transition:border-color .14s,transform .14s}
.tix-row>*{min-width:0}
.tix-row:hover{border-color:var(--line-2);transform:translateX(2px)}
.tix-row .unread{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;
                 box-shadow:0 0 0 3px rgba(227,58,69,.2)}
.tix-row .unread.off{background:transparent;box-shadow:none}
.tix-row .code{font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.tix-row .subj b{display:block;font-size:15px;font-weight:650;overflow-wrap:anywhere}
.tix-row .subj span{font-size:12.5px;color:var(--ink-3)}
.tix-row .when{font-size:12.5px;color:var(--ink-3);white-space:nowrap}

.st{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 10px;border-radius:5px;
    font-size:12px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-open{background:var(--red-soft);color:#ff8b94;border:1px solid rgba(227,58,69,.34)}
.st-answered{background:rgba(58,192,109,.13);color:var(--green);border:1px solid rgba(58,192,109,.34)}
.st-closed{background:rgba(115,125,139,.14);color:var(--ink-3);border:1px solid var(--line-2)}

.cat{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:5px;
     font-size:11.5px;font-weight:650;border:1px solid;white-space:nowrap}
.cat-cheat_report{color:#ff8b94;background:var(--red-soft);border-color:rgba(227,58,69,.32)}
.cat-player_report{color:var(--amber);background:rgba(237,166,60,.11);border-color:rgba(237,166,60,.3)}
.cat-bug{color:var(--violet);background:rgba(155,125,255,.11);border-color:rgba(155,125,255,.3)}
.cat-question{color:var(--blue);background:rgba(79,157,255,.11);border-color:rgba(79,157,255,.3)}
.cat-appeal{color:var(--green);background:rgba(58,192,109,.11);border-color:rgba(58,192,109,.3)}
.cat-other{color:var(--ink-2);background:rgba(255,255,255,.045);border-color:var(--line-2)}

.pickcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}
.pickcards>*{min-width:0}
.pickcards label{display:flex;flex-direction:column;gap:3px;padding:var(--s4);background:var(--panel-2);
                 border:1px solid var(--line);border-radius:var(--r2);cursor:pointer;
                 transition:border-color .14s,background .14s}
.pickcards label:hover{border-color:var(--line-2)}
.pickcards input{position:absolute;opacity:0;pointer-events:none}
.pickcards label:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.pickcards b{font-size:14px;font-weight:650}
.pickcards span{font-size:12px;color:var(--ink-3);line-height:1.4}

.tk{display:grid;grid-template-columns:1fr 350px;gap:var(--s5);align-items:start}
.tk>*{min-width:0}
.tk-main{display:grid;gap:var(--s4);min-width:0}
.tk-side{display:grid;gap:var(--s4)}

.trail li{position:relative;display:flex;align-items:flex-start;gap:12px;padding:0 0 var(--s4);
          list-style:none}
.trail li:last-child{padding-bottom:0}
.trail li::before{content:"";position:absolute;left:6px;top:16px;bottom:-2px;width:1px;
                  background:var(--line)}
.trail li:last-child::before{display:none}
.trail .knob{width:13px;height:13px;border-radius:50%;flex:none;margin-top:4px;
             background:var(--panel-3);border:2px solid var(--ink-3);z-index:1}
.trail .t-open .knob{border-color:var(--red);background:var(--red-soft)}
.trail .t-reply .knob{border-color:var(--green);background:rgba(58,192,109,.25)}
.trail .tx{flex:1;min-width:0}
.trail .tx b{display:block;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.trail .tx span{font-size:12px;color:var(--ink-3)}

.thread{display:grid;gap:var(--s3)}
.bub{border-radius:var(--r2);border:1px solid var(--line);background:var(--panel-2);overflow:hidden}
.bub-head{display:flex;align-items:center;gap:9px;padding:10px var(--s4);
          background:rgba(21,23,28,.35);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bub-head .nm{font-size:13.5px;font-weight:700}
.bub-head .ts{margin-left:auto;font-size:12px;color:var(--ink-3)}
.bub-body{padding:var(--s4);font-size:15px;line-height:1.62;overflow-wrap:anywhere}
.bub-foot{padding:0 var(--s4) var(--s3);font-size:12px;color:var(--ink-3)}
.bub-player{border-left:3px solid var(--line-2)}
.bub-admin{border-left:3px solid var(--green);background:rgba(58,192,109,.045)}
.bub-ai{border-left:3px solid var(--violet);background:rgba(155,125,255,.05)}
.bub-system{border-left:3px solid var(--ink-3)}
.bub-system .bub-body{font-size:13.5px;color:var(--ink-2);padding:10px var(--s4)}
.bub-internal{border-left:3px solid var(--amber);background:rgba(237,166,60,.06);border-style:dashed}

.evid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.evid>*{min-width:0}
.evid-item{border-radius:var(--r2);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);
           transition:border-color .14s,transform .14s}
.evid-item:hover{border-color:var(--red);transform:translateY(-2px)}
.evid-item .thumb{aspect-ratio:16/10;display:grid;place-items:center;background:#0b0c0f;overflow:hidden}
.evid-item .thumb img{width:100%;height:100%;object-fit:cover}
.evid-item .thumb svg{width:28px;height:28px;color:var(--ink-3)}
.evid-item .nm{padding:6px 9px;font-size:11.5px;color:var(--ink-2);overflow:hidden;
               text-overflow:ellipsis;white-space:nowrap}

.composer{display:grid;gap:var(--s3)}
.comp-bar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.comp-foot{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.comp-foot .spacer{flex:1}
.cannedbox{position:relative}
.canned-pop{position:absolute;bottom:40px;left:0;z-index:70;width:330px;max-height:320px;
            overflow-y:auto;background:var(--panel);border:1px solid var(--line-2);
            border-radius:var(--r2);box-shadow:var(--lift-2)}
.canned-pop button{display:block;width:100%;text-align:left;padding:9px var(--s4);
                   border-bottom:1px solid var(--line)}
.canned-pop button:last-child{border-bottom:0}
.canned-pop button:hover{background:var(--panel-2)}
.canned-pop b{display:block;font-size:13.5px;font-weight:650}
.canned-pop span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
.canned-pop .none{padding:var(--s4);font-size:13px;color:var(--ink-3)}

.linkrow{display:grid;gap:6px}
.linkrow a{display:flex;align-items:center;justify-content:space-between;padding:9px var(--s4);
           font-size:13.5px;font-weight:600;background:var(--panel-2);border:1px solid var(--line);
           border-radius:var(--r2)}
.linkrow a:hover{border-color:var(--line-2);color:var(--red)}
.linkrow a svg{width:14px;height:14px;color:var(--ink-3)}

.aibox{padding:var(--s4);border-radius:var(--r2);font-size:13.5px;line-height:1.62;
       background:rgba(155,125,255,.06);border:1px solid rgba(155,125,255,.26);
       white-space:pre-wrap;overflow-wrap:anywhere;max-height:340px;overflow-y:auto}
.aisplit{display:grid;gap:var(--s4)}
@media (min-width:1181px){.aisplit:has(>div+div){grid-template-columns:1fr 1fr}}

/* accused-player panel */
.accused{display:grid;gap:var(--s3)}
.acc-how{font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
.acc-card{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--panel-2);
          margin-bottom:var(--s3)}
.acc-top{display:flex;align-items:center;gap:10px;padding:var(--s4);border-bottom:1px solid var(--line);
         flex-wrap:wrap}
.acc-top .id{flex:1;min-width:0}
.acc-top .id b{display:block;font-size:14.5px;font-weight:700;overflow-wrap:anywhere}
.acc-top .id span{font-size:11.5px;color:var(--ink-3)}
.acc-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.acc-metrics>div{padding:9px var(--s4);background:var(--panel);min-width:0}
.acc-metrics .v{font-family:var(--f-disp);font-size:17px;font-weight:700;
                font-variant-numeric:tabular-nums}
.acc-metrics .l{font-size:11px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;
                margin-top:1px}
.acc-metrics .v.flag{color:var(--amber)}
.acc-flags{padding:var(--s3) var(--s4);display:flex;flex-wrap:wrap;gap:5px;
           border-top:1px solid var(--line)}
.acc-note{padding:var(--s3) var(--s4);font-size:11.5px;color:var(--ink-3);
          border-top:1px solid var(--line);line-height:1.5}

/* ---------- 11. admin ---------- */
.qtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3);
        margin-bottom:var(--s5)}
.qtiles>*{min-width:0}
.qtile{padding:var(--s4);border-radius:var(--r2);background:var(--panel);border:1px solid var(--line)}
.qtile b{display:block;font-family:var(--f-disp);font-size:27px;font-weight:700;line-height:1.15;
         font-variant-numeric:tabular-nums}
.qtile span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.qtile.hot b{color:var(--red)}

.queue{display:grid;gap:8px}
.q-row{display:grid;grid-template-columns:100px 1fr 230px 130px 92px;gap:var(--s4);align-items:center;
       padding:var(--s4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
       transition:border-color .14s,transform .14s}
.q-row>*{min-width:0}
.q-row:hover{border-color:var(--line-2);transform:translateX(2px)}
.q-row.aged{border-left:3px solid var(--amber)}
.q-row.stale{border-left:3px solid var(--red)}
.q-row .code{font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.q-row .code .age{display:block;font-family:var(--f-ui);font-size:11.5px;color:var(--ink-3);
                  font-weight:500;margin-top:2px}
.q-row .subj b{display:block;font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;
               white-space:nowrap}
.q-row .subj .by{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
                 white-space:nowrap}
.q-row .marks{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.q-row .rt{font-size:12.5px;color:var(--ink-3)}

.cans{display:grid;gap:9px}
.can-row{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:start;padding:var(--s4);
         background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
.can-row>*{min-width:0}
.can-row b{font-size:14.5px;font-weight:700}
.can-row .prev{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.5;white-space:pre-wrap;
               overflow-wrap:anywhere}

/* ---------- 12. responsive ---------- */
@media (max-width:1240px){ .finder{display:none} }

@media (max-width:1120px){
  :root{--bar-h:56px}
  .pickwrap{grid-template-columns:1fr}
  .rail-servers{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));grid-auto-flow:row}
  .rail-head{grid-column:1/-1}
  .ft-body{grid-template-columns:1fr}
  .ft-side{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .tb-burger{display:grid;margin-left:auto}
  .tb-tabs{position:fixed;top:var(--bar-h);left:0;right:0;flex-direction:column;align-items:stretch;
           height:auto;padding:var(--s3);background:var(--panel);border-bottom:1px solid var(--line);
           box-shadow:var(--lift-2);display:none;gap:2px}
  .topbar.open .tb-tabs{display:flex}
  .tb-tab{height:46px;padding:0 var(--s4);border-radius:var(--r2)}
  .tb-tab.on{background:var(--panel-2)}
  .tb-tab.on::after{left:0;right:auto;top:11px;bottom:11px;width:2px;height:auto}
  .pf-grid{grid-template-columns:1fr}
  .tk{grid-template-columns:1fr}
  .tk-side{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .lower{grid-template-columns:1fr}
  .q-row{grid-template-columns:96px 1fr 200px}
  .q-row .rt,.q-row .when{display:none}
}

@media (max-width:820px){
  .tb-user span{display:none}
  .masthead{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .tk-side{grid-template-columns:1fr}
}

@media (max-width:620px){
  body{font-size:15.5px}
  .wrap{padding:0 var(--s4)}
  .page{padding:var(--s5) 0 var(--s8)}
  .panel-body{padding:var(--s4)}
  .panel-head{padding:var(--s3) var(--s4)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi b{font-size:24px}
  .rail-servers{grid-template-columns:1fr}
  .ft-head{padding:var(--s5) var(--s4) var(--s3);gap:var(--s4)}
  .ft-body,.ft-act{padding-left:var(--s4);padding-right:var(--s4)}
  .ft-live{text-align:left;width:100%}
  .ft-live-n{justify-content:flex-start;font-size:30px}
  .ft-rate{width:60px;height:60px}
  .ft-rate span{font-size:27px}
  .ft-act .copyline{order:3;flex-basis:100%;min-width:0}
  .hero{min-height:300px}
  .hero-in{padding:var(--s7) var(--s4) var(--s5)}
  .sect{padding:var(--s8) 0}
  .shot-body{max-height:280px}
  /* the connect address must show in full, so shrink it rather than clip it */
  .copyline{font-size:11px;gap:6px;padding:0 10px;height:44px}
  .copyline svg{width:13px;height:13px}
  .dt thead th,.dt tbody td{padding-left:var(--s3);padding-right:var(--s3);font-size:13.5px}
  .dt .who-col{min-width:150px}
  /* the profile sheet is stat-name plus three timeframes: let the name wrap so
     all three fit on a phone instead of the last one scrolling out of sight */
  .dt-sheet .who-col{min-width:96px;white-space:normal;overflow-wrap:anywhere}
  .dt-sheet thead th,.dt-sheet tbody td{padding-left:9px;padding-right:9px;font-size:13px}
  .ava{width:28px;height:28px}
  .tix-row{grid-template-columns:auto 1fr;row-gap:9px}
  .tix-row .code{grid-column:2}
  .tix-row .subj,.tix-row .when{grid-column:1/-1}
  .q-row{grid-template-columns:1fr;row-gap:9px}
  .pf-head{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .tabstrip button{padding:10px 12px;font-size:14px}
}

/* ==========================================================================
   13. Wrapped — the full-screen recap player.
   Behaves like a video: fixed running order, segmented progress, autoplay.
   Everything is sized in vw/vh so a scene fills whatever screen it lands on.
   ========================================================================== */
.wr{position:fixed;inset:0;z-index:60;display:grid;
    grid-template-rows:auto auto 1fr auto;overflow:hidden;background:var(--bg-2)}

/* a slow drifting pool of the server colour, so the screen is never flat */
.wr-bg{position:absolute;inset:-20%;z-index:0;pointer-events:none;
       background:
         radial-gradient(46% 40% at 24% 22%, color-mix(in srgb,var(--h) 42%,transparent), transparent 70%),
         radial-gradient(40% 44% at 78% 76%, color-mix(in srgb,var(--h) 26%,transparent), transparent 72%),
         radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,.5), transparent 80%);
       filter:blur(30px);animation:wrdrift 22s ease-in-out infinite alternate}
@keyframes wrdrift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to  {transform:translate3d(3%,2%,0) scale(1.12)}
}
/* fine noise stops the gradients from banding on cheap panels */
.wr-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
          background-image:radial-gradient(rgba(255,255,255,.05) .5px,transparent .5px);
          background-size:3px 3px}
/* Name the chrome that sits in the grid instead of excluding every overlay:
   the blanket rule kept out-specifying each new absolutely-positioned layer
   and dragging it back into the flow. */
.wr-segs,.wr-top,.wr-stage,.wr-bar{position:relative;z-index:3}

/* segmented progress, one bar per scene */
.wr-segs{display:flex;gap:4px;padding:10px 14px 0}
.wr-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.wr-seg>i{display:block;height:100%;width:0;background:#fff;border-radius:2px}

.wr-top{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);flex-wrap:wrap}
.wr-back{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:var(--r2);
         border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:var(--ink)}
.wr-back:hover{background:rgba(0,0,0,.45)}
.wr-who{display:flex;align-items:center;gap:10px;min-width:0}
.wr-who-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.wr-who-tx b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-who-tx span{font-size:12px;color:var(--ink-2)}
.wr-switch{margin-left:auto;display:flex;gap:6px;padding:4px;border-radius:99px;
           background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12)}
.wr-sw{padding:7px 15px;border-radius:99px;font-family:var(--f-disp);font-size:13px;
       font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
       white-space:nowrap}
.wr-sw.on{background:#fff;color:#14161b}
.wr-sw:not(.on):hover{color:var(--ink)}

/* the stage. One scene at a time, centred, click to advance. */
.wr-stage{display:grid;place-items:center;padding:var(--s5) var(--s6);cursor:pointer;
          overflow:hidden;outline:none}
.wr-scene{width:min(940px,100%);text-align:center;opacity:0;transform:translateY(18px)}
.wr-scene.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}

.wr-kick{display:block;font-family:var(--f-disp);font-size:clamp(12px,1.5vw,15px);font-weight:700;
         letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);
         margin-bottom:var(--s4)}
.wr-title{font-size:clamp(38px,7.5vw,92px);line-height:1;letter-spacing:-.01em;
          text-transform:uppercase}
.wr-title.sm{font-size:clamp(28px,4.4vw,54px)}
.wr-sub{margin-top:var(--s4);font-size:clamp(15px,1.9vw,21px);color:rgba(255,255,255,.72)}
.wr-note{margin-top:var(--s5);font-size:13.5px;color:rgba(255,255,255,.5);
         max-width:44ch;margin-inline:auto}

/* the hero number: the thing the scene is actually about */
.wr-hero{font-family:var(--f-disp);font-weight:700;line-height:.9;
         font-size:clamp(64px,15vw,196px);letter-spacing:-.02em;
         font-variant-numeric:tabular-nums;
         background:linear-gradient(180deg,#fff 28%,color-mix(in srgb,var(--h) 78%,#fff));
         -webkit-background-clip:text;background-clip:text;color:transparent;
         text-shadow:0 24px 60px rgba(0,0,0,.5)}

.wr-rank{display:inline-flex;align-items:baseline;gap:8px;margin-top:var(--s5);
         padding:8px 18px;border-radius:99px;font-size:14px;color:rgba(255,255,255,.78);
         background:color-mix(in srgb,var(--h) 26%,rgba(0,0,0,.3));
         border:1px solid color-mix(in srgb,var(--h) 55%,transparent)}
.wr-rank span{font-family:var(--f-disp);font-size:22px;font-weight:700;color:#fff}

/* supporting numbers, staggered in behind the hero */
.wr-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5) var(--s8);
          margin-top:var(--s7)}
.wr-stat{display:flex;flex-direction:column;gap:2px;min-width:110px;
         opacity:0;transform:translateY(12px);
         animation:wrpop .55s cubic-bezier(.2,.7,.3,1) var(--d,.4s) forwards}
.wr-stat b{font-family:var(--f-disp);font-size:clamp(26px,3.4vw,42px);font-weight:700;
           line-height:1;color:#fff}
.wr-stat span{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
              color:rgba(255,255,255,.55)}
@keyframes wrpop{to{opacity:1;transform:none}}

/* ranked rows with a bar that grows to the row share */
.wr-list{margin-top:var(--s6);display:grid;gap:9px;text-align:left}
.wr-lrow{position:relative;display:flex;align-items:center;gap:var(--s4);
         padding:13px var(--s5);border-radius:var(--r2);
         background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);overflow:hidden;
         opacity:0;transform:translateY(12px);
         animation:wrpop .5s cubic-bezier(.2,.7,.3,1) var(--d,.4s) forwards}
.wr-lrank{position:relative;flex:0 0 auto;min-width:26px;font-family:var(--f-disp);
          font-size:17px;font-weight:700;color:var(--ink-3);text-align:right}
.wr-lrow:nth-child(1) .wr-lrank{color:var(--gold)}
.wr-lrow:nth-child(2) .wr-lrank{color:var(--silver)}
.wr-lrow:nth-child(3) .wr-lrank{color:var(--bronze)}
.wr-lico{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:var(--r1);
         object-fit:cover;background:rgba(255,255,255,.06)}
.wr-lbar{position:absolute;inset:0 auto 0 0;width:0;border-radius:var(--r2);
         background:color-mix(in srgb,var(--h) 30%,transparent);
         animation:wrbar .9s cubic-bezier(.2,.7,.3,1) calc(var(--d,.4s) + .15s) forwards}
@keyframes wrbar{to{width:var(--w,0%)}}
.wr-lname{position:relative;font-size:15.5px;overflow-wrap:anywhere;flex:1 1 auto;min-width:0}
.wr-lval{position:relative;font-family:var(--f-disp);font-size:19px;font-weight:700;
         white-space:nowrap;flex:0 0 auto;margin-left:auto}
.wr-lrow.good .wr-lval{color:var(--gold)}

.wr-acts{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s7)}

/* transport */
.wr-bar{display:flex;align-items:center;justify-content:center;gap:var(--s3);
        padding:var(--s4) var(--s5) var(--s6);flex-wrap:wrap}
.wr-ctl{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
        border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.3);color:var(--ink);
        transition:background .15s,transform .1s}
.wr-ctl:hover{background:rgba(0,0,0,.55)}
.wr-ctl:active{transform:scale(.94)}
.wr-play{width:52px;height:52px;background:#fff;color:#14161b;border-color:#fff}
.wr-play:hover{background:#e8ecf2}
.wr-play .i-play{display:none}
.wr.paused .wr-play .i-play{display:block}
.wr.paused .wr-play .i-pause{display:none}

.wr-srv{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
        margin-left:var(--s5);padding-left:var(--s5);border-left:1px solid rgba(255,255,255,.14)}
.wr-srvb{padding:8px 13px;border-radius:var(--r2);font-family:var(--f-disp);font-size:12.5px;
         font-weight:700;letter-spacing:.05em;text-transform:uppercase;
         color:rgba(255,255,255,.6);border:1px solid transparent;white-space:nowrap}
.wr-srvb:hover{color:#fff}
.wr-srvb.on{color:#fff;background:color-mix(in srgb,var(--h) 24%,transparent);
            border-color:color-mix(in srgb,var(--h) 55%,transparent)}

.wr-fallback{padding:var(--s7);text-align:center}

/* the empty state gets the same treatment, it is a real answer */
.wr-none{display:grid;place-items:center;min-height:60vh;text-align:center;gap:var(--s5);
         padding:var(--s6)}

@media (max-width:760px){
  .wr-switch{margin-left:0;width:100%;justify-content:center}
  .wr-stage{padding:var(--s4)}
  .wr-stats{gap:var(--s5)}
  .wr-stat{min-width:90px}
  .wr-srv{margin-left:0;padding-left:0;border-left:0;width:100%;margin-top:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  .wr-bg{animation:none}
  .wr-stat,.wr-lrow{opacity:1;transform:none;animation:none}
  .wr-lbar{animation:none;width:var(--w,0%)}
}

/* ==========================================================================
   14. Deep tracking — journey map (player) and staff console.
   ========================================================================== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);
           flex-wrap:wrap;margin-bottom:var(--s6)}
.page-head h1{font-size:clamp(28px,3.6vw,40px);text-transform:uppercase;letter-spacing:.01em}
.page-head p{margin-top:6px;font-size:14px}
.page-head>*{min-width:0}

/* the square canvas sits in a fixed-ratio box so it never jumps on load */
.jmap-wrap{display:grid;place-items:center;background:var(--bg-2);border-radius:var(--r2);
           border:1px solid var(--line);padding:var(--s3)}
.jmap-wrap canvas{display:block;border-radius:var(--r1);max-width:100%}

.jlegend{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4);
         font-size:12.5px;color:var(--ink-2)}
.jlegend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block}
.sw-route{background:var(--h)} .sw-own{background:var(--green)}
.sw-other{background:var(--red)} .sw-mon{background:var(--amber)}
.sw-kill{background:transparent;border:2px solid var(--green);border-radius:2px}
.sw-death{background:transparent;border:2px solid var(--red);border-radius:50%}
.jnote{margin-top:var(--s4);font-size:12.5px;line-height:1.5}

.jgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.jgrid>*{min-width:0}
.jside{display:grid;gap:var(--s5);min-width:0}
.jwide{grid-column:1 / -1}

/* one bar row, used for zone splits, buckets and event mixes alike */
.jrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
      align-items:center;gap:var(--s4);padding:11px var(--s5);
      border-bottom:1px solid rgba(60,65,78,.5);overflow:hidden}
.jrow:last-child{border-bottom:0}
.jbar{position:absolute;inset:0 auto 0 0;width:var(--w,0%);
      background:color-mix(in srgb,var(--h,var(--red)) 20%,transparent)}
.jname{position:relative;font-size:14px;overflow-wrap:anywhere}
.jrow b{position:relative;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--s5)}
.kpis-wide{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--s6)}
.kpis>*{min-width:0}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi b{font-family:var(--f-disp);font-size:26px;font-weight:700;line-height:1.1;
       font-variant-numeric:tabular-nums}
.kpi b i{font-style:normal;font-size:14px;opacity:.6;margin-left:2px}
.kpi span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.kpis-wide .kpi{padding:var(--s4) var(--s5);background:var(--panel);
                border:1px solid var(--line);border-radius:var(--r2)}

.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s5);
       align-items:start}
.sgrid>*{min-width:0}

/* 24 columns, one per hour */
.hbars{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:150px}
.hbar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px}
.hbar>i{display:block;width:100%;background:color-mix(in srgb,var(--red) 55%,var(--panel-3));
        border-radius:2px 2px 0 0;min-height:2px}
.hbar>span{font-size:9px;color:var(--ink-3);text-align:center;height:11px}
.hbar:hover>i{background:var(--red)}

.tabstrip.sub{margin:var(--s4) 0 var(--s5)}

@media (max-width:980px){
  .jgrid{grid-template-columns:minmax(0,1fr)}
  .jwide{grid-column:auto}
}

/* map scene inside Wrapped */
.wr-mapbox{margin-top:var(--s5);display:grid;place-items:center}
.wr-mapbox canvas{border-radius:var(--r2);border:1px solid rgba(255,255,255,.12);
                  max-width:min(56vh,100%);max-height:56vh}

/* filter chips: what the current staff view is narrowed to, click to clear */
.fchips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:var(--s5)}
.fchip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;
       border-radius:99px;background:color-mix(in srgb,var(--red) 15%,var(--panel));
       border:1px solid color-mix(in srgb,var(--red) 45%,transparent);
       color:var(--ink);font-size:13px}
.fchip .cap{font-size:11px;letter-spacing:.1em}
.fchip b{font-weight:650}
.fchip:hover{background:color-mix(in srgb,var(--red) 26%,var(--panel))}

/* an event name that is also a link */
.chip-link{color:var(--ink-2);transition:background .14s,color .14s}
.chip-link:hover{background:var(--panel-3);color:var(--ink);border-color:var(--line-2)}

/* JSON keys available on an event type */
.keytabs{display:inline-flex;gap:6px;flex-wrap:wrap}
.keytab{padding:4px 10px;border-radius:99px;font-size:11.5px;font-family:var(--f-mono);
        background:var(--panel-2);border:1px solid var(--line);color:var(--ink-3)}
.keytab:hover{color:var(--ink)}
.keytab.on{background:color-mix(in srgb,var(--red) 20%,var(--panel-2));
           border-color:color-mix(in srgb,var(--red) 50%,transparent);color:var(--ink)}

/* the per-hour series on an event drill-down can be far more than 24 columns */
.hbars-wide{grid-template-columns:repeat(auto-fit,minmax(4px,1fr));height:120px}
.hbars-wide .hbar>span{display:none}

/* Rust's own menu footage behind each Wrapped scene. Sits under the colour
   wash and the grain, so the palette still reads as RustyRemains rather than
   as a video playing. */
.wr-bgvid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
          opacity:0;transition:opacity .5s ease;pointer-events:none;
          filter:saturate(.85) contrast(1.05)}
.wr-bgvid.on{opacity:.42}
.wr .wr-bg{z-index:1;mix-blend-mode:screen;opacity:.75}
.wr .wr-grain{z-index:2}
.wr-clock{font-variant-numeric:tabular-nums;letter-spacing:.02em;min-height:1.2em}
@media (prefers-reduced-motion:reduce){ .wr-bgvid{display:none} }

/* Rust's own item art next to the numbers it belongs to */
.wr-ico{width:34px;height:34px;object-fit:contain;margin:0 auto 4px;
        filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.wr-heroico{width:clamp(90px,13vw,150px);height:auto;object-fit:contain;
            margin:0 auto var(--s4);filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.wr-stat{align-items:center;text-align:center}
/* small inline icon for tables */
.iico{width:20px;height:20px;object-fit:contain;vertical-align:-5px;margin-right:6px}

/* Wrapped sharing: publishing is opt-in, so the control reads as an action
   until it is on, then becomes the link itself. */
.wr-share{display:inline-flex;margin-left:auto}
.wr-sharebtn{height:34px;padding:0 16px;border-radius:99px;font-family:var(--f-disp);
             font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
             border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.32);color:var(--ink);
             transition:background .15s,border-color .15s}
.wr-sharebtn:hover{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.5)}
.wr-sharebtn.on{background:var(--green);border-color:var(--green);color:#0d1a12}
.wr-copy{display:inline-flex;align-items:center;gap:8px;max-width:340px;height:34px;
         padding:0 12px;border-radius:99px;background:rgba(0,0,0,.32);
         border:1px solid rgba(255,255,255,.18);color:var(--ink-2);
         font-family:var(--f-mono);font-size:11.5px}
.wr-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-copy:hover{color:var(--ink);border-color:rgba(255,255,255,.4)}
.wr-copy.done{border-color:var(--green);color:var(--green)}
.wr-copy.failed{border-color:var(--amber);color:var(--amber)}
.wr-shared{margin-left:auto;padding:6px 14px;border-radius:99px;
           background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.18);
           color:var(--ink-2)}
.wr-archive .wr-srvb{font-size:11.5px;letter-spacing:.03em}
@media (max-width:760px){ .wr-copy{max-width:100%;order:5} .wr-share{margin-left:0} }

/* Preload gate: the recap does not start until every backdrop is in memory,
   so no scene opens on a black frame. */
.wr-loader{position:absolute;inset:0;z-index:9;display:grid;place-content:center;
           justify-items:center;gap:var(--s5);background:var(--bg-2);
           transition:opacity .45s ease}
.wr-loader.gone{opacity:0;pointer-events:none}
.wr-loadbar{width:min(320px,60vw);height:3px;border-radius:2px;
            background:rgba(255,255,255,.14);overflow:hidden}
.wr-loadbar>i{display:block;height:100%;width:0;border-radius:2px;
              background:var(--h);transition:width .3s ease}
.wr-loadtx{font-family:var(--f-disp);font-size:13px;font-weight:700;letter-spacing:.16em;
           text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Chapter rail. Sits over the scene rather than stealing width from it, so the
   hero numbers stay centred on the screen. */
.wr-chapters{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:4;
             display:flex;flex-direction:column;gap:1px;padding:var(--s4) var(--s3);
             max-height:76vh;overflow-y:auto;scrollbar-width:none}
.wr-chapters::-webkit-scrollbar{display:none}
.wr-chap{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;
         border-radius:99px;background:none;border:0;cursor:pointer;
         font-family:var(--f-disp);font-size:12.5px;font-weight:700;letter-spacing:.07em;
         text-transform:uppercase;color:rgba(255,255,255,.34);white-space:nowrap;
         transition:color .18s,background .18s}
.wr-chap:hover{color:rgba(255,255,255,.8);background:rgba(0,0,0,.3)}
.wr-chapdot{width:6px;height:6px;border-radius:50%;flex:none;
            background:rgba(255,255,255,.28);transition:background .18s,transform .18s}
.wr-chap.seen{color:rgba(255,255,255,.5)}
.wr-chap.seen .wr-chapdot{background:rgba(255,255,255,.5)}
.wr-chap.on{color:#fff;background:rgba(0,0,0,.42)}
.wr-chap.on .wr-chapdot{background:var(--h);transform:scale(1.5);
                        box-shadow:0 0 0 4px color-mix(in srgb,var(--h) 30%,transparent)}

@media (max-width:1180px){
  .wr-chapters{position:static;transform:none;flex-direction:row;max-height:none;
               overflow-x:auto;padding:0 var(--s5) var(--s3);gap:4px}
  .wr-chap{padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){ .wr-loader{transition:none} }

/* ---------- Wrapped scene builder (/admin/wrapped) ---------- */
.wb-list{display:flex;flex-direction:column;gap:8px;margin:var(--s3) 0}
.wb-row{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:6px;
        background:var(--panel-2,#161311);border:1px solid var(--line)}
.wb-row.off{opacity:.45}
.wb-row[draggable=true]{cursor:grab}
.wb-grip{color:var(--dim);font-size:16px;line-height:1;padding-top:2px;user-select:none}
.wb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.wb-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wb-top b{font-size:13.5px}
.wb-en{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);cursor:pointer}
.wb-del{margin-left:auto;background:none;border:0;color:var(--dim);font-size:18px;
        line-height:1;cursor:pointer;padding:0 4px}
.wb-del:hover{color:var(--hot,#ce422b)}
.wb-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}
.wb-fields input{background:#12100e;color:inherit;border:1px solid var(--line);
                 border-radius:4px;padding:6px 8px;font:inherit;font-size:12.5px;min-width:0}
.wb-stats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
          padding-top:6px;border-top:1px dashed var(--line)}
.wb-stats .cap{width:100%}
.wb-stat{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;
         padding:3px 7px;border:1px solid var(--line);border-radius:999px}
.wb-stat b{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.wb-add{display:flex;gap:8px;align-items:center;margin-top:var(--s3)}
.wb-add select{background:#12100e;color:inherit;border:1px solid var(--line);
               border-radius:4px;padding:6px 8px;font:inherit;font-size:12.5px}
.wb-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wb-actions form{margin:0}
.ok-note{border-color:var(--ok,#7fb069)}

/* ============================ admin shell ============================ */
.wrap.wide{max-width:1560px}
.ashell{display:grid;grid-template-columns:212px minmax(0,1fr);gap:var(--s7);
        padding:var(--s7) 0 var(--s9)}
.apage{min-width:0}

/* The staff area is a different product from the public site, so its shell says
   so at a glance: cooler bar, a marked brand, and no player tabs at all. The
   colour is a slate shift rather than a new hue, because a second accent would
   compete with the status colours the pages themselves rely on. */
.topbar-staff{background:rgba(20,23,30,.94);border-bottom-color:var(--line-2);
              box-shadow:inset 0 -1px 0 rgba(255,255,255,.03)}
.topbar-staff .tb-in{gap:var(--s4)}
.topbar-staff .tb-brand .glyph{background:linear-gradient(150deg,#3d4351,#2a2f3a);
                               box-shadow:0 6px 14px -8px rgba(0,0,0,.9)}
.topbar-staff .tb-brand .glyph svg{stroke:#cfd4de}
.tb-env{font-family:var(--f-disp);font-size:10.5px;font-weight:750;letter-spacing:.14em;
        text-transform:uppercase;color:var(--ink-2);background:var(--panel-2);
        border:1px solid var(--line-2);border-radius:5px;padding:3px 7px;margin-left:4px}
.tb-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
         color:var(--ink-2);padding:7px 11px;border-radius:var(--r2);
         border:1px solid var(--line-2);white-space:nowrap}
.tb-back:hover{color:var(--ink);background:var(--panel-2);border-color:var(--line-3,var(--line-2))}
.topbar-staff .tb-right{margin-left:auto}

.stafffoot{max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--s6) var(--s7);
           display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
           border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.stafffoot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.stafffoot a:hover{color:var(--ink)}

.asnav{position:sticky;top:calc(var(--bar-h) + 16px);align-self:start;
       max-height:calc(100vh - var(--bar-h) - 32px);overflow-y:auto;padding-right:4px}
.asg{margin-bottom:var(--s5)}
.asg h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
        font-weight:750;margin:0 0 6px 10px}
.asnav a{display:flex;align-items:center;justify-content:space-between;gap:8px;
         padding:7px 10px;border-radius:6px;font-size:14px;color:var(--ink-2);
         border-left:2px solid transparent;transition:background .13s,color .13s}
.asnav a:hover{background:var(--panel);color:var(--ink)}
.asnav a.on{background:var(--panel-2);color:var(--ink);border-left-color:var(--red);font-weight:650}
.asnav .badge{background:var(--red);color:#fff;font-size:10.5px;font-weight:750;
              min-width:17px;height:17px;padding:0 5px;border-radius:9px;
              display:inline-flex;align-items:center;justify-content:center}

.afilter{margin-bottom:var(--s4);flex-wrap:wrap;max-width:100%}
.afilter a{white-space:nowrap}
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--s4);
       margin-bottom:var(--s4)}
.agrid>*{min-width:0;margin-bottom:0}
.apage section.panel{margin-bottom:var(--s4)}
.apager{display:flex;align-items:center;gap:var(--s4);justify-content:center;
        padding:var(--s4) 0 var(--s6)}
.asearch{display:flex;gap:8px;align-items:center}
.asearch .inp{width:230px}
.qdelta{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.qdelta.up{color:var(--green)} .qdelta.down{color:#ff8b94}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3)}
.kv>div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;
        background:var(--bg-2);border-radius:var(--r1);font-size:13.5px}
.kv span{color:var(--ink-3)}
.cbox{display:flex;align-items:center;gap:9px;margin-bottom:var(--s3);font-size:14px;color:var(--ink-2)}
.cutform{display:flex;gap:8px;align-items:center;margin-top:10px}
.cutform .inp{width:auto}

/* activity feed */
.feed{display:flex;flex-direction:column}
.fday{padding:9px var(--s5);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--ink-3);background:var(--bg-2);font-weight:700;position:sticky;top:var(--bar-h);z-index:2}
.frow{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;
      padding:8px var(--s5);border-bottom:1px solid rgba(60,65,78,.5);font-size:13.5px}
.frow:last-child{border-bottom:0}
.frow:hover{background:rgba(255,255,255,.02)}
.fcat{font-size:10.5px;font-weight:750;letter-spacing:.03em;text-transform:uppercase;
      color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-kill,.fc-raid{color:#ff8b94} .fc-chat,.fc-social{color:var(--green)}
.fc-economy,.fc-kit{color:#f0a869} .fc-session{color:var(--blue)}
.fc-report,.fc-mute{color:var(--amber)} .fc-event,.fc-clan{color:#b39dff}
.ftxt{color:var(--ink-2);overflow-wrap:anywhere}
.ftxt b{color:var(--ink)}
.fts{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

.catbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4)}
.catbar a{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:6px;
          font-size:13px;color:var(--ink-2);background:var(--panel);border:1px solid var(--line)}
.catbar a:hover{background:var(--panel-2);color:var(--ink)}
.catbar a.on{background:var(--panel-3);color:var(--ink);border-color:var(--line-2);font-weight:650}
.catbar .n{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* chat log */
.chatlog{display:flex;flex-direction:column;font-size:13.5px}
.cline{display:flex;gap:10px;align-items:baseline;padding:5px var(--s5);flex-wrap:wrap}
.cline:hover{background:rgba(255,255,255,.02)}
.ct{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.cn{flex:none;font-weight:650}
.cm{color:var(--ink-2);overflow-wrap:anywhere}
.cm mark{background:rgba(237,166,60,.28);color:var(--ink);border-radius:3px;padding:0 2px}

/* player detail header */
.phead{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;padding:var(--s3) 0 var(--s6)}
.pmeta{flex:1;min-width:220px}
.pmeta h1{font-size:clamp(24px,3vw,32px);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pcell{display:flex;align-items:center;gap:9px}

/* funnel + segments */
.funnel,.segbars{display:grid;gap:7px}
.fstage,.segrow{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) 74px 52px;
                gap:var(--s3);align-items:center;font-size:13.5px}
.segrow{padding:6px 8px;border-radius:var(--r1)}
.segrow:hover{background:var(--panel-2)}
.segrow.on{background:var(--panel-3)}
.fl,.sl{color:var(--ink-2);min-width:0}
.sl b{display:block;color:var(--ink);font-size:13.5px}
.sl em{display:block;font-style:normal;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.fb,.st{height:9px;border-radius:5px;background:var(--bg-2);overflow:hidden}
.fb i,.st i{display:block;height:100%;border-radius:5px}
.fv,.sv{text-align:right;font-variant-numeric:tabular-nums}
.fp,.sp{text-align:right;font-style:normal;color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}

.cohort td.cohc{font-variant-numeric:tabular-nums}

/* ============================== charts =============================== */
/* Palette lives in app/lib/chart.php: eight categorical slots snapped to this
   surface and validated (adjacent CVD dE 12.1, normal-vision 21.3, all >= 3:1).
   Marks are thin, grid is a hairline, and every chart ships a table twin. */
.ch-wrap{position:relative}
.ch{display:block;width:100%;height:auto}
.ch-tick{fill:#8792a1;font-size:10.5px;font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.ch-hit{fill:transparent;cursor:crosshair}
.ch-hit:hover{fill:rgba(255,255,255,.045)}
.ch-leg{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-size:12.5px;color:var(--ink-2)}
.ch-leg span{display:inline-flex;align-items:center;gap:7px}
.ch-leg i{width:10px;height:10px;border-radius:3px;flex:none}

.ch-tip{position:fixed;z-index:200;pointer-events:none;padding:7px 10px;border-radius:6px;
        background:var(--panel-3);border:1px solid var(--line-2);box-shadow:var(--lift-2);
        font-size:12.5px;color:var(--ink);max-width:280px;opacity:0;transition:opacity .1s}
.ch-tip.on{opacity:1}
.ch-tip b{display:block;color:var(--ink-3);font-size:11px;font-weight:650;margin-bottom:2px}

.ch-table{margin-top:12px}
.ch-table summary{cursor:pointer;font-size:12.5px;color:var(--ink-3);padding:4px 0}
.ch-table summary:hover{color:var(--ink-2)}
.ch-table .dt-wrap{margin-top:8px;max-height:320px;overflow:auto}

/* horizontal bars: one series, one colour, length carries the value */
.ch-bars{display:grid;gap:7px}
.ch-bar{display:grid;grid-template-columns:minmax(96px,1.15fr) minmax(0,2fr) auto;
        gap:var(--s3);align-items:center;font-size:13.5px}
.ch-bar .lb{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-bar .lb em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.ch-bar .tr{height:9px;border-radius:5px;background:var(--bg-2);overflow:hidden}
.ch-bar .tr i{display:block;height:100%;border-radius:5px}
.ch-bar .vl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* heat grid on the one-hue ordinal ramp */
.ch-heat .hg{display:grid;gap:2px;align-items:center}
.ch-heat .hh{font-size:10px;color:var(--ink-3);text-align:center}
.ch-heat .hr{font-size:11px;color:var(--ink-3);padding-right:8px;white-space:nowrap}
.ch-heat .hc{display:block;height:17px;border-radius:3px;background:var(--bg-2)}
.ch-heat .hc.ch-hit{cursor:default}
.ch-heat .hc.ch-hit:hover{outline:2px solid var(--ink-3);outline-offset:1px}
.hleg{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:11px;color:var(--ink-3)}
.hleg i{width:20px;height:9px;border-radius:2px}

/* donut: part to whole, six segments at most, always named in the legend */
.ch-dwrap{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.ch-donut{width:120px;height:120px;flex:none}
.ch-dleg{display:grid;gap:7px;font-size:13px;flex:1;min-width:170px}
.ch-dleg span{display:grid;grid-template-columns:11px minmax(0,1fr) auto auto;gap:9px;align-items:center;color:var(--ink-2)}
.ch-dleg i{width:11px;height:11px;border-radius:3px}
.ch-dleg b{font-variant-numeric:tabular-nums;color:var(--ink)}
.ch-dleg em{font-style:normal;color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

.ch-spark{display:block;width:100%;height:26px;margin-top:8px;opacity:.85}

@media (max-width:1080px){
  .ashell{grid-template-columns:1fr;gap:var(--s5)}
  .asnav{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:var(--s4)}
  .asg{margin-bottom:0}
  .asg h4{margin-left:0}
  /* No burger in the staff bar: the sidebar stacks and becomes the nav, so the
     back link only has to survive being narrow. */
  .topbar-staff .tb-back span{display:none}
  .topbar-staff .tb-env{display:none}
  .stafffoot{padding-left:var(--s5);padding-right:var(--s5)}
}
@media (max-width:620px){
  .frow{grid-template-columns:minmax(0,1fr) auto}
  .fcat{grid-column:1/-1}
  .fstage,.segrow{grid-template-columns:minmax(90px,1fr) minmax(0,1.4fr) 60px 44px}
}

/* live feed + churn drill-down */
.frow.is-new{animation:fnew 1.4s ease-out}
@keyframes fnew{from{background:rgba(227,58,69,.12)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.frow.is-new{animation:none}}
.chn-detail td{background:var(--bg-2)}
.cd{padding:var(--s3) var(--s2)}
.cd-head{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
         font-weight:700;margin-bottom:10px}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2)}
.cd-stat{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 11px;
         background:var(--panel);border-radius:var(--r1);font-size:13px}
.cd-stat span{color:var(--ink-3)}
.cd-stat b{text-align:right;font-variant-numeric:tabular-nums}
.cd-stat em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.cd-stat i{font-style:normal;text-align:right;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cd-stat i.down{color:#ff8b94} .cd-stat i.up{color:var(--green)}
.cd-last{margin-top:10px;font-size:13px;color:var(--ink-2)}
.cd-last q{color:var(--ink);font-style:italic}

/* ===================== briefing + flagged chat ====================== */
.brief{max-width:74ch;font-size:15px;line-height:1.65;color:var(--ink-2)}
.brief h2{font-size:19px;color:var(--ink);margin:26px 0 10px;letter-spacing:.01em}
.brief h2:first-child{margin-top:0}
.brief h3{font-size:16px;color:var(--ink);margin:20px 0 8px}
.brief p{margin:0 0 12px}
.brief ul{margin:0 0 14px;padding-left:20px}
.brief li{margin-bottom:6px}
.brief strong{color:var(--ink);font-weight:700}
.brief code{font-family:var(--f-mono);font-size:.88em;background:var(--bg-2);
            padding:1px 5px;border-radius:3px;color:var(--ink)}

.fseries{display:grid;gap:6px}
.frow2{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
       padding:7px 10px;background:var(--bg-2);border-radius:var(--r1);font-size:13.5px}
.frow2 span{color:var(--ink-3)}
.frow2 b{font-variant-numeric:tabular-nums}
.frow2 em{font-style:normal;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
          min-width:48px;text-align:right}
.frow2 em.up{color:var(--green)} .frow2 em.down{color:#ff8b94}
.factjson{margin-top:10px;max-height:340px;overflow:auto;font-family:var(--f-mono);
          font-size:11px;line-height:1.5;color:var(--ink-3);background:var(--bg-2);
          padding:10px;border-radius:var(--r1);white-space:pre}

.alist{display:flex;flex-direction:column}
.arow{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s5);
      border-bottom:1px solid rgba(60,65,78,.5);font-size:13.5px;color:var(--ink-2)}
.arow:last-child{border-bottom:0}
.arow:hover{background:rgba(255,255,255,.025)}
.arow.on{background:var(--panel-2)}
.atxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.atxt b{color:var(--ink);font-weight:650}
.atxt em{font-style:normal;color:var(--ink-3);font-size:12px}

.flaglist{display:flex;flex-direction:column}
.flagrow{display:grid;gap:7px;padding:var(--s4) var(--s5);
         border-bottom:1px solid rgba(60,65,78,.55)}
.flagrow:last-child{border-bottom:0}
.flagrow.done{opacity:.5}
.fmeta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px}
.fmsg{font-size:14.5px;color:var(--ink-2)}
.fmsg q{color:var(--ink);font-style:italic;margin-left:8px}
.fmsg q::before{content:'"'} .fmsg q::after{content:'"'}
.freason{font-size:13px;color:var(--ink-3)}
.factions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* the message a chat view is anchored on */
.cline.anchor{background:var(--red-soft);border-left:3px solid var(--red);
              padding-left:calc(var(--s5) - 3px);scroll-margin-top:120px}

/* ===================== raid detail: loot and raiders ================== */
.lootgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.lootgrid.small{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:10px}
.lootcell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;
          background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r2);
          text-align:center;min-width:0}
.lootcell img{width:38px;height:38px;object-fit:contain;image-rendering:auto}
.lootgrid.small .lootcell img{width:30px;height:30px}
.lootcell .noicon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
                  background:var(--panel-2);border-radius:var(--r1);font-size:13px;font-weight:750;
                  color:var(--ink-3);text-transform:uppercase}
.lootcell b{font-size:15px;font-variant-numeric:tabular-nums;margin-top:2px;line-height:1.2}
.lootcell span{font-size:11.5px;color:var(--ink-2);line-height:1.25;
               overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
               -webkit-line-clamp:2;-webkit-box-orient:vertical}
/* No opacity here. Layered on --ink-3 over --bg-2 it measured 4.09:1. */
/* One line, always. "8 of 15 bases" breaking after "of" put a stray word on
   a third row in every single cell. */
.lootcell em{font-style:normal;font-size:11px;color:var(--ink-3);
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.iicon{width:20px;height:20px;object-fit:contain;flex:none}
.dt td.pos,.pos{color:var(--green)} .dt td.neg,.neg{color:#ff8b94}

.raider{padding:var(--s4) 0;border-bottom:1px solid rgba(60,65,78,.55)}
.raider:last-child{border-bottom:0}
.raider:first-child{padding-top:0}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.rstats{display:flex;gap:var(--s4);font-size:12.5px;color:var(--ink-3)}
.rstats b{color:var(--ink);font-variant-numeric:tabular-nums}
.rents{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* two date fields side by side in the news composer */
.frow-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:520px){.frow-2{grid-template-columns:1fr}}

/* a retracted note stays on the record, struck through */
.can-row.retracted{opacity:.55}
.can-row.retracted .prev{text-decoration:line-through}

/* public news */
.newslist{display:grid;gap:var(--s4);max-width:78ch}
.newsitem h2{font-size:20px;margin:8px 0 10px;letter-spacing:.01em}
.nmeta{display:flex;gap:10px;align-items:center;font-size:12.5px}
.nbody{color:var(--ink-2);line-height:1.65;font-size:15px}
/* view-as sits at the foot of the admin sidebar */
.asviewas{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.asviewas .sel{height:32px;font-size:13px}

/* retention: two-bar comparison of stayers against leavers */
.cmpbars{display:grid;gap:9px}
.cmprow{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2fr) auto 44px;
        gap:var(--s3);align-items:center;font-size:13.5px}
.cl{color:var(--ink-2)}
.ct2{position:relative;height:18px;background:var(--bg-2);border-radius:5px;overflow:hidden}
.ct2 i{position:absolute;left:0;height:8px;border-radius:4px}
.ct2 i.stay{top:1px;background:var(--green)}
.ct2 i.lost{bottom:1px;background:#ff8b94}
.cv{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12.5px}
.cv b{color:var(--ink)}
.cg{text-align:right;font-style:normal;font-size:12px;color:var(--green);font-variant-numeric:tabular-nums}
.clegend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--ink-3)}
.clegend i{display:inline-block;width:16px;height:6px;border-radius:3px;margin-right:6px}
.clegend i.stay{background:var(--green)} .clegend i.lost{background:#ff8b94}
.chip.faded{opacity:.3}

/* shared time range picker */
.trange{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin-bottom:var(--s4)}
.trcustom{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trcustom .inp{width:auto;height:32px;font-size:13px}
.trnote{font-size:12.5px;margin:-8px 0 var(--s4)}

/* first-session reconstruction */
.fsline{display:flex;flex-direction:column}
.fsrow{display:grid;grid-template-columns:58px 92px minmax(0,1fr);gap:var(--s3);
       align-items:baseline;padding:7px var(--s5);border-bottom:1px solid rgba(60,65,78,.45);font-size:13.5px}
.fsrow:last-child{border-bottom:0}
.fsrow:hover{background:rgba(255,255,255,.02)}
.fsat{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12.5px}
.fstxt b{color:var(--ink);font-weight:650}
.fstxt em{font-style:normal;color:var(--ink-3);margin-left:8px}
.fsgap{padding:6px var(--s5);margin:2px 0;font-size:12px;color:var(--amber);
       background:rgba(237,166,60,.07);border-left:2px solid rgba(237,166,60,.5)}


/* ---------- account page: Steam identity + the Discord link ---------- */
/* Two rows that look identical whether a thing is connected or not, so the
   only thing the eye has to find is the chip on the right. */
.acct{padding:var(--s4) var(--s5)}
.acct + .acct{margin-top:var(--s4)}
.acct-row{display:flex;align-items:center;gap:var(--s4)}
.acct-main{flex:1;min-width:0}
.acct-main b{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.acct-main p{margin:0;font-size:13.5px;line-height:1.5}
.acct-act{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
          margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.acct-act .mut{font-size:12.5px}
.acct-foot{margin:var(--s3) 0 0;font-size:12.5px}
.acct-help{margin-top:var(--s4);padding:var(--s4) var(--s5)}
.acct-help h3{font-size:15px;margin:0 0 var(--s3)}
.ava-dc{display:inline-flex;align-items:center;justify-content:center;
        background:#5865f2;color:#fff}

/* numbered "what to do next", deliberately short lines */
.steps{margin:0;padding-left:1.15em;display:grid;gap:var(--s2);
       font-size:13.5px;color:var(--ink-2)}
.steps b{color:var(--ink);font-weight:650}

.inline-form{display:inline}
.btn-quiet{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn-quiet:hover{color:var(--ink-2);border-color:var(--line)}

.chip-ok{background:rgba(58,192,109,.13);border-color:rgba(58,192,109,.4);color:var(--green)}
.note-warn{border-color:rgba(237,166,60,.45);background:rgba(237,166,60,.1);color:#f0c98a}

/* footer connect lines: the address is the point, so it is the button */
.sf-copy{display:inline-flex;align-items:center;gap:6px;padding:0;margin:0;
         background:none;border:0;cursor:pointer;color:var(--ink-3);
         font:inherit;text-align:left}
.sf-copy .code{transition:color .14s}
.sf-copy svg{opacity:0;transition:opacity .14s;flex:none}
.sf-copy:hover .code,.sf-copy:focus-visible .code{color:var(--ink-2)}
.sf-copy:hover svg,.sf-copy:focus-visible svg{opacity:.75}
.sf-copy.done .code{color:var(--green)}
.sf-copy.done svg{opacity:1;color:var(--green)}
.sf-copy.failed .code{color:var(--amber)}
.sf-copy.failed svg{opacity:1;color:var(--amber)}

/* ---------------------------------------------------------- journey replay
   Map on the left, story on the right, and the two stay in step. The story
   column scrolls inside itself rather than growing the page, because the map
   has to remain visible for the replay to mean anything. */
.jv{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:var(--s5);align-items:start;margin-bottom:var(--s6)}
.jv>*{min-width:0}

.jv-verdict{margin:0 0 var(--s5);padding:13px var(--s5);border-radius:var(--r2);
            background:var(--red-soft);border:1px solid rgba(227,58,69,.32);
            color:#ffb3b9;font-size:14.5px;line-height:1.5}

.jv-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
             align-items:center;gap:var(--s4);margin-top:var(--s4)}
.jv-scrub{width:100%;accent-color:var(--red);cursor:pointer}
.jv-clock{font-family:var(--f-mono);font-size:13px;color:var(--ink-2);
          font-variant-numeric:tabular-nums;min-width:52px;text-align:right}

.jv-chapters{list-style:none;margin:0;padding:0;max-height:560px;overflow-y:auto;
             scroll-behavior:smooth}
.jvc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
     padding:12px var(--s5);border-bottom:1px solid rgba(60,65,78,.5);
     border-left:3px solid transparent;cursor:pointer;transition:background .13s,border-color .13s}
.jvc:last-child{border-bottom:0}
.jvc:hover{background:var(--panel-2)}
.jvc.on{background:var(--panel-2);border-left-color:var(--red)}
.jvc-time{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
          font-variant-numeric:tabular-nums;padding-top:2px;min-width:40px}
.jvc-body{min-width:0}
.jvc-body b{display:block;font-size:14px;font-weight:650}
.jvc-meta{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:1px}
.jvc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.jvc-chips .chip{height:21px;padding:0 7px;font-size:11.5px}

/* The chapter type is the one thing a reader scans for, so it gets a colour
   before it gets a word. Idle is amber on purpose: it is the finding. */
.jvc-base .jvc-body b{color:var(--green)}
.jvc-otherbase .jvc-body b{color:#ff8b94}
.jvc-monument .jvc-body b{color:var(--amber)}
.jvc-idle .jvc-body b{color:var(--amber)}
.jvc-flight .jvc-body b,.jvc-sail .jvc-body b,
.jvc-ride .jvc-body b,.jvc-drive .jvc-body b{color:#b39dff}

.chip-red{background:var(--red-soft);border-color:rgba(227,58,69,.4);color:#ff8b94}
.chip-grn{background:rgba(58,192,109,.13);border-color:rgba(58,192,109,.4);color:var(--green)}
.chip-blu{background:rgba(96,150,255,.13);border-color:rgba(96,150,255,.4);color:#8fb4ff}
.chip-yel{background:rgba(237,166,60,.13);border-color:rgba(237,166,60,.4);color:var(--amber)}
.chip-pur{background:rgba(155,125,255,.14);border-color:rgba(155,125,255,.42);color:#b39dff}
.chip-mut{background:var(--panel-3);border-color:var(--line);color:var(--ink-3)}

.jv-feed{max-height:520px;overflow-y:auto}
.jv-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);
       align-items:baseline;padding:7px var(--s5);font-size:13px;
       border-bottom:1px solid rgba(60,65,78,.34)}
.jv-ev:last-child{border-bottom:0}
.jv-ev-t{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
         font-variant-numeric:tabular-nums;min-width:40px}
.jv-ev-l{overflow-wrap:anywhere}
.jv-ev-g{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.jv-ev-death .jv-ev-l{color:#ff8b94;font-weight:600}
.jv-ev-kill .jv-ev-l{color:var(--green)}
.jv-ev-chat .jv-ev-l{color:var(--amber);font-style:italic}
.jv-ev-command .jv-ev-l{font-family:var(--f-mono);font-size:12px;color:#b39dff}

@media (max-width:1080px){
  .jv{grid-template-columns:minmax(0,1fr)}
  .jv-chapters{max-height:420px}
}

/* ------------------------------------------------------------ clan history */
.clh-faces{display:inline-flex;align-items:center;gap:2px}
.clh-faces .ava{margin-right:-6px;border:2px solid var(--panel);border-radius:50%}
.clh-pair{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}

.clh-timeline{max-height:520px;overflow-y:auto}
.clh-ev{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--s4);
        align-items:center;padding:8px var(--s5);
        border-bottom:1px solid rgba(60,65,78,.34);border-left:3px solid transparent}
.clh-ev:last-child{border-bottom:0}
.clh-good{border-left-color:var(--green)}
.clh-bad{border-left-color:var(--red)}
.clh-mid{border-left-color:var(--line-2)}
.clh-t{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.clh-l{font-size:13.5px;overflow-wrap:anywhere}
.clh-l b{font-weight:650}

.hotnum{color:#ff8b94;font-weight:700}

/* ---------------------------------------------------- journey replay stage
   Full port of LushHub's journey layout: the map and the story sit side by
   side (the panel no longer covers the map), and a timeline track with
   chapter-coloured bands runs under both. */
.jv-stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
          padding:var(--s4);margin-bottom:var(--s6)}
.jv-cols{display:flex;gap:var(--s4);align-items:stretch}
.jv-maparea{position:relative;flex:1;min-width:0;background:#0d1118;border-radius:var(--r1);
            display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.jv-maparea canvas{display:block}

.jv-mapbtns{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px}
.jv-mapbtns button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);
                   background:rgba(15,19,28,.82);color:var(--ink);font-size:17px;cursor:pointer}
.jv-mapbtns button:hover{background:var(--panel-2)}

.jv-tip{position:absolute;max-width:250px;padding:6px 9px;border-radius:6px;z-index:5;
        background:rgba(8,10,16,.92);border:1px solid var(--line-2);color:var(--ink);
        font-family:var(--f-mono);font-size:11.5px;text-align:left;pointer-events:none;
        overflow-wrap:anywhere}

.jv-side{flex:0 0 340px;display:flex;flex-direction:column;min-height:0;
         border-radius:var(--r1);overflow:hidden;background:var(--panel-2);
         border:1px solid var(--line)}
.jv-tabs{display:flex;flex:none;border-bottom:1px solid var(--line)}
.jv-tab{flex:1;padding:9px 0;background:transparent;border:0;color:var(--ink-3);
        font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.jv-tab.on{color:var(--ink);background:rgba(255,255,255,.05)}
.jv-side-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth;min-height:0}
.jv-side-foot{flex:none;padding:8px 14px;font-size:11.5px;border-top:1px solid var(--line)}

.jv-controls{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
             align-items:center;gap:var(--s4);padding:10px 4px 6px}
.jv-controls .btn{min-width:44px}
.jv-tl{width:100%;height:64px;display:block;border-radius:6px;cursor:pointer;
       touch-action:none}
.jv-clock{font-family:var(--f-mono);font-size:13px;color:var(--ink-2);
          font-variant-numeric:tabular-nums;white-space:nowrap}

.qtiles-tight .qtile{padding:10px 14px}
.qtiles-tight .num{font-size:20px}

@media (max-width:1000px){
  .jv-cols{flex-direction:column}
  .jv-side{flex:none;max-height:340px}
}


/* ------------------------------------------------------------ player timeline
   Every stream merged; a row is a <details> so the raw record is one click
   and the page needs no JS at all. */
.tml-chips a{white-space:nowrap}
.tml{font-size:13.5px}
.tml-row{border-bottom:1px solid rgba(60,65,78,.34)}
.tml-row:last-child{border-bottom:0}
.tml-row summary{display:grid;grid-template-columns:86px 92px minmax(0,1fr) auto;
                 gap:var(--s4);align-items:baseline;padding:7px var(--s5);
                 cursor:pointer;list-style:none}
.tml-row summary::-webkit-details-marker{display:none}
.tml-row summary:hover{background:var(--panel-2)}
.tml-row[open] summary{background:var(--panel-2)}
.tml-t{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.tml-chip{font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tml-body{overflow-wrap:anywhere}
.tml-srv{font-size:11px;white-space:nowrap}
.tml-bad{color:#ff8b94}
.tml-msg{color:var(--amber)}
.tml-cmd{font-family:var(--f-mono);font-size:12px;color:#b39dff}
.tml-raw{padding:6px var(--s5) 12px calc(86px + 92px + 2 * var(--s4) + var(--s5));
         display:flex;flex-wrap:wrap;gap:6px 16px}
.tml-kv{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);overflow-wrap:anywhere}
.tml-kv b{color:var(--ink-3);font-weight:600}
.fc-join{color:var(--blue)} .fc-leave{color:var(--ink-3)} .fc-cmd{color:#b39dff}
.fc-income{color:#f0a869} .fc-progression{color:#8fb4ff} .fc-world{color:var(--amber)}
.fc-pve{color:#b39dff} .fc-lifecycle{color:var(--ink-3)}

/* ------------------------------------------------------------------
   Entity engine, workbench, map page, command palette (Lush port II) */

/* "every value is a door": dotted underline, solid on hover */
.ent{color:var(--ink);border-bottom:1px dotted rgba(135,146,161,.55);text-decoration:none}
.ent:hover{color:var(--green);border-bottom:1px solid var(--green)}
.expic{vertical-align:-4px;border-radius:3px}
.exph1 .expic{vertical-align:-5px}
.expkv{font-size:12px;color:var(--ink-2);margin-left:10px;overflow-wrap:anywhere}
.expkv b{color:var(--ink-3);font-weight:600;font-family:var(--f-mono);font-size:11px}
.expchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.expn{font-weight:750;font-variant-numeric:tabular-nums;margin-left:auto;padding-right:10px}

/* clickable bar strips: trend days and hour histograms */
.expbars{display:flex;align-items:flex-end;gap:2px;height:150px}
.expbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
        height:100%;min-width:0;position:relative;border-radius:3px 3px 0 0}
a.expbar:hover{background:var(--panel-2)}
.expbar.on{background:var(--panel-3)}
.expbar i{display:block;background:var(--h);border-radius:2px 2px 0 0;min-height:2px}
.exphours .expbar i{background:var(--blue)}
.expbar em{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
           font-size:9.5px;font-style:normal;color:var(--ink-3);white-space:nowrap}
.expbars{margin-bottom:18px}

/* share-of-siblings rows */
.sharelist{display:flex;flex-direction:column}
.sharerow{display:grid;grid-template-columns:minmax(120px,1.1fr) 2fr auto;gap:10px;
          align-items:center;padding:6px 14px;font-size:13px}
.sharerow:hover{background:var(--panel-2)}
.sharerow.on{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--green)}
.sharename{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sharebar{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.sharebar i{display:block;height:100%;background:var(--h);border-radius:4px}
.sharerow.on .sharebar i{background:var(--green)}
.sharen{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);white-space:nowrap}

/* workbench chips */
.wbchips{display:flex;flex-wrap:wrap;gap:6px}
.wbchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
        border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);background:var(--panel)}
.wbchip span{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wbchip:hover{border-color:var(--line-2);color:var(--ink)}
.wbchip.on{background:var(--panel-3);border-color:var(--line-2);color:var(--ink);font-weight:600}

/* the map page */
.lm-stage{position:relative}
.lm-stage canvas{width:100%;aspect-ratio:1;display:block;border-radius:8px;background:#0d1118;
                 cursor:crosshair;touch-action:none}
.lm-meta{margin-top:8px;font-size:12px;color:var(--ink-3)}
.lm-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.lm-bar canvas{flex:1;height:44px;min-width:0;border-radius:6px;background:var(--bg-2);cursor:ew-resize}
.lm-clock{font-size:12px;color:var(--ink-2);white-space:nowrap;min-width:150px;text-align:right}
.mapchk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
        padding:0 10px;cursor:pointer}
.lapseform{align-items:center;gap:8px}
.lapseform .inp,.lapseform .sel{height:32px}

/* command palette */
.cmdk{position:fixed;inset:0;z-index:200;display:none;background:rgba(0,0,0,.55);
      backdrop-filter:blur(2px)}
.cmdk.on{display:block}
.cmdk-box{width:min(560px,92vw);margin:12vh auto 0;background:var(--panel);
          border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
          box-shadow:0 18px 60px rgba(0,0,0,.5)}
.cmdk-inp{width:100%;padding:13px 16px;font-size:14.5px;background:transparent;border:0;
          border-bottom:1px solid var(--line);color:var(--ink);outline:none}
.cmdk-list{max-height:46vh;overflow-y:auto}
.cmdk-row{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:13.5px;color:var(--ink)}
.cmdk-row.sel{background:var(--panel-2)}
.cmdk-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-tag{margin-left:auto;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;
          letter-spacing:.05em;white-space:nowrap}
.cmdk-none{padding:18px;text-align:center;font-size:13px;color:var(--ink-3)}
.cmdk-foot{display:flex;gap:16px;padding:7px 14px;border-top:1px solid var(--line);
           font-size:10.5px;color:var(--ink-3)}
a.qtile{display:block;color:inherit;text-decoration:none;transition:border-color .12s}
a.qtile:hover{border-color:var(--line-2);background:var(--panel-2)}

/* player page v2: engagement gauge, journey of firsts, session rows, favorites */
.egauge{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:14px;cursor:help}
.eg-tags{display:flex;flex-direction:column;gap:4px}
.phead .mh-act{margin-left:0}
.jflist{max-height:340px;overflow-y:auto}
.jfrow{display:flex;align-items:baseline;gap:10px;padding:5px 14px;font-size:13px}
.jfrow:nth-child(odd){background:rgba(255,255,255,.015)}
.jfl{flex:1;min-width:0}
.jft{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.jfnot{padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);
       display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pslist{padding:4px 0}
.psrow{display:flex;align-items:baseline;gap:10px;padding:5px 14px;font-size:13px}
.psdur{min-width:70px}
.psreason{flex:1;min-width:0;display:flex;gap:6px;align-items:baseline}
.psgap{text-align:center;font-size:11px;color:var(--ink-3);padding:2px 0}
.favlist{display:flex;flex-direction:column;gap:6px}
.favrow{display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.favrow b{font-variant-numeric:tabular-nums}
.favrow .mut3:first-child{min-width:110px}

/* retention mission control */
.wflags{white-space:nowrap}
.wflag{display:inline-block;font-size:11px;color:var(--ink-3);margin-right:7px}
.wflag.on{color:var(--green)}
.riskbar{display:inline-block;width:54px;height:7px;background:var(--panel-2);
         border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:5px;cursor:help}
.riskbar i{display:block;height:100%;border-radius:4px}
.d1bars .expbar i{background:var(--green)}
.d1target{position:absolute;left:0;right:0;border-top:1.5px dashed var(--amber);z-index:1;pointer-events:none}

/* live map roster */
.lm-cols{display:grid;grid-template-columns:1fr 250px;gap:14px;align-items:start}
@media (max-width:980px){.lm-cols{grid-template-columns:1fr}}
.lm-roster{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lm-roster h4{margin:0;padding:10px 14px;font-size:12px;text-transform:uppercase;
              letter-spacing:.06em;color:var(--ink-3);border-bottom:1px solid var(--line)}
.lm-roster #lm-rows{max-height:70vh;overflow-y:auto}
.lmr-row{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:13px;cursor:pointer}
.lmr-row:hover{background:var(--panel-2)}
.lmr-row.on{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--gold)}
.lmr-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lmr-g{font-size:11px;color:var(--ink-3);white-space:nowrap}
.lmr-replay{font-size:11px;padding:2px 4px}

/* ------------------------------------------------------------------
   landing v2: the wipe map in the hero, the pulse strip, news cards */
.hero-v2{min-height:clamp(420px,60vh,620px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);
           gap:var(--s7);align-items:center}
.hero-left{min-width:0}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .heromap{max-width:420px}
}

.pulse{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);margin-top:var(--s5)}
.pulse-i{display:flex;flex-direction:column;gap:2px}
.pulse-i b{font-family:var(--f-disp);font-size:clamp(22px,2.6vw,30px);font-weight:700;
           line-height:1;color:var(--ink);display:inline-flex;align-items:center;gap:8px;
           font-variant-numeric:tabular-nums}
.pulse-i i{font-style:normal;font-size:12.5px;color:var(--ink-2)}

.heromap{display:block;text-decoration:none;position:relative;
         transition:transform .25s ease}
.heromap:hover{transform:translateY(-3px)}
.heromap-frame{display:block;position:relative;border-radius:14px;overflow:hidden;
               border:1px solid rgba(255,255,255,.14);
               box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
               aspect-ratio:1}
.heromap-frame::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(13,17,24,.55) 100%);
  pointer-events:none}
.heromap-frame img{display:block;width:100%;height:100%;object-fit:cover;
                   animation:mapdrift 60s ease-in-out infinite alternate}
@keyframes mapdrift{
  from{transform:scale(1.02) translate(-1.2%, 1.0%)}
  to{transform:scale(1.14) translate(1.6%, -1.4%)}
}
@media (prefers-reduced-motion: reduce){.heromap-frame img{animation:none}}
.heromap-cap{display:flex;align-items:center;gap:8px;justify-content:center;
             margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.heromap:hover .heromap-cap{color:var(--ink)}


.newsrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5)}
.newscard{display:flex;flex-direction:column;gap:8px;padding:var(--s5) var(--s6);
          background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
          text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
.newscard:hover{transform:translateY(-2px);border-color:var(--line-2)}
.newscard b{font-family:var(--f-disp);font-size:19px;line-height:1.2;color:var(--ink)}
.newsx{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.newsgo{margin-top:auto;font-size:12.5px;color:var(--ink-3)}
.newscard:hover .newsgo{color:var(--red)}

/* ===================== tooltips and self-explaining numbers ============ */
/* Positioned by core.js against the viewport, so it escapes the horizontal
   scroll on .dt-wrap and any panel that clips. */
.tip{position:fixed;z-index:900;max-width:290px;padding:8px 11px;
     background:#0e1014;border:1px solid var(--line-2);border-radius:var(--r2);
     color:var(--ink);font-size:12.5px;line-height:1.45;font-weight:500;
     box-shadow:0 10px 28px rgba(0,0,0,.5);pointer-events:none;
     opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.tip.on{opacity:1;transform:none}
.tip::after{content:"";position:absolute;left:50%;margin-left:-5px;border:5px solid transparent}
.tip:not(.below)::after{top:100%;border-top-color:var(--line-2)}
.tip.below::after{bottom:100%;border-bottom-color:var(--line-2)}

/* A term that carries an explanation. The underline is the affordance: a
   tooltip nobody can see is a tooltip nobody reads. */
.hint{border-bottom:1px dotted var(--ink-3);cursor:help}
th .hint{border-bottom-color:var(--line-2)}

/* A number needs its unit next to it, not in a paragraph under the table. */
.unit{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;
      text-transform:uppercase;color:var(--ink-3)}


/* Scope under the headline number: "23% of spawned". Distinct from .qdelta,
   which is a movement against a previous period, not a share of a whole. */
.qtile .qsub{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-top:5px}
.qtile[data-tip]{cursor:help}

/* Exactly what a raider spent, item by item, rather than a sulfur total that
   hides whether it was four C4 or nine rockets. */
.usedlist{display:flex;flex-wrap:wrap;gap:5px}
.usedone{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;
         background:var(--bg-2);border:1px solid var(--line);border-radius:99px;cursor:help}
.usedone img{width:20px;height:20px;object-fit:contain;flex:none}
.usedone b{font-size:12.5px;font-variant-numeric:tabular-nums}
.usedone em{font-style:normal;font-size:11.5px;color:var(--ink-2);white-space:nowrap}

/* ===================== event timeline ================================= */
/* Four fixed beats in a base's life. A list, not a table: the rows are
   sequence, not columns of comparable values. */
.tline{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.tline::before{content:"";position:absolute;left:6px;top:9px;bottom:9px;
               width:2px;background:var(--line)}
.tline li{position:relative;padding:9px 0;display:flex;flex-wrap:wrap;
          align-items:baseline;gap:4px 14px}
.tline li+li{border-top:1px solid rgba(60,65,78,.4)}
.tline li::before{content:"";position:absolute;left:-26px;top:15px;
                  width:14px;height:14px;border-radius:50%;
                  background:var(--panel);border:2px solid var(--line-2)}
.tline li.done::before{background:var(--green);border-color:var(--green)}
.tline li.open::before{background:var(--panel);border-color:var(--amber)}
.tline li.never::before{background:var(--panel);border-color:var(--line-2)}
.tline b{font-size:14px;font-weight:650;flex:1 1 auto;min-width:150px}
.tline span{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tline em{font-style:normal;color:var(--ink-3);margin-left:6px}
.tline li.never b,.tline li.never span{color:var(--ink-3)}

/* ===================== per-raider run of a raid ======================= */
/* One row per thing they did, in order, with the idle gaps called out so a
   twenty-minute pause to go and craft more explosives is visible rather than
   hidden between two adjacent rows. */
.rtl{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.rtl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.rtl li{position:relative;display:grid;gap:2px 12px;padding:6px 0;
        grid-template-columns:66px 26px minmax(0,1fr) auto auto;align-items:center}
.rtl li::before{content:"";position:absolute;left:-22px;top:50%;margin-top:-4px;
                width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.rtl li.k0::before{background:var(--amber)}
.rtl li.k1::before{background:#ff8b94}
.rtl li.k2::before{background:var(--green)}
.rtl li.k3::before{background:var(--red)}
.rtl-t{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rtl-i{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.rtl-i img{width:24px;height:24px;object-fit:contain}
.rtl-w{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtl-w b{font-weight:650}
.rtl-w em{font-style:normal;color:var(--ink-3)}
.rtl-s{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rtl-p{font-family:var(--f-mono);font-size:11px;white-space:nowrap}
.rtl li.gap{grid-template-columns:1fr;padding:2px 0}
.rtl li.gap::before{display:none}
.rtl li.gap span{font-size:11.5px;color:var(--ink-3);font-style:italic}
@media (max-width:720px){
  .rtl li{grid-template-columns:60px 24px minmax(0,1fr)}
  .rtl-s,.rtl-p{grid-column:3;font-size:11px}
}

/* ===================== win-back composer ============================== */
/* Discord's own surface colours, so the preview reads as the thing that
   actually arrives rather than as another panel on this site. */
.inp-sm{padding:4px 8px;font-size:12px;height:auto;width:auto}
.dt-wb .wb-pulse-cell{width:116px;padding-top:10px;padding-bottom:10px}
.dt-wb td{vertical-align:middle}
.wb-tokens{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.wb-tokens code{font-size:11px;background:var(--panel-3);color:var(--ink-2);
  padding:2px 6px;border-radius:var(--r1);font-family:var(--f-mono)}
.wb-msg{width:100%;font-family:var(--f-mono);font-size:12.5px;line-height:1.55;resize:vertical}
.wb-life{width:100%;height:auto;display:block}
.wb-life .grid{stroke:var(--line);stroke-width:1}
.wb-life .axis{stroke:var(--line-2);stroke-width:1}
.wb-life .tick{stroke:var(--line-2);stroke-width:1}
.wb-life .ax{fill:var(--ink-3);font:600 10px var(--f-ui);letter-spacing:.02em}
.wb-life .yl{text-anchor:end}
.wb-life .bar{fill:var(--blue)}
.wb-life .bar:hover{fill:var(--ink)}
.wb-life .zero{fill:var(--line-2)}
.wb-mini{width:120px;height:20px;display:block}
.wb-mini .bar{fill:var(--blue)}
.wb-mini .zero{fill:var(--line-2)}
.wb-says li{padding:6px 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.wb-says li:first-child{color:var(--ink);font-size:14.5px}
.wb-caveats{border-top:1px solid var(--line);padding-top:12px}
.wb-caveats li{padding:5px 0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.wb-pulse-ends{display:flex;justify-content:space-between;font-size:11px;margin-top:5px}
.wb-stints{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.wb-stint{display:grid;grid-template-columns:150px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:12.5px}
.wb-stint .track{position:relative;height:10px;background:var(--line);border-radius:99px}
.wb-stint .track i{position:absolute;top:0;height:10px;background:var(--blue);border-radius:99px}
.wb-gaps li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--line);font-size:12.5px}
.wb-gaps li:last-child{border-bottom:0}
.wb-verdict{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.wb-compose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:900px){.wb-compose{grid-template-columns:1fr}}
.wb-edit textarea{width:100%;min-height:280px;padding:11px 13px;border-radius:var(--r2);
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  font-family:var(--f-ui);font-size:13.5px;line-height:1.6;resize:vertical}
.wb-edit textarea:focus{outline:none;border-color:var(--line-2)}
.wb-tok{display:inline-block;margin:0 5px 5px 0;padding:2px 7px;border-radius:var(--r1);
  background:var(--panel-2);border:1px solid var(--line);font-family:var(--f-mono);
  font-size:11.5px;color:var(--ink-2);cursor:help}

.dpreview{margin-top:8px;padding:16px;border-radius:var(--r2);background:#313338;
  border:1px solid #232428}
.dmsg{display:flex;gap:14px;align-items:flex-start}
.davatar{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;background:#1e1f22}
.dbody{min-width:0;flex:1}
.dhead{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.dhead b{color:#f2f3f5;font-size:15px;font-weight:600}
.dbot{background:#5865f2;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:1px 5px;border-radius:3px}
.dtime{color:#949ba4;font-size:12px}
.dtext{color:#dbdee1;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.dtext b{color:#f2f3f5;font-weight:700}
.dtext code{background:#1e1f22;padding:1px 4px;border-radius:3px;font-size:13px}

.wb-life{width:100%;height:auto;display:block}
.wb-life .grid{stroke:var(--line);stroke-width:1}
.wb-life .axis{stroke:var(--line-2);stroke-width:1}
.wb-life .tick{stroke:var(--line-2);stroke-width:1}
.wb-life .ax{fill:var(--ink-3);font:600 10px var(--f-ui);letter-spacing:.02em}
.wb-life .yl{text-anchor:end}
.wb-life .bar{fill:var(--blue)}
.wb-life .bar:hover{fill:var(--ink)}
.wb-life .zero{fill:var(--line-2)}
.wb-mini{width:120px;height:20px;display:block}
.wb-mini .bar{fill:var(--blue)}
.wb-mini .zero{fill:var(--line-2)}
.wb-says li{padding:6px 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.wb-says li:first-child{color:var(--ink);font-size:14.5px}
.wb-caveats{border-top:1px solid var(--line);padding-top:12px}
.wb-caveats li{padding:5px 0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.wb-pulse-ends{display:flex;justify-content:space-between;font-size:11px;margin-top:5px}
.wb-stints{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.wb-stint{display:grid;grid-template-columns:150px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:12.5px}
.wb-stint .track{position:relative;height:10px;background:var(--line);border-radius:99px}
.wb-stint .track i{position:absolute;top:0;height:10px;background:var(--blue);border-radius:99px}
.wb-gaps li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--line);font-size:12.5px}
.wb-gaps li:last-child{border-bottom:0}
.wb-verdict{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.wb-compose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:900px){.wb-compose{grid-template-columns:1fr}}
.wb-edit textarea{width:100%;min-height:280px;padding:11px 13px;border-radius:var(--r2);
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  font-family:var(--f-ui);font-size:13.5px;line-height:1.6;resize:vertical}
.wb-edit textarea:focus{outline:none;border-color:var(--line-2)}
.wb-tok{display:inline-block;margin:0 5px 5px 0;padding:2px 7px;border-radius:var(--r1);
  background:var(--panel-2);border:1px solid var(--line);font-family:var(--f-mono);
  font-size:11.5px;color:var(--ink-2);cursor:help}

.dpreview{margin-top:8px;padding:16px;border-radius:var(--r2);background:#313338;
  border:1px solid #232428}
.dmsg{display:flex;gap:14px;align-items:flex-start}
.davatar{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;background:#1e1f22}
.dbody{min-width:0;flex:1}
.dhead{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.dhead b{color:#f2f3f5;font-size:15px;font-weight:600}
.dbot{background:#5865f2;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:1px 5px;border-radius:3px}
.dtime{color:#949ba4;font-size:12px}
.dtext{color:#dbdee1;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.dtext b{color:#f2f3f5;font-weight:700}
.dtext code{background:#1e1f22;padding:1px 4px;border-radius:3px;font-size:13px}

.wb-head-act{display:flex;align-items:center;gap:12px}
.wb-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;align-items:end}
.wb-settings label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.wb-settings .inp{width:100%}
.wb-toggle{flex-direction:row !important;align-items:center;gap:9px !important}
.wb-toggle input{width:17px;height:17px;flex:none}
.inp{padding:8px 11px;border-radius:var(--r2);background:var(--bg-2);
  border:1px solid var(--line);color:var(--ink);font-family:var(--f-ui);font-size:13px}
.inp:focus{outline:none;border-color:var(--line-2)}

/* Test-send row: two ids, each labelled, because "which id goes where" is the
   whole question and an unlabelled pair of number boxes cannot answer it. */
.wb-testform{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.wb-inline{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.wb-inline .inp{min-width:210px}

/* A step that was promised and did not happen. Distinct from "not yet":
   nobody needs to look at a pending step, everybody needs to look at this. */
.tline li.broken::before{background:var(--red);border-color:var(--red)}
.tline li.broken b{color:#ff8b94}
.dt tr.on{background:rgba(255,107,107,.06)}