/* ============================================================================
   Enko Digital Invaders - game styles (mobile-first)
   ========================================================================= */

:root {
  /* ── ENKO brand foundation (CI) - design_system.md §A.1 ─────────── */
  --enko-primary:        #416172;
  --enko-primary-light:  #8CD9FF;
  --enko-secondary:      #29A69C;
  --enko-signal:         #FAFA64;
  --enko-deep-navy:      #273444;
  --enko-navy-deep:      #1A272E;
  --enko-slate:          #344E5B;

  /* ── Background system - §A.2 ───────────────────────────────────── */
  --bg-top:              #1F2C3A;
  --bg-mid:              #16222E;
  --bg-bottom:           #0E1820;
  --bg-grid:             rgba(140, 217, 255, 0.08);

  /* ── Reserved gameplay tokens - §A.3 (NEVER reuse outside role) ── */
  --enemy-body:          #B58A5A;
  --enemy-body-shadow:   #7C5A3E;
  --enemy-outline:       #2A1D12;
  --enemy-warning:       #FF7A2E;

  --friendly-body:       #C7F2FF;
  --friendly-glow:       #8CD9FF;
  --friendly-outline:    #173041;

  --player-body:         #416172;
  --player-cockpit:      #C7F2FF;
  --player-thruster:     #8CD9FF;
  --player-shield:       #8CD9FF;
  --bullet-player:       #FAFA64;

  /* ── VFX semantic colors - §A.3 ─────────────────────────────────── */
  --vfx-danger:          #E5413B;
  --vfx-success:         #29A69C;
  --vfx-neutral:         #8CD9FF;

  /* ── HUD/Toast text & glass - §A.3 ──────────────────────────────── */
  --text-primary:        #F4FBFF;
  --text-secondary:      #B8D2DE;
  --text-muted:          #6A8493;
  --glass-fill:          rgba(255, 255, 255, 0.08);
  --glass-fill-strong:   rgba(255, 255, 255, 0.12);
  --glass-border:        rgba(255, 255, 255, 0.18);
  --glass-blur:          blur(18px) saturate(140%);

  /* ── Button surface derivatives (scoped - outside spec §A) ──────── */
  --btn-primary:         #25958C;
  --btn-primary-hover:   #19645E;
  --btn-primary-active:  #10432E;

  /* ── Layout & elevation ─────────────────────────────────────────── */
  --radius-md:           clamp(14px, 2.4vw, 22px);
  --radius-sm:           10px;
  --shadow-elev:         0 24px 60px -20px rgba(0, 0, 0, 0.55);

  /* ── Form-surface text & status (registration / leaderboard UI) ── */
  --text-on-dark:        #ffffff;
  --text-soft:           rgba(255, 255, 255, 0.78);
  --text-form-muted:     rgba(255, 255, 255, 0.60);
  --error:               #FF7B7B;
  --error-bg:            rgba(255, 80, 80, 0.12);
  --success:             #6FE3D5;

  /* ── Menu UI Language - design_system.md §E ─────────────────────── */
  /* Spacing scale: fluid, viewport-aware. Use these instead of one-off
     clamp() expressions so spacing is coherent across menu screens.    */
  --gap-xs:              clamp(4px,  1vw,   6px);
  --gap-sm:              clamp(8px,  2vw,   12px);
  --gap-md:              clamp(12px, 3vw,   18px);
  --gap-lg:              clamp(18px, 4vw,   28px);
  --gap-xl:              clamp(28px, 5.5vw, 44px);

  /* Typography hierarchy: 5 tiers, no per-screen invention.            */
  --type-display:        clamp(1.6rem,  6.4vw, 2.4rem);   /* hero titles */
  --type-h2:             clamp(1.2rem,  4.4vw, 1.5rem);   /* modal titles */
  --type-body:           clamp(0.95rem, 3.4vw, 1.05rem);  /* paragraphs */
  --type-label:          clamp(0.78rem, 2.8vw, 0.88rem);  /* form labels */
  --type-mono:           clamp(0.7rem,  2.4vw, 0.82rem);  /* HUD, tags  */

  /* Surface elevation: three tiers, all glass.                          */
  --surface-1-fill:      rgba(255, 255, 255, 0.06);  /* full-screen host */
  --surface-1-blur:      blur(24px) saturate(140%);
  --surface-2-fill:      rgba(255, 255, 255, 0.10);  /* modal dialog     */
  --surface-2-blur:      blur(28px) saturate(140%);
  --surface-3-fill:      rgba(255, 255, 255, 0.04);  /* in-modal card    */

  /* Motion: two timings cover everything. Respect prefers-reduced-motion.*/
  --motion-fast:         180ms ease-out;
  --motion-base:         260ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Focus ring - single source of truth, used on every focusable.       */
  --focus-ring:          0 0 0 3px rgba(140, 217, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* iOS Safari: classic 100vh trap (it counts the dynamic URL bar). We use a
     three-tier fallback: --app-height (set by JS from visualViewport.height)
     beats 100vh, and 100dvh beats both on modern browsers that support it. */
  height: var(--app-height, 100vh);
  height: 100dvh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-on-dark);
  background: var(--enko-deep-navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  background:
    radial-gradient(ellipse at 20% 0%,  rgba(140, 217, 255, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(41, 166, 156, 0.14), transparent 60%),
    linear-gradient(180deg, #1F2C3A 0%, #0E1820 100%);
  background-attachment: fixed;
}

#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

button { font-family: inherit; }

/* ============================================================================
   Layout: screens
   ========================================================================= */

#app {
  position: relative;
  z-index: 1;
  /* Same three-tier fallback as html/body. */
  height: var(--app-height, 100vh);
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  padding-top: calc(env(safe-area-inset-top, 0) + clamp(12px, 3vw, 24px));
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + clamp(12px, 3vw, 24px));
  overflow: hidden;
}

/* The game screen fills the visible viewport, even on iOS Safari where the
   URL bar can shrink the chrome mid-run. We let #app set the final height,
   and the game-frame just fills it. On phones we collapse the host padding
   so the playfield runs edge-to-edge; tablets/desktops keep the framed
   inset (handled below in the wider breakpoint). */
.screen--game {
  align-items: stretch;
  justify-content: stretch;
}
@media (max-width: 720px) {
  /* Edge-to-edge on phones - but preserve the safe-area insets so the
     notch/dynamic island never crops the HUD. */
  #app:has(.screen--game:not([hidden])) {
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) 0;
  }
  .screen--game .game-frame {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

.screen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen[hidden] { display: none; }

/* ============================================================================
   Glass panel
   ========================================================================= */

.glass-panel {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: clamp(16px, 4vw, 28px);
  box-shadow: var(--shadow-elev);
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ============================================================================
   Brand row
   ========================================================================= */

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(12px, 3vw, 20px);
}

.brand-mark svg {
  display: block;
  height: clamp(18px, 3.6vw, 24px);
  width: auto;
}

.brand-tag {
  font-size: clamp(0.72rem, 2.6vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

/* ============================================================================
   Headings & body text
   ========================================================================= */

.hero-title {
  font-size: clamp(1.6rem, 6.4vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 clamp(8px, 2vw, 12px);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, var(--enko-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub, .greeting {
  font-size: clamp(0.95rem, 3.4vw, 1.05rem);
  line-height: 1.5;
  margin: 0 0 clamp(12px, 3vw, 18px);
  color: var(--text-soft);
}

.greeting {
  font-weight: 600;
  color: var(--text-on-dark);
}

.explainer {
  font-size: clamp(0.95rem, 3.4vw, 1.05rem);
  line-height: 1.5;
  margin: 0 0 clamp(14px, 3.4vw, 20px);
  padding: clamp(12px, 3vw, 16px);
  border-radius: var(--radius-sm);
  background: rgba(140, 217, 255, 0.10);
  border-left: 3px solid var(--enko-primary-light);
  color: var(--text-on-dark);
}

/* ============================================================================
   Form fields
   ========================================================================= */

.form { display: flex; flex-direction: column; gap: clamp(12px, 3vw, 16px); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2.6vw, 14px);
}
/* Mobile (<540 px): firstName + lastName share a row, email + company each
   take a full row so the long values aren't squeezed into ~150 px on phones. */
.form-grid > .field { grid-column: span 2; }
.form-grid > .field:nth-child(1),
.form-grid > .field:nth-child(2) { grid-column: span 1; }
@media (min-width: 540px) {
  /* Tablet+: every field is half-width (the original 2x2 grid layout). */
  .form-grid > .field { grid-column: span 1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.field-label {
  font-size: clamp(0.78rem, 2.8vw, 0.88rem);
  font-weight: 600;
  color: var(--text-soft);
}

.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  font-family: inherit;
  font-size: clamp(0.95rem, 3.4vw, 1rem);
  padding: clamp(10px, 2.6vw, 12px) 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(26, 39, 46, 0.55);
  color: var(--text-on-dark);
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  min-height: 44px;
}

.field input::placeholder { color: rgba(255, 255, 255, 0.42); }

.field input:focus {
  border-color: var(--enko-primary-light);
  box-shadow: 0 0 0 3px rgba(140, 217, 255, 0.25);
  background: rgba(26, 39, 46, 0.7);
}

.field.invalid input {
  border-color: var(--error);
  background: var(--error-bg);
}

.field-error {
  display: block;
  min-height: 1em;
  margin-top: 2px;
  font-size: clamp(0.76rem, 2.6vw, 0.84rem);
  color: var(--error);
}
.field-error:empty { display: none; }

/* Consent */

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(10px, 2.6vw, 14px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  transition: background 0.18s, border-color 0.18s;
}
.consent input[type="checkbox"]:checked {
  background: var(--enko-secondary);
  border-color: var(--enko-secondary);
}
.consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px 5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  width: 6px;
  height: 10px;
  top: 2px;
  left: 6px;
}
.consent input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(140, 217, 255, 0.4);
  outline: none;
}

.consent-text {
  font-size: clamp(0.82rem, 3vw, 0.92rem);
  line-height: 1.45;
  color: var(--text-soft);
}
.consent-text a {
  color: var(--enko-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-text a:hover { text-decoration: none; }
.consent-text a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.data-info {
  font-size: clamp(0.8rem, 2.8vw, 0.88rem);
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.data-info > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-soft);
}
.data-info p { margin: 8px 0 0; line-height: 1.45; }
.data-info a {
  color: var(--enko-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.data-info a:hover { text-decoration: none; }
.data-info-links {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ============================================================================
   Buttons
   ========================================================================= */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(8px, 2vw, 12px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.2vw, 1rem);
  letter-spacing: 0.01em;
  padding: clamp(10px, 2.8vw, 14px) clamp(16px, 4vw, 22px);
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-on-dark);
  transition: background 0.18s, border-color 0.18s, transform 0.05s, box-shadow 0.18s;
  flex: 1 1 auto;
  min-width: 140px;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(140, 217, 255, 0.55);
}

.btn--primary {
  background: var(--btn-primary);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px -10px rgba(41, 166, 156, 0.7);
}
.btn--primary:hover  { background: var(--btn-primary-hover); }
.btn--primary:active { background: var(--btn-primary-active); transform: translateY(1px); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-on-dark);
}
.btn--ghost:hover  { background: rgba(255, 255, 255, 0.12); }
.btn--ghost:active { background: rgba(255, 255, 255, 0.18); transform: translateY(1px); }

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Compact variant - secondary actions row on Game Over (Hauptmenü, Hilfe).
   Keeps the row from competing with the primary "Nochmal spielen" CTA. */
.btn--compact {
  min-height: 40px;
  padding: 8px 14px;
  font-size: clamp(0.82rem, 2.8vw, 0.9rem);
  font-weight: 600;
}
.form-row--secondary {
  margin-top: 4px;
  gap: 8px;
}
.form-row--secondary .btn { flex: 0 1 auto; }

.link-btn {
  background: transparent;
  border: 0;
  color: var(--enko-primary-light);
  cursor: pointer;
  padding: 6px 4px;
  font-size: clamp(0.8rem, 2.8vw, 0.88rem);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: center;
}
.link-btn:focus-visible {
  outline: 2px solid var(--enko-primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

.form-status {
  margin: 0;
  font-size: clamp(0.85rem, 3vw, 0.92rem);
  color: var(--text-soft);
}
/* Collapse to zero height when there is no message — no min-height ghost
   reserving a blank line below the submit button. aria-live still works:
   the element transitions from display:none → block when JS writes text,
   and modern screen readers announce content changes across that flip. */
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); margin-top: 8px; }
.form-status.is-success { color: var(--success); margin-top: 8px; }

/* ============================================================================
   Start screen
   ========================================================================= */

.start-panel { max-width: 600px; }

.controls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0 0 clamp(14px, 3.4vw, 20px);
}
.control-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  font-size: clamp(0.86rem, 3vw, 0.94rem);
}
.control-key {
  font-weight: 700;
  color: var(--enko-primary-light);
  font-size: clamp(0.76rem, 2.6vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.control-desc { color: var(--text-soft); }

/* Stats row */

.stats-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 clamp(14px, 3.4vw, 20px);
}
@media (min-width: 460px) {
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.stats-row--over { margin-bottom: 12px; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(10px, 2.6vw, 14px);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(65, 97, 114, 0.55), rgba(39, 52, 68, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-label {
  font-size: clamp(0.7rem, 2.4vw, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
.stat-value {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 800;
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
}

/* Leaderboard CTA inside the Persönliche-Bestleistung stat - pairs the
   personal best with the natural follow-up action ("where do I rank?")
   instead of leaving Leaderboard as a third equal-weight button. */
.stat--with-action { gap: var(--gap-sm); }
.stat-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-top: 4px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--enko-primary-light);
  background: rgba(140, 217, 255, 0.08);
  border: 1px solid rgba(140, 217, 255, 0.28);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.stat-action::after {
  content: "→";
  font-weight: 600;
}
.stat-action:hover {
  background: rgba(140, 217, 255, 0.14);
  border-color: rgba(140, 217, 255, 0.45);
}
.stat-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================================
   Game frame & HUD
   ========================================================================= */

.game-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Transparent - the gameCanvas paints its own deep-space backdrop. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-elev);
}

/* Pause: blur the playfield so the player can't scout upcoming hazards or
   pre-plan a move while the clock is frozen. HUD stays crisp because it
   sits in its own DOM node (not a canvas child) and isn't a target here. */
.game-frame.is-paused #gameCanvas {
  filter: blur(12px) brightness(0.5);
  transition: filter var(--motion-base);
}
.game-frame:not(.is-paused) #gameCanvas {
  transition: filter var(--motion-base);
}

/* HUD strip - two semantic groups (left = score+lives, right = time+obs+pause).
   On phones, both groups sit on the same row using flex (auto-shrink), keeping
   the pause button anchored to the right and the score-block anchored to the
   left without grid columns collapsing. */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 14px);
  padding: clamp(8px, 2vw, 12px) clamp(12px, 2.6vw, 16px);
  padding-top: calc(env(safe-area-inset-top, 0) + clamp(8px, 2vw, 12px));
  background: linear-gradient(180deg, rgba(14,24,32,0.55), rgba(14,24,32,0.30));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(140, 217, 255, 0.18);
  min-height: 56px;
  position: relative;
  z-index: 5;
}
.hud::after {
  /* Subtle cyan rule under the HUD - reads as "console edge." */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,217,255,0.45), transparent);
  pointer-events: none;
}
@media (min-width: 720px) { .hud { min-height: 64px; } }

.hud-group {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px);
  min-width: 0;
}
.hud-group--right { gap: clamp(8px, 2vw, 14px); }

.hud-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.05;
}
.hud-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.58rem, 1.9vw, 0.68rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(184, 210, 222, 0.65);
  font-weight: 600;
  margin-bottom: 2px;
}
.hud-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  text-shadow: 0 0 12px rgba(140, 217, 255, 0.35);
}
.hud-cell--lives .hud-value {
  color: var(--enko-signal);
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(250, 250, 100, 0.55);
}

.hud-pause {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(140, 217, 255, 0.32);
  background: rgba(14, 24, 32, 0.45);
  color: var(--text-on-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  flex: 0 0 auto;
}
.hud-pause:hover { background: rgba(140, 217, 255, 0.18); border-color: rgba(140, 217, 255, 0.55); }
.hud-pause:active { transform: translateY(1px); }
.hud-pause:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(140, 217, 255, 0.55);
}

#gameCanvas {
  flex: 1;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  background: transparent;
  touch-action: none;
}

/* ============================================================================
   Overlays (countdown / pause)
   ========================================================================= */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 24, 32, 0.55);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.overlay[hidden] { display: none; }

.countdown-num {
  font-size: clamp(5rem, 22vw, 12rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 40px rgba(140, 217, 255, 0.55);
  animation: countPulse 0.95s ease-out;
}

@keyframes countPulse {
  0%   { transform: scale(0.4); opacity: 0; }
  35%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}

.pause-panel {
  text-align: center;
  max-width: 460px;
}
.pause-panel h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 5.4vw, 2rem);
}
.pause-panel p {
  margin: 0 0 16px;
  color: var(--text-soft);
  line-height: 1.45;
}

/* ============================================================================
   Toast stack (booster / milestone notifications)
   ========================================================================= */

/* Toast stack - anchored to the bottom of the playfield as a footer rail.
   Single-line pill design: icon dot + label + body, all on one row. The
   marketing message popping over the playfield is the visual headline; the
   toast is now just a discreet hint that a booster fired. */
.toast-stack {
  position: absolute;
  z-index: 9;
  display: flex;
  flex-direction: column-reverse;   /* newest above older as they stack up */
  gap: 6px;
  pointer-events: none;
  bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  width: max-content;
  max-width: calc(100% - 24px);
}
@media (min-width: 720px) {
  .toast-stack {
    bottom: 16px;
    max-width: 540px;
  }
}

.toast {
  pointer-events: auto;
  position: relative;
  background: rgba(14, 24, 32, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-primary);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(8px);
  animation: toastIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.toast.is-leaving {
  animation: toastOut 0.24s ease-out forwards;
}
.toast::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--toast-accent, var(--enko-primary-light));
  opacity: 0.35;
  pointer-events: none;
}
@keyframes toastIn  { to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

.toast-icon {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, var(--toast-accent, var(--enko-primary-light)) 0%, transparent 60%),
    rgba(255, 255, 255, 0.04);
  color: var(--toast-accent, var(--enko-primary-light));
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}
.toast-icon svg {
  width: 13px; height: 13px;
  display: block;
  fill: currentColor;
}

.toast-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast-title {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--toast-accent, var(--enko-primary-light));
  flex: 0 0 auto;
}
.toast-body {
  font-size: clamp(0.74rem, 2.4vw, 0.82rem);
  line-height: 1.2;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.toast--info      { --toast-accent: #8CD9FF; }
.toast--good      { --toast-accent: #29A69C; }
.toast--warning   { --toast-accent: #FAFA64; }
.toast--milestone {
  --toast-accent: #FAFA64;
  background: rgba(14, 24, 32, 0.78);
}

/* On phones the body is too tight for both label + body in a pill. Hide
   the body text and lean on the title alone for a glance-readable tag. */
@media (max-width: 480px) {
  .toast-body { display: none; }
  .toast { padding: 5px 12px 5px 6px; gap: 8px; }
  .toast-icon { width: 20px; height: 20px; }
  .toast-icon svg { width: 12px; height: 12px; }
  .toast-title { font-size: 0.6rem; }
}

/* ============================================================================
   Game over panel
   ========================================================================= */

.over-panel {
  max-width: 520px;
  text-align: center;
  /* Notes Round 3: spread the buttons out a bit so the panel reads
     calmer. Extra padding around the form-rows + larger margins above
     the primary action group give the layout room to breathe. */
  padding-bottom: clamp(20px, 4vw, 28px);
}
/* Tablet/desktop: lock both action rows into a 2-column grid so the
   four buttons line up edge-to-edge. flex's `1 1 auto` was sizing
   them to their text width, which left "Nochmal spielen" narrower
   than "Leaderboard ansehen" on row 1 and the secondary buttons
   visually offset from the primary row. Grid columns of 1fr 1fr
   guarantee equal widths within each row, and identical grid
   declarations on both rows mean the columns align vertically too. */
@media (min-width: 480px) {
  .over-panel .form-row,
  .over-panel .form-row--secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
    margin-left: auto;
    margin-right: auto;
    max-width: 440px;
  }
  .over-panel .form-row--secondary { margin-top: 10px; }
  .over-panel .form-row .btn,
  .over-panel .form-row--secondary .btn {
    /* Override the global .btn flex sizing so the grid columns decide
       the width, not the button's content. */
    flex: unset;
    min-width: 0;
    width: 100%;
  }
}
/* Phone: keep the existing wrap-flow but tighten the gaps so it
   doesn't look spaced-out at small widths. */
.over-panel .form-row { gap: 10px; margin-top: clamp(14px, 3vw, 18px); }
.over-panel .form-row--secondary { margin-top: 8px; gap: 10px; }
.over-panel h2 {
  margin: 0 0 4px;
  font-size: clamp(1.7rem, 5.6vw, 2.2rem);
}
.over-sub {
  margin: 0 0 clamp(14px, 3vw, 18px);
  color: var(--text-soft);
}
.over-pers {
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  color: var(--enko-signal);
  font-weight: 700;
  margin: 0 0 14px;
}

/* Slimline stats row for the new Game Over layout (Wave 3.3). Replaces the
   three full stat-cards with one tabular line so mobile fits without scroll.
   Tabular nums lock the columns even as the score climbs into 6+ digits. */
.over-stats-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--gap-sm) var(--gap-md);
  margin: var(--gap-md) 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.over-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.over-stat-num {
  font-size: clamp(1.05rem, 4.2vw, 1.4rem);
  font-weight: 800;
  color: var(--text-on-dark);
}
.over-stat-label {
  font-size: var(--type-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}
.over-stat-sep {
  color: var(--text-muted);
  opacity: 0.6;
}

/* ============================================================================
   Responsive: small phones
   ========================================================================= */

@media (max-width: 480px) {
  .toast-stack > .toast:nth-child(n+2) { display: none; }
  .form-row .btn { min-width: 100%; }
  .hud-group { gap: 12px; }
  .hud-group--right { gap: 10px; }
}

@media (max-width: 360px) {
  .hud-cell--obstacles { display: none; }
}

/* ============================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Brand row actions (lang switch + identity)
   ========================================================================= */

.brand-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(14,24,32,0.45);
  padding: 2px;
  overflow: hidden;
}
.lang-btn {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  border-radius: 999px;
  min-width: 36px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.lang-btn:hover { color: rgba(255,255,255,0.85); }
.lang-btn.is-active {
  background: var(--enko-primary-light);
  color: #1A272E;
  box-shadow: 0 2px 8px -2px rgba(140,217,255,0.6);
}
.lang-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(140,217,255,0.45);
}

/* ============================================================================
   Killer-enemy card (Game Over)
   ========================================================================= */

.killer-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  margin: 0 0 clamp(14px, 3vw, 18px);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 15% 0%,  rgba(255,122,46,0.18), transparent 60%),
    linear-gradient(180deg, rgba(229,65,59,0.10), rgba(229,65,59,0.04));
  border: 1px solid rgba(255,122,46,0.42);
  text-align: left;
  box-shadow: 0 8px 24px -16px rgba(229,65,59,0.5);
}
.killer-card[hidden] { display: none; }
.killer-card-art {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,122,46,0.25), rgba(0,0,0,0));
  border: 1px solid rgba(255,122,46,0.35);
}
.killer-card-art canvas {
  display: block;
  width: 80px;
  height: 80px;
}
.killer-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.killer-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--enemy-warning);
  font-weight: 700;
}
.killer-name {
  font-size: clamp(1.05rem, 3.8vw, 1.3rem);
  font-weight: 800;
  color: var(--text-on-dark);
}
.killer-msg {
  margin: 0;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  line-height: 1.45;
  color: var(--text-soft);
}
@media (max-width: 480px) {
  .killer-card { grid-template-columns: 72px 1fr; padding: 10px 12px; }
  .killer-card-art { width: 72px; height: 72px; }
  .killer-card-art canvas { width: 64px; height: 64px; }
}

/* ============================================================================
   Help screen
   ========================================================================= */

.screen--help {
  z-index: 50;
  background: rgba(14, 24, 32, 0.65);
  backdrop-filter: blur(8px);
}
.help-panel {
  /* Notes Round 3: tighter modal so it sits cleanly inside the dark
     overlay - same treatment as the leaderboard. */
  max-width: 720px;
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100dvh - 64px);
  margin: 24px auto;
}
@media (min-width: 980px) {
  /* Desktop: still keep the modal visibly inset from the screen edges.
     The earlier 1320px / 94vw made it look edge-to-edge on 1080p panels. */
  .help-panel {
    max-width: min(960px, 80vw);
    gap: 20px;
    padding: clamp(20px, 2.5vw, 32px);
  }
}
.help-intro {
  margin: 0;
  font-size: clamp(0.95rem, 3.2vw, 1.05rem);
  line-height: 1.5;
  color: var(--text-soft);
  padding: clamp(12px, 3vw, 16px);
  border-radius: var(--radius-sm);
  background: rgba(140, 217, 255, 0.10);
  border-left: 3px solid var(--enko-primary-light);
  color: var(--text-on-dark);
}

/* At-a-glance legend - two live-rendered sample sprites teach the
   collect-vs-avoid rule without text. Sits right above the controls
   section so first-time players see it before reading anything. */
.help-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
}
@media (min-width: 540px) {
  .help-legend { grid-template-columns: 1fr 1fr; }
}
.help-legend-cell {
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "art title"
    "art desc";
  column-gap: var(--gap-md);
  row-gap: 2px;
  align-items: center;
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--radius-sm);
  background: var(--surface-3-fill);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.help-legend-cell--collect {
  border-left: 3px solid var(--friendly-glow);
}
.help-legend-cell--avoid {
  border-left: 3px solid var(--enemy-warning);
}
.help-legend-canvas {
  grid-area: art;
  display: block;
  width: 80px;
  height: 80px;
  align-self: center;
  justify-self: center;
}
.help-legend-cell strong { grid-area: title; align-self: end; }
.help-legend-cell span   { grid-area: desc; align-self: start; }
.help-legend-cell strong {
  display: block;
  font-size: clamp(0.95rem, 3.2vw, 1.05rem);
  color: var(--text-on-dark);
  margin-bottom: 2px;
}
.help-legend-cell span {
  font-size: var(--type-label);
  color: var(--text-soft);
  line-height: 1.4;
}
.help-section h3 {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 3.6vw, 1.2rem);
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, var(--enko-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 540px) {
  .help-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .help-grid { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
}

.help-cell {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  min-width: 0;
}
@media (min-width: 980px) {
  .help-cell { grid-template-columns: 88px 1fr; padding: 14px 16px; gap: 14px; }
}
.help-cell--enemy {
  background: linear-gradient(180deg, rgba(124,90,62,0.10), rgba(0,0,0,0));
  border-color: rgba(255,122,46,0.20);
}
.help-cell--powerup {
  background: linear-gradient(180deg, rgba(140,217,255,0.10), rgba(0,0,0,0));
  border-color: rgba(140,217,255,0.25);
}
.help-cell--rare {
  background: linear-gradient(180deg, rgba(63,227,184,0.16), rgba(0,0,0,0));
  border-color: rgba(63,227,184,0.45);
  box-shadow: 0 0 0 1px rgba(63,227,184,0.18) inset, 0 8px 22px -16px rgba(63,227,184,0.5);
}

.help-cell-art {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.18);
}
.help-cell-art canvas { display: block; }

.help-cell-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-cell-name {
  font-weight: 800;
  font-size: clamp(0.9rem, 3vw, 1rem);
  color: var(--text-on-dark);
  line-height: 1.2;
  /* Wrap long names like "Reklamations-Stempel" instead of truncating with
     an ellipsis - the catalogue is dense; readers need the full label. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.help-cell-tag {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--enemy-warning);
  font-weight: 700;
}
.help-cell--powerup .help-cell-tag { color: var(--enko-primary-light); }
.help-cell-desc {
  margin: 4px 0 0;
  font-size: clamp(0.78rem, 2.8vw, 0.86rem);
  line-height: 1.4;
  color: var(--text-soft);
}
.help-cell-rare-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 800;
  background: linear-gradient(90deg, rgba(63,227,184,0.30), rgba(250,250,100,0.30));
  color: #FFFEC9;
  border: 1px solid rgba(63,227,184,0.55);
}

.help-tips {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(0.88rem, 3vw, 0.96rem);
  color: var(--text-soft);
}
.help-tips li::marker { color: var(--enko-primary-light); }

/* ============================================================================
   Audio toggle
   ========================================================================= */

.enko-audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.14));
  background: var(--glass-fill, rgba(20,28,40,0.55));
  color: var(--text-soft, rgba(244,251,255,0.78));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.enko-audio-toggle:hover {
  color: var(--text-primary, #F4FBFF);
  background: var(--glass-fill-strong, rgba(30,42,58,0.7));
  border-color: rgba(140,217,255,0.45);
}
.enko-audio-toggle:focus-visible {
  outline: 2px solid var(--enko-primary-light, #8CD9FF);
  outline-offset: 2px;
}
.enko-audio-toggle:active { transform: translateY(1px); }
.enko-audio-toggle[data-muted="true"] {
  color: rgba(244,251,255,0.45);
  border-color: rgba(255,255,255,0.10);
}
/* The floating-controls wrapper (in index.html, sibling of <main>) is the
   single positioning anchor for the global lang switch + mute toggle. The
   button itself is just an inline-flex child — no longer self-positioning. */
.floating-controls {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 9000;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.enko-audio-toggle--floating {
  /* Positioning now provided by .floating-controls. Kept for backwards
     compat with audio.js's selector but no fixed positioning here. */
  position: static;
}
.enko-audio-toggle--inline {
  margin: 14px auto 0;
  display: flex;
}
/* HUD-inline mute (Notes Round 3): sits in the gameplay top-bar next
   to the pause button so it no longer fights with modal close buttons
   on mobile. Slightly smaller to match .hud-pause. */
.enko-audio-toggle--hud {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(140, 217, 255, 0.32);
  background: rgba(14, 24, 32, 0.45);
  flex: 0 0 auto;
}
.enko-audio-toggle--hud:hover {
  background: rgba(140, 217, 255, 0.18);
  border-color: rgba(140, 217, 255, 0.55);
}

/* Visibility rules for the .floating-controls pill (lang switch + mute).
   In-game: the entire pill is hidden — mute lives in the HUD; the lang
   switch is intentionally not surfaced during a run.
   Modal screens (leaderboard, help, game-over): hide only the floating
   mute button because it would overlap the modal's own close button on
   small phones (the reported bug). The lang switch stays visible because
   it sits to the left of the mute and doesn't reach the close-button
   zone. */
@supports selector(:has(*)) {
  body:has(#screenGame:not([hidden])) .floating-controls {
    display: none;
  }
  body:has(#screenLeaderboard:not([hidden])) .enko-audio-toggle--floating,
  body:has(#screenHelp:not([hidden])) .enko-audio-toggle--floating,
  body:has(#screenOver:not([hidden])) .enko-audio-toggle--floating,
  body:has(#screenOverFlash:not([hidden])) .enko-audio-toggle--floating {
    display: none;
  }
}

/* ============================================================================
   Welcome screen - prize call-out
   ============================================================================
   Notes §3.1: the daily top scorer wins an E-Scooter. This card surfaces
   the prize as the second thing on the welcome screen (right after the
   greeting) so first-time players know what they're playing for. */

.prize-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--gap-md);
  margin: 0 0 var(--gap-md);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 18% 0%, rgba(250,250,100,0.16), transparent 60%),
    linear-gradient(180deg, rgba(41,166,156,0.18), rgba(41,166,156,0.06));
  border: 1px solid rgba(250,250,100,0.45);
  box-shadow:
    0 8px 22px -14px rgba(41,166,156,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
.prize-card::before {
  /* Subtle shimmer rail along the top edge - reads as "prize is live". */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250,250,100,0.55), transparent);
  pointer-events: none;
}
.prize-icon {
  width: 56px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--enko-signal);
  filter: drop-shadow(0 0 10px rgba(250,250,100,0.45));
}
.prize-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.prize-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prize-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.62rem, 2.2vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--enko-signal);
  font-weight: 700;
}
.prize-headline {
  font-size: clamp(1rem, 3.6vw, 1.18rem);
  font-weight: 800;
  color: var(--text-on-dark);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
@media (max-width: 380px) {
  .prize-card { grid-template-columns: 44px 1fr; padding: 10px 12px; }
  .prize-icon { width: 44px; height: 30px; }
}

/* ============================================================================
   Game Over - 5-second flash modal
   ============================================================================
   Notes §2.1: brief death-card overlay shown for ~5s, auto-transitions or
   tap-to-skip. Sits above all the regular screens with its own deep glass
   surface so the transition into the full Game Over panel feels intentional. */

.screen--over-flash {
  z-index: 60;
  background:
    radial-gradient(circle at 50% 30%, rgba(229,65,59,0.22), transparent 60%),
    rgba(14, 24, 32, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  cursor: pointer;
  animation: overFlashIn var(--motion-base);
}
@keyframes overFlashIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.over-flash-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding: clamp(28px, 7vw, 56px);
  border-radius: var(--radius-md);
  background: rgba(20, 30, 40, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-elev);
  max-width: 460px;
  width: calc(100% - 32px);
  text-align: center;
}
.over-flash-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.7rem, 2.4vw, 0.82rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vfx-danger);
  font-weight: 700;
}
.over-flash-title {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, var(--vfx-danger) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.over-flash-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: var(--gap-xs);
}
.over-flash-score-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark);
  text-shadow: 0 0 24px rgba(140, 217, 255, 0.4);
}
.over-flash-score-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.over-flash-cause {
  margin: 4px 0 0;
  font-size: clamp(0.92rem, 3.2vw, 1.05rem);
  color: var(--text-soft);
  min-height: 1.4em;
}
.over-flash-cause:empty { display: none; }

/* Marketing punch-line that explains WHY the analog item is bad
   (Notes Round 3: "Notizen verschwinden. Daten bleiben."). Sits below
   the killer name and is intentionally a little smaller + softer so the
   identity of the killer (the name line above) still leads visually. */
.over-flash-cause-msg {
  margin: 6px 0 0;
  padding: 10px 16px;
  font-size: clamp(0.86rem, 3vw, 0.98rem);
  line-height: 1.45;
  color: var(--text-on-dark);
  font-style: italic;
  background: rgba(140, 217, 255, 0.08);
  border-left: 3px solid var(--enko-primary-light);
  border-radius: var(--radius-sm);
  max-width: 380px;
}
.over-flash-cause-msg:empty { display: none; }
.over-flash-hint {
  margin-top: var(--gap-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(184, 210, 222, 0.55);
  animation: overFlashHint 1.6s ease-in-out infinite;
}
@keyframes overFlashHint {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.95; }
}

/* ============================================================================
   Test-mode toggle (dev-only)
   Subdued slate chip - intentionally calmer than .prize-card. Internal
   affordance, not a feature, so no glow / no gradient / no shimmer.
   ========================================================================= */

.test-mode-row {
  margin: var(--gap-sm) 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92em;
}
.test-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
}
.test-mode-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--enko-signal, #fafa64);
  cursor: pointer;
  flex: 0 0 auto;
}
.help-section--testmode {
  border-left: 2px solid rgba(255, 255, 255, 0.22);
  padding-left: 12px;
}

/* ============================================================================
   Utility
   ========================================================================= */

[hidden] { display: none !important; }

/* ============================================================================
   Scrollbars - HUD console aesthetic
   ----------------------------------------------------------------------------
   Cyan -> teal fiber-optic indicator riding in a darkened rail. Matches
   the cyan rule under .hud and the focus-ring glow. Firefox gets a
   resting color via scrollbar-color (inherited from :root); WebKit gets
   the full hover/active glow treatment.
   ========================================================================= */

:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 217, 255, 0.55) rgba(14, 24, 32, 0.35);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(14, 24, 32, 0.40) 12%,
    rgba(14, 24, 32, 0.40) 88%,
    transparent 100%);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(140, 217, 255, 0.70) 0%,
    rgba(41, 166, 156, 0.70) 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 0 8px rgba(140, 217, 255, 0.25);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(140, 217, 255, 0.95) 0%,
    rgba(41, 166, 156, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 14px rgba(140, 217, 255, 0.50);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg,
    var(--enko-primary-light) 0%,
    var(--enko-secondary) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 0 18px rgba(140, 217, 255, 0.60);
}
::-webkit-scrollbar-corner { background: transparent; }