:root{
  --bgTop:#d7f1ea;
  --bgBottom:#f3fbf8;
  --tile:#f7f4ef;
  --grout:#d7d2cc;
  --ink:#12202d;
  --inkSoft:#344454;
  --blue:#1560bd;
  --coral:#ff6f61;
  --shadow:rgba(0,0,0,.18);
  --panel:rgba(255,255,255,.80);
  --panelBorder:rgba(0,0,0,.06);
  --floorTop:#eaf2ef;
  --floorBottom:#cfe2dd;
}
html[data-theme="dark"]{
  --bgTop:#0e1722;
  --bgBottom:#162330;
  --tile:#182635;
  --grout:#243546;
  --ink:#f3f8fb;
  --inkSoft:#c4d3df;
  --blue:#63a4ff;
  --coral:#ff8d7e;
  --shadow:rgba(0,0,0,.42);
  --panel:rgba(19,30,41,.78);
  --panelBorder:rgba(255,255,255,.08);
  --floorTop:#14222d;
  --floorBottom:#0c151c;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:linear-gradient(180deg,var(--bgTop),var(--bgBottom));font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}
#game{display:block;width:100%;height:100%;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none}
#brand{position:absolute;top:18px;left:18px;font-size:clamp(20px,2.8vw,30px);font-weight:900;letter-spacing:.01em;text-shadow:0 1px 12px rgba(255,255,255,.15);color:var(--ink)}
#badge{position:absolute;top:18px;right:18px;padding:10px 14px;border-radius:999px;background:var(--panel);backdrop-filter:blur(8px);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--panelBorder);color:var(--ink)}
#hud{position:absolute;top:72px;left:18px;display:flex;gap:10px}
.pill{padding:10px 14px;border-radius:14px;background:var(--panel);backdrop-filter:blur(8px);font-weight:800;box-shadow:0 12px 30px var(--shadow);border:1px solid var(--panelBorder);min-width:84px;text-align:center;color:var(--ink)}
#controls{position:absolute;top:72px;right:18px;display:flex;gap:10px;pointer-events:auto}
.miniToggle{appearance:none;border:1px solid var(--panelBorder);background:var(--panel);color:var(--ink);border-radius:14px;padding:10px 14px;font-weight:800;font-size:14px;box-shadow:0 12px 30px var(--shadow);cursor:pointer}
.card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,460px);padding:26px 24px;border-radius:24px;background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--panelBorder);box-shadow:0 18px 50px var(--shadow);text-align:center;pointer-events:auto;color:var(--ink)}
.card.hidden{display:none}
.card h1{margin:0 0 10px;font-size:clamp(30px,5vw,48px);line-height:1}
.card p{margin:8px 0;color:var(--inkSoft)}
button{appearance:none;border:none;border-radius:14px;padding:14px 20px;margin-top:12px;background:linear-gradient(135deg,var(--blue),var(--coral));color:#fff;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 12px 30px rgba(21,96,189,.28)}
#toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(18,32,45,.92);color:#fff;padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.hidden{display:none}
@media (max-width:900px){#controls{top:auto;bottom:18px;right:18px;flex-wrap:wrap;justify-content:flex-end;max-width:55vw}#hud{top:auto;bottom:18px;left:18px}#badge{padding:8px 12px}}

#audioHint{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);padding:10px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--panelBorder);backdrop-filter:blur(8px);box-shadow:0 12px 30px var(--shadow);font-weight:800;font-size:13px;color:var(--ink);pointer-events:none;opacity:.95}
#audioHint.hidden{display:none}