@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Oswald:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* PRISMA Chatarra — the PRISMA "Multiverso" cartoon layer (cream paper, ink outlines, hard offset shadows), desert edition */
:root{--ink:#10141f;--paper:#f3ebd8;--sun:#ff8a3d;--lime:#c6ff6b;--sky:#46c8ff;--rust:#b4552d;--night:#070a18;color-scheme:dark;font-family:'Space Grotesk',sans-serif;color:#f6efe0;background:#1a0f0a}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overflow:hidden;background:#1a0f0a;-webkit-tap-highlight-color:transparent}
#scene,canvas#gl,.vignette,#overlay{position:fixed;inset:0;width:100%;height:100%}
#scene{z-index:0}#scene canvas{display:block;width:100%;height:100%}
.vignette{pointer-events:none;z-index:1;background:linear-gradient(180deg,#0a061099,transparent 22%,transparent 72%,#0a0610cc);box-shadow:inset 0 0 140px #0a061088}
button{cursor:pointer;font:inherit}
button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* header */
header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:22px 34px;z-index:5}
.brand{font-family:'Oswald',sans-serif;font-size:26px;font-weight:700;letter-spacing:4px;text-decoration:none;color:var(--paper);text-shadow:3px 3px 0 var(--ink);line-height:1}
.brand b{color:var(--sun);margin-left:8px}
.brand span{display:block;font-family:'Space Grotesk',sans-serif;font-size:9px;letter-spacing:3px;margin-top:6px;color:#ffd7a8;text-shadow:1px 1px 0 var(--ink)}
.mission{margin:auto;font-size:10px;letter-spacing:2px;color:#ffd7a8;text-align:center;text-shadow:1px 1px 0 var(--ink)}
.mission b{display:block;color:var(--paper);margin-top:5px;font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:1px;text-shadow:2px 2px 0 var(--ink)}
.mission small{display:block;margin-top:5px;font-size:9px;letter-spacing:1px;color:#ffd7a8;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small{border:2px solid var(--ink);background:#f3ebd8e6;color:var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);font-weight:700;padding:10px 12px;font-size:10px;letter-spacing:1px;transition:transform .08s,box-shadow .08s}
.small:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.small:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.small[aria-pressed="true"]{background:var(--lime)}
.primary{background:var(--sun);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:10px;font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:1px;padding:13px 20px;font-weight:600;transition:transform .08s,box-shadow .08s}
.primary:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink)}.primary:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.eyebrow{font-size:9px;letter-spacing:2px;color:#ffe2bd;text-shadow:1px 1px 0 var(--ink)}
.tag{display:inline-block;background:var(--paper);color:var(--ink);padding:5px 10px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:700;font-size:10px;letter-spacing:3px}

/* menu */
#overlay{z-index:4;display:flex;align-items:center;padding:0 7%;background:linear-gradient(90deg,#120a08f2,#120a08b0 52%,transparent 84%);overflow:auto}
.intro{max-width:780px;max-height:92dvh;overflow:auto;padding:70px 6px 24px 0;scrollbar-width:thin}
h1{font-family:'Oswald','Barlow Condensed',Impact,sans-serif;text-transform:uppercase;font-size:clamp(44px,5.6vw,86px);line-height:.95;margin:16px 0;color:var(--paper);text-shadow:4px 4px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
h1 em{font-style:normal;color:var(--sun)}
.intro p{font-size:14px;line-height:1.65;color:#eadfcd;margin:12px 0}
.modeSelect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 12px}
.modeSelect button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;text-align:left;background:#1c1210e6;color:var(--paper);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .12s}
.modeSelect strong{font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;letter-spacing:1px}
.modeSelect small{font-size:10px;color:#d8c8b0}
.modeSelect button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.modeSelect button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--sun),6px 6px 0 var(--ink)}
.modeSelect button[aria-pressed="true"] small{color:#4b4b55}
.worldMap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 8px}
.worldCard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:66px;padding:8px 10px 8px 12px;text-align:left;background:#140c0ae6;color:var(--paper);border:2px solid var(--ink);border-left:6px solid var(--world);border-radius:10px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .12s}
.worldCard i{font-style:normal;font-family:'Oswald',sans-serif;font-size:11px;color:var(--world);letter-spacing:1px}
.worldCard strong{font-family:'Oswald',sans-serif;font-size:14px;line-height:1.1;font-weight:600}
.worldCard small{font-size:10px;color:#cdbfaa;line-height:1.2}
.worldCard:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.worldCard[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--world),6px 6px 0 var(--ink)}
.worldCard[aria-pressed="true"] small{color:#4b4b55}
.worldCard.cupSlot{cursor:default}
.worldCard .best{position:absolute;top:6px;right:8px;font-size:9px;font-weight:700;color:var(--world)}
.worldCard[aria-pressed="true"] .best{color:var(--ink)}
#modeDescription{font-size:13px;min-height:2.6em;color:#f0e2cc}
.startRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#start{min-width:250px;padding:17px 22px;background:var(--sun);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:10px;font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;letter-spacing:1px;text-align:left;transition:transform .08s,box-shadow .08s}
#start span{float:right;font-size:18px}
#start:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink)}#start:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
#start:disabled{opacity:.6;cursor:wait}
.intro .playHint{font-size:11px;line-height:1.6;max-width:560px;color:#d8cbb6}
.musicCredit{font-size:10px;color:#cdbca4;margin-top:12px}.musicCredit a{color:#ffd7a8}
details.musicCredit summary{cursor:pointer;color:#ecdcc4}
details.musicCredit ul{list-style:none;padding:0;margin:8px 0 0;max-height:180px;overflow:auto;display:grid;gap:6px}
details.musicCredit li{display:grid;gap:2px;font-size:10px;color:#bfae96;line-height:1.4}details.musicCredit li b{color:#f6ead6}
#loading{font-size:10px;color:#e8cfa8;letter-spacing:1px;margin-top:14px}

/* race HUD */
#raceHud{position:fixed;inset:0;z-index:3;pointer-events:none}
.posBox{position:absolute;left:34px;top:96px;display:flex;flex-direction:column;gap:2px;text-shadow:3px 3px 0 var(--ink)}
.posBox strong{font-family:'Oswald',sans-serif;font-size:64px;line-height:1;color:var(--paper)}
.posBox strong b{font-weight:700}.posBox strong i{font-style:normal;font-size:24px;color:#ffd7a8;margin-left:2px}
.posBox #lap{font-family:'Oswald',sans-serif;font-size:18px;color:var(--sun);letter-spacing:1px}
.posBox #raceTime{font-size:12px;letter-spacing:1px;color:#ffe2bd}
.standList{position:absolute;left:34px;top:248px;margin:0;padding:6px 0;list-style:none;width:178px;font-size:11px;background:#10141fa8;border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 #0008}
.standList li{display:flex;align-items:center;gap:6px;padding:2px 9px;color:#efe4d2}
.standList li i{font-style:normal;width:16px;text-align:right;color:#bba98f;font-size:10px}
.standList li span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.standList li em{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);background:var(--c)}
.standList li.me{background:var(--paper);color:var(--ink);font-weight:700}.standList li.me i{color:var(--ink)}
.standList li.gap{justify-content:center;color:#8a7b66;padding:0}
#minimap{position:absolute;right:34px;top:92px;width:150px;height:150px;background:#10141f8c;border:2px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 #0008}
.speedBox{position:absolute;right:34px;bottom:30px;width:210px;text-align:right;text-shadow:3px 3px 0 var(--ink)}
.speedBox>strong{font-family:'Oswald',sans-serif;font-size:72px;line-height:.9;color:var(--paper);font-variant-numeric:tabular-nums}
.speedBox>span{display:block;font-size:11px;letter-spacing:3px;color:#ffd7a8;margin-bottom:8px}
.nitroLabel{display:flex;justify-content:space-between;align-items:center}.nitroLabel b{font-size:14px;color:#7fe8ff}
.bar{height:12px;background:#0b1020;border:2px solid var(--ink);border-radius:7px;box-shadow:2px 2px 0 #0008;overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#46c8ff,#7fe8ff);border-radius:4px;transition:width .1s}
#nitroMeter.on i{background:linear-gradient(90deg,#ff8a3d,#ffd23a)}
.drift{display:flex;justify-content:flex-end;align-items:center;gap:5px;opacity:.35;transition:opacity .15s}
.drift i{width:22px;height:8px;border:2px solid var(--ink);border-radius:4px;background:#0b1020}
.drift span{font-size:9px;letter-spacing:2px;margin-left:4px}
.drift[data-level]:not([data-level="0"]){opacity:1}
.drift[data-level="1"] i:nth-child(1),.drift[data-level="2"] i:nth-child(-n+2),.drift[data-level="3"] i{background:var(--c,#6fd6ff)}
.drift[data-level="1"]{--c:#6fd6ff}.drift[data-level="2"]{--c:#ff9a3d}.drift[data-level="3"]{--c:#ff5cd6}
.drift.active{opacity:.8}
#countdown{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);z-index:6;font-family:'Oswald',sans-serif;font-size:min(26vw,190px);font-weight:700;color:var(--paper);text-shadow:7px 7px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);pointer-events:none;opacity:0}
#countdown.pop{animation:pop .9s ease-out forwards}#countdown.go{color:var(--sun)}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
#notice{position:fixed;top:22%;left:0;width:100%;padding:0 14px;text-align:center;z-index:6;font-family:'Oswald',sans-serif;font-size:22px;letter-spacing:2px;color:var(--paper);text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink);pointer-events:none;opacity:0;transition:opacity .25s}
#notice.show{opacity:1}#notice.warn{color:#ff6b5a}#notice.good{color:var(--lime)}

/* hunt HUD */
#huntHud{position:fixed;left:34px;top:96px;z-index:3;pointer-events:none;text-shadow:2px 2px 0 var(--ink);max-width:280px}
#huntHud strong{display:block;font-family:'Oswald',sans-serif;font-size:40px;color:var(--paper);margin:4px 0}
#huntHud ul{list-style:none;padding:0;margin:0;font-size:12px;line-height:1.6;color:#f0e2cc}

footer{position:fixed;bottom:22px;left:34px;z-index:3;pointer-events:none}
.controls{display:flex;gap:16px;flex-wrap:wrap;font-size:9px;letter-spacing:1px;color:#f0dcc0;text-shadow:1px 1px 0 var(--ink);max-width:62vw}
.controls>span{display:flex;align-items:center;gap:4px}
kbd{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:3px 6px;font:700 10px 'Space Grotesk';border-radius:5px;box-shadow:2px 2px 0 var(--ink);text-shadow:none}

/* visibility by state */
body:not(.racing) :is(#raceHud,footer){opacity:0;visibility:hidden}
body.racing #overlay,body.hunting #overlay{display:none}
body:not(.hunting) #huntHud{display:none}
body.hunting footer{opacity:0}
body.menu #pause,body.garage #pause{visibility:hidden}
body:is(.racing,.hunting) #garageBtn{display:none}
body.garage #overlay{display:none}

/* touch */
#touchControls{display:none;position:fixed;inset:0;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-mode:is(.racing,.hunting) #touchControls{display:block}
.touch-mode footer{display:none}
#touchControls button{pointer-events:auto;touch-action:none;border:3px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);background:#f3ebd8d9;color:var(--ink);font-size:26px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#touchControls button small{font-size:8px;letter-spacing:1px}
#touchControls button.pressed{background:var(--sun);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.steerPad{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:14px}
.steerPad button{width:92px;height:92px;font-size:34px!important}
.pedals{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,auto);gap:12px;align-items:end}
.pedals button{width:76px;height:76px}
#tGas[aria-pressed="true"]{background:var(--lime)}
#tNitro{background:#bff3ffd9}
.touch-mode .speedBox{bottom:auto;top:250px;right:22px;width:150px}.touch-mode .speedBox>strong{font-size:46px}
.touch-mode .standList{display:none}

/* dialogs */
dialog{width:min(560px,92vw);max-height:88dvh;overflow:auto;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink);padding:24px}
dialog::backdrop{background:#0a0610b8;backdrop-filter:blur(5px)}
dialog p,dialog small,dialog label{color:#3a3a44}
h2{font-family:'Oswald',sans-serif;font-size:38px;line-height:1;margin:12px 0 16px;text-transform:uppercase}
h3{font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:2px;margin:0 0 6px}
.dialogHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dialogActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.dialogActions.vertical{flex-direction:column;align-items:stretch}
#garageDialog{position:fixed;margin:0;left:auto;right:28px;top:50%;transform:translateY(-50%);width:min(430px,92vw)}
#garageDialog:not([open]){display:none}
#garageBalance{display:block;font-family:'Oswald',sans-serif;font-size:22px}
#upgradeList{display:grid;gap:10px;margin:12px 0}
.upgradeCard{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:12px;border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);background:#fff8e8}
.upgradeCard>b{font-size:26px;grid-row:span 2;width:34px;text-align:center}
.upgradeCard strong{font-family:'Oswald',sans-serif;font-size:17px}
.upgradeCard p{margin:0;font-size:11px;color:#4b4b55}
.upgradeCard .pips{display:flex;gap:3px;margin-top:4px}.upgradeCard .pips i{width:16px;height:7px;border:1.5px solid var(--ink);border-radius:3px}.upgradeCard .pips i.on{background:var(--sun)}
.upgradeCard button{grid-row:span 2;border:2px solid var(--ink);background:var(--lime);color:var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);padding:8px 10px;font-weight:700;font-size:11px;min-width:76px}
.upgradeCard button:disabled{background:#d8d0bf;opacity:.7;cursor:default}
#garageNext{width:100%}
#resultsDialog{width:min(860px,94vw)}
.tables{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.resultTable{list-style:none;margin:0;padding:0;font-size:12px;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff8e8}
.resultTable li{display:grid;grid-template-columns:24px 12px 1fr auto auto;gap:8px;align-items:center;padding:4px 10px;border-bottom:1px solid #10141f22}
.resultTable li:last-child{border-bottom:0}
.resultTable li i{font-style:normal;font-weight:700;text-align:right}
.resultTable li em{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);background:var(--c)}
.resultTable li small{color:#5b5b66;font-variant-numeric:tabular-nums}
.resultTable li b{min-width:30px;text-align:right}
.resultTable li.me{background:var(--sun);font-weight:700}.resultTable li.me small{color:var(--ink)}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:8px 0 18px}
.podium div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:150px;padding:10px 6px;border:3px solid var(--ink);border-radius:10px 10px 0 0;box-shadow:4px 4px 0 var(--ink);background:var(--c);color:var(--ink);text-align:center;font-weight:700}
.podium div b{font-family:'Oswald',sans-serif;font-size:34px}.podium div span{font-size:12px}.podium div small{color:var(--ink)}
.podium .p1{height:150px}.podium .p2{height:115px}.podium .p3{height:90px}
.podium .me{outline:4px dashed var(--ink);outline-offset:3px}

/* responsive */
@media(max-width:800px){
 header{padding:14px 14px;gap:6px;flex-wrap:wrap}.mission{display:none}.brand{margin-right:auto;font-size:19px;letter-spacing:2px}.brand span{font-size:7px;letter-spacing:1px}
 header .small{font-size:8px;padding:7px 6px}
 #overlay{align-items:flex-start;padding:0 16px}
 .intro{padding-top:86px}
 h1{font-size:clamp(38px,10vw,60px)}
 .modeSelect{grid-template-columns:1fr;gap:6px}.modeSelect button{padding:8px 12px}.modeSelect strong{font-size:15px}
 .worldMap{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.worldCard{min-height:54px;padding:6px 8px}.worldCard strong{font-size:12px}.worldCard small{font-size:9px}
 #start{min-width:220px}
 .posBox{left:14px;top:92px}.posBox strong{font-size:44px}.posBox #lap{font-size:14px}
 .standList{left:14px;top:212px;width:140px;font-size:10px}
 #minimap{right:14px;top:70px;width:96px;height:96px}
 .speedBox{right:14px;width:160px}.speedBox>strong{font-size:50px}
 .touch-mode .speedBox{top:186px;right:14px;width:120px}
 footer{left:14px}.controls{gap:8px;font-size:8px}
 .tables{grid-template-columns:1fr}
 #garageDialog{left:50%;right:auto;top:auto;bottom:12px;transform:translateX(-50%);max-height:58dvh}
 .podium div{width:96px}.podium .p1{height:120px}.podium .p2{height:95px}.podium .p3{height:76px}
 #huntHud{left:14px;top:92px}#huntHud strong{font-size:28px}
}
@media(max-width:600px){
 .steerPad button{width:80px;height:80px}.pedals button{width:64px;height:64px}.pedals{gap:9px}
 #notice{font-size:16px;top:26%}
 dialog{padding:16px}h2{font-size:28px}
}
@media(max-height:500px) and (orientation:landscape){
 header{padding:8px 16px}.brand{font-size:17px}.brand span{display:none}
 .intro{padding-top:52px}h1{font-size:36px;margin:8px 0}.intro p{font-size:11px;line-height:1.4;margin:6px 0}
 .modeSelect{grid-template-columns:repeat(3,1fr)}.modeSelect small{display:none}
 .worldMap{grid-template-columns:repeat(4,minmax(0,1fr))}.worldCard small{display:none}.worldCard{min-height:38px}
 .posBox{top:46px}.posBox strong{font-size:34px}.standList{display:none}
 #minimap{top:46px;width:80px;height:80px}
 .speedBox>strong{font-size:38px}.touch-mode .speedBox{top:136px;width:110px}
 .steerPad,.pedals{bottom:max(10px,env(safe-area-inset-bottom))}.steerPad button{width:72px;height:72px}.pedals button{width:58px;height:58px}
 #garageDialog{max-height:86dvh}
}
@media(prefers-reduced-motion:reduce){#countdown.pop{animation-duration:.01s}*{transition:none!important}}