/* GameDen — shared chrome for the playable web games.
   Tokens copied from index.html so /play can never drift from the site. */
:root{
  --bg:#0A1416; --bg-2:#0F1F23; --bg-3:#14282D;
  --line:#1E383E; --line-2:#27474E;
  --tx:#E6F1F2; --tx-2:#9DB6BB; --tx-3:#6F8A90;
  --cy:#35C0EA; --gr:#5FD36A; --rd:#F0453F;
  --on-grad:#04191C; --glow:rgba(53,192,234,.30); --chip:#12242A;
  --r:14px; --shell:min(560px,100%);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FBFDFD; --bg-2:#F1F7F8; --bg-3:#E6F1F3;
    --line:#D3E4E7; --line-2:#BCD6DB;
    --tx:#08191D; --tx-2:#476067; --tx-3:#6B858B;
    --cy:#0E7FA6; --gr:#2C9B45; --rd:#CE332D;
    --glow:rgba(14,127,166,.20); --chip:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1416; --bg-2:#0F1F23; --bg-3:#14282D; --line:#1E383E; --line-2:#27474E;
  --tx:#E6F1F2; --tx-2:#9DB6BB; --tx-3:#6F8A90; --cy:#35C0EA; --gr:#5FD36A;
  --rd:#F0453F; --glow:rgba(53,192,234,.30); --chip:#12242A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:"Karla",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; display:flex; flex-direction:column;
  /* A game is a gesture surface: never let a swipe scroll the page. */
  overscroll-behavior:none;
}
h1,h2,.display{font-family:"Bricolage Grotesque","Karla",sans-serif;font-weight:800;letter-spacing:-.02em}
a{color:var(--cy)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--chip);padding:10px 14px;border-radius:10px}

/* ---- header ---- */
.top{
  display:flex;align-items:center;gap:12px;
  padding:14px max(16px,env(safe-area-inset-left)) 14px max(16px,env(safe-area-inset-right));
  border-bottom:1px solid var(--line); background:var(--bg-2);
  position:sticky; top:0; z-index:10;
}
.top .back{
  display:inline-flex;align-items:center;gap:7px;color:var(--tx-2);text-decoration:none;
  font-weight:700;font-size:14px;padding:7px 11px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--bg-3);
}
.top .back:hover{color:var(--tx);border-color:var(--cy)}
.top h1{font-size:17px;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- shell ---- */
main{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:18px max(16px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));}
.shell{width:var(--shell);display:flex;flex-direction:column;gap:14px}

/* ---- score row ---- */
.scores{display:flex;gap:10px}
.score{
  flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 14px;text-align:center;min-width:0;
}
.score .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);font-weight:700}
.score .v{font-size:26px;font-weight:800;font-family:"Bricolage Grotesque",sans-serif;
  font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.score.is-best .v{color:var(--cy)}

/* ---- buttons ---- */
.btn{
  appearance:none;border:1px solid var(--line-2);background:var(--bg-3);color:var(--tx);
  font:inherit;font-weight:700;font-size:15px;padding:12px 20px;border-radius:999px;cursor:pointer;
  touch-action:manipulation;
}
.btn:hover{border-color:var(--cy)}
.btn:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.btn-primary{
  background:linear-gradient(180deg,var(--cy),var(--gr));color:var(--on-grad);
  border:0;box-shadow:0 6px 20px var(--glow);
}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- the board area ---- */
.stage{
  position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
  padding:14px; touch-action:none; user-select:none; -webkit-user-select:none;
}
.hint{color:var(--tx-3);font-size:13px;text-align:center;margin:0}
.hint kbd{
  background:var(--chip);border:1px solid var(--line-2);border-bottom-width:2px;
  border-radius:6px;padding:1px 6px;font:inherit;font-size:12px;font-weight:700;color:var(--tx-2)
}

/* ---- overlay ---- */
.over{
  position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);backdrop-filter:blur(3px);
  border-radius:20px;z-index:5;padding:20px;
}
.over[hidden]{display:none}
.over h2{margin:0;font-size:28px}
.over p{margin:0;color:var(--tx-2);font-size:15px}

/* ---- leaderboard ---- */
.board{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.board h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);
  margin:0;padding:12px 14px;border-bottom:1px solid var(--line)}
.board ol{list-style:none;margin:0;padding:0}
.board li{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:14px}
.board li:last-child{border-bottom:0}
.board .rank{width:22px;color:var(--tx-3);font-weight:700;font-variant-numeric:tabular-nums}
.board .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .pts{font-weight:800;font-variant-numeric:tabular-nums}
.board li.me{background:color-mix(in srgb,var(--cy) 12%,transparent)}
.board .empty{padding:14px;color:var(--tx-3);font-size:14px}

footer{
  text-align:center;color:var(--tx-3);font-size:13px;line-height:1.6;
  padding:20px 16px max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--line)
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}