:root{--ink:#eee5d4;--red:#e24225;--gold:#f6bd31;--black:#100f0d;--glass:rgba(16,15,13,.82)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080807;color:var(--ink);font-family:Impact,"Arial Narrow",sans-serif;touch-action:none}button{font:inherit;color:inherit}
#shell{position:relative;width:100vw;height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#30281c,#080807 70%)}
#game{display:block;width:100%;height:100%;image-rendering:pixelated}
#hud{position:absolute;inset:16px 18px auto;display:grid;grid-template-columns:52px minmax(175px,250px) 135px 135px 120px 82px 145px;gap:7px;align-items:center;pointer-events:none;text-shadow:2px 2px #000}.identity,.race,.meter,.portrait,#minimap{background:var(--glass);border:2px solid #8c692b;border-left:5px solid var(--red);padding:7px 10px;transform:skew(-3deg);box-shadow:0 5px 0 #0008}.portrait{height:55px;display:grid;place-items:center;background:linear-gradient(135deg,#421c14,#d34122);padding:0}.portrait span{font-size:35px;color:var(--gold);transform:skew(3deg)}.identity strong,.identity span,.race span{display:block}.identity span,.race span,.meter span{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.08em}.meter i{display:block;height:10px;margin-top:5px;background:#342e27;overflow:hidden}.meter b{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .15s}.nitro b{background:linear-gradient(90deg,#1eb7c4,#9ff7ff)}.race{text-align:center}.race strong{font-size:28px;color:var(--gold)}#minimap{width:145px;height:55px;padding:0}
.panel{position:absolute;left:50%;top:50%;width:min(720px,94vw);padding:28px 32px;transform:translate(-50%,-50%) scale(.96);background:linear-gradient(145deg,rgba(17,16,14,.94),rgba(45,33,20,.91));border:2px solid #9b7228;border-left:9px solid var(--red);box-shadow:0 20px 80px #000;opacity:0;pointer-events:none;transition:.2s;backdrop-filter:blur(5px)}.panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}h1,h2{font-size:clamp(42px,7vw,72px);line-height:.8;margin:.12em 0 .25em;letter-spacing:-.02em}h1 em{font-style:normal;color:var(--gold);text-shadow:4px 4px #702313}.panel p:not(.kicker){max-width:52ch;font-family:Arial,sans-serif;line-height:1.35}.kicker{color:var(--red);letter-spacing:.18em}.panel>button{border:0;background:var(--red);padding:14px 18px;margin:12px 0 6px;cursor:pointer;box-shadow:5px 5px 0 var(--gold)}.panel>small{display:block;margin-top:12px;font:12px Arial,sans-serif;color:#bfb29d}.roster{display:flex;gap:9px;margin:15px 0 4px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}.racer{display:grid;flex:0 0 190px;scroll-snap-align:start;gap:2px;text-align:left;border:2px solid #70562d;background:#17130f;padding:10px;margin:0;cursor:pointer;box-shadow:none}.racer b{color:var(--gold);font-size:20px}.racer span,.racer small{font:12px Arial,sans-serif}.racer small{margin:0;color:#baad94}.racer.selected{border-color:var(--gold);background:#502015;box-shadow:inset 0 0 0 2px var(--red)}.pause{position:absolute;display:none;inset:0;background:#0009;place-items:center;font-size:7vw;color:var(--gold)}.pause.open{display:grid}
.touchHint{display:none!important}
#bossHud{display:none;position:absolute;top:84px;left:50%;transform:translateX(-50%);width:min(420px,62vw);padding:7px 12px;background:#130d0ddd;border:2px solid #b62f20;box-shadow:0 5px 0 #0009;text-align:center;pointer-events:none}#bossHud.open{display:block}#bossHud strong{display:block;color:#ffd05a;font-size:15px;letter-spacing:.08em}#bossHud i{display:block;height:12px;margin-top:5px;background:#2b1714;border:1px solid #e4ba65}#bossHud b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#df2a18,#ffb420);transition:width .12s}
#phaseBanner{position:absolute;z-index:8;left:50%;top:23%;min-width:min(440px,82vw);padding:9px 22px 11px;transform:translate(-50%,-20px) skew(-4deg);opacity:0;text-align:center;pointer-events:none;background:linear-gradient(90deg,transparent,#120e0de8 12% 88%,transparent);border-top:2px solid #f6bd31;border-bottom:2px solid #e24225;text-shadow:2px 2px #000;transition:opacity .18s,transform .18s}#phaseBanner.open{opacity:1;transform:translate(-50%,0) skew(-4deg)}#phaseBanner small,#phaseBanner strong{display:block}#phaseBanner small{font:11px Arial,sans-serif;letter-spacing:.22em;color:#e24225}#phaseBanner strong{font-size:clamp(18px,3vw,31px);color:#f6bd31;letter-spacing:.04em}
.portrait{overflow:hidden}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:skew(3deg) scale(1.1)}
#touch{position:absolute;display:none;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;pointer-events:none}#steerPad{position:relative;pointer-events:auto;width:126px;height:126px;border-radius:50%;border:2px solid #f6bd3188;background:radial-gradient(circle,#7a603333 0 34%,#17140fdd 35% 100%);box-shadow:inset 0 0 0 7px #0006,0 4px 16px #000a;touch-action:none}#steerPad:before,#steerPad:after{content:"";position:absolute;background:#f6bd3133;left:18%;right:18%;height:1px;top:50%}#steerPad:after{top:18%;bottom:18%;left:50%;right:auto;width:1px;height:auto}#steerPad small{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);white-space:nowrap;font:8px Arial,sans-serif;color:#ead9b8}#steerKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;transform:translate(-50%,-50%);background:#e24225dd;border:2px solid #ffd86b;box-shadow:inset 0 0 0 5px #0004,0 3px 8px #0008}.actions{display:flex!important;align-items:end;gap:9px;pointer-events:none}.actions button{pointer-events:auto;border:1px solid #e7d8bb99;background:#17140fe8;border-radius:50%;width:68px;height:68px;padding:2px;font-size:10px;line-height:1;box-shadow:inset 0 0 0 4px #0006,0 3px 8px #0009;-webkit-tap-highlight-color:transparent}.actions .fire{width:82px;height:82px;background:#9d2d1ff0;border-color:#ffd46e}
@media(pointer:coarse),(max-width:900px){#touch{display:flex}.desktopHint{display:none!important}.touchHint{display:block!important}#hud{inset:max(5px,env(safe-area-inset-top)) 5px auto;grid-template-columns:38px 1fr 1fr 58px;gap:3px}.portrait{height:44px}.portrait span{font-size:21px}.identity{grid-column:2/4;padding:2px 5px}.identity span{display:block;font-size:8px;color:#f6bd31;white-space:nowrap}.identity strong{font-size:13px}.meter{padding:2px 4px}.meter span{font-size:9px}.nitro{display:none}.race{padding:2px}.race strong{font-size:17px}.race span{font-size:8px}#minimap{display:none}.panel{padding:18px 22px}.roster{gap:5px}.racer{padding:7px}.racer b{font-size:16px}}
@media(max-width:480px) and (orientation:portrait){#touch{bottom:max(18px,env(safe-area-inset-bottom))}#steerPad{width:116px;height:116px}.actions button{width:60px;height:60px;font-size:9px}.actions .fire{width:74px;height:74px}.panel{width:calc(100vw - 16px);padding:14px 15px}.panel p:not(.kicker){font-size:14px}.panel>small{display:none}h1{font-size:38px}.roster{margin:9px 0}.racer span{display:none}}
@media(max-height:520px) and (orientation:landscape){#steerPad{width:96px;height:96px}#steerKnob{width:40px;height:40px}.actions button{width:54px;height:54px;font-size:8px}.actions .fire{width:66px;height:66px}.panel{padding:13px 18px}.panel p{margin:.4em 0}.panel>small{display:none}h1{font-size:38px}.roster{margin:8px 0}.racer span{display:none}}

/* v14: character gallery and combat readability */
#start.panel{width:min(920px,96vw);max-height:96dvh;overflow:auto;padding:18px 24px}
#start h1{font-size:clamp(34px,5.8vw,60px);margin:.08em 0 .16em}
#start>p:not(.kicker){margin:.45em 0}
.racer{position:relative;overflow:hidden;grid-template-columns:1fr;align-content:end;min-height:238px;padding:10px;background:#17130f}
.racer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(.9) contrast(1.08);transition:.18s}
.racer:after{content:"";position:absolute;inset:36% 0 0;background:linear-gradient(transparent,#090807 62%);pointer-events:none}
.racer b,.racer span,.racer small{position:relative;z-index:1;text-shadow:2px 2px 3px #000}
.racer.selected img{opacity:1;transform:scale(1.035);filter:saturate(1.16) contrast(1.08)}
.racer.kevin.selected{border-color:#ff8a24;box-shadow:inset 0 0 0 2px #ff6a00}
.racer.kevin b{color:#ff9b32}
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0 2px}.stage{position:relative;min-height:82px;overflow:hidden;border:1px solid #70562d;background:#17130f;padding:38px 6px 7px;text-align:left;cursor:pointer;box-shadow:none}.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.75);transition:.18s}.stage:before{content:"";position:absolute;inset:25% 0 0;background:linear-gradient(transparent,#090807 70%);z-index:1}.stage b,.stage span{position:relative;z-index:2;display:block;text-shadow:1px 1px 3px #000}.stage b{font-size:13px;color:#e8d8bb}.stage span{font:9px Arial,sans-serif;color:#d2c6b1}.stage.selected{border-color:var(--gold);background:#502015;box-shadow:inset 0 -3px var(--red)}.stage.selected img{opacity:.85;filter:saturate(1.1)}.stage.final.selected{background:#3b1525}
.stage.locked{opacity:.42;filter:grayscale(1);cursor:not-allowed}.stage.locked:after{content:" 🔒";color:var(--gold)}
#stagePreview{position:relative;aspect-ratio:3/2;max-height:520px;margin:10px auto 6px;overflow:hidden;border:2px solid #9b7228;background:#090807;box-shadow:0 7px 18px #0008}#stagePreview img{display:block;width:100%;height:100%;object-fit:cover}#stagePreview:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(5,4,3,.92));pointer-events:none}#stagePreview figcaption{position:absolute;z-index:1;left:13px;right:175px;bottom:10px;text-shadow:2px 2px 3px #000}#stagePreview strong,#stagePreview span{display:block}#stagePreview strong{color:var(--gold);font-size:22px;letter-spacing:.04em}#stagePreview span{font:13px Arial,sans-serif;color:#f1e5d1}#expandStage{position:absolute;z-index:2;right:12px;bottom:12px;border:1px solid var(--gold);background:#17130fe8;color:var(--ink);padding:9px 11px;cursor:pointer;font-size:12px}
#stageViewer{position:fixed;z-index:30;inset:0;display:none;grid-template-rows:minmax(0,1fr) auto auto;gap:8px;padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#040302;place-items:center}#stageViewer.open{display:grid}.stageViewerFrame{width:min(98vw,1440px);height:min(78dvh,960px);overflow:auto;display:grid;place-items:center}.stageViewerFrame img{display:block;width:100%;height:100%;object-fit:contain;transition:width .15s}.stageViewerCaption{width:min(96vw,1280px);text-align:center}.stageViewerCaption strong,.stageViewerCaption span{display:block}.stageViewerCaption strong{color:var(--gold);font-size:clamp(24px,4vw,46px)}.stageViewerCaption span{font:16px Arial,sans-serif;color:#eadfcd;margin-top:4px}#closeStageViewer{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:48px;height:48px;border:2px solid var(--gold);border-radius:50%;background:#17130fee;color:#fff;font:36px/1 Arial,sans-serif;cursor:pointer}#zoomStage{border:1px solid var(--gold);background:#17130f;color:#fff;padding:10px 18px;cursor:pointer;font-size:13px}#stageViewer.zoomed .stageViewerFrame{display:block}#stageViewer.zoomed .stageViewerFrame img{width:190%;height:auto;max-width:none;object-fit:initial}
#result.ending{width:min(760px,94vw);padding:18px 22px}#endingImage{display:block;width:100%;height:min(55vh,520px);object-fit:contain;object-position:center top;border:2px solid #9b7228;background:#090807;margin-bottom:14px}#endingImage[hidden]{display:none}#result.ending h2{font-size:clamp(36px,6vw,62px)}
#result.open~#touch{display:none!important}
@media(pointer:coarse),(max-width:900px){#result.ending{max-height:92dvh;overflow:auto}#endingImage{height:min(39dvh,360px)}#result.ending h2{font-size:32px;line-height:.88}}
@media(pointer:coarse),(max-width:900px){#start.panel{padding:12px 14px}.racer{min-height:180px;padding:7px}.racer small{font-size:9px}#stagePreview{width:100%}.stageViewerFrame{height:min(76dvh,700px)}}
@media(max-width:480px) and (orientation:portrait){#start h1{font-size:27px}.racer{flex-basis:118px;min-height:128px}.racer b{font-size:13px}.racer small{font-size:8px;line-height:1.1}.racer img{object-position:center}.panel .kicker{font-size:10px}#stagePreview strong{font-size:16px}#stagePreview span{font-size:11px}#stagePreview figcaption{right:118px}#expandStage{right:7px;bottom:7px;padding:7px;font-size:9px}.stages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.stage{min-width:128px;scroll-snap-align:start}.stageViewerFrame{width:100%;height:min(72dvh,620px)}.stageViewerCaption{width:100%}.stageViewerCaption span{font-size:14px}#bossHud{top:104px;width:70vw}}
@media(pointer:coarse),(max-width:900px){#phaseBanner{top:19%;min-width:76vw;padding:6px 14px 8px}#phaseBanner strong{font-size:17px}#phaseBanner small{font-size:9px}}
@media(max-height:520px) and (orientation:landscape){#start.panel{width:min(900px,96vw);padding:8px 16px}#start h1{font-size:29px}.racer{min-height:128px}.racer img{object-position:center 38%}.racer small{font-size:8px}#stagePreview{max-height:290px}.stageViewerFrame{height:72dvh}.stageViewerCaption strong{font-size:23px}.stageViewerCaption span{font-size:13px}}