:root {
  --bg: #0f1a33; --bg2: #1b2d55; --ink: #1a1414; --red: #e8231f; --fry: #ffd21f; --sky: #2bb5e8; --cream: #fff4dc; --text: #fff4dc; --muted: #9fc6e8;
  box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1328; --bg2: #16244a; } }
:root[data-theme="dark"] { --bg: #0b1328; --bg2: #16244a; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Rubik", system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
#bar { display: flex; gap: 8px; padding: 8px 12px 0; width: 100%; max-width: 520px; justify-content: flex-end; }
#bar button { font: 12px "Bungee", system-ui, sans-serif; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
#bar button[aria-pressed="true"] { background: var(--fry); }
#stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
canvas { display: block; border-radius: 14px; box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px var(--red); background: var(--bg2); }
body.pixel canvas { border-radius: 0; image-rendering: pixelated; }
#pad { display: none; width: 100%; max-width: 520px; padding: 10px 14px 12px; gap: 10px; }
@media (pointer: coarse) { #pad { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.6fr; } }
#pad button { font: 20px "Bungee", system-ui, sans-serif; color: var(--ink); background: var(--fry); border: 4px solid var(--ink);
  border-radius: 18px; height: 64px; box-shadow: 0 5px 0 var(--ink); touch-action: none; }
#pad button.fire { background: var(--red); color: var(--cream); }
/* ⚠️ THE STORM BUTTON IS THE METER - see paintStorm() in js/game.js for why.
   The charge is a gradient stop rather than an overlay, so the label stays on
   top of it for free and nothing has to be z-indexed. --chg is 0..1. */
#pad button.storm { font-size: 15px; line-height: 1.05;
  background: linear-gradient(to top, var(--fry) 0 calc(var(--chg, 0) * 100%), var(--sky) calc(var(--chg, 0) * 100%) 100%); }
#pad button.storm.ready { background: var(--fry); animation: stormrdy .5s steps(2, jump-none) infinite; }
@keyframes stormrdy { from { background: var(--fry); } to { background: var(--sky); } }
/* a tap it cannot honour is answered, rather than swallowed */
#pad button.storm.nope { animation: stormno .3s; }
@keyframes stormno { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  #pad button.storm.ready, #pad button.storm.nope { animation: none; }
}
#pad button.active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
#pad button:disabled { opacity: .45; }
/* the parody line - see the note in index.html. Small and quiet, but on the
   screen: a disclaimer nobody can read is not a disclaimer. */
#legal { margin: 0; padding: 0 14px 8px; width: 100%; max-width: 520px; text-align: center;
  font-size: 11px; line-height: 1.4; color: var(--muted); opacity: .75; }
body.pixel #legal { font-family: "Press Start 2P", monospace; font-size: 8px; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
/* ⚠️ above #xpanel (z 5): startGame() and the form's own open both close
   the panel, but a form that can ever open UNDER a modal is a dead end. */
#entry { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 6; }
#entry.show { display: flex; }
#entry form { background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; padding: 18px 20px; width: min(320px, 86vw); box-shadow: 0 6px 0 var(--ink); text-align: center; }
#entry h2 { font: 22px "Bungee", system-ui, sans-serif; margin: 0 0 4px; color: var(--red); }
#entry p { margin: 0 0 12px; font-size: 14px; }
#entry input { font: 34px "Bungee", system-ui, sans-serif; width: 150px; text-align: center; letter-spacing: 8px; text-transform: uppercase; border: 3px solid var(--ink); border-radius: 12px; padding: 4px; background: #fff; color: var(--ink); }
#entry .row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
#entry button { font: 15px "Bungee", system-ui, sans-serif; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
#entry button[type="submit"] { background: var(--red); color: var(--cream); }
#entry button.skip { background: #fff; color: var(--ink); }
#entry .msg { min-height: 18px; margin-top: 10px; font-size: 13px; color: #9a2a1a; }
body.pixel #bar button, body.pixel #pad button, body.pixel #entry h2, body.pixel #entry input, body.pixel #entry button { font-family: "Press Start 2P", monospace; border-radius: 0; }
body.pixel #pad button { font-size: 13px; }
body.pixel #pad button.storm { font-size: 10px; line-height: 1.5; }
body.pixel #bar button { font-size: 9px; }
body.pixel #entry form { border-radius: 0; }
body.pixel #entry input { font-size: 26px; }

/* ---------- sign in with X (top-left of the bar) ----------
   ⚠️ The chip is what splits #bar: margin-right:auto pushes the two toggles to
   the right, which is where they already were, so adding this moved nothing.
   It stays legible in pixel mode without a second set of sizes. */
#bar button.x { margin-right: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--cream); border-color: var(--ink); max-width: 58%; }
#bar button.x svg { width: 11px; height: 11px; fill: currentColor; flex: none; }
#bar button.x img { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--bg2); }
#bar button.x span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* signed in: the fry yellow the rest of the game uses for "this is you" */
#bar button.x.on { background: var(--fry); color: var(--ink); }
/* ⚠️ Inside the arcade cabinet it is a label, not a control - an OAuth round
   trip from an iframe loses the game behind it. See xConnect(). */
#bar button.x.ro { cursor: default; opacity: .9; }
#xpanel { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 5; }
#xpanel.show { display: flex; }
#xpanel .box { background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px;
  padding: 18px 20px; width: min(340px, 86vw); box-shadow: 0 6px 0 var(--ink); text-align: center; }
#xpanel h2 { font: 18px "Bungee", system-ui, sans-serif; margin: 0 0 6px; color: var(--red); }
#xpanel p { margin: 0; font-size: 14px; line-height: 1.45; }
#xpanel .row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
#xpanel button { font: 15px "Bungee", system-ui, sans-serif; border: 3px solid var(--ink); border-radius: 12px;
  padding: 8px 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; background: var(--ink); color: var(--cream); }
#xpanel button.skip { background: #fff; color: var(--ink); }
#xpanel button[hidden] { display: none; }
body.pixel #xpanel h2, body.pixel #xpanel button { font-family: "Press Start 2P", monospace; }
body.pixel #xpanel .box, body.pixel #xpanel button { border-radius: 0; }
body.pixel #xpanel h2 { font-size: 13px; }

/* ---------- the whole board ----------
   ⚠️ The canvas board shows ten because ten is what fits. This is the rest of
   them, in a scrollable panel, because "top ten" and "every score" are two
   different questions and the game could only answer the first. */
#allBtn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 4;
  font: 11px "Bungee", system-ui, sans-serif; color: var(--ink); background: var(--cream);
  border: 3px solid var(--ink); border-radius: 12px; padding: 6px 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
#allBtn.hid { display: none; }
body.pixel #allBtn { font-family: "Press Start 2P", monospace; border-radius: 0; font-size: 9px; }
#allboard { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 7; }
#allboard.show { display: flex; }
#allboard .box { background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px;
  padding: 16px 18px; width: min(360px, 90vw); max-height: 78%; display: flex; flex-direction: column;
  box-shadow: 0 6px 0 var(--ink); }
#allboard h2 { font: 17px "Bungee", system-ui, sans-serif; margin: 0 0 8px; color: var(--red); text-align: center; }
#allList { overflow: auto; font-size: 14px; line-height: 1.55; }
#allList .r { display: flex; gap: 8px; border-bottom: 1px solid rgba(26,20,20,.15); padding: 2px 0; }
#allList .n { width: 30px; color: #7a6a5a; flex: none; }
#allList .h { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#allList .w { color: #7a6a5a; font-size: 12px; }
#allList .s { font-weight: 700; }
#allList .me { color: var(--red); }
#allboard p { margin: 8px 0 0; font-size: 12px; color: #7a6a5a; text-align: center; }
#allboard .row { display: flex; justify-content: center; margin-top: 12px; }
#allboard button { font: 14px "Bungee", system-ui, sans-serif; border: 3px solid var(--ink); border-radius: 12px;
  padding: 7px 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; background: #fff; color: var(--ink); }
body.pixel #allboard .box, body.pixel #allboard button { border-radius: 0; }
body.pixel #allboard h2, body.pixel #allboard button { font-family: "Press Start 2P", monospace; }
body.pixel #allboard h2 { font-size: 12px; }