/* ============================================================
   PIZZA BOY 59 / daily59 — Design-System (Masterdesign-konform)
   Deep Navy · Slate · Neon-Teal · Warm Orange · Pizza Red · Cream
   ============================================================ */
@font-face {
  font-family: "PS2P";
  src: url("../assets/fonts/ps2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC;
  font-display: swap;
}
@font-face {
  font-family: "PS2P";
  src: url("../assets/fonts/ps2p-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
  font-display: swap;
}

:root {
  --navy-deep: #070d18;
  --navy: #0b1526;
  --slate: #16243a;
  --slate-light: #22375a;
  --teal: #2ee6c8;
  --teal-glow: #45ffe0;
  --teal-dim: #1a9c88;
  --orange: #ffb347;
  --amber: #ffcf6e;
  --red: #ff4b3e;
  --red-deep: #d92f23;
  --cream: #f6ead2;
  --cream-dim: #d8c9a8;
  --yellow: #ffd93d;
  --ink: #0a1020;
  --font-px: "PS2P", "Courier New", monospace;
  --font-mono: Consolas, "Cascadia Mono", Menlo, monospace;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--navy-deep);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.45;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.noscript { padding: 40px; text-align: center; font-family: var(--font-px); }

/* ---------- Pixel-Bausteine ---------- */
.pixel-panel {
  background: linear-gradient(180deg, var(--slate) 0%, var(--navy) 100%);
  border: 3px solid var(--teal-dim);
  box-shadow: 0 0 0 3px var(--navy-deep), 0 6px 0 rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(10, 16, 32, .6);
  border-radius: 2px;
}
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-px);
  font-size: 15px;
  text-transform: uppercase;
  padding: 14px 22px;
  min-height: 52px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dim) 100%);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .55), inset 0 -4px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .55);
  transition: transform .06s, box-shadow .06s, filter .12s;
}
.px-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .55), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.px-btn.primary {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  color: var(--cream);
  border-color: #5c0e08;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  box-shadow: 0 5px 0 #490b06, 0 0 22px rgba(255, 75, 62, .35), inset 0 2px 0 rgba(255, 255, 255, .25);
}
.px-btn.primary:active { box-shadow: 0 1px 0 #490b06; }
.px-btn.teal {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dim) 100%);
  color: var(--ink); border-color: #06382f;
  box-shadow: 0 5px 0 #06382f, 0 0 18px rgba(46, 230, 200, .3), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.px-btn.ghost {
  background: rgba(22, 36, 58, .85); color: var(--cream); border-color: var(--teal-dim);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .5);
}
.px-btn.small { min-height: 40px; padding: 8px 14px; font-size: 11px; }
.px-btn:disabled { filter: grayscale(.7) brightness(.6); pointer-events: none; }
.px-chip {
  display: inline-block; font-family: var(--font-px); font-size: 11px;
  padding: 7px 12px; background: var(--navy); border: 2px solid var(--teal-dim);
  color: var(--teal); border-radius: 2px; text-transform: lowercase;
}
h1, h2, h3, .px-font { font-family: var(--font-px); font-weight: 400; }

/* ---------- Screens ---------- */
.screen {
  position: fixed; inset: 0; display: none; flex-direction: column;
  padding: calc(8px + var(--sat)) calc(12px + var(--sar)) calc(8px + var(--sab)) calc(12px + var(--sal));
}
.screen.is-active { display: flex; animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Rotate Overlay ---------- */
#rotate-overlay {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(7, 13, 24, .96);
}
#rotate-overlay[hidden] { display: none; }
.rotate-box { padding: 30px 36px; text-align: center; max-width: 320px; }
.rotate-icon { font-size: 44px; color: var(--teal); animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rotate-box h2 { font-size: 16px; margin: 14px 0 8px; color: var(--cream); }
.rotate-box p { color: var(--cream-dim); font-size: 13px; }

/* ---------- BOOT ---------- */
#screen-boot { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #12203a 0%, var(--navy-deep) 70%); }
.boot-center { text-align: center; }
.boot-logo { font-family: var(--font-px); font-size: clamp(26px, 6vw, 44px); color: var(--cream); text-shadow: 0 4px 0 rgba(0, 0, 0, .5); }
.boot-logo em { font-style: normal; color: var(--red); text-shadow: 0 0 24px rgba(255, 75, 62, .7), 0 4px 0 rgba(0, 0, 0, .5); }
.boot-claim { font-family: var(--font-px); font-size: 11px; color: var(--teal); margin-top: 12px; letter-spacing: 2px; }
.boot-bar { width: 240px; height: 12px; margin: 26px auto 0; border: 2px solid var(--teal-dim); background: var(--navy); }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal-dim), var(--teal)); animation: bootFill 1.1s ease-out forwards; }
@keyframes bootFill { to { width: 100%; } }

/* ---------- FIRST START ---------- */
.first-wrap { display: flex; flex-direction: row; gap: 16px; align-items: stretch; justify-content: center; margin: auto; width: min(880px, 100%); }
.first-col { flex: 1 1 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.first-intro h1 { font-size: clamp(15px, 2.6vw, 22px); line-height: 1.6; color: var(--cream); }
.first-intro h1 em { font-style: normal; color: var(--red); }
.first-intro p { color: var(--cream-dim); font-size: 13px; }
.code-block { text-align: center; padding: 12px; background: var(--navy-deep); border: 2px dashed var(--teal-dim); }
.code-label { font-size: 10px; font-family: var(--font-px); color: var(--cream-dim); text-transform: uppercase; margin-bottom: 8px; }
.code-value { font-family: var(--font-px); font-size: clamp(14px, 2.6vw, 20px); color: var(--teal); word-break: break-all; }
.code-value.secret { color: var(--orange); font-size: clamp(11px, 2vw, 15px); }
.first-note { font-size: 11.5px; color: var(--orange); background: rgba(255, 179, 71, .08); border-left: 3px solid var(--orange); padding: 8px 10px; }
.first-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.first-actions .px-btn { flex: 1 1 auto; }

/* ---------- HOME ---------- */
#screen-home {
  background: linear-gradient(rgba(7, 13, 24, .35), rgba(7, 13, 24, .78)), var(--home-bg, none) center / cover no-repeat, var(--navy-deep);
}
.home-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.home-logo { font-family: var(--font-px); font-size: clamp(20px, 4.4vw, 34px); color: var(--cream); text-shadow: 0 3px 0 rgba(0, 0, 0, .6); }
.home-logo em { font-style: normal; color: var(--red); text-shadow: 0 0 20px rgba(255, 75, 62, .8), 0 3px 0 rgba(0, 0, 0, .6); }
.home-claim { font-family: var(--font-px); font-size: 10px; color: var(--teal); letter-spacing: 2px; margin-top: 6px; }
.home-icons { display: flex; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: rgba(22, 36, 58, .85); border: 2px solid var(--teal-dim); color: var(--teal); border-radius: 2px;
}
.home-mid { margin: auto 0; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 30px); flex-wrap: wrap; }
.home-card { padding: 14px 18px; text-align: center; min-width: 230px; }
.home-card .px-chip { margin-bottom: 10px; }
.daily-title { font-family: var(--font-px); font-size: 13px; color: var(--amber); margin: 4px 0 10px; }
.attempts-note { font-size: 12px; color: var(--cream-dim); margin-top: 10px; }
.attempts-pips { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
.pip { width: 12px; height: 12px; border: 2px solid var(--teal-dim); background: var(--navy); }
.pip.used { background: var(--red); border-color: var(--red-deep); }
.pip.free { background: var(--teal); border-color: var(--teal-dim); }
.home-buttons { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.home-buttons .px-btn { width: 100%; font-size: clamp(14px, 2.4vw, 18px); }
.home-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--cream-dim); }
.home-code { font-family: var(--font-px); font-size: 11px; color: var(--teal); }
.legal-links { display: flex; gap: 12px; }
.legal-links button { color: var(--cream-dim); font-size: 11px; text-decoration: underline; }
.offline-badge { font-size: 10px; font-family: var(--font-px); color: var(--yellow); border: 2px solid var(--yellow); padding: 4px 8px; }

/* ---------- INTRO / BON ---------- */
#screen-intro { align-items: center; justify-content: center; }
.intro-wrap { display: flex; gap: clamp(12px, 3vw, 28px); align-items: center; justify-content: center; width: 100%; max-width: 960px; }
.bon-wrap { position: relative; flex: 0 0 auto; width: clamp(230px, 30vw, 300px); }
.bon-paper {
  position: relative;
  background: var(--cream);
  color: #33261a;
  border: 3px solid #0e1622;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45), 0 0 26px rgba(46, 230, 200, .18);
  padding: 16px 16px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
}
.bon-paper::before {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 18px; background: var(--red); border: 3px solid #5c0e08; border-radius: 2px;
}
.bon-paper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: linear-gradient(-45deg, transparent 6px, var(--cream) 0) 0 0 / 12px 8px repeat-x;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.3));
}
.bon-shop { text-align: center; font-family: var(--font-px); font-size: 12px; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px dashed #b9a684; margin-bottom: 8px; }
.bon-tag { font-family: var(--font-mono); font-size: 10.5px; text-transform: none; color: #7a6a4d; margin-top: 4px; letter-spacing: .4px; }
.bon-row { display: flex; justify-content: space-between; gap: 8px; }
.bon-row.total { border-top: 2px dashed #b9a684; margin-top: 6px; padding-top: 6px; font-weight: 700; }
.bon-sep { border: 0; border-top: 2px dashed #b9a684; margin: 8px 0; }
.bon-hint { background: #ffe9c2; border: 2px solid var(--orange); padding: 6px 8px; margin-top: 8px; font-weight: 700; font-size: 12px; }
.bon-kv { display: flex; justify-content: space-between; font-size: 12px; }
.bon-kv b { text-align: right; }
.intro-side { display: flex; flex-direction: column; gap: 12px; max-width: 340px; min-width: 250px; }
.intro-side h2 { font-size: clamp(14px, 2.4vw, 18px); color: var(--amber); }
.intro-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.intro-warn { font-size: 12px; color: var(--orange); background: rgba(255, 179, 71, .08); border-left: 3px solid var(--orange); padding: 8px 10px; }
.veh-label { font-family: var(--font-px); font-size: 10px; color: var(--cream); }
.veh-row { display: flex; gap: 8px; }
.veh-btn {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 6px; min-height: 74px;
  background: linear-gradient(180deg, var(--slate) 0%, var(--navy) 100%);
  border: 3px solid var(--teal-dim); border-radius: 2px; color: var(--cream);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
}
.veh-btn .veh-icon { font-size: 20px; line-height: 1; }
.veh-btn .veh-name { font-family: var(--font-px); font-size: 9.5px; }
.veh-btn .veh-desc { font-size: 9.5px; color: var(--cream-dim); line-height: 1.25; text-align: center; }
.veh-btn.selected { border-color: var(--teal); box-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 16px rgba(46, 230, 200, .45); background: linear-gradient(180deg, #1d3a52 0%, var(--navy) 100%); }
.veh-btn:active { transform: translateY(3px); }
.intro-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- HUD ---------- */
#screen-run { padding: 0; background: var(--navy-deep); }
.hud {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: calc(6px + var(--sat)) calc(10px + var(--sar)) 6px calc(10px + var(--sal));
}
.hud-timer { padding: 6px 14px; min-width: 118px; text-align: center; }
.hud-timer span { font-family: var(--font-px); font-size: clamp(20px, 3.4vw, 28px); color: var(--teal); text-shadow: 0 0 14px rgba(46, 230, 200, .55); }
.hud-timer.warn span { color: var(--orange); text-shadow: 0 0 14px rgba(255, 179, 71, .6); }
.hud-timer.crit span { color: var(--red); text-shadow: 0 0 16px rgba(255, 75, 62, .8); animation: pulse .5s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.hud-watch {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: rgba(11, 21, 38, .9); border: 2px solid var(--teal-dim);
  padding: 8px 12px; font-size: clamp(12px, 2vw, 14px); color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.watch-led { flex: 0 0 auto; width: 10px; height: 10px; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: pulse 1.4s steps(2) infinite; }
.hud-watch.flash { animation: watchFlash .5s steps(2) 3; }
@keyframes watchFlash { 50% { background: rgba(46, 230, 200, .25); } }
.hud-right { display: flex; align-items: center; gap: 8px; }
.hud-heat { display: flex; align-items: center; gap: 6px; }
.heat-bar { width: clamp(54px, 9vw, 90px); height: 14px; border: 2px solid var(--teal-dim); background: var(--navy); }
.heat-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--red) 0%, var(--orange) 45%, var(--yellow) 100%); transition: width .4s; }
.hud-heat span { font-family: var(--font-px); font-size: 11px; color: var(--orange); min-width: 44px; }
.hud-heat.cold span { color: var(--red); animation: pulse .7s steps(2) infinite; }
.hud-btn {
  font-family: var(--font-px); font-size: 11px; padding: 9px 12px; min-height: 44px; min-width: 56px;
  background: var(--cream); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}
.hud-btn.pulse { animation: bonPulse .9s steps(2) 4; }
@keyframes bonPulse { 50% { background: var(--teal); box-shadow: 0 3px 0 rgba(0, 0, 0, .5), 0 0 16px rgba(46, 230, 200, .8); } }

/* ---------- RUN STAGE ---------- */
.run-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; padding: 6px calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal)); }
.stage-bg { position: absolute; inset: 0; background: var(--stage-bg, none) center / cover no-repeat; opacity: .5; filter: brightness(.75); }
.stage-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,13,24,.25), rgba(7,13,24,.72)); }
.phase-wrap { position: relative; z-index: 2; display: flex; flex: 1 1 auto; gap: 12px; min-height: 0; animation: screenIn .25s ease-out; }

/* Route-Phase: Map links, Optionen rechts */
.route-map { flex: 1 1 56%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.route-map svg { width: 100%; height: 100%; max-height: 100%; }
.route-side { flex: 1 1 44%; min-width: 236px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.decision-prompt { font-family: var(--font-px); font-size: clamp(10.5px, 1.8vw, 13px); color: var(--amber); line-height: 1.6; }
.opt-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 14px; min-height: 62px;
  background: linear-gradient(180deg, var(--slate) 0%, var(--navy) 100%);
  border: 3px solid var(--teal-dim); border-radius: 2px; color: var(--cream);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
  transition: transform .06s, border-color .12s, box-shadow .12s;
}
.opt-card:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.opt-card .opt-main { flex: 1 1 auto; min-width: 0; }
.opt-card .opt-label { font-family: var(--font-px); font-size: clamp(11px, 1.9vw, 13px); color: var(--cream); margin-bottom: 4px; }
.opt-card .opt-desc { font-size: 11.5px; color: var(--cream-dim); }
.opt-card .opt-time { font-family: var(--font-px); font-size: clamp(13px, 2.2vw, 16px); color: var(--teal); white-space: nowrap; }
.opt-card.risk-medium { border-color: var(--orange); }
.opt-card.risk-medium .opt-time { color: var(--orange); }
.opt-card.risk-high { border-color: var(--red); }
.opt-card.risk-high .opt-time { color: var(--red); }
.opt-card .risk-tag { font-size: 10px; font-family: var(--font-px); padding: 3px 6px; border: 2px solid currentColor; }
.opt-card.risk-medium .risk-tag { color: var(--orange); }
.opt-card.risk-high .risk-tag { color: var(--red); }
.opt-card.chosen { border-color: var(--teal); box-shadow: 0 0 18px rgba(46, 230, 200, .45); }

/* Bon-Pick-Phase (Uhr läuft!) */
.bon-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 32px); min-height: 0; }
.bon-stage .bon-wrap { width: clamp(220px, 30vw, 270px); max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bon-stage .bon-paper { font-size: 11.5px; padding: 12px 12px 16px; }
.bon-side { display: flex; flex-direction: column; gap: 12px; max-width: 320px; min-width: 230px; }
.bon-side .decision-prompt { font-family: var(--font-mono); font-size: 13px; color: var(--cream); text-transform: none; }

/* Gebäude-Phasen (Eingang/Etage/Tür) */
.build-phase { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 18px); }
.phase-title { font-family: var(--font-px); font-size: clamp(13px, 2.4vw, 17px); color: var(--cream); text-shadow: 0 2px 0 rgba(0, 0, 0, .7); text-align: center; }
.phase-hint { font-size: clamp(12px, 2vw, 14px); color: var(--amber); background: rgba(11, 21, 38, .85); border: 2px solid var(--orange); padding: 6px 12px; }
.choice-row { display: flex; gap: clamp(10px, 2vw, 18px); flex-wrap: wrap; align-items: stretch; justify-content: center; }
.choice-big {
  min-width: clamp(130px, 20vw, 190px); min-height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-px); font-size: clamp(11px, 2vw, 14px); color: var(--cream); text-transform: lowercase;
  background: linear-gradient(180deg, var(--slate-light) 0%, var(--navy) 100%);
  border: 3px solid var(--teal-dim); box-shadow: 0 5px 0 rgba(0, 0, 0, .5);
  padding: 12px;
}
.choice-big:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.choice-big.wrong { border-color: var(--red); animation: shake .4s; filter: grayscale(.5) brightness(.55); pointer-events: none; }
.choice-big .sub { font-family: var(--font-mono); font-size: 11px; color: var(--cream-dim); text-transform: none; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* Shop-Abholung (Memory) */
.shop-row { display: flex; gap: clamp(6px, 1.4vw, 14px); align-items: stretch; justify-content: center; flex-wrap: wrap; }
.shop-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 6px 8px; width: clamp(100px, 15vw, 140px);
  background: rgba(11, 21, 38, .82); border: 3px solid var(--teal-dim);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .5);
}
.shop-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--navy-deep); image-rendering: auto; }
.shop-card .shop-name { font-family: var(--font-px); font-size: clamp(8.5px, 1.4vw, 10px); color: var(--cream); text-align: center; line-height: 1.4; }
.shop-card:active { transform: translateY(3px); }
.shop-card.wrong { border-color: var(--red); filter: grayscale(.75) brightness(.5); pointer-events: none; animation: shake .4s; }
.shop-card.correct { border-color: var(--teal); box-shadow: 0 0 22px rgba(46, 230, 200, .6); }

/* Türen */
.door-row { display: flex; gap: clamp(8px, 1.6vw, 16px); align-items: stretch; justify-content: center; }
.door-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 8px 10px; min-width: clamp(104px, 16vw, 150px);
  background: rgba(11, 21, 38, .82); border: 3px solid var(--teal-dim);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .5);
}
.door-card svg { width: clamp(64px, 10vw, 96px); height: auto; image-rendering: pixelated; }
.door-card .door-label { font-size: clamp(10px, 1.6vw, 12px); color: var(--cream); text-align: center; line-height: 1.3; }
.door-card:active { transform: translateY(3px); }
.door-card.wrong { border-color: var(--red); filter: grayscale(.75) brightness(.5); pointer-events: none; animation: shake .4s; }
.door-card.correct { border-color: var(--teal); box-shadow: 0 0 22px rgba(46, 230, 200, .6); }

/* Zustell-Moment */
.deliver-flash { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.deliver-flash img { height: clamp(150px, 38vh, 240px); width: auto; image-rendering: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); animation: popIn .35s ease-out; }
@keyframes popIn { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.deliver-flash .phase-title { color: var(--teal); }

/* Feedback-Blitz (Zeit-/Wärmeabzug) */
.fx-float {
  position: absolute; z-index: 8; left: 50%; top: 38%; transform: translateX(-50%);
  font-family: var(--font-px); font-size: clamp(15px, 3vw, 22px); pointer-events: none;
  animation: floatUp 1s ease-out forwards; text-shadow: 0 2px 0 rgba(0, 0, 0, .7);
}
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -46px); } }
.fx-float.bad { color: var(--red); }
.fx-float.good { color: var(--teal); }
.fx-float.heat { color: var(--orange); }

/* Lieferinfo-Karte (Overlay im Run) */
.overlay-info { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(7, 13, 24, .72); }
.overlay-info[hidden] { display: none; }
.liefer-karte { width: min(420px, 86vw); background: var(--cream); color: #33261a; border-color: var(--navy-deep); padding: 14px 16px; position: relative; }
.liefer-karte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--teal); }
.liefer-karte h3 { font-size: 12px; font-family: var(--font-px); text-transform: uppercase; margin-bottom: 8px; color: #1d2f4a; }
.liefer-karte .bon-kv { padding: 3px 0; border-bottom: 1px dashed #b9a684; }
.liefer-karte .bon-hint { margin-top: 10px; }
.liefer-karte .karte-close { margin-top: 12px; width: 100%; }

/* ---------- RESULT ---------- */
#screen-result { align-items: center; justify-content: center; }
.result-wrap { display: flex; gap: clamp(12px, 3vw, 30px); align-items: center; justify-content: center; width: 100%; max-width: 980px; }
.result-main { text-align: center; flex: 0 1 auto; min-width: 250px; }
.result-headline { font-family: var(--font-px); font-size: clamp(17px, 3.4vw, 26px); margin-bottom: 6px; }
.result-headline.top59 { color: var(--teal); text-shadow: 0 0 22px rgba(46, 230, 200, .7); }
.result-headline.close { color: var(--orange); text-shadow: 0 0 18px rgba(255, 179, 71, .5); }
.result-headline.done { color: var(--cream); }
.result-headline.too_late { color: var(--red); }
.result-sub { color: var(--cream-dim); font-size: 12.5px; margin-bottom: 10px; }
.result-score { font-family: var(--font-px); font-size: clamp(30px, 6.4vw, 52px); color: var(--amber); text-shadow: 0 0 26px rgba(255, 179, 71, .45), 0 4px 0 rgba(0, 0, 0, .5); }
.result-rank { font-family: var(--font-px); font-size: clamp(12px, 2.2vw, 15px); color: var(--teal); margin-top: 8px; }
.result-challenge { font-family: var(--font-px); font-size: clamp(10px, 1.9vw, 13px); color: var(--cream); margin-top: 12px; line-height: 1.7; }
.result-attempt { margin-top: 8px; font-size: 12px; color: var(--cream-dim); }
.result-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.result-side { flex: 0 1 330px; min-width: 240px; }
.breakdown { padding: 12px 14px; font-size: clamp(12px, 1.9vw, 13.5px); }
.breakdown h3 { font-size: 11px; color: var(--cream-dim); font-family: var(--font-px); margin-bottom: 8px; }
.bd-line { display: flex; justify-content: space-between; gap: 10px; padding: 3.5px 0; border-bottom: 1px solid rgba(46, 230, 200, .12); }
.bd-line:last-child { border-bottom: 0; }
.bd-line .v { font-family: var(--font-px); font-size: 11px; white-space: nowrap; }
.bd-line.plus .v { color: var(--teal); }
.bd-line.minus .v { color: var(--red); }
.result-customer { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.result-customer img { width: 52px; height: 52px; object-fit: cover; object-position: top; border: 2px solid var(--teal-dim); background: var(--slate); }
.result-customer .quote { font-size: 12px; color: var(--cream); font-style: italic; }

/* ---------- LEADERBOARD ---------- */
.board-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: min(760px, 100%); margin: 0 auto; gap: 10px; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-head h2 { font-size: clamp(14px, 2.6vw, 19px); color: var(--cream); }
.board-head h2 em { font-style: normal; color: var(--teal); }
.board-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 10px; }
.board-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid rgba(46, 230, 200, .12); font-size: clamp(12px, 2vw, 14px); }
.board-row .rank { font-family: var(--font-px); font-size: 11px; color: var(--cream-dim); min-width: 44px; }
.board-row .code { flex: 1 1 auto; color: var(--cream); font-family: var(--font-px); font-size: clamp(10px, 1.8vw, 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .score { font-family: var(--font-px); font-size: clamp(11px, 1.9vw, 13px); color: var(--amber); }
.board-row.me { background: rgba(46, 230, 200, .12); border: 2px solid var(--teal-dim); }
.board-row.me .code { color: var(--teal); }
.board-row.top { color: var(--teal); }
.board-empty { text-align: center; color: var(--cream-dim); padding: 30px 10px; font-size: 13px; }
.board-me-sticky { padding: 8px 10px; }

/* ---------- ID SCREEN ---------- */
.id-wrap { margin: auto; width: min(640px, 100%); display: flex; flex-direction: column; gap: 12px; }
.id-wrap .pixel-panel { padding: 14px 16px; }
.id-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.id-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.recover-input {
  width: 100%; padding: 12px; font-family: var(--font-mono); font-size: 14px;
  background: var(--navy-deep); border: 2px solid var(--teal-dim); color: var(--cream); border-radius: 2px;
}
.recover-input:focus { outline: none; border-color: var(--teal); }

/* ---------- Overlays / Toast ---------- */
.overlay-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(7, 13, 24, .8); padding: 16px; }
.overlay-modal[hidden] { display: none; }
.modal-box { position: relative; width: min(680px, 94vw); max-height: 86vh; display: flex; flex-direction: column; padding: 18px; }
.modal-close { position: absolute; top: 6px; right: 10px; font-size: 26px; color: var(--cream-dim); padding: 6px 10px; min-width: 44px; min-height: 44px; }
.legal-content { overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 12.5px; color: var(--cream-dim); padding-right: 6px; }
.legal-content h2 { color: var(--cream); font-size: 14px; margin: 14px 0 6px; }
.legal-content h3 { color: var(--amber); font-size: 12px; margin: 12px 0 4px; }
.legal-content p { margin-bottom: 8px; }
.legal-content nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.toast {
  position: fixed; left: 50%; bottom: calc(18px + var(--sab)); transform: translateX(-50%);
  z-index: 80; background: var(--slate); color: var(--cream); border: 2px solid var(--teal);
  padding: 10px 18px; font-size: 13px; box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
  animation: screenIn .2s ease-out;
}
.toast[hidden] { display: none; }

/* Konfetti (Top59) */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 8px; animation: confFall linear forwards; }
@keyframes confFall { to { transform: translateY(110vh) rotate(540deg); } }

/* ---------- Map SVG ---------- */
.mapsvg .tile-road { fill: #202f49; stroke: #101c30; stroke-width: .6; }
.mapsvg .tile-block { fill: #101b2e; stroke: #0a1322; stroke-width: .6; }
.mapsvg .tile-window { fill: var(--orange); opacity: .8; }
.mapsvg .lane { stroke: #33455f; stroke-dasharray: 2 3; stroke-width: .7; fill: none; }
.mapsvg .route-line { stroke: var(--teal); stroke-width: 2.6; fill: none; stroke-linecap: square; stroke-linejoin: miter; filter: drop-shadow(0 0 3px rgba(46, 230, 200, .9)); }
.mapsvg .route-line.preview { stroke: rgba(46, 230, 200, .38); stroke-dasharray: 3 3; filter: none; animation: dashMove 1s linear infinite; }
.mapsvg .route-line.preview.alt { stroke: rgba(255, 179, 71, .4); }
@keyframes dashMove { to { stroke-dashoffset: -6; } }
.mapsvg .rider { fill: var(--red); stroke: var(--cream); stroke-width: .8; filter: drop-shadow(0 0 4px rgba(255, 75, 62, .9)); }
.mapsvg text { font-family: var(--font-px); fill: var(--cream); }

/* ---------- Responsive Feintuning ---------- */
@media (max-height: 420px) {
  body { font-size: 13.5px; }
  .hud-timer { min-width: 96px; }
  .home-card { padding: 10px 12px; min-width: 200px; }
  .bon-paper { font-size: 11px; padding: 12px 12px 16px; }
  .result-actions { flex-direction: row; flex-wrap: wrap; }
  .result-actions .px-btn { flex: 1 1 40%; }
}
@media (orientation: portrait) {
  /* Spiel bleibt landscape-orientiert; Overlay fordert Drehung */
}