/* ── Cyber type ── */
/* Self-hosted (latin subset) so a stand on bad wifi still gets them.
   Orbitron for headings, Exo 2 for reading text, Share Tech Mono for
   readouts. Anything outside latin falls through to the system stack. */
@font-face {
  font-family: 'Orbitron'; font-style: normal; font-weight: 500 900;
  font-display: swap; src: url(../fonts/orbitron.woff2) format('woff2');
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url(../fonts/exo2.woff2) format('woff2');
}
@font-face {
  font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(../fonts/share-tech-mono.woff2) format('woff2');
}

:root {
  --font-display: 'Orbitron', 'Exo 2', system-ui, sans-serif;
  --font-body:    'Exo 2', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Share Tech Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bg: #0a0a14;
  --surface: #10101e;
  --card: #16162a;
  --border: #2a2a4a;
  --accent: #7c3aed;
  --accent2: #06b6d4;
  --accent3: #f59e0b;
  --danger: #ef4444;
  --success: #22c55e;
  --text: #e2e8f0;
  --muted: #64748b;
  --glow: 0 0 20px rgba(124,58,237,0.4);
  --glow2: 0 0 20px rgba(6,182,212,0.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  /* Cyber wallpaper: a blue sky over a pink synthwave floor, the same
     mirror horizon as Entangled Gauntlet. The floor itself is drawn by the
     pseudo-elements below. */
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(59,130,246,.18) 0%, transparent 62%),
    radial-gradient(ellipse 90% 45% at 50% 100%, rgba(236,72,153,.18) 0%, transparent 72%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Headings, titles and big numbers get the wide display face */
h1, h2, h3,
.card-title, .game-title, .final-score {
  font-family: var(--font-display);
  letter-spacing: .02em;
}
/* Readouts and code */
code, kbd, pre, samp { font-family: var(--font-mono); }

/* ── Particle canvas background ── */
#bg-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
}

/* ── Synthwave floor ── */
/* A pink grid laid flat and tipped away from you, rolling toward the
   horizon. Home screen only — the game screens have their own arena. */
body:has(#home.active)::before {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  left: -50%; right: -50%; bottom: 0; height: 46vh;
  background:
    linear-gradient(90deg, rgba(236,72,153,.55) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg,  rgba(236,72,153,.55) 1px, transparent 1px) 0 0 / 64px 64px;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  opacity: .3;
  animation: cy-floor 2.4s linear infinite;
}
/* The horizon line where the floor meets the sky */
body:has(#home.active)::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  left: 0; right: 0; bottom: 46vh; height: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6 20%, #ec4899 80%, transparent);
  box-shadow: 0 0 18px 2px rgba(236,72,153,.45), 0 0 40px 6px rgba(59,130,246,.2);
  opacity: .45;
}
@keyframes cy-floor {
  from { background-position: 0 0, 0 0 }
  to   { background-position: 0 0, 0 64px }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#home.active)::before { animation: none }
}

/* ── Layout shells ── */
.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: flex; flex-direction: column; min-height: 100vh; }

/* ══════════════════════════════════════
   HOME SCREEN
══════════════════════════════════════ */
#home {
  align-items: center; justify-content: center; gap: 3rem; padding: 2rem;
  text-align: center;
}
.home-header h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  letter-spacing: .04em;
}
.home-header p {
  color: var(--muted); margin-top: .5rem; font-size: 1rem;
}
.quantum-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.4);
  border-radius: 999px; padding: .25rem .75rem;
  font-size: .75rem; color: var(--accent2); margin-top: .75rem;
}
.quantum-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent2); animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.5); }
}

.game-cards {
  display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center;
}
.game-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  padding: 1.3rem;
  width: 240px;
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  text-align: left;
}
.game-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--glow);
}
.game-card.game2:hover {
  border-color: var(--accent2);
  box-shadow: var(--glow2);
}
.card-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.card-desc { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.card-tag {
  display: inline-block; margin-top: 1rem;
  background: rgba(124,58,237,.2); color: var(--accent);
  font-size: .75rem; padding: .2rem .6rem; border-radius: 4px;
}
.game2 .card-tag { background: rgba(6,182,212,.2); color: var(--accent2); }
.game3:hover { border-color: var(--success); box-shadow: 0 0 20px rgba(34,197,94,.4); }
.game3 .card-tag { background: rgba(34,197,94,.2); color: var(--success); }
.game4:hover { border-color: var(--danger); box-shadow: 0 0 20px rgba(239,68,68,.4); }
.game4 .card-tag { background: rgba(239,68,68,.2); color: var(--danger); }
.game5:hover { border-color: #f59e0b; box-shadow: 0 0 20px rgba(245,158,11,.4); }
.game5 .card-tag { background: rgba(245,158,11,.2); color: #f59e0b; }
.game6:hover { border-color: #ec4899; box-shadow: 0 0 20px rgba(236,72,153,.4); }
.game6 .card-tag { background: rgba(236,72,153,.2); color: #ec4899; }
.game10:hover { border-color: var(--accent); box-shadow: var(--glow); }
.game10 .card-tag { background: rgba(124,58,237,.2); color: var(--accent); }

/* ── Delta E / JND game ── */
#g6-arena {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; position: relative; min-height: 400px;
  background: var(--surface); border-radius: 1.5rem;
}
#g6-color-strip {
  width: 100%; height: 220px; border-radius: 1rem; overflow: hidden;
  position: relative; cursor: crosshair; flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
#g6-left-half, #g6-right-half {
  position: absolute; top: 0; bottom: 0;
}
#g6-marker {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: rgba(255,255,255,.9); pointer-events: none;
  display: none; transform: translateX(-1.5px);
}
#g6-answer-line {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: rgba(255,255,255,.3); pointer-events: none;
  display: none; transform: translateX(-1.5px);
}
#g6-info {
  font-size: .9rem; color: var(--muted); text-align: center;
}
#g6-round-info {
  font-size: .85rem; color: var(--muted); text-align: center;
}
#g6-feedback {
  font-size: 1.1rem; font-weight: 700; min-height: 1.5rem; text-align: center;
}
.g6-start-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: var(--surface); border-radius: 1.5rem; text-align: center; padding: 2rem;
  z-index: 5;
}
.g6-score-bar {
  display: flex; gap: .4rem; justify-content: center;
}
.g6-pip {
  width: 6px; height: 12px; border-radius: 2px;
  background: var(--border); transition: background .15s;
  flex-shrink: 0;
}
.g6-pip.hit    { background: var(--success); }
.g6-pip.miss   { background: var(--danger); }
.g6-pip.active { background: #ec4899; }

/* ── Flash Number game ── */
#g5-arena {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; position: relative; overflow: hidden;
  min-height: 400px;
  background: var(--surface); border-radius: 1.5rem;
}
#g5-flash-number {
  font-size: clamp(4rem, 18vw, 10rem);
  font-weight: 900;
  color: #f59e0b;
  text-shadow: 0 0 40px rgba(245,158,11,.6);
  letter-spacing: -2px;
  user-select: none;
  transition: opacity .05s;
}
#g5-input {
  font-size: 2rem; font-weight: 700; text-align: center;
  background: var(--card); border: 2px solid var(--border);
  color: var(--text); border-radius: 12px; padding: .5rem 1.2rem;
  width: 200px; outline: none;
  transition: border-color .15s;
}
#g5-input:focus { border-color: #f59e0b; }
#g5-input.correct { border-color: var(--success); background: rgba(34,197,94,.1); }
#g5-input.wrong   { border-color: var(--danger);  background: rgba(239,68,68,.1); }
#g5-feedback {
  font-size: 1.1rem; font-weight: 700; min-height: 1.5rem; text-align: center;
}
#g5-round-info {
  font-size: .9rem; color: var(--muted); text-align: center;
}
.g5-start-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: var(--surface); border-radius: 1.5rem;
  text-align: center; padding: 2rem;
}
.g5-progress {
  display: flex; gap: .4rem; justify-content: center;
}
.g5-pip {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--border); transition: background .2s;
}
.g5-pip.correct { background: var(--success); }
.g5-pip.wrong   { background: var(--danger); }
.g5-pip.active  { background: #f59e0b; }

/* ══════════════════════════════════════
   SHARED GAME UI
══════════════════════════════════════ */
.game-screen { padding: 1.5rem; align-items: stretch; gap: 1rem; }
.top-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.btn-back {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); padding: .4rem .9rem; border-radius: 8px;
  cursor: pointer; font-size: .875rem; transition: all .15s;
}
.btn-back:hover { border-color: var(--text); color: var(--text); }
.game-title { font-weight: 700; font-size: 1.1rem; flex: 1; }
.score-badge {
  background: var(--card); border: 1px solid var(--border);
  padding: .3rem .8rem; border-radius: 8px; font-size: .875rem;
}
.score-badge span { color: var(--accent); font-weight: 700; }

.entropy-indicator {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; color: var(--muted); margin-left: auto;
}
.entropy-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); transition: background .3s;
}
.entropy-dot.live { background: var(--success); animation: pulse 1.5s infinite; }

/* ══════════════════════════════════════
   GAME 1 — EQUATION BUILDER
══════════════════════════════════════ */
#game1 .arena {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem; padding: 1rem 0;
}
.target-display {
  text-align: center;
}
.target-label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.target-number {
  font-size: clamp(3rem, 10vw, 6rem); font-weight: 900;
  background: linear-gradient(135deg, var(--accent3), #f97316);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.eq-drop-zone {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; justify-content: center;
  min-height: 70px; min-width: 280px;
  background: rgba(255,255,255,.03);
  border: 2px dashed var(--border);
  border-radius: 1rem; padding: 1rem 1.5rem;
  transition: border-color .2s;
}
.eq-drop-zone.drag-over { border-color: var(--accent); }
.eq-drop-zone .placeholder-text {
  color: var(--muted); font-size: .875rem; pointer-events: none;
}
.tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 10px;
  font-size: 1.25rem; font-weight: 700;
  cursor: grab; user-select: none;
  transition: transform .1s, box-shadow .1s;
  position: relative;
}
.tile:active { cursor: grabbing; transform: scale(1.1); }
.tile.num-tile {
  background: var(--card); border: 2px solid var(--accent);
  color: var(--text); box-shadow: 0 0 8px rgba(124,58,237,.3);
}
.tile.op-tile {
  background: var(--card); border: 2px solid var(--accent2);
  color: var(--accent2); box-shadow: 0 0 8px rgba(6,182,212,.3);
}
.tile.in-zone {
  position: relative;
}
.tile .remove-btn {
  display: none; position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 10px; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
}
.tile.in-zone:hover .remove-btn { display: flex; }

.tile-palette {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  max-width: 500px;
}

.eq-result {
  font-size: 1.1rem; min-height: 1.5rem; font-weight: 600;
}
.eq-result.correct { color: var(--success); }
.eq-result.wrong { color: var(--danger); }
.eq-result.info { color: var(--accent2); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  color: #fff; border: none; padding: .65rem 2rem;
  border-radius: 10px; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 15px rgba(124,58,237,.4);
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary.cyan {
  background: linear-gradient(135deg, var(--accent2), #0284c7);
  box-shadow: 0 4px 15px rgba(6,182,212,.4);
}

/* The card is centred, and used to be centred with no way to scroll — so on
   a phone in landscape, where the viewport is about 390px tall and the card
   is taller than that, the buttons at the bottom were simply off screen and
   Retry could not be tapped at all. Scrolling makes them reachable whatever
   the card ends up being; the compact sizing further down means you rarely
   have to scroll in the first place. */
.game-over-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.85); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
  overflow-y: auto; padding: 1rem;
}
.game-over-overlay.show { display: flex; }
.game-over-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 1.5rem; padding: 2.5rem; text-align: center;
  max-width: 380px; width: 90%;
}
.game-over-card h2 { font-size: 2rem; margin-bottom: .5rem; }
.game-over-card .final-score { font-size: 3rem; font-weight: 900; color: var(--accent); margin: 1rem 0; }
.game-over-card p { color: var(--muted); margin-bottom: 1.5rem; }

/* rounds */
.round-info {
  display: flex; gap: 1.5rem; align-items: center;
}
.round-badge {
  background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.3);
  border-radius: 8px; padding: .3rem .8rem; font-size: .8rem;
}
.lives {
  display: flex; gap: 4px;
}
.heart { font-size: 1.1rem; }

/* timer bar */
.timer-bar-wrap {
  width: 100%; max-width: 400px;
  height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.timer-bar {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .1s linear, background .3s;
}

/* ══════════════════════════════════════
   GAME 2 — AIM TRAINER
══════════════════════════════════════ */
#game2 .arena {
  flex: 1; position: relative;
  background: radial-gradient(ellipse at center, #0d0d22 0%, #050510 100%);
  border: 1px solid var(--border);
  border-radius: 1.25rem; overflow: hidden;
  min-height: 400px; cursor: crosshair;
}
.aim-start-msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  font-size: 1.1rem; color: var(--muted);
}
.target-circle {
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  animation: targetPop .15s ease-out;
  transition: box-shadow .1s;
}
@keyframes targetPop {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.target-circle:hover { box-shadow: 0 0 20px 4px rgba(255,255,255,.3); }
.target-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  animation: ringPulse 1s ease-out infinite;
}
@keyframes ringPulse {
  from { transform: scale(1); opacity: .6; }
  to   { transform: scale(1.3); opacity: 0; }
}

.aim-stats {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}
.stat-pill {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: .3rem .8rem;
  font-size: .8rem; color: var(--muted);
}
.stat-pill strong { color: var(--text); }
.miss-dots { display: flex; gap: 4px; align-items: center; }
.miss-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); transition: background .2s;
}
.miss-dot.filled { background: var(--danger); }

/* ripple on click miss */
.ripple {
  position: absolute; border-radius: 50%;
  width: 30px; height: 30px;
  border: 2px solid var(--danger);
  transform: translate(-50%, -50%) scale(0);
  animation: rippleAnim .5s ease-out forwards;
  pointer-events: none; z-index: 10;
}
@keyframes rippleAnim {
  to { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* combo popup */
.combo-popup {
  position: absolute; pointer-events: none;
  font-weight: 900; font-size: 1.5rem;
  color: var(--accent3);
  text-shadow: 0 0 10px rgba(245,158,11,.6);
  animation: floatUp .8s ease-out forwards;
  z-index: 20;
}
@keyframes floatUp {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-60px) scale(1.4); }
}

/* loading */
.loading-msg {
  display: flex; align-items: center; gap: .5rem;
  color: var(--muted); font-size: .875rem;
}
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Leaderboard rows (floating panel) ── */
.lb-list { display: flex; flex-direction: column; gap: .4rem; }
.lb-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: 8px;
  background: rgba(255,255,255,.03);
  font-size: .875rem;
}
.lb-rank { width: 24px; text-align: center; color: var(--muted); font-weight: 700; font-size: .8rem; }
.lb-rank.gold { color: #f59e0b; }
.lb-rank.silver { color: #94a3b8; }
.lb-rank.bronze { color: #cd7c3a; }
.lb-name { flex: 1; font-weight: 600; }
.lb-score { color: var(--accent); font-weight: 700; }
.lb-score.cyan { color: var(--accent2); }
.lb-empty { color: var(--muted); font-size: .875rem; text-align: center; padding: 1rem 0; }
.lb-loading { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .8rem; justify-content: center; padding: .5rem 0; }

/* ── Trackmania-style medals ── */
.medal {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 700; padding: .15rem .45rem;
  border-radius: 4px; vertical-align: middle; letter-spacing: .3px;
  text-transform: uppercase;
}
.medal-bronze  { background: rgba(180,100,40,.25);  color: #cd7c3a; border: 1px solid rgba(180,100,40,.4); }
.medal-silver  { background: rgba(148,163,184,.2);  color: #94a3b8; border: 1px solid rgba(148,163,184,.4); }
.medal-gold    { background: rgba(245,158,11,.2);   color: #f59e0b; border: 1px solid rgba(245,158,11,.4); }
.medal-author   { background: rgba(124,58,237,.25);  color: #a78bfa; border: 1px solid rgba(124,58,237,.5);
                  box-shadow: 0 0 8px rgba(124,58,237,.3); }
.medal-coauthor { background: rgba(251,191,36,.2);   color: #fbbf24; border: 1px solid rgba(251,191,36,.5);
                  box-shadow: 0 0 8px rgba(251,191,36,.25); }
.medal-author-badge {
  background: linear-gradient(135deg,rgba(124,58,237,.3),rgba(6,182,212,.2));
  color: #c4b5fd; border: 1px solid rgba(124,58,237,.6);
  box-shadow: 0 0 10px rgba(124,58,237,.4);
}

/* game-over medal display */
.medal-earned {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .75rem 1.25rem; border-radius: 1rem; margin: .5rem auto;
  width: fit-content;
}
.medal-earned .medal-icon { font-size: 2.5rem; line-height: 1; }
.medal-earned .medal-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* ── Auth header ── */
.auth-header-wrap {
  position: fixed; top: 1rem; right: 1rem; z-index: 100;
  display: flex; align-items: center; gap: .6rem;
}
.auth-small-btn {
  background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.5);
  color: #a78bfa; padding: .35rem .85rem; border-radius: 8px;
  font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.auth-small-btn:hover { background: rgba(124,58,237,.35); }
.auth-username {
  font-size: .82rem; color: var(--accent); font-weight: 600;
}

/* ── Auth login page ── */
#login-screen {
  align-items: center; justify-content: center; padding: 2rem;
}
.login-page {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; width: 100%; max-width: 420px;
}
.login-logo { text-align: center; }
.login-logo-icon { font-size: 3rem; line-height: 1; margin-bottom: .5rem; }
.login-logo h2 {
  font-size: 1.8rem; font-weight: 800; margin: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.login-logo p { color: var(--muted); font-size: .88rem; margin: .4rem 0 0; }
.login-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 1.5rem; padding: 1.75rem; width: 100%;
  display: flex; flex-direction: column; gap: 0;
}
.guest-info { text-align: center; display: flex; flex-direction: column; gap: .5rem; }
.guest-icon { font-size: 2.5rem; }
.guest-info p { color: var(--muted); font-size: .88rem; margin: 0; }
.guest-warn  { color: #f59e0b !important; font-size: .8rem !important; }
.auth-tabs {
  display: flex; gap: .4rem; margin-bottom: 1.25rem;
  background: var(--surface); border-radius: 10px; padding: .25rem;
}
.auth-tab-btn {
  flex: 1; background: none; border: none; color: var(--muted);
  padding: .4rem; border-radius: 8px; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .15s; text-transform: uppercase; letter-spacing: .3px;
}
.auth-tab-btn.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.auth-tab-content {
  display: flex; flex-direction: column; gap: .65rem;
}
.auth-tab-content input {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: .6rem .9rem; border-radius: 10px;
  font-size: .9rem; outline: none;
}
.auth-tab-content input:focus { border-color: var(--accent); }
.auth-status {
  font-size: .8rem; min-height: 1rem; color: var(--muted); text-align: center;
}
.auth-divider {
  display: flex; align-items: center; gap: .75rem;
  color: var(--muted); font-size: .75rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: .6rem 1rem; border-radius: 10px;
  font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-google:hover { background: rgba(255,255,255,.07); }

/* ── Submit score modal ── */
.submit-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.85); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.submit-overlay.show { display: flex; }
.submit-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 1.5rem; padding: 2rem; text-align: center;
  max-width: 340px; width: 90%; display: flex; flex-direction: column; gap: .75rem;
}
.submit-card h3 { font-size: 1.25rem; font-weight: 700; }
.submit-card .sub-score { font-size: 2.5rem; font-weight: 900; color: var(--accent); }
.submit-card input {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: .65rem 1rem; border-radius: 10px;
  font-size: 1rem; outline: none; text-align: center;
  transition: border-color .15s;
}
.submit-card input:focus { border-color: var(--accent); }
.submit-card .sub-row { display: flex; gap: .5rem; }
.submit-card .sub-row button { flex: 1; }

/* ══════════════════════════════════════
   GAME 3 — REACTION TEST
══════════════════════════════════════ */
#game3 .arena {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  border-radius: 1.25rem; overflow: hidden; min-height: 400px;
  cursor: pointer; user-select: none;
  transition: background .1s;
}
#game3 .arena.state-wait   { background: radial-gradient(ellipse at center, #0d0d22, #050510); }
#game3 .arena.state-ready  { background: radial-gradient(ellipse at center, #14290f, #050510); }
#game3 .arena.state-flash  { background: radial-gradient(ellipse at center, #22c55e 0%, #166534 60%, #050510 100%); }
#game3 .arena.state-result { background: radial-gradient(ellipse at center, #0d0d22, #050510); }
#game3 .arena.state-early  { background: radial-gradient(ellipse at center, #450a0a, #050510); }

.react-msg {
  font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 800;
  text-align: center; pointer-events: none; line-height: 1.3;
}
.react-sub {
  color: var(--muted); font-size: 1rem; text-align: center; pointer-events: none;
}
.react-time {
  font-size: clamp(3rem, 10vw, 6rem); font-weight: 900;
  background: linear-gradient(135deg, var(--success), #86efac);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1; pointer-events: none;
}
.react-rounds {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
}
.react-round-dot {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: .7rem; font-weight: 700; color: var(--muted);
}
.react-round-dot.done { background: rgba(34,197,94,.2); border-color: var(--success); color: var(--success); }
.react-round-dot.early { background: rgba(239,68,68,.2); border-color: var(--danger); color: var(--danger); }
.react-round-dot.active { border-color: var(--accent2); animation: pulse 1s infinite; }

/* ══════════════════════════════════════
   GAME 4 — QUANTUM DODGE
══════════════════════════════════════ */
#game4 .arena {
  flex: 1; position: relative;
  background: radial-gradient(ellipse at center, #0d0d22 0%, #050510 100%);
  border: 1px solid var(--border);
  border-radius: 1.25rem; overflow: hidden;
  min-height: 450px;
}
#dodge-player {
  position: absolute;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a78bfa, #7c3aed);
  box-shadow: 0 0 16px rgba(124,58,237,.8);
  left: 0; top: 0;
  pointer-events: none; z-index: 5;
  will-change: transform;
}
.dodge-obstacle {
  position: absolute;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none; z-index: 3;
}
#dodge-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: rgba(0,0,0,.7); z-index: 10; border-radius: 1.25rem;
}
#dodge-overlay h3 { font-size: 1.5rem; font-weight: 800; }
.dodge-survive-time {
  font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 900;
  background: linear-gradient(135deg, var(--danger), #f97316);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1;
}
#dodge-timer-display {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: .8rem; color: var(--muted); pointer-events: none; z-index: 6;
}

/* ══════════════════════════════════════
   GAME 10 — CANVAS GAMES
══════════════════════════════════════ */
.canvas-arena {
  flex: 1; position: relative;
  background: radial-gradient(ellipse at center, #0d0d22 0%, #050510 100%);
  border: 1px solid var(--border);
  border-radius: 1.25rem; overflow: hidden;
  min-height: 450px;
}
.canvas-arena canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.canvas-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: rgba(0,0,0,.7); z-index: 10; border-radius: 1.25rem;
  /* Overlays taller than the arena (the practice picker especially) were
     clipped at both ends with no way to reach the bottom. `safe center`
     stops centring once content overflows so scrolling can reach it;
     browsers without it fall back to the plain center above. */
  overflow-y: auto;
  justify-content: safe center;
  padding: 1rem 0.5rem;
}
.canvas-overlay h3 { font-size: 1.5rem; font-weight: 800; }
.canvas-timer {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: .8rem; color: var(--muted); pointer-events: none; z-index: 6;
}

/* ── Game 10 pause shop ── */
.g10-pu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem;
}
.g10-pu-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem;
}
.g10-pu-card.maxed { opacity: .5; }
.g10-pu-top { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.g10-pu-name { font-weight: 700; font-size: .82rem; color: #fff; }
.g10-pu-lvl  { font-size: .68rem; color: var(--muted); margin-left: auto; }
.g10-pu-desc { font-size: .75rem; color: var(--muted); flex: 1; }
.g10-pu-btn  { font-size: .78rem !important; padding: .3rem .5rem !important; margin-top: auto; }
.g10-settings-row {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  margin-top: .6rem; flex-wrap: wrap;
}
.g10-setting-btn {
  padding: .25rem .7rem; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer; font-size: .8rem;
}
.g10-setting-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ══════════════════════════════════════
   GAME 11 — QUANTUM TYPE
══════════════════════════════════════ */
.game11 { border-color: #34d399; }
.game11 .card-tag { background: rgba(52,211,153,.15); color: #34d399; border-color: rgba(52,211,153,.3); }

.g11-word {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text);
  min-height: 1.2em;
  text-align: center;
}
.g11-typed {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  min-height: 1.2em;
  text-align: center;
}
.g11-typed .hit  { color: #fff; }
.g11-typed .miss { color: var(--danger); text-decoration: underline; }
.g11-typed .cur-pipe { color: #34d399; animation: g11blink .7s step-end infinite; }
@keyframes g11blink { 50% { opacity: 0; } }
.g11-input {
  opacity: 0; position: absolute; width: 1px; height: 1px;
}
.g11-feedback {
  font-size: 1.1rem; color: var(--muted); min-height: 1.5rem; text-align: center;
}

/* responsive */
/* Phones: the home screen works like a phone's own — a grid of app
   icons with a name under each, and one tap opens the game. The
   description and tag are left out; the game's start screen has them. */
@media (max-width: 600px) {
  #home { gap: 1.4rem; padding: 3.6rem .75rem 5rem; }
  .game-cards {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem .4rem; width: 100%; max-width: 420px; margin: 0 auto;
  }
  /* The card itself disappears; only the icon tile and its name remain */
  .game-card, .stall-mode .game-card {
    width: auto; max-width: none; padding: 0; margin: 0;
    background: none !important;
    box-shadow: none !important; clip-path: none; overflow: visible;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-align: center; -webkit-tap-highlight-color: transparent;
    border-width: 0;
  }
  .stall-mode .game-card::before { display: none; }
  .game-card:hover, .stall-mode .game-card:hover { transform: none; }
  .game-card .card-icon {
    width: 62px; height: 62px; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; line-height: 1;
    border-radius: 16px;
    background:
      linear-gradient(160deg, rgba(255,255,255,.08) 0%, transparent 55%),
      var(--card);
    /* The card's own tint (set inline on most cards) edges the tile */
    border: 1px solid; border-color: inherit;
    box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 14px rgba(124,58,237,.12);
    transition: transform .12s;
  }
  .game-card:active .card-icon { transform: scale(.9); }
  .game-card .card-title {
    /* Orbitron is too wide for two lines under a phone icon tile */
    font-family: var(--font-body);
    font-size: .7rem; font-weight: 600; line-height: 1.2; margin: 0;
    max-width: 100%; padding: 0 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--text);
  }
  .game-card .card-desc, .game-card .card-tag, .game-card .stall-how { display: none; }
  /* Sits above the title instead of on top of it */
  .auth-header-wrap { position: absolute; top: .75rem; right: .75rem; }
}
/* Light pages: a softer shadow under the icon tiles */
@media (max-width: 600px) {
  :root[data-theme="light"] .game-card .card-icon {
    box-shadow: 0 3px 10px rgba(20,21,43,.12);
  }
}

/* ══════════════════════════════════════
   GAMES 12-15 SHARED STYLES
══════════════════════════════════════ */
.game12:hover { border-color: #818cf8; box-shadow: 0 0 20px rgba(129,140,248,.4); }
.game12 .card-tag { background: rgba(129,140,248,.2); color: #818cf8; }
.game13:hover { border-color: #22d3ee; box-shadow: 0 0 20px rgba(34,211,238,.4); }
.game13 .card-tag { background: rgba(34,211,238,.2); color: #22d3ee; }
.game14:hover { border-color: #c084fc; box-shadow: 0 0 20px rgba(192,132,252,.4); }
.game14 .card-tag { background: rgba(192,132,252,.2); color: #c084fc; }
.game15:hover { border-color: #f472b6; box-shadow: 0 0 20px rgba(244,114,182,.4); }
.game15 .card-tag { background: rgba(244,114,182,.2); color: #f472b6; }

/* Powerup item rows (shared across games 12-15) */
[class$="-pu-item"] {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-radius: 8px;
  padding: .5rem .75rem; font-size: .85rem; flex-wrap: wrap;
}

/* Wave Collapse grid */
.g14-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.g14-cell {
  width: 64px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #374151; border-radius: 8px;
  font-size: .85rem; font-weight: 700; font-family: var(--font-mono);
  background: rgba(255,255,255,.03);
  cursor: default; transition: border-color .1s, background .1s;
  user-select: none;
}
.g14-target-cell { opacity: 0.75; }

/* ══════════════════════════════════════
   GAME 16 — QUANTUM CLICKER
══════════════════════════════════════ */
.game16:hover { border-color: #fbbf24; box-shadow: 0 0 20px rgba(251,191,36,.4); }
.game16 .card-tag { background: rgba(251,191,36,.15); color: #fbbf24; }

.g16-click-btn {
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #312e81, #1e1b4b);
  border: 3px solid #6366f1;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: transform .08s, box-shadow .08s;
  box-shadow: 0 0 30px rgba(99,102,241,.3);
  color: var(--text);
}
.g16-click-btn:hover { transform: scale(1.05); box-shadow: 0 0 50px rgba(99,102,241,.6); }
.g16-click-btn:active { transform: scale(0.96); }

.g16-click-pop {
  position: absolute; pointer-events: none;
  font-size: .85rem; font-weight: 700; color: #fbbf24;
  animation: g16pop .9s ease-out forwards;
  white-space: nowrap; z-index: 10;
}
@keyframes g16pop {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-55px); }
}
@keyframes g16spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.g16-tab-btn {
  flex: 1; padding: .6rem; background: transparent; border: none;
  border-bottom: 2px solid transparent; color: var(--muted);
  cursor: pointer; font-size: .85rem; transition: color .15s, border-color .15s;
}
.g16-tab-btn:hover { color: var(--text); }
.g16-tab-btn.active { color: #fbbf24; border-bottom-color: #fbbf24; }

.g16-shop-item {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .8rem;
  transition: background .15s, border-color .15s;
}
.g16-shop-item:hover { background: rgba(255,255,255,.06); border-color: #fbbf2488; }
.g16-shop-item.g16-locked { opacity: .45; }
.g16-item-icon { font-size: 1.6rem; flex-shrink: 0; }
.g16-item-info { flex: 1; min-width: 0; }
.g16-item-name { font-weight: 700; font-size: .88rem; }
.g16-item-desc { color: var(--muted); font-size: .77rem; margin-top: .15rem; }
.g16-buy-btn { flex-shrink: 0; font-size: .78rem; padding: .3rem .7rem; }
.g16-stat-row {
  display: flex; justify-content: space-between; padding: .3rem 0;
  border-bottom: 1px solid var(--border); font-size: .85rem;
}

/* ══════════════════════════════════
   LEVEL EDITOR (admin only)
══════════════════════════════════ */
#editor.screen.active { padding: 1.5rem; gap: .8rem; }
.ed-msg { font-size: .8rem; color: var(--accent2); margin-left: auto; }

.ed-gametabs { display: flex; gap: .5rem; }
.ed-gametab {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  padding: .4rem .9rem; border-radius: 8px; cursor: pointer; font-size: .85rem;
  font-family: inherit;
}
.ed-gametab.active { border-color: var(--accent); color: var(--text); background: rgba(124,58,237,.18); }

.ed-layout { display: flex; gap: 1rem; flex: 1; min-height: 0; }
.ed-side {
  width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: .4rem;
  overflow-y: auto;
}
.ed-side-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-top: .5rem;
}
.ed-list { display: flex; flex-direction: column; gap: .25rem; }
.ed-item {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .5rem; font-size: .82rem;
}
.ed-item:hover  { border-color: var(--muted); }
.ed-item.active { border-color: var(--accent); background: rgba(124,58,237,.15); }
.ed-item-diff { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ed-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pub-dot { color: var(--success); font-size: .7rem; }
.ed-empty { color: var(--muted); font-size: .78rem; padding: .4rem; }

.ed-props { display: flex; flex-direction: column; gap: .45rem; }
.ed-props label {
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.ed-props input, .ed-props select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: .35rem .5rem; font-size: .85rem; font-family: inherit;
  text-transform: none; letter-spacing: 0;
}
.ed-props input:focus, .ed-props select:focus { border-color: var(--accent); outline: none; }
.ed-hint { text-transform: none; letter-spacing: 0; opacity: .6; }

.ed-main { flex: 1; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.ed-canvas-wrap {
  flex: 1; min-height: 240px; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: #05010a;
}
.ed-canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.ed-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.ed-actions .btn-primary { font-size: .78rem; padding: .4rem .8rem; }
.btn-primary.ghost {
  background: var(--card); color: var(--muted);
  border: 1px solid var(--border); box-shadow: none;
}
.btn-primary.danger { background: rgba(239,68,68,.15); color: var(--danger); border-color: rgba(239,68,68,.4); }
.ed-mini {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  border-radius: 5px; padding: .15rem .45rem; font-size: .7rem; cursor: pointer;
  font-family: inherit;
}
.ed-mini:hover { color: var(--text); border-color: var(--muted); }
.ed-mini.danger { color: var(--danger); border-color: rgba(239,68,68,.35); }
.ed-help { font-size: .72rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 760px) {
  .ed-layout { flex-direction: column; }
  .ed-side { width: 100%; max-height: 220px; }
}

/* Editor — tuning controls & badges */
.ed-sep {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-top: .6rem; padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.ed-props input[type=range] {
  padding: 0; height: 20px; accent-color: var(--accent); border: none; background: none;
}
.ed-rank {
  font-size: .68rem; font-weight: 700; opacity: .85;
  min-width: 20px; text-align: right; flex-shrink: 0;
}
.ed-ovr {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(6,182,212,.18); color: var(--accent2);
  border-radius: 4px; padding: .05rem .3rem; flex-shrink: 0;
}

/* Practice level picker — generated from the game pools */
.practice-picker { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.pp-row { display: flex; align-items: flex-start; gap: .4rem; }
.pp-tier {
  flex-shrink: 0; width: 58px; text-align: right; padding-top: .25rem;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.pp-levels { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.pp-btn {
  font-size: .68rem; padding: .22rem .5rem; border-radius: 5px;
  border: 1px solid; background: transparent; cursor: pointer;
  font-family: inherit; line-height: 1.3;
}
.pp-btn:hover { filter: brightness(1.35); }
.pp-btn.pp-any { font-weight: 700; }

/* Editor — checkbox row (deco motion preview) */
.ed-check {
  flex-direction: row !important; align-items: center; gap: .4rem;
  text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer; font-size: .74rem;
}
.ed-check input { width: auto; accent-color: var(--accent); }

/* Editor — submit panel */
.ed-modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.72); align-items: center; justify-content: center; padding: 1rem;
}
.ed-modal-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.1rem 1.2rem; max-width: 560px; width: 100%;
  max-height: 88vh; overflow-y: auto;
}
.ed-modal-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.ed-modal-line { font-size: .8rem; color: var(--muted); margin: .2rem 0; line-height: 1.5; }
.ed-modal-note { font-size: .84rem; margin: .7rem 0 .5rem; line-height: 1.55; }
.ed-modal-json {
  width: 100%; height: 170px; resize: vertical; font-family: var(--font-mono); font-size: .7rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem;
}
.ed-modal-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.ed-modal-row .btn-primary { font-size: .78rem; padding: .38rem .8rem; }
.ed-modal-fields { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.ed-modal-fields input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: .35rem .5rem; font-size: .8rem; font-family: inherit;
}
.ed-modal-fields input:focus { border-color: var(--accent); outline: none; }

/* Practice noclip toggle */
.pp-toggle {
  width: 100%; text-align: center; font-size: .72rem; padding: .3rem .5rem;
  border-radius: 6px; cursor: pointer; font-family: inherit; margin-bottom: .15rem;
  border: 1px solid rgba(148,163,184,.35); background: rgba(148,163,184,.1); color: var(--muted);
}
.pp-toggle.on { border-color: #38bdf8; color: #38bdf8; background: rgba(56,189,248,.14); }
.pp-toggle:hover { filter: brightness(1.25); }

/* Practice clear card — the whole run as one picture */
.trail-card {
  display: none; position: absolute; inset: 0; z-index: 20;
  background: rgba(0,0,0,.82); align-items: center; justify-content: center;
  padding: 1rem; border-radius: 1.25rem;
}
.trail-card-inner {
  max-width: 100%; max-height: 100%; display: flex; flex-direction: column;
  align-items: center; gap: .7rem;
}
.trail-card img {
  max-width: 100%; max-height: 70vh; object-fit: contain;
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.trail-card-row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.trail-card-row .btn-primary { font-size: .8rem; padding: .4rem .9rem; }

/* ══════════════════════════════════
   BETA SITE
══════════════════════════════════ */
#beta-banner {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap; padding: .45rem .8rem;
  background: rgba(251,146,60,.14);
  border-bottom: 1px solid rgba(251,146,60,.35);
  font-size: .78rem; color: #fdba74;
}
#beta-banner button {
  background: transparent; border: 1px solid rgba(251,146,60,.45);
  color: #fdba74; border-radius: 6px; padding: .2rem .5rem;
  font-size: .72rem; cursor: pointer; font-family: inherit;
}
#beta-banner button:hover { background: rgba(251,146,60,.18); }
.beta-chip {
  background: #fb923c; color: #2b1400; font-weight: 800;
  font-size: .64rem; letter-spacing: .08em;
  border-radius: 4px; padding: .1rem .35rem;
}
.game-card { position: relative; }
.beta-flag {
  position: absolute; top: .6rem; right: .6rem;
  background: rgba(251,146,60,.9); color: #2b1400;
  font-size: .58rem; font-weight: 800; letter-spacing: .07em;
  border-radius: 4px; padding: .1rem .3rem;
}
.pp-toggle.bot { border-color: #a78bfa; color: #a78bfa; background: rgba(167,139,250,.14); }

/* ═══════════════════════════════════════════════════════
   GAME 47 — BELL TEST (CHSH)
   Two players, one bit each per round. No canvas: the whole
   screen is a prompt and two big buttons, because at a stand
   this is tapped by people standing up and passing a phone.
   ═══════════════════════════════════════════════════════ */
.g47-start, .g47-play {
  max-width: 560px; margin: 1.4rem auto; padding: 0 1rem; text-align: center;
}
.g47-brief { font-size: .86rem; color: var(--muted); line-height: 1.55; margin: 0 0 1.2rem }
.g47-brief b { color: var(--text) }
.g47-foot {
  font-size: .78rem; color: var(--muted); line-height: 1.5;
  margin: 1.1rem auto 0; max-width: 420px;
}
.g47-foot b { color: var(--text) }
.g47-modes { display: flex; flex-direction: column; gap: .55rem; align-items: stretch }
#g47-match-status { font-size: .8rem; color: var(--muted); margin-top: .6rem; min-height: 1.2em }

.g47-roundline {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.g47-whose {
  font-size: .92rem; font-weight: 800; letter-spacing: .04em;
  color: #38bdf8; margin: .5rem 0 1.2rem; min-height: 2.6em;
}
.g47-bit { font-size: 1.05rem; color: var(--muted); min-height: 3rem }
.g47-bit b {
  display: inline-block; min-width: 2.4rem; margin-left: .5rem;
  font-size: 2.4rem; font-weight: 800; color: #38bdf8; vertical-align: middle;
}
.g47-choices { display: flex; gap: 1.1rem; justify-content: center; margin: .6rem 0 1.1rem }
.g47-choice {
  width: 112px; height: 92px; font-size: 2.3rem; font-weight: 800;
  border-radius: .9rem; cursor: pointer; font-family: inherit;
  background: var(--card); color: var(--text); border: 2px solid var(--border);
  transition: transform .1s, border-color .15s;
}
.g47-choice:hover:not(:disabled) { border-color: #38bdf8; transform: translateY(-2px) }
.g47-choice:active:not(:disabled) { transform: translateY(1px) }
.g47-choice:disabled { opacity: .32; cursor: default }
.g47-reveal { font-size: .88rem; font-weight: 700; min-height: 1.5em }

.g47-handoff p { font-size: 1.05rem; margin: .3rem 0 }
.g47-handoff .g47-sub { font-size: .8rem; color: var(--muted); margin-bottom: 1.2rem }

@media (max-width: 420px) {
  .g47-choice { width: 92px; height: 80px; font-size: 2rem }
}

/* ═══════════════════════════════════════════════════════
   GAME 48 — ENTANGLED GAUNTLET
   Moved here from the standalone ascent.html so the game is a
   normal .screen section like the other 47. That is what gives it
   the leaderboard, the submit modal, sign-in, the /stall allowlist
   and the light theme without any of it being duplicated.

   The page-level rules the standalone version needed (body height,
   a full-viewport flex column) are gone: .game-screen already
   provides the frame.
   ═══════════════════════════════════════════════════════ */
/* The arena is the shared .canvas-arena every other game uses, so it
   stretches to fill the screen and carries the same background and
   border. The only thing this game adds is swallowing touch gestures,
   because you steer by dragging inside it. */
#ga-arena { touch-action: none }
#ga-score-label { color: inherit; font-weight: 400 }
.ga-howto { color: var(--muted); font-size: .84rem; text-align: center; max-width: 560px; line-height: 1.5 }
.ga-break-btn { font-size: .8rem; padding: .35rem .8rem }
.ga-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center }
.ga-row small { color: var(--muted) }
.ga-sub { width: 100%; text-align: center; color: var(--muted); font-size: .76rem; margin-bottom: .2rem }
.ga-sub a { color: var(--accent2) }
#ga-custom { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; width: min(640px, 92%) }
.ga-chip {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: .25rem .6rem; font-size: .76rem; cursor: pointer; font-family: inherit;
}
.ga-chip:hover { border-color: var(--accent2) }
.ga-practice-wrap {
  margin-top: .6rem; border-top: 1px solid rgba(167,139,250,.2); padding-top: .9rem;
  width: 100%; max-width: min(620px, 94%); text-align: center;
}
.ga-practice-wrap > p { font-size: .76rem; color: var(--muted); margin-bottom: .55rem }
.ga-chip.on { border-color: #a78bfa; color: #a78bfa; background: rgba(167,139,250,.14) }
.ga-diff {
  font-style: normal; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid; border-radius: 4px; padding: .05rem .3rem; white-space: nowrap;
}
.ga-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem }
.ga-ghost { background: var(--card) !important; color: var(--muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important }

/* Quantum Tunnel: Levels and Endless side by side, the same shape as
   Entangled Gauntlet's pair. */
.g40-modes { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center }
.g40-ghost { background: var(--card) !important; color: var(--muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important }
/* ── Leaderboard: rank by name or by account ── */
.lb-view-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.lb-view-btn {
  background: transparent; border: 0; color: var(--muted);
  padding: .2rem .6rem; font-size: .72rem; cursor: pointer; font-family: inherit;
}
.lb-view-btn + .lb-view-btn { border-left: 1px solid var(--border); }
.lb-view-btn.active { background: var(--accent); color: #fff; }
.lb-alias {
  font-size: .72rem; font-weight: 500; color: var(--muted); margin-left: .2rem;
}

/* Names this account has posted under, in the submit modal */
.sub-name-chips { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.sub-name-chips:empty { display: none; }
.sub-name-chip {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; cursor: pointer; font-family: inherit;
}
.sub-name-chip:hover { border-color: var(--accent); color: var(--text); }

/* ── Floating leaderboard, bottom-left (the theme toggle owns bottom-right) ── */
#qg-lb-btn {
  position: fixed; left: 14px; bottom: 14px; z-index: 80;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: transform .15s;
  font-family: inherit;
}
#qg-lb-btn:hover { transform: translateY(-2px) scale(1.06); }
#qg-lb-btn[aria-expanded="true"] { border-color: var(--accent); }
#qg-lb-panel {
  position: fixed; left: 14px; bottom: 66px; z-index: 90;
  width: min(380px, calc(100vw - 28px)); max-height: min(70vh, 560px);
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
#qg-lb-panel[hidden] { display: none; }
/* Docked on the home screen, in the old leaderboard's place */
#qg-lb-slot { width: 100%; max-width: 700px; }
#qg-lb-slot:empty { display: none; }
#qg-lb-panel.qg-lb-docked {
  position: static; width: 100%; max-height: none;
  border-radius: 1.25rem; padding: 1.5rem; box-shadow: none;
  scroll-margin-top: 1rem; text-align: left;
}
.qg-lb-head { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; }
.qg-lb-close {
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .95rem; padding: .2rem .4rem;
}
.qg-lb-close:hover { color: var(--text); }
.qg-lb-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
#qg-lb-game {
  flex: 1; min-width: 0; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: .3rem .4rem; font-family: inherit; font-size: .8rem;
}
#qg-lb-list { overflow-y: auto; min-height: 0; }
#qg-lb-list .lb-row { gap: .5rem; padding: .45rem .6rem; font-size: .82rem; }
/* The big earned-medal tile repeats the small AUTHOR / CO-AUTHOR tag and
   does not fit a panel this narrow */
#qg-lb-list .medal-earned { display: none; }

/* Names view: jump from a name to the account that posted it */
.lb-acct-slot { flex: 0 0 5.6rem; display: flex; justify-content: flex-end; min-width: 0; }
.lb-acct-link {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem; font-weight: 600; text-decoration: none;
  color: var(--accent2); border: 1px solid var(--border); border-radius: 999px;
  padding: .15rem .55rem;
}
.lb-acct-link:hover { border-color: var(--accent2); background: rgba(6,182,212,.08); }
.qg-lb-status { font-size: .76rem; min-height: 0; }
.qg-lb-status:empty { display: none; }
.lb-row-focus { outline: 2px solid var(--accent2); outline-offset: -2px; animation: lb-focus 1.6s ease-out; }
@keyframes lb-focus { from { background: rgba(6,182,212,.25); } }

/* ══════════════════════════════════════
   TOUCH CONTROLS — js/touchpad.js
   On touch screens the keyboard-only games are played by touching the
   game itself. This slim bar under them says how, and holds the few
   game actions that are not a place on the screen (pause, the gates).
   Type Racer gets a typing field here instead.
══════════════════════════════════════ */
#tp-pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem max(.8rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
  background: linear-gradient(0deg, rgba(7,6,26,.94) 60%, rgba(7,6,26,0));
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.tp-hint {
  flex: 1; min-width: 0;
  font-size: .76rem; line-height: 1.35; color: #a9b1d6;
}
/* Room for the bar, so it never sits over the arena. Keyed off markup
   that is there before the game starts, not off the bar itself, so the
   arena is already its final size when the game measures its canvas. */
body.tp-touch .game-screen.active[data-tp="bar"]  { padding-bottom: 72px; }
body.tp-touch .game-screen.active[data-tp="type"] { padding-bottom: 84px; }
body.tp-touch .game-screen.active[data-tp="pad"]  { padding-bottom: 100px; }
body.tp-touch .game-screen.active[data-tp="dpad"] { padding-bottom: 124px; min-height: 100dvh; }
/* The snakes fill the screen above their d-pad instead of running under it */
body.tp-touch .game-screen.active[data-tp="dpad"] .canvas-arena { min-height: 260px; }
/* Wave Collapse has a second row of buttons */
body.tp-touch #game14.active[data-tp] { padding-bottom: 116px; }
/* Fingers on the game must steer, not scroll or zoom the page */
body.tp-touch #g10-arena, body.tp-touch #g13-arena, body.tp-touch #g15-arena { touch-action: none; }
body.tp-touch .g14-cell { cursor: pointer; }
/* The floating corner buttons would land on the arena or the bar */
body.has-tp #qg-lb-btn, body.has-tp #qg-theme-btn { display: none; }

.tp-btn {
  touch-action: none;
  min-width: 46px; height: 46px; padding: 0 .6rem;
  border-radius: 12px; border: 1px solid rgba(167,139,250,.45);
  background: rgba(22,22,42,.85); color: #e2e8f0;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1;
  box-shadow: 0 0 10px rgba(59,130,246,.18), inset 0 0 0 1px rgba(255,255,255,.03);
  transition: transform .05s, background .05s;
}
.tp-btn.on {
  transform: scale(.94);
  background: rgba(236,72,153,.35); border-color: #ec4899;
  box-shadow: 0 0 16px rgba(236,72,153,.5);
}
.tp-btn.tp-wide { min-width: 76px; font-size: .82rem; letter-spacing: .04em; }

.tp-move { display: flex; gap: 10px; flex-shrink: 0; }
.tp-btn.tp-big { min-width: 68px; height: 68px; font-size: 1.4rem; border-radius: 16px; }
.tp-btn.tp-jump { min-width: 104px; font-size: 1rem; letter-spacing: .08em; border-color: rgba(251,146,60,.6); }
.tp-btn.tp-fire { min-width: 76px; font-size: .95rem; letter-spacing: .08em; border-color: rgba(248,113,113,.6); }
.tp-dpad {
  display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 50px); gap: 5px;
  flex-shrink: 0;
}
.tp-dpad .tp-btn { min-width: 0; width: 100%; height: 100%; padding: 0; font-size: 1.15rem; border-color: rgba(59,130,246,.55); }
.tp-dpad .tp-up    { grid-area: 1 / 2; }
.tp-dpad .tp-left  { grid-area: 2 / 1; }
.tp-dpad .tp-down  { grid-area: 2 / 2; }
.tp-dpad .tp-right { grid-area: 2 / 3; }
.tp-keys { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.tp-row { display: flex; gap: 6px; align-items: center; }
.tp-small .tp-btn { min-width: 40px; height: 38px; font-size: .9rem; }
@media (max-width: 420px) {
  #tp-pad { gap: .4rem; padding-left: .6rem; padding-right: .6rem; }
  .tp-btn { min-width: 42px; height: 44px; }
  .tp-small .tp-btn { min-width: 38px; height: 36px; }
  .tp-btn.tp-big { min-width: 60px; height: 64px; }
  .tp-btn.tp-jump { min-width: 92px; }
  .tp-btn.tp-fire { min-width: 64px; }
  .tp-dpad { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); }
}

.tp-type { flex: 1; }
.tp-type-input {
  width: 100%; height: 52px; border-radius: 12px;
  border: 1px solid rgba(34,211,238,.5); background: rgba(22,22,42,.9);
  color: #e2e8f0; font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
  text-align: center; outline: none;
}
.tp-type-input:focus { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,.4); }

/* A game screen on a phone: tighter frame, smaller header */
@media (max-width: 600px) {
  .game-screen { padding: .8rem .7rem; gap: .6rem; }
  .top-bar { gap: .5rem .7rem; }
  .game-title { font-size: .98rem; }
  .btn-back { padding: .35rem .7rem; font-size: .8rem; }
  .canvas-overlay { overflow-y: auto; }
  .game-over-card { max-width: calc(100vw - 2rem); }
}

/* Short viewport: a phone held sideways, which is how these games are played.
   The width query above does not catch it — an iPhone in landscape is 844
   wide — so this one keys on height. */
@media (max-width: 600px), (max-height: 560px) {
  .game-over-card {
    max-width: calc(100vw - 2rem); padding: 1.3rem 1.1rem; border-radius: 1rem;
  }
  .game-over-card h2 { font-size: 1.35rem; margin-bottom: .3rem; }
  .game-over-card .final-score { font-size: 1.9rem; margin: .45rem 0; }
  .game-over-card p { margin-bottom: .8rem; font-size: .85rem; }
  /* Stacked and full width, so two buttons never share a cramped row and
     every one is a 44px target. The <br><br> between them in the markup
     would add dead space once they are blocks. */
  .game-over-card .btn-primary,
  .game-over-card .btn-back {
    display: block; width: 100%; min-height: 44px; margin: 0 0 .5rem;
    /* 36 of these cards set margin-left inline on the Home button, which an
       ordinary rule cannot beat */
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .game-over-card .btn-primary:last-child,
  .game-over-card .btn-back:last-child { margin-bottom: 0; }
  .game-over-card br { display: none; }
}

/* ── Ad slot ─────────────────────────────────────────────
   Small, muted, and on the menu only — never over a game. The close button
   is a real target rather than a 10px x, because the point of it is that
   nobody has to put up with the thing. */
#qg-ad {
  display: flex; align-items: center; gap: .6rem;
  max-width: 760px; margin: 0 auto 1rem; padding: .5rem .6rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; min-height: 60px;
}
#qg-ad[hidden] { display: none; }
.qg-ad-tag {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: .1rem .3rem; flex: 0 0 auto;
}
#qg-ad-slot { flex: 1 1 auto; min-width: 0; min-height: 50px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
#qg-ad-x {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); cursor: pointer;
  font-size: .9rem; line-height: 1;
}
#qg-ad-x:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 600px) { #qg-ad { margin-inline: .5rem; } }

/* The Entangled Gauntlet is the one game that shows its end screen on a
   practice clear — the others restart the attempt instead — so its picture
   has to sit above that screen rather than under it. .trail-card is z-index
   20 against .game-over-overlay's 100, which would have hidden it entirely. */
#ga-card { position: fixed; z-index: 110; }

/* The opt-out on a run picture, and the matching switch in the pause menu.
   Muted, because they are both a way out rather than something to press. */
.trail-card-off, .qg-pause-cards {
  background: var(--card); color: var(--muted);
  border: 1px solid var(--border); box-shadow: none;
}
.trail-card-off:hover, .qg-pause-cards:hover { color: var(--text); }
.qg-pause-card .qg-pause-cards { display: block; width: 100%; margin-bottom: .55rem }

/* ── Pause ──────────────────────────────────────────── */
#qg-pause {
  display: none; position: fixed; inset: 0; z-index: 120;
  background: rgba(0,0,0,.8); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
#qg-pause.show { display: flex }
.qg-pause-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 1.5rem; padding: 2.2rem 2.6rem; text-align: center;
  max-width: 340px;
}
.qg-pause-card h2 { margin: 0 0 .4rem; font-size: 1.6rem }
.qg-pause-card p { color: var(--muted); font-size: .86rem; margin: 0 0 1.2rem }
.qg-pause-card .btn-primary { display: block; width: 100%; margin-bottom: .55rem }
.qg-pause-exit {
  background: var(--card) !important; color: var(--muted) !important;
  border: 1px solid var(--border) !important; box-shadow: none !important;
}
.qg-pause-hint { font-size: .74rem; margin: .7rem 0 0 !important }
.qg-pause-hint kbd {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: .05rem .3rem; font-size: .72rem;
}

/* ══════════════════════════════════════
   SCORE RACES — opponent bar
   One bar across the top of whichever arena the match is in, so the six
   games that share qgMpRace do not each carry the same inline style.
══════════════════════════════════════ */
.mp-opp-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12;
  display: flex; justify-content: space-between; align-items: center;
  padding: .35rem .8rem;
  background: rgba(10, 10, 26, .82);
  border-bottom: 1px solid rgba(148, 163, 184, .3);
  font: 700 .82rem/1.3 ui-monospace, monospace;
  color: var(--muted);
  pointer-events: none;
}
:root[data-theme="light"] .mp-opp-hud {
  background: rgba(255, 255, 255, .9);
  border-bottom-color: rgba(0, 0, 0, .12);
}
.mp-find {
  margin-top: 1rem; display: flex; flex-direction: column;
  align-items: center; gap: .5rem; width: 100%; max-width: 260px;
}
.mp-find .mp-status {
  color: var(--muted); font-size: .82rem; min-height: 1.2em; text-align: center;
}
.mp-verdict { font-size: .92rem; font-weight: 700; margin: .5rem 0; }

/* ══════════════════════════════════════
   HOW TO PLAY
   The prose under each game, plus the About block on the menu. It lives in
   the markup rather than being built by JS, so a reader and a crawler both
   get it, and so it survives with scripts blocked.
══════════════════════════════════════ */

/* The panel is a sibling of the arena, which until now took flex:1 of a
   100vh screen. Left alone the prose would eat that share and halve every
   playfield. Games read the arena's size exactly once — when they size
   their canvas at init — so the height has to be settled before that and
   must not move afterwards. Hence a viewport-derived minimum rather than a
   flexible share. (vh first for anything that doesn't know svh.) */
.game-screen .canvas-arena,
#game2 .arena, #game3 .arena, #game4 .arena {
  min-height: calc(100vh - 10rem);
  min-height: calc(100svh - 10rem);
}
/* These keep a hint line or a status bar below the arena, which the full
   height would push off the bottom of the screen. */
#game10 .canvas-arena, #game15 .canvas-arena, #game17 .canvas-arena,
#game18 .canvas-arena, #game22 .canvas-arena, #game23 .canvas-arena,
#game45 .canvas-arena {
  min-height: calc(100vh - 13rem);
  min-height: calc(100svh - 13rem);
}

.howto {
  max-width: 54rem; width: 100%; margin: 2rem auto 0;
  padding: 1.5rem 1.6rem 1.75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 1.25rem;
  text-align: left; font-size: .9rem; line-height: 1.65; color: var(--text);
}
.howto h2 {
  font-size: 1.05rem; margin-bottom: .75rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--border);
}
.howto h3 {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent2); margin: 1.25rem 0 .5rem;
}
.howto p { margin-bottom: .5rem; }
.howto-intro { color: var(--muted); }
.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
/* First heading in each column shouldn't add a second gap under the intro */
.howto-grid .howto-block h3 { margin-top: .25rem; }
.howto-controls {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem;
  align-items: baseline;
}
.howto-controls dd { color: var(--muted); }
.howto kbd {
  display: inline-block; background: var(--surface);
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 6px; padding: .1rem .45rem;
  font-size: .78rem; color: var(--text); white-space: nowrap;
}
.howto-medals { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.howto-medals span {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: .15rem .6rem;
  font-family: var(--font-mono); font-size: .78rem;
}
.howto-tips { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.howto-tips li { margin-bottom: .35rem; }
.howto-note { color: var(--muted); font-size: .8rem; }
.howto a { color: var(--accent2); }
.howto-about { margin-bottom: 1rem; }

@media (max-width: 700px) {
  .howto {
    margin-top: 1.5rem; padding: 1.1rem 1.1rem 1.35rem;
    border-radius: 1rem; font-size: .86rem;
  }
  .howto-grid { grid-template-columns: 1fr; }
}

/* The stand gets the games and nothing to read. Hiding the panel also hands
   the arena its old flex:1 share of the screen back. */
body.stall-mode .howto { display: none; }
body.stall-mode .game-screen .canvas-arena,
body.stall-mode #game2 .arena,
body.stall-mode #game3 .arena,
body.stall-mode #game4 .arena { min-height: 450px; }