/* Shared arcade theme. Single dark theme by choice; every game links this file. */

/* Fonts are bundled (SIL Open Font License, see fonts/OFL-*.txt) so pages make no outside requests.
   IBM Plex Mono is used unmodified, as its license requires for the reserved name "Plex". */
@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/bungee-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/bungee-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/IBMPlexMono-Regular.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/IBMPlexMono-SemiBold.woff2) format("woff2"); }
/* Symbols that neither text font has (hearts, shapes, check marks), from Noto Sans Symbols 2, so they
   look the same on every device instead of falling back to whatever the system has. */
@font-face { font-family: "Arcade Symbols"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/arcade-symbols.woff2) format("woff2");
  unicode-range: U+232B, U+25A0, U+25A1, U+25B2, U+25B6, U+25BC, U+25C0, U+25C6, U+25CB, U+25CF, U+2605, U+2606, U+2661, U+2665, U+26A0, U+2713, U+2714, U+2715, U+2717, U+2718; }

:root {
  color-scheme: dark;
  --ground: #0d1f2a;
  --board: #122c3a;
  --grid: #183847;
  --ink: #e8f1f2;
  --muted: #8fb0b8;
  --snake: #ff8a5c;
  --ghost: #b9a7ff;
  --food: #ffd166;
  --good: #5ce0a0;
  --danger: #ff5c7a;
  --accent: var(--snake);
  --display: "Arcade Symbols", "Bungee", "IBM Plex Mono", "Arial Black", Impact, sans-serif;
  --mono: "Arcade Symbols", "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  padding-inline: 16px;
  padding-block: 20px;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }

.cab { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.rule { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.stat .v { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.panel {
  position: relative;
  background: var(--board);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--grid), 0 18px 40px -20px #000;
  padding: 20px;
}
.overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  border-radius: 6px; text-align: center; padding: 16px;
}
.overlay h2 { font-family: var(--display); font-weight: 400; margin: 0; font-size: 1.6rem; }
.overlay p { margin: 0; color: var(--muted); max-width: 34ch; line-height: 1.5; }

button {
  font: 600 0.95rem var(--mono);
  color: var(--ground); background: var(--accent);
  border: 0; border-radius: 4px; padding: 10px 18px; cursor: pointer;
}
button.ghost { background: var(--ground); color: var(--ink); box-shadow: inset 0 0 0 1px var(--grid); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Answer choices for quiz-style games. Number key shown as a badge. */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .choices { grid-template-columns: 1fr; } }
.choice {
  display: flex; gap: 10px; align-items: center; text-align: left;
  background: var(--ground); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--grid);
  font-weight: 400; line-height: 1.35; min-height: 52px;
}
.choice kbd { flex: none; }
.choice.right { background: color-mix(in srgb, var(--good) 25%, var(--ground)); box-shadow: inset 0 0 0 2px var(--good); }
.choice.wrong { background: color-mix(in srgb, var(--danger) 25%, var(--ground)); box-shadow: inset 0 0 0 2px var(--danger); }

.keys { color: var(--muted); font-size: 0.75rem; margin: 0; line-height: 1.8; }
kbd { font-family: var(--mono); border: 1px solid var(--grid); border-radius: 3px; padding: 0 4px; color: var(--ink); background: var(--ground); }
a.back { color: var(--muted); font-size: 0.75rem; }

/* Phones and tablets. Text boxes stay at 16px or larger so iOS doesn't zoom in when one is tapped,
   and double-tap zoom is off on controls so quick repeated taps register as taps. */
@media (pointer: coarse) {
  input, textarea, select { font-size: max(16px, 1em); }
}
button, a, input, [role="button"], [tabindex] { touch-action: manipulation; }