/* Reference-led racing HUD: clear glass, bright thumb targets, open centre view. */
#frame{--race-glass:linear-gradient(145deg,#326689b5,#163856a8);--race-outline:#dbf6ffb0;--race-shadow:inset 0 1px 0 #ffffff52,0 2px 7px #15395335}
#frame .race-hud{top:max(16px,env(safe-area-inset-top));gap:12px;padding:5px 17px 5px 5px;border:1.5px solid var(--race-outline);border-radius:20px;background:var(--race-glass);box-shadow:var(--race-shadow);line-height:1}
#frame .race-hud #racePortrait{width:48px;height:48px;border:2px solid #fff7c1;border-radius:15px;box-shadow:0 0 0 1px #ffffff22}
#frame .race-hud #position{font-size:43px;font-weight:900;letter-spacing:-2px;background:linear-gradient(90deg,#ffe56a 0 39%,#fff 39%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px #092d49);padding-right:3px}
#frame .clock{height:60px;gap:12px;padding:6px 17px;border:1.5px solid var(--race-outline);border-radius:20px;background:var(--race-glass);box-shadow:var(--race-shadow);text-shadow:0 2px 2px #123953}
#frame .clock #lapLabel{display:flex;align-items:baseline;gap:6px;font-size:0;font-style:italic;letter-spacing:-.02em;white-space:nowrap}
#frame .clock #lapLabel:before{content:"LAP";font-size:16px;color:#fff}
#frame .clock #lapLabel:after{content:attr(data-lap) " / 3";font-size:25px;color:#ffe777;font-weight:900}
#frame .clock .clock-icon{width:26px;height:28px;box-sizing:content-box;padding-left:12px;border-left:1px solid #d3f2ff4a;flex:none;color:white}
#frame .clock #timer{font-size:29px;font-style:italic;font-weight:900;min-width:3.9ch;letter-spacing:.01em;line-height:1}
#frame .clock>small{display:none}
#frame .utilities{top:max(16px,env(safe-area-inset-top))}
#frame .utilities #pause{width:54px;height:54px;border-radius:50%;border:1.5px solid #dff9ffd9;background:var(--race-glass);box-shadow:var(--race-shadow);padding:13px;color:#fff}
#frame .utilities #pause .icon{width:26px;height:26px;stroke-width:3}
#frame .controls .steering-controls{border:0;background:none;padding:0;gap:14px}
#frame .steering-controls button{border:2px solid #d7f3ffc9;border-radius:27px;background:var(--race-glass);box-shadow:inset 0 0 0 4px #315b7970,inset 0 0 0 5px #bedef747,0 3px 8px #0f354334}
#frame .steering-controls .icon{width:37px;height:37px;stroke-width:3.5}
#frame .pedal-controls .drift{background:linear-gradient(150deg,#50f2d8e8,#00afaeec);color:white;border-color:#c1fff5;box-shadow:inset 0 0 0 4px #24c8bdbf,inset 0 0 0 5px #a6fff2aa,0 0 13px #55ffe951,0 3px 6px #15504d77;text-shadow:0 2px 2px #13515a}
#frame .pedal-controls [data-key="brake"]{background:linear-gradient(140deg,#ff94b3e8,#e74d83e6);border-color:#ffe3ed;box-shadow:inset 0 0 0 3px #ffabc052,0 0 9px #ff93b638,0 3px 6px #713e5b55;text-shadow:0 2px 2px #8a335a}
#frame .pedal-controls [data-key="brake"] .icon{stroke-width:2.3}
#frame .control-caption{font-size:11px;letter-spacing:0}
#frame[data-auto="true"] .pedal-controls:before{right:6px;width:calc(var(--primary-size) - 12px);bottom:calc(var(--primary-size) + 12px);border:1px solid #dbfcffd9;border-radius:20px;background:#274f679c;line-height:19px;letter-spacing:.03em;color:white;box-shadow:inset 0 1px 2px #ffffff26}
#frame .item-slot button:not(:disabled){background:radial-gradient(circle at 37% 28%,#fff0aa,#ffbd4e 65%,#ed9941);border:2px solid #fff5d3;box-shadow:inset 0 0 0 3px #ffd571,0 0 10px #ffd36c48,0 3px 6px #6147254a}
#frame .item-slot #itemName{font-weight:900;text-shadow:0 1px 1px #fff7c9;font-size:11px;line-height:1.1}
#frame .item-slot button:disabled #itemName{text-shadow:none}
#frame .speed{gap:7px;left:var(--safe-left);bottom:calc(var(--control-bottom) + var(--steer-size) + 27px);padding-bottom:16px;color:white;filter:drop-shadow(0 2px 2px #123650)}
#frame .speed strong{font-size:43px;font-weight:900;font-style:italic;line-height:1;letter-spacing:-2px}
#frame .speed small{font-size:13px;font-weight:800;font-style:italic;letter-spacing:0}
.speed-gauge{position:absolute;bottom:0;left:0;width:calc(var(--steer-size) * 2 + 12px);height:10px;border-radius:2px;transform:skewX(-22deg);background:#143a6094;overflow:hidden;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 8%,transparent 8% 9%);mask-image:repeating-linear-gradient(90deg,#000 0 8%,transparent 8% 9%)}
#speedFill{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ffda49,#c5ed65 34%,#6ff3ce 68%,#34eaff);box-shadow:inset 0 0 0 1px #f4ffda}
#frame.boosting #speedFill{background:linear-gradient(90deg,#ffe068,#efffc0,#90ffff)}
#frame #minimap{padding:5px 8px 6px;border:1.5px solid #d7f4ffa1;border-radius:21px;background:var(--race-glass);box-shadow:var(--race-shadow)}
#frame .map-legend{gap:8px;margin:0}.map-legend span{box-shadow:0 1px 3px #0b345d77}
#frame #rivalAlert{top:auto;bottom:calc(var(--control-bottom) + var(--action-height) + var(--map-width) * .667 + 48px);background:#20556fb8;border:1px solid #d5fff0a6;border-radius:12px;padding:6px 9px;font-size:11px}
#frame .driftbar>div{background:#1b436888;border:1px solid #d8fff140;height:7px}
#frame .film{box-shadow:inset 0 -65px 65px -65px #11345070}
#frame.boosting .film{box-shadow:inset 0 0 55px #8defff38}
@media(max-height:550px){
 #frame .race-hud{top:max(10px,env(safe-area-inset-top));gap:8px;padding:4px 11px 4px 4px;border-radius:16px}
 #frame .race-hud #racePortrait{width:36px;height:36px;border-radius:11px}#frame .race-hud #position{font-size:33px}
 #frame .hud,.game-expanded #frame .hud{top:max(10px,env(safe-area-inset-top))}
 #frame .clock{height:46px;padding:5px 10px;gap:8px;border-radius:16px}#frame .clock #timer{font-size:23px}#frame .clock #lapLabel:before{font-size:12px}#frame .clock #lapLabel:after{font-size:19px}#frame .clock .clock-icon{width:20px;height:22px;padding-left:8px}
 #frame .utilities{top:max(10px,env(safe-area-inset-top))}#frame .utilities #pause{width:44px;height:44px;padding:9px}
 #frame .speed{bottom:calc(var(--control-bottom) + var(--steer-size) + 19px)}#frame .speed strong{font-size:34px}#frame .speed small{font-size:11px}.speed-gauge{height:9px}
 #frame .steering-controls button{border-radius:24px}#frame .controls .steering-controls{gap:12px}
 #frame #minimap{border-radius:16px;padding:3px 5px 4px}#frame .map-legend{gap:6px}
}
@media(max-height:350px){#frame .race-hud{top:8px}#frame .race-hud #racePortrait{width:30px;height:30px}#frame .race-hud #position{font-size:29px}#frame .clock{height:40px}#frame .clock #timer{font-size:21px}#frame .speed strong{font-size:29px}#frame .speed{bottom:calc(var(--control-bottom) + var(--steer-size) + 16px)}#frame .control-caption{font-size:10px}#frame .map-legend{display:none}}

/* v38: portrait standings and luminous, pre-painted-looking control surfaces. */
#frame{--rank-size:54px;--rank-step:65px}
#frame .race-hud{display:none}
#liveRanks{position:absolute;z-index:4;left:var(--safe-left);top:max(15px,env(safe-area-inset-top));width:78px;height:calc(var(--rank-step) * 4);pointer-events:none}
#frame:not([data-stage="count"]):not([data-stage="drive"]):not([data-stage="demo"]) #liveRanks{display:none}
.rank-card{position:absolute;top:0;left:0;width:var(--rank-size);height:var(--rank-size);margin-left:14px;border-radius:17px;border:2px solid #cfedffba;background:linear-gradient(135deg,#67b9cecc,#183b63dc);box-shadow:inset 0 1px 1px white,0 3px 7px #0c304f60;transition:transform .28s ease,border-color .2s;will-change:transform}
.rank-photo{display:block;width:100%;height:100%;overflow:hidden;border-radius:14px}
.rank-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;pointer-events:none;transform:scale(1.25);transform-origin:50% 25%}
#rank-MONO img{transform:scale(1.45);transform-origin:50% 25%}#rank-KURO img{transform:scale(1.12)}
.rank-card b{position:absolute;z-index:2;top:-5px;left:-16px;width:27px;height:29px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(#447497,#18385b);border:1px solid #a1d8f5;color:white;font-size:20px;font-style:italic;font-weight:900;text-shadow:0 2px 1px #13314e}
.rank-card[data-rank="1"] b{background:linear-gradient(#fff7ab,#ffc03f);color:#503317;border-color:#fff8cd;text-shadow:0 1px #fff4c1;box-shadow:0 0 9px #ffdf7866}
.rank-card[data-player="true"]{border-color:#fff5a4;box-shadow:0 0 0 2px #ffe06e66,0 0 15px #ffdc7066}
.rank-you{display:none;position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);padding:1px 5px;border-radius:5px;background:#ffe17d;color:#233d53;font-size:9px;line-height:12px;font-weight:900;letter-spacing:.04em}
.rank-card[data-player="true"] .rank-you{display:block}
#frame .speed strong{font-size:55px;letter-spacing:-2px}#frame .speed small{font-size:16px}#frame .speed{padding-bottom:21px;bottom:calc(var(--control-bottom) + var(--steer-size) + 26px)}
#frame .speed-gauge{height:14px;width:calc(var(--steer-size) * 2 + 36px);filter:drop-shadow(0 0 4px #69efff75)}
#frame .speed strong{text-shadow:0 2px 2px #133047,0 0 12px #c2f5ff55}
#frame .steering-controls button{background:linear-gradient(165deg,#abddf561 0%,#3a74909e 38%,#183e69bd 55%,#28637b9e 100%);box-shadow:inset 0 2px 2px #ffffff85,inset 0 0 0 4px #73c7ef38,inset 0 -5px 10px #11395170,0 0 13px #8edaff3b,0 4px 8px #173b5f44}
#frame .pedal-controls .drift{background:radial-gradient(ellipse at 40% 8%,#e5fff4cc,transparent 47%),linear-gradient(155deg,#64ffe6,#08cfc8 48%,#00a9b1);box-shadow:inset 0 3px 3px #ffffffd9,inset 0 0 0 4px #1acfc3,inset 0 -8px 12px #087b9677,0 0 18px #4ffffc7a,0 4px 8px #14494d77}
#frame .pedal-controls [data-key="brake"]{background:radial-gradient(ellipse at 40% 10%,#fff0f1ca,transparent 46%),linear-gradient(150deg,#ffa9c3,#f2659b 52%,#ce356a);box-shadow:inset 0 2px 3px #fff9f5d9,inset 0 0 0 3px #ffbed259,0 0 13px #ff89b661,0 3px 8px #6e305c55}
#frame .item-slot button:not(:disabled){background:radial-gradient(ellipse at 36% 12%,white,#fff0a2 26%,#ffc64f 60%,#eb9228);box-shadow:inset 0 2px 3px white,inset 0 0 0 3px #ffe897,0 0 17px #ffc34d75,0 3px 7px #64473166}
#frame .clock,#frame #minimap{box-shadow:inset 0 1px 2px #ffffff85,inset 0 -8px 15px #0c30532b,0 0 12px #b2f8ff24}
#frame .utilities #pause{box-shadow:inset 0 2px 2px #ffffff82,0 0 12px #b7f8ff38}
#frame .controls .held{box-shadow:inset 0 0 18px #c0fff2,0 0 22px #c0fff299!important}
@media(max-height:550px){#frame{--rank-size:39px;--rank-step:47px}.rank-card{border-radius:12px;margin-left:12px}.rank-card img{border-radius:9px}.rank-card b{font-size:16px;width:23px;height:24px;left:-14px;top:-3px;border-radius:8px}#liveRanks{top:max(11px,env(safe-area-inset-top));width:60px}.rank-you{font-size:8px;line-height:10px;bottom:-4px}#frame .speed strong{font-size:44px}#frame .speed small{font-size:13px}#frame .speed{padding-bottom:18px;bottom:calc(var(--control-bottom) + var(--steer-size) + 20px)}#frame .speed-gauge{height:12px}}
@media(max-height:380px){#frame{--rank-size:32px;--rank-step:38px}.rank-card{border-radius:10px}.rank-card img{border-radius:7px}#frame .speed strong{font-size:38px}#frame .speed small{font-size:12px}#frame .speed-gauge{height:11px}.rank-you{right:-25px;left:auto;bottom:2px;transform:none}}
@media(prefers-reduced-motion:reduce){.rank-card{transition:none;will-change:auto}}

 #frame .item-slot button{padding:0;gap:0}
@media(max-height:380px){#frame .speed{left:calc(var(--safe-left) + 53px)}}
/* v39: larger portraits without badges; retain accessible live ordering. */
#frame{--rank-size:64px;--rank-step:73px;--race-glass:linear-gradient(145deg,#1986b8bb,#143c78bb);--race-outline:#b9f5ffe6}
.rank-card{margin-left:0;border-color:#8bedff;background:linear-gradient(140deg,#36d5e7,#2363a9)}
.rank-card b{display:none}
#frame .item-slot #itemGlyph .icon,#frame .item-slot #itemGlyph .item-art{width:46px;height:46px;max-width:none;object-fit:contain}
#frame .item-slot #itemName{font-size:10px}
#frame .pedal-controls .drift{border-color:#eafffb}
#frame.star-power .item-slot button{border-color:#fff3a2;box-shadow:0 0 18px #ffe56ab0,inset 0 0 12px #fff2a2}
@media(max-height:550px){#frame{--rank-size:46px;--rank-step:51px}.rank-card{margin-left:0}#frame .item-slot #itemGlyph .icon,#frame .item-slot #itemGlyph .item-art{width:43px;height:43px}}
@media(max-height:380px){#frame{--rank-size:37px;--rank-step:41px}#frame .item-slot #itemGlyph .icon,#frame .item-slot #itemGlyph .item-art{width:40px;height:40px}}

/* Tablet/desktop only. Anchor enlarged controls to the same safe edges. */
#frame[data-large-hud="true"] .steering-controls{transform:scale(1.3);transform-origin:left bottom}
#frame[data-large-hud="true"] .pedal-controls{transform:scale(1.3);transform-origin:right bottom}
#frame[data-large-hud="true"] #liveRanks{transform:scale(1.3);transform-origin:left top}
#frame[data-large-hud="true"] .clock{transform:scale(1.3);transform-origin:right top}
#frame[data-large-hud="true"] .speed{transform:scale(1.3);transform-origin:left bottom;bottom:calc(var(--control-bottom) + var(--steer-size) * 1.3 + 26px)}
#frame[data-large-hud="true"] .item-slot{transform:scale(1.3);transform-origin:right bottom;bottom:calc(var(--control-bottom) + (var(--secondary-size) + var(--control-gap)) * 1.3);right:calc(var(--safe-right) + (var(--primary-size) + var(--control-gap)) * 1.3)}
#frame[data-large-hud="true"] #minimap{bottom:calc(var(--control-bottom) + var(--action-height) * 1.3 + 14px)}
#frame[data-large-hud="true"] .utilities #pause{transform:scale(1.3);transform-origin:center top}
@media(max-height:600px){#frame[data-large-hud="true"] .speed{left:calc(var(--safe-left) + 100px)}}

/* Settings stays at the far right; the clock leaves room for it. */
#frame .utilities{left:auto;right:var(--safe-right);transform:none;top:max(16px,env(safe-area-inset-top))}
#frame .clock{margin-right:76px}
#frame[data-large-hud="true"] .utilities #pause{transform-origin:right top}
#frame[data-large-hud="true"] .clock{margin-right:94px}
.audio-levels{display:flex;gap:16px;margin-top:16px}.audio-levels label{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;font-size:16px;font-weight:900;color:#fff4b2}.audio-levels select{min-width:72px;min-height:44px;border:2px solid #8cebdc;border-radius:12px;background:#174d70;color:white;padding:6px 12px;font-weight:800}

#itemNotice.wrong-way{color:#fff3a7;font-size:clamp(13px,1.8vw,20px);background:none;border:0;border-radius:0;padding:0;box-shadow:none;text-shadow:0 1px 3px #17263d;animation:wrong-way-pulse 1s ease-in-out infinite;pointer-events:none}
@keyframes wrong-way-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){#itemNotice.wrong-way{animation:none}}