/* WBS RACER – Basis: Tokens, Reset, Buttons, Panels, Eingabeelemente */
:root {
  --bg0: #05071a;
  --bg1: #0b1030;
  --bg2: #161047;
  --ink: #f4f7ff;
  --ink-dim: #a9b3dc;
  --ink-mute: #6c77a8;
  --cyan: #19e3ff;
  --magenta: #ff2fa6;
  --yellow: #ffd23f;
  --orange: #ff7a1a;
  --purple: #8a4bff;
  --green: #3dff8b;
  --red: #ff4d5e;
  --glass: rgba(16, 20, 54, .58);
  --glass-strong: rgba(10, 13, 38, .82);
  --glass-line: rgba(255, 255, 255, .16);
  --glow-cyan: 0 0 22px rgba(25, 227, 255, .45);
  --font-display: "Bahnschrift", "Eurostile", "Segoe UI Variable Display", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --slant: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ui-scale: 1;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg0); color: var(--ink);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#game-canvas-container { position: fixed; inset: 0; z-index: 0; background: var(--bg0); }
#game-canvas-container canvas { display: block; width: 100%; height: 100%; }

#app { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }

/* ---------- Hintergrund ---------- */
#menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s var(--ease); }
#menu-dim { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(120% 90% at 50% 40%, rgba(8, 10, 34, .55), rgba(3, 4, 16, .86)); backdrop-filter: blur(5px) saturate(1.1); }
#app.bg-none #menu-bg, #app.bg-none #menu-dim { opacity: 0; }
#app.bg-solid #menu-bg { opacity: 1; }
#app.bg-dim #menu-dim { opacity: 1; }
#app.bg-dim-light #menu-dim { opacity: .7; }
[data-quality="low"] #menu-dim { backdrop-filter: none; }

/* ---------- Bildschirme ---------- */
#screens { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(10px, 3vh, 36px) clamp(10px, 3vw, 48px); pointer-events: auto; overflow: auto;
  animation: screen-in .45s var(--ease) both; }
.screen.leaving { pointer-events: none; animation: screen-out .22s ease-in both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes screen-out { to { opacity: 0; transform: translateY(-8px) scale(1.01); } }

.screen-title-bar { width: min(1180px, 100%); display: flex; align-items: center; gap: 16px; margin-bottom: clamp(8px, 2vh, 20px); }
.screen-heading { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(22px, 4vw, 38px); margin: 0; line-height: 1;
  background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(25, 227, 255, .35)); }
.screen-sub { color: var(--ink-dim); font-size: 14px; letter-spacing: .04em; }
.spacer { flex: 1; }

/* ---------- Panels ---------- */
.panel { position: relative; background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-radius: 6px 22px 6px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
  padding: clamp(12px, 2vh, 22px); }
.panel::before { content: ""; position: absolute; left: 14px; top: -1px; width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta)); border-radius: 0 0 3px 3px; box-shadow: 0 0 14px var(--cyan); }
[data-quality="low"] .panel { backdrop-filter: none; background: var(--glass-strong); }
.panel-title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-style: italic;
  letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--cyan); }
.field-label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
  font-weight: 700; margin: 0 0 6px; }

/* ---------- Buttons ---------- */
.btn { position: relative; appearance: none; border: 0; background: none; cursor: pointer; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 120px;
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .1em;
  font-size: 16px; color: #fff; outline: none; isolation: isolate;
  transition: transform .18s var(--ease-bounce), filter .18s; }
.btn > .btn-label { position: relative; z-index: 2; padding: 0 28px; display: inline-flex; align-items: center; gap: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 0;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  background: linear-gradient(180deg, #2b3a8a, #151c55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: background .2s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }
.btn:hover, .btn:focus-visible { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 6px 16px rgba(25, 227, 255, .5)); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible::before { outline: none; background: linear-gradient(180deg, #3f56d8, #1d2a85); }
.btn.primary::before { background: linear-gradient(180deg, #ff5ac0, #d3157f 55%, #8d0b66); }
.btn.primary:hover, .btn.primary:focus-visible { filter: drop-shadow(0 6px 18px rgba(255, 47, 166, .65)); }
.btn.accent::before { background: linear-gradient(180deg, #31f0ff, #0b9fd8 55%, #0a63a8); }
.btn.accent .btn-label { text-shadow: 0 1px 6px rgba(0, 20, 60, .6); }
.btn.go::before { background: linear-gradient(180deg, #7dff9d, #1fc45a 55%, #0b8a3c); }
.btn.go .btn-label { color: #02260f; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn.ghost::before { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn.big { min-height: 64px; min-width: 300px; font-size: 22px; --slant: 20px; }
.btn.small { min-height: 38px; min-width: 80px; font-size: 13px; --slant: 10px; }
.btn.small > .btn-label { padding: 0 18px; }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); pointer-events: none; }
.btn.icon { min-width: 48px; }
.btn.icon > .btn-label { padding: 0 12px; }

.btn-col { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ---------- Eingaben ---------- */
.input { width: 100%; height: 46px; padding: 0 16px; background: rgba(5, 8, 30, .6); color: var(--ink);
  border: 1px solid var(--glass-line); border-radius: 4px 14px 4px 14px; font: 600 17px var(--font-ui); letter-spacing: .04em;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s; user-select: text; -webkit-user-select: text; }
.input::placeholder { color: var(--ink-mute); }
.input:hover { border-color: rgba(255, 255, 255, .32); }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(25, 227, 255, .22), var(--glow-cyan); background: rgba(5, 8, 30, .85); }
.input.code { text-align: center; font: 800 30px var(--font-display); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; height: 60px; }
.input.shake { animation: shake .4s; border-color: var(--red); }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* Segmentiertes Steuerelement */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: rgba(5, 8, 30, .55); border: 1px solid var(--glass-line); border-radius: 6px 16px 6px 16px; flex-wrap: wrap; }
.seg-btn { appearance: none; border: 0; cursor: pointer; padding: 9px 16px; background: transparent; color: var(--ink-dim);
  font: 700 13px var(--font-display); letter-spacing: .1em; text-transform: uppercase; border-radius: 4px 11px 4px 11px;
  transition: background .2s, color .2s, transform .15s; outline: none; }
.seg-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.seg-btn:focus-visible { box-shadow: 0 0 0 2px var(--cyan); color: #fff; }
.seg-btn.on { color: #05102a; background: linear-gradient(180deg, #5af3ff, #19b9e8); box-shadow: 0 0 16px rgba(25, 227, 255, .5); }
.seg-btn[disabled] { opacity: .5; cursor: default; }

/* Schalter */
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; background: none; border: 0; padding: 4px 0; color: var(--ink); font: 600 15px var(--font-ui); outline: none; }
.toggle-track { width: 52px; height: 28px; border-radius: 14px; background: rgba(255, 255, 255, .14); position: relative; transition: background .25s; border: 1px solid var(--glass-line); }
.toggle-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease-bounce); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.toggle.on .toggle-track { background: linear-gradient(90deg, var(--cyan), #3b7bff); box-shadow: var(--glow-cyan); }
.toggle.on .toggle-track::after { transform: translateX(24px); }
.toggle:focus-visible .toggle-track { box-shadow: 0 0 0 3px rgba(25, 227, 255, .5); }
.toggle[disabled] { opacity: .5; cursor: default; }

/* Slider */
.slider-row { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 14px; margin: 10px 0; }
.slider-row label { font-weight: 600; color: var(--ink-dim); }
.slider-row output { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--cyan); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; outline: none; cursor: pointer; --p: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan) var(--p), rgba(255, 255, 255, .15) var(--p)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--cyan); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 4px 9px 4px 9px; background: #fff; border: 2px solid var(--cyan); box-shadow: var(--glow-cyan); transform: skewX(-10deg); transition: transform .15s; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 4px 9px 4px 9px; background: #fff; border: 2px solid var(--cyan); box-shadow: var(--glow-cyan); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { transform: skewX(-10deg) scale(1.2); }

/* Fokus für alles Übrige */
:focus { outline: none; }
.card:focus-visible, .veh-item:focus-visible, .swatch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Stepper (Gegneranzahl etc.) */
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper-val { min-width: 54px; text-align: center; font: 800 28px var(--font-display); font-style: italic; color: var(--yellow); text-shadow: 0 0 18px rgba(255, 210, 63, .5); }

/* Schwierigkeit: Chevrons */
.diff { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.diff i { width: 11px; height: 14px; background: rgba(255, 255, 255, .16); transform: skewX(-20deg); border-radius: 2px; }
.diff i.on { background: linear-gradient(180deg, #ffe66b, var(--orange)); box-shadow: 0 0 8px rgba(255, 150, 30, .7); }
.diff[data-d="1"] i.on { background: linear-gradient(180deg, #8dffb0, #1fc45a); box-shadow: 0 0 8px rgba(61, 255, 139, .6); }
.diff[data-d="3"] i.on { background: linear-gradient(180deg, #ff8d9a, #e0172f); box-shadow: 0 0 8px rgba(255, 77, 94, .7); }

/* Scrollbars */
.screen::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 5px; }

/* FPS */
.fps-counter { position: absolute; left: 10px; bottom: 8px; font: 700 12px var(--font-display); color: var(--green);
  background: rgba(0, 0, 0, .5); padding: 3px 8px; border-radius: 4px; letter-spacing: .08em; z-index: 90; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}