:root{--bg:#15110d;--paper:#f8f0da;--paper2:#efe4c8;--ink:#14110f;--muted:#6b5f4d;--accent:#d9552b;--pop:#2f8fd8;--yel:#ffd84a;--on-accent:#fff7e6;
  --hud:#f4ecd6;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'Special Elite','Courier New',monospace;line-height:1.35;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{position:fixed;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(10,8,6,.55) 100%)}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));overflow:auto}
.paper{background:var(--paper);border:3px solid var(--ink);border-radius:8px 22px 10px 18px;padding:18px 20px 16px;max-width:560px;width:100%;box-shadow:8px 8px 0 rgba(20,17,15,.7);position:relative;
  background-image:radial-gradient(rgba(20,17,15,.09) 1px,transparent 1.2px);background-size:7px 7px}
.paper.wide{max-width:900px}
.paper.small-card{max-width:380px;text-align:center}
.paper h2,.paper h3{font-family:'Permanent Marker',Impact,sans-serif;font-weight:400;font-size:26px;margin:0 0 10px;transform:rotate(-1deg)}
.paper h3{font-size:19px;margin-top:14px}
.title-card{text-align:center;max-width:520px}
.logo{font-family:'Permanent Marker',Impact,sans-serif;line-height:.9;margin:4px 0 10px;display:flex;flex-direction:column;align-items:center}
.logo .l1{font-size:clamp(44px,10vw,84px);transform:rotate(-3deg)}
.logo .l2{font-size:clamp(56px,13vw,110px);color:var(--accent);transform:rotate(2deg);text-shadow:4px 4px 0 var(--ink)}
.tag{color:var(--muted);margin:0 auto 14px;max-width:38ch}
.sub{color:var(--muted);margin:0 0 10px}
.fine{font-size:12px;color:var(--muted);margin:14px 0 0;max-width:70ch}
.stack{display:flex;flex-direction:column;gap:10px;align-items:center}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.btn{font-family:'Permanent Marker',Impact,sans-serif;font-size:22px;background:var(--accent);color:var(--on-accent);border:3px solid var(--ink);border-radius:8px 18px 8px 16px;padding:10px 26px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);min-width:160px}
.btn.big{font-size:28px;padding:14px 34px}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--paper2);color:var(--ink);font-size:18px;padding:8px 16px;box-shadow:3px 3px 0 var(--ink);min-width:0}
.btn.danger{background:#f3c9b8}
.btn:focus-visible,.card:focus-visible,#pad button:focus-visible{outline:4px solid var(--pop);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:default}
.grid{display:grid;gap:10px}
.modes{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.drivers{grid-template-columns:repeat(3,1fr)}
.courses{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--paper2);border:3px solid var(--ink);border-radius:6px 14px 8px 12px;padding:8px;cursor:pointer;position:relative}
.card strong{font-family:'Permanent Marker',Impact,sans-serif;font-weight:400;font-size:19px;display:block;line-height:1.1}
.card span{color:var(--muted);font-size:12px;display:block;margin-top:4px}
.card[aria-pressed="true"]{outline:4px solid var(--accent);outline-offset:2px;transform:rotate(-.8deg);background:#fff6df}
.card.locked{opacity:.55;filter:grayscale(.6)}
.card.locked::after{content:"LOCKED";position:absolute;right:8px;top:8px;font-family:'Permanent Marker',Impact,sans-serif;font-size:13px;background:var(--ink);color:var(--yel);padding:1px 6px;border-radius:4px}
.card canvas{width:100%;height:auto;display:block;border:2px solid var(--ink);border-radius:4px;background:#ddd;margin-bottom:6px}
.card .swatch{height:10px;border:2px solid var(--ink);border-radius:3px;margin-top:6px}
.card .rec{font-size:11px;color:var(--ink);margin-top:4px}
.driver-wrap{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.preview-box{position:relative;background:#e2d6b6;border:3px solid var(--ink);border-radius:8px;overflow:hidden;aspect-ratio:1}
.preview-box canvas{width:100%;height:100%;display:block}
.preview-name{position:absolute;left:8px;bottom:6px;font-family:'Permanent Marker',Impact,sans-serif;font-size:26px;color:var(--hud);text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.stats{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:13px}
.stats .m{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:6px}
.pips{display:flex;gap:2px}.pips i{flex:1;height:9px;border:1.5px solid var(--ink)}.pips i.on{background:var(--accent)}
.stats .bio{grid-column:1/-1;color:var(--muted);margin-top:4px}
.opt{display:flex;align-items:center;gap:10px;margin-top:14px;cursor:pointer}
.opt input{width:22px;height:22px;accent-color:var(--accent)}
.optrow{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
select{font:inherit;font-size:15px;background:var(--paper2);color:var(--ink);border:3px solid var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer}
.slider{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:10px;margin-top:12px}
.slider input{accent-color:var(--accent);width:100%}
.standings{list-style:none;padding:0;margin:6px 0;font-size:16px}
.standings li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;padding:5px 8px;border-bottom:2px dashed rgba(20,17,15,.25);align-items:center}
.standings li.me{background:rgba(255,216,74,.45);font-weight:bold}
.standings .pts{font-family:'Permanent Marker',Impact,sans-serif}
#records table{width:100%;border-collapse:collapse;font-size:14px}
#records td,#records th{padding:5px 6px;border-bottom:2px dashed rgba(20,17,15,.25);text-align:left}
#records th{font-family:'Permanent Marker',Impact,sans-serif;font-weight:400}

/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;font-family:'Permanent Marker',Impact,sans-serif;color:var(--hud);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.hud-tl{position:absolute;left:14px;top:max(10px,env(safe-area-inset-top))}
.place{font-size:58px;line-height:1;color:var(--yel)}.place small{font-size:20px;color:var(--hud);margin-left:4px}
.hud-tr{position:absolute;right:14px;top:max(10px,env(safe-area-inset-top));text-align:right;font-size:26px;line-height:1.1}
#hTime{font-size:20px}.small{font-size:14px;opacity:.9}
.hud-tc{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%)}
.itembox{width:64px;height:64px;border:3px solid var(--ink);border-radius:12px;background:rgba(244,236,214,.92);display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink)}
.itembox canvas{width:52px;height:52px}
.itembox.flash{animation:flash .4s infinite alternate}
@keyframes flash{from{background:rgba(244,236,214,.92)}to{background:var(--yel)}}
.hud-bl{position:absolute;left:14px;bottom:max(14px,env(safe-area-inset-bottom))}
#minimap{width:140px;height:140px}
.hud-br{position:absolute;right:14px;bottom:max(14px,env(safe-area-inset-bottom));text-align:right}
.speedo{width:170px;height:16px;border:3px solid var(--ink);border-radius:5px;background:rgba(20,17,15,.7);overflow:hidden}
#hSpeed{height:100%;width:0;background:#ff7d48;transition:background .2s}
#hSpeed.boost{background:var(--yel)}
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:clamp(36px,8vw,72px);color:var(--yel);opacity:0;transform:scale(.6) rotate(-4deg);transition:opacity .2s,transform .2s;text-shadow:4px 4px 0 var(--ink)}
#banner.show{opacity:1;transform:scale(1) rotate(-2deg)}
#count{position:absolute;left:0;right:0;top:36%;text-align:center;font-size:clamp(90px,22vw,170px);color:var(--yel);text-shadow:6px 6px 0 var(--ink);line-height:1}
#introTitle{position:absolute;left:0;right:0;top:30%;text-align:center;opacity:0;transition:opacity .6s}
#introTitle.show{opacity:1}
#introTitle .big{font-size:clamp(44px,10vw,110px);color:var(--yel);text-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg);line-height:1}
#introTitle .era{font-size:clamp(18px,3.5vw,34px);color:var(--hud);margin-top:6px}
#introTitle .skip{font-family:'Special Elite',monospace;font-size:13px;opacity:.8;margin-top:28px;text-shadow:none;color:var(--hud)}
.screen.side{justify-content:flex-end;padding-right:max(16px,3vw);align-items:center}
.screen.side .paper{max-width:430px;max-height:92vh;overflow:auto}
.medal{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);vertical-align:-2px;margin-right:4px}
.medal.gold{background:#ffd84a}.medal.silver{background:#d9d9d2}.medal.bronze{background:#c8783a}.medal.none{background:transparent;border-style:dashed}
.title-card{margin-left:auto;margin-right:auto}
@media (min-width:1000px){#s-title{justify-content:flex-start;padding-left:6vw}}
/* touch pad: steer-left on the left edge, steer-right on the right edge, actions stacked above each thumb */
#pad{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:none;justify-content:space-between;align-items:flex-end;padding:0 10px;pointer-events:none;user-select:none;-webkit-user-select:none}
#pad .grp{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:auto}
#pad .stack-btn{display:flex;gap:8px}
#pad button{font-family:'Permanent Marker',Impact,sans-serif;font-size:15px;min-width:64px;height:48px;padding:0 10px;border:3px solid var(--ink);border-radius:12px;background:rgba(248,240,218,.82);color:var(--ink);touch-action:none;box-shadow:3px 3px 0 var(--ink);text-shadow:none}
#pad button.on{background:var(--accent);color:var(--on-accent);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#pad button.steer{min-width:136px;height:88px;font-size:34px;border-radius:18px}
body.touch #pad{display:flex}
body.touch .hud-bl{left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom))}
body.touch .hud-br{right:50%;transform:translateX(50%);bottom:max(100px,calc(env(safe-area-inset-bottom) + 88px))}
body.touch #pauseBtn{top:max(10px,env(safe-area-inset-top));right:50%;transform:translateX(50%)}
body.touch .hud-tc{top:max(60px,calc(env(safe-area-inset-top) + 50px))}
#pauseBtn{position:absolute;right:14px;top:calc(max(10px,env(safe-area-inset-top)) + 64px);pointer-events:auto;font-family:'Permanent Marker',Impact,sans-serif;font-size:18px;width:44px;height:40px;border:3px solid var(--ink);border-radius:8px;background:rgba(248,240,218,.85);color:var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;text-shadow:none}
@media (max-width:720px){.driver-wrap{grid-template-columns:1fr}.preview-box{max-width:260px;margin:0 auto}.place{font-size:44px}.hud-tr{font-size:20px}#minimap{width:100px;height:100px}.speedo{width:120px}}
@media (max-width:520px){#pad button{min-width:54px;height:44px;font-size:13px}#pad button.steer{min-width:112px;height:76px;font-size:28px}.paper{padding:14px}.btn{min-width:0}}