/* ============================================================
   Office PUG - lobby styles
   ============================================================ */

/* Colours and faces come from the brand stylesheet (assets/brand/rush.css,
   chosen by 'brand_css' in lib/config.php). Nothing below names a colour or a
   face directly, so changing the brand never means editing this file. */
/* Scrollbars, in the same palette as the rest of it. Left alone, a dark page
   gets a bright grey stripe down the side that belongs to no theme at all.
   Firefox takes the two-value shorthand; Chromium takes the ::-webkit rules.
   The thumb sits inside a transparent border so it reads as a rounded bar
   rather than a full-width block. */
:root{scrollbar-color:var(--surf2) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surf2);border:3px solid var(--bg);
                          border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--line)}
::-webkit-scrollbar-corner{background:var(--bg)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6}
.wrap{max-width:1120px;margin:0 auto;padding:26px 20px 40px;display:flex;flex-direction:column;gap:22px}
@media(max-width:560px){.wrap{padding:18px 14px 30px;gap:16px}}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.015em;text-wrap:balance;text-transform:var(--display-case)}
h1{font-size:calc(1.7rem * var(--display-scale));font-weight:700}
h2{font-size:calc(1.15rem * var(--display-scale));font-weight:600}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0}

/* ---------------- top bar ---------------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(var(--bg-rgb),.92);
        backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1120px;margin:0 auto;padding:12px 20px;
           display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{font-family:var(--font-display);font-weight:var(--mark-weight);font-size:calc(1.05rem * var(--display-scale));letter-spacing:-.015em;text-transform:var(--display-case);display:inline-block;transform:skewX(var(--mark-skew))}
.brand-first{color:var(--brand-first)}
.brand-sub{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
           text-transform:uppercase;color:var(--mut)}

.nav{display:flex;gap:2px;flex:1;min-width:0;flex-wrap:wrap}
.navlink{font-family:var(--font-display);font-weight:600;font-size:calc(.88rem * var(--display-scale));color:var(--mut);
         text-decoration:none;padding:7px 12px;border-radius:3px;white-space:nowrap;
         border:1px solid transparent;transition:color .12s,border-color .12s,background .12s;text-transform:var(--display-case)}
.navlink:hover{color:var(--ink);background:var(--surf2)}
.navlink.on{color:var(--acc);border-color:var(--acc)}

.userbox{display:flex;align-items:center;gap:8px;flex:none}
.userchip{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
          background:var(--surf2);border:1px solid var(--line);border-radius:3px;padding:5px 11px 5px 6px;
          transition:border-color .12s}
.userchip:hover{border-color:var(--acc)}
.userchip img{width:28px;height:28px;border-radius:2px;background:var(--surf);flex:none}
.userchip-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.userchip-name{font-size:.85rem;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userchip-sub{font-size:.68rem;color:var(--mut)}

.foot{max-width:1120px;margin:0 auto;padding:22px 20px 40px;display:flex;gap:8px;flex-wrap:wrap;
      color:var(--mut);font-size:.78rem;border-top:1px solid var(--line)}

/* ---------------- inside the full-screen app ----------------
   From 0.2.0 the app draws its own screens. The few pages it still opens from
   the site - a match's scoreboard, the strat board, the admin panel - keep what
   is on them but lose the website around it: the app's bar in place of the nav,
   no footer, the whole width, and type sized for across the room. */
html.in-app{font-size:clamp(15px, 1vw, 22px)}
/* Inside the app these pages sit in the same window as the shell, under the
   same title bar, so they carry the same light: the volt glow in the corner the
   window's buttons sit in, and the pink one at the far bottom left. Without it
   the top right corner was flat and the buttons' own backdrop showed as a box. */
html.in-app body{background:
  radial-gradient(60% 70% at 88% 6%, color-mix(in srgb, var(--rush-volt, #9B5CFF) 26%, transparent), transparent 70%),
  radial-gradient(55% 60% at 6% 100%, rgba(var(--acc-rgb),.15), transparent 70%),
  var(--bg);
  background-attachment:fixed}
.appbar .topbar-in{max-width:none;padding:14px 2.4rem;gap:20px;
  /* Same as the shell's bar: inside the app this strip is the title bar */
  -webkit-app-region:drag;padding-right:calc(2.4rem + 100vw - env(titlebar-area-width, 100vw))}
.appbar .topbar-in a,.appbar .topbar-in button{-webkit-app-region:no-drag}
.apptitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
          font-family:var(--font-display);font-weight:800;font-size:calc(1.05rem * var(--display-scale));
          letter-spacing:.02em;text-transform:var(--display-case);color:var(--ink2)}
.apphint{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.75rem;color:var(--mut)}
.apphint kbd{padding:4px 7px;border-radius:4px;border:1px solid var(--line);background:var(--surf);
             color:var(--ink);font:600 .68rem/1 var(--font-mono)}
.in-app .wrap{max-width:none;padding:1.6rem 2.4rem 3rem}

@media(max-width:760px){
  .topbar-in{gap:10px;padding:10px 14px}
  .nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;
       scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar{display:none}
  .navlink{padding:6px 10px;font-size:calc(.84rem * var(--display-scale))}
  .brand{flex:1}
  .userchip-txt{display:none}
  .userchip{padding:5px 6px}
}

.btn{font-family:var(--font-display);font-weight:600;font-size:calc(.9rem * var(--display-scale));border:1px solid var(--line);
     background:var(--surf2);color:var(--ink);padding:9px 16px;border-radius:3px;cursor:pointer;
     text-decoration:none;display:inline-block;text-transform:var(--display-case)}
.btn:hover{border-color:var(--acc)}
.btn.pri{background:var(--acc);color:var(--accink);border-color:var(--acc)}
.btn.dim{color:var(--mut)}
.btn.icon{padding:9px 11px;line-height:1}

.card{background:var(--surf);border:1px solid var(--line);border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:14px}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;align-items:center;gap:10px;background:var(--surf2);border-radius:3px;padding:8px 12px}
.prow img{width:26px;height:26px;border-radius:2px;background:var(--surf)}
.prow .n{flex:1;min-width:0;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .v{font-family:var(--font-mono);font-size:.8rem;color:var(--mut)}
.prow .cap{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;color:var(--acc);
           border:1px solid var(--acc);border-radius:2px;padding:1px 5px}
.prow.pick{cursor:pointer}
.prow.pick:hover{outline:1px solid var(--acc)}
.prow.waiting{opacity:.55}

.teams{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.teams{grid-template-columns:1fr}}
.team1 h2{color:var(--t1)}
.team2 h2{color:var(--t2)}
.card.team1{border-top:2px solid var(--t1)}
.card.team2{border-top:2px solid var(--t2)}
.card.turnteam{box-shadow:0 0 0 1px var(--acc) inset}

.note{font-size:.9rem;color:var(--ink2);margin:0}
.turn{display:inline-block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;
      text-transform:uppercase;padding:3px 9px;border-radius:2px;background:var(--surf2);color:var(--acc)}
.turn.mine{background:var(--acc);color:var(--accink)}
.ok{color:var(--ok)} .bad{color:var(--bad)}
.big{font-family:var(--font-display);font-weight:700;font-size:calc(1.5rem * var(--display-scale));text-transform:var(--display-case)}
code{font-family:var(--font-mono);background:var(--surf2);padding:2px 7px;border-radius:2px;font-size:.9em}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.step{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
      color:var(--mut);border:1px solid var(--line);border-radius:2px;padding:3px 9px}
.step.on{color:var(--acc);border-color:var(--acc)}
.step.done{color:var(--ok);border-color:var(--ok)}
.phasebar .lead{display:flex;align-items:center;gap:14px;min-width:0}
.timer{position:relative;width:62px;height:62px;flex:none}
.timer svg{width:62px;height:62px;transform:rotate(-90deg);display:block}
.timer circle{fill:none;stroke-width:4;stroke-linecap:round}
.timer .track{stroke:var(--line)}
.timer .bar{stroke:var(--acc);transition:stroke .3s}
.timer .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
            font-family:var(--font-mono);font-variant-numeric:tabular-nums;
            font-size:1.25rem;font-weight:500;color:var(--acc);transition:color .3s}
.timer.warn .bar,.timer.warn .num{stroke:var(--warn);color:var(--warn)}
.timer.crit .bar,.timer.crit .num{stroke:var(--bad);color:var(--bad)}
.timer.crit{animation:pulse .9s ease-in-out infinite}
.timer.off{display:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.turnflag.t1{border-color:var(--t1);color:var(--t1)}
.turnflag.t2{border-color:var(--t2);color:var(--t2)}
.turnflag.mine{background:var(--acc);border-color:var(--acc);color:var(--accink)}

/* ---------------- ban order strip ---------------- */
.strip{display:flex;gap:6px;flex-wrap:wrap}
.slot{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:2px;padding:3px 9px;
      font-family:var(--font-mono);font-size:.7rem;color:var(--mut);white-space:nowrap}
.slot .who{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.slot.t1 .who{color:var(--t1)} .slot.t2 .who{color:var(--t2)}
.slot.done{color:var(--bad)}
.slot.done .mapname{text-decoration:line-through}
.slot.now{border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}

/* ---------------- map grid ---------------- */
/* The whole pool sits on one row, the way the veto board looks in game. --cols
   is set from the pool size; below tablet width it falls back to wrapping. */
.mapgrid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:12px}
@media(max-width:820px){.mapgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(max-width:420px){.mapgrid{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}}
.mapcard .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
               filter:saturate(.85) brightness(.66);transition:filter .25s,transform .4s,opacity .3s}
.mapcard .shade{position:absolute;inset:0;
                background:linear-gradient(to top,rgba(var(--shade-rgb),.94) 0%,rgba(var(--shade-rgb),.45) 42%,rgba(var(--shade-rgb),.08) 100%)}
.mapcard .name{position:absolute;left:11px;right:11px;bottom:9px;margin:0;
               font-family:var(--font-display);font-weight:700;font-size:calc(1rem * var(--display-scale));letter-spacing:-.01em;
               text-shadow:0 1px 3px rgba(0,0,0,.7);text-transform:var(--display-case)}
.mapcard .glyph{position:absolute;top:8px;right:8px;width:26px;height:26px;opacity:.55;
                filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.mapcard.lead .tally{border-color:var(--acc);color:var(--acc)}
.mapcard .voters .more{align-self:center;margin-left:12px;font-family:var(--font-mono);
                       font-size:.68rem;color:var(--ink2)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.mapcard.clickable:hover .shot{filter:saturate(1) brightness(.82);transform:scale(1.05)}
.mapcard.mine{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.mapcard.idle{opacity:.85}

/* the X that stamps a banned map */
.mapcard .stamp{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.mapcard .stamp::before,.mapcard .stamp::after{content:"";position:absolute;top:50%;left:12%;right:12%;height:3px;
  background:var(--bad);border-radius:2px;box-shadow:0 0 12px rgba(var(--bad-rgb),.55)}
.mapcard .stamp::before{transform:rotate(24deg)}
.mapcard .stamp::after{transform:rotate(-24deg)}

.mapcard.banned{opacity:.42;border-color:rgba(var(--bad-rgb),.3)}
.mapcard.banned .shot{filter:grayscale(1) brightness(.4)}
.mapcard.banned .name{text-decoration:line-through;color:var(--mut)}
.mapcard.banned .glyph{opacity:.2}
.mapcard.banned .stamp{opacity:1}
.mapcard.banned .voters{display:none}
.mapcard.banned .tally{display:none}
.mapcard.banned .bannedby{display:block}
@keyframes banshake{
  0%{transform:translateX(0)}   15%{transform:translateX(-7px) rotate(-1deg)}
  30%{transform:translateX(6px) rotate(1deg)}  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)} 100%{transform:translateX(0)}
}

.mapcard.decider{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok) inset,0 0 26px rgba(var(--ok-rgb),.28)}
.mapcard.decider .shot{filter:saturate(1.05) brightness(.85)}
.mapcard.decider .name{color:var(--ok)}
/* The decider is a banner, not a poster - a fixed height keeps the side buttons
   on screen on a laptop. */
.mapcard.hero{aspect-ratio:auto;height:190px;min-height:0;animation:reveal .5s ease-out}
.mapcard.hero .name{font-size:1.5rem}
@keyframes reveal{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------------- side pick ---------------- */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.sides{grid-template-columns:1fr}}
.side{position:relative;border:2px solid var(--line);border-radius:5px;background:var(--surf2);
      padding:20px 14px 46px;text-align:center;transition:border-color .16s,background .16s,transform .16s}
.side .lbl{font-family:var(--font-display);font-weight:700;font-size:calc(1.6rem * var(--display-scale));line-height:1;text-transform:var(--display-case)}
.side .sub{font-family:var(--font-mono);font-size:.72rem;color:var(--mut);margin-top:4px}
.side .voters{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center}
.side .voters img{width:24px;height:24px;border-radius:50%;border:2px solid var(--surf2);margin:0 -5px;
                  background:var(--surf);animation:pop .22s ease-out}
.side.ct{--sc:var(--ct)} .side.t{--sc:var(--tside)}
.side.clickable{cursor:pointer}
.side.clickable:hover{border-color:var(--sc);transform:translateY(-2px)}
.side.mine{border-color:var(--sc);background:rgba(var(--ct-rgb),.08)}
.side.t.mine{background:rgba(var(--tside-rgb),.08)}
.side.mine .lbl{color:var(--sc)}
.side.idle{opacity:.75}

/* ---------------- misc ---------------- */
.rowbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.deciding{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}

/* ============================================================
   Page furniture shared by admin, profile and leaderboard
   ============================================================ */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pagehead h1{font-size:calc(1.55rem * var(--display-scale))}
.pagehead .sub{color:var(--mut);font-size:.85rem;margin:2px 0 0}

/* ---------------- tabs ---------------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;
      scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--font-display);font-weight:600;font-size:calc(.9rem * var(--display-scale));color:var(--mut);
     background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
     padding:10px 15px;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s;text-transform:var(--display-case)}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.tab .count{font-family:var(--font-mono);font-size:.72rem;color:var(--mut);margin-left:6px}
.tabpanel{display:none;flex-direction:column;gap:20px}
.tabpanel.on{display:flex}

/* ---------------- forms ---------------- */
input[type=text],input[type=number],input[type=search],select,textarea{
  font-family:var(--font-mono);font-size:.85rem;width:100%;
  background:var(--surf2);color:var(--ink);border:1px solid var(--line);border-radius:3px;
  padding:9px 11px;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
input::placeholder{color:var(--mut)}
label.chk{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--ink2);cursor:pointer;
          white-space:nowrap}
label.chk input{width:auto}
.field{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field input,.field select{flex:1;min-width:180px}

/* One setting: label and help on the left, the control on the right */
.setrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px 24px;
        align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
.sethead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.setlabel{font-family:var(--font-display);font-weight:600;font-size:calc(.92rem * var(--display-scale));text-transform:var(--display-case)}
.sethelp{font-size:.8rem;color:var(--mut);margin:4px 0 0}
.setctl{min-width:0}
.setrow.wide{grid-template-columns:1fr}
@media(max-width:760px){.setrow{grid-template-columns:1fr;gap:8px}}

/* ---------------- map chips (admin) ---------------- */
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.map{background:var(--surf2);border:1px solid var(--line);border-radius:3px;padding:10px 12px;
     font-family:var(--font-display);font-weight:600;font-size:calc(.88rem * var(--display-scale));text-align:center;cursor:pointer;
     transition:border-color .12s,color .12s;text-transform:var(--display-case)}
.map:hover{border-color:var(--acc)}
.map.live{border-color:var(--ok);color:var(--ok)}
.mapchk{display:flex;align-items:center;gap:8px;text-align:left;font-size:.84rem;font-weight:500}
.mapchk input{width:auto}
.mapchk.on{border-color:var(--acc);color:var(--acc)}
/* Practice picks from everything on disk, so its chips come in labelled groups */
.mapgroups{display:flex;flex-direction:column;gap:18px}
.mapgroup{display:flex;flex-direction:column;gap:8px}
.mapgroup h3 .count{font-size:.72rem;color:var(--mut);margin-left:4px;font-weight:400}

/* ---------------- the three servers (admin) ---------------- */
/* One tile each: the state of all three at a glance, and the way into each tab */
.srvstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.srvtile{display:flex;flex-direction:column;gap:6px;min-width:0;text-align:left;cursor:pointer;
         background:var(--surf);color:var(--ink);border:1px solid var(--line);border-radius:4px;
         padding:12px 14px;font:inherit;transition:border-color .12s,box-shadow .12s}
.srvtile:hover{border-color:var(--acc)}
.srvtile.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.srvtile-name{font-family:var(--font-display);font-weight:600;font-size:calc(.95rem * var(--display-scale));
              text-transform:var(--display-case)}
.srvtile-name .mono{font-size:.75rem;font-weight:400;color:var(--mut);text-transform:none}
.srvtile-state{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--font-mono);font-size:.76rem;color:var(--ink2)}
.srvtile-state .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.srvstrip{grid-template-columns:1fr}}

/* ---------------- tags, dots ---------------- */
.tag{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
     border:1px solid var(--line);border-radius:2px;padding:1px 6px;color:var(--mut);white-space:nowrap}
.tag.owner{color:var(--acc);border-color:var(--acc)}
.tag.ingame{color:var(--ok);border-color:var(--ok)}
.tag.good{color:var(--ok);border-color:var(--ok)}
.tag.warn{color:var(--bad);border-color:var(--bad)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--bad);flex:none}
.dot.on{background:var(--ok)}
/* Up, but hibernating with nobody on it - not a fault, so not the fault colour */
.dot.sleep{background:var(--mut)}

/* ---------------- activity log ---------------- */
.log{display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
.log div{font-family:var(--font-mono);font-size:.75rem;color:var(--ink2);
         padding:6px 8px;border-bottom:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.log .t{color:var(--mut);flex:none}
.log .a{color:var(--acc)}

/* ---------------- toast ---------------- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--surf2);
       border:1px solid var(--acc);border-radius:3px;padding:11px 18px;font-size:.88rem;
       opacity:0;pointer-events:none;transition:opacity .18s;max-width:90vw;z-index:50}
#toast.show{opacity:1}
#toast.bad{border-color:var(--bad)}

/* ---------------- stat tiles ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--surf2);border:1px solid var(--line);border-radius:4px;padding:13px 14px}
.tile .k{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;
         text-transform:uppercase;color:var(--mut);display:block}
.tile .v{font-family:var(--font-display);font-weight:700;font-size:calc(1.45rem * var(--display-scale));line-height:1.25;
         display:block;margin-top:3px;font-variant-numeric:tabular-nums;text-transform:var(--display-case)}
.tile .x{font-size:.75rem;color:var(--mut)}
.tile.good .v{color:var(--ok)}
.tile.bad .v{color:var(--bad)}

/* ---------------- profile header ---------------- */
.profhead{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.profavatar{width:84px;height:84px;border-radius:4px;background:var(--surf2);flex:none;
            border:1px solid var(--line)}
.profid{flex:1;min-width:200px}
.profid h1{font-size:calc(1.75rem * var(--display-scale));margin:0}
.profid .meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;
              color:var(--mut);font-size:.82rem}
.rankbox{display:flex;align-items:center;gap:11px;background:var(--surf2);border:1px solid var(--line);
         border-radius:4px;padding:10px 16px;flex:none}
.rankbox img{width:52px;height:auto;flex:none}
.rankbox .k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
            text-transform:uppercase;color:var(--mut);display:block}
.rankbox .v{font-family:var(--font-display);font-weight:700;font-size:calc(1.02rem * var(--display-scale));display:block;text-transform:var(--display-case)}
.rankbox .p{font-family:var(--font-mono);font-size:.78rem;color:var(--acc)}

/* ---------------- tables ---------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
table.data th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
              text-transform:uppercase;color:var(--mut);text-align:right;font-weight:400;
              padding:0 12px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th:first-child,table.data th.l{text-align:left}
table.data td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;
              font-variant-numeric:tabular-nums;white-space:nowrap}
table.data td:first-child,table.data td.l{text-align:left}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--surf2)}
table.data .pos{font-family:var(--font-mono);color:var(--mut);width:38px}
table.data .who{display:flex;align-items:center;gap:9px;min-width:0}
table.data .who img{width:24px;height:24px;border-radius:2px;background:var(--surf2);flex:none}
table.data a{color:var(--ink);text-decoration:none}
table.data a:hover{color:var(--acc)}
table.data tr.me{background:rgba(var(--acc-rgb),.07)}
table.data tr.me td:first-child{box-shadow:inset 2px 0 0 var(--acc)}

/* ---------------- match history ---------------- */
.hist{display:flex;flex-direction:column;gap:8px}
.histrow{display:flex;align-items:center;gap:12px;background:var(--surf2);border:1px solid var(--line);
         border-radius:4px;padding:8px 12px 8px 8px}
.histrow .thumb{width:74px;height:42px;border-radius:3px;object-fit:cover;flex:none;background:var(--surf)}
.histrow .m{flex:1;min-width:0}
.histrow .mname{font-family:var(--font-display);font-weight:600;font-size:calc(.94rem * var(--display-scale));text-transform:var(--display-case)}
.histrow .msub{font-size:.76rem;color:var(--mut)}
.histrow .hstatus{font-family:var(--font-mono);font-size:.72rem;color:var(--mut);text-align:right}
@media(max-width:520px){.histrow .thumb{width:56px;height:34px}}

/* ---------------- misc ---------------- */
.empty{text-align:center;color:var(--mut);padding:28px 10px;font-size:.9rem}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.btn.sm{font-size:calc(.78rem * var(--display-scale));padding:5px 10px}
.btn.danger{color:var(--bad)}
.btn.danger:hover{border-color:var(--bad)}
h3{font-family:var(--font-display);font-size:calc(.95rem * var(--display-scale));font-weight:600;color:var(--ink2);margin:0;text-transform:var(--display-case)}
a.n{color:inherit;text-decoration:none}
a.n:hover{color:var(--acc)}

/* ---------------- loadout picker (profile) ---------------- */
.loadout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
@media(min-width:900px){.loadout{grid-template-columns:repeat(2,1fr)}}
.lo{background:var(--surf2);border:1px solid var(--line);border-radius:4px;
    padding:11px 12px;display:block}
.lo .k{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;
       text-transform:uppercase;color:var(--mut);display:block;margin-bottom:6px}
.lobody{display:flex;gap:11px;align-items:flex-start}
.lopic{flex:0 0 68px;height:68px;border-radius:4px;background:var(--surf);
       border:1px solid var(--line);display:flex;align-items:center;
       justify-content:center;overflow:hidden}
.lopic img{max-width:100%;max-height:100%;display:block}
.noprev{font-size:.6rem;color:var(--mut);text-align:center;line-height:1.2;padding:4px}
.loctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.lo select{width:100%}
.lo.busy{border-color:var(--acc)}
#loadmsg{margin-top:10px;min-height:1.1em}
#loadmsg.ok{color:var(--ok)}
#loadmsg.bad{color:var(--bad)}

/* ---------------- inventory (profile) ---------------- */
.invgroup{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;
          text-transform:uppercase;color:var(--mut);margin:16px 0 8px}
.invgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:9px}
.invitem{background:var(--surf2);border:1px solid var(--line);border-radius:4px;
         padding:9px;display:flex;flex-direction:column;align-items:center;gap:5px;
         cursor:pointer;color:inherit;font:inherit;text-align:center;width:100%}
.invitem:hover{border-color:var(--acc)}
.invitem img{width:100%;height:46px;object-fit:contain}
.invitem .n{font-size:.78rem;font-weight:600;line-height:1.2}
.invitem .s{font-size:.68rem;color:var(--mut);line-height:1.2;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.invitem .s.on{color:var(--acc)}

.invmodal{position:fixed;inset:0;background:rgba(var(--shade-rgb),.82);z-index:50;
          display:flex;align-items:center;justify-content:center;padding:18px}
.invmodal[hidden]{display:none}
.invbox{background:var(--surf);border:1px solid var(--line);border-radius:6px;
        width:min(880px,100%);max-height:86vh;display:flex;flex-direction:column;padding:14px}
.invhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.invhead h3{margin:0;font-size:calc(1.05rem * var(--display-scale))}
.invsearch{margin-bottom:10px}
.invlist{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
         gap:8px;padding-right:4px}
.invopt{background:var(--surf2);border:1px solid var(--line);border-radius:4px;padding:8px;
        display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
        color:inherit;font:inherit;text-align:center}
.invopt:hover{border-color:var(--acc)}
.invopt img{width:100%;height:52px;object-fit:contain}
.invopt .l{font-size:.72rem;line-height:1.2}
.invnone{height:52px;display:flex;align-items:center;color:var(--mut);font-size:.7rem}

/* Side badge + carried-knife marking on inventory tiles. Scoped to .invitem:
   a bare .side here also matched the lobby's CT / T pick blocks, which are
   declared further up, and absolutely positioned them into a corner - the side
   selection screen came out with no buttons on it at all. */
.invitem{position:relative}
.invitem .side{position:absolute;top:5px;right:6px;font-family:var(--font-mono);
      font-size:.55rem;letter-spacing:.06em;padding:1px 4px;border-radius:3px;
      background:var(--surf);border:1px solid var(--line);color:var(--mut)}
.invitem .side.ct{color:var(--t1);border-color:color-mix(in srgb,var(--t1) 40%,var(--line))}
.invitem .side.t{color:var(--t2);border-color:color-mix(in srgb,var(--t2) 40%,var(--line))}
.invitem .side.worn{color:var(--accink);background:var(--acc);border-color:var(--acc)}
.invitem.worn{border-color:var(--acc)}
.invitem.idle{opacity:.55}
.invitem.idle:hover{opacity:1}
.invhint{margin:-2px 0 9px;font-size:.8rem}
.invitem .s.t2{color:var(--t2)}
.invside{display:flex;gap:6px;margin-bottom:9px}
/* display:flex beats the default [hidden] rule, so say it explicitly */
.invside[hidden]{display:none}
.invopt[hidden]{display:none}
.invside button{flex:1;background:var(--surf2);border:1px solid var(--line);border-radius:4px;
                padding:6px 8px;color:var(--ink2);font:inherit;font-size:.78rem;cursor:pointer}
.invside button.on{border-color:var(--acc);color:var(--acc)}

/* ---------------- skin picker: large preview + CS:GO grades ---------------- */
.invhero{display:flex;gap:14px;align-items:center;background:var(--surf2);
         border:1px solid var(--line);border-radius:5px;padding:12px 14px;margin-bottom:10px}
.invhero[hidden]{display:none}
.invheroimg{width:min(340px,52%);max-height:150px;object-fit:contain;display:block}
.invherometa{min-width:0}
.invheroname{font-family:var(--font-display);font-weight:700;font-size:calc(1.05rem * var(--display-scale));line-height:1.25;text-transform:var(--display-case)}
.invherograde{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
              text-transform:uppercase;margin-top:4px}

/* the grade colour is the strip along the bottom, the way the game shows it.
   No overflow:hidden here - it clipped the skin name right off the tile. */
.invopt{position:relative;padding-bottom:11px}
.invopt[style*="--grade"]::after{content:"";position:absolute;left:0;right:0;bottom:0;
                                 height:3px;border-radius:0 0 3px 3px;background:var(--grade)}
.invopt[style*="--grade"]:hover{border-color:var(--grade)}
.invopt .g{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.06em;
           text-transform:uppercase;color:var(--mut)}

/* loadout tiles now open the same picker the inventory uses */
.lotile{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.lotile:hover{border-color:var(--acc)}
.lotile .lobody{align-items:center}
.loname{display:block;font-size:.85rem;font-weight:600;line-height:1.25}
.lohint{display:block;font-size:.68rem;color:var(--mut);margin-top:3px}
.invheroaud{width:100%;max-width:320px;height:32px;margin-top:8px;display:block}
.invheroaud[hidden]{display:none}

/* ---------------- match stats page ---------------- */
.msscroll{overflow-x:auto;margin-bottom:14px}
.mstable{width:100%;border-collapse:collapse;font-size:.82rem;min-width:640px}
.mstable th{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;
            text-transform:uppercase;color:var(--mut);font-weight:400;
            padding:6px 8px;text-align:right;border-bottom:1px solid var(--line)}
.mstable td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line);
            font-variant-numeric:tabular-nums}
.mstable th.l,.mstable td.l{text-align:left}
.mstable tbody tr:hover{background:var(--surf2)}
.mstable td.good{color:var(--ok)}

.hitwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.hitcard{background:var(--surf2);border:1px solid var(--line);border-radius:4px;padding:11px 12px}
.hitname{font-weight:600;font-size:.88rem;margin-bottom:8px;display:flex;
         justify-content:space-between;gap:8px;align-items:baseline}
.hitname .note{font-size:.7rem}
.hitrow{display:grid;grid-template-columns:66px 1fr 62px;gap:8px;align-items:center;margin-bottom:4px}
.hitrow .hg{font-size:.7rem;color:var(--ink2)}
.hitrow .bar{background:var(--surf);border-radius:2px;height:8px;overflow:hidden}
.hitrow .bar i{display:block;height:100%;background:var(--t1)}
.hitrow.head .bar i{background:var(--acc)}
.hitrow .hn{font-size:.7rem;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums}
.hitrow .hn em{font-style:normal;color:var(--ink2)}
.mstable td.l a{color:var(--ink);text-decoration:none}
.mstable td.l a:hover{color:var(--acc)}
.mname .mlink{color:inherit;text-decoration:none}
.mname .mlink:hover{color:var(--acc)}

/* ---------- ready screen: launch ---------- */
.btn.big{font-size:calc(1rem * var(--display-scale));padding:13px 26px;letter-spacing:.02em}

/* The manual join is still here for a PC without the launch handler, but folded
   away so it does not read like something everyone has to do. */
.fallback{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.fallback>summary{cursor:pointer;color:var(--mut);font-size:.82rem;list-style:none;
                  display:inline-flex;align-items:center;gap:7px}
.fallback>summary::-webkit-details-marker{display:none}
.fallback>summary::before{content:"+";font-family:var(--font-mono);color:var(--acc)}
.fallback[open]>summary::before{content:"\2212"}
.fallback>summary:hover{color:var(--ink2)}
.fallback>*{margin-top:11px}

/* A paint the mod allows on this gun but Valve never drew for it: the tile
   borrows a render from a gun that does have one, and says where it came from. */
.invopt .alt{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.06em;
             text-transform:uppercase;color:var(--mut);opacity:.75}
.invopt:hover .alt{opacity:1}
.invheronote{font-size:.72rem;color:var(--mut);margin-top:6px;max-width:44ch}

/* ---------- radar: one octagon per player ---------- */
.radarwrap{display:grid;gap:12px;
           grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.radar{margin:0;background:var(--surf2);border:1px solid var(--line);border-radius:4px;
       padding:8px 6px 10px}
.radar svg{display:block;width:100%;height:auto;overflow:visible}
.radar .grid{fill:none;stroke:var(--line);stroke-width:.6}
.radar .spoke{stroke:var(--line);stroke-width:.5}
.radar .ax{fill:var(--mut);font-family:var(--font-mono);font-size:5px;
           letter-spacing:.04em;text-anchor:middle;dominant-baseline:middle}
/* the shape is the only mark that carries the team's colour */
.radar.t1{--rc:var(--t1)} .radar.t2{--rc:var(--t2)}
.radar .area{fill:var(--rc);fill-opacity:.19;stroke:var(--rc);stroke-width:1.6;
             stroke-linejoin:round}
.radar .dot{fill:var(--rc);stroke:var(--surf2);stroke-width:.7}
.radar .hit{fill:transparent;cursor:crosshair}
.radar .hit:hover{fill:var(--rc);fill-opacity:.16}
.radar figcaption{margin-top:4px;text-align:center;font-size:.8rem;font-weight:600;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radar figcaption a{color:var(--ink);text-decoration:none}
.radar figcaption a:hover{color:var(--acc)}

.radartip{position:fixed;z-index:60;pointer-events:none;
          background:var(--bg);border:1px solid var(--line);border-radius:3px;
          padding:5px 9px;font-family:var(--font-mono);font-size:.72rem;
          color:var(--ink);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.radartip[hidden]{display:none}
.radarkey{display:flex;flex-wrap:wrap;gap:4px 16px}
.radarkey span{font-size:.74rem}
.radarkey b{font-family:var(--font-mono);color:var(--ink2);font-weight:600;
            letter-spacing:.04em}

/* ---------- the single, larger radar on a profile ---------- */
.shapewrap{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.radar.big{--rc:var(--acc);flex:0 0 300px;max-width:100%;padding:10px 8px}
.radar.big .ax{font-size:4.4px}
.shapeside{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:9px}
.shapeside .note{margin:0}

/* the office is a reference, not a rival: an outline, no fill, so the two are
   told apart by shape as well as by colour */
.radar .median{fill:none;stroke:var(--mut);stroke-width:1.1;stroke-linejoin:round}

.radarlegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0}
.radarlegend .key{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;
                  color:var(--ink2)}
.radarlegend .key::before{content:"";width:11px;height:11px;border-radius:2px;flex:none}
.radarlegend .you::before{background:color-mix(in srgb,var(--acc) 25%,transparent);
                          border:1.5px solid var(--acc)}
.radarlegend .med::before{border:1.5px solid var(--mut)}

/* ---------- the shape column on the leaderboard ---------- */
.miniradar{display:block;width:52px;height:52px;--rc:var(--acc)}
.miniradar svg{display:block;width:100%;height:100%}
.miniradar:hover{--rc:var(--ink)}
tr.me .miniradar{--rc:var(--ok)}
/* Its own stroke weights, not the big chart's: a 1.6 stroke on a 100-unit
   viewBox drawn at 52px lands under a pixel and disappears. */
.miniradar .grid{fill:none;stroke:var(--line);stroke-width:1.6}
.miniradar .area{fill:var(--rc);fill-opacity:.22;stroke:var(--rc);stroke-width:3.4;
                 stroke-linejoin:round}

.shapekey{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:14px;
          padding-top:14px;border-top:1px solid var(--line)}
.shapekey>div{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:8px}
.shapekey .note{margin:0}
.radar.key{flex:0 0 200px;max-width:100%;background:none;border:0;padding:0}
.radar.key .ax{font-size:5.4px}

/* ---------- the shape inside a lobby player row ---------- */
.miniradar.sm{width:32px;height:32px;flex:none}
/* Thinner again at 28px than at 52px, or the outline swallows the shape. An
   empty span holds the column for someone with no PUG history, so the ratings
   down the right stay in line. */
.miniradar.sm .grid{stroke-width:2.4}
.miniradar.sm .area{stroke-width:5;fill-opacity:.24}
.miniradar.sm.none{background:none}
.prow .miniradar{--rc:var(--acc)}
.prow.pick:hover .miniradar{--rc:var(--ink)}
/* inside a team card the shape wears that team's colour, the way the match page
   draws them */
.team1 .prow .miniradar{--rc:var(--t1)}
.team2 .prow .miniradar{--rc:var(--t2)}

/* ---------- credits ---------- */
.credlist{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cred{background:var(--surf2);border:1px solid var(--line);border-radius:4px;padding:12px 14px}
.credhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.credname{font-family:var(--font-display);font-weight:600;font-size:calc(.95rem * var(--display-scale));color:var(--ink);
          text-decoration:none;text-transform:var(--display-case)}
a.credname:hover{color:var(--acc)}
.credname.plain{color:var(--acc)}
.credver{font-size:.7rem;color:var(--mut)}
.credlic,.credmod{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;
                  text-transform:uppercase;padding:1px 5px;border-radius:2px;border:1px solid var(--line)}
.credlic{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.credmod{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
.credby{margin:5px 0 0;font-size:.76rem;color:var(--mut)}
.credwhat{margin:7px 0 0;font-size:.84rem;color:var(--ink2);line-height:1.5}
.foot a{color:var(--mut)}
.foot a:hover{color:var(--acc)}

/* ---------- match result ---------- */
.result{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
        background:var(--surf2);border:1px solid var(--line);border-radius:4px;padding:12px 16px}
.result .rteam{font-family:var(--font-display);font-weight:600;font-size:calc(1rem * var(--display-scale));color:var(--mut);text-transform:var(--display-case)}
.result .rteam.won{color:var(--ink)}
.result .rscore{font-size:1.5rem;font-weight:600;letter-spacing:.02em;
                font-variant-numeric:tabular-nums}
.result .rscore .sep{color:var(--mut);margin:0 6px;font-weight:400}
.result .rwon{margin-left:auto;font-family:var(--font-mono);font-size:.62rem;
              letter-spacing:.09em;text-transform:uppercase;color:var(--ok);
              border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));
              border-radius:3px;padding:3px 8px}

/* ---------- leaderboard tabs ---------- */
.tabs{display:flex;gap:6px;margin:-6px 0 16px;border-bottom:1px solid var(--line)}
.tabs .tab{font-family:var(--font-display);font-weight:600;font-size:calc(.88rem * var(--display-scale));
           padding:8px 14px;color:var(--mut);text-decoration:none;
           border-bottom:2px solid transparent;margin-bottom:-1px;text-transform:var(--display-case)}
.tabs .tab:hover{color:var(--ink2)}
.tabs .tab.on{color:var(--acc);border-bottom-color:var(--acc)}

/* the season row sits under the board tabs, so it is quieter than them */
.tabs.sub{border-bottom:0;margin:-10px 0 16px;gap:4px;flex-wrap:wrap}
.tabs.sub .tab{font-family:var(--font-mono);font-weight:500;
               font-size:.74rem;padding:5px 10px;border:1px solid var(--line);
               border-radius:3px;margin-bottom:0}
.tabs.sub .tab.on{color:var(--acc);border-color:var(--acc)}

/* ---------- practice ---------- */
.pracon{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.pracon h2{color:var(--acc)}
.pracon .cap{background:var(--acc);color:var(--accink)}
.pracgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.pracmap{background:var(--surf2);border:1px solid var(--line);border-radius:5px;
         padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.pracmap.on{border-color:var(--acc)}
.pmname{font-family:var(--font-display);font-weight:600;font-size:calc(.92rem * var(--display-scale));text-transform:var(--display-case)}
.pmslug{font-size:.68rem;color:var(--mut);margin-bottom:5px}
.pracmap .btn{align-self:flex-start}
.btn.sm{font-size:calc(.74rem * var(--display-scale));padding:4px 10px}
.btn[disabled]{opacity:.4;pointer-events:none}
.praccode{background:var(--surf2);border:1px solid var(--line);border-radius:4px;
          padding:10px 13px;margin:4px 0 10px;overflow-x:auto;
          font-family:var(--font-mono);font-size:.78rem;color:var(--ink)}

/* the search plus, where a picker is hiding part of its list, one chip */
.invfilter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.invfilter .invsearch{flex:1 1 180px;min-width:0}
.invmore{background:var(--surf2);border:1px solid var(--line);border-radius:4px;
         color:var(--ink2);font-family:var(--font-mono);font-size:.72rem;
         padding:7px 12px;cursor:pointer;white-space:nowrap}
.invmore:hover{color:var(--ink);border-color:var(--mut)}
.invmore.on{color:var(--acc);border-color:var(--acc)}
.invmore:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

/* ---------- pager ---------- */
.pager{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:14px;
       padding-top:12px;border-top:1px solid var(--line)}
.pbtn,.pnum{font-family:var(--font-mono);font-size:.76rem;padding:6px 11px;
       border:1px solid var(--line);border-radius:4px;color:var(--ink2);text-decoration:none;
       background:var(--surf2)}
.pbtn:hover,.pnum:hover{color:var(--ink);border-color:var(--mut)}
.pnum.on{color:var(--acc);border-color:var(--acc);background:none}
.pbtn.off{opacity:.35;pointer-events:none}
.pgap{color:var(--mut);padding:0 2px;font-size:.76rem}
.pager .pbtn:first-child{margin-right:auto}
.pager .pbtn:last-child{margin-left:auto}
.pbtn:focus-visible,.pnum:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

/* ---------- strat board ---------- */
/* --util-col and --site-col come from the brand stylesheet */
.stratapp{display:flex;flex-direction:column;gap:16px}
.stratmeta .metarow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:4px;min-width:110px}
.fld.grow{flex:1 1 220px} .fld.grow2{flex:2 1 300px}
.fld>span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;
          text-transform:uppercase;color:var(--mut)}
.fld input,.fld select{background:var(--surf2);border:1px solid var(--line);border-radius:4px;
       color:var(--ink);padding:7px 9px;font:inherit;font-size:.88rem;width:100%}
.fld input:focus,.fld select:focus{outline:2px solid var(--acc);outline-offset:-1px}

.tools{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:12px}
.tools.levels{margin:10px 0 0}
.tgroup{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tlabel{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;
        text-transform:uppercase;color:var(--mut);margin-right:2px}
.tbtn{background:var(--surf2);border:1px solid var(--line);border-radius:4px;color:var(--ink2);
      font-family:var(--font-display);font-weight:600;font-size:calc(.78rem * var(--display-scale));padding:6px 11px;
      cursor:pointer;text-transform:var(--display-case)}
.tbtn:hover{color:var(--ink)}
.tbtn.on{background:var(--acc);border-color:var(--acc);color:var(--accink)}
.tbtn.num{min-width:30px}
.tbtn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.tbtn:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

.boardwrap{background:rgb(var(--shade-rgb));border:1px solid var(--line);border-radius:6px;overflow:hidden}
.board{display:block;width:100%;height:auto;touch-action:none}
.board.edit{cursor:crosshair}
.board.edit.tool-select{cursor:default}
.board image{image-rendering:auto}
.board .hit{fill:transparent;stroke:transparent;stroke-width:26}
.board.edit .sel-el{cursor:pointer}
.board .sel-el.selected .hit{stroke:var(--acc);stroke-opacity:.55;fill:none}
.board .posn{font-family:var(--font-mono);font-size:19px;font-weight:600;
             text-anchor:middle}
.board .utl{font-family:var(--font-mono);font-size:15px;font-weight:600;
            text-anchor:middle;fill:var(--util-col)}
#llayer{pointer-events:none}
.board .ellabel{font-family:var(--font-display);font-size:15px;font-weight:600;
                text-anchor:middle;fill:var(--ink);paint-order:stroke;stroke:rgb(var(--shade-rgb));
                stroke-width:4px;stroke-linejoin:round}
.board .notetx{font-family:var(--font-display);font-size:16px;font-weight:500;
               text-anchor:middle;fill:var(--ink)}

.stepbar{display:flex;gap:7px;align-items:center;margin-top:12px;flex-wrap:wrap}
.steppills{display:flex;gap:5px;overflow-x:auto;flex:1;padding-bottom:2px}
.pill{background:var(--surf2);border:1px solid var(--line);border-radius:20px;
      color:var(--mut);font-size:.76rem;padding:5px 13px;white-space:nowrap;cursor:pointer}
.pill b{font-family:var(--font-mono);color:var(--ink2);margin-right:3px}
.pill.on{border-color:var(--acc);color:var(--ink)}
.pill.on b{color:var(--acc)}
.stepedit{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}

.stratapp textarea{width:100%;background:var(--surf2);border:1px solid var(--line);
       border-radius:4px;color:var(--ink);padding:9px 11px;font:inherit;font-size:.9rem;
       resize:vertical}
.stratapp textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.sidechip{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.07em;
          padding:2px 6px;border-radius:2px;border:1px solid var(--line)}
.sidechip.t{color:var(--t2);border-color:color-mix(in srgb,var(--t2) 40%,var(--line))}
.sidechip.ct{color:var(--t1);border-color:color-mix(in srgb,var(--t1) 40%,var(--line))}

/* a heading inside a card, above a second table */
.subh{font-size:.82rem;font-weight:600;color:var(--mut);text-transform:uppercase;
      letter-spacing:.08em;margin:6px 0 -2px}

/* ---------- result on a history row ---------- */
.res{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;
     text-transform:uppercase;padding:1px 5px;border-radius:2px;border:1px solid var(--line)}
.res.won{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.res.lost{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.res.drew{color:var(--mut)}
/* a zero in a column that is usually empty should not shout */
td.dim{color:var(--mut);opacity:.45}
.delta{font-family:var(--font-mono);font-size:.7rem}
.delta.up{color:var(--ok)} .delta.down{color:var(--bad)}

/* ---------- the two queues ---------- */
.queues{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-bottom:16px}
@media(max-width:720px){.queues{grid-template-columns:1fr}}
.qcard.mine{border-color:var(--acc)}
.qcard .plist{min-height:52px}

/* the unranked card while a game is up - it stands in for the queue, so it is
   marked out rather than sitting there looking like something to join */
.qcard.live{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.qcard.live h2{color:var(--ok)}
.qcard.live .cap{background:var(--ok);color:var(--okink)}

/* ---------------- match page: the result, four highlights, a scoreboard that opens ----------------
   The score is the headline, so it is the biggest thing on the page. Each team's
   table keeps eight figures a player; the shape, the hits and the rest open in a
   row under whoever is clicked, one at a time (assets/match.js). */
.mhero{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.4rem 1.7rem 1.6rem;border-radius:.8rem;
  border:1px solid var(--line);background-color:var(--surf);background-size:cover;background-position:center 40%;overflow:hidden}
.mhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--bg-rgb),.94) 0%, rgba(var(--bg-rgb),.76) 50%, rgba(var(--bg-rgb),.94) 100%)}
.mhero > *{position:relative}
.mh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.1rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.mh-meta span:first-child{color:var(--ink)}
.mh-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1.6rem}
.mh-team{display:flex;align-items:center;gap:.8rem;min-width:0}
.mh-team.t1{justify-content:flex-end;text-align:right}
.mh-team b{font:800 calc(1.9rem * var(--display-scale))/1 var(--font-display);text-transform:var(--display-case);
  color:var(--ink2);overflow-wrap:anywhere}
.mh-team.t1.won b{color:var(--t1)}
.mh-team.t2.won b{color:var(--t2)}
.mh-team.t1 .mh-won{order:-1}
.mh-won{flex:none;padding:.3rem .55rem;border-radius:.3rem;background:var(--ok);color:var(--okink);
  font:600 .62rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.mh-num{display:flex;align-items:baseline;gap:.6rem;font:800 calc(3.4rem * var(--display-scale))/1 var(--font-display);
  font-variant-numeric:tabular-nums}
.mh-num .t1{color:var(--t1)}
.mh-num .t2{color:var(--t2)}
.mh-num em{font-style:normal;font-size:.6em;color:var(--mut)}
.mh-note{margin:0;max-width:75ch;font-size:.82rem;color:var(--ink2)}

.mhl{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.7rem}
.mhl-card{display:flex;flex-direction:column;gap:.3rem;padding:.8rem 1rem;border-radius:.6rem;border:1px solid var(--line);
  border-left:.22rem solid var(--t1);background:var(--surf)}
.mhl-card.t2{border-left-color:var(--t2)}
.mhl-card i{font:500 .6rem/1 var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.mhl-card b{font:800 calc(1.15rem * var(--display-scale))/1.05 var(--font-display);text-transform:var(--display-case);overflow-wrap:anywhere}
.mhl-card span{font-size:.8rem;color:var(--ink2)}

.msb{border:1px solid var(--line);border-top:.2rem solid var(--t1);border-radius:.6rem;background:var(--surf);overflow:hidden}
.msb.t2{border-top-color:var(--t2)}
.msb-head{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem .5rem}
.msb-name{font:800 calc(1.1rem * var(--display-scale))/1 var(--font-display);text-transform:var(--display-case);color:var(--t1)}
.msb.t2 .msb-name{color:var(--t2)}
.msb-score{margin-left:auto;font:800 calc(1.6rem * var(--display-scale))/1 var(--font-display)}
.msb .msscroll{margin:0}
.mstable.v2{min-width:560px;font-size:.9rem}
.mstable.v2 th{padding:.5rem .7rem}
/* The name takes the room, so the eight figures sit together rather than spread
   across a full-screen window */
.mstable.v2 th.l{width:34%}
.mstable.v2 td{padding:.6rem .7rem;font-variant-numeric:tabular-nums}
.mstable.v2 td.bad{color:var(--bad)}
.mstable.v2 th.chev,.mstable.v2 td.chev{width:1.6rem;padding-left:0;text-align:center;color:var(--mut)}
.mrow{cursor:pointer;outline:none}
.mrow:hover td,.mrow:focus-visible td{background:var(--surf2)}
.mrow:focus-visible td:first-child{box-shadow:inset .22rem 0 0 var(--acc)}
.mrow.open td{background:var(--surf2);border-bottom-color:transparent}
.mrow.open td.chev{color:var(--acc)}
.mrow .star{color:var(--acc);font-size:.85em}
.mstable.v2 .mdetail > td{padding:0;text-align:left;background:var(--surf2);border-bottom:1px solid var(--line)}
.mdet{display:grid;grid-template-columns:minmax(13rem,17rem) minmax(0,1.2fr) minmax(0,1fr);gap:1.4rem;padding:1rem 1.2rem 1.2rem}
.mdet h4{margin:0 0 .6rem;font:600 .62rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.mdet h4 i{margin-left:.4rem;font-style:normal;color:var(--ink2)}
.mdet .radar{padding:0;border:0;background:transparent}
.mdet-shape .note{margin-top:.4rem;font-size:.72rem}
.mdet .hitrow{grid-template-columns:5.5rem 1fr 4.5rem}
/* The bars take the team's colour; the head keeps the accent, as it always has */
.msb.t2 .mdet .hitrow .bar i{background:var(--t2)}
.msb .mdet .hitrow.head .bar i{background:var(--acc)}
.mdet-more dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem}
.mdet-more dl div{display:flex;flex-direction:column-reverse;gap:.25rem;padding:.55rem .7rem;border-radius:.45rem;background:var(--surf)}
.mdet-more dt{font-size:.72rem;color:var(--mut)}
.mdet-more dd{margin:0;font:800 calc(1.3rem * var(--display-scale))/1 var(--font-display)}
@media (max-width:900px){
  .mh-score{grid-template-columns:1fr}
  .mh-team.t1{justify-content:flex-start;text-align:left}
  .mdet{grid-template-columns:1fr}
}