/* ============================================================
   Tetris by TrendtVision — Gameboy-Reskin
   Ein Gameboy-Gerät (fixes Seitenverhältnis), Innenleben in %.
   Skaliert monolithisch -> responsive Desktop + Mobile, kein Clipping.
   ============================================================ */

/* OCR-A (Designer-Font laut colors-fonts.rtf) — selbst gehostet, Public Domain
   (Matthew Skala, basierend auf R. B. Wales). Ersetzt den bisherigen lores-12-
   Fallback, weil das Adobe-Kit OCR-A nicht enthielt. Siehe assets/fonts/OCR-A-LICENSE.txt. */
@font-face {
  font-family: "OCR A Std";
  src: url("../assets/fonts/OCRA.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #f07f3e;
  --orange-d: #ef9a2e;
  --maroon: #592a28;       /* Sidebar-Pillar */
  --maroon-d: #451312;     /* Rahmen dunkel */
  --ink: #2b1a17;
  --beige: #fde4c9;        /* Spielfeld / LCD */
  --beige-2: #efe4d6;
  --gray: #4a4a4a;         /* Bedienelemente */
  --gray-l: #6a6a6a;
  --green: #1ea049;
  --red: #d8442f;
  --muted: #8a6f63;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  --font: "OCR A Std", "lores-12", "Courier New", monospace;
}

* {
  font-family: var(--font);
  font-weight: 700;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body { height: 100%; margin: 0; }

html, body {
  touch-action: manipulation;      /* kein Doppeltipp-Zoom; Pinch (Rauszoomen) bleibt möglich */
  overscroll-behavior: none;       /* kein Bounce/Overscroll */
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #3a1b19;              /* Desktop: Dunkelrot (Team-Wunsch) */
  color: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;     /* kein „Bild speichern"-Callout / keine Auswahl */
}
input, textarea { user-select: text; -webkit-user-select: text; }

/* Mobil / Touch: Rand am Gerät wieder Orange (Korpus-Orange), Desktop bleibt Dunkelrot */
@media (pointer: coarse), (max-width: 700px) {
  body { background: var(--orange); }
  /* Hinweis: .corner-btn-img-Filter (dunkel) + .controls-15%-Scale stehen WEITER UNTEN,
     hinter ihren Basis-Regeln — sonst gewinnt bei gleicher Spezifität die spätere Basis-Regel. */
}

/* ============================================================
   GAMEBOY-GERÄT
   ============================================================ */
.device {
  position: relative;
  aspect-ratio: 402 / 874;
  height: min(100dvh, calc(100vw * 874 / 402));
  margin: 0 auto;
  /* Maroon hinter das PNG: das LCD-Fenster im gameboy.png ist transparent -> so scheint an der
     Fensterkante (Sub-Pixel, v.a. Handy) NIE der orange Hintergrund durch, sondern Maroon (= Rahmenfarbe).
     Sicher, weil nur das LCD-Fenster transparent ist (Ecken/Ränder/Bezel opak). */
  background-color: var(--maroon);
  background-image: url("../assets/gameboy/gameboy.png");
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  container-type: size;
  --u: 0.2488cqw;                  /* 1 Device-/Figma-Pixel -> Overlays/HUD/Controls teilen sich das */
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.18));
}
body[data-state="login"] .device { display: none; }

/* Mobil: alle Browser-Gesten IM GERÄT unterbinden. touch-action wird NICHT vererbt,
   darum explizit auf .device UND alle Kinder (D-Pad-Basis/Mitte/Lücken zoomten sonst beim
   Doppeltipp; -webkit-touch-callout gegen die iOS-Lupe beim Gedrückthalten). Login/Modals
   liegen außerhalb .device und bleiben normal bedienbar. */
.device, .device * {
  touch-action: manipulation;      /* Doppeltipp-Zoom aus, Pinch bleibt (Rauszoomen möglich) */
  -webkit-touch-callout: none;     /* keine iOS-Lupe/Callout beim Gedrückthalten */
  -webkit-user-select: none;
  user-select: none;
}

/* Handy: reinzoomen (cover) statt Letterbox -> Gerät füllt den Viewport, nur die orangen Korpus-Ränder
   (und der Drop-Shadow) werden beschnitten. Cap 1.15*100dvh begrenzt den Beschnitt -> LCD + Buttons bleiben. */
@media (max-width: 700px) {
  .device { height: min(max(100dvh, calc(100vw * 874 / 402)), calc(100dvh * 1.15)); filter: none; }
}

/* LCD-Fenster (transparente Region im Gerätebild) */
.device__screen {
  position: absolute;
  left: 12.94%;
  top: 14.30%;
  width: 74.13%;
  height: 29.75%;
  background: var(--maroon);
  overflow: hidden;
}

/* Spielfeld (links) + Sidebar (rechts) */
.screen-game {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  background: var(--maroon);
}
/* Pfeiler = linke/rechte Schacht-Wand des Boards (Asset) */
.pfeiler {
  flex: 0 0 auto;
  width: 4%;                 /* Frame 5: 12/298 ≈ 4% (vorher 2.6%, wirkte zu dünn) */
  height: 100%;
  /* Pures CSS statt gestreckter pfeiler.svg -> pixelscharf bei jedem DPR/Zoom (kein Sub-Pixel-Stretch-Artefakt).
     Bildet das Asset nach: maroon Wand mit dunklen Seitenkanten (#3A1B1A), skaliert mit dem Geräte-Unit --u. */
  background: var(--maroon);
  box-shadow: inset calc(2 * var(--u)) 0 0 #3A1B1A, inset calc(-2 * var(--u)) 0 0 #3A1B1A;
}
.playfield {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 10 / 13;     /* exakt Board-Form -> Board füllt ohne Spalt */
  background: var(--beige);  /* LCD-Screenfarbe; der Board-Canvas füllt sie voll (Frame 5) */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ober-/Unter-Rahmen wie die seitlichen Pfeiler (alte, saubere Ausrichtung): geschlossener Rahmen
     ums Board. Als Border (Teil der Box) -> wird von den Overlays gedeckt, leakt NICHT (kein Maroon-Rand). */
  box-sizing: border-box;
  border-top: calc(8 * var(--u)) solid #592A28;
  border-bottom: calc(8 * var(--u)) solid #592A28;
}
#board { display: block; }

/* Sidebar 1:1 aus Figma „Menu" (Node 1:2416): wärmerer BG + cremefarbene Doppelrahmen-Boxen.
   Maße in --u = Figma-px (Sidebar-Breite im LCD ≈ 82u). */
.sidebar {
  flex: 1 1 auto;
  min-width: 0;
  background: #7B3937;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(9 * var(--u)) 0;       /* kompakt, damit die NEXT-Box auch auf Handy (Cover-Skalierung) sicher reinpasst */
  gap: calc(14 * var(--u));
}
/* Cremefarbene Box mit Doppelrahmen (außen creme, innen dunkel) — wie die Buttons/Inputs. */
.hud-box {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(4.94 * var(--u));
  padding: calc(5.93 * var(--u));
  width: calc(55.36 * var(--u));
  background: #E6E3DD;
  border: calc(1.98 * var(--u)) solid #E6E3DD;             /* äußerer cremefarbener Rand */
  box-shadow: inset 0 0 0 calc(1.98 * var(--u)) #3A1B1A;   /* innerer dunkler Rand, gleich breit */
  border-radius: calc(2 * var(--u));
  color: #000;
}
.hud-box .lbl, .hud-box .val { font-size: calc(11.86 * var(--u)); line-height: 1; text-align: center; }
/* SCORE = Composite 1:1 aus Figma (Node 1:2381): schmaler „SCORE"-Chip oben,
   dunkler Streifen dahinter, breite Wert-Leiste (randbündig) darunter. */
/* width via min(): behält das Design-Maß 82.11u, schrumpft aber auf die Sidebar-Breite, falls diese schmaler ist
   (Pfeiler 4% verkleinern die flex-Sidebar) -> kein Überlauf der SCORE-Box über die rechte Wand. */
.hud-score { position: relative; flex: 0 0 auto; width: min(calc(82.11 * var(--u)), 100%); height: calc(48 * var(--u)); color: #000; }
.hud-score-strip {
  position: absolute; left: 0; top: calc(16.37 * var(--u));
  width: 100%; height: calc(10.95 * var(--u));
  background: #3A1B1A; border-bottom: calc(1.98 * var(--u)) solid #E6E3DD;
}
.hud-score-chip {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(55.36 * var(--u));
  display: flex; align-items: center; justify-content: center;
  padding: calc(5.93 * var(--u));
  background: #E6E3DD;
  border: calc(1.98 * var(--u)) solid #E6E3DD;
  box-shadow: inset 0 0 0 calc(1.98 * var(--u)) #3A1B1A;
  border-radius: calc(1.98 * var(--u));
}
.hud-score-val {
  position: absolute; top: calc(27.32 * var(--u)); left: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: calc(4.4 * var(--u)) calc(5.93 * var(--u));
  background: #E6E3DD;
  border-top: calc(1.98 * var(--u)) solid #3A1B1A;
  border-bottom: calc(1.98 * var(--u)) solid #3A1B1A;
}
.hud-score .lbl, .hud-score .val { font-size: calc(11.86 * var(--u)); line-height: 1; text-align: center; }
.hud-ll { display: flex; flex-direction: column; align-items: center; gap: calc(7.9 * var(--u)); width: calc(55.36 * var(--u)); }
.hud-ll .hud-box { width: 100%; }
.hud-next-box { aspect-ratio: 1 / 1; }
.next-slot { position: relative; width: 100%; height: 100%; }
#next-canvas { position: absolute; inset: 0; }

/* ============================================================
   SCREEN-OVERLAYS (Start / Game Over)
   ============================================================ */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqh;
  padding: 2%;
  text-align: center;
  background: rgba(253, 228, 201, 0.95);
}
.btn-img {
  display: block;
  width: 46%;
  max-width: 170px;
  height: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
.player-tag {
  font-size: 5cqw;
  color: var(--maroon-d);
  letter-spacing: 0.05em;
}
/* Game-Over-Stats (Figma „Death", Node 1:2845) — Maße in --u = Figma-px */
#gameover-overlay { gap: calc(42 * var(--u)); }   /* Abstand Stats -> Buttons */
.final-stats { display: flex; gap: calc(35 * var(--u)); }
.final-stats div { display: flex; flex-direction: column; align-items: center; gap: calc(17.25 * var(--u)); }
.final-stats .hud-label { font-size: calc(15.09 * var(--u)); color: rgba(0,0,0,0.6); letter-spacing: 0.12em; }
.final-stats strong { font-size: calc(21.78 * var(--u)); color: #000; }
/* Gerahmte Text-Buttons (Doppelrahmen wie Login-Inputs / Figma button_try-again-new) */
.go-buttons { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.frame-btn {
  width: calc(141.35 * var(--u));
  height: calc(33 * var(--u));
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: #E6E3DD;
  border: calc(2.2 * var(--u)) solid #E6E3DD;            /* äußerer cremefarbener Rand */
  box-shadow: inset 0 0 0 calc(2.2 * var(--u)) #3A1B1A;  /* innerer dunkler Rand, gleich breit */
  color: #000;
  font-size: calc(13.2 * var(--u));
  letter-spacing: -0.06em;
  cursor: pointer;
  -webkit-user-drag: none;
}
/* kein Press-Effekt (einheitlich flach wie geliefert) */

/* START-Screen im WAREHOUSE-SALE-Look: Szene füllt das LCD, PLAY/LEADERBOARD sitzen
   flach im dunklen Band am unteren Bildrand (wie reference/start-screen.png). */
.overlay--wh {
  /* Schild ein Stück größer: Szene ~10% hochskaliert (uniform, kein Stretch), oben verankert.
     Oben/Seiten bleibt der #292929-Bildrahmen; unten deckt ::after jeden Rand ab. */
  background: url("../assets/gameboy/start/warehouse.png") center top / 110% auto no-repeat;
  background-color: #292929;   /* Fallback hinter Rändern */
  padding: 0;
  isolation: isolate;          /* eigener Stacking-Kontext -> interne z-indexe (::after/Buttons/Loading)
                                  lecken nicht nach oben; Leaderboard-Overlay bleibt darüber */
}
/* dunkler Streifen unten in Bild-Bandfarbe -> kein heller Rand, trägt die Buttons */
.overlay--wh::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 16%; background: #292929; z-index: 1;
}
.wh-actions {
  position: absolute;
  left: 4%; right: 4%; bottom: 1.5%;   /* ein Stück tiefer im dunklen Band */
  z-index: 2;                  /* über dem ::after-Streifen */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.5%;
}
.wh-btn {
  width: 47%; height: auto; cursor: pointer;
  user-select: none; -webkit-user-drag: none;
}
/* kein Press-/Klick-Effekt -> Buttons bleiben flach, 1:1 wie die gelieferten SVGs */

/* Ladeanzeige beim „Play" (Session/Cold-Start abwarten) */
.wh-loading {
  position: absolute; inset: 0; display: none;
  z-index: 3;                  /* über Buttons + Streifen */
  align-items: center; justify-content: center; flex-direction: column; gap: 2cqh;
  background: rgba(23, 24, 26, 0.55);
}
.overlay--wh.loading .wh-loading { display: flex; }
.overlay--wh.loading .wh-actions { opacity: 0.4; pointer-events: none; }
.wh-spinner {
  width: 9cqw; height: 9cqw; border-radius: 50%;
  border: 1.4cqw solid rgba(253, 228, 201, 0.3);
  border-top-color: var(--orange);
  animation: wh-spin 0.8s linear infinite;
}
.wh-loading span { color: var(--beige); font-size: 3cqw; letter-spacing: 0.15em; }
@keyframes wh-spin { to { transform: rotate(360deg); } }

/* ============================================================
   BEDIENELEMENTE (auf dem Korpus)
   ============================================================ */
/* Designer-Komponente (buttons+animation.html). Maße in --u = 1 Design-px des
   402px-Geräts (1px = 0.2488cqw) -> skaliert exakt mit dem Gerät. 3D-Plastik-Look
   + Press/Tilt. Nur die interaktiven Elemente bekommen pointer-events. */
.controls {
  position: absolute;
  left: 0; right: 0; top: 55.5%; bottom: 2%;
  --u: 0.2488cqw;
  --btn-base: #494c50;
  --btn-dark: #2c2f32;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  pointer-events: none;
}
/* .cross zusätzlich aktiv: der positionsbasierte D-Pad-Handler (bindDpad) muss die GANZE Cross-Fläche
   empfangen (auch Zentrum/Diagonalen), nicht nur die Arme. touch-action:none -> kein Zoom/Scroll beim Wischen. */
.controls .arm, .controls .round, .controls .pill, .controls .cross { pointer-events: auto; touch-action: none; }

/* Größere Touch-Hitbox für A/B (Rotation) auf Touch-Geräten: unsichtbare Hit-Area via Pseudo-Element.
   Das D-Pad braucht kein ::before mehr — bindDpad() wertet die ganze Cross-Fläche positionsbasiert aus. */
@media (pointer: coarse) {
  .controls .round::before {
    content: ""; position: absolute; inset: calc(-8 * var(--u)); border-radius: 50%;
  }
}

.controls-upper { display: flex; align-items: center; justify-content: center; gap: calc(70 * var(--u)); }

/* D-Pad */
.dpad { perspective: calc(520 * var(--u)); }
.cross { position: relative; width: calc(116 * var(--u)); height: calc(116 * var(--u)); transform-style: preserve-3d; transition: transform .08s ease; }
/* Unsichtbarer Missclick-Puffer: erweitert die klickbare D-Pad-Fläche ~24u über die sichtbare Cross hinaus
   (kein Layout-Eingriff). Ein Tap knapp daneben trifft so #cross -> bindDpad ordnet ihn der dominanten Achse zu. */
.cross::before { content: ""; position: absolute; inset: calc(-40 * var(--u)); }
.cross-base { position: absolute; inset: 0; filter: drop-shadow(0 calc(1.6 * var(--u)) calc(2.4 * var(--u)) rgba(0,0,0,.4)); }
.cross-base-v, .cross-base-h { position: absolute; background: var(--btn-base); border-radius: calc(9 * var(--u)); }
.cross-base-v { left: calc(37 * var(--u)); top: 0; width: calc(42 * var(--u)); height: calc(116 * var(--u)); }
.cross-base-h { left: 0; top: calc(37 * var(--u)); width: calc(116 * var(--u)); height: calc(42 * var(--u)); }
.cross-face { position: absolute; inset: 0; }
.cross-face-v, .cross-face-h, .cross-face-c { position: absolute; background: var(--btn-base); }
.cross-face-v { left: calc(37 * var(--u)); top: 0; width: calc(42 * var(--u)); height: calc(116 * var(--u)); border-radius: calc(9 * var(--u)); box-shadow: inset calc(-2 * var(--u)) calc(-4 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.4), inset calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(255,255,255,.15); }
.cross-face-h { left: 0; top: calc(37 * var(--u)); width: calc(116 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(9 * var(--u)); box-shadow: inset calc(-2 * var(--u)) calc(-4 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.4), inset calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(255,255,255,.15); }
.cross-face-c { left: calc(37 * var(--u)); top: calc(37 * var(--u)); width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.dot { position: absolute; left: 50%; top: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; transform: translate(-50%,-50%); background: var(--btn-base); box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.7), inset 0 calc(-1 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,.15); z-index: 3; }
.arm { position: absolute; width: calc(42 * var(--u)); height: calc(42 * var(--u)); padding: 0; border: 0; cursor: pointer; background: transparent; display: flex; align-items: center; justify-content: center; z-index: 2; -webkit-tap-highlight-color: transparent; }
.arm.up { left: calc(37 * var(--u)); top: 0; }
.arm.down { left: calc(37 * var(--u)); top: calc(74 * var(--u)); }
.arm.left { left: 0; top: calc(37 * var(--u)); }
.arm.right { left: calc(74 * var(--u)); top: calc(37 * var(--u)); }
.arrow { width: 0; height: 0; display: block; }
.up .arrow    { border-left: calc(7 * var(--u)) solid transparent; border-right: calc(7 * var(--u)) solid transparent; border-bottom: calc(10 * var(--u)) solid var(--btn-dark); }
.down .arrow  { border-left: calc(7 * var(--u)) solid transparent; border-right: calc(7 * var(--u)) solid transparent; border-top: calc(10 * var(--u)) solid var(--btn-dark); }
.left .arrow  { border-top: calc(7 * var(--u)) solid transparent; border-bottom: calc(7 * var(--u)) solid transparent; border-right: calc(10 * var(--u)) solid var(--btn-dark); }
.right .arrow { border-top: calc(7 * var(--u)) solid transparent; border-bottom: calc(7 * var(--u)) solid transparent; border-left: calc(10 * var(--u)) solid var(--btn-dark); }
/* 3D-Tilt beim Druck (Designer-Original). */
.cross.tilt-up    { transform: rotateX(10deg); }
.cross.tilt-down  { transform: rotateX(-10deg); }
.cross.tilt-left  { transform: rotateY(-10deg); }
.cross.tilt-right { transform: rotateY(10deg); }
.arm.pressed::after { content: ""; position: absolute; inset: calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(0,0,0,.15); }

/* A / B */
.ab { display: flex; align-items: flex-end; gap: calc(22 * var(--u)); }
.b-wrap { margin-bottom: calc(-10 * var(--u)); }
.a-wrap { margin-bottom: calc(30 * var(--u)); }
.round { position: relative; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: var(--btn-base); box-shadow: 0 calc(4 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.5), inset calc(-2 * var(--u)) calc(-4 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.4), inset calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(255,255,255,.15); display: flex; justify-content: center; align-items: center; font-family: 'Arial Narrow', Arial, sans-serif; font-size: calc(24 * var(--u)); font-weight: 600; color: var(--btn-dark); text-shadow: 0 1px 1px rgba(255,255,255,0.25); transition: transform .06s ease, box-shadow .06s ease; -webkit-tap-highlight-color: transparent; }
.round.pressed { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.3), inset calc(-1 * var(--u)) calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.4), inset calc(1 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,.15); }

/* SELECT / START */
.menu { display: flex; gap: calc(35 * var(--u)); margin-top: calc(34 * var(--u)); }
.menu-item { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); }
.pill-cutout { width: calc(42 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(9 * var(--u)); background: rgba(0,0,0,0.06); box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,0.35), inset 0 calc(-1 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,0.4); display: flex; justify-content: center; align-items: center; }
.pill { width: calc(36 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); border: 0; cursor: pointer; padding: 0; background: var(--btn-base); box-shadow: 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.15); transition: transform .06s ease, box-shadow .06s ease; -webkit-tap-highlight-color: transparent; }
.pill.pressed { transform: translateY(calc(2 * var(--u))); box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.5); }
.print-text { font-family: Arial, sans-serif; font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: 0.5px; color: var(--btn-dark); text-shadow: 0 1px 1px rgba(255,255,255,0.4); }

@media (prefers-reduced-motion: reduce) { .cross, .round, .pill { transition: none; } }

/* ============================================================
   LOGIN
   ============================================================ */
/* WAREHOUSE-SALE-Login (Szene oben + Eingabe-Reihe unten), 2 Schritte. */
.login-form {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  background: #2c2f32;
  border: 3px solid #17181a;
  box-shadow: var(--shadow);
  z-index: 60;
}
body:not([data-state="login"]) .login-form { display: none; }
/* Warehouse-Szene als „Header" — nur die Kisten (dunkles Band der Szene abgeschnitten),
   damit die Eingabe-Reihe bündig direkt darunter im Dunklen sitzt (wie login-screen.png).
   Card-BG = #2c2f32 = Farbe des Szenen-Bands -> nahtloser Übergang. */
.wh-hero {
  width: 100%;
  aspect-ratio: 298 / 205;
  overflow: hidden;
  background: url("../assets/gameboy/start/warehouse.png") center top / 100% auto no-repeat;
}
/* Schritt-Seiten smooth ein-/ausklappen (max-height + opacity). */
.login-step-page {
  width: 100%;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease;
}
.login-step-page.open { max-height: 320px; opacity: 1; }
.login-row {
  display: flex; align-items: stretch; gap: 8px;
  margin-top: 8px;
}
/* Rahmen exakt wie die Buttons: außen weiß (#E6E3DD, 2px), innen dunkel (#3A1B1A, 2px),
   Füllung #E6E3DD — beide Ränder gleich breit, komplett innerhalb der 46px-Höhe. */
.login-input {
  flex: 1 1 auto; min-width: 0; height: 46px;
  padding: 0 12px;
  font-size: 0.95em;
  letter-spacing: 0.03em;
  border: 2.7px solid #E6E3DD;              /* Button-SVG (2px @34px) skaliert auf 46px -> ~2.7px */
  box-shadow: inset 0 0 0 2.7px #3A1B1A;
  background: #E6E3DD;
  color: var(--ink);
  outline: none;
  transition: box-shadow 0.15s ease;
}
.login-input::placeholder { color: #8a7d72; }
.login-input:focus { box-shadow: inset 0 0 0 2.7px #3A1B1A, inset 0 0 0 5px rgba(240,127,62,0.4); }
.login-input.error { box-shadow: inset 0 0 0 2.7px var(--red); }
.login-play {
  flex: 0 0 auto; height: 46px; width: calc(46px * 94 / 34);
  border: none; cursor: pointer; padding: 0;
  background: url("../assets/gameboy/login/button-play.svg") center / 100% 100% no-repeat;
  transition: transform 0.05s ease, filter 0.15s ease;
}
/* kein Press-Effekt (1:1 flach wie geliefert) */
.login-play:disabled { cursor: default; }
/* Ladezustand beim Submit: Scrim + Spinner über dem Button -> Absenden fühlt sich responsiv an. */
.login-play.loading { position: relative; }
.login-play.loading::before {
  content: ""; position: absolute; inset: 0; border-radius: 6px; background: rgba(58, 27, 26, 0.6);
}
.login-play.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 38%; aspect-ratio: 1 / 1;
  border-radius: 50%; border: 2.4px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: wh-spin 0.7s linear infinite;
}
.terms-container {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 11px 2px 2px;
  font-size: 0.66em;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;               /* AGB in einer Zeile */
  color: #d8d2ca;
}
.terms-container input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.terms-container a { color: var(--orange); }
/* Fehlermeldung smooth ein-/ausklappen */
.error-message {
  color: #ff9d95;
  font-size: 0.8em;
  font-weight: 400;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .28s ease, margin .28s ease;
}
.error-message.show { max-height: 4em; opacity: 1; margin-top: 10px; }

/* Text-Buttons im Stil der gelieferten Button-Grafiken (start-game/try-again):
   heller Kasten, dunkelmaroon Doppelrahmen, schwarzer Text. */
.text-button {
  margin: 16px auto 0;
  padding: 11px 22px;
  background: #e6e3dd;
  color: #000;
  border: 3px solid #3a1b1a;
  box-shadow: 0 0 0 3px #e6e3dd;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.text-button:hover { background: #d9d5cc; }
.text-button:active { transform: translateY(1px); }
.text-button:disabled { opacity: 0.5; cursor: default; }
.text-button--full { width: 100%; margin: 18px 0 0; }
.text-button--ghost {
  font-size: 2.8cqw;
  padding: 1cqh 4%;
  margin: 0;
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
/* Leaderboard-Overlay IM LCD (wie reference/leaderboard.png) */
.lb-overlay {
  position: absolute;
  inset: 0;
  display: none;            /* per JS auf flex */
  flex-direction: column;
  align-items: center;
  gap: 0.3cqh;                   /* enge Abstände zwischen Sign / Liste / Goal / Button (wie Preview) */
  padding: 1.4cqh 6.5% 0.9cqh;   /* wenig Rand, v.a. unten -> Button nah am unteren LCD-Rand */
  /* Solider Fallback UNTER der SVG: falls bg-leaderboard.svg (frischer Browser) noch nicht geladen ist,
     bleibt das Overlay opak -> nie durchscheinend, Wechsel immer atomar. */
  background-color: #592A28;
  background-image: url("../assets/gameboy/leaderboard/bg-leaderboard.svg");
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}
/* (keine dunkle Kappe mehr) -> Oberrand zeigt den natürlichen SVG-Rahmen wie die Seiten, clean */
.lb-sign {
  height: 2.7cqh; width: auto; display: block;
  position: relative; z-index: 2;
  margin-bottom: -1.5cqh;   /* Schild liegt stärker über der Box-Oberkante */
}
.lb-box {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background: #ffffff;                        /* weißer Hintergrund */
  border: 0.6cqw solid var(--maroon-d);       /* rote (maroon) Border */
  box-shadow: 0 0 0 0.32cqw #ffffff;          /* weiße Border AUSSEN (wie Schild), dünn */
  border-radius: 0.6cqw;
  overflow: hidden;
  display: flex;
}
#leaderboard-list {
  list-style: none; margin: 0; padding: 0; width: 100%;
  flex: 1 1 auto;                 /* füllt die Box -> Zeilen verteilen gleichmäßig */
  display: flex; flex-direction: column;
}
#leaderboard-list li {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  align-items: center;
  gap: 0.5em;
  padding: 0 4%;
  flex: 1 1 0;
  min-height: 0;
  max-height: 4cqh;        /* wenige Einträge stapeln sich oben statt sich zu strecken */
  font-size: 2.2cqw;       /* kleinere Player-Zeilen wie in der Preview */
  color: var(--ink);
  letter-spacing: 0.02em;
}
#leaderboard-list li:nth-child(odd) { background: rgba(89,42,40,0.06); }   /* Reihe 1,3,5 = Streifen */
#leaderboard-list .name .goat { height: 1.25em; width: auto; vertical-align: middle; margin-left: 0.2em; }
#leaderboard-list li.highlight { background: #f7d2ad; }
#leaderboard-list li.lb-loading { display: flex; align-items: center; justify-content: center; color: var(--muted); }
/* Skeleton-Loading: Shimmer-Balken statt Text -> professionellerer Ladezustand */
#leaderboard-list li.lb-skel .sk {
  height: 1em; border-radius: 0.35em;
  background: linear-gradient(90deg, #e8e0da 25%, #f5f0ec 50%, #e8e0da 75%);
  background-size: 200% 100%;
  animation: lb-shimmer 1.3s ease-in-out infinite;
}
#leaderboard-list li.lb-skel .sk-rank { width: 1.4em; }
#leaderboard-list li.lb-skel .sk-name { width: 70%; }
#leaderboard-list li.lb-skel .sk-score { width: 3em; justify-self: end; }
@keyframes lb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { #leaderboard-list li.lb-skel .sk { animation: none; } }                    /* eigene Zeile: helles Apricot */
#leaderboard-list .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 0.35em; text-transform: uppercase;
}
#leaderboard-list .name .gift { height: 1em; width: auto; }
#leaderboard-list .score { text-align: right; }
.lb-bottom {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;     /* Community-Goal-Box oben, TRY-AGAIN full-width darunter */
  align-items: stretch;
  gap: 0.4cqh;
}
/* Community-Goal-Box: gerahmt wie die Liste (weiß + maroon Border + weißer Außenring), mehrzeilig */
.lb-goal {
  display: flex; flex-direction: column; gap: 0.35cqh;
  padding: 0.7cqh 4%;
  background: #ffffff;
  border: 0.6cqw solid var(--maroon-d);
  box-shadow: 0 0 0 0.32cqw #ffffff;
  border-radius: 0.6cqw;
  color: #333; letter-spacing: -0.06em; white-space: nowrap; line-height: 1.1;
}
.lb-goal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; }
.lb-reached-label, .lb-next-label { font-size: calc(7.5 * var(--u)); color: #8a8a8a; }
.lb-goal-rewards span { font-size: calc(13 * var(--u)); font-weight: 700; color: #333; }
.lb-goal-points { font-size: calc(8 * var(--u)); }
.lb-points b { color: #2fa24d; font-weight: 700; }        /* aktuelle Punkte grün */
/* Progress-Bar: grüne Füllung (Breite via JS = pct%) auf weißem Track mit dunklem Rand */
.lb-bar { width: 100%; height: calc(11 * var(--u)); background: #ffffff; border: 0.4cqw solid #3A1B1A; overflow: hidden; }
.lb-bar-fill { height: 100%; width: 0; background: #4caf50; }
/* TRY AGAIN: full-width flacher Button (orange + dunkler Rand), wie im neuen Design */
.lb-btn {
  width: 100%; height: calc(26 * var(--u));
  display: flex; align-items: center; justify-content: center;
  background: #F07F3E; border: 0.5cqw solid #3A1B1A; border-radius: 0.4cqw;
  color: #3A1B1A; font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: -0.06em;
  cursor: pointer; -webkit-user-drag: none; padding: 0;
}

/* ============================================================
   MODALS / INFO
   ============================================================ */
.modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.5); }
.modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  background: var(--beige);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 3px solid var(--maroon-d);
}
.modal-content iframe { width: 100%; height: 300px; border: 1px solid #ccc; }
.close { float: right; font-size: 28px; color: var(--muted); cursor: pointer; line-height: 1; }
.close:hover { color: var(--ink); }

body.modal-open .device,
body.modal-open #info-circle { filter: blur(4px); pointer-events: none; }

/* Ecken-Buttons unten-links: Info + Volume-Toggle. Gelieferte SVGs sind #333 -> auf dem
   dunkelroten Hintergrund unsichtbar. Deshalb weiß einfärben (brightness(0) invert(1)):
   sichtbar auf Dunkelrot (Desktop) UND auf dem orangen Gerät (mobil). */
.corner-btn {
  position: fixed; left: 18px;
  width: 45px; height: 45px;   /* Team: Größe x1.5 (30 -> 45), gleiche Position */
  padding: 0; border: 0; background: none;
  cursor: pointer; z-index: 40;
  -webkit-tap-highlight-color: transparent;
}
.corner-btn img { width: 100%; height: 100%; object-fit: contain; display: block; filter: brightness(0) invert(1); }
/* Mobile-Overrides NACH den Basis-Regeln (Cascade!): Icons dunkel auf Orange + Controls +15%.
   Muss hinter .corner-btn img (oben) UND .controls --u stehen, sonst gewinnt die spätere Basis-Regel. */
@media (pointer: coarse), (max-width: 700px) {
  .corner-btn img { filter: none; }              /* Mobile: native dunkle Icons (#333) auf Orange */
  .controls { --u: calc(0.2488cqw * 1.15); }     /* Mobile: Controls 15% größer (gegen Fettfinger) */
}
#info-circle { bottom: 18px; }          /* unterste Ecke (wie Mockup) */
#volume-btn  { bottom: 71px; }          /* direkt über dem Info-Button (18 + 45 + 8px Gap) */
/* Mute-Icon (button-volume-off) ist im gelieferten Asset ~35px nach links gezeichnet (Lautsprecher gleich groß) ->
   nur per Translation aufs On-Icon ausrichten, damit der Lautsprecher beim Toggle an Ort UND Größe bleibt
   (nur der Slash kommt als Mute-Indikator dazu). KEIN Scale (das machte den Mute-Icon zu groß). */
body.muted #volume-btn img { transform: translate(11.7%, -1%); transform-origin: center; }
.modal2 {
  display: none;
  position: fixed;
  bottom: 56px; left: 18px;
  width: 210px;
  background: var(--beige);
  border: 2px solid var(--maroon-d);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 41;
}
.modal2.show { display: block; opacity: 1; transform: translateY(0); }
.modal-content2 { padding: 12px 14px; position: relative; }
.modal-content2 h2 { margin: 0 0 8px; color: var(--muted); font-size: 1em; }
.modal-content2 ul { list-style: none; padding: 0; margin: 0; }
.modal-content2 li { margin: 6px 0; }
.modal-content2 a { color: var(--ink); text-decoration: none; font-weight: 400; }
.modal-content2 a:hover { text-decoration: underline; }
.close-button2 { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--orange); cursor: pointer; font-size: 14px; }