@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:"Geist"; src:url("/assets/fonts/geist.woff2") format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap; }
@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 ---------- */
/* Flat graphite, hairline edges, small radii. Surfaces are separated by a
   one-pixel line and a barely-there shadow rather than by roundness and a
   sheen: at a dashboard's density, twelve-pixel corners on forty panels is
   most of what the eye is doing. Red stays the identity; nothing else is
   tinted, so a red thing on the page means something. */
:root{
  --bg:#14171b;
  --bg-2:#101215;
  --panel:#1a1e23;
  --panel-2:#20252b;
  --panel-3:#262d35;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --ink:#eef1f4;
  --ink-2:#b6c2ce;
  --ink-3:#9aa7b2;

  --red:#e33a45;
  --red-2:#c02733;
  --red-soft:rgba(227,58,69,.13);
  --green:#4ade80;
  --amber:#f5b52e;
  --blue:#5b9df5;
  --violet:#a888fa;
  --gold:#f0c04a;
  --silver:#c8d2de;
  --bronze:#cd8a52;

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

  --f-ui:"Geist","Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-disp:"Rajdhani","Geist","Inter",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:3px; --r2:5px; --r3:7px; --r4:10px;

  --lift:0 1px 2px rgba(0,0,0,.22), 0 6px 18px -12px rgba(0,0,0,.4);
  --lift-2:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -20px rgba(0,0,0,.75);

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

/* ---------- 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:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* a faint dot grid, and one red pool at the top so the identity is present
   without the page being a scene. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(900px 420px at 26% -14%, rgba(227,58,69,.075), transparent 68%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, 26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.28) 340px,rgba(0,0,0,.12));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.28) 340px,rgba(0,0,0,.12));
}
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(--ink);font-weight:500;border-bottom:1px dotted rgba(154,167,178,.5);
      transition:color .12s,border-color .12s}
.link:hover{color:var(--red);border-bottom-color:var(--red)}

/* the uppercase letterspaced label used for scopes, table heads, captions */
.cap{font-size:10.5px;font-weight:600;letter-spacing:.11em;
     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)}
.panel.flat{box-shadow:none}
/* 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:11px var(--s4);border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-head h2,.panel-head h3{font-size:14.5px;font-weight:650;letter-spacing:.01em}
.panel-body{padding:var(--s4)}
.panel-body.flush{padding:0}
.panel-foot{padding:9px var(--s4);border-top:1px solid var(--line);font-size:12.5px;
            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:34px;padding:0 13px;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:var(--red);
             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))}
/* A chosen filter is not a call to action. It is lit, not shouted. */
.btn-sel{background:var(--panel-3);border-color:var(--line-2);color:var(--ink);font-weight:600}
.btn-sel:hover{background:var(--panel-3)}
.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)}
/* The store. Deliberately the brightest button on the page: gold against a
   palette whose loudest accent is otherwise the red primary, so it reads as
   its own thing rather than as one more nav item. */
.btn-store{background:linear-gradient(180deg,var(--gold),var(--amber));
           border-color:#f4cd63;color:#2a1e04;font-weight:750;
           box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 18px -12px rgba(240,192,74,.95)}
.btn-store:hover{filter:brightness(1.08);background:linear-gradient(180deg,var(--gold),var(--amber))}
.btn-sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:var(--r1)}
.btn-lg{height:42px;padding:0 20px;font-size:15px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:21px;padding:0 7px;border-radius:var(--r1);
      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:10px 13px;border-radius:var(--r2);font-size:13px;
      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(--s8) var(--s5);text-align:center;color:var(--ink-3)}
.blank h3{font-size:15px;font-weight:650;color:var(--ink);margin-bottom:6px}
.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 8px;
        font-family:var(--f-disp);font-size:15px;font-weight:600;letter-spacing:.06em;
        text-transform:uppercase;color:var(--ink-2);transition:color .14s;white-space:nowrap}
.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}
/* Lives in tb-right rather than tb-tabs: tb-tabs folds behind the burger
   under 1120px, and this has to stay on screen at every width. */
.tb-store{flex:none}

.finder{position:relative}
.finder .inp{height:36px;width:150px;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(--s3);margin-bottom:var(--s5);border-bottom:1px solid var(--line)}
.masthead h1{font-size:clamp(21px,2vw,26px);letter-spacing:.005em;margin:1px 0 2px}
.mh-sub{font-size:13px;color:var(--ink-3)}
.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(min(230px,100%),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:9px var(--s4);background:rgba(255,255,255,.022);border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:600;letter-spacing:.11em;
  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:9px var(--s4);border-bottom:1px solid var(--line);font-size:13.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(min(260px,100%),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:170px;background:var(--h);border-color:var(--h);color:#fff;
         box-shadow:0 4px 18px color-mix(in srgb,var(--h) 45%,transparent)}
.ft-join:hover{background:color-mix(in srgb,var(--h) 85%,#fff);border-color:var(--h);color:#fff}

.entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),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(min(280px,100%),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}

/* min-height, not height, and flex:none. A fixed-height chip inside a flex row
   is a chip that can be squashed until its own label is cut in half, which is
   what the ticket status pill did on a phone. A chip may grow; it may not
   clip what it says. */
.st{display:inline-flex;align-items:center;gap:6px;min-height:25px;padding:3px 10px;border-radius:5px;
    font-size:12px;font-weight:700;line-height:1.25;letter-spacing:.03em;white-space:nowrap;flex:none}
.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;min-height:24px;padding:3px 9px;border-radius:5px;
     font-size:11.5px;font-weight:650;line-height:1.25;border:1px solid;white-space:nowrap;flex:none}
.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(min(240px,100%),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:13px var(--s4) 14px;border-radius:var(--r2);background:var(--panel);
       border:1px solid var(--line)}
.qtile b{display:block;font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em;
         font-variant-numeric:tabular-nums}
.qtile span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.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:1366px){ .finder{display:none} }

/* The admin bar carries four more tabs than the public one plus the finder,
   and stops fitting below 1200px. Only that bar collapses early: a visitor
   has five tabs and room down to the shared 1120px breakpoint below. */
@media (max-width:1200px){
  .topbar-admin .tb-burger{display:grid;margin-left:auto}
  .topbar-admin .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-admin.open .tb-tabs{display:flex}
  .topbar-admin .tb-tab{height:46px;padding:0 var(--s4);border-radius:var(--r2)}
  .topbar-admin .tb-tab.on{background:var(--panel-2)}
  .topbar-admin .tb-tab.on::after{left:0;right:auto;top:11px;bottom:11px;width:2px;height:auto}
}

@media (max-width:1120px){
  :root{--bar-h:56px}
  .pickwrap{grid-template-columns:1fr}
  .rail-servers{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),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(min(200px,100%),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(min(280px,100%),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}
  /* the bar is brand + burger + store + account on a 360px phone, which does
     not fit: the wordmark goes and the glyph carries the brand, because the
     store button and the account control both have to stay reachable */
  .tb-brand .word{display:none}
  .tb-right{gap:var(--s2)}
  .tb-store{padding:0 10px}
  .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(min(340px,100%),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{display:inline-block;width:32px;height:32px;object-fit:contain;vertical-align:middle;margin-right:8px}
/* An item as a player knows it: art first, name beside it, never wrapped.
   Big enough that a ladder is a ladder and not a diagonal scratch. */
.item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;vertical-align:middle}
.item img{display:block;width:38px;height:38px;object-fit:contain;flex:none}
.item-n{color:var(--ink-3);font-weight:600}
.item-sub{color:var(--ink-3);font-size:12.5px}
.dt tbody td .item{margin:-4px 0}

/* 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 ============================ */
/* The shell itself (pinned sidebar, top bar) is in staff.css; this file keeps
   the parts pages share. */

.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)}


.afilter{margin-bottom:var(--s4);flex-wrap:wrap;max-width:100%}
.afilter a{white-space:nowrap}
/* Every auto-fit grid here floors its track at min(Npx, 100%), never at Npx.
   A bare minmax(400px,1fr) is a hard 400px: on a 358px-wide phone the card
   stays 400 and the whole page scrolls sideways, which is what .agrid did to
   every admin page. min() lets the last column give up and match the
   container instead. */
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),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}
.ctr{display:block;flex-basis:100%;color:var(--ink-3);font-size:12px;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: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,.brief ol{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:32px;height:32px;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}
.monrank{max-height:520px;overflow-y:auto}
.monrank thead th{position:sticky;top:0;background:var(--panel);z-index:1}
.moninside{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
.moninside .qtile span{white-space:normal}
.monsub{margin:14px 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.monthing{display:inline-flex;align-items:center;gap:8px}
.monthing img{width:22px;height:22px;object-fit:contain}
.moninside+.dt-wrap,.dt-wrap+.dt-wrap{margin-top:10px}

@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;
                 /* the whole map fits on screen at its widest; the staff area is
                    full width now, which made a square canvas taller than the window */
                 max-width:calc(100vh - 210px);margin:0 auto}
.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 300px;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}
.lm-roster #pm-rows{max-height:70vh;overflow-y:auto}
.lmr-row.off{opacity:.55}
.lmr-state{font-size:11px;white-space:nowrap}
.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}
.lm-tabs{display:flex;border-bottom:1px solid var(--line)}
.lm-tabs button{flex:1;background:none;border:0;padding:10px 14px;font:inherit;font-size:12px;
                text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);cursor:pointer}
.lm-tabs button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
.lm-find{padding:8px 10px;border-bottom:1px solid var(--line)}
.lm-find .inp{width:100%}
#lm-brows{max-height:calc(70vh - 50px);overflow-y:auto}
.lmb-grp{display:flex;align-items:baseline;gap:8px;padding:9px 12px 4px;font-size:13px;font-weight:600;
         cursor:pointer;border-top:1px solid var(--line)}
.lmb-grp:first-child{border-top:0}
.lmb-grp:hover,.lmb-grp.on{color:var(--gold)}
.lmb-grp .lmr-nm{white-space:normal}
.lmb-row{padding:4px 12px 4px 22px;font-size:12.5px}
.lmb-row .lmr-g{min-width:34px}
.lmb-own{color:var(--ink-3);font-size:11.5px}

/* ------------------------------------------------------------------
   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(min(260px,100%),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:32px;height:32px;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:36px;height:36px;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(min(230px,100%),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)}

.closebox{margin-top:12px;padding:14px;border:1px solid rgba(227,58,69,.35);border-radius:var(--r2);background:var(--red-soft);display:grid;gap:10px}
.closebox label{font-size:14px}

/* ---------- new-ticket pickers (ticket-new.js) ---------- */
.tn-sec{margin:0 0 var(--s5);animation:tn-in .22s ease}
@keyframes tn-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tn-lab{display:block;font-size:13px;font-weight:650;color:var(--ink-2);margin-bottom:6px}
.tn-lab em{font-style:normal;color:var(--ink-3);font-weight:500}
#tn-ctx.busy .tn-list:empty::before{content:"Loading…";display:block;padding:12px 14px;font-size:12.5px;color:var(--ink-3)}
.tn-pick{position:relative;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r2);padding:6px 8px;
         display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tn-pick:focus-within{border-color:var(--red)}
.tn-pick .tn-q{flex:1;min-width:160px;border:0;background:transparent;padding:6px 4px;height:auto}
.tn-pick .tn-q:focus{outline:none;border:0}
.tn-chips{display:contents}
.tn-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 4px 0 3px;border-radius:6px;
         background:var(--panel-2);border:1px solid var(--line-2);font-size:13px;font-weight:600}
.tn-chip button{border:0;background:transparent;color:var(--ink-3);font-size:16px;line-height:1;padding:2px 5px;cursor:pointer;border-radius:4px}
.tn-chip button:hover{color:var(--ink);background:var(--panel-3)}
.tn-ava{width:22px;height:22px;border-radius:5px;object-fit:cover;flex:none;background:var(--panel-3);
        display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3)}
.tn-drop{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:30;max-height:320px;overflow:auto;
         background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r2);box-shadow:0 14px 34px rgba(0,0,0,.45);padding:4px}
.tn-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
        padding:7px 9px;border-radius:6px;cursor:pointer;font:inherit}
.tn-opt .tn-ava{width:28px;height:28px}
.tn-opt .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-opt .sub{font-size:12px;color:var(--ink-3);white-space:nowrap}
.tn-opt:hover,.tn-opt.on{background:var(--panel-2)}
.tn-none{padding:10px 12px;font-size:12.5px;color:var(--ink-3)}
.tn-list{display:grid;gap:6px}
.tn-row{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--panel-2);border:1px solid var(--line);
        border-radius:var(--r2);cursor:pointer;font-size:13.5px;transition:border-color .14s,background .14s;flex-wrap:wrap}
.tn-row:hover{border-color:var(--line-2)}
.tn-row:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.tn-row input{accent-color:var(--red);width:16px;height:16px;margin:0;flex:none}
.tn-row time{color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:112px}
.tn-row .who{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.tn-row .how{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.tn-row .how img{width:30px;height:30px;object-fit:contain}
.tn-row b{font-weight:700}
.tn-empty{margin:0;padding:12px 14px;font-size:12.5px;color:var(--ink-3);background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r2)}
.tn-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.tn-facts>div{background:var(--panel-2);padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tn-facts b{font-family:var(--f-disp);font-size:22px;font-weight:700;line-height:1.1}
.tn-facts code{font-family:var(--f-mono);font-size:13px;overflow-wrap:anywhere}
.tn-facts .btn{align-self:flex-start;margin-top:4px}

/* what a ticket carries besides text (tc_render) */
.tcr{margin-bottom:var(--s4)}
.tcr:last-child{margin-bottom:0}
.tcr>.cap{display:block;margin-bottom:8px}
.tcr-chips{display:flex;flex-wrap:wrap;gap:8px}
.tcp{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 4px;border-radius:7px;
     background:var(--panel-2);border:1px solid var(--line);font-size:13.5px;font-weight:600}
.tcp img,.tcp i{width:26px;height:26px;border-radius:5px;object-fit:cover;background:var(--panel-3);flex:none}
.tcr-rows{display:grid;gap:6px}
.tcr-row{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--panel-2);border:1px solid var(--line);
         border-radius:var(--r2);font-size:13.5px;flex-wrap:wrap}
.tcr-row time{color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:112px}
.tcr-row .who .tcp{height:30px;border:0;background:transparent;padding:0}
.tcr-row .how{display:inline-flex;align-items:center;gap:8px}
.tcr-row .how .item img{width:30px;height:30px}
.tcr-row .enc{flex-basis:100%;padding-left:124px;font-size:12.5px}
.tcr-row .btn{margin-left:auto}
@media (max-width:640px){
  .tn-row time,.tcr-row time{min-width:0}
  .tcr-row .enc{padding-left:0}
}

/* staff side of the attached panel: links, sub-rows */
.tcr-row .links{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.tcr-row .links .btn{margin-left:0}
.xl{font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.xl:hover{color:var(--ink)}
.tcr-row .enc{flex-basis:100%;padding-left:0;font-size:12.5px;line-height:1.7;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;
              border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.tcr-row .enc .tcp{height:26px;font-size:12.5px}
.tcr-row .enc .tcp img,.tcr-row .enc .tcp i{width:20px;height:20px}

/* open versus closed, unmistakably */
.st-lg{min-height:32px;padding:4px 14px;font-size:14px}
.tk-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s5);
           padding:12px 16px;border-radius:var(--r2);background:rgba(115,125,139,.14);border:1px solid var(--line-2);
           color:var(--ink-2);font-size:13.5px}
.tk-banner b{font-family:var(--f-disp);font-size:17px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-right:8px;color:var(--ink)}
.tk-banner .why{display:block;margin-top:3px;color:var(--ink)}
.tk-closed .panel:not(.seam){opacity:.82}
.q-row.closed{opacity:.62;border-left:3px solid var(--line-2)}
.q-row.closed:hover{opacity:1}

/* ---------- /admin/chatbot ---------- */
.sel-sm{width:auto;padding:4px 30px 4px 9px;font-size:12.5px;height:auto}
.hqa{display:grid;gap:12px}
.hqa-row{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel-2)}
.hqa-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hqa-foot{display:flex;justify-content:flex-end}
.hfacts{display:grid;gap:10px}
.hfact{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel-2)}
.hfact.off{opacity:.55}
.hfact .txa{font-size:13px;line-height:1.5}
.hfact-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hlog{display:grid;gap:6px}
.hlog-row{border:1px solid var(--line);border-radius:var(--r2);background:var(--panel-2)}
.hlog-row summary{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:13px;flex-wrap:wrap}
.hlog-row summary::-webkit-details-marker{display:none}
.hlog-row summary time{color:var(--ink-3);font-variant-numeric:tabular-nums}
.hlog-row summary .q{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.hlog-row .bd{padding:4px 12px 12px;border-top:1px solid var(--line)}
.hlog-row .bd .cap{display:block;margin:10px 0 4px}
.chip-mut{color:var(--ink-3)}

/* ------------------------------------------------ new players: the feed */
.jn-bar{display:flex;flex-direction:column;gap:8px;margin:2px 0 16px}
.jn-tabs{display:flex;gap:4px;flex-wrap:wrap}
.jn-tab{padding:5px 12px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  border:1px solid transparent;transition:background .14s,color .14s}
.jn-tab:hover{background:var(--panel-2);color:var(--ink)}
.jn-tab.on{background:var(--panel-2);border-color:var(--line-2);color:var(--ink)}
.jnl{display:flex;flex-direction:column;gap:10px}
.jn{padding:13px 18px 14px}
.jn-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.jn-name{font-weight:700;font-size:14.5px}
.jn-meta{font-size:12.5px;white-space:nowrap}
.jn-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.jn-sum{margin:7px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.62;max-width:1040px}

/* ---------------------------------------------- economy: the two-door hub */
.ecopick{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.ecocard{display:block;transition:border-color .14s,background .14s}
.ecocard:hover{border-color:var(--line-2);background:var(--panel-2)}
.ecocard.wide{margin-top:14px}
.ecocard h3{color:var(--ink)}
.ecostats{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;color:var(--ink-2)}
.ecostats b{color:var(--ink);font-weight:750;font-variant-numeric:tabular-nums}

/* ----------------------------------------------- server setup: file views */
.cfgraw,.cfgdiff{margin:0;padding:14px 18px;overflow:auto;max-height:70vh;font-size:12.5px;
  line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.cfgdiff span{display:block;white-space:pre-wrap}
.cfgdiff .d-add{color:var(--green);background:rgba(58,192,109,.08)}
.cfgdiff .d-del{color:#ff8b94;background:var(--red-soft)}
.cfgdiff .d-same{color:var(--ink-3)}
.cfgdiff .d-gap{color:var(--ink-3);opacity:.6}

/* ------------------------------------------------- drift explorer */
.drift{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.drift-tree{max-height:78vh;overflow:auto;padding-bottom:8px}
.drift-group{padding:10px 16px 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:750}
.drift-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 16px;font-size:13px;color:var(--ink-2);border-left:2px solid transparent}
.drift-item:hover{background:var(--panel-2);color:var(--ink)}
.drift-item.on{background:var(--panel-2);border-left-color:var(--red);color:var(--ink);font-weight:650}
.drift-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drift-pane{min-height:320px;overflow:hidden}
.drift-code{max-height:72vh;overflow:auto;padding:10px 0;font-size:12.5px;line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Named apart from .dl and .dt, which are a definition list and a data table
   elsewhere in this file and were lending every diff line a border. */
.drow{display:flex;gap:12px;padding:0 16px;white-space:pre-wrap;word-break:break-word}
.drow .dgut{flex:none;width:22px;text-align:right;color:var(--ink-3);opacity:.55;user-select:none}
.drow .dtxt{flex:1;min-width:0}
.drow.add{background:rgba(58,192,109,.11)}
.drow.add .dgut{color:var(--green);opacity:1}
.drow.del{background:rgba(227,58,69,.13)}
.drow.del .dgut{color:var(--red);opacity:1}
.drow.gap{color:var(--ink-3);opacity:.5;padding-top:2px;padding-bottom:2px}
.drift-tabs{display:flex;gap:6px}
.drift-tabs .chip{cursor:pointer}
.dsplit-head{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.dsplit-head span{padding:7px 16px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3)}
.dsplit-head span+span{border-left:1px solid var(--line)}
.dsplit{display:grid;grid-template-columns:46px minmax(0,1fr) 46px minmax(0,1fr);
  align-items:stretch;padding:0}
.dsplit>.dgut{padding:0 8px 0 0;text-align:right;color:var(--ink-3);opacity:.5;user-select:none;
  font-variant-numeric:tabular-nums}
.dsplit>.dtxt{padding-right:14px;white-space:pre-wrap;word-break:break-word;min-width:0}
.dsplit>.dgut:nth-child(4n+3){border-left:1px solid var(--line);padding-left:10px}
.dsplit>.del{background:rgba(227,58,69,.13)}
.dsplit>.add{background:rgba(58,192,109,.11)}
.dsplit>.void{background:rgba(255,255,255,.018)}
.dsplit>.dgut.del,.dsplit>.dgut.add{opacity:1}
.dsplit-gap{grid-column:1/-1;padding:3px 16px;color:var(--ink-3);opacity:.5;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:1180px){
  .dsplit{grid-template-columns:46px minmax(0,1fr)}
  .dsplit>.dgut:nth-child(4n+3){border-left:0;padding-left:0}
}
.drift-heads{padding:8px 14px 0;font-size:11.5px;line-height:1.7;overflow-wrap:anywhere}
.drift-find{padding:10px 14px;border-bottom:1px solid var(--line)}
.drift-find input{width:100%;padding:7px 10px;border-radius:var(--r2);border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:inherit;font-size:13px}
.drift-find input:focus{outline:none;border-color:var(--ink-3)}
.drift-item.hide,.drift-group.hide{display:none}
@media (max-width:900px){.drift{grid-template-columns:1fr}.drift-tree{max-height:320px}}

/* ---------- 13. player hub ---------- */
/* One page per way of playing. The section strip sits under the identity,
   the scope pills under that; each section page opens on its own tiles. */
.ph-nav{margin:var(--s5) 0 var(--s4)}
.ph-kpis{margin-bottom:var(--s5)}
.ph-tiles{margin-bottom:var(--s5)}
.ph-cats{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  align-items:start}
.ph-cats>*{min-width:0}
/* Flex rather than grid, so a side with nothing in it can be taken out of the
   row and give its width back. A grid track stays put whatever happens to the
   element in it, which left a player with no kills reading their combat page
   down the left 61% of an empty screen. */
.ph-grid{display:flex;gap:var(--s4);align-items:flex-start}
.ph-grid>*{min-width:0;flex:1 1 0}
.ph-grid>*:first-child{flex-grow:1.55}
.ph-grid>.side-stack:not(:has(>*)){display:none}
@media (max-width:1080px){.ph-grid{flex-direction:column}.ph-grid>*{flex:0 0 auto;width:100%}}
/* wild against grown: a pair of bars growing away from the crop between them */
.ph-vs{display:grid;gap:11px}
.ph-vs-row{display:grid;grid-template-columns:minmax(0,1fr) 148px minmax(0,1fr);align-items:center;gap:10px}
.ph-vs-bar{display:flex;align-items:center;gap:9px;min-width:0}
.ph-vs-l{justify-content:flex-end}
.ph-vs-bar i{display:block;height:13px;border-radius:2px;flex:none;max-width:100%}
.ph-vs-bar b{font-size:12.5px;font-weight:650;flex:none}
.ph-vs-mid{display:flex;justify-content:center;min-width:0}
.ph-vs-mid .item{min-width:0}
.ph-vs-legend{display:flex;gap:var(--s5);margin-bottom:var(--s4);font-size:12px;color:var(--ink-2)}
.ph-vs-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:-1px}
.ph-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px 14px}
@media (max-width:640px){.ph-vs-row{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)}}
/* combat: the gun list */
.ph-weapons{display:grid;gap:11px}
.ph-weapon{display:grid;grid-template-columns:minmax(140px,205px) minmax(0,1fr) 52px max-content;
  align-items:center;gap:11px}
.ph-weapon .tr{display:block;height:12px;background:var(--panel-2);border-radius:2px;overflow:hidden}
.ph-weapon .tr i{display:block;height:100%;background:#e33a45;border-radius:2px}
.ph-weapon>b{font-size:13px;text-align:right}
.ph-weapon-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ph-dist{margin-left:auto;font-size:13px}
@media (max-width:640px){
  .ph-weapon{grid-template-columns:minmax(110px,150px) minmax(0,1fr) 44px}
  .ph-weapon-sub{display:none}
}
/* building: the base in 3D and the grade bars */
.ph-viewer-panel{margin-bottom:var(--s4)}
.ph-viewer{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ph-viewer iframe{display:block;width:100%;height:480px;border:0}
.ph-basepick{display:flex;gap:6px;flex-wrap:wrap}
.ph-grades{display:grid;gap:11px}
.ph-grade{display:grid;grid-template-columns:minmax(96px,130px) minmax(0,1fr) 56px;align-items:center;gap:11px}
.ph-grade .tr{display:block;height:12px;background:var(--panel-2);border-radius:2px;overflow:hidden}
.ph-grade .tr i{display:block;height:100%;background:#e33a45;border-radius:2px}
.ph-grade>b{font-size:13px;text-align:right}
@media (max-width:640px){.ph-viewer iframe{height:320px}}
/* exploring: the roam heat over the wipe map */
.ph-map-wrap{position:relative}
.ph-map{display:block;width:100%;background:var(--bg-2)}
/* overview: section doors and the fingerprint */
.ph-teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:var(--s3);margin-bottom:var(--s5)}
.ph-teaser{display:flex;flex-direction:column;gap:8px;padding:13px var(--s4);
  transition:border-color .14s,background .14s}
.ph-teaser:hover{border-color:var(--line-2);background:var(--panel-2)}
.ph-teaser-nums{display:flex;gap:var(--s5);flex-wrap:wrap}
.ph-teaser-nums span{display:flex;flex-direction:column}
.ph-teaser-nums b{font-family:var(--f-disp);font-size:21px;font-weight:700;line-height:1.15}
.ph-teaser-nums em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.ph-teaser-tf{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:auto}
.ch-rwrap{display:flex;justify-content:center}
.ch-rwrap svg{max-width:290px;width:100%}
/* hub round 2: the timeframe pills, and art on every stat */
.ph-tf{display:flex;gap:6px;flex-wrap:wrap}
.qtile{position:relative}
.qtile .qicon{position:absolute;right:12px;top:11px;width:28px;height:28px;object-fit:contain;opacity:.95}
.kpi{position:relative}
.kpi .kicon{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:6px}
.kpi>.kicon{position:absolute;right:13px;top:13px;width:24px;height:24px}
.stat-nm{display:inline-flex;align-items:center;gap:8px;min-width:0}
.stat-nm img{width:20px;height:20px;object-fit:contain;flex:none}
.bicon{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:6px}
.ch-bar .lb .bicon{margin-right:7px}
.ch-dleg .bicon{margin-right:4px}
.dl-ic>div>span:first-child{display:inline-flex;align-items:center}
.dl-ic .kicon{position:static;width:17px;height:17px;margin-right:7px}
.ph-inline-ic .bicon{vertical-align:-4px}
.ph-teaser-nums em{display:inline-flex;align-items:center;gap:5px}
.ph-teaser-nums em img{width:15px;height:15px;object-fit:contain}
/* the fingerprint hero: radar beside its axis bars */
.ph-fp{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:var(--s6);align-items:center}
.ph-fp .ch-rwrap svg{max-width:300px}
.ph-fp-axes{display:grid;gap:11px}
@media (max-width:760px){.ph-fp{grid-template-columns:1fr}}
/* donut legends carry art now; flex lets the icon be optional */
.ch-dleg span{display:flex;align-items:center;gap:8px}
.ch-dleg .dnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-dleg .bicon{width:17px;height:17px;margin-right:0}

/* ---------- 14. hub round 3: grids, crops, the layered map ---------- */
/* Stats as cards rather than rows. The bar is a share of the biggest thing
   in the same category, so a category reads as a shape at a glance and the
   exact three timeframes stay one hover (or one Table view) away. */
.sgrid-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sgrid-sort{display:flex;gap:5px}
.sgrid-find{height:28px;padding:0 10px;border-radius:var(--r1);border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:12.5px;width:150px}
.sgrid-find:focus{outline:none;border-color:var(--ink-3)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));gap:9px}
.scard{display:flex;flex-direction:column;gap:5px;padding:11px 12px 12px;border-radius:var(--r2);
  background:var(--panel-2);border:1px solid var(--line);cursor:default;
  transition:border-color .13s,background .13s}
.scard:hover,.scard:focus-visible{border-color:var(--line-2);background:var(--panel-3)}
.scard-top{display:flex;align-items:center;gap:9px;min-height:30px}
.scard-top img{width:27px;height:27px;object-fit:contain;flex:none}
.scard-top b{font-family:var(--f-disp);font-size:21px;font-weight:700;line-height:1;letter-spacing:-.01em}
.scard-nm{font-size:12px;color:var(--ink-2);line-height:1.3;overflow-wrap:anywhere}
.scard-bar{display:block;height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-top:2px}
.scard-bar i{display:block;height:100%;background:var(--red);border-radius:2px;transition:width .2s}
.scard-zero{opacity:.5}
.scard-zero .scard-bar i{background:var(--ink-3)}

/* The farm. A crop says how much came out of a planter against how much was
   picked off the ground, in one two-tone rule under the number. */
.ph-farmsum{display:flex;gap:var(--s7);flex-wrap:wrap;padding-bottom:var(--s4);margin-bottom:var(--s4);
  border-bottom:1px solid var(--line)}
.ph-farmsum span{display:flex;flex-direction:column;gap:2px}
.ph-farmsum b{font-family:var(--f-disp);font-size:25px;font-weight:700;line-height:1.1}
.ph-farmsum em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.cropgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(186px,100%),1fr));gap:10px}
.crop{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r2);
  background:var(--panel-2);border:1px solid var(--line);transition:border-color .13s,background .13s}
.crop:hover,.crop:focus-visible{border-color:var(--line-2);background:var(--panel-3)}
.crop img{width:34px;height:34px;object-fit:contain;flex:none}
.crop-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.crop-main b{font-family:var(--f-disp);font-size:19px;font-weight:700;line-height:1}
.crop-nm{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crop-split{display:flex;height:4px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.07)}
.crop-split i{display:block;height:100%}
.crop-split .grown{background:#1dae5c}
.crop-split .wild{background:#c58205}

/* The map reads one layer at a time, and says what a square holds. */
.ph-layers{display:flex;gap:5px;flex-wrap:wrap}
.ph-map{display:block;width:100%;background:var(--bg-2);cursor:crosshair}
.ph-map-read{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:var(--r1);
  background:rgba(16,18,21,.86);border:1px solid var(--line-2);font-size:12px;font-weight:600;
  pointer-events:none;min-height:0}
.ph-map-read:empty{display:none}

/* Pointing at a legend entry brings its band forward. */
.ch-focus .ch-dim{opacity:.22;transition:opacity .12s}
.ch-leg span[data-s]{cursor:default;border-radius:3px;padding:1px 4px;margin:-1px -4px}
.ch-leg span[data-s]:hover,.ch-leg span[data-s]:focus-visible{background:rgba(255,255,255,.05)}

/* ==========================================================================
   15. PLAYER HUB v2 — the page a player wants to look at.
   The staff language (hairline boxes, dense rows, 20px numbers) is right for
   moderating and wrong for a profile. This borrows the one visual vocabulary
   the site already owns and that players already liked: Wrapped. A drifting
   pool of the section's colour, a grain over it, a hero number that dominates,
   display caps for the labels, and art big enough to see.
   ========================================================================== */

/* Each section owns a colour. It drives the hero pool, the active tab, every
   bar and every glow on the page, so Farming and Raiding cannot be mistaken
   for each other at a glance. Slots come from the validated chart palette. */
.hub{--sec:#e33a45}
.hub[data-sec="farming"]  {--sec:#1dae5c}
.hub[data-sec="combat"]   {--sec:#e33a45}
.hub[data-sec="building"] {--sec:#4593f4}
.hub[data-sec="raiding"]  {--sec:#c58205}
.hub[data-sec="exploring"]{--sec:#18a7a0}

/* ---- the hero ---- */
.hub-hero{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--r4);background:var(--panel-2);margin-bottom:var(--s5)}
.hub-hero::before{content:"";position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 46% at 18% 12%, color-mix(in srgb,var(--sec) 46%,transparent), transparent 70%),
    radial-gradient(38% 42% at 86% 84%, color-mix(in srgb,var(--sec) 24%,transparent), transparent 72%);
  filter:blur(34px);animation:hubdrift 24s ease-in-out infinite alternate}
.hub-hero::after{content:"";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}
@keyframes hubdrift{from{transform:translate3d(-2%,-2%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.hub-hero::before{animation:none}}
.hub-hero>*{position:relative;z-index:2}

.hub-id{display:flex;align-items:center;gap:var(--s5);padding:var(--s6) var(--s6) var(--s5);flex-wrap:wrap}
.hub-ava{width:78px;height:78px;border-radius:var(--r3);overflow:hidden;flex:none;
  border:1px solid var(--line-2);background:var(--panel-3);box-shadow:0 10px 30px -14px #000}
.hub-ava img{width:100%;height:100%;object-fit:cover}
.hub-idtx{min-width:0;flex:1}
.hub-kick{display:block;font-family:var(--f-disp);font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb,var(--sec) 70%,var(--ink-2))}
.hub-name{font-size:clamp(30px,4.4vw,50px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;
  margin:6px 0 8px;overflow-wrap:anywhere}
.hub-meta{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.hub-meta .code{color:var(--ink-3)}
.hub-act{display:flex;gap:7px;align-self:flex-start}
.hub-call{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:99px;
  font-family:var(--f-disp);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sec);background:color-mix(in srgb,var(--sec) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--sec) 45%,transparent)}

/* the hero numbers. One row, gradient-filled, big enough to read across a room */
.hub-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  gap:var(--s4) var(--s5);padding:0 var(--s6) var(--s6)}
/* The art sits beside the figure rather than under it. Tucked below at 22px
   against a 42px numeral it read as a smudge attached to the caption, and the
   caption is the smallest thing on the card. */
.hub-stat{display:flex;align-items:center;gap:13px;min-width:0}
.hub-stat-ico{width:42px;height:42px;object-fit:contain;flex:none}
/* A derived figure like K/D has no art of its own. It keeps the indent anyway,
   or the column reads ragged where the stats stack on a phone. */
.hub-stat:not(:has(.hub-stat-ico))::before{content:"";width:42px;flex:none}
.hub-stat-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.hub-stat b{font-family:var(--f-disp);font-weight:700;line-height:.95;letter-spacing:-.02em;
  font-size:clamp(28px,3.5vw,42px);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--sec) 62%,#fff));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hub-stat span{font-family:var(--f-disp);font-size:13px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hub-stat em{font-style:normal;font-size:12px;color:var(--ink-3);opacity:.85}

/* ---- navigation: pills, not a strip of small underlined words ---- */
.hub-nav{display:flex;gap:4px;padding:5px;margin:0 var(--s6) var(--s5);border-radius:99px;
  background:rgba(0,0,0,.34);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.hub-nav::-webkit-scrollbar{display:none}
.hub-nav a{flex:none;padding:8px 17px;border-radius:99px;font-family:var(--f-disp);font-size:13.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  transition:color .14s,background .14s}
.hub-nav a:hover{color:var(--ink)}
.hub-nav a.on{background:var(--sec);color:#0f1216}
.hub-bar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.hub-bar .spacer{flex:1}

/* ---- panels get depth and the section's colour ---- */
.hub .panel{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 55%),var(--panel)}
.hub .panel.seam::before{background:var(--sec)}
.hub .panel-head h3{font-family:var(--f-disp);font-size:15.5px;letter-spacing:.02em}
.hub .ch-bars{--barc:var(--sec)}
.hub .ph-weapon .tr i,.hub .ph-grade .tr i,.hub .scard-bar i{background:var(--sec)}

/* ---- cards: the art is the point, so make it big and let it bleed ---- */
.hub .sgrid{grid-template-columns:repeat(auto-fill,minmax(min(186px,100%),1fr));gap:10px}
.hub .scard{position:relative;overflow:hidden;padding:13px 14px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 60%),var(--panel-2)}
.hub .scard::after{content:"";position:absolute;right:-14px;bottom:-16px;width:76px;height:76px;
  background:var(--wm) center/contain no-repeat;opacity:.07;pointer-events:none;
  transition:opacity .16s,transform .16s}
.hub .scard:hover::after{opacity:.13;transform:scale(1.06)}
.hub .scard:hover{border-color:color-mix(in srgb,var(--sec) 45%,var(--line-2));
  box-shadow:0 10px 26px -18px color-mix(in srgb,var(--sec) 80%,#000)}
.hub .scard-top img{width:34px;height:34px}
.hub .scard-top b{font-size:clamp(20px,2.4vw,26px)}
.hub .scard-nm{font-family:var(--f-disp);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}

.hub .crop{position:relative;overflow:hidden;padding:13px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 60%),var(--panel-2)}
.hub .crop img{width:42px;height:42px}
.hub .crop-main b{font-size:23px}
.hub .crop-nm{font-family:var(--f-disp);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase}
.hub .crop:hover{border-color:color-mix(in srgb,var(--sec) 45%,var(--line-2));
  box-shadow:0 10px 26px -18px color-mix(in srgb,var(--sec) 80%,#000)}

/* section doors on the overview: each in its own colour, art-backed */
.hub .ph-teasers{gap:var(--s3)}
.hub .ph-teaser{position:relative;overflow:hidden;border-radius:var(--r3);padding:15px var(--s4) 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 60%),var(--panel)}
.hub .ph-teaser::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:var(--tsec,var(--sec));opacity:.9}
.hub .ph-teaser:hover{border-color:color-mix(in srgb,var(--tsec,var(--sec)) 50%,var(--line-2));
  box-shadow:0 14px 30px -22px color-mix(in srgb,var(--tsec,var(--sec)) 90%,#000)}
.hub .ph-teaser .cap{font-family:var(--f-disp);font-size:12px;letter-spacing:.14em;
  color:color-mix(in srgb,var(--tsec,var(--sec)) 78%,var(--ink-2))}
.hub .ph-teaser-nums b{font-size:26px;
  background:linear-gradient(180deg,#fff 35%,color-mix(in srgb,var(--tsec,var(--sec)) 58%,#fff));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* numbers arrive rather than appear, and only if the visitor has not asked
   for stillness. Nothing here is load-bearing: the value is in the DOM. */
.hub [data-count]{transition:none}
.hub .reveal{opacity:0;transform:translateY(10px)}
.hub .reveal.in{opacity:1;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.hub .reveal{opacity:1;transform:none}}

@media (max-width:760px){
  .hub-id{padding:var(--s5) var(--s4) var(--s4);gap:var(--s4)}
  .hub-ava{width:56px;height:56px}
  .hub-stats{padding:0 var(--s4) var(--s5);gap:var(--s3)}
  .hub-stat-ico{width:34px;height:34px}
  .hub-nav{margin:0 var(--s4) var(--s4)}
}
/* the nav hugs its own pills instead of ruling a line across the hero */
.hub-nav{width:max-content;max-width:calc(100% - var(--s6) * 2)}
/* a single-series chart is about one thing, so it wears the section's colour */
.hub .ch-wrap:not(:has(.ch-leg)) rect[data-s="0"]{fill:var(--sec)}
.hub .ch-wrap:not(:has(.ch-leg)) polyline{stroke:var(--sec)}
/* The server banners are cards with their own big type, so they fight the
   hero rather than sit behind it. The colour pool is the atmosphere. */
/* a chosen control wears the section's colour, so the page has one accent
   rather than red buttons sitting on a green page */
.hub .ph-tf .btn-sel,.hub .sgrid-sort .btn-sel,.hub .ph-layers .btn-sel,.hub .ph-basepick .btn-sel{
  background:color-mix(in srgb,var(--sec) 20%,var(--panel-2));
  border-color:color-mix(in srgb,var(--sec) 52%,transparent);
  color:color-mix(in srgb,var(--sec) 84%,#fff)}
.hub .pills a.on{background:color-mix(in srgb,var(--sec) 17%,transparent);
  border-color:color-mix(in srgb,var(--sec) 50%,transparent);
  color:color-mix(in srgb,var(--sec) 82%,#fff)}

/* ---------- 16. the review: icons you can actually see ----------
   Art was being set at 16-18px, which is a smudge at the size a player looks
   at it, and the global img reset makes every one of them a block, so an icon
   beside a bar label took its own line. Both fixed here. */
.bicon,.kicon{display:inline-block;vertical-align:-6px}
.bicon{width:23px;height:23px;margin-right:8px}
.kicon{width:20px;height:20px;margin-right:8px}
.ch-bar .lb{display:flex;align-items:center;gap:0;min-width:0}
.ch-bar .lb .bicon{margin-right:9px;flex:none}
.ch-bar .lb em{margin-left:7px;flex:none}
.ch-bar{grid-template-columns:minmax(150px,1.35fr) minmax(0,2fr) auto}
.ch-dleg .bicon{width:22px;height:22px;margin-right:2px}
.stat-nm img{width:26px;height:26px}
.qtile .qicon{width:34px;height:34px}
.hub .scard-top img{width:40px;height:40px}
.hub .crop img{width:52px;height:52px}
.ph-teaser-nums em img{width:19px;height:19px}
.ph-weapon .item img,.ph-grade .item img,.ph-vs-mid .item img{width:40px;height:40px}
@media (max-width:640px){
  .ch-bar{grid-template-columns:minmax(120px,1.3fr) minmax(0,1.6fr) auto}
}