/* Quads 34 — game layer on top of Modernist tokens */
:root{
  --p1:#b13a3a;                      /* red, from icon */
  --p2:#4459c9;                      /* blue */
  --p3:#3a8a5b;                      /* green */
  --p4:#5d3e9c;                      /* purple */
  --p4-ink:#fff;
  --board:#1b1f3a;                   /* board ground */
  --board-line:#2c3157;
  --gold:#e9b52b;                    /* board frame */
  --cell:96px;
}
body{margin:0}
a{color:var(--color-accent)}a:hover{color:var(--color-accent-700)}
/* nav */
.gnav{display:flex;align-items:center;gap:var(--space-6);padding:0 var(--space-6);height:56px;border-bottom:2px solid var(--color-divider)}
.gnav .brand{font:800 18px/1 var(--font-heading);letter-spacing:-.02em;margin-right:var(--space-4)}
.gnav .brand em{color:var(--color-accent);font-style:normal}
.gnav a{color:inherit;text-decoration:none;font-size:14px}
.gnav a[aria-current]{color:var(--color-accent);font-weight:600}
.gnav .spacer{flex:1}
.gnav .meta{display:flex;align-items:center;gap:var(--space-4);font-size:13px}
.avatar{width:28px;height:28px;background:var(--color-text);color:var(--color-bg);display:grid;place-items:center;font:800 12px var(--font-heading)}
.k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.k.acc{color:var(--color-accent)}
.rule{height:2px;background:var(--color-divider)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap1{gap:var(--space-1)}.gap2{gap:var(--space-2)}.gap3{gap:var(--space-3)}.gap4{gap:var(--space-4)}.gap6{gap:var(--space-6)}
.mono{font-variant-numeric:tabular-nums}
.btn{justify-content:flex-start}
/* tiles */
.tile{width:var(--cell);height:var(--cell);display:grid;place-items:center;font:800 34px/1 var(--font-heading);letter-spacing:-.03em;color:#fff;position:relative;user-select:none}
.tile.p1{background:var(--p1)}.tile.p2{background:var(--p2)}.tile.p3{background:var(--p3)}.tile.p4{background:var(--p4);color:var(--p4-ink)}
.tile.empty{background:var(--board-line);color:color-mix(in srgb,#fff 40%,transparent);font-weight:400;font-size:14px}
.tile.sm{--cell:56px;font-size:20px}
.tile.xs{--cell:22px;font-size:0}
.tile .under{position:absolute;left:6px;bottom:6px;width:10px;height:10px;outline:2px solid #fff}
.tile .under.p1{background:var(--p1)}.tile .under.p2{background:var(--p2)}.tile .under.p3{background:var(--p3)}.tile .under.p4{background:var(--p4)}
.tile.target{outline:3px solid var(--gold);outline-offset:-3px;background:var(--board-line);color:var(--gold);font-weight:800;font-size:28px}
.tile.used{opacity:.22}
.tile.sel{outline:3px solid var(--color-text);outline-offset:3px}
.tile.lit{box-shadow:inset 0 0 0 4px var(--board),inset 0 0 0 7px var(--gold)}
.tile.dim{opacity:.35}
/* board */
.board{display:grid;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(4,var(--cell));gap:3px;background:var(--board);padding:6px;border:3px solid var(--gold);position:relative}
.board-wrap{display:grid;grid-template-columns:24px auto;grid-template-rows:auto 24px;gap:var(--space-2);align-items:center}
.coords{display:grid;font-size:11px;letter-spacing:.08em;color:color-mix(in srgb,var(--color-text) 50%,transparent)}
.coords.x{grid-template-columns:repeat(4,var(--cell));gap:2px;padding-left:2px;text-align:center}
.coords.y{grid-template-rows:repeat(4,var(--cell));gap:2px;padding-top:2px;align-items:center;justify-items:center}
/* layer tabs */
.ltabs{display:flex;border:1px solid var(--color-divider)}
.ltab{padding:8px 14px;font-size:13px;display:flex;flex-direction:column;gap:2px;min-width:120px;border-left:1px solid var(--color-divider)}
.ltab:first-child{border-left:0}
.ltab .k{font-size:10px}
.ltab.on{background:var(--color-text);color:var(--color-bg)}
.ltab.on .k{color:color-mix(in srgb,var(--color-bg) 65%,transparent)}
.ltab.done .k{color:var(--color-accent)}
.ltab.on.done .k{color:var(--color-accent-400)}
/* minimap */
.mini{display:grid;grid-template-columns:repeat(4,14px);gap:1px;padding:2px;background:var(--board);border:1px solid var(--gold)}
.mini span{width:14px;height:14px;background:var(--board-line)}
.mini .p1{background:var(--p1)}.mini .p2{background:var(--p2)}.mini .p3{background:var(--p3)}.mini .p4{background:var(--p4)}
.mini-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mini-wrap.on .mini{outline:2px solid var(--gold);outline-offset:2px}
/* players */
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:14px 1fr auto;gap:var(--space-3);align-items:center;padding:12px 0;border-bottom:1px solid var(--color-divider)}
.prow .sw{width:14px;height:14px}
.prow .nm{font-size:14px;font-weight:600}
.prow .sub{font-size:11px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.prow .sc{font:800 26px/1 var(--font-heading);letter-spacing:-.03em}
.prow.on{background:var(--color-surface);margin:0 calc(var(--space-3) * -1);padding-inline:var(--space-3);border-left:3px solid var(--color-accent)}
.sw.p1{background:var(--p1)}.sw.p2{background:var(--p2)}.sw.p3{background:var(--p3)}.sw.p4{background:var(--p4)}
/* rack */
.rack{display:grid;grid-template-columns:repeat(4,56px);gap:2px;background:var(--board);padding:4px;border:2px solid var(--gold);width:fit-content}
/* misc */
.cell-sum{display:grid;grid-template-columns:60px 1fr auto;gap:var(--space-3);padding:8px 0;border-bottom:1px solid var(--color-divider);font-size:13px}
.cell-sum b{font-weight:600}
.big{font:800 96px/.9 var(--font-heading);letter-spacing:-.04em}
.huge{font:800 160px/.85 var(--font-heading);letter-spacing:-.05em}
.tog{width:34px;height:18px;border:1px solid var(--color-divider);position:relative;display:inline-block}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--color-text)}
.tog.on{background:var(--color-accent);border-color:var(--color-accent)}
.tog.on::after{left:18px;background:var(--color-bg)}
.srow{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--color-divider);font-size:14px}
.srow .v{font-size:13px;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4)}
.podium{display:flex;align-items:flex-end;gap:2px}
.podium div{display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-3);color:var(--color-bg);width:120px}
.podium .n{font:800 40px/1 var(--font-heading);letter-spacing:-.03em}
.podium .l{font-size:12px;opacity:.85;margin-top:auto}
.podium .p4{color:#fff}
.eq{font:800 44px/1 var(--font-heading);letter-spacing:-.03em}
.chip{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--color-divider)}
.chip.acc{border-color:var(--color-accent);color:var(--color-accent)}

/* ---- app shell (added for the live app) ---- */
html,body{height:100%}
body{background:var(--color-bg);color:var(--color-text)}
.app{min-height:100%;display:flex;flex-direction:column}
.page{max-width:1280px;margin:0 auto;width:100%;padding:0 24px 40px}
.page-narrow{max-width:960px}
.gnav{position:sticky;top:0;background:var(--color-bg);z-index:5}
.gnav a.active{color:var(--color-accent);font-weight:600}
.btn.link{background:none;border:0;padding:0;color:var(--color-accent);font:inherit;cursor:pointer}
.err{color:var(--color-accent-700);font-size:13px;margin-top:8px}
.tile.focus{outline:3px solid #fff;outline-offset:-3px}
.tile.clickable{cursor:pointer}
.tile.clickable:hover{filter:brightness(1.08)}
.ltab{cursor:pointer;background:none;border:0;border-left:1px solid var(--color-divider);color:inherit;text-align:left;font:inherit}
.mini-wrap{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
.game-grid{display:grid;grid-template-columns:240px 1fr 300px;gap:32px;padding:24px 0}
.lobby-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;padding:24px 0}
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:72px 0 0;min-height:600px}
.rules-grid{display:grid;grid-template-columns:220px 1fr 420px;gap:40px;padding:32px 0}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0}
.countdown{font:800 18px var(--font-heading);font-variant-numeric:tabular-nums}
.countdown.low{color:var(--color-accent)}
:root{--cell:clamp(56px,min(18vw,11vh),96px)}
/* Other players' recent moves: --mc is the mover's seat colour. */
.tile.mark-p1,.dot.p1,.badge.p1,.move-flash.p1{--mc:var(--p1)}
.tile.mark-p2,.dot.p2,.badge.p2,.move-flash.p2{--mc:var(--p2)}
.tile.mark-p3,.dot.p3,.badge.p3,.move-flash.p3{--mc:var(--p3)}
.tile.mark-p4,.dot.p4,.badge.p4,.move-flash.p4{--mc:var(--p4)}
/* Dashed so it never reads as the solid keyboard-focus outline; the tile's own colour already names the mover. */
.tile.mark::after{content:"";position:absolute;inset:6px;pointer-events:none;border:3px dashed #fff;animation:mark-in .9s ease-out 2}
@keyframes mark-in{50%{inset:0;border-color:color-mix(in srgb,#fff 40%,transparent)}}
.tile .badge{position:absolute;top:4px;right:4px;padding:2px 5px;font:800 11px/1 var(--font-heading);letter-spacing:0;color:#fff;background:var(--mc);outline:2px solid #fff}
.tile .badge.p4{color:var(--p4-ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mc);margin-left:6px;vertical-align:middle;box-shadow:0 0 0 2px var(--color-bg)}
.mini span.mark{outline:2px solid #fff;outline-offset:-2px;box-shadow:0 0 0 2px var(--mc,var(--gold))}
.move-flash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:none;
  background:color-mix(in srgb,var(--mc) 28%,transparent);animation:move-flash 1.6s ease-out forwards}
.move-flash-card{background:var(--color-bg);border:6px solid var(--mc);padding:28px 40px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  box-shadow:0 24px 64px color-mix(in srgb,#000 30%,transparent)}
.move-flash-card > .k{font-size:14px}
.move-flash-where{font:800 64px/1 var(--font-heading);letter-spacing:-.03em}
.move-flash-turn{font:800 28px/1 var(--font-heading);color:var(--color-accent)}
@keyframes move-flash{
  0%{opacity:0;background:color-mix(in srgb,var(--mc) 60%,transparent)}
  10%{opacity:1}
  25%{background:color-mix(in srgb,var(--mc) 28%,transparent)}
  75%{opacity:1}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .move-flash{animation:move-flash-calm 1.6s linear forwards}
  .tile.mark::after{animation:none}
  @keyframes move-flash-calm{0%,80%{opacity:1}100%{opacity:0}}
}
@media (max-width:1100px){
  .game-grid{grid-template-columns:1fr}
  .game-grid > .col-board{order:-1}
  .lobby-grid,.room-grid,.rules-grid,.results-grid{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:32px}
  .hero h1{font-size:44px!important}
  .rack{grid-template-columns:repeat(8,44px)}
  .rack .tile.sm{--cell:44px;font-size:16px}
}
@media (max-width:640px){
  .page{padding:0 16px 32px}
  .gnav{gap:12px;padding:0 16px}
  .gnav a{font-size:13px}
  .ltab{min-width:0;padding:6px 8px}
}