/* ═══════════════════════ SpyPhrase — style ═══════════════════════ */

:root{
  --bg:#131032;
  --bg2:#1c1745;
  --ink:#241d3f;
  --paper:#f6ecd7;
  --paper2:#efe0bf;
  --cream-ink:#332a55;
  --scarlet:#ff4757; --scarlet-d:#d92638; --scarlet-glow:rgba(255,71,87,.5);
  --cobalt:#2f8df6;  --cobalt-d:#1e63c8;  --cobalt-glow:rgba(47,141,246,.5);
  --civ:#e5cf9c;     --civ-d:#c9ab6e;
  --mole:#23202e;    --mole-acc:#a4f24b;
  --gold:#ffce4f;    --gold-d:#e0a72e;
  --white:#fdf9ef;
  --dim:#9a90c9;
  --line:rgba(255,255,255,.12);
  --r:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --f-display:'Black Ops One', 'Rubik', sans-serif;
  --f-body:'Rubik', system-ui, sans-serif;
  /* surfaces & theme tokens (dark values; light theme overrides below) */
  --glass-a:rgba(255,255,255,.09); --glass-b:rgba(255,255,255,.03);
  --glass:rgba(255,255,255,.05); --glass-hi:rgba(255,255,255,.08); --glass-hover:rgba(255,255,255,.14);
  --well:rgba(0,0,0,.27);
  --ov-back:rgba(9,7,26,.82);
  --toast-bg:#f6ecd7; --toast-ink:#241d3f;
  --title-sh:0 4px 0 rgba(0,0,0,.3);
  --logo-sh:0 5px 0 rgba(0,0,0,.35);
  --btn-bg:#fdf9ef; --btn-ink:#241d3f;
  --tile-edge:var(--tile-edge);
  --map-sea:#0d1129; --map-land:rgba(122,150,255,.16); --map-coast:rgba(170,190,255,.35);
  --map-grid:rgba(160,170,255,.10); --map-tag:rgba(190,200,255,.4);
  --decor-ink:rgba(255,255,255,.05); --stamp:rgba(255,80,90,.16);
}
:root[data-theme="light"]{
  --bg:#f1e7d3; --bg2:#fffdf6;
  --ink:#241d3f;
  --paper:#fffdf4; --paper2:#f1e7cf;
  --cream-ink:#33295a;
  --white:#2b2344;
  --dim:#756a99;
  --line:rgba(43,35,68,.16);
  --shadow:0 10px 26px rgba(70,55,30,.16);
  --glass-a:rgba(255,253,246,.85); --glass-b:rgba(255,253,246,.55);
  --glass:rgba(43,35,68,.05); --glass-hi:rgba(43,35,68,.07); --glass-hover:rgba(43,35,68,.12);
  --well:rgba(43,35,68,.07);
  --ov-back:rgba(52,42,84,.42);
  --toast-bg:#2b2344; --toast-ink:#fdf9ef;
  --title-sh:0 3px 0 rgba(43,35,68,.14);
  --logo-sh:0 4px 0 rgba(43,35,68,.18);
  --btn-bg:#342a5c; --btn-ink:#fdf9ef;
  --tile-edge:#d3bd93;
  --map-sea:#dfeaef; --map-land:#d8c9a2; --map-coast:#94815a;
  --map-grid:rgba(80,70,45,.14); --map-tag:rgba(80,70,45,.45);
  --decor-ink:rgba(43,35,68,.07); --stamp:rgba(216,55,66,.30);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--f-body); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer}
input{font-family:inherit}

/* backdrop: glow blobs + faint dot matrix */
.bg-pattern{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 40% at 15% 10%, rgba(255,71,87,.16), transparent 60%),
    radial-gradient(55% 40% at 85% 12%, rgba(47,141,246,.18), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, rgba(255,206,79,.10), transparent 65%),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.4px);
  background-size:auto,auto,auto,26px 26px;
}
.bg-pattern::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-35deg, transparent 0 34px, rgba(255,255,255,.016) 34px 68px);
}

/* ─────────── screens ─────────── */
.screen{display:none; position:relative; z-index:1; min-height:100dvh}
.screen.active{display:block}

/* ─────────── buttons & inputs ─────────── */
.btn{
  display:inline-block; border:0; border-radius:14px;
  padding:13px 22px; font-weight:800; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--btn-ink);
  background:var(--btn-bg); box-shadow:0 4px 0 rgba(0,0,0,.35);
  transition:transform .12s, box-shadow .12s, filter .15s;
  touch-action:manipulation;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn:hover{filter:brightness(1.06)}
.btn-gold{background:linear-gradient(180deg,#ffe08a,var(--gold)); box-shadow:0 4px 0 var(--gold-d)}
.btn-blue{background:linear-gradient(180deg,#6faefc,var(--cobalt)); color:#fff; box-shadow:0 4px 0 var(--cobalt-d)}
.btn-red{background:linear-gradient(180deg,#ff7d88,var(--scarlet)); color:#fff; box-shadow:0 4px 0 var(--scarlet-d)}
.btn-ghost{background:transparent; color:var(--dim); box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{color:var(--white)}
.btn-red-ghost{background:transparent; color:#ff8b95; box-shadow:inset 0 0 0 2px rgba(255,71,87,.5)}
.btn-blue-ghost{background:transparent; color:#7db4f8; box-shadow:inset 0 0 0 2px rgba(47,141,246,.55)}
.btn-big{font-size:17px; padding:16px 30px}
.btn-mini{font-size:12px; padding:9px 12px; border-radius:11px}
.btn[disabled]{opacity:.45; pointer-events:none}

.inp{
  width:100%; border:0; border-radius:14px; padding:14px 16px;
  font-size:17px; font-weight:600; color:var(--ink); background:var(--paper);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.08), 0 4px 0 rgba(0,0,0,.3);
  outline:none;
}
.inp:focus{box-shadow:inset 0 0 0 3px var(--gold), 0 4px 0 rgba(0,0,0,.3)}
.inp::placeholder{color:#9c8fb9; font-weight:500}
.inp-code{text-transform:uppercase; letter-spacing:.35em; text-align:center; font-family:var(--f-display); font-size:22px}
.inp-clue{text-transform:uppercase; letter-spacing:.12em; text-align:center; font-family:var(--f-display); font-size:22px}

.err{min-height:1.2em; color:#ff9aa4; font-weight:600; font-size:14px; text-align:center; margin:10px 0 0}
.field-label{display:block; font-size:11px; letter-spacing:.3em; color:var(--dim); font-weight:700; margin:0 0 8px 4px}

/* ─────────── home ─────────── */
.home-wrap{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:clamp(22px,4.5vh,44px); padding:32px 20px;
}
.logo-block{text-align:center; animation:drop .7s cubic-bezier(.2,1.4,.4,1) both}
.logo-hat svg{width:clamp(64px,10vh,92px); height:auto; filter:drop-shadow(0 6px 0 rgba(0,0,0,.3)); animation:hatBob 3.2s ease-in-out infinite}
.logo-text{
  margin:6px 0 0; font-family:var(--f-display); font-weight:400;
  font-size:clamp(40px,9vw,74px); letter-spacing:.04em; line-height:1;
  color:var(--white); text-shadow:var(--logo-sh), 0 0 42px rgba(255,206,79,.35);
}
.logo-text i{display:inline-block; font-style:normal; animation:letterIn .5s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes letterIn{from{opacity:0; transform:translateY(-24px) rotate(-8deg) scale(.7)}to{opacity:1; transform:none}}
.logo-text span{color:var(--gold)}
.tagline{margin:12px 0 0; color:var(--dim); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:clamp(10px,1.6vw,13px)}

.mode-cards{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; animation:drop .7s .12s cubic-bezier(.2,1.4,.4,1) both}
.mode-card{
  width:min(240px,84vw); border:0; border-radius:22px; padding:26px 18px 22px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--white); background:linear-gradient(180deg, var(--glass-a), var(--glass-b));
  box-shadow:inset 0 0 0 2px var(--line), var(--shadow);
  transition:transform .18s cubic-bezier(.2,1.4,.4,1), box-shadow .18s;
}
.mode-card:hover{transform:translateY(-6px) rotate(-.7deg)}
.mc-icon svg{width:52px; height:52px; display:block}
.mc-local .mc-icon{color:var(--gold)}
.mc-online .mc-icon{color:#6faefc}
.mc-howto .mc-icon{color:#ff8b95}
.mc-local:hover{box-shadow:inset 0 0 0 3px var(--gold), 0 18px 40px rgba(255,206,79,.22)}
.mc-online:hover{box-shadow:inset 0 0 0 3px var(--cobalt), 0 18px 40px var(--cobalt-glow)}
.mc-howto:hover{box-shadow:inset 0 0 0 3px var(--scarlet), 0 18px 40px var(--scarlet-glow)}
.mc-title{font-family:var(--f-display); font-size:21px; letter-spacing:.05em}
.mc-sub{color:var(--dim); font-size:13px; font-weight:600}

.home-foot{display:flex; gap:18px; align-items:center; color:var(--dim); font-size:13px; font-weight:600}
.home-foot a{color:var(--dim); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25)}
.home-foot a:hover{color:var(--white)}

@keyframes drop{from{opacity:0; transform:translateY(-26px) scale(.96)} to{opacity:1; transform:none}}
@keyframes hatBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}

/* ─────────── generic panel screens ─────────── */
.panel-wrap{
  max-width:860px; margin:0 auto; padding:clamp(24px,5vh,56px) 20px 44px;
  animation:drop .5s cubic-bezier(.2,1.2,.4,1) both;
}
.panel-wrap.narrow{max-width:560px}
.panel-title{
  font-family:var(--f-display); font-weight:400; font-size:clamp(26px,5vw,40px);
  text-align:center; margin:0 0 22px; letter-spacing:.05em;
  text-shadow:var(--title-sh);
}
.panel-actions{display:flex; gap:14px; justify-content:center; margin-top:26px; flex-wrap:wrap}

/* how to play */
.howto-body{background:var(--glass); border-radius:22px; padding:clamp(18px,3.5vw,34px); box-shadow:inset 0 0 0 2px var(--line)}
.ht-intro{font-size:16px; line-height:1.65; margin-top:0}
.ht-step{display:flex; gap:16px; margin:18px 0; align-items:flex-start}
.ht-step p{margin:0; line-height:1.6; font-size:15px}
.ht-num{
  flex:none; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:19px; color:var(--ink);
  background:var(--gold); box-shadow:0 3px 0 var(--gold-d); transform:rotate(-4deg);
}
.ht-fine{color:var(--dim); font-size:13.5px; line-height:1.6; margin-bottom:0}
.tx-s{color:#ff8b95}.tx-c{color:#7db4f8}.tx-n{color:var(--civ)}.tx-m{color:var(--mole-acc)}

/* online entry */
.online-cards{display:flex; gap:16px; margin-top:22px; flex-wrap:wrap}
.oc{
  flex:1 1 220px; background:var(--glass); border-radius:20px; padding:20px;
  box-shadow:inset 0 0 0 2px var(--line); display:flex; flex-direction:column; gap:12px;
}
.oc h3{margin:0; font-family:var(--f-display); font-weight:400; font-size:17px; letter-spacing:.04em}
.oc p{margin:0; color:var(--dim); font-size:13.5px}
#inpName{margin-bottom:4px}

/* ─────────── lobby ─────────── */
.room-code{
  display:inline-block; background:var(--paper); color:var(--ink); border-radius:14px;
  padding:4px 16px; letter-spacing:.3em; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.3);
  transition:transform .15s;
}
.room-code:hover{transform:scale(1.05) rotate(-1deg)}
.lobby-hint{text-align:center; color:var(--dim); font-size:13.5px; margin:0 0 22px}
.lobby-teams{display:flex; gap:16px; flex-wrap:wrap}
.lteam{flex:1 1 260px; border-radius:20px; padding:18px}
.lteam h3{margin:0 0 12px; font-family:var(--f-display); font-weight:400; font-size:16px; letter-spacing:.12em}
.lteam-s{background:rgba(255,71,87,.10); box-shadow:inset 0 0 0 2px rgba(255,71,87,.4)}
.lteam-c{background:rgba(47,141,246,.10); box-shadow:inset 0 0 0 2px rgba(47,141,246,.45)}
.lt-slots{display:flex; flex-direction:column; gap:8px; min-height:64px; margin-bottom:12px}
.lt-join{display:flex; gap:10px; flex-wrap:wrap}
.slot{
  display:flex; align-items:center; gap:10px; background:var(--well);
  border-radius:12px; padding:8px 12px; font-weight:600; font-size:14px;
}
.slot .s-role{font-size:10px; letter-spacing:.18em; color:var(--dim); font-weight:800}
.slot.handler .s-role{color:var(--gold)}
.slot .s-you{font-size:10px; background:var(--gold); color:var(--ink); border-radius:6px; padding:2px 6px; font-weight:800}
.slot .s-off{opacity:.5; font-size:11px}
.slot .s-host{font-size:12px}
.lobby-unassigned{text-align:center; color:var(--dim); font-size:13.5px; margin-top:16px; min-height:1.4em}

/* ─────────── game screen ─────────── */
#screen-game.active{display:flex; flex-direction:column; min-height:100dvh}
.game-top{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  position:relative; z-index:3;
}
.chip{
  flex:none; width:44px; height:44px; border-radius:13px; border:0; font-size:19px;
  display:flex; align-items:center; justify-content:center; color:var(--white);
}
.chip-ghost{background:var(--glass-hi); box-shadow:inset 0 0 0 2px var(--line)}
.chip-ghost:hover{background:var(--glass-hover)}
.chip.muted{opacity:.45; text-decoration:line-through}

.score-chip{
  flex:none; min-width:44px; height:44px; padding:0 10px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:22px; color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.score-s{background:linear-gradient(180deg,#ff7d88,var(--scarlet))}
.score-c{background:linear-gradient(180deg,#6faefc,var(--cobalt))}
.score-chip.bump{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.35) rotate(-5deg)}}

.turn-pill{
  flex:1; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(11px,2.6vw,15px);
  background:var(--glass-hi); box-shadow:inset 0 0 0 2px var(--line);
  padding:0 10px; text-align:center; transition:background .3s, box-shadow .3s;
}
.turn-pill.t-scarlet{background:linear-gradient(180deg,#ff7d88,var(--scarlet)); box-shadow:0 4px 0 var(--scarlet-d); animation:pillPulse 2.2s infinite}
.turn-pill.t-cobalt{background:linear-gradient(180deg,#6faefc,var(--cobalt)); box-shadow:0 4px 0 var(--cobalt-d); animation:pillPulse 2.2s infinite}
.turn-pill.t-over{background:linear-gradient(180deg,#ffe08a,var(--gold)); color:var(--ink); box-shadow:0 4px 0 var(--gold-d)}
@keyframes pillPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}

.clue-bar{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:2px 12px 8px; padding:9px 14px; border-radius:13px;
  background:var(--well); box-shadow:inset 0 0 0 2px var(--line);
  min-height:44px; flex-wrap:wrap;
}
.clue-label{font-size:10px; letter-spacing:.28em; color:var(--dim); font-weight:800}
.clue-word{font-family:var(--f-display); font-size:clamp(16px,3.4vw,22px); letter-spacing:.1em; color:var(--gold)}
.clue-guesses{font-size:12.5px; font-weight:700; color:var(--dim)}
.clue-bar.flash{animation:clueFlash .6s}
@keyframes clueFlash{0%{box-shadow:inset 0 0 0 3px var(--gold)}100%{box-shadow:inset 0 0 0 2px var(--line)}}

/* A received remote clue takes over the screen briefly like a decoded radio burst. */
.clue-transmission{
  position:fixed; z-index:70; left:50%; top:24%; width:min(560px,calc(100vw - 28px));
  transform:translate(-50%,-50%); overflow:hidden; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:22px 28px 20px;
  border:1px solid rgba(255,225,145,.52); border-radius:20px;
  background:
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.025) 4px 5px),
    linear-gradient(145deg,rgba(25,31,67,.98),rgba(5,9,25,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 7px rgba(255,206,79,.07),0 28px 90px rgba(0,0,0,.7);
  text-align:center;
}
.clue-transmission[hidden]{display:none}
.clue-transmission.incoming{animation:clueIncoming 4.2s var(--snap) both}
.ct-scan{position:absolute; inset:0; background:linear-gradient(100deg,transparent 25%,rgba(80,244,195,.16) 48%,transparent 70%); transform:translateX(-120%); animation:clueScan 1.25s ease-out .18s both}
.ct-label{position:relative; color:var(--agent-g); font-size:10px; font-weight:800; letter-spacing:.25em}
.ct-word{position:relative; color:var(--gold); font:400 clamp(30px,6vw,50px) var(--f-display); letter-spacing:.08em; text-shadow:0 0 28px rgba(255,206,79,.45)}
.ct-meta{position:relative; color:#d8d2e5; font-size:11px; font-weight:800; letter-spacing:.15em}
@keyframes clueIncoming{0%{opacity:0; transform:translate(-50%,-50%) scale(.68) rotate(-1deg)}8%{opacity:1; transform:translate(-50%,-50%) scale(1.035) rotate(.3deg)}14%,84%{opacity:1; transform:translate(-50%,-50%) scale(1)}100%{opacity:0; transform:translate(-50%,-68%) scale(.97)}}
@keyframes clueScan{to{transform:translateX(120%)}}

.game-main{
  flex:1; display:flex; gap:14px; padding:0 12px 10px; min-height:0;
  align-items:stretch; justify-content:center;
}
.grid-wrap{flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-width:0}
.grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(6px,1.1vmin,12px);
  width:min(100%, calc((100dvh - 240px) * 1.45), 980px);
}

/* tiles */
.tile{
  position:relative; border:0; background:transparent; padding:0;
  aspect-ratio:29/19; perspective:700px; container-type:inline-size;
}
.tile-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.35,1.3,.5,1);
}
.tile.revealed .tile-inner{transform:rotateX(180deg)}
.tile-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:clamp(7px,1.6cqw,13px); display:flex; align-items:center; justify-content:center;
  padding:4% 6%;
}
.tile-front{
  background:linear-gradient(180deg,var(--paper),var(--paper2));
  color:var(--cream-ink);
  box-shadow:0 3px 0 var(--tile-edge), 0 5px 10px rgba(0,0,0,.3);
}
.tile:nth-child(3n) .tile-front{transform:rotate(.6deg)}
.tile:nth-child(3n+1) .tile-front{transform:rotate(-.5deg)}
.tile:not(.revealed):not(.locked):hover .tile-inner{transform:translateY(-3px) rotateZ(-.8deg)}
.tile.locked{cursor:default}
.tword{
  font-weight:800; letter-spacing:.04em; text-align:center; line-height:1.05;
  font-size:clamp(10px,11.5cqw,26px); word-break:break-word;
}
.tword.len-m{font-size:clamp(9px,9.4cqw,22px)}
.tword.len-l{font-size:clamp(8px,7.8cqw,18px); letter-spacing:.02em}

.tile-back{transform:rotateX(180deg); color:#fff; overflow:hidden}
.tile-back .tword{position:relative; z-index:1; opacity:.95; font-size:clamp(8px,8.4cqw,18px)}
.tile-back svg{position:absolute; width:74%; height:74%; opacity:.28; right:-12%; bottom:-16%; z-index:0}
.tb-S{background:linear-gradient(180deg,#ff6a76,var(--scarlet-d)); box-shadow:0 3px 0 #a01522, 0 5px 10px rgba(0,0,0,.3)}
.tb-C{background:linear-gradient(180deg,#5aa1f8,var(--cobalt-d)); box-shadow:0 3px 0 #124a9c, 0 5px 10px rgba(0,0,0,.3)}
.tb-N{background:linear-gradient(180deg,#ecd8a8,var(--civ-d)); color:#5c4a22; box-shadow:0 3px 0 #8f7443, 0 5px 10px rgba(0,0,0,.3)}
.tb-N .tword{color:#5c4a22}
.tb-M{background:linear-gradient(180deg,#37324a,#17141f); box-shadow:0 0 0 2px var(--mole-acc), 0 0 24px rgba(164,242,75,.5)}
.tb-M svg{color:var(--mole-acc); opacity:.5}
.tb-M .tword{color:var(--mole-acc)}

.tile.armed .tile-front{box-shadow:0 0 0 3px var(--gold), 0 6px 16px rgba(255,206,79,.4)}
.tile.armed::after{
  content:"TAP AGAIN"; position:absolute; z-index:2; left:50%; top:-9px; transform:translateX(-50%) rotate(-2deg);
  background:var(--gold); color:var(--ink); font-size:9px; font-weight:800; letter-spacing:.14em;
  padding:3px 8px; border-radius:7px; box-shadow:0 2px 0 var(--gold-d); white-space:nowrap;
}
.tile.just{animation:landed .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes landed{0%{transform:scale(1.12)}100%{transform:scale(1)}}
.tile.shake{animation:shake .6s}
.tile.endreveal .tile-back{filter:grayscale(.35) brightness(.72)}
@keyframes shake{10%,50%,90%{transform:translateX(-5px) rotate(-1deg)}30%,70%{transform:translateX(5px) rotate(1deg)}}

/* Dual-key badges are reserved for the decoded end-state; live colors stay in the side briefing. */
.tile .key-badge{display:none; position:absolute; z-index:2; top:5%; left:5%; width:16%; min-width:12px; max-width:22px; aspect-ratio:1; border-radius:35%; box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* side panel */
.side{
  flex:0 0 300px; display:flex; flex-direction:column; border-radius:18px;
  background:var(--well); box-shadow:inset 0 0 0 2px var(--line); overflow:hidden;
  max-height:calc(100dvh - 220px);
}
.side-tabs{display:flex; gap:0; border-bottom:2px solid var(--line)}
.side-tab{
  flex:1; padding:11px; border:0; background:transparent; color:var(--dim);
  font-weight:800; letter-spacing:.14em; font-size:11px; text-transform:uppercase;
}
.side-tab.active{color:var(--gold); background:var(--glass)}
.side-body{flex:1; overflow-y:auto; padding:10px 12px}
.log{display:flex; flex-direction:column; gap:7px}
.log-e{font-size:13px; line-height:1.45; padding:7px 10px; border-radius:10px; background:var(--glass)}
.log-e.tm-scarlet{border-left:3px solid var(--scarlet)}
.log-e.tm-cobalt{border-left:3px solid var(--cobalt)}
.log-e.ty-clue{background:rgba(255,206,79,.1); font-weight:700}
.log-e.ty-mole{background:rgba(164,242,75,.12); font-weight:700}
.log-e.ty-oops{background:rgba(255,71,87,.12)}
.crew .slot{margin-bottom:8px}
.crew h4{margin:10px 0 8px; font-size:11px; letter-spacing:.2em; color:var(--dim)}
.crew .crew-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

/* Turn controls sit in a compact rail immediately to the right of the board. */
.game-controls{
  flex:0 0 148px; align-self:stretch; display:flex; flex-direction:column; gap:10px;
  align-items:stretch; justify-content:center; padding:8px 0;
}
.game-controls .btn{width:100%; min-height:56px; padding:11px 12px; line-height:1.18}
.gc-note{color:var(--dim); font-weight:600; font-size:12.5px; line-height:1.4; text-align:center}

/* ─────────── overlays ─────────── */
.overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:var(--ov-back); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:18px; overflow-y:auto;
}
.overlay[hidden]{display:none}
.ov-card{
  width:min(660px,96vw); background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-radius:24px; box-shadow:inset 0 0 0 2px var(--line), 0 30px 80px rgba(0,0,0,.5);
  padding:clamp(20px,4vw,34px); text-align:center;
  animation:drop .35s cubic-bezier(.2,1.3,.4,1) both;
}
.ov-slim{width:min(440px,96vw)}
.ov-title{font-family:var(--f-display); font-weight:400; letter-spacing:.08em; font-size:clamp(20px,4vw,28px); margin:0 0 6px}
.ov-sub{color:var(--dim); font-weight:600; margin:0 0 18px; font-size:14px}
.ov-hint{color:var(--dim); font-size:12.5px; margin:12px 0 0}
.ov-actions{display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap}

/* handler key map (one-screen briefing + docked side briefing) */
.key-map{
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:0 auto 18px;
  max-width:480px;
}
.side-brief{padding:10px 12px 2px; border-bottom:2px solid var(--line)}
.sb-title{font-size:9px; letter-spacing:.24em; color:var(--gold); font-weight:800; margin-bottom:7px; text-align:center}
.sb-map{gap:3px; margin:0 0 10px; max-width:none}
.sb-map .km-cell{font-size:clamp(6.5px,.68vw,9px); border-radius:5px; padding:1px}
@media (max-width:900px){ .sb-map .km-cell{font-size:8.5px} }
.km-cell{
  aspect-ratio:29/19; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:clamp(7px,1.6vw,11.5px); letter-spacing:.02em; padding:2px;
  color:#fff; text-align:center; line-height:1.05; word-break:break-word;
}
.km-S{background:var(--scarlet)}
.km-C{background:var(--cobalt)}
.km-N{background:var(--civ); color:#5c4a22}
.km-M{background:var(--mole); color:var(--mole-acc); box-shadow:0 0 0 2px var(--mole-acc)}
.km-cell.done{opacity:.28; text-decoration:line-through}

/* clue overlay */
.numpad{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px}
.np{
  border:0; border-radius:12px; padding:12px 0; font-family:var(--f-display); font-size:18px;
  background:var(--glass-hi); color:var(--white); box-shadow:inset 0 0 0 2px var(--line);
}
.np.sel{background:linear-gradient(180deg,#ffe08a,var(--gold)); color:var(--ink); box-shadow:0 3px 0 var(--gold-d)}

/* win overlay */
.ov-win{overflow:hidden}
.win-icon svg{width:86px; height:86px}
.win-title{font-family:var(--f-display); font-weight:400; font-size:clamp(26px,6vw,42px); margin:8px 0 4px; letter-spacing:.05em}
.win-title.w-scarlet{color:#ff8b95; text-shadow:0 0 34px var(--scarlet-glow)}
.win-title.w-cobalt{color:#7db4f8; text-shadow:0 0 34px var(--cobalt-glow)}
.win-title.w-duo-win{color:#5fe8a6; text-shadow:0 0 34px rgba(47,214,132,.5)}
.win-title.w-duo-loss{color:#a4f24b; text-shadow:0 0 34px rgba(164,242,75,.4)}
.win-sub{color:var(--dim); font-weight:600; margin:0; font-size:15px}

.menu-list{display:flex; flex-direction:column; gap:12px}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80;
  background:var(--toast-bg); color:var(--toast-ink); font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.45);
  animation:toastIn .3s cubic-bezier(.2,1.4,.4,1) both; max-width:90vw; text-align:center;
}
@keyframes toastIn{from{opacity:0; transform:translateX(-50%) translateY(14px)}to{opacity:1; transform:translateX(-50%) translateY(0)}}

#fx{position:fixed; inset:0; z-index:60; pointer-events:none}

/* ─────────── duo mode ─────────── */
:root{
  --agent-g:#2fd684; --agent-g-d:#1da05f;
  --alpha:#2fd8b0; --alpha-d:#1a9e80;
  --omega:#b98bff; --omega-d:#8e5fe0;
}
.choose-label{margin:0; color:var(--dim); font-weight:800; letter-spacing:.34em; font-size:clamp(10px,1.5vw,12px)}
.play-sub{text-align:center; color:var(--dim); font-weight:600; font-size:14px; margin:-8px 0 22px}
.play-cards{justify-content:center}
.mc-party:hover{box-shadow:inset 0 0 0 3px var(--scarlet), 0 18px 40px var(--scarlet-glow)}
.mc-duo:hover{box-shadow:inset 0 0 0 3px var(--agent-g), 0 18px 40px rgba(47,214,132,.28)}
.mc-party .mc-icon svg, .mc-duo .mc-icon svg{width:64px; height:52px}

.ht-mode{
  font-family:var(--f-display); font-weight:400; letter-spacing:.14em; font-size:17px;
  margin:26px 0 10px; padding:8px 14px; border-radius:12px; display:inline-block;
}
.ht-mode:first-child{margin-top:0}
.ht-mode-party{background:linear-gradient(90deg, rgba(255,71,87,.25), rgba(47,141,246,.25)); box-shadow:inset 0 0 0 2px var(--line)}
.ht-mode-duo{background:rgba(47,214,132,.16); box-shadow:inset 0 0 0 2px rgba(47,214,132,.4)}
.tx-g{color:var(--agent-g)}

/* token bar (burner phones) */
.token-bar{
  display:flex; gap:7px; align-items:center; justify-content:center; flex-wrap:wrap;
  margin:0 12px 8px; min-height:18px;
}
.tk-group{display:inline-flex; gap:7px; align-items:center; justify-content:center; white-space:nowrap}
.tk{
  width:22px; height:13px; border-radius:4px; background:linear-gradient(180deg,#ffe08a,var(--gold));
  box-shadow:0 2px 0 var(--gold-d); position:relative;
}
.tk::after{content:""; position:absolute; left:50%; top:3px; transform:translateX(-50%); width:8px; height:2px; border-radius:1px; background:rgba(0,0,0,.35)}
.tk.dead{background:#3a3357; box-shadow:inset 0 0 0 2px var(--line); opacity:.55}
.tk-label{font-size:10px; letter-spacing:.22em; color:var(--dim); font-weight:800; margin-right:4px}

/* duo turn pill + score chips */
.turn-pill.t-alpha{background:linear-gradient(180deg,#5fe8c6,var(--alpha)); color:#0b3a2e; box-shadow:0 4px 0 var(--alpha-d); animation:pillPulse 2.2s infinite}
.turn-pill.t-omega{background:linear-gradient(180deg,#cfaeff,var(--omega)); color:#2a1650; box-shadow:0 4px 0 var(--omega-d); animation:pillPulse 2.2s infinite}
.turn-pill.t-sudden{background:linear-gradient(180deg,#ff9a5f,#ff5f3c); box-shadow:0 4px 0 #c23a1d; animation:suddenPulse 1s infinite}
@keyframes suddenPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}
.score-chip.score-g{background:linear-gradient(180deg,#5fe8a6,var(--agent-g-d))}
.score-chip.score-t{background:linear-gradient(180deg,#ffe08a,var(--gold-d)); color:var(--ink)}

/* duo tile faces & badges */
.tb-G{background:linear-gradient(180deg,#4fe397,var(--agent-g-d)); box-shadow:0 3px 0 #127a46, 0 5px 10px rgba(0,0,0,.3)}
.km-G{background:var(--agent-g); color:#0b3a2e}

/* civilian burn marks — only bind the cell that tapped them */
.tile .by-a,.tile .by-o{
  display:none; position:absolute; z-index:2; bottom:6%; font-size:clamp(7px,1.6cqw,10px);
  font-weight:800; padding:1px 5px; border-radius:6px; letter-spacing:.06em;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.tile .by-a{left:5%; background:var(--alpha); color:#0b3a2e}
.tile .by-o{right:5%; background:var(--omega); color:#2a1650}
.tile.bym-alpha .by-a{display:block}
.tile.bym-omega .by-o{display:block}

/* Reserved badge element; briefing colors never render on word-card corners. */
.tile .key-badge2{display:none; position:absolute; z-index:2; top:5%; right:5%; width:16%; min-width:12px; max-width:22px; aspect-ratio:1; border-radius:35%; box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* duo lobby cells */
.lteam-a{background:rgba(47,216,176,.10); box-shadow:inset 0 0 0 2px rgba(47,216,176,.45)}
.lteam-o{background:rgba(185,139,255,.10); box-shadow:inset 0 0 0 2px rgba(185,139,255,.45)}
.btn-teal{background:linear-gradient(180deg,#5fe8c6,var(--alpha)); color:#0b3a2e; box-shadow:0 4px 0 var(--alpha-d)}
.btn-violet{background:linear-gradient(180deg,#cfaeff,var(--omega)); color:#2a1650; box-shadow:0 4px 0 var(--omega-d)}
.log-e.tm-alpha{border-left:3px solid var(--alpha)}
.log-e.tm-omega{border-left:3px solid var(--omega)}

/* ─────────── world tour map ─────────── */
.map-wrap{max-width:1060px; margin:0 auto; padding:clamp(16px,3vh,34px) 16px 30px; animation:drop .5s cubic-bezier(.2,1.2,.4,1) both}
.map-head{display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap}
.map-title{margin:0; flex:1; text-align:center}
.map-progress{font-family:var(--f-display); font-size:13px; letter-spacing:.14em; color:var(--agent-g); background:rgba(47,214,132,.12); border-radius:10px; padding:7px 12px; box-shadow:inset 0 0 0 2px rgba(47,214,132,.35)}
.map-sub{text-align:center; color:var(--dim); font-weight:600; font-size:13.5px; margin:8px 0 14px}
.map-stage{
  border-radius:22px; overflow:hidden;
  box-shadow:inset 0 0 0 2px var(--line), 0 18px 50px rgba(0,0,0,.25);
}
.map-svg{display:block; width:100%; height:auto}
.map-sea{fill:var(--map-sea)}
.map-grat line{stroke:var(--map-grid); stroke-width:1}
.map-grat line.eq{stroke-width:1.6; stroke-dasharray:6 6}
.map-world{fill:var(--map-land); stroke:var(--map-coast); stroke-width:.7; stroke-linejoin:round}
.map-pings .mp{fill:none; stroke:var(--agent-g); stroke-width:1.6; opacity:0; transform-box:fill-box; transform-origin:center; animation:mapPing 7.5s ease-out infinite}
@keyframes mapPing{0%,74%{opacity:0; transform:scale(.4)}78%{opacity:.85; transform:scale(.6)}96%{opacity:0; transform:scale(3.4)}100%{opacity:0}}
.map-sweep{pointer-events:none}
.map-sweep path{fill:var(--gold); opacity:.05; transform-origin:500px 250px; animation:sweepSpin 16s linear infinite}
@keyframes sweepSpin{to{transform:rotate(360deg)}}
.map-rose circle{fill:none; stroke:var(--map-tag); stroke-width:1.2}
.map-rose .mr-n{fill:var(--scarlet); opacity:.8}
.map-rose .mr-e{fill:var(--map-tag)}
.map-rose text{fill:var(--map-tag); font:800 12px var(--f-body); text-anchor:middle}
.map-tag{fill:var(--map-tag); font:800 12px var(--f-body); letter-spacing:.28em}
.map-tag-r{text-anchor:end; letter-spacing:.14em; font-size:10px}
.map-routes .mr{fill:none; stroke:var(--map-coast); opacity:.55; stroke-width:1.8; stroke-dasharray:5 7}
.map-routes .mr.lit{stroke:var(--gold); opacity:.95; stroke-width:2.2; animation:routeFlow 1.6s linear infinite}
@keyframes routeFlow{to{stroke-dashoffset:-24}}
.map-node{cursor:pointer}
.map-node .mn-hit{fill:transparent}
.map-node .mn-dot{fill:#6a6288; stroke:var(--map-sea); stroke-width:2; transition:transform .2s; transform-box:fill-box; transform-origin:center}
.map-node .mn-name{fill:var(--white); font:800 13px var(--f-body); letter-spacing:.05em; paint-order:stroke; stroke:var(--map-sea); stroke-width:3.5}
.map-node .mn-diff{fill:var(--dim); font:800 10.5px var(--f-body); letter-spacing:.1em; paint-order:stroke; stroke:var(--map-sea); stroke-width:3}
.map-node.open .mn-dot{fill:var(--gold); stroke:#fff}
.map-node.open .mn-halo{fill:none; stroke:var(--gold); stroke-width:2; opacity:.6; transform-box:fill-box; transform-origin:center; animation:halo2 2s ease-out infinite}
@keyframes halo2{0%{transform:scale(.5); opacity:.7}100%{transform:scale(1.9); opacity:0}}
.map-node.done .mn-dot{fill:var(--agent-g); stroke:#eafff3}
.map-node.done .mn-check{fill:none; stroke:#08351f; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.map-node.locked{cursor:not-allowed}
.map-node.locked .mn-name{opacity:.45}
.map-node.locked .mn-diff{opacity:.35}
.map-node.locked .mn-lock{fill:none; stroke:#8b84ad; stroke-width:1.4}
.map-node.sel .mn-dot{stroke:var(--gold); stroke-width:3.5; filter:drop-shadow(0 0 8px rgba(255,206,79,.9))}
.map-node:hover .mn-dot{transform:scale(1.35)}
.mi-coords{font-size:11px; letter-spacing:.2em; color:var(--dim); font-weight:800; margin-bottom:6px}

.mission-card{
  margin:14px auto 0; max-width:520px; text-align:center;
  background:linear-gradient(180deg,var(--bg2),var(--bg)); border-radius:20px;
  box-shadow:inset 0 0 0 2px var(--line), 0 18px 50px rgba(0,0,0,.45);
  padding:20px 22px;
}
.mission-card.pop-in{animation:drop .35s cubic-bezier(.2,1.4,.4,1) both}
.mi-op{font-size:11px; letter-spacing:.3em; color:var(--gold); font-weight:800}
.mi-city{font-family:var(--f-display); font-size:clamp(24px,5vw,34px); letter-spacing:.06em; margin:4px 0}
.mi-flavor{color:var(--dim); font-weight:600; font-size:13.5px; font-style:italic}
.mi-stats{display:flex; gap:12px; justify-content:center; margin:14px 0 4px; flex-wrap:wrap}
.mi-stat{background:var(--glass-hi); border-radius:12px; padding:8px 14px; font-size:13px; font-weight:700; color:var(--dim); box-shadow:inset 0 0 0 2px var(--line)}
.mi-stat b{color:var(--gold); font-family:var(--f-display); font-size:17px; margin-right:4px}

.mission-chip{
  display:flex; align-items:center; gap:10px; width:100%; border:0; text-align:left;
  background:rgba(47,214,132,.10); border-radius:13px; padding:10px 14px; color:var(--white);
  box-shadow:inset 0 0 0 2px rgba(47,214,132,.4); transition:box-shadow .2s, transform .15s;
}
.mission-chip:hover{box-shadow:inset 0 0 0 2px var(--agent-g); transform:translateY(-1px)}
.mch-label{font-size:9px; letter-spacing:.26em; color:var(--agent-g); font-weight:800}
.mch-name{flex:1; font-weight:800; font-size:12.5px; letter-spacing:.04em}
.mch-change{font-size:11px; color:var(--dim); font-weight:700}
.lobby-mission{
  flex-basis:100%; text-align:center; background:rgba(47,214,132,.10); border-radius:14px;
  padding:10px 14px; font-size:14px; font-weight:600; color:var(--white);
  box-shadow:inset 0 0 0 2px rgba(47,214,132,.35); margin-bottom:2px;
}
.lobby-mission b{color:var(--gold)}
.tk-mission{
  font-size:10px; letter-spacing:.16em; font-weight:800; color:var(--agent-g);
  background:rgba(47,214,132,.12); padding:3px 9px; border-radius:8px; margin-right:6px;
  box-shadow:inset 0 0 0 1.5px rgba(47,214,132,.35);
}
.tk.sl{background:linear-gradient(180deg,#ffb27d,#ff8c4a); box-shadow:0 2px 0 #c65f22}
.tk.sl.dead{background:#4a2f3a; box-shadow:inset 0 0 0 2px rgba(255,120,120,.25); opacity:.6}

/* ─────────── juice & motion ─────────── */
.screen.active{animation:screenIn .38s cubic-bezier(.2,.9,.3,1) both}
@keyframes screenIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.grid.dealing .tile{animation:dealIn .5s cubic-bezier(.2,1.3,.4,1) backwards; animation-delay:calc(var(--di) * 28ms)}
@keyframes dealIn{from{opacity:0; transform:translateY(-18px) scale(.85) rotate(-2deg)}to{opacity:1; transform:none}}

.turn-pill.pop{animation:pillPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes pillPop{35%{transform:scale(1.07)}}

.clue-bar{position:relative; overflow:visible}
.clue-bar.flash::after{
  content:""; position:absolute; inset:-2px; border-radius:15px; pointer-events:none;
  border:2px solid var(--gold); animation:pingOut .7s ease-out both;
}
@keyframes pingOut{from{opacity:.9; transform:scale(1)}to{opacity:0; transform:scale(1.06,1.5)}}

.tk{transition:transform .45s cubic-bezier(.2,1.2,.4,1), opacity .45s, background .45s, box-shadow .45s}
.tk.dead{transform:rotate(14deg) scale(.82)}

body.mole-flash::after{
  content:""; position:fixed; inset:0; z-index:70; pointer-events:none;
  background:radial-gradient(90% 90% at 50% 50%, transparent 40%, rgba(255,40,40,.35) 100%);
  animation:moleFlash .9s ease-out both;
}
@keyframes moleFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

.ov-win .win-title{animation:stampIn .5s .05s cubic-bezier(.2,1.3,.4,1) both}
@keyframes stampIn{0%{opacity:0; transform:scale(2.3) rotate(-7deg)}60%{opacity:1}100%{opacity:1; transform:scale(1) rotate(-1deg)}}

.logo-block{position:relative}
.logo-hat{position:relative}
.logo-hat::before,.logo-hat::after{
  content:""; position:absolute; left:50%; top:50%; width:70px; height:70px;
  border:2px solid rgba(255,206,79,.4); border-radius:50%;
  transform:translate(-50%,-50%); animation:radar 2.8s ease-out infinite; pointer-events:none;
}
.logo-hat::after{animation-delay:1.4s}
@keyframes radar{0%{opacity:.7; transform:translate(-50%,-50%) scale(.7)}100%{opacity:0; transform:translate(-50%,-50%) scale(2.4)}}

.logo-text{position:relative; overflow:hidden}
.logo-text::after{
  content:""; position:absolute; top:0; bottom:0; width:34%; left:-45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); animation:shine 5.5s ease-in-out infinite;
}
@keyframes shine{0%,72%{left:-45%}88%,100%{left:120%}}

.mode-card:hover .mc-icon svg{animation:iconWiggle .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes iconWiggle{30%{transform:rotate(-7deg) scale(1.12)}65%{transform:rotate(5deg)}}

.bg-pattern::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(30% 24% at 30% 30%, rgba(255,206,79,.05), transparent 70%),
    radial-gradient(26% 22% at 70% 65%, rgba(47,141,246,.06), transparent 70%);
  animation:bgDrift 46s ease-in-out infinite alternate; will-change:transform;
}
@keyframes bgDrift{from{transform:translate(-2%,-2%) rotate(0deg)}to{transform:translate(3%,3%) rotate(2deg)}}

.btn:focus-visible,.tile:focus-visible,.chip:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.tile:not(.revealed):not(.locked):hover .tile-front{box-shadow:0 5px 0 var(--tile-edge), 0 10px 22px rgba(0,0,0,.42)}

@media (max-width:700px){
  .map-node .mn-name{font-size:18px}
  .map-node .mn-diff{font-size:14px}
  .map-node .mn-dot{r:10}
  .map-node .mn-hit{r:26}
  .map-tag{display:none}
}

/* ─────────── menu decor & flashy home ─────────── */
.menu-decor{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
#screen-home .home-wrap{position:relative; z-index:1}
.md-word{
  position:absolute; font-family:var(--f-display); color:var(--decor-ink);
  letter-spacing:.12em; white-space:nowrap; animation:floatWord linear infinite;
  transform:rotate(var(--rot, 0deg));
}
@keyframes floatWord{
  0%{transform:translateY(20px) rotate(var(--rot, 0deg)); opacity:0}
  12%,82%{opacity:1}
  100%{transform:translateY(-70px) rotate(var(--rot, 0deg)); opacity:0}
}
.md-stamp{
  position:absolute; top:12%; right:6%; transform:rotate(12deg);
  font-family:var(--f-display); font-size:clamp(20px,3.4vw,34px); letter-spacing:.24em;
  color:var(--stamp); border:4px double var(--stamp); border-radius:10px; padding:8px 18px;
  animation:stampFloat 9s ease-in-out infinite alternate;
}
.md-stamp2{top:auto; bottom:14%; left:5%; right:auto; transform:rotate(-9deg); font-size:clamp(14px,2.2vw,22px); animation-delay:-4s}
@keyframes stampFloat{from{translate:0 0}to{translate:0 14px}}
.md-print{position:absolute; left:9%; top:14%; width:clamp(60px,8vw,110px); opacity:.9; transform:rotate(-14deg)}
.md-print ellipse{fill:none; stroke:var(--decor-ink); stroke-width:2.4; stroke-dasharray:34 9 21 13}
.md-ring{
  position:absolute; right:12%; bottom:9%; width:clamp(70px,9vw,120px); aspect-ratio:1; border-radius:50%;
  border:10px solid var(--decor-ink); opacity:.8;
  mask:radial-gradient(circle, transparent 52%, #000 54%);
}
.btn-link{
  border:0; background:transparent; color:var(--dim); font:600 13px var(--f-body);
  cursor:pointer; border-bottom:1px dashed var(--line); padding:0 0 1px;
}
.btn-link:hover{color:var(--white)}

/* light-theme component tuning */
:root[data-theme="light"] .bg-pattern{
  background:
    radial-gradient(55% 40% at 15% 8%, rgba(255,90,105,.10), transparent 60%),
    radial-gradient(55% 40% at 85% 10%, rgba(47,141,246,.10), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, rgba(224,167,46,.10), transparent 65%),
    radial-gradient(rgba(43,35,68,.10) 1px, transparent 1.4px);
  background-size:auto,auto,auto,26px 26px;
}
:root[data-theme="light"] .bg-pattern::after{background:repeating-linear-gradient(-35deg, transparent 0 34px, rgba(43,35,68,.02) 34px 68px)}
:root[data-theme="light"] .logo-hat svg{filter:drop-shadow(0 5px 0 rgba(70,55,30,.25))}
:root[data-theme="light"] .mode-card{box-shadow:inset 0 0 0 2px var(--line), 0 12px 30px rgba(70,55,30,.14)}
:root[data-theme="light"] .tile-front{box-shadow:0 3px 0 var(--tile-edge), 0 5px 12px rgba(70,55,30,.18)}
:root[data-theme="light"] .tk.dead{background:#d9cfb9; box-shadow:inset 0 0 0 2px var(--line)}
:root[data-theme="light"] .turn-pill.t-sudden{color:#fff}
:root[data-theme="light"] .score-chip{box-shadow:0 4px 0 rgba(70,55,30,.28)}
:root[data-theme="light"] .win-title.w-duo-loss{color:#5d8a1e; text-shadow:0 0 30px rgba(120,180,60,.35)}
:root[data-theme="light"] .tb-M .tword,:root[data-theme="light"] .km-M{color:var(--mole-acc)}
:root[data-theme="light"] .overlay{backdrop-filter:blur(4px)}
:root[data-theme="light"] .log-e.ty-mole{background:rgba(120,170,60,.16)}

/* ─────────── responsive ─────────── */
@media (max-width:900px){
  .game-main{flex-direction:column; align-items:center}
  .grid-wrap{width:100%; flex:none}
  .grid{width:min(100%, 640px)}
  .game-controls{flex:none; width:min(100%,640px); align-self:center; flex-direction:row; flex-wrap:wrap; padding:4px 0}
  .game-controls .btn{width:auto; min-height:48px; flex:1 1 180px}
  .game-controls .gc-note{flex:1 1 100%; padding:6px 12px}
  .side{flex:none; width:min(100%,640px); max-height:34dvh; min-height:120px}
}
@media (max-width:560px){
  .mode-cards{flex-direction:column}
  .mode-card{width:min(340px,88vw); flex-direction:row; text-align:left; padding:16px 18px; gap:14px}
  .mc-icon svg{width:40px; height:40px}
  .mc-title{font-size:18px}
  .mode-card .mc-sub{margin-left:auto; display:none}
  .mc-title,.mc-sub{display:block}
  .mode-card span{text-align:left}
  .grid{gap:5px}
  .side{max-height:30dvh}
  .btn-big{font-size:15px; padding:14px 22px}
}

/* ═══════════════════════ 2026 visual remaster ═══════════════════════ */
:root{
  --bg:#090d22;
  --bg2:#151a38;
  --tile-edge:#a8844c;
  --surface:rgba(13,18,42,.82);
  --surface-hi:rgba(26,32,67,.92);
  --brass:#dba941;
  --brass-hi:#ffe18a;
  --paper-line:rgba(61,45,25,.13);
  --deep-shadow:0 28px 80px rgba(0,0,0,.5);
  --edge-highlight:rgba(255,235,173,.2);
  --snap:cubic-bezier(.16,1,.3,1);
}

body{
  background:
    radial-gradient(85% 70% at 50% -20%, color-mix(in srgb,var(--bg2) 86%,#4650a0),transparent 74%),
    var(--bg);
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.16;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(0,0,0,.035) 5px 6px);
  mix-blend-mode:soft-light;
}
.bg-pattern{opacity:.8}
.bg-pattern::after{
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(255,206,79,.035) 50%,transparent 50.2%),
    linear-gradient(transparent 49.8%,rgba(255,206,79,.025) 50%,transparent 50.2%),
    repeating-linear-gradient(-35deg,transparent 0 34px,rgba(255,255,255,.012) 34px 68px);
}

/* Generated intelligence-desk artwork frames the landing page. */
#screen-home{overflow:hidden; isolation:isolate; --mx:0px; --my:0px}
#screen-home::before{
  content:""; position:absolute; inset:-3.5%; z-index:-2; pointer-events:none;
  background:url("assets/spyphrase-operations-backdrop-v1.webp") center/cover no-repeat;
  opacity:.74; filter:saturate(1.02) contrast(1.08) brightness(.78);
  transform:translate3d(var(--mx),var(--my),0) scale(1.06);
  transition:transform 1.2s var(--snap); will-change:transform;
}
#screen-home::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 48% 58% at 50% 45%,rgba(8,12,30,.84) 0,rgba(8,12,30,.62) 62%,rgba(8,12,30,.3) 100%),
    linear-gradient(180deg,rgba(7,10,26,.08),rgba(7,10,26,.32));
}
.home-wrap{gap:clamp(17px,3.5vh,34px); padding-block:clamp(24px,5vh,52px)}
.logo-block{padding:10px 24px 16px; border-radius:28px}
.brand-kicker{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:6px;
  color:#d9d4c8; font-size:10px; line-height:1; letter-spacing:.24em; font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.brand-kicker span{width:7px; height:7px; border-radius:50%; background:var(--agent-g); box-shadow:0 0 0 4px rgba(47,214,132,.13),0 0 14px var(--agent-g); animation:statusBlink 2s ease-in-out infinite}
@keyframes statusBlink{50%{opacity:.55; box-shadow:0 0 0 8px rgba(47,214,132,0),0 0 5px var(--agent-g)}}
.logo-hat{width:max-content; margin:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.logo-hat::before,.logo-hat::after{border-color:rgba(255,206,79,.25)}
.logo-text{
  background:linear-gradient(180deg,#fffdf4 15%,#d8d3c8 85%); -webkit-background-clip:text; background-clip:text;
  color:transparent; filter:drop-shadow(0 5px 0 rgba(0,0,0,.48));
}
.logo-text span{background:linear-gradient(180deg,#ffe692 5%,#e9ac34 90%); -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline{color:#c3bdd7; text-shadow:0 2px 10px rgba(0,0,0,.8)}
.choose-label{color:#e4ded1; text-shadow:0 2px 10px rgba(0,0,0,.8)}

.mode-card{
  position:relative; isolation:isolate; overflow:hidden; min-height:184px;
  border:1px solid rgba(255,232,166,.2);
  background:
    linear-gradient(140deg,rgba(255,255,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(26,31,64,.91),rgba(9,13,32,.94));
  box-shadow:inset 0 1px 0 var(--edge-highlight),inset 0 0 0 1px rgba(255,255,255,.045),0 18px 55px rgba(0,0,0,.42);
}
.mode-card::before{
  content:""; position:absolute; inset:-1px; z-index:-1; opacity:0; transition:opacity .25s;
  background:radial-gradient(160px circle at var(--spot-x,50%) var(--spot-y,30%),rgba(255,223,130,.2),transparent 70%);
}
.mode-card::after{
  content:""; position:absolute; left:18px; right:18px; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--card-accent,var(--gold)),transparent); opacity:.9;
}
.mode-card:hover{transform:translateY(-8px) rotate(-.45deg); box-shadow:inset 0 1px 0 var(--edge-highlight),0 28px 70px rgba(0,0,0,.52)}
.mode-card:hover::before{opacity:1}
.mc-party{--card-accent:var(--scarlet)} .mc-duo{--card-accent:var(--agent-g)}
.mc-local{--card-accent:var(--gold)} .mc-online{--card-accent:var(--cobalt)}
.mc-kicker{font-size:8.5px; letter-spacing:.22em; color:#b9b2c9; font-weight:800; order:-1}
.mc-icon{position:relative; filter:drop-shadow(0 9px 16px rgba(0,0,0,.4))}
.mc-icon::before{content:""; position:absolute; inset:-8px; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.mc-title{color:#fffdf5; text-shadow:0 3px 0 rgba(0,0,0,.35)}
.mc-sub{color:#b3accb}
.home-foot{padding:9px 14px; border-radius:999px; background:rgba(5,8,22,.54); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px)}
.home-foot a,.home-foot .btn-link,.home-foot{color:#bcb6cd}

/* Tactile dossier panels and forms. */
.panel-wrap{position:relative; isolation:isolate}
.panel-wrap::before{
  content:""; position:absolute; inset:12px 4px 18px; z-index:-1; border-radius:26px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.09),transparent 24%),
    linear-gradient(180deg,var(--surface-hi),var(--surface));
  border:1px solid rgba(255,230,160,.15);
  box-shadow:inset 0 1px 0 var(--edge-highlight),var(--deep-shadow);
}
.panel-wrap::after{
  content:"SP // SECURE DOSSIER"; position:absolute; top:23px; right:22px; z-index:-1;
  color:rgba(255,206,79,.24); font:800 8px var(--f-body); letter-spacing:.2em;
}
.panel-title{position:relative; padding-bottom:16px; color:#fffdf5; text-shadow:0 5px 0 rgba(0,0,0,.3)}
.panel-title::after{content:""; position:absolute; width:70px; height:3px; border-radius:3px; left:50%; bottom:3px; transform:translateX(-50%); background:linear-gradient(90deg,var(--scarlet),var(--gold),var(--cobalt)); box-shadow:0 0 18px rgba(255,206,79,.35)}
.play-sub,.lobby-hint,.ov-sub{color:#aaa3c1}
.howto-body,.oc,.lteam{
  background:
    radial-gradient(circle at 85% 12%,rgba(255,206,79,.05),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.18);
}
.ht-step{padding:12px; border-radius:14px; transition:background .2s,transform .2s}
.ht-step:hover{background:rgba(255,255,255,.035); transform:translateX(3px)}
.ht-num{border:1px solid var(--brass-hi); box-shadow:0 4px 0 #9c7024,0 9px 20px rgba(0,0,0,.25)}
.oc{position:relative; overflow:hidden}
.oc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold)}
.oc + .oc::before{background:var(--cobalt)}
.inp{
  border:1px solid rgba(255,255,255,.45);
  background:
    repeating-linear-gradient(0deg,transparent 0 23px,var(--paper-line) 24px),
    linear-gradient(145deg,#fffdf3,#e9d7b5);
  box-shadow:inset 0 0 0 2px rgba(82,59,26,.12),0 5px 0 #9c7c4e,0 10px 25px rgba(0,0,0,.24);
}
.inp:focus{box-shadow:inset 0 0 0 3px var(--gold),0 5px 0 #9c7c4e,0 0 34px rgba(255,206,79,.22)}
.room-code{border:1px solid rgba(255,255,255,.55); background:linear-gradient(145deg,#fffdf3,#e9d7b5); box-shadow:0 5px 0 #9c7c4e,0 12px 26px rgba(0,0,0,.25)}

.btn{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.16); text-shadow:0 1px 0 rgba(255,255,255,.18)}
.btn::after{content:""; position:absolute; inset:-60% auto -60% -45%; width:30%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); transform:skewX(-18deg); transition:left .5s var(--snap)}
.btn:hover::after{left:120%}
.btn-ghost{text-shadow:none; backdrop-filter:blur(8px)}
.tap-ripple{position:absolute; z-index:5; width:12px; height:12px; margin:-6px; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.48); transform:scale(0); animation:tapRipple .62s ease-out forwards}
@keyframes tapRipple{to{transform:scale(22); opacity:0}}

/* Mission board frame. */
.map-stage{position:relative; border:1px solid rgba(255,223,130,.22); background:#080d23; box-shadow:inset 0 0 0 5px rgba(4,7,20,.45),0 30px 80px rgba(0,0,0,.4)}
.map-stage::before{content:""; position:absolute; inset:8px; z-index:2; pointer-events:none; border:1px solid rgba(255,206,79,.18); border-radius:15px; box-shadow:inset 0 0 42px rgba(0,0,0,.5)}
.map-stage::after{content:""; position:absolute; z-index:3; pointer-events:none; left:0; right:0; top:-18%; height:28%; background:linear-gradient(transparent,rgba(70,235,190,.06),transparent); animation:mapScan 8s ease-in-out infinite}
@keyframes mapScan{0%,8%{transform:translateY(-80%);opacity:0}18%{opacity:1}72%{opacity:.6}90%,100%{transform:translateY(440%);opacity:0}}
.mission-card{position:relative; border:1px solid rgba(255,223,130,.18); overflow:hidden}
.mission-card::before{content:"ACTIVE FILE"; position:absolute; top:0; left:0; padding:5px 12px; background:var(--gold); color:var(--ink); font:800 8px var(--f-body); letter-spacing:.16em; border-radius:0 0 8px 0}
.map-progress,.mission-chip,.lobby-mission{backdrop-filter:blur(10px)}

/* Board-game table: cleaner hierarchy, richer cards, more legible status. */
#screen-game{isolation:isolate}
#screen-game::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("assets/spyphrase-operations-backdrop-v1.webp") center/cover no-repeat;
  opacity:.22; filter:saturate(.9) contrast(1.05) brightness(.68);
}
#screen-game::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(6,9,24,.35),rgba(6,9,24,.8))}
.game-top{margin:8px 10px 6px; padding:8px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(8,12,30,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.23); backdrop-filter:blur(14px)}
.chip{border:1px solid rgba(255,255,255,.12); text-shadow:0 2px 4px rgba(0,0,0,.6); transition:transform .15s,background .15s}
.chip:hover{transform:translateY(-2px)}
.score-chip{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.25)}
.score-chip::before{position:absolute; left:4px; top:3px; font:800 6px var(--f-body); letter-spacing:.08em; opacity:.72}
#scoreScarlet::before{content:"S"} #scoreCobalt::before{content:"C"}
.turn-pill{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.turn-pill::after{content:""; position:absolute; left:-30%; top:0; bottom:0; width:22%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-20deg); animation:commsSweep 3.8s ease-in-out infinite}
@keyframes commsSweep{0%,55%{left:-30%}82%,100%{left:130%}}
.clue-bar{margin-inline:18px; border:1px solid rgba(255,206,79,.16); background:linear-gradient(90deg,rgba(5,9,24,.78),rgba(24,28,58,.86),rgba(5,9,24,.78)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.22)}
.clue-bar::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--agent-g); box-shadow:0 0 11px var(--agent-g); animation:statusBlink 1.7s infinite}
.clue-word{text-shadow:0 0 22px rgba(255,206,79,.38)}
.token-bar{padding:4px 12px 7px; border-radius:999px; width:max-content; max-width:calc(100% - 30px); margin-inline:auto; background:rgba(4,7,20,.42)}
.game-main{margin:0 10px; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:24px; background:rgba(5,8,22,.43); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 55px rgba(0,0,0,.24); backdrop-filter:blur(8px)}
.grid{position:relative; padding:clamp(7px,1.1vw,13px); border-radius:21px; background:linear-gradient(145deg,rgba(35,38,69,.92),rgba(8,12,29,.92)); border:1px solid rgba(255,225,150,.13); box-shadow:inset 0 0 30px rgba(0,0,0,.42),0 18px 38px rgba(0,0,0,.3)}
.tile{filter:drop-shadow(0 8px 8px rgba(0,0,0,.2)); transition:filter .2s}
.tile:hover{filter:drop-shadow(0 13px 13px rgba(0,0,0,.34))}
.tile-face{border:1px solid rgba(255,255,255,.28); overflow:hidden}
.tile-front{
  background:
    radial-gradient(circle at 84% 18%,rgba(112,79,33,.12) 0 1px,transparent 1.5px),
    repeating-linear-gradient(0deg,transparent 0 16px,rgba(76,54,25,.045) 17px),
    linear-gradient(145deg,#fffdf2,#ead7ae);
  background-size:17px 17px,auto,auto;
  box-shadow:0 4px 0 var(--tile-edge),0 9px 15px rgba(0,0,0,.32);
}
.tile-front::before{content:""; position:absolute; left:6%; top:8%; width:15%; height:4%; min-height:2px; opacity:.28; background:repeating-linear-gradient(90deg,#3b2b1d 0 1px,transparent 1px 3px)}
.tile-front::after{content:""; position:absolute; right:6%; bottom:8%; width:7%; aspect-ratio:1; border:1px solid rgba(78,56,28,.2); border-radius:50%}
.tile:not(.revealed):not(.locked):hover .tile-inner{transform:translateY(-5px) rotateZ(-.8deg) scale(1.02)}
.tile.armed .tile-front{animation:armedPulse 1s ease-in-out infinite alternate}
@keyframes armedPulse{to{box-shadow:0 4px 0 var(--tile-edge),0 0 0 4px var(--gold),0 0 30px rgba(255,206,79,.55)}}
.tile-back::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(255,255,255,.045) 7px 8px); pointer-events:none}
.tile-back .tword{padding:4px 7px; border-radius:7px; background:rgba(0,0,0,.13); text-shadow:0 2px 5px rgba(0,0,0,.36)}
.side{position:relative; border:1px solid rgba(255,223,150,.12); background:linear-gradient(180deg,rgba(19,24,50,.96),rgba(5,9,24,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 34px rgba(0,0,0,.27)}
.side::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.08; background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 3px 4px)}
.side-tab{position:relative; z-index:1}
.side-tab.active{background:linear-gradient(180deg,rgba(255,206,79,.13),rgba(255,206,79,.04)); text-shadow:0 0 15px rgba(255,206,79,.35)}
.log-e{border:1px solid rgba(255,255,255,.045); box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.game-controls{min-height:70px}

/* Overlays feel like classified briefing folders. */
.overlay{background:rgba(3,5,16,.78); backdrop-filter:blur(12px) saturate(.75)}
.ov-card{position:relative; overflow:hidden; border:1px solid rgba(255,223,150,.2); background:linear-gradient(145deg,rgba(28,34,70,.98),rgba(7,11,28,.99)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 110px rgba(0,0,0,.72)}
.ov-card::before{content:"CLASSIFIED // SP"; position:absolute; right:-31px; top:25px; transform:rotate(45deg); padding:5px 34px; background:rgba(255,71,87,.17); border-block:1px solid rgba(255,100,110,.32); color:#ff9ba4; font:800 7px var(--f-body); letter-spacing:.16em}
.ov-title{color:#fffdf4; text-shadow:0 4px 0 rgba(0,0,0,.3)}
.win-icon{filter:drop-shadow(0 12px 25px rgba(0,0,0,.4))}
.toast{border:1px solid rgba(255,255,255,.35); box-shadow:0 8px 0 rgba(0,0,0,.18),0 22px 55px rgba(0,0,0,.46)}

/* Light mode becomes a sunlit dossier table while retaining team contrast. */
:root[data-theme="light"] body{
  background:
    radial-gradient(80% 65% at 50% -10%,rgba(255,255,255,.95),transparent 72%),
    linear-gradient(135deg,#f2e6cf,#d9c8a5);
}
:root[data-theme="light"] body::before{opacity:.23; mix-blend-mode:multiply}
:root[data-theme="light"] #screen-home::before{opacity:.56; filter:saturate(.82) sepia(.1) contrast(1.02) brightness(1.02)}
:root[data-theme="light"] #screen-home::after{background:radial-gradient(ellipse 48% 62% at 50% 46%,rgba(255,251,239,.86),rgba(243,232,208,.58) 64%,rgba(225,210,180,.26))}
:root[data-theme="light"] .brand-kicker,:root[data-theme="light"] .choose-label{color:#56476f; text-shadow:0 2px 10px rgba(255,255,255,.8)}
:root[data-theme="light"] .tagline{color:#685d84; text-shadow:0 2px 10px rgba(255,255,255,.8)}
:root[data-theme="light"] .logo-text{background:linear-gradient(180deg,#30274e,#514272); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 4px 0 rgba(255,255,255,.55))}
:root[data-theme="light"] .logo-text span{background:linear-gradient(180deg,#e8b83c,#b97918); -webkit-background-clip:text; background-clip:text}
:root[data-theme="light"] .mode-card{background:linear-gradient(145deg,rgba(255,253,246,.94),rgba(232,218,187,.9)); border-color:rgba(83,62,31,.2); box-shadow:inset 0 1px 0 #fff,0 18px 48px rgba(78,55,25,.2)}
:root[data-theme="light"] .mc-title{color:#342a54; text-shadow:0 2px 0 #fff}
:root[data-theme="light"] .mc-sub,:root[data-theme="light"] .mc-kicker{color:#74678e}
:root[data-theme="light"] .home-foot{background:rgba(255,252,241,.66); border-color:rgba(50,40,70,.12)}
:root[data-theme="light"] .home-foot a,:root[data-theme="light"] .home-foot .btn-link,:root[data-theme="light"] .home-foot{color:#665a80}
:root[data-theme="light"] .panel-wrap::before{background:linear-gradient(145deg,rgba(255,253,245,.94),rgba(228,215,187,.91)); border-color:rgba(76,57,29,.18); box-shadow:inset 0 1px 0 #fff,0 28px 65px rgba(78,55,25,.2)}
:root[data-theme="light"] .panel-title,:root[data-theme="light"] .ov-title{color:#2e254b; text-shadow:0 3px 0 rgba(255,255,255,.75)}
:root[data-theme="light"] .play-sub,:root[data-theme="light"] .lobby-hint{color:#6d6286}
:root[data-theme="light"] .howto-body,:root[data-theme="light"] .oc,:root[data-theme="light"] .lteam{background:rgba(255,255,255,.42); border-color:rgba(51,42,79,.11); box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(70,55,30,.1)}
:root[data-theme="light"] #screen-game::before{opacity:.2; filter:saturate(.7) sepia(.12) contrast(.98) brightness(1.06)}
:root[data-theme="light"] #screen-game::after{background:linear-gradient(180deg,rgba(246,238,220,.38),rgba(223,210,184,.7))}
:root[data-theme="light"] .game-top,:root[data-theme="light"] .game-main{background:rgba(255,251,239,.62); border-color:rgba(52,42,80,.12); box-shadow:inset 0 1px 0 #fff,0 15px 35px rgba(76,55,28,.13)}
:root[data-theme="light"] .grid{background:linear-gradient(145deg,rgba(76,66,105,.78),rgba(40,34,70,.9)); border-color:rgba(255,255,255,.45)}
:root[data-theme="light"] .clue-bar{background:rgba(255,252,242,.72); border-color:rgba(80,61,27,.13)}
:root[data-theme="light"] .side{background:linear-gradient(180deg,rgba(255,252,241,.9),rgba(224,212,188,.92)); border-color:rgba(50,40,75,.15); box-shadow:inset 0 1px 0 #fff,0 18px 34px rgba(80,58,29,.16)}
:root[data-theme="light"] .side::after{opacity:.05; mix-blend-mode:multiply}
:root[data-theme="light"] .overlay{background:rgba(43,34,67,.48)}
:root[data-theme="light"] .ov-card{background:linear-gradient(145deg,#fffdf4,#dfccb0); border-color:rgba(63,45,20,.22); box-shadow:inset 0 1px 0 #fff,0 40px 100px rgba(45,32,18,.35)}

@media (max-width:900px){
  .game-main{margin-inline:6px; padding:10px}
  .grid{width:min(100%,660px)}
  .side{max-height:32dvh}
}
@media (max-width:560px){
  #screen-home::before{background-position:43% center}
  .home-wrap{justify-content:flex-start; padding-top:max(24px,env(safe-area-inset-top)); overflow-y:auto}
  .logo-block{padding:4px 12px 6px}
  .brand-kicker{font-size:8px; letter-spacing:.16em}
  .logo-hat svg{width:58px}
  .logo-text{font-size:clamp(38px,13vw,58px)}
  .tagline{max-width:330px; line-height:1.45; margin-top:8px}
  .mode-cards{gap:11px; width:100%}
  .mode-card{min-height:82px; padding:14px 16px; border-radius:18px}
  .mode-card .mc-kicker{position:absolute; right:14px; top:12px; font-size:7px}
  .mc-icon{flex:none}
  .home-foot{gap:10px; flex-wrap:wrap; justify-content:center; max-width:94vw; font-size:11px}
  .panel-wrap::before{inset:6px 3px 12px; border-radius:20px}
  .panel-wrap::after{display:none}
  .game-top{margin:5px 5px 4px; gap:6px; padding:6px}
  .game-top .chip,.game-top .score-chip{height:40px; min-width:40px; width:40px; border-radius:11px}
  .turn-pill{height:40px}
  .clue-bar{margin:2px 8px 6px; gap:8px; padding:7px 10px}
  .game-main{margin-inline:4px; padding:7px; border-radius:17px}
  .grid{padding:6px; gap:4px; border-radius:15px}
  .tile-face{border-radius:6px}
  .side{border-radius:14px}
  .game-controls{min-height:62px; padding-top:7px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  #screen-home::before{transform:scale(1.04) !important}
}