/* stage: keeping race menu tappable */
html body #controls .options{z-index:1;pointer-events:auto}
html body #controls .options #series{
pointer-events:auto;touch-action:manipulation;min-width:56px;min-height:48px;
}
html body #controls .options #series:focus-visible{
outline:3px solid var(--apex-focus,#d4ffec);outline-offset:3px;
}
/* stage: putting journal results first */
html body #end[data-screen="career-journal"]>#handling-checks{display:none}
html body #end[data-screen="career-journal"]>#result{margin-bottom:12px}
html body #end[data-screen="career-journal"] .race-menu-section-body>.career-block{
min-width:0;flex-basis:100%;width:100%;
}
html body #end[data-screen="career-journal"] .career-journal-count{
padding:8px 0;font-variant-numeric:tabular-nums;
}
/* stage: presenting paused race evidence */
html body #end .pause-review-copy{flex-basis:100%;white-space:pre-line;margin:0;color:#c9dedc;font:12px/1.7 var(--apex-font,system-ui)}
html body #end .pause-review-scroll{width:100%;overflow-x:auto;touch-action:pan-x pan-y;border:1px solid #95cbb633;border-radius:8px}
html body #end .pause-review-table{width:100%;border-collapse:collapse;text-align:left;font:11px/1.6 var(--apex-font,system-ui);font-variant-numeric:tabular-nums}
html body #end .pause-review-table caption{text-align:left;padding:10px;color:#b5c7cf}
html body #end .pause-review-table :is(th,td){padding:9px 10px;border-bottom:1px solid #95cbb622;vertical-align:top}
html body #end .pause-review-table th{color:#c7f8e5;font-weight:700}
html body #end .pause-review-table tr[data-you="true"]{background:#84e2bf15;color:#e0fff0}
html body #end .pause-review-table td:last-child{text-align:right}
html body #end .pause-review-report{width:100%;min-height:200px;max-height:50vh;resize:vertical;padding:12px;background:#07131a;color:#d9eee4;border:1px solid #95cbb666;border-radius:8px;font:12px/1.7 var(--apex-mono,monospace);touch-action:pan-y;user-select:text;-webkit-user-select:text}
html body #end :is(.pause-review-scroll,.pause-review-report):focus-visible{outline:3px solid var(--apex-focus,#d4ffec);outline-offset:3px}
/* stage: keeping the original layout */
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#111820;color:white;font-family:system-ui;overscroll-behavior:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#hud{position:absolute;top:0;left:0;right:0;padding:var(--camlin-create-toolbar-inset,0px) 20px 12px;pointer-events:none;background:linear-gradient(#071019dc,transparent)}
h1{font-size:20px;margin:8px 0;color:#aaffdf;letter-spacing:3px}
#stats{font-size:15px;font-variant-numeric:tabular-nums}
#help{position:absolute;bottom:146px;left:16px;right:16px;text-align:center;font-size:12px;color:#def;pointer-events:none;text-shadow:0 2px 3px #000}
#controls{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:end;justify-content:space-between;gap:8px;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}
.cluster{display:flex;gap:8px;pointer-events:auto;touch-action:none}
.options{align-self:center}
button{border:1px solid #ffffff55;border-radius:18px;background:#152c3de8;color:white;min-width:68px;min-height:86px;padding:12px;font-weight:bold;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button span{display:block;font-size:24px;line-height:1.2;pointer-events:none}
button small{display:block;font-size:10px;letter-spacing:1px;margin-top:8px;pointer-events:none}
button:active,button.pressed{background:#459d85;box-shadow:inset 0 0 0 3px #aaffdf;transform:translateY(2px)}
.options button{min-width:46px;min-height:42px;font-size:11px;padding:8px}
#gas{background:#176648;min-height:106px}
#brake{background:#693d38}
#gas.pressed{background:#29aa73}
#brake.pressed{background:#bc6252}
#end{display:none;position:absolute;inset:24% 8%;text-align:center;background:#091721ed;border:1px solid #62dfb0;border-radius:22px;padding:22px;touch-action:none;z-index:5}
#end h2{font-size:30px}
#map{position:absolute;right:14px;top:calc(var(--camlin-create-toolbar-inset,0px) + 84px);width:150px;height:125px;background:#07131acc;border:1px solid #ffffff22;border-radius:15px;pointer-events:none}
#map svg{width:100%;height:100%}

/* Preserve dashboard markings and all responsive control geometry. */
#hud{background:linear-gradient(180deg,#071019ed 0%,#0710199c 62%,#07101900 100%);text-shadow:0 2px 5px #071019}
h1{display:flex;align-items:center;gap:9px;font-weight:800}
.grid-emblem{flex:0 0 18px;width:18px;height:18px;border:1px solid #aaffdf88;background:conic-gradient(#aaffdf 25%,transparent 0 50%,#aaffdf 0 75%,transparent 0) 0 0/8px 8px;box-shadow:0 0 0 3px #aaffdf0c;transform:skewX(-8deg)}
#stats{color:#e2eee9;line-height:1.5;letter-spacing:.15px}
.hud-rule{height:3px;width:min(430px,65vw);display:flex;gap:4px;margin-top:9px;position:relative;background:linear-gradient(90deg,#aaffdf25,transparent)}
.hud-rule i{display:block;width:15px;height:3px;background:#aaffdf80;transform:skewX(-25deg)}
.hud-rule i:nth-child(2){opacity:.8}
.hud-rule i:nth-child(3){opacity:.6}
.hud-rule i:nth-child(4){opacity:.4}
.hud-rule i:nth-child(5){opacity:.2}
.hud-rule:after{content:"";position:absolute;right:0;top:-2px;width:27px;height:7px;background:repeating-linear-gradient(90deg,#dbe8df33 0 1px,transparent 1px 5px)}
#help{line-height:1.65;letter-spacing:.2px;filter:drop-shadow(0 1px 2px #071019)}
#help:before{content:"";display:block;width:34px;height:2px;margin:0 auto 5px;background:linear-gradient(90deg,transparent,#aaffdf99,transparent)}

#map{background:linear-gradient(145deg,#152c3df2,#07131ad9 45%,#07131af0);box-shadow:inset 0 0 0 3px #07131a77,inset 0 0 0 4px #dbe8df0b,0 5px 14px #07101930;overflow:hidden}
#map:before,#map:after{content:"";position:absolute;top:8px;width:3px;height:3px;border-radius:50%;background:#87969d;box-shadow:0 1px 1px #000;opacity:.7}
#map:before{left:7px}
#map:after{right:7px}
#map svg{position:absolute;inset:14px 5px 12px;width:calc(100% - 10px);height:calc(100% - 26px)}
.map-heading,.map-legend{position:absolute;left:15px;right:15px;display:flex;justify-content:space-between;align-items:center;font-size:7px;font-weight:700;letter-spacing:1.3px;line-height:1;color:#dbe8df88}
.map-heading{top:8px}
.map-legend{bottom:7px;font-size:6px;letter-spacing:.7px}
.live-indicator{color:#aaffdf}
.live-indicator:before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#42ffc0;margin:0 4px 1px 0;box-shadow:0 0 4px #42ffc055}
.map-legend span:first-child{display:flex;align-items:center;gap:4px;color:#aaffdf}
.map-legend i{width:4px;height:4px;display:inline-block;background:#42ffc0;border-radius:50%}
#route{stroke-opacity:.88}
#dot{stroke:#07131a;stroke-width:2;paint-order:stroke}
#rival-dots circle{stroke:#07131a;stroke-width:1.5;paint-order:stroke}

#controls button{position:relative;isolation:isolate;overflow:hidden;outline-offset:4px;text-shadow:0 1px 2px #071019aa;box-shadow:inset 0 1px 0 #ffffff2b,inset 0 -4px 0 #07101966,0 4px 9px #0710194d;background-image:linear-gradient(145deg,#ffffff0c,transparent 48%,#07101929);transition:box-shadow .09s ease,border-color .09s ease}
#controls button:before{content:"";position:absolute;inset:5px;border:1px solid #dbe8df19;border-radius:12px;pointer-events:none;background:radial-gradient(circle at 6px 6px,#071019 0 1px,#87969d88 1px 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 6px) 6px,#071019 0 1px,#87969d88 1px 2px,transparent 2.5px),radial-gradient(circle at 6px calc(100% - 6px),#071019 0 1px,#87969d88 1px 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),#071019 0 1px,#87969d88 1px 2px,transparent 2.5px)}
#controls button:after{content:"";position:absolute;left:22%;right:22%;bottom:10px;height:4px;border-radius:1px;background:repeating-linear-gradient(90deg,#dbe8df44 0 2px,transparent 2px 5px);pointer-events:none}
#controls button span,#controls button small{position:relative;z-index:1}
#controls button span{font-weight:800}
#controls button small{color:#e4efeb;line-height:1.2}
#steering-controls button span{color:#dbe8df;text-shadow:0 2px 0 #07101988}
#pedal-controls button span{margin-top:-3px}
#gas{border-color:#aaffdf66}
#gas:after{background:repeating-linear-gradient(90deg,#aaffdf88 0 2px,transparent 2px 5px)!important}
#brake{border-color:#d6b7aa77}
#brake:after{background:repeating-linear-gradient(135deg,#d6b7aa88 0 3px,transparent 3px 6px)!important;height:5px!important}
#controls button:active,#controls button.pressed{background-image:linear-gradient(180deg,#aaffdf12,#07101922);border-color:#aaffdf;box-shadow:inset 0 0 0 2px #aaffdf,inset 0 3px 8px #07101966,0 0 15px #aaffdf19}
#controls button:active:before,#controls button.pressed:before{border-color:#aaffdf40}
#controls button:active:after,#controls button.pressed:after{filter:brightness(1.6)}
#controls button:focus-visible{outline:2px solid #aaffdf}
.options button{letter-spacing:.6px;border-radius:11px;color:#dbe8df;background-color:#152c3de8}
#controls .options button:before{inset:3px;border-radius:7px;background:none}
#controls .options button:after{left:35%;right:35%;height:1px;bottom:6px;background:#aaffdf66}
#controls .options button:active{transform:translateY(1px)}

#end{overflow:hidden;box-shadow:inset 0 0 0 5px #07101977,inset 0 0 0 6px #62dfb019,0 18px 60px #07101980;background-image:radial-gradient(ellipse at 50% 0,#17664826,transparent 70%),repeating-linear-gradient(135deg,transparent 0 9px,#dbe8df02 9px 10px)}
.finish-stripe{height:12px;width:112px;margin:0 auto 16px;background:conic-gradient(#dbe8df 25%,transparent 0 50%,#dbe8df 0 75%,transparent 0) 0 0/12px 12px;opacity:.6}
.finish-caption{font-size:10px;letter-spacing:3px;color:#aaffdf}
#end h2{color:#e9f5ef;letter-spacing:-.6px;margin:14px 0}
#result{font-variant-numeric:tabular-nums;color:#aaffdf;line-height:1.7}
.restart-hint{display:inline-block;border:1px solid #dbe8df26;border-radius:8px;padding:10px 16px;font-size:12px;background:#152c3d80}
.bottom-stripe{height:4px;width:48px;margin:12px auto 0;opacity:.35}

@media(pointer:coarse),(max-width:600px){
h1{font-size:15px;letter-spacing:2px;gap:7px}
#hud{padding-left:12px;padding-right:12px}
#stats{font-size:12px;max-width:95%;line-height:1.5}
#map{width:94px;height:82px;top:calc(var(--camlin-create-toolbar-inset,0px) + 74px)}
#help{font-size:10px;bottom:calc(142px + env(safe-area-inset-bottom))}
button{width:clamp(56px,18vw,96px);padding:7px;min-width:0;font-size:14px;min-height:96px}
.cluster{gap:6px}
.options{position:absolute;bottom:116px;left:50%;transform:translateX(-50%);gap:7px}
.options button{width:48px;min-height:35px;padding:5px;font-size:10px}
#controls{gap:5px}
#gas{min-height:110px}
.grid-emblem{width:13px;height:13px;flex-basis:13px;background-size:6px 6px}
.hud-rule{margin-top:6px;width:52vw;height:2px}
.hud-rule i{height:2px;width:10px}
.map-heading{left:9px;right:9px;top:7px;font-size:5px;letter-spacing:.7px}
#map:before,#map:after{display:none}
#map svg{inset:12px 3px 9px;width:calc(100% - 6px);height:calc(100% - 21px)}
.map-legend{left:9px;right:9px;bottom:5px;font-size:5px}
.map-legend span:last-child{display:none}
.live-indicator:before{margin-right:3px;width:2px;height:2px}
#controls button:before{inset:4px}
#controls button:after{bottom:11px}
.finish-caption{font-size:8px;letter-spacing:2px}
}
@media(max-width:350px){
#controls{left:8px;right:8px}
.cluster{gap:4px}
button small{letter-spacing:0;font-size:9px}
h1{font-size:12px;letter-spacing:1.5px}
.grid-emblem{flex-basis:11px;width:11px;height:11px}
}
@media(max-height:500px){
#hud{padding-top:var(--camlin-create-toolbar-inset,0px)}
h1{margin:0 0 3px;font-size:12px}
#stats{font-size:11px}
#map{top:calc(var(--camlin-create-toolbar-inset,0px) + 8px);width:85px;height:70px}
#help{bottom:16px;left:34%;right:34%;font-size:10px}
button{width:clamp(62px,12vw,94px);min-height:76px}
#gas{min-height:90px}
.options{position:absolute;bottom:68px;left:50%;transform:translateX(-50%);flex-direction:row}
.options button{width:46px;min-height:35px}
#end{inset:18% 20%;padding:12px;overflow:auto}
#end h2{font-size:23px;margin:8px}
.hud-rule{margin-top:4px}
.grid-emblem{width:11px;height:11px;flex-basis:11px}
#help:before{display:none}
.finish-stripe{height:6px;margin-bottom:8px}
.finish-caption{font-size:7px}
#end p{margin:8px 0;font-size:11px}
.restart-hint{padding:7px 12px}
.bottom-stripe{display:none}
.map-heading{left:8px;right:8px;top:6px;font-size:5px;letter-spacing:.5px}
.map-legend{bottom:5px;font-size:5px;left:8px;right:8px}
.map-legend span:last-child{display:none}
#map svg{inset:11px 3px 8px;width:calc(100% - 6px);height:calc(100% - 19px)}
#map:before,#map:after{display:none}
}
@media(prefers-reduced-motion:reduce){
#controls button{transition:none}
}

/* Preserve simultaneous phone steering and pedal targets. */
@media(pointer:coarse),(max-width:600px){
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#controls{
--pedal-height:110px;
--thumb-width:clamp(58px,20vw,100px);
bottom:calc(12px + env(safe-area-inset-bottom,0px));
left:calc(10px + env(safe-area-inset-left,0px));
right:calc(10px + env(safe-area-inset-right,0px));
gap:12px;z-index:3;
}
#controls .cluster{gap:6px;align-items:flex-end;flex-shrink:0}
#steering-controls button,#pedal-controls button{
width:var(--thumb-width);min-width:0;
height:var(--pedal-height);min-height:var(--pedal-height);
padding:10px 3px 15px;border-radius:19px;
}
#controls button span{font-size:30px}
#controls button small{font-size:10px;letter-spacing:0;margin-top:9px;white-space:nowrap}
#gas{border-width:2px}
#controls .options{
position:absolute;left:50%;bottom:calc(var(--pedal-height) + 12px);
transform:translateX(-50%);gap:10px;flex-direction:row;
}
#controls .options button{
width:60px;min-width:60px;height:46px;min-height:46px;
font-size:11px;padding:6px;border-radius:12px;
}
#controls button:active,#controls button.pressed{
transform:none;box-shadow:inset 0 0 0 3px #aaffdf,inset 0 3px 8px #07101966;
}
#controls button:before{background:none}
#controls button{transition:none}
#help{
bottom:calc(188px + env(safe-area-inset-bottom,0px));
left:calc(12px + env(safe-area-inset-left,0px));
right:calc(12px + env(safe-area-inset-right,0px));
font-size:11px;line-height:1.45;letter-spacing:0;
filter:none;
}
#help:before{display:none}
#hud{
padding-top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px));
padding-left:calc(12px + env(safe-area-inset-left,0px));
padding-right:calc(12px + env(safe-area-inset-right,0px));
}
#hud h1{font-size:clamp(11px,3.1vw,15px);letter-spacing:1px;margin:7px 0}
#stats{font-size:12px;line-height:1.45;max-width:100%;letter-spacing:0}
#hud #service-hud{
font-size:11px;gap:6px;max-width:100%;
margin-top:6px;filter:none!important;
}
#hud #service-hud .damage-track{width:54px;height:6px}
#hud #service-message{
font-size:11px;line-height:1.35;flex-basis:100%;
width:fit-content;max-width:100%;padding:4px 6px;
}
#map{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 152px);
right:calc(12px + env(safe-area-inset-right,0px));
width:88px;height:78px;box-shadow:none;
}
#map .map-heading{font-size:6px;letter-spacing:.4px}
#map .map-legend{font-size:6px}
#end{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 12px);
bottom:calc(12px + env(safe-area-inset-bottom,0px));
left:calc(12px + env(safe-area-inset-left,0px));
right:calc(12px + env(safe-area-inset-right,0px));
padding:clamp(12px,4vh,28px);overflow:auto;align-content:center;
}
#end h2{font-size:clamp(23px,6vw,32px)}
#end #result{font-size:14px;line-height:1.6}
#end .restart-hint{min-height:46px;padding:13px 12px;font-size:12px}
}

/* Preserve landscape road visibility. */
@media(orientation:landscape) and (max-height:600px){
#controls{
--pedal-height:clamp(76px,24vh,100px);
--thumb-width:clamp(58px,11vw,94px);
bottom:calc(10px + env(safe-area-inset-bottom,0px));
left:calc(10px + env(safe-area-inset-left,0px));
right:calc(10px + env(safe-area-inset-right,0px));
z-index:3;gap:10px;
}
#controls .cluster{gap:6px;align-items:flex-end}
#steering-controls button,#pedal-controls button{
width:var(--thumb-width);height:var(--pedal-height);
min-width:0;min-height:var(--pedal-height);padding:7px 3px 14px;
}
#controls button span{font-size:26px}
#controls button small{font-size:10px;letter-spacing:0;margin-top:5px}
#controls .options{
position:absolute;left:50%;bottom:0;transform:translateX(-50%);
flex-direction:row;gap:8px;
}
#controls .options button{
width:56px;min-width:56px;min-height:46px;height:46px;
padding:6px;font-size:11px;
}
#help{
bottom:calc(64px + env(safe-area-inset-bottom,0px));
left:calc(24vw + env(safe-area-inset-left,0px));
right:calc(24vw + env(safe-area-inset-right,0px));
font-size:10px;line-height:1.35;letter-spacing:0;filter:none;
}
#help:before{display:none}
#hud{
padding-left:calc(12px + env(safe-area-inset-left,0px));
padding-right:calc(112px + env(safe-area-inset-right,0px));
padding-bottom:7px;
}
#hud h1{font-size:11px;letter-spacing:1px;margin:3px 0}
#stats{font-size:11px;line-height:1.35;max-width:100%}
#hud .hud-rule{display:none}
#hud #service-hud{max-width:100%;margin-top:4px;font-size:10px;gap:5px}
#hud #service-message{
flex-basis:auto;width:auto;font-size:10px;line-height:1.25;padding:3px 5px;
}
#map{
width:86px;height:76px;
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 4px);
right:calc(12px + env(safe-area-inset-right,0px));
}
#end{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 6px);
bottom:calc(8px + env(safe-area-inset-bottom,0px));
left:calc(12px + env(safe-area-inset-left,0px));
right:calc(12px + env(safe-area-inset-right,0px));
padding:12px;overflow:auto;align-content:center;
}
#end h2{font-size:24px;margin:8px 0}
#end #result{font-size:12px;margin:8px 0;line-height:1.4}
#end .finish-stripe{height:6px;margin-bottom:8px}
#end .bottom-stripe{display:none}
#end .restart-hint{min-height:44px;margin:5px 0;padding:12px}
}

/* Preserve compact phone layouts. */
@media(max-width:350px){
#controls{--thumb-width:19vw;--pedal-height:100px;gap:8px}
#controls .cluster{gap:4px}
#controls button small{font-size:9px}
#help{font-size:10px;bottom:calc(178px + env(safe-area-inset-bottom,0px))}
#hud #service-hud,#hud #service-message{font-size:10px}
}
@media(orientation:portrait) and (max-height:650px){
#controls{--pedal-height:86px}
#help{bottom:calc(164px + env(safe-area-inset-bottom,0px));font-size:10px}
#map{width:72px;height:64px}
}
@media(orientation:landscape) and (max-height:360px){
#hud h1{display:none}
#controls{--pedal-height:72px}
#help{font-size:9px}
#hud #service-message{font-size:9px}
#map{width:72px;height:64px}
}

/* More specific selectors override the existing inline panel stylesheet. */
html body #motion-panel{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 4px);
left:calc(10px + env(safe-area-inset-left,0px));
width:154px;
max-width:calc(100% - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
padding:4px 8px;
border-radius:10px;
background:#091721f5;
}
html body #motion-panel summary{
min-height:44px;
font-size:11px;
gap:6px;
touch-action:manipulation;
}
html body #motion-panel summary::after{
content:"+";
font-size:17px;
color:#aaffdf;
}
html body #motion-panel[open] summary::after{content:"−"}
html body #motion-panel[open]{
width:300px;
max-height:calc(100dvh - var(--camlin-create-toolbar-inset,0px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 150px);
overflow:auto;
overscroll-behavior:contain;
}
html body #motion-panel summary:focus-visible{
outline:2px solid #42ffc0;
outline-offset:2px;
border-radius:6px;
}
/* Keep title and statistics alongside the tilt dock on wide screens. */
html body #hud{
padding-top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 4px);
padding-left:calc(176px + env(safe-area-inset-left,0px));
}
html body #hud .hud-rule{width:min(430px,45vw)}
@media(max-width:600px){
html body #hud{
padding-top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 60px);
padding-left:calc(12px + env(safe-area-inset-left,0px));
padding-right:calc(12px + env(safe-area-inset-right,0px));
}
html body #map{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 4px);
right:calc(10px + env(safe-area-inset-right,0px));
width:72px;height:52px;
}
html body #map .map-legend{display:none}
html body #map svg{inset:11px 3px 2px;width:calc(100% - 6px);height:calc(100% - 13px)}
}
@media(orientation:landscape) and (min-width:601px) and (max-height:600px){
html body #hud{
padding-left:calc(176px + env(safe-area-inset-left,0px));
padding-right:calc(106px + env(safe-area-inset-right,0px));
}
html body #motion-panel[open]{
max-height:calc(100dvh - var(--camlin-create-toolbar-inset,0px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 126px);
}
}

/* Keep steering visible in both tilt and touch modes. */
@media(any-pointer:coarse),(max-width:600px){
html body #steering-controls{
display:flex;
visibility:visible;
pointer-events:auto;
touch-action:none;
}
html body #steering-controls button{
min-width:44px;
min-height:72px;
touch-action:none;
border-color:#aaffdf88;
}
html body #steering-controls::before{
content:"TOUCH STEERING";
position:absolute;
left:0;
bottom:calc(var(--pedal-height,110px) + 5px);
font-size:8px;
font-weight:750;
letter-spacing:1px;
color:#aaffdf;
text-shadow:0 1px 4px #071019;
pointer-events:none;
}
}

/* stage: refining colour and typography */
/* Styling only: retain the existing markup, scripts and responsive input geometry. */
:root{
--apex-ink:#f3f8f6;
--apex-muted:#b8cbd0;
--apex-mint:#8ae7c5;
--apex-mint-bright:#c4fbe4;
--apex-line:#afccd638;
--apex-surface:#101e29f7;
--apex-warning:#ffcf96;
--apex-danger:#ffb6a6;
--apex-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--apex-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
--apex-focus:#d1ffeb;
--apex-panel-radius:12px;
--apex-control-radius:17px;
--apex-fast:140ms;
--apex-ease:cubic-bezier(.2,.65,.3,1);
color-scheme:dark;
}
html,body{
color:var(--apex-ink);
font-family:var(--apex-font);
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
button,input,output{font-family:inherit}
button{font-weight:700;cursor:pointer}
button:disabled{cursor:not-allowed}
::selection{background:#8ae7c545;color:#fff}

html body #hud{
padding-top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 12px);
padding-left:calc(192px + env(safe-area-inset-left,0px));
padding-right:calc(20px + env(safe-area-inset-right,0px));
padding-bottom:28px;
background:linear-gradient(180deg,#0a141df5 0%,#0a141ddd 48%,#0a141d80 76%,#0a141d00 100%);
text-shadow:0 1px 3px #020a1099;
}
html body #hud h1{
font-family:var(--apex-font);
font-size:clamp(13px,1.65vw,19px);
font-weight:800;
line-height:1.35;
letter-spacing:1.35px;
color:var(--apex-mint-bright);
margin:2px 0 7px;
gap:10px;
text-wrap:balance;
}
.grid-emblem{
border-color:#c4fbe470;
border-radius:2px;
box-shadow:0 0 0 3px #c4fbe40a;
}
html body #stats{
font-family:var(--apex-font);
font-size:clamp(12px,1.18vw,14px);
line-height:1.6;
font-weight:600;
letter-spacing:.1px;
font-variant-numeric:tabular-nums lining-nums;
color:var(--apex-ink);
max-width:100%;
overflow-wrap:break-word;
}
html body #hud .hud-rule{
height:2px;
margin-top:9px;
background:linear-gradient(90deg,#8ae7c525,transparent);
}
html body #hud .hud-rule i{height:2px;background:var(--apex-mint)}
html body #hud .hud-rule:after{opacity:.45}
html body #hud #service-hud{
font-family:var(--apex-font);
font-size:11px;
line-height:1.5;
font-weight:500;
letter-spacing:.1px;
color:var(--apex-muted);
column-gap:12px;
row-gap:6px;
margin-top:9px;
max-width:100%;
}
html body #service-hud .damage-caption{
display:inline-flex;
align-items:baseline;
gap:6px;
color:var(--apex-muted);
font-size:10px;
font-weight:700;
letter-spacing:.75px;
white-space:nowrap;
}
html body #service-hud .damage-caption b{
color:var(--apex-ink);
font-size:12px;
font-weight:700;
letter-spacing:0;
font-variant-numeric:tabular-nums;
}
html body #hud #service-hud .damage-track{
height:6px;
border-radius:8px;
background:#030c13cc;
box-shadow:inset 0 0 0 1px #b8cbd033;
flex-shrink:0;
}
html body #service-hud .damage-fill{
border-radius:8px;
background:var(--apex-mint);
}
html body #hud #service-message{
padding:5px 10px;
border:1px solid #8ae7c533;
border-radius:7px;
background:#112730ee;
color:#deeee9;
font-size:11px;
line-height:1.45;
letter-spacing:0;
max-width:100%;
overflow-wrap:break-word;
}
html body #service-hud[data-critical="true"] .damage-fill{background:var(--apex-danger)}
html body #service-hud[data-critical="true"] .damage-caption,
html body #service-hud[data-critical="true"] .damage-caption b{color:var(--apex-warning)}
html body #hud #service-hud[data-critical="true"] #service-message{
border-color:#ffcf9666;
color:#ffe4c1;
background:#342923f5;
}
html body #hud #service-hud[data-repair="true"] #service-message{
color:#e2fff0;
border-color:#8ae7c580;
background:#174936f5;
}

/* stage: polishing panels and navigation */
html body #motion-panel{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 12px);
left:calc(14px + env(safe-area-inset-left,0px));
width:160px;
padding:4px 9px;
font:12px/1.6 var(--apex-font);
color:var(--apex-ink);
background:linear-gradient(150deg,#21333ffc,var(--apex-surface) 80%);
border:1px solid var(--apex-line);
border-radius:var(--apex-panel-radius);
box-shadow:0 5px 16px #020a1033,inset 0 1px 0 #ffffff0d;
scrollbar-width:thin;
scrollbar-color:#5c7782 #101e29;
}
html body #motion-panel summary{
min-height:44px;
gap:5px;
font:700 10px/1.4 var(--apex-font);
letter-spacing:.4px;
white-space:nowrap;
color:#e8f8f0;
border-radius:7px;
transition:background-color var(--apex-fast) var(--apex-ease),color var(--apex-fast) var(--apex-ease);
}
html body #motion-panel summary::-webkit-details-marker{display:none}
html body #motion-panel summary::before{
font-size:15px;
line-height:1;
color:var(--apex-mint);
flex-shrink:0;
}
html body #motion-panel summary::after{
font-weight:500;
font-size:17px;
line-height:1;
color:var(--apex-muted);
flex-shrink:0;
}
html body #motion-panel #motion-badge{
font:700 9px/1.4 var(--apex-font);
letter-spacing:.35px;
border:1px solid #b8cbd033;
border-radius:5px;
padding:3px 5px;
color:#c1d2d7;
background:#b8cbd00c;
}
html body #motion-panel:not([open]) #motion-badge{
max-width:42px;
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
html body #motion-panel[data-state="waiting"] #motion-badge,
html body #motion-panel[data-state="blocked"] #motion-badge,
html body #motion-panel[data-state="error"] #motion-badge{
color:var(--apex-warning);
background:#ffcf9610;
border-color:#ffcf9640;
}
html body #motion-panel[data-state="on"] #motion-badge{
color:var(--apex-mint-bright);
background:#8ae7c518;
border-color:#8ae7c559;
}
html body #motion-panel[open]{
width:316px;
padding:4px 12px 12px;
background:linear-gradient(150deg,#1c303dfd,#101e29fc 75%);
border-color:#8ae7c55c;
box-shadow:0 14px 36px #020a1066,inset 0 1px 0 #ffffff10;
}
html body #motion-panel[open] summary{
margin-bottom:10px;
border-bottom:1px solid #afccd62b;
border-radius:7px 7px 0 0;
padding-bottom:5px;
}
html body #motion-panel .motion-actions{gap:8px;margin:8px 0 12px}
html body #motion-panel button{
min-height:48px;
padding:10px 8px;
border-radius:9px;
border:1px solid #b8cbd040;
font-size:10px;
font-weight:700;
line-height:1.4;
letter-spacing:.4px;
color:var(--apex-ink);
background:#253b49;
box-shadow:inset 0 1px 0 #ffffff10;
transition:background-color var(--apex-fast) var(--apex-ease),border-color var(--apex-fast) var(--apex-ease),box-shadow var(--apex-fast) var(--apex-ease);
}
html body #motion-panel #motion-enable{
background:#1c503e;
border-color:#8ae7c568;
color:#e0ffef;
}
html body #motion-panel #motion-enable[aria-pressed="true"]{
background:#205c45;
border-color:var(--apex-mint);
box-shadow:inset 0 0 0 1px #8ae7c526;
}
html body #motion-panel #motion-enable[aria-busy="true"]{
background:#42362b;
color:#ffe4c1;
border-color:#ffcf9670;
}
html body #motion-panel button:disabled{
opacity:.45;
box-shadow:none;
border-color:#b8cbd026;
transform:none;
}
html body #motion-panel button:not(:disabled):active{
transform:none;
background:#1b4739;
border-color:var(--apex-mint-bright);
box-shadow:inset 0 0 0 1px var(--apex-mint-bright),inset 0 2px 6px #020a1055;
transition-duration:0s;
}
html body #motion-panel #motion-enable:not(:disabled):active{
background:#183f32;
border-color:var(--apex-mint-bright);
box-shadow:inset 0 0 0 1px var(--apex-mint-bright),inset 0 2px 6px #020a1055;
}
html body #motion-panel #motion-status{
margin:10px 0;
padding:11px 12px;
border:1px solid #b8cbd029;
border-radius:8px;
background:#050f1766;
color:var(--apex-ink);
font-size:12px;
line-height:1.6;
}
html body #motion-panel[data-state="on"] #motion-status{
border-left:3px solid var(--apex-mint);
}
html body #motion-panel[data-state="blocked"] #motion-status,
html body #motion-panel[data-state="error"] #motion-status{
border-left:3px solid var(--apex-warning);
}
html body #motion-panel #motion-diagnostic{
font:10px/1.6 var(--apex-mono);
color:#afc5ce;
opacity:1;
padding:0 2px;
}
html body #motion-panel .motion-hint{
color:var(--apex-muted);
font-size:11px;
line-height:1.65;
opacity:1;
margin:12px 0;
}
html body #motion-panel label{
gap:9px;
margin:12px 0;
color:#e6eeec;
font-size:11px;
line-height:1.5;
}
html body #motion-panel input[type="range"]{
min-height:32px;
accent-color:var(--apex-mint);
cursor:ew-resize;
border-radius:6px;
}
html body #motion-panel input[type="checkbox"]{
width:19px;height:19px;flex-shrink:0;
accent-color:var(--apex-mint);
cursor:pointer;
}
html body #motion-panel output{
min-width:30px;
text-align:right;
font-variant-numeric:tabular-nums;
font-weight:700;
color:var(--apex-mint-bright);
}
html body #motion-panel #motion-meter{
height:7px;
margin:18px 5px;
border-radius:8px;
background:linear-gradient(90deg,#8ae7c533,#b8cbd016 40% 60%,#8ae7c533);
box-shadow:inset 0 0 0 1px #afccd629;
}
html body #motion-panel #motion-needle{
height:11px;
background:var(--apex-mint-bright);
box-shadow:0 0 0 1px #0a192680,0 0 8px #8ae7c529;
}
html body #map{
border-color:var(--apex-line);
border-radius:var(--apex-panel-radius);
background:linear-gradient(145deg,#20343ff5,#101e29f0 75%);
box-shadow:inset 0 1px 0 #ffffff0d,0 5px 16px #020a1033;
}
html body #map:before,html body #map:after{display:none}
html body #map .map-heading{
font-family:var(--apex-font);
font-weight:700;
color:#c7d9dd;
}
html body #map .map-legend{font-family:var(--apex-font);color:var(--apex-muted)}
html body #map .live-indicator,
html body #map .map-legend span:first-child{color:var(--apex-mint-bright)}
html body #map .live-indicator:before{
background:var(--apex-mint);
box-shadow:0 0 0 2px #8ae7c514;
}
html body #map .map-legend i{background:var(--apex-mint)}
html body #route{stroke:#dce9ec;stroke-opacity:.92}
html body #dot{fill:var(--apex-mint-bright);stroke:#102b32}
html body #map svg{filter:drop-shadow(0 1px 2px #00000024)}

/* stage: clarifying interactive control states */
html body #controls button{
font-family:var(--apex-font);
color:var(--apex-ink);
border-color:#b5cdd659;
border-radius:var(--apex-control-radius);
background-color:#203644f5;
background-image:linear-gradient(155deg,#ffffff0a,transparent 70%);
box-shadow:inset 0 1px 0 #ffffff20,inset 0 -3px 0 #020a1045,0 5px 12px #020a103d;
text-shadow:0 1px 2px #020a105c;
transition:background-color var(--apex-fast) var(--apex-ease),border-color var(--apex-fast) var(--apex-ease),box-shadow var(--apex-fast) var(--apex-ease);
}
html body #controls button:before{
background:none;
border-color:#e0f0f314;
border-radius:calc(var(--apex-control-radius) - 5px);
}
html body #controls button:after{opacity:.55}
html body #controls button span{
color:var(--apex-ink);
font-weight:800;
line-height:1.15;
text-shadow:0 1px 2px #020a1066;
}
html body #controls button small{
color:#dfebee;
font-weight:700;
line-height:1.25;
}
html body #controls #gas{
background-color:#205d46;
border-color:#9be6c580;
}
html body #controls #gas span{color:#e4fff0}
html body #controls #gas small{color:#e4fff0}
html body #controls #brake{
background-color:#653e38;
border-color:#ffb6a666;
}
html body #controls #brake span{color:#ffe6dd}
html body #controls #brake small{color:#ffe6dd}
html body #controls .options button{
min-height:44px;
color:#dae6eb;
background-color:#182c3af7;
font-size:10px;
font-weight:700;
letter-spacing:.65px;
border-color:#b8cbd045;
border-radius:11px;
}
html body #controls .options button:before{border-radius:7px}
html body #controls .options button:after{height:2px;border-radius:2px}
html body #controls button:active,
html body #controls button.pressed,
html body #controls button[aria-pressed="true"]{
transform:none;
background-color:#2c5c4b;
background-image:linear-gradient(180deg,#020a101a,transparent);
border-color:var(--apex-mint-bright);
box-shadow:inset 0 0 0 2px var(--apex-mint-bright),inset 0 3px 8px #020a1055,0 0 0 1px #020a1066;
transition-duration:0s;
}
html body #controls #gas:active,
html body #controls #gas.pressed,
html body #controls #gas[aria-pressed="true"]{background-color:#287859}
html body #controls #brake:active,
html body #controls #brake.pressed,
html body #controls #brake[aria-pressed="true"]{
background-color:#85483f;
border-color:#ffe0d0;
box-shadow:inset 0 0 0 2px #ffe0d0,inset 0 3px 8px #020a1055,0 0 0 1px #020a1066;
}
html body #controls button:active:after,
html body #controls button.pressed:after,
html body #controls button[aria-pressed="true"]:after{opacity:1}
html body #controls button:disabled{
opacity:.45;
cursor:not-allowed;
transform:none;
box-shadow:inset 0 1px 0 #ffffff0a;
}
html body #controls button:focus-visible,
html body #motion-panel button:focus-visible,
html body #motion-panel summary:focus-visible,
html body #motion-panel input:focus-visible{
outline:3px solid var(--apex-focus);
outline-offset:3px;
}
html body #help{
font-family:var(--apex-font);
font-weight:600;
color:#f1f8f7;
text-shadow:0 1px 3px #020a10,0 0 8px #020a10;
text-wrap:pretty;
}
html body #help:before{opacity:.6}
@media(hover:hover) and (pointer:fine){
html body #controls button:not(:disabled):not(.pressed):not([aria-pressed="true"]):not(:active):hover{
background-color:#304c5d;
border-color:#d2e8f0b3;
box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -3px 0 #020a1045,0 6px 16px #020a1055;
}
html body #controls #gas:not(:disabled):not(.pressed):not([aria-pressed="true"]):not(:active):hover{
background-color:#246c52;
border-color:var(--apex-mint-bright);
}
html body #controls #brake:not(:disabled):not(.pressed):not([aria-pressed="true"]):not(:active):hover{
background-color:#79473f;
border-color:#ffd3bd;
}
html body #controls button:not(:disabled):hover:after{opacity:.9}
html body #motion-panel summary:hover{background-color:#b8cbd012;color:#fff}
html body #motion-panel button:not(:disabled):not(:active):hover{
background-color:#345060;
border-color:#d2e8f0a6;
}
html body #motion-panel #motion-enable:not(:disabled):not(:active):hover{
background-color:#29634b;
border-color:var(--apex-mint-bright);
}
html body #motion-panel #motion-enable[aria-busy="true"]:not(:active):hover{
background-color:#53402e;
border-color:var(--apex-warning);
}
}

/* stage: finishing overlays and feedback */
html body #end{
color:var(--apex-ink);
border:1px solid #8ae7c566;
border-radius:20px;
padding:clamp(20px,4vh,40px);
background-color:#101e29fc;
background-image:radial-gradient(ellipse at 50% 0,#36785733,transparent 72%);
box-shadow:inset 0 1px 0 #ffffff14,0 20px 64px #020a1080;
overflow:auto;
overscroll-behavior:contain;
cursor:pointer;
align-content:center;
scrollbar-width:thin;
scrollbar-color:#5c7782 #101e29;
}
html body #end .finish-caption{
font-family:var(--apex-font);
color:var(--apex-mint);
font-weight:700;
line-height:1.5;
font-size:10px;
letter-spacing:2px;
}
html body #end h2{
font-family:var(--apex-font);
font-size:clamp(28px,4.4vw,46px);
font-weight:800;
line-height:1.14;
letter-spacing:-1.1px;
margin:16px 0 12px;
color:#f3faf6;
text-wrap:balance;
}
html body #end #result{
font-size:14px;
line-height:1.8;
font-weight:500;
color:#d5e6e1;
font-variant-numeric:tabular-nums;
margin:12px 0 22px;
text-wrap:pretty;
}
html body #end .restart-hint{
min-height:46px;
font:700 12px/1.5 var(--apex-font);
letter-spacing:.1px;
color:#e4fff0;
border:1px solid #8ae7c570;
border-radius:10px;
background:#224d3df0;
box-shadow:inset 0 1px 0 #ffffff10;
padding:12px 20px;
margin:4px 0;
transition:background-color var(--apex-fast) var(--apex-ease),border-color var(--apex-fast) var(--apex-ease),box-shadow var(--apex-fast) var(--apex-ease);
}
html body #end .finish-stripe{opacity:.78;margin-bottom:18px}
html body #end .bottom-stripe{opacity:.3;margin:20px auto 0}
@media(hover:hover) and (pointer:fine){
html body #end:hover .restart-hint{
background-color:#2c614a;
border-color:var(--apex-mint-bright);
box-shadow:inset 0 1px 0 #ffffff20,0 4px 12px #020a1033;
}
}
html body #end:active .restart-hint{
background-color:#1b3e31;
border-color:var(--apex-focus);
box-shadow:inset 0 2px 6px #020a1066;
transition-duration:0s;
}
html body #startup-error{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 84px)!important;
padding:20px!important;
border-color:#ffb6a670!important;
border-radius:var(--apex-panel-radius)!important;
background:#14232ffd!important;
color:var(--apex-ink)!important;
box-shadow:0 16px 44px #020a107a;
font-family:var(--apex-font);
line-height:1.6;
scrollbar-width:thin;
scrollbar-color:#ac8177 #14232f;
}
html body #startup-error strong{
color:var(--apex-warning)!important;
font-size:17px;
font-weight:700;
letter-spacing:-.2px;
}
html body #startup-error p{
color:#cbd9de;
margin:10px 0 14px;
}
html body #startup-error-text{
padding:14px;
border:1px solid #b8cbd02e;
border-radius:8px;
background:#070f17a6;
font-family:var(--apex-mono)!important;
color:#e0e9ed;
tab-size:2;
}

/* stage: balancing smaller screen spacing */
@media(min-width:601px) and (min-height:601px){
html body #map{
width:156px;height:134px;
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 100px);
right:calc(16px + env(safe-area-inset-right,0px));
}
html body #map .map-heading{top:11px;font-size:8px;letter-spacing:.9px}
html body #map .map-legend{bottom:10px;font-size:7px;letter-spacing:.45px}
html body #map svg{inset:23px 6px 20px;width:calc(100% - 12px);height:calc(100% - 43px)}
html body #hud #service-hud{max-width:calc(100% - 162px)}
}
@media(min-width:901px) and (min-height:601px){
html body #controls{
bottom:calc(20px + env(safe-area-inset-bottom,0px));
left:calc(20px + env(safe-area-inset-left,0px));
right:calc(20px + env(safe-area-inset-right,0px));
}
html body #controls .cluster{gap:10px}
html body #controls .options{gap:8px}
html body #controls .options button{min-width:58px}
html body #controls button small{letter-spacing:.7px}
}
@media(max-width:600px){
html body #motion-panel{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 10px);
left:calc(10px + env(safe-area-inset-left,0px));
}
html body #hud{
padding-top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 72px);
padding-left:calc(12px + env(safe-area-inset-left,0px));
padding-right:calc(12px + env(safe-area-inset-right,0px));
padding-bottom:22px;
}
html body #hud h1{
font-size:clamp(11px,3.1vw,15px);
letter-spacing:.9px;
gap:8px;
margin:2px 0 6px;
}
html body #stats{font-size:12px;line-height:1.5;letter-spacing:0}
html body #hud .hud-rule{margin-top:7px}
html body #hud #service-hud{margin-top:7px;gap:6px 8px;max-width:100%}
html body #hud #service-message{padding:5px 8px;font-size:10px;line-height:1.4}
html body #service-hud .damage-caption{font-size:9px;letter-spacing:.6px}
html body #service-hud .damage-caption b{font-size:11px}
html body #map{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 10px);
right:calc(10px + env(safe-area-inset-right,0px));
width:88px;height:54px;
border-radius:10px;
}
html body #map .map-heading{
top:7px;left:7px;right:7px;
font-size:6px;letter-spacing:.45px;
}
html body #map svg{inset:15px 3px 3px;width:calc(100% - 6px);height:calc(100% - 18px)}
html body #controls button small{letter-spacing:.1px}
html body #end .finish-caption{font-size:9px;letter-spacing:1.4px}
html body #end h2{font-size:clamp(26px,7vw,36px)}
html body #end #result{font-size:13px;line-height:1.65}
html body #startup-error{padding:14px!important}
html body #startup-error-text{font-size:11px!important;padding:11px}
}
@media(any-pointer:coarse),(max-width:600px){
html body #steering-controls::before{
font-size:8px;
font-weight:700;
letter-spacing:1px;
color:#ddffed;
bottom:calc(var(--pedal-height,110px) + 7px);
}
html body #controls button{
--apex-control-radius:19px;
transition:none;
}
html body #steering-controls button{border-color:#8ae7c57a}
}
@media(orientation:landscape) and (max-height:600px){
html body #motion-panel{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 7px);
left:calc(10px + env(safe-area-inset-left,0px));
width:154px;
padding:3px 7px;
}
html body #motion-panel[open]{
width:306px;
padding:3px 11px 10px;
}
html body #hud{padding-bottom:18px}
html body #hud h1{font-size:11px;line-height:1.3;letter-spacing:.8px;margin:1px 0 4px}
html body #stats{font-size:11px;line-height:1.45}
html body #hud #service-hud{font-size:10px;line-height:1.35;margin-top:5px;gap:5px 7px;max-width:100%}
html body #hud #service-message{font-size:10px;line-height:1.35;padding:3px 6px}
html body #service-hud .damage-caption{font-size:9px;letter-spacing:.4px}
html body #service-hud .damage-caption b{font-size:10px}
html body #map{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 7px);
right:calc(10px + env(safe-area-inset-right,0px));
}
html body #map .map-heading{font-size:6px;letter-spacing:.4px}
html body #map .map-legend{font-size:6px}
html body #end{padding:14px}
html body #end h2{font-size:26px;letter-spacing:-.5px;margin:9px 0}
html body #end .finish-caption{font-size:9px;letter-spacing:1.2px}
html body #end #result{font-size:12px;line-height:1.45;margin:9px 0}
html body #end .finish-stripe{height:6px;margin-bottom:10px}
html body #end .bottom-stripe{display:none}
html body #end .restart-hint{min-height:44px;font-size:11px;padding:11px 14px}
}
@media(orientation:landscape) and (min-width:601px) and (max-height:600px){
html body #hud{
padding-top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 8px);
padding-left:calc(178px + env(safe-area-inset-left,0px));
padding-right:calc(110px + env(safe-area-inset-right,0px));
}
}
@media(max-width:350px){
html body #hud h1{font-size:11px;letter-spacing:.7px}
html body #stats{font-size:11px}
html body #controls button small{font-size:9px;letter-spacing:0}
html body #hud #service-message{font-size:10px}
}
@media(orientation:portrait) and (max-height:650px){
html body #hud h1{margin-bottom:4px}
html body #hud .hud-rule{margin-top:5px}
html body #hud #service-hud{margin-top:5px;row-gap:4px}
html body #hud #service-message{padding:3px 6px}
html body #stats{font-size:11px}
}
@media(orientation:landscape) and (max-height:360px){
html body #hud h1{display:none}
html body #hud #service-message{font-size:9px}
html body #end h2{font-size:24px}
}
@media(prefers-contrast:more){
:root{
--apex-muted:#e0e9ed;
--apex-line:#b8cbd099;
}
html body #motion-panel,
html body #map,
html body #end{background-color:#0c1720;background-image:none}
html body #controls button{border-color:#d5e6efb3;background-image:none}
html body #hud #service-message{border-color:#c4fbe499}
html body #motion-panel .motion-hint,
html body #motion-panel #motion-diagnostic{color:#e0e9ed}
}
@media(prefers-reduced-motion:reduce){
html body #controls button,
html body #motion-panel summary,
html body #motion-panel button,
html body #end .restart-hint{transition:none}
}

/* stage: unifying the interface palette */
:root{
--apex-ink:#f0f6f5;
--apex-muted:#b5c7cf;
--apex-mint:#84e2bf;
--apex-mint-bright:#c7f8e5;
--apex-line:#a8c4d133;
--apex-surface:#101e29fa;
--apex-warning:#f5cc98;
--apex-focus:#d4ffec;
--apex-fast:160ms;
}
html body #hud h1{letter-spacing:1.15px;font-weight:800}
html body #stats{font-weight:550;font-variant-numeric:tabular-nums;line-height:1.6}
html body #hud .hud-rule{opacity:.72}
html body #hud #service-message{box-shadow:inset 0 1px 0 #ffffff06}
html body #motion-panel,
html body #map{
border-color:var(--apex-line);
box-shadow:inset 0 1px 0 #ffffff0c,0 6px 22px #020a1038;
}
html body #motion-panel[open]{
border-color:#84e2bf55;
box-shadow:inset 0 1px 0 #ffffff12,0 18px 48px #020a1070;
}
html body #motion-panel summary{letter-spacing:.65px}
html body #motion-panel .motion-hint{line-height:1.75}
html body #motion-panel #motion-status{line-height:1.65}
html body #motion-panel #motion-diagnostic{color:#aac1cd}
html body #controls button{
background-image:linear-gradient(160deg,#ffffff09,transparent 65%);
box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -3px 0 #020a104d,0 6px 16px #020a1040;
}
html body #controls button small{font-weight:650}
html body #controls button:before{border-color:#e0f0f30e}
html body #controls button:after{opacity:.38}
html body #controls .options button{letter-spacing:.75px;color:#d7e5ea}

/* stage: refining championship menu hierarchy */
/* Extra specificity keeps these styles authoritative over runtime CSS. */
html body #end{
background-color:#101c26fc;
background-image:radial-gradient(ellipse at 15% 0%,#366b5429,transparent 65%);
border-color:#91d9bd59;
border-radius:20px;
box-shadow:inset 0 1px 0 #ffffff16,0 24px 72px #020a1099;
scroll-padding-block:20px;
}
html body #end .finish-caption{
font:750 10px/1.6 var(--apex-font);
letter-spacing:2.2px;
color:var(--apex-mint);
}
html body #end .finish-stripe{opacity:.5}
html body #end h2#race-dialog-title{
font-family:var(--apex-font);
font-weight:800;
line-height:1.14;
letter-spacing:-.85px;
color:#f1faf5;
text-wrap:balance;
margin:12px 0;
}
html body #end #result{
font-family:var(--apex-font);
font-weight:450;
line-height:1.7;
color:#c5d6dc;
margin:12px 0 20px;
font-variant-numeric:tabular-nums;
}
html body #end #round-actions{
gap:12px;
margin:18px 0;
}
html body #end #round-actions button{
font-family:var(--apex-font);
font-size:12px;
font-weight:700;
line-height:1.5;
letter-spacing:.25px;
border-radius:12px;
border-color:#a8c4d138;
background:#1b303e;
color:var(--apex-ink);
padding:14px 16px;
box-shadow:inset 0 1px 0 #ffffff0b,0 2px 5px #020a101a;
text-shadow:none;
outline-offset:3px;
transition:background-color var(--apex-fast) var(--apex-ease),
border-color var(--apex-fast) var(--apex-ease),
box-shadow var(--apex-fast) var(--apex-ease);
}
html body #end #round-actions button.primary{
background:#25654e;
border-color:#a1edcb80;
color:#f0fff7;
box-shadow:inset 0 1px 0 #ffffff19,0 4px 14px #020a1033;
}
html body #end #round-actions .mode-select,
html body #end #round-actions .level-list{gap:12px}
html body #end #round-actions .mode-select button{
gap:5px;
padding:14px 16px;
}
html body #end #round-actions .mode-select button strong{
font-size:12px;
font-weight:800;
letter-spacing:1.4px;
}
html body #end #round-actions .level-list{margin-bottom:6px}
html body #end #round-actions .level-list button{
gap:6px;
padding:15px 16px;
}
html body #end #round-actions .level-list button strong{
font-size:12px;
font-weight:750;
letter-spacing:.45px;
line-height:1.5;
}
html body #end #round-actions button small{
font-family:var(--apex-font);
font-size:11px;
font-weight:450;
line-height:1.6;
color:#b8cdd7;
letter-spacing:.05px;
}
html body #end #round-actions .round-status{
display:block;
font:750 9px/1.5 var(--apex-font);
letter-spacing:1.3px;
color:#b1c8d1;
}
html body #end #round-actions .level-list button[aria-pressed=true]{
background:#1d4135;
border-color:#8ee4c0;
box-shadow:inset 3px 0 0 #8ee4c0,inset 0 1px 0 #ffffff0e;
}
html body #end #round-actions .mode-select button[aria-pressed=true]{
background:#204b3b;
border-color:#8ee4c0;
box-shadow:inset 0 0 0 1px #8ee4c04d;
}
html body #end #round-actions button[aria-pressed=true] small,
html body #end #round-actions button[aria-pressed=true] .round-status{color:#bfeeda}
html body #end #round-actions .mode-select button[data-mode=hard][aria-pressed=true]{
background:#49392b;
border-color:#edc18d;
box-shadow:inset 0 0 0 1px #edc18d40;
color:#fff0dc;
}
html body #end #round-actions .mode-select button[data-mode=hard][aria-pressed=true] small{color:#f0d1aa}
html body #end #round-actions #mode-description{
padding:13px 15px;
margin:0 0 4px;
font:450 12px/1.7 var(--apex-font);
color:#c5d6dc;
background:#08131b80;
border:1px solid #a8c4d124;
border-radius:10px;
}
html body #end #series-note{
margin:18px 0 4px;
padding-top:14px;
border-top:1px solid #a8c4d124;
font:450 11px/1.75 var(--apex-font);
color:#a9c0cb;
letter-spacing:.05px;
}
html body #end #round-actions button:disabled{
opacity:1;
color:#90a5b0;
background:#14232e;
border-color:#a8c4d11f;
box-shadow:none;
cursor:not-allowed;
}
html body #end #round-actions button:disabled small,
html body #end #round-actions button:disabled .round-status{color:#90a5b0}

/* stage: distinguishing hover and focus */
@media(hover:hover) and (pointer:fine){
html body #end #round-actions button:not(:disabled):not(:active):hover{
background:#294657;
border-color:#b1cfde99;
box-shadow:inset 0 1px 0 #ffffff18,0 4px 12px #020a1038;
}
html body #end #round-actions button.primary:not(:disabled):not(:active):hover{
background:#2e785b;
border-color:#d0ffe8;
}
html body #end #round-actions .level-list button[aria-pressed=true]:not(:disabled):not(:active):hover,
html body #end #round-actions .mode-select button[aria-pressed=true]:not(:disabled):not(:active):hover{
background:#295642;
border-color:#c7f8e5;
}
html body #end #round-actions .mode-select button[data-mode=hard][aria-pressed=true]:not(:disabled):not(:active):hover{
background:#5b4430;
border-color:#ffe1b7;
}
}
html body #end #round-actions button:not(:disabled):active{
transform:none;
background:#15372c;
border-color:var(--apex-focus);
box-shadow:inset 0 0 0 2px #c7f8e599,inset 0 3px 8px #020a1055;
transition-duration:0s;
}
html body #end #round-actions .mode-select button[data-mode=hard]:not(:disabled):active{
background:#392c23;
border-color:#ffe1b7;
box-shadow:inset 0 0 0 2px #ffe1b780;
}
html body #end #round-actions button:focus-visible{
outline:3px solid var(--apex-focus);
outline-offset:3px;
}
html body #end #round-actions .mode-select button[data-mode=hard]:focus-visible{outline-color:#ffe1b7}
html body #motion-panel input:focus-visible{outline-offset:4px}

/* stage: preserving compact screen comfort */
@media(max-width:600px){
html body #end #round-actions{gap:10px;margin:14px 0}
html body #end #round-actions .mode-select,
html body #end #round-actions .level-list{gap:10px}
html body #end #round-actions button{padding:12px 14px}
html body #end #round-actions .mode-select button,
html body #end #round-actions .level-list button{padding:12px 14px;gap:5px}
html body #end #round-actions #mode-description{padding:11px 12px;font-size:11px}
html body #end #result{line-height:1.6;margin:10px 0 16px}
html body #end #series-note{margin-top:14px;padding-top:12px}
}
@media(max-height:450px){
html body #end h2#race-dialog-title{margin:8px 0;letter-spacing:-.5px}
html body #end #result{margin:8px 0 12px;line-height:1.5}
html body #end #round-actions{margin:10px 0;gap:8px}
html body #end #round-actions .mode-select,
html body #end #round-actions .level-list{gap:8px}
html body #end #round-actions .mode-select button,
html body #end #round-actions .level-list button{padding:10px 12px;gap:4px}
html body #end #round-actions #mode-description{padding:9px 11px}
html body #end #series-note{margin-top:10px;padding-top:10px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
html body #end #round-actions button{transition:none}
}
@media(prefers-contrast:more){
html body #end{background:#0c1720;background-image:none;border-color:#bcefd7}
html body #end #result,
html body #end #series-note,
html body #end #round-actions #mode-description,
html body #end #round-actions button small{color:#e1ebef}
html body #end #round-actions button{border-color:#a8c4d1}
html body #end #round-actions button:disabled{border-style:dashed;color:#b8cbd3}
html body #end #round-actions button:disabled small,
html body #end #round-actions button:disabled .round-status{color:#b8cbd3}
}

/* stage: choosing the next circuit */
html body #end .track-select{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;
width:100%;margin:0 0 8px;text-align:left;
}
html body #end .track-select-heading{
grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;
margin:0 0 2px;color:#c7f8e5;font:750 10px/1.5 var(--apex-font);
letter-spacing:1.4px;
}
html body #end .track-select-heading span{color:#9eb7c3;letter-spacing:.3px;font-weight:450}
html body #end #round-actions .track-select button{
display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
gap:5px;width:100%;min-height:142px;padding:10px;overflow:hidden;
text-align:left;background:#122631;border:1px solid #a8c4d12c;border-radius:11px;
}
html body #end #round-actions .track-select button svg{
display:block;width:100%;height:70px;flex-shrink:0;
background:#06121b80;border-radius:6px;
}
html body #end #round-actions .track-select button strong{
font:750 10px/1.4 var(--apex-font);letter-spacing:.35px;color:#edf8f5;
overflow-wrap:anywhere;
}
html body #end #round-actions .track-select button small{
font-size:9px;line-height:1.4;letter-spacing:.35px;color:#a9c1ce;
}
html body #end #round-actions .track-select button[aria-pressed=true]{
background:#1b3d32;border-color:var(--track-accent,#84e2bf);
box-shadow:inset 0 -3px 0 var(--track-accent,#84e2bf);
}
html body #end #round-actions .track-select button[aria-pressed=true] strong{
color:var(--track-accent,#c7f8e5);
}
html body #end .track-adaptation{
flex-basis:100%;margin:0 0 5px;text-align:left;color:#a9c1ce;
font:450 10px/1.65 var(--apex-font);
}
@media(max-width:760px){
html body #end .track-select{grid-template-columns:repeat(3,minmax(0,1fr))}
html body #end #round-actions .track-select button{min-height:124px}
html body #end #round-actions .track-select button svg{height:55px}
}
@media(max-width:420px){
html body #end .track-select{grid-template-columns:repeat(2,minmax(0,1fr))}
html body #end .track-select-heading{flex-wrap:wrap;gap:2px}
}
@media(max-height:450px) and (min-width:600px){
html body #end .track-select{grid-template-columns:repeat(5,minmax(0,1fr))}
html body #end #round-actions .track-select button{min-height:110px;padding:8px}
html body #end #round-actions .track-select button svg{height:42px}
}

/* stage: separating live race information */
/* Presentation only: retain all telemetry, controls and simulation values. */
html body #hud #stats{
display:flex;flex-wrap:wrap;align-items:baseline;
gap:5px 14px;line-height:1.4;
}
html body #stats .race-stat{
display:inline-flex;align-items:baseline;gap:6px;min-width:0;
font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
}
html body #stats .race-stat-label{
font-size:9px;letter-spacing:.9px;font-weight:650;
color:var(--apex-muted);white-space:nowrap;
}
html body #stats .race-stat-event{
flex-basis:100%;font-size:10px;letter-spacing:.5px;
font-weight:650;color:var(--apex-mint-bright);
}
html body #stats .race-stat-status{
flex-basis:100%;font-size:11px;font-weight:650;
color:var(--apex-ink);overflow-wrap:anywhere;
}
html body #stats .race-stat[hidden]{display:none}
/* stage: distinguishing lap timing feedback */
html body #stats .race-stat-delta{font-size:11px;color:var(--apex-muted)}
html body #stats .race-stat-delta[data-trend="faster"]{color:var(--apex-mint-bright)}
html body #stats .race-stat-delta[data-trend="slower"]{color:var(--apex-warning)}
html body #stats .race-stat-last{font-variant-numeric:tabular-nums}
html body #hud #service-hud{
column-gap:10px;row-gap:5px;margin-top:7px;
}
html body #hud #service-hud #structure-readout{
font-family:var(--apex-font)!important;
font-size:10px!important;line-height:1.5!important;
overflow-wrap:anywhere;
}
html body #hud #service-hud #structure-impact{
font-family:var(--apex-font)!important;line-height:1.5!important;
}
html body #hud #weekend-hud,
html body #hud #career-race-hud{
font-family:var(--apex-font);line-height:1.5;
}
html body #hud #weekend-hud{font-size:10px;gap:3px 10px}
html body #hud #career-race-hud{max-width:100%}
html body #hud #graphics-readout{
font-family:var(--apex-mono)!important;
letter-spacing:0!important;
}

/* stage: aligning menu interaction states */
html body #end #round-actions button{
overflow-wrap:anywhere;scroll-margin-block:12px;
}
html body #end #round-actions button:disabled{
transform:none;border-style:dashed;
}
html body #end #round-actions .track-select button[aria-pressed=true]{
border-width:2px;padding:9px;
}
@media(hover:hover) and (pointer:fine){
html body #end #round-actions .track-select button[aria-pressed=true]:not(:disabled):not(:active):hover{
background:#244c40;border-color:var(--track-accent,#84e2bf);
box-shadow:inset 0 -3px 0 var(--track-accent,#84e2bf);
}
}
html body #end #round-actions .track-select button:not(:disabled):active{
transform:none;box-shadow:inset 0 0 0 2px var(--apex-focus);
}
html body #end .weekend-field{
border-color:var(--apex-line);border-radius:var(--apex-panel-radius);
}
html body #end .weekend-field select{
min-height:48px;font-family:var(--apex-font);
border-color:#aac7d270;
}
html body #end .weekend-field:focus-within{
border-color:#84e2bf99;
}
html body #end .weekend-field select:focus-visible{
outline:3px solid var(--apex-focus);outline-offset:3px;
}
html body #end .track-adaptation,
html body #end .venue-summary .venue-reference{
color:var(--apex-muted);line-height:1.65;
}
html body #end[data-screen="finish"] #result{
text-align:left;padding:16px;
background:#07131a80;border:1px solid var(--apex-line);
border-radius:var(--apex-panel-radius);
font-variant-numeric:tabular-nums;line-height:1.85;
}
html body #end[data-screen="pause"] #result,
html body #end[data-screen="confirm"] #result{
color:var(--apex-ink);line-height:1.75;
}

/* stage: protecting compact viewport space */
@media(min-width:601px) and (min-height:601px){
html body #hud #stats{padding-right:162px}
}
@media(max-width:600px){
html body #hud #stats{gap:4px 10px}
html body #stats .race-stat{font-size:12px;gap:4px}
html body #stats .race-stat-event{font-size:9px}
html body #stats .race-stat-status{font-size:10px}
html body #stats .race-stat-label{font-size:8px;letter-spacing:.5px}
html body #hud #service-hud{margin-top:5px;row-gap:4px}
html body #hud #service-hud #structure-readout{font-size:9px!important}
html body #hud #weekend-hud{font-size:9px}
html body #end #round-actions .track-select button[aria-pressed=true]{padding:11px 13px}
}
@media(orientation:landscape) and (max-height:600px){
html body #hud #stats{gap:3px 10px}
html body #stats .race-stat{font-size:11px;gap:4px}
html body #stats .race-stat-event{font-size:9px}
html body #stats .race-stat-status{font-size:10px}
html body #stats .race-stat-label{font-size:8px;letter-spacing:.4px}
html body #hud #service-hud{margin-top:4px;row-gap:3px}
html body #hud #service-hud #structure-readout{font-size:9px!important}
html body #hud #weekend-hud{font-size:9px}
html body #end #round-actions .track-select button[aria-pressed=true]{padding:7px}
}
@media(prefers-contrast:more){
html body #stats .race-stat-label{color:#e0e9ed}
html body #end .weekend-field select{border-color:#c7dce4}
html body #end[data-screen="finish"] #result{background:#07131a;border-color:#c7dce4}
}

/* stage: containing menus without shrinking racing */
/* Only the menu is bounded; the renderer continues using the full viewport. */
html body #end[data-screen]{
inset:auto!important;
top:calc(12px + env(safe-area-inset-top,0px))!important;
bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
left:50%!important;right:auto!important;transform:translateX(-50%);
width:min(1100px,calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
max-width:none;min-width:0;
padding:clamp(16px,2.4vw,30px)!important;
border:1px solid #95cbb64a!important;border-radius:16px!important;
overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
touch-action:pan-y;scrollbar-gutter:stable;
box-shadow:0 18px 70px #020a1099;
}
html body #end[data-screen="pause"],
html body #end[data-screen="confirm"],
html body #end[data-screen="career-confirm"]{
width:min(620px,calc(100% - 24px));height:fit-content;
max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
margin-block:auto;
}
html body #end[data-screen] h2#race-dialog-title{
font-size:clamp(25px,3.7vw,44px);line-height:1.12;letter-spacing:-.035em;
}
html body #end #round-actions>button.primary{
flex-basis:100%;min-height:52px;font-size:14px;
}
html body #end #round-actions button,
html body #end #round-actions select{
min-height:48px;touch-action:manipulation;
}
html body #end :is(button,select,input,summary):focus-visible{
outline:3px solid var(--apex-focus);outline-offset:3px;
}

/* stage: protecting touch controls from selection */
html body :is(#end,#hud,#help,#controls,#motion-panel){
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
html body :is(button,summary),html body :is(button,summary) *{
-webkit-user-select:none!important;user-select:none!important;
-webkit-touch-callout:none;
}
html body :is(textarea,input[type="text"],input[type="search"],#startup-error,#startup-error *,#motion-diagnostic){
-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
}
html body #controls #hud-toggle{width:76px;min-width:76px;font-size:10px}
html body #hud[data-compact="true"] h1,
html body #hud[data-compact="true"] .hud-rule,
html body #hud[data-compact="true"] #graphics-readout,
html body #hud[data-compact="true"] #structure-readout,
html body #hud[data-compact="true"] #structure-impact,
html body #hud[data-compact="true"] .race-stat-event,
html body #hud[data-compact="true"] .race-stat-time,
html body #hud[data-compact="true"] .race-stat-current,
html body #hud[data-compact="true"] .race-stat-best,
html body #hud[data-compact="true"] .race-stat-last,
html body #hud[data-compact="true"] .race-stat-delta,
html body #hud[data-compact="true"] .weather-readout,
html body #hud[data-compact="true"] .career-live-radio{
display:none!important;
}
html body #hud[data-compact="true"] #service-hud:not([data-critical="true"]):not([data-repair="true"]):not([data-guidance="true"]) #service-message{
display:none!important;
}
html body #hud[data-compact="true"] #weekend-hud[data-standard="true"]{display:none}
html body #hud[data-compact="true"]{padding-bottom:10px}
html body #hud[data-compact="true"] #stats{padding-right:0}
html body #hud[data-compact="true"] .race-stat-status{
font-size:10px;line-height:1.35;letter-spacing:0;
}

/* stage: opening optional workshop detail */
html body #end .beacon-inspector{
border-top:1px solid #95cbb638;margin:0;padding:0 10px 8px;
}
html body #end .beacon-inspector>summary{
cursor:pointer;min-height:48px;display:list-item;
padding:14px 8px;margin-left:18px;color:#c7f8e5;
font:700 12px/1.5 var(--apex-font);touch-action:manipulation;
}
html body #end .beacon-inspector:not([open]){padding-bottom:0}

/* stage: grouping optional race settings */
html body #end .race-menu-section{
flex:0 0 100%;width:100%;min-width:0;text-align:left;
border:1px solid #95cbb638;border-radius:10px;background:#0d202bd9;
}
html body #end .race-menu-section>summary{
cursor:pointer;padding:14px 16px;min-height:52px;
font:700 12px/1.5 var(--apex-font);color:#d4f7e4;
overflow-wrap:anywhere;touch-action:manipulation;
}
html body #end .race-menu-section[open]>summary{
border-bottom:1px solid #95cbb629;
}
html body #end .race-menu-section>.race-menu-section-body{
display:flex;flex-wrap:wrap;gap:12px;padding:14px;min-width:0;
}
html body #end .race-menu-section-body>p{
margin:0;color:var(--apex-muted);font:12px/1.65 var(--apex-font);
}
html body #end #round-actions .race-menu-section button{min-width:0}
html body #end .race-menu-section summary:focus-visible{
outline:3px solid var(--apex-focus);outline-offset:2px;border-radius:8px;
}
@media(max-width:760px),(max-height:600px),(pointer:coarse){
html body #hud[data-compact="true"]~#controls .options #camera,
html body #hud[data-compact="true"]~#controls .options #sound{
display:none;
}
html body #controls .options #series{font-size:11px}
html body #end .race-menu-section>.race-menu-section-body{padding:10px;gap:10px}
html body #end .race-menu-section>summary{padding:14px 12px}
}
@media(max-width:540px){
html body #end #round-actions .race-menu-section-body>button{flex-basis:100%}
}

/* stage: clearing the mobile driving view */
@media(max-width:760px),(max-height:600px),(pointer:coarse){
html body #end[data-screen]{border-radius:12px!important;padding:16px!important}
html body #hud[data-compact="true"]{
top:0;left:0;right:0;
padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 10px calc(12px + env(safe-area-inset-left,0px));
background:linear-gradient(#071019e8,#07101999,transparent);
}
html body #hud[data-compact="true"] #stats{gap:4px 14px}
html body #hud[data-compact="true"] .race-stat{font-size:13px}
html body #hud[data-compact="true"] .race-stat-status{font-size:10px}
html body #hud[data-compact="true"] #service-hud{
font-size:10px;margin-top:4px;gap:4px 8px;max-width:100%;
}
html body #hud[data-compact="true"] #career-race-hud{
font-size:10px;line-height:1.4;margin-top:4px;
}
html body #hud[data-compact="true"]~#map,
html body #hud[data-compact="true"]~#motion-panel,
html body #hud[data-compact="true"]~#help{display:none!important}
html body #hud[data-compact="false"]{
padding:calc(72px + env(safe-area-inset-top,0px)) 12px 12px;
max-height:max(110px,calc(100dvh - 200px - env(safe-area-inset-bottom,0px)));
overflow-y:auto;pointer-events:auto;touch-action:pan-y;
background:#091721ee;
}
html body #controls .options{gap:6px}
html body #controls .options button{font-size:10px}
html body #steering-controls::before{display:none}
}
@media(max-width:540px){
html body #end[data-screen]{width:calc(100% - 16px);padding:14px!important}
html body #end[data-screen] h2#race-dialog-title{font-size:28px}
html body #end[data-screen] #result{font-size:12px;line-height:1.6}
html body #end #round-actions>button{flex-basis:100%}
html body #end .career-hero{gap:14px;padding:12px}
html body #end .career-hero h3{font-size:25px}
html body #end .career-hero p{font-size:12px;line-height:1.6}
}

/* stage: prioritising the racing view */
/* Whitelist essential containers rather than chasing every telemetry child. */
html body #hud[data-compact="true"]>:not(#stats):not(#service-hud){
display:none!important;
}
html body #hud[data-compact="true"] #service-hud>:not(.damage-caption):not(.damage-track):not(#service-message){
display:none!important;
}
html body #hud[data-compact="true"]{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 10px);
left:calc(10px + env(safe-area-inset-left,0px));right:auto;
width:max-content;max-width:min(460px,calc(100% - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
padding:10px 12px;border:1px solid #b9e6d522;border-radius:10px;
background:#07131bbd;text-shadow:0 1px 3px #020a10;
overflow:visible;pointer-events:none;
}
html body #hud[data-compact="true"] #stats{
padding:0;gap:5px 16px;max-width:100%;
}
html body #hud[data-compact="true"] #stats .race-stat{
font-size:15px;font-weight:750;gap:5px;
}
html body #hud[data-compact="true"] #stats .race-stat-label{
font-size:9px;letter-spacing:.6px;color:#b7cfce;
}
html body #hud[data-compact="true"] #stats .race-stat-status{
flex-basis:100%;font-size:11px;line-height:1.45;color:#ffe0b0;
}
html body #hud[data-compact="true"] #service-hud{
max-width:100%;margin-top:6px;gap:5px 8px;font-size:11px;
}
html body #hud[data-compact="true"] #service-hud[data-damaged="false"] .damage-caption,
html body #hud[data-compact="true"] #service-hud[data-damaged="false"] .damage-track,
html body #hud[data-compact="true"] #service-hud[data-damaged="false"][data-repair="false"][data-guidance="false"]{
display:none!important;
}
html body #hud[data-compact="true"] #service-message{
flex-basis:100%;max-width:100%;font-size:11px;line-height:1.45;
padding:5px 7px;margin:0;
}
html body #hud[data-compact="true"]~#motion-panel,
html body #hud[data-compact="true"]~#help,
html body #hud[data-compact="true"]~#controls .options #camera,
html body #hud[data-compact="true"]~#controls .options #sound{
display:none!important;
}
/* Full HUD remains opt-in through pause, with scrolling rather than clipping. */
html body #hud[data-compact="false"]{
max-height:max(100px,calc(100dvh - 210px - env(safe-area-inset-bottom,0px)));
overflow-y:auto;pointer-events:auto;touch-action:pan-y;
}
@media(min-width:761px) and (min-height:601px){
html body #hud[data-compact="true"]~#map{
top:calc(var(--camlin-create-toolbar-inset,0px) + env(safe-area-inset-top,0px) + 10px);
width:94px;height:78px;right:calc(10px + env(safe-area-inset-right,0px));
}
html body #hud[data-compact="true"]~#map .map-legend{display:none}
html body #hud[data-compact="true"]~#map .map-heading{font-size:6px;top:8px;left:9px;right:9px}
html body #hud[data-compact="true"]~#map svg{inset:17px 4px 4px;width:calc(100% - 8px);height:calc(100% - 21px)}
}
@media(max-width:380px),(max-height:400px){
html body #hud[data-compact="true"]{padding:7px 9px}
html body #hud[data-compact="true"] #stats{gap:4px 12px}
html body #hud[data-compact="true"] #stats .race-stat{font-size:13px}
}