@font-face{font-family:'Oswald';font-weight:400;font-display:swap;src:url(/assets/fonts/oswald-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(/assets/fonts/oswald-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-weight:600;font-display:swap;src:url(/assets/fonts/oswald-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-weight:700;font-display:swap;src:url(/assets/fonts/oswald-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Share Tech Mono';font-weight:400;font-display:swap;src:url(/assets/fonts/share-tech-mono-latin-400-normal.woff2) format('woff2')}

/* Layout: Vollbild-Rennstrecke als Canvas, darüber HUD und Menüs auf Carbon. Ein Look: dunkel, Rot, keine Rundungen. */
:root{
  --bg:#0e0e0f; --panel:#141416; --panel2:#1b1b1e; --line:#2c2c31;
  --red:#E00000; --red-hot:#ff2b2b; --fg:#ececec; --fg2:#b9b9be;
  --good:#2bd46a; --bad:#ff4d4d; --gold:#f2c200;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,Consolas,'Courier New',monospace;
  color-scheme:dark;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);overflow:hidden;font-family:var(--display);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
*{box-sizing:border-box;border-radius:0}
[hidden]{display:none!important}
#game,#game3d{position:fixed;inset:0;width:100%;height:100%;display:block;background:#2f4a26}
#game3d{display:none}
button{font-family:var(--display);cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--red-hot);outline-offset:2px}

/* ---------- Carbon + Glow ---------- */
.carbon{
  background-color:#121213;
  background-image:
    linear-gradient(27deg,#18181a 5px,transparent 5px),
    linear-gradient(207deg,#18181a 5px,transparent 5px),
    linear-gradient(27deg,#232326 5px,transparent 5px),
    linear-gradient(207deg,#232326 5px,transparent 5px),
    linear-gradient(90deg,#1c1c1e 10px,transparent 10px),
    linear-gradient(#1e1e20 25%,#1a1a1c 25%,#1a1a1c 50%,transparent 50%,transparent 75%,#252528 75%,#252528);
  background-size:20px 20px;
  background-position:0 5px,10px 0,0 10px,10px 5px,0 0,0 0;
}
.glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(224,0,0,.18),transparent 60%)}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;display:flex;z-index:20;overflow:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.screen[hidden]{display:none!important}
.wrap{position:relative;margin:auto;width:min(1120px,100%);display:grid;gap:28px}
.brand{font-family:var(--mono);color:var(--red-hot);letter-spacing:.25em;font-size:13px;text-transform:uppercase}
h1.logo{margin:0;font-weight:700;line-height:.86;font-size:clamp(56px,11vw,132px);letter-spacing:-.01em;text-transform:uppercase}
h1.logo span{display:block;color:var(--red);-webkit-text-stroke:0}
h1.logo em{font-style:normal;display:inline-block;transform:skewX(-12deg)}
.tag{font-family:var(--mono);color:var(--fg2);font-size:15px;max-width:46ch;line-height:1.5}
.menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.modes{display:grid;gap:10px}
.mode{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;text-align:left;background:rgba(14,14,15,.82);border:1px solid var(--line);color:var(--fg);padding:14px 16px;transition:border-color .15s,transform .15s,background .15s}
.mode:hover{border-color:var(--red);transform:translateX(4px);background:rgba(30,6,6,.85)}
.mode b{font-size:26px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.mode small{display:block;font-family:var(--mono);font-size:13px;color:var(--fg2);margin-top:4px;letter-spacing:.02em;text-transform:none}
.mode i{font-style:normal;font-family:var(--mono);color:var(--red-hot);font-size:14px}
.mode .num{font-family:var(--mono);color:var(--red);font-size:22px}
.subnav{display:flex;flex-wrap:wrap;gap:8px}
.btn{background:transparent;border:1px solid var(--line);color:var(--fg);padding:10px 16px;font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.btn:hover{border-color:var(--red)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--red-hot)}
.btn.small{padding:7px 12px;font-size:14px}
.preview{position:relative;aspect-ratio:4/3;max-width:100%;border:1px solid var(--line);background:#0b0b0c;overflow:hidden}
.preview canvas{width:100%;height:100%;display:block}
.preview .cap{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:13px;color:var(--fg2);letter-spacing:.1em}
.foot{font-family:var(--mono);font-size:12px;color:var(--fg2);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
.foot a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--red)}

/* Garage-Auswahl */
.sel-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.carnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.carnav .arrow{width:52px;height:52px;font-size:24px;background:rgba(14,14,15,.85);border:1px solid var(--line);color:var(--fg)}
.carnav .arrow:hover{border-color:var(--red)}
.dots{display:flex;gap:6px}.dots span{width:22px;height:4px;background:var(--line)}.dots span.on{background:var(--red)}
.cartitle{font-size:clamp(30px,4.5vw,46px);font-weight:600;text-transform:uppercase;line-height:1;margin:0}
.carsub{font-family:var(--mono);color:var(--red-hot);font-size:14px;margin-top:6px}
.cardesc{font-family:var(--mono);color:var(--fg2);font-size:14px;line-height:1.55;margin:14px 0}
.specs{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;font-family:var(--mono);font-size:13px}
.specs .bar{height:6px;background:#26262a;position:relative}.specs .bar i{position:absolute;inset:0 auto 0 0;background:var(--red)}
.specs .v{color:var(--fg);text-align:right;font-variant-numeric:tabular-nums}
.specs .k{color:var(--fg2);text-transform:uppercase;letter-spacing:.08em}
.label{font-family:var(--mono);font-size:12px;color:var(--fg2);letter-spacing:.2em;text-transform:uppercase;margin:18px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(14,14,15,.85);border:1px solid var(--line);color:var(--fg);padding:9px 14px;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.chip small{font-family:var(--mono);color:var(--fg2);font-size:12px;margin-left:6px;text-transform:none}
.chip.on{border-color:var(--red);background:rgba(224,0,0,.16)}
.chip:disabled{opacity:.35;cursor:not-allowed}
.top-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:var(--mono)}
#hud[hidden]{display:none}
.hud-tl,.hud-tr,.hud-tc,.hud-br{position:absolute}
.hud-tl{left:max(14px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top))}
.hud-tr{right:max(14px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));text-align:right}
.hud-tc{left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);text-align:center}
.hud-br{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));text-align:right}
.hbox{background:rgba(10,10,11,.72);border-left:3px solid var(--red);padding:6px 12px;margin-bottom:6px;font-variant-numeric:tabular-nums}
.hk{font-size:11px;letter-spacing:.2em;color:var(--fg2);text-transform:uppercase}
.hv{font-size:22px;color:#fff}
.hv.big{font-size:34px}
#hTime{font-size:34px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.8)}
#hDelta{font-size:16px;height:20px}
.pos{color:#fff}.neg{color:var(--bad)}.goodc{color:var(--good)}
#speedo{display:flex;align-items:flex-end;gap:10px;justify-content:flex-end}
#hSpeed{font-size:64px;line-height:.85;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 3px 12px rgba(0,0,0,.8)}
#hGear{font-size:30px;color:var(--red-hot);border:1px solid var(--red);padding:2px 9px;line-height:1.1;background:rgba(10,10,11,.7)}
.kmh{font-size:12px;letter-spacing:.2em;color:var(--fg2)}
#rpm{width:220px;max-width:46vw;height:8px;background:rgba(255,255,255,.12);margin:8px 0 0 auto;position:relative}
#rpm i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#fff 0,#fff 70%,var(--red) 85%)}
#minimap{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:170px;height:130px;background:rgba(10,10,11,.6);border:1px solid rgba(255,255,255,.08)}
#drift{position:absolute;left:50%;top:22%;transform:translateX(-50%);text-align:center;font-family:var(--display)}
#drift .ds{font-size:46px;font-weight:700;color:#fff;text-shadow:0 2px 0 var(--red),0 4px 16px rgba(0,0,0,.6)}
#drift .dm{font-family:var(--mono);color:var(--gold);font-size:20px}
#msg{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(34px,7vw,74px);font-weight:700;text-transform:uppercase;color:#fff;text-shadow:0 3px 0 var(--red),0 6px 24px rgba(0,0,0,.7);white-space:nowrap;opacity:0;transition:opacity .2s}
#msg.on{opacity:1}
#lights{position:absolute;left:50%;top:16%;transform:translateX(-50%);display:flex;gap:10px;background:#0b0b0c;padding:12px 14px;border:1px solid #333}
#lights[hidden]{display:none}
#lights i{width:34px;height:34px;background:#2a0000;border-radius:50%;box-shadow:inset 0 0 6px #000}
#lights i.on{background:var(--red-hot);box-shadow:0 0 18px var(--red-hot),inset 0 0 6px #900}
#lights.go i{background:#16ff6a;box-shadow:0 0 18px #16ff6a}
#pauseBtn{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 142px);pointer-events:auto;height:44px;padding:0 14px;display:flex;align-items:center;gap:8px;background:rgba(10,10,11,.8);border:1px solid var(--red);color:#fff;font:16px var(--display);letter-spacing:.08em;text-transform:uppercase}
#pauseBtn b{color:var(--red-hot);font-size:13px}#pauseBtn kbd{font:11px var(--mono);border:1px solid var(--line);padding:2px 5px;color:var(--fg2)}
#pauseBtn:hover{background:var(--red)}

/* ---------- Touch ---------- */
#touch{position:fixed;inset:auto 0 0 0;height:46%;z-index:11;pointer-events:none}
#touch[hidden]{display:none}
.tb{position:absolute;pointer-events:auto;background:rgba(14,14,15,.42);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--display);font-size:18px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;touch-action:none}
.tb.on{background:rgba(224,0,0,.55);border-color:var(--red-hot)}
#tL{left:max(12px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:84px;height:84px;font-size:30px}
#tR{left:calc(max(12px,env(safe-area-inset-left)) + 96px);bottom:max(18px,env(safe-area-inset-bottom));width:84px;height:84px;font-size:30px}
#tGas{right:max(12px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:92px;height:118px}
#tBrk{right:calc(max(12px,env(safe-area-inset-right)) + 104px);bottom:max(18px,env(safe-area-inset-bottom));width:84px;height:84px}
#tHb{right:calc(max(12px,env(safe-area-inset-right)) + 104px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 96px);width:84px;height:56px;font-size:14px}
body.touch #pauseBtn{top:max(10px,env(safe-area-inset-top));bottom:auto;left:auto;right:max(14px,env(safe-area-inset-right))}body.touch #pauseBtn kbd{display:none}
body.touch .hud-tr{top:calc(max(12px,env(safe-area-inset-top)) + 54px)}
body.touch .hud-br{right:auto;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));text-align:center}
body.touch #speedo{justify-content:center}body.touch #rpm{margin:6px auto 0;width:150px}
body.touch #minimap{bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + 136px);width:120px;height:92px}
body.touch #hSpeed{font-size:44px}

/* ---------- Panels (Pause, Ergebnis, Bestenliste) ---------- */
.panel{position:relative;margin:auto;width:min(560px,100%);border:1px solid var(--line);padding:26px 24px;display:grid;gap:16px}
.panel h2{margin:0;font-size:38px;font-weight:600;text-transform:uppercase;line-height:1}
.panel h2 small{display:block;font-family:var(--mono);font-size:13px;color:var(--red-hot);letter-spacing:.2em;margin-bottom:8px;font-weight:400}
.panel .row{display:flex;flex-wrap:wrap;gap:8px}
.dim{background:rgba(6,6,7,.72)}
table.lb{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
table.lb td,table.lb th{padding:7px 6px;border-bottom:1px solid #26262a;text-align:left}
table.lb th{color:var(--fg2);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
table.lb td.r{text-align:right}
table.lb tr.me td{color:var(--gold)}
table.lb td.p{color:var(--red-hot);width:2.5em}
.big-res{font-family:var(--mono);font-size:44px;color:#fff;font-variant-numeric:tabular-nums}
.note{font-family:var(--mono);font-size:12.5px;color:var(--fg2);line-height:1.5}
.field{display:grid;gap:6px}
.field > label:not(.check){font-family:var(--mono);font-size:12px;color:var(--fg2);letter-spacing:.15em;text-transform:uppercase}
.field input[type=text],.field input[type=email]{background:#0b0b0c;border:1px solid var(--line);color:#fff;font-family:var(--mono);font-size:18px;padding:10px 12px;width:100%;-webkit-user-select:text;user-select:text}
.check{display:flex;gap:10px;align-items:flex-start;font-family:var(--mono);font-size:13.5px;color:var(--fg);line-height:1.45;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--red);flex:none;margin:0}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-family:var(--mono);font-size:14px}
.keys kbd{font-family:var(--mono);border:1px solid var(--line);padding:2px 7px;color:#fff;background:#0b0b0c;margin-right:4px}
.keys span{color:var(--fg2)}
.yt{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:12px 14px;text-decoration:none;color:var(--fg);background:#0b0b0c}
.yt:hover{border-color:var(--red)}
.yt b{display:block;font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.yt span{font-family:var(--mono);font-size:12px;color:var(--fg2)}
.yt .play{width:46px;height:32px;background:var(--red);flex:none;position:relative}
.yt .play:after{content:"";position:absolute;left:18px;top:9px;border-left:13px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
#rotateHint{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:var(--mono);font-size:16px;color:var(--fg)}

@media (max-width:820px){
  .menu-grid,.sel-grid{grid-template-columns:minmax(0,1fr)}
  .preview{aspect-ratio:16/10}
  .wrap{gap:18px}
  .mode b{font-size:22px}
  .mode{grid-template-columns:40px 1fr auto;padding:12px}
}
@media (max-height:520px){
  h1.logo{font-size:clamp(40px,9vh,64px)}
  .tag{display:none}
  .mode{padding:8px 12px}.mode b{font-size:19px}.mode small{font-size:11.5px}
  .wrap{gap:12px}.preview{aspect-ratio:16/9}
  .yt span span{display:none}
  .sel-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cardesc{display:none}.label{margin:10px 0 6px}
  .panel{padding:16px;gap:10px}.panel h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.mode,.mode:hover{transition:none;transform:none}}

.back{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);text-decoration:none}.back:hover{color:var(--red-hot)}

/* ---------- Zurück, Witti ---------- */
.exit{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--red);color:#fff;text-decoration:none;font:15px var(--display);letter-spacing:.08em;text-transform:uppercase;background:rgba(224,0,0,.08)}
.exit:hover{background:var(--red)}
.lb tr.witti td{background:rgba(224,0,0,.14)}
.wbadge{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--red-hot);color:var(--red-hot);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle}
.wpop{text-align:center;max-width:460px}
.wpop h2{font-size:clamp(26px,4.4vw,40px);line-height:1.05;margin:6px 0 10px;text-transform:uppercase}
.wpop p{color:var(--fg2);font-size:18px;margin:0 0 18px}
.wpop .row{justify-content:center}
.wpop-badge{width:58px;height:58px;margin:0 auto;display:grid;place-items:center;background:var(--red);color:#fff;font:700 34px var(--display);clip-path:polygon(50% 0,100% 18%,92% 78%,50% 100%,8% 78%,0 18%)}

/* Streckenvorschau und Rundenwahl */
.tchip{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px}
.tchip .tprev{display:block;width:132px;height:84px;background:#0b0b0c;border:1px solid var(--line)}
.tchip small{display:block;margin:2px 0 0}
.laps{display:flex;align-items:center;gap:14px}
.laps b{font:700 30px var(--display);min-width:2ch;text-align:center}
.laps .arrow{width:46px;height:46px;font-size:24px;background:rgba(14,14,15,.85);border:1px solid var(--line);color:var(--fg)}
.laps .arrow:hover{border-color:var(--red)}