:root {
  --bg: #02040a;
  --fg: #d8ecff;
  --dim: #7f98b5;
  --acc: #5fe3ff;
  --acc2: #8affc1;
  --warn: #ffb547;
  --bad: #ff4d5e;
  --glass: rgba(8, 18, 32, 0.52);
  --line: rgba(120, 210, 255, 0.28);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-d: 'Orbitron', 'Chakra Petch', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none;
  overscroll-behavior: none; -webkit-touch-callout: none;
}
#app { position: fixed; inset: 0; }
#gl, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }
#vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,80,60,0) 30%, rgba(255,60,40,.55) 100%); transition: opacity .5s; }
#flash.on { opacity: 1; transition: none; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; }
/* Kamera: ganze Fläche hinter den Stick-Zonen (also v. a. die Bildmitte mit dem Schiff und der obere Rand) */
#zone-cam { position: absolute; inset: 0; touch-action: none; }
/* Sticks: nur die äußeren Drittel, dort liegen die Daumen im Querformat */
.zone { position: absolute; bottom: 0; top: 28%; touch-action: none; }
#zone-left { left: 0; width: 34%; }
#zone-right { right: 0; width: 34%; }
.zone-hint { position: absolute; bottom: calc(18px + var(--safe-b)); font: 600 11px var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); opacity: .7; pointer-events: none; transition: opacity .6s; }
#zone-left .zone-hint { left: calc(28px + var(--safe-l)); }
#zone-right .zone-hint { right: calc(28px + var(--safe-r)); }
body.kb .zone-hint, body.kb .stick { display: none; }
.stick { --r: 64px; position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .25s; pointer-events: none; }
.stick.on { opacity: 1; transition: opacity .05s; }
.stick-base { position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
  border: 1.5px solid var(--line); background: radial-gradient(circle, rgba(95,227,255,.08), rgba(95,227,255,.02) 60%, transparent 70%);
  box-shadow: 0 0 30px rgba(95,227,255,.12) inset, 0 0 18px rgba(0,0,0,.4); }
.stick-base::before, .stick-base::after { content: ''; position: absolute; background: var(--line); }
.stick-base::before { left: 50%; top: 12%; bottom: 12%; width: 1px; }
.stick-base::after { top: 50%; left: 12%; right: 12%; height: 1px; }
.stick .lbl { position: absolute; font: 600 9px var(--font); letter-spacing: .14em; color: var(--acc); opacity: .75; }
.stick .lbl.t { top: -18px; left: 50%; transform: translateX(-50%); }
.stick .lbl.b { bottom: -18px; left: 50%; transform: translateX(-50%); }
.stick .lbl.l { left: -16px; top: 50%; transform: translateY(-50%); }
.stick .lbl.r { right: -16px; top: 50%; transform: translateY(-50%); }
.stick-knob { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(200,250,255,.9), rgba(95,227,255,.55) 45%, rgba(20,80,120,.6));
  box-shadow: 0 0 22px rgba(95,227,255,.7), 0 0 4px #fff inset; }

#topbar { position: absolute; left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); top: calc(10px + var(--safe-t)); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
#topbar .lvl { min-width: 0; }
#hud-level { font: 700 15px var(--font-d); letter-spacing: .08em; text-shadow: 0 0 12px rgba(95,227,255,.5); }
#hud-sub { font: 500 11px var(--font); color: var(--dim); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
#topbar .timer { position: absolute; left: 50%; transform: translateX(-50%); font: 700 20px var(--font-d); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--fg); text-shadow: 0 0 14px rgba(95,227,255,.45); }
#topbar .btns { display: flex; gap: 8px; pointer-events: auto; }
.ib { display: flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 11px var(--font); letter-spacing: .12em; }
.ib svg { width: 20px; height: 20px; }
.ib:active { background: rgba(95,227,255,.25); }

.panel { border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; }
#telemetry { position: absolute; left: calc(12px + var(--safe-l)); top: calc(62px + var(--safe-t)); width: 196px; padding: 10px 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
#telemetry .row { display: flex; align-items: baseline; gap: 6px; line-height: 1.5; }
#telemetry .k { flex: 1; font: 600 10px var(--font); letter-spacing: .14em; color: var(--dim); }
#telemetry .v { font: 600 14px var(--font-d); min-width: 64px; text-align: right; }
#telemetry .u { font-size: 10px; color: var(--dim); width: 22px; }
#telemetry .row.big .v { font-size: 17px; }
#telemetry .v.ok { color: var(--acc2); text-shadow: 0 0 10px rgba(138,255,193,.5); }
#telemetry .v.warn { color: var(--warn); }
#telemetry .v.bad { color: var(--bad); text-shadow: 0 0 10px rgba(255,77,94,.6); }
#telemetry .sep { height: 1px; background: var(--line); margin: 6px 0; }
#telemetry .bar { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
#telemetry .bar .k { flex: 0 0 62px; }
#telemetry .track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
#telemetry .track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); box-shadow: 0 0 8px var(--acc); transition: width .2s; }
#telemetry .track i.low { background: linear-gradient(90deg, var(--bad), var(--warn)); box-shadow: 0 0 8px var(--bad); }
#telemetry .chips { display: flex; gap: 6px; margin-top: 8px; }
.chip { font: 700 9px var(--font); letter-spacing: .14em; padding: 3px 7px; border-radius: 4px; border: 1px solid rgba(255,255,255,.15); color: var(--dim); }
.chip.on { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 10px rgba(95,227,255,.25) inset; }
.chip.off { border-color: var(--warn); color: var(--warn); }

#speedtape { position: absolute; left: calc(220px + var(--safe-l)); top: calc(62px + var(--safe-t)); width: 60px; height: 260px; pointer-events: none; opacity: .9; }
#speedtape canvas { width: 60px; height: 260px; }

.brake { position: absolute; right: calc(16px + var(--safe-r)); top: calc(66px + var(--safe-t)); width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgba(255,77,94,.7);
  background: radial-gradient(circle at 50% 40%, rgba(255,90,100,.35), rgba(80,10,20,.55)); box-shadow: 0 0 22px rgba(255,77,94,.35), inset 0 0 14px rgba(255,77,94,.4);
  font: 800 12px var(--font-d); letter-spacing: .06em; line-height: 1.15; color: #ffd9dc; touch-action: none; }
.brake.on { background: radial-gradient(circle at 50% 40%, rgba(255,140,150,.9), rgba(200,30,50,.85)); box-shadow: 0 0 40px rgba(255,77,94,.9); transform: scale(.95); }
.brake em { display: none; font: 700 8px var(--font); letter-spacing: .16em; font-style: normal; color: var(--warn); }
.brake.broken { border-color: rgba(160,170,185,.45); background: radial-gradient(circle at 50% 40%, rgba(120,130,145,.25), rgba(30,34,42,.6)); box-shadow: inset 0 0 12px rgba(0,0,0,.5); color: rgba(200,210,225,.55); }
.brake.broken span { text-decoration: line-through; text-decoration-color: rgba(255,77,94,.85); text-decoration-thickness: 2px; }
.brake.broken em { display: block; margin-top: 2px; }
.brake.broken.on { transform: none; background: radial-gradient(circle at 50% 40%, rgba(255,77,94,.25), rgba(40,20,26,.7)); }
#chip-mods { flex-wrap: wrap; margin-top: 5px; }
#chip-mods:empty { display: none; }
.chip.bad { border-color: var(--bad); color: var(--bad); box-shadow: 0 0 10px rgba(255,77,94,.2) inset; }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.blink { animation: chipblink .5s steps(2) infinite; }
@keyframes chipblink { 50% { opacity: .35; } }

#hold { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
#hold.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#hold svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#hold circle { fill: none; stroke-width: 5; }
#hold .bg { stroke: rgba(138,255,193,.2); }
#hold .fg { stroke: var(--acc2); stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; filter: drop-shadow(0 0 6px var(--acc2)); }
#hold .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--acc2); }
#hold .txt b { font: 700 11px var(--font-d); letter-spacing: .2em; }
#hold .txt span { font: 700 26px var(--font-d); }

#toast { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font: 900 clamp(20px, 4.4vw, 40px) var(--font-d); letter-spacing: .14em; text-align: center; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; }
#toast.on { opacity: 1; transform: translateX(-50%) scale(1.04); }
#toast.ok { color: var(--acc2); text-shadow: 0 0 24px rgba(138,255,193,.8); }
#toast.bad { color: var(--bad); text-shadow: 0 0 24px rgba(255,77,94,.8); }
#toast.info { color: var(--acc); text-shadow: 0 0 24px rgba(95,227,255,.8); }
#toast small { display: block; font: 600 13px var(--font); letter-spacing: .2em; margin-top: 6px; color: var(--fg); }
#hint { position: absolute; left: 50%; top: calc(58px + var(--safe-t)); transform: translateX(-50%); max-width: min(560px, 70vw); padding: 10px 16px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 500 14px var(--font); text-align: center; line-height: 1.35; opacity: 0; transition: opacity .5s; pointer-events: none; }
#hint.on { opacity: 1; }
#hint b { color: var(--acc); }

/* ---------- Menüs ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(20px + var(--safe-t)) calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l)); overflow-y: auto; touch-action: pan-y; }
.menu { background: linear-gradient(180deg, rgba(2,4,10,.15), rgba(2,4,10,.55) 70%, rgba(2,4,10,.85)); }
#menu { justify-content: space-between; }
/* zu hoch fürs Querformat-Handy: oben bündig statt oben abgeschnitten (center schneidet nicht scrollbar ab) */
.screen:not(#menu) { justify-content: safe center; }
.title-wrap { text-align: center; margin-top: 6vh; }
.pre { font: 600 11px var(--font); letter-spacing: .4em; color: var(--acc); opacity: .85; }
h1 { margin: 10px 0 6px; font: 900 clamp(40px, 9vw, 92px) var(--font-d); letter-spacing: .08em; line-height: 1; color: #eaf6ff; text-shadow: 0 0 30px rgba(95,227,255,.45), 0 0 2px #fff; }
h1 span { color: var(--acc); }
.tag { font: 500 clamp(13px, 2vw, 17px) var(--font); color: var(--dim); letter-spacing: .12em; }
h2 { font: 700 clamp(22px, 4vw, 34px) var(--font-d); letter-spacing: .1em; margin: 0 0 18px; text-align: center; }
.menu-btns { display: flex; flex-direction: column; gap: 10px; width: min(380px, 90vw); }
.mb { height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 15px var(--font); letter-spacing: .16em; text-transform: uppercase; transition: background .2s, box-shadow .2s, transform .1s; }
.mb:hover { background: rgba(95,227,255,.12); box-shadow: 0 0 18px rgba(95,227,255,.2); }
.mb:active { transform: scale(.98); }
.mb.primary { border-color: var(--acc); background: linear-gradient(180deg, rgba(95,227,255,.28), rgba(30,110,150,.35)); box-shadow: 0 0 24px rgba(95,227,255,.25); color: #fff; }
/* Zweitrangige Knöpfe (Zurück, Hauptmenü …): dezenter als .mb, aber klar anklickbar – nicht wie deaktiviert */
.mb.ghost { background: rgba(8, 18, 32, .34); border-color: rgba(120, 210, 255, .2); color: #bcd2e8; font-size: 14px; }
.mb.ghost:hover { background: rgba(95, 227, 255, .1); border-color: rgba(95, 227, 255, .55); color: #fff; }
.mb.ghost.back::before, .mb.ghost.back-levels::before, #btn-quit::before, #btn-res-menu::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 12px 1px 0; border: solid currentColor;
  border-width: 0 0 2px 2px; transform: rotate(45deg); opacity: .8; }
.screen > .mb { width: min(340px, 86vw); margin-top: 18px; }
.foot { font: 500 12px var(--font); color: var(--dim); letter-spacing: .2em; margin-bottom: 4px; min-height: 16px; }
.mlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin-bottom: 2px; }
.mlink { font: 500 10px var(--font); color: var(--dim); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; opacity: .55; padding: 6px 8px; }
.mlink:hover, .mlink:focus-visible { opacity: 1; color: var(--acc); }
/* Meldung im Menü (Absturzschutz / sicherer Start) */
.notice { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,181,71,.55); background: rgba(40,26,6,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; line-height: 1.35; }
.notice b { display: block; font: 700 13px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.notice span { display: block; font: 500 12px var(--font); color: #e8d6b8; margin-top: 3px; }
.qinfo { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 2px; }
#q-note { font-size: 12.5px; line-height: 1.4; color: var(--dim); text-align: center; }
#q-note.warn { color: var(--warn); }
.lost { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2,4,10,.92); }
#level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; width: min(1100px, 100%); }
.lv { position: relative; text-align: left; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-height: 118px; }
.lv:hover { border-color: var(--acc); }
.lv .n { font: 700 11px var(--font-d); color: var(--acc); letter-spacing: .2em; }
.lv .t { font: 700 17px var(--font-d); margin: 6px 0 4px; letter-spacing: .04em; }
.lv .s { font: 500 12px var(--font); color: var(--dim); }
.lv .st { position: absolute; right: 12px; top: 10px; font-size: 16px; letter-spacing: 2px; color: rgba(255,255,255,.18); }
.lv .st b { color: #ffd76a; text-shadow: 0 0 8px rgba(255,215,106,.6); font-weight: 400; }
.lv .best { font: 600 11px var(--font); color: var(--acc2); margin-top: 8px; letter-spacing: .1em; }
.lv.locked { opacity: .45; pointer-events: none; }
.lv.rnd { border-color: rgba(138,255,193,.45); background: linear-gradient(160deg, rgba(138,255,193,.12), rgba(8,18,32,.55)); }
.lv.rnd .n { color: var(--acc2); }
.lv.rnd .st { color: var(--acc2); font-size: 22px; top: 6px; }
/* Erschwernisse (Briefing, Zufallsmission) */
.mods { display: flex; flex-wrap: wrap; gap: 6px; }
.mods.hidden { display: none; }
.mod { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font: 500 11px var(--font); color: var(--dim); }
.mod b { font: 700 11px var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.mod.bad { border-color: rgba(255,77,94,.55); background: rgba(255,77,94,.08); }
.mod.bad b { color: #ff8a95; }
.mod.warn { border-color: rgba(255,181,71,.5); background: rgba(255,181,71,.07); }
.mod.warn b { color: var(--warn); }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); color: var(--dim); font: 600 13px var(--font); letter-spacing: .12em; text-transform: uppercase; }
.seg button.on { border-color: var(--acc2); color: #eafff4; background: linear-gradient(180deg, rgba(138,255,193,.22), rgba(20,80,70,.32)); box-shadow: 0 0 16px rgba(138,255,193,.2); }
.rnd-prev { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 6px; }
.rnd-prev .pre { font: 600 10px var(--font); letter-spacing: .2em; color: var(--acc2); }
.rnd-prev h3 { margin: 0; font: 700 22px var(--font-d); letter-spacing: .04em; }
.rnd-prev p { margin: 0; font-size: 13px; color: var(--dim); }
.rnd-ship { font: 700 13px var(--font-d); letter-spacing: .06em; }
.rnd-ship span { font: 500 12px var(--font); color: var(--dim); margin-left: 6px; }
.rnd-prev .best { font: 600 11px var(--font); color: var(--acc2); letter-spacing: .1em; }
.rnd-code { display: flex; gap: 8px; }
.rnd-code input { flex: 1; min-width: 70px; height: 50px; border-radius: 12px; border: 1px solid var(--line); background: rgba(8,18,32,.6); color: var(--fg); font: 700 16px var(--font-d); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.rnd-code input.bad { border-color: var(--bad); }
.rnd-code .mb { flex: 0 0 auto; padding: 0 16px; }
@media (max-width: 480px) { .rnd-code { flex-wrap: wrap; } #btn-rnd-roll { flex-basis: 100%; } .rnd-code input { letter-spacing: .2em; } }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; width: min(960px, 100%); }
.card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card .ico { font-size: 24px; color: var(--acc); }
.card h3 { margin: 6px 0; font: 700 14px var(--font-d); letter-spacing: .08em; }
.card p { margin: 0; font-size: 14px; line-height: 1.45; color: #bcd3ea; }
.card b { color: #fff; }
.settings { display: flex; flex-direction: column; gap: 10px; width: min(360px, 90vw); }
.settings label { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); font: 600 14px var(--font); letter-spacing: .12em; text-transform: uppercase; }
.settings select { background: #0b1626; color: var(--fg); border: 1px solid var(--line); border-radius: 8px; height: 34px; padding: 0 8px; font: 500 14px var(--font); }
.settings input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 48px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.12); position: relative; transition: background .2s; }
.settings input[type=checkbox]::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #9ab; transition: transform .2s, background .2s; }
.settings input[type=checkbox]:checked { background: rgba(95,227,255,.45); }
.settings input[type=checkbox]:checked::after { transform: translateX(22px); background: #fff; }
.note { max-width: 360px; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.4; }
.brief-card { width: min(480px, 92vw); padding: 22px 22px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(6,14,26,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.brief-card h2 { margin: 0; text-align: left; }
.brief-card p { margin: 0 0 4px; color: #bcd3ea; line-height: 1.5; font-size: 15px; }
.brief-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.brief-stats div { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.brief-stats span { display: block; font: 600 9px var(--font); letter-spacing: .16em; color: var(--dim); }
.brief-stats b { font: 700 15px var(--font-d); }
.stars { display: flex; gap: 10px; justify-content: center; font-size: 44px; margin: 4px 0; }
.stars i { font-style: normal; color: rgba(255,255,255,.12); transform: scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.2,1.8,.4,1), opacity .3s, color .3s; }
.stars i.show { opacity: 1; transform: scale(1); }
.stars i.lit { color: #ffd76a; text-shadow: 0 0 22px rgba(255,215,106,.8); }
.res-table { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; font-size: 14px; }
.res-table span { color: var(--dim); }
.res-table b { font: 600 14px var(--font-d); text-align: right; }
.res-table em { font-style: normal; color: var(--acc2); text-align: right; font: 600 13px var(--font-d); }
.res-score { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.res-score span { font: 600 12px var(--font); letter-spacing: .2em; color: var(--dim); }
.res-score b { font: 900 30px var(--font-d); color: #fff; text-shadow: 0 0 16px rgba(95,227,255,.6); }

/* ---------- Kleine Screens / Hochformat ---------- */
@media (max-height: 520px) {
  #telemetry { width: 150px; padding: 6px 9px; top: calc(48px + var(--safe-t)); }
  #telemetry .row.fine, #telemetry .sep.fine { display: none; }
  #telemetry .bar .k { flex-basis: 50px; font-size: 9px; }
  #telemetry .k { font-size: 9px; }
  #hud-sub { display: none; }
  #hint { top: calc(46px + var(--safe-t)); font-size: 12px; padding: 7px 12px; max-width: 52vw; }
  #telemetry .row { line-height: 1.3; }
  #telemetry .row.big .v { font-size: 14px; }
  #telemetry .v { font-size: 12px; min-width: 52px; }
  #speedtape { left: calc(166px + var(--safe-l)); top: calc(48px + var(--safe-t)); transform: scale(.72); transform-origin: top left; }
  .brake { width: 62px; height: 62px; top: calc(56px + var(--safe-t)); font-size: 10px; }
  #hud-level { font-size: 13px; }
  #topbar .timer { font-size: 16px; }
  .title-wrap { margin-top: 2vh; }
  .mb { height: 42px; }
  .menu-btns { gap: 7px; }
}
@media (orientation: portrait) and (max-width: 700px) {
    #telemetry { width: 150px; padding: 6px 9px; }
  #telemetry .v { font-size: 12px; min-width: 48px; }
  #telemetry .row.big .v { font-size: 13px; }
  #speedtape { display: none; }
  #topbar .timer { top: 46px; font-size: 16px; }
  #cam-name { display: none; }
  /* Hochformat: Sticks unten nebeneinander, Kamera darüber */
  .zone { top: 72%; }
  #zone-left { width: 50%; }
  #zone-right { width: 50%; }
  #hint { bottom: auto; top: calc(56% - 60px); font-size: 13px; }
}

/* Kinofahrten: Instrumente ausblenden */
#hud > *:not(#toast):not(#hint) { transition: opacity .6s; }
#hud.cine > *:not(#toast):not(#hint) { opacity: 0; pointer-events: none; }

/* ---------- VR / Mixed Reality (WebXR, Meta Quest) ---------- */
.xr-row { display: flex; gap: 10px; }
.xr-row .mb { flex: 1; min-width: 0; padding: 0 10px; letter-spacing: .12em; }
.menu-row { display: flex; gap: 10px; }
.menu-row .mb { flex: 1; min-width: 0; padding: 0 10px; letter-spacing: .12em; }
.mb.xr { border-color: rgba(138,255,193,.5); color: #eafff4; background: linear-gradient(180deg, rgba(138,255,193,.16), rgba(20,80,70,.3)); }
.mb.xr:hover { box-shadow: 0 0 18px rgba(138,255,193,.25); }
.mb.xr::before { content: '◈'; margin-right: 8px; color: var(--acc2); }
/* Während der XR-Session: nur die Zeichenfläche (Bildschirm-HUD und Menüs leben dann im Raum) */
body.xr #app > :not(#gl) { display: none !important; }
/* Halbe Menüknöpfe einzeilig halten: Englisch („Random mission“) immer, Deutsch („Zufallsmission“) auf schmalen Handys */
@media (max-width: 420px) { .menu-row .mb, .xr-row .mb { letter-spacing: .1em; } .mb.xr::before { display: none; } }