/* Shared chrome for the games. Each game page adds its own bits below. */

:root{
  --bg:#FFD23F; --dots:#F5B700; --ink:#2B1B5A; --card:#FFFDF6;
  --ocean:#7FD8E6; --pink:#FF3E7F; --blank:#FFFFFF; --right:#2ECC71; --wrong:#FF4D4D;
  --muted:#5B4B8A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1E1240; --dots:#2E1D5E; --ink:#FFE9A8; --card:#2A1A55;
    --ocean:#1C5E73; --muted:#C9B8FF; --blank:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --bg:#1E1240; --dots:#2E1D5E; --ink:#FFE9A8; --card:#2A1A55;
  --ocean:#1C5E73; --muted:#C9B8FF; --blank:#FFFFFF;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

body{margin:0;color:var(--ink);font-family:"Fredoka","Trebuchet MS",sans-serif;
  background-color:var(--bg);
  background-image:radial-gradient(var(--dots) 2.5px, transparent 2.6px);
  background-size:18px 18px;min-height:100vh}
main{max-width:1100px;margin:0 auto;padding:20px 16px 140px}

h1{font-family:"Bungee","Impact",sans-serif;font-weight:400;margin:0;line-height:.95;
  font-size:clamp(2.2rem,7vw,4rem);color:var(--pink);
  text-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);transform-origin:left}
.sub{margin:8px 0 0;font-weight:500;font-size:1.05rem}

button{font:inherit;font-weight:700;font-size:1rem;border:3px solid #2B1B5A;border-radius:12px;padding:10px 18px;cursor:pointer;
  background:var(--card);color:var(--ink);box-shadow:4px 4px 0 #2B1B5A;transition:transform .08s, box-shadow .08s}
button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #2B1B5A}
button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}
.submit{background:var(--pink);color:#fff;font-size:1.15rem}

.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hint{margin:14px 2px 0;font-weight:500}
.sticky{position:sticky;top:8px;z-index:6}

/* ---------- Top bar ---------- */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.back{display:inline-block;font-weight:700;font-size:.95rem;text-decoration:none;
  border:3px solid #2B1B5A;border-radius:12px;padding:8px 14px;
  background:var(--card);color:var(--ink);box-shadow:4px 4px 0 #2B1B5A}
.back:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #2B1B5A}
.back:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.playing{display:flex;align-items:center;gap:10px;font-weight:700}
.playing b{font-family:"Bungee",sans-serif;font-weight:400}
.playing button{padding:6px 12px;font-size:.85rem;box-shadow:3px 3px 0 #2B1B5A}

/* ---------- Name gate ---------- */
.gate{max-width:520px;margin:28px auto 0;background:var(--card);
  border:4px solid #2B1B5A;border-radius:24px;box-shadow:10px 10px 0 var(--pink);
  padding:28px 26px;text-align:center}
.gate h2{font-family:"Bungee",sans-serif;font-weight:400;margin:0;
  font-size:clamp(1.6rem,6vw,2.3rem);color:var(--ink)}
.gate p{margin:10px 0 0;font-weight:500;color:var(--muted)}
.gate form{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.gate input{flex:1 1 200px;min-width:0;font:inherit;font-size:1.3rem;font-weight:600;text-align:center;
  padding:14px 16px;border:4px solid #2B1B5A;border-radius:14px;background:#fff;color:#2B1B5A}
.gate input::placeholder{color:#9A8FC0;font-weight:500}
.gate input:focus{outline:4px solid var(--pink);outline-offset:2px}
.gate .go{flex:0 0 auto;background:var(--pink);color:#fff;font-size:1.2rem;padding:14px 26px}
.gate .err{color:var(--wrong);font-weight:700;margin-top:14px}
.gate.shake{animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)}
  50%{transform:translateX(7px)} 75%{transform:translateX(-4px)}
}

/* ---------- Score chips ---------- */
.scores{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--card);border:3px solid #2B1B5A;border-radius:14px;padding:6px 14px;
  box-shadow:4px 4px 0 #2B1B5A;text-align:center;min-width:88px}
.chip b{display:block;font-family:"Bungee",sans-serif;font-weight:400;font-size:1.6rem;line-height:1.1;font-variant-numeric:tabular-nums}
.chip span{font-size:.85rem;font-weight:600;color:var(--muted)}
.chip.time{background:var(--pink);color:#fff}
.chip.time span{color:#FFE3EC}
.chip.time.done{background:#2B1B5A}
.chip.score{background:var(--right);color:#2B1B5A;display:none}
.chip.score span{color:#1B5E36}
.chip.score.show{display:block}

/* ---------- Leaderboard ---------- */
.board{margin-top:30px;background:var(--card);border:3px solid #2B1B5A;border-radius:18px;
  box-shadow:6px 6px 0 #2B1B5A;padding:14px 18px;max-width:460px}
.board h3{font-family:"Bungee",sans-serif;font-weight:400;margin:0 0 6px;font-size:1.1rem}
.board table{width:100%;border-collapse:collapse}
.board td{padding:5px 2px;border-bottom:2px dashed var(--muted)}
.board tr:last-child td{border-bottom:0}
.board td.t{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.board .empty{color:var(--muted)}
.board tr.you td{color:var(--pink);font-weight:700}

/* ---------- Win / error modal ---------- */
.win{position:fixed;inset:0;background:rgba(43,27,90,.6);display:none;align-items:center;justify-content:center;z-index:40;padding:16px}
.win.show{display:flex}
.win .box{background:var(--card);border:4px solid #2B1B5A;border-radius:24px;box-shadow:10px 10px 0 var(--pink);
  padding:26px;text-align:center;max-width:420px;width:100%}
.win h2{font-family:"Bungee",sans-serif;font-weight:400;font-size:2.6rem;margin:0;color:var(--right);text-shadow:3px 3px 0 #2B1B5A}
.win p{font-size:1.15rem;margin:12px 0 18px}

@media (prefers-reduced-motion:reduce){ button,.gate.shake{transition:none;animation:none} }