/* Pixel-Look (90er, SNES/DS): Press Start 2P für Überschriften, Zahlen, Buttons und kurze Hinweise,
   Space Grotesk für lange Texte (Fragen, Regeln, Antworten). Beide: SIL Open Font License.
   Press Start 2P kennt kein ✓ ▲ ▼ ▶ ★ → − ⬆⬇ (kommen aus einer Ersatzschrift); vorhanden: » … – · ° ². */
@import url('/vendor/fonts/fonts.css');   /* Schriften vom eigenen Server (Datenschutz: nichts an Google) */

:root {
  /* Grundfarben */
  --stage: #1a1147;        /* Nachthimmel */
  --stage-2: #2a2766;      /* Box-Füllung, Buttons */
  --floor-1: #2b1d78;      /* Schachbrett-Boden */
  --floor-2: #3a2a9a;
  --slot: #14123a;         /* leere Kästchen */
  --card: #2a2766;
  --ink: #ffffff;
  --ink-dim: #b9b3ea;
  --line: #ffffff;         /* Pixel-Rahmen */
  --shadow: #000000;       /* harter Schatten */

  /* Akzente (Regenbogen) */
  --team-a: #ff5a2e;    /* Team Turbo */
  --orange: #ff8a3d;
  --gold: #ffd23f;
  --green: #3ed16f;
  --team-b: #5cc8ff;    /* Team Nitro */
  --blue: #4a90ff;
  --on-gold: #3a2900;
  --on-team-b: #0b1f33; /* Schrift auf Nitro-Blau */
  --on-green: #0d2b17;
  --bad: #e040fb;       /* falsch / raus / Fehler (bewusst keine Teamfarbe) */

  /* Schriften */
  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* Pixel-Raster: Rahmenstärke und Schattenversatz */
  --px: 4px;
  --drop: 8px;
  --radius: 0;
  --scanlines: 0.12;
  /* Pixel-Rahmen als box-shadow (Stufenecken), mit und ohne harten Schatten */
  --frame: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line);
  --frame-drop: var(--frame), 10px 10px 0 0 var(--shadow);
  --frame-drop-s: var(--frame), 8px 8px 0 0 var(--shadow);

  font-family: var(--font-body);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;   /* Vollbild: nie scrollen, zu große Inhalte werden eingepasst (Games.fitToBox) */
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* Sternenhimmel: selbst gezeichnete Pixel-Sterne als SVG-Kachel */
body {
  background-color: var(--stage);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' shape-rendering='crispEdges'%3E%3Cg fill='%238f86ff'%3E%3Crect x='14' y='22' width='4' height='4'/%3E%3Crect x='96' y='8' width='4' height='4'/%3E%3Crect x='170' y='60' width='4' height='4'/%3E%3Crect x='52' y='118' width='4' height='4'/%3E%3Crect x='214' y='150' width='4' height='4'/%3E%3Crect x='128' y='196' width='4' height='4'/%3E%3Crect x='22' y='212' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%23ffd23f'%3E%3Crect x='136' y='100' width='6' height='6'/%3E%3Crect x='34' y='70' width='6' height='6'/%3E%3Crect x='196' y='226' width='6' height='6'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='80' y='160' width='4' height='4'/%3E%3Crect x='226' y='32' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  image-rendering: pixelated;
}

/* Regenbogenstreifen oben */
body::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 10px; z-index: 50;
  background: linear-gradient(90deg,
    var(--team-a) 0 16.66%, var(--orange) 0 33.33%, var(--gold) 0 50%,
    var(--green) 0 66.66%, var(--team-b) 0 83.33%, var(--blue) 0);
}

/* CRT-Scanlines über allem, klickt man durch */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,var(--scanlines)) 0 2px, transparent 2px 4px);
}

/* Schachbrett-Boden (als Element, damit Seiten ihn ein- und ausblenden können) */
.floor {
  position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: -1;
  background: repeating-conic-gradient(var(--floor-1) 0 25%, var(--floor-2) 0 50%) 0 0 / 48px 48px;
  border-top: var(--px) solid var(--shadow);
}

h1, h2, h3 {
  font-family: var(--font-pixel);
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  text-transform: uppercase;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  color: inherit;
}

.pixel { font-family: var(--font-pixel); font-weight: 400; text-transform: uppercase; }
.shadow-text { text-shadow: 4px 4px 0 var(--shadow); }

/* ---- Pixel-Box: weißer Rahmen mit Stufenecken + harter Schatten ----
   Rahmen über box-shadow statt border, damit die Ecken abgestuft bleiben.
   Farbe über --box-bg / --box-fg / --box-line steuerbar. */
.px-box {
  --box-bg: var(--stage-2);
  --box-fg: var(--ink);
  --box-line: var(--line);
  background: var(--box-bg);
  color: var(--box-fg);
  margin: var(--px);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--box-line),
    0 var(--px) 0 0 var(--box-line),
    calc(-1 * var(--px)) 0 0 0 var(--box-line),
    var(--px) 0 0 0 var(--box-line),
    calc(var(--px) + var(--drop)) calc(var(--px) + var(--drop)) 0 0 var(--shadow);
}
.px-box.flat {   /* ohne Schatten, z.B. in kleinen Listen */
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--box-line),
    0 var(--px) 0 0 var(--box-line),
    calc(-1 * var(--px)) 0 0 0 var(--box-line),
    var(--px) 0 0 0 var(--box-line);
}

/* Etikett oben links an einer Box ("FRAGE") */
.px-tag {
  display: inline-block; font-family: var(--font-pixel); font-size: 0.7rem; text-transform: uppercase;
  background: var(--team-a); color: #fff; border: var(--px) solid var(--line); padding: 6px 10px;
}

.card {
  background: var(--card);
  border-radius: 0;
  padding: 20px;
  margin: var(--px);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    calc(var(--px) + 6px) calc(var(--px) + 6px) 0 0 var(--shadow);
}

.pill {
  display: inline-block;
  padding: 8px 14px;
  border: 3px solid var(--line);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  line-height: 1.5;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--shadow);
}

::selection { background: var(--team-a); color: white; }

/* ---- Animationen ---- */
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes pxPulse { 50% { transform: scale(1.04); } }
.blink { animation: blink 1s steps(2) infinite; }

/* Einmal-Animationen (Games.anim(el, 'a-pop') startet sie neu). Ruckelig per steps(), passend zum Pixel-Look. */
@keyframes aPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 80% { transform: scale(0.96); } 100% { transform: scale(1); } }
@keyframes aDrop { 0% { transform: translateY(-120px); opacity: 0; } 60% { transform: translateY(14px); opacity: 1; } 80% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes aRise { 0% { transform: translateY(60px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes aShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-14px); } 40% { transform: translateX(12px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(6px); } }
@keyframes aBump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(0.92); } }
@keyframes aHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes aFlash { 0% { opacity: 0.7; } 100% { opacity: 0; } }
.a-pop { animation: aPop 0.45s steps(6) both; }
.a-drop { animation: aDrop 0.6s steps(8) both; }
.a-rise { animation: aRise 0.35s steps(5) both; }
.a-shake { animation: aShake 0.4s steps(5); }
.a-bump { animation: aBump 0.5s steps(6); }
.a-hop { animation: aHop 0.9s steps(2) infinite; }
/* Bildschirm-Blitz (Games.flash): Vollflächige Farbe, die kurz aufleuchtet */
.a-flash { position: fixed; inset: 0; z-index: 900; pointer-events: none; animation: aFlash 0.5s steps(4) forwards; }

/* Blinkender Timer (für Countdowns im Kern und später in den Spielen) */
.px-timer {
  font-family: var(--font-pixel); color: var(--orange); text-shadow: 4px 4px 0 var(--shadow);
  font-size: clamp(1.2rem, 2.6cqw, 2rem);
}
.px-timer.urgent { animation: blink 1s steps(2) infinite; }
/* Beschriftung vor jeder Timer-Zahl (Games.timerHtml / startCountdown) */
.t-label { font-family: var(--font-pixel); text-transform: uppercase; font-size: 0.4em; vertical-align: middle; margin-right: 0.6em; opacity: 0.8; }
.t-unit { font-family: var(--font-pixel); text-transform: uppercase; font-size: 0.5em; margin-left: 0.2em; }
.t-urgent { animation: blink 1s steps(2) infinite; }

/* ---- Gemeinsame Bausteine für alle Spiele ---- */
.controls { display: flex; gap: 20px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

.ctrl-btn {
  --btn-bg: var(--team-b); --btn-fg: var(--on-team-b);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-pixel); font-size: 0.85rem; line-height: 1.5; text-transform: uppercase;
  padding: 14px 20px; margin: var(--px); border-radius: 0;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    calc(var(--px) + 4px) calc(var(--px) + 4px) 0 0 var(--shadow);
  transition: transform 60ms steps(1);
}
.ctrl-btn:hover { filter: brightness(1.1); }
.ctrl-btn:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);
}
.ctrl-btn:disabled { opacity: 0.55; cursor: default; }
.ctrl-btn:focus-visible { outline: 4px dashed var(--gold); outline-offset: 10px; }
.ctrl-btn.secondary { --btn-bg: var(--stage-2); --btn-fg: var(--ink); }
.ctrl-btn.gold { --btn-bg: var(--gold); --btn-fg: var(--on-gold); }
.ctrl-btn.team-a { --btn-bg: var(--team-a); --btn-fg: #fff; }

.waiting-note {
  color: var(--ink-dim); margin-top: 20px; font-family: var(--font-pixel); font-size: 0.8rem; line-height: 1.8; text-transform: uppercase;
}
/* Kurze Status-Zeile ("3 / 4 haben geschätzt") */
.px-info { color: var(--team-b); font-family: var(--font-pixel); font-size: clamp(0.75rem, 1.3cqw, 1rem); line-height: 1.8; text-transform: uppercase; margin: 12px 0; text-shadow: 3px 3px 0 var(--shadow); }
.px-big { font-family: var(--font-pixel); font-size: clamp(1.2rem, 3cqw, 2.2rem); line-height: 1.5; text-transform: uppercase; text-shadow: 4px 4px 0 var(--shadow); }
.ok-text { color: var(--green); } .bad-text { color: var(--bad); }

/* Antwort-Buttons auf dem Handy (Multiple Choice, Mehr/Weniger) */
.vote-choices { display: flex; flex-direction: column; gap: 18px; margin: 10px 4px; }
.vote-btn {
  display: block; width: 100%; text-align: left; padding: 16px 18px;
  background: var(--stage-2); color: var(--ink); font-weight: 700; font-size: 1.15rem; line-height: 1.3;
  box-shadow: var(--frame-drop-s);
}
.vote-btn b { font-family: var(--font-pixel); font-weight: 400; }
.vote-btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: var(--frame); }
.vote-btn.selected { background: var(--team-b); color: var(--on-team-b); }
.vote-btn.selected b { color: var(--on-team-b) !important; }
.vote-btn:disabled:not(.selected):not(.correct) { opacity: 0.55; }
.vote-btn.correct { background: var(--green); color: var(--on-green); }

/* Großer Arcade-Knopf (Buzzer, Start/Stopp, Tauziehen) */
.arcade-btn {
  --btn-bg: var(--team-a); --btn-fg: #fff;
  display: block; width: min(260px, 72cqw); aspect-ratio: 1; margin: 24px auto;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-pixel); font-size: 1.6rem; text-transform: uppercase; text-shadow: 4px 4px 0 rgba(0,0,0,.45);
  box-shadow: var(--frame), inset -10px -10px 0 0 rgba(0,0,0,.25), inset 10px 10px 0 0 rgba(255,255,255,.25), 14px 14px 0 0 var(--shadow);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.arcade-btn:active:not(:disabled) { transform: translate(8px, 8px); box-shadow: var(--frame), inset 10px 10px 0 0 rgba(0,0,0,.25), 6px 6px 0 0 var(--shadow); }
.arcade-btn:disabled { --btn-bg: var(--stage-2); --btn-fg: var(--ink-dim); text-shadow: none; }
.arcade-btn.green { --btn-bg: var(--green); --btn-fg: var(--on-green); text-shadow: none; }
.arcade-btn.wide { width: 100%; aspect-ratio: auto; min-height: 280px; }

/* Team-Karte: Name in Pixel-Schrift, Punktzahl groß */
.team-card {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 14px 26px; min-width: 220px; margin: var(--px);
  color: #fff; background: var(--team-a);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    calc(var(--px) + var(--drop)) calc(var(--px) + var(--drop)) 0 0 var(--shadow);
}
.team-card .tname { font-family: var(--font-pixel); font-size: clamp(0.7rem, 1.2cqw, 1rem); text-transform: uppercase; line-height: 1.5; }
.team-card .tscore {
  font-family: var(--font-pixel); font-size: clamp(2rem, 4.4cqw, 3.4rem); line-height: 1;
  text-shadow: 4px 4px 0 var(--shadow);
}
/* Team-Logo (Games.teamLogo): Pixel-SVG neben dem Teamnamen */
.team-logo { display: inline-block; vertical-align: middle; flex: none; }
.team-card.light { color: var(--on-team-b); }
.team-card.light .tscore { text-shadow: 4px 4px 0 #fff; }

.vs {
  font-family: var(--font-pixel); color: var(--gold); font-size: clamp(1.2rem, 2.4cqw, 1.8rem);
  text-shadow: 4px 4px 0 var(--shadow); transform: rotate(-8deg); padding: 0 6px;
}

/* Großes Zeit-/Zahlenfeld und Team-Punkt in Ergebniszeilen */
.big-time { font-family: var(--font-pixel); color: var(--gold); font-size: clamp(1.6rem, 4cqw, 3rem); line-height: 1.3; text-shadow: 4px 4px 0 var(--shadow); }
.team-dot { display: inline-block; width: 14px; height: 14px; border: 3px solid var(--line); margin-right: 10px; vertical-align: -1px; }

/* Hinweis-Banner (z.B. Rundensieger); data-winner="A"/"B" färbt es in Teamfarbe */
.banner {
  margin: 30px auto 0; max-width: 1000px; padding: 20px 26px;
  font-family: var(--font-pixel); font-size: clamp(1rem, 2.2cqw, 1.7rem); line-height: 1.6; text-transform: uppercase;
  --box-bg: var(--stage-2); --box-fg: var(--gold);
  background: var(--box-bg); color: var(--box-fg);
}
.banner[data-winner="A"] { --box-bg: var(--team-a); --box-fg: #fff; }
.banner[data-winner="B"] { --box-bg: var(--team-b); --box-fg: var(--on-team-b); }
.banner .sub { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 0.7em; margin-top: 8px; }

/* Spieler-Chips (Lobby, Regeln) */
.chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--stage-2); color: var(--ink);
  border: 3px solid var(--line); border-left: 12px solid var(--line);
  padding: 10px 14px; font-family: var(--font-pixel); font-size: 0.8rem; line-height: 1.3; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--shadow);
}
.chip .tick { font-family: var(--font-pixel); font-size: 0.8rem; color: var(--ink-dim); }
.chip.ok .tick { color: var(--green); }
.chip.kickable { cursor: pointer; }
.chip.kick-armed { background: var(--bad); color: #fff; }
.test-hint { font-family: var(--font-pixel); text-transform: uppercase; font-size: 0.6rem; color: var(--gold); text-align: center; margin-top: 12px; }
.kick-hint { font-family: var(--font-pixel); text-transform: uppercase; font-size: 0.6rem; color: var(--ink-dim); text-align: center; margin-top: 10px; }

/* Ergebnis-Zeilen (Schätzen) und Balken (Abstimmung) */
.result-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--card); padding: 12px 20px;
  border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--shadow);
  font-family: var(--font-pixel); font-size: clamp(0.75rem, 1.2cqw, 1rem); line-height: 1.5; text-transform: uppercase; text-align: left;
}
.result-row > span:last-child { color: var(--ink-dim); text-align: right; }
.result-row.winner { border-color: var(--gold); background: #3b336f; color: var(--gold); }
.result-row.winner > span:first-child::before { content: '★ '; color: var(--gold); }
.result-list { display: flex; flex-direction: column; gap: 10px; margin: 18px auto 0; max-width: 1000px; }
.solution-pill {
  display: inline-block; align-self: center; background: var(--gold); color: var(--on-gold); padding: 12px 20px; margin: 4px auto 8px;
  font-family: var(--font-pixel); font-size: clamp(0.9rem, 1.6cqw, 1.3rem); text-transform: uppercase; box-shadow: var(--frame-drop-s);
}
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-track { flex: 1; height: 30px; background: var(--slot); border: 3px solid var(--line); overflow: hidden; }
.bar-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--team-b) 0 12px, var(--team-a) 12px 24px); }

/* Pixel-Konfetti (Sieger- und Endscreen) */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.confetti i {
  position: absolute; top: -20px; display: block; width: 12px; height: 12px;
  animation: confettiFall linear infinite;
}
@keyframes confettiFall {
  0% { transform: translateY(0); }
  100% { transform: translateY(110vh); }
}

@media (prefers-reduced-motion: reduce) {
  .blink, .px-timer.urgent, .confetti i,
  .a-pop, .a-drop, .a-rise, .a-shake, .a-bump, .a-hop { animation: none !important; }
  .a-flash { display: none; }
}