/* Race messages share a flow layout, separate from items and driving controls. */
#raceMessages{position:absolute;top:100px;left:33%;right:26%;display:flex;flex-direction:column;align-items:stretch;gap:5px;pointer-events:none;z-index:4}
#raceMessages #raceThreat,#raceMessages #announcement,#raceMessages #effectStatus,#raceMessages #skillStatus{position:static;inset:auto;transform:none;max-width:none;width:auto;margin:0;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.25;font-size:12px;padding:6px 9px;border-radius:9px}
#raceMessages #raceThreat{animation:none;background:#13243de8}
#raceMessages #raceThreat.danger{background:#a92e43;border:1px solid #ffc2b8}
#raceMessages #announcement{background:#13243de8;transition:opacity .2s}
#raceMessages #effectStatus{font-size:11px;border-width:1px}
#raceMessages #skillStatus{background:#15283fd9;color:#ffe6a6}
#raceMessages :empty{display:none!important}
#raceMessages.hasAnnouncement #raceThreat:not(.danger){display:none}
#announcement:not(.activeAnnouncement){display:none!important}
#touch #touchGo,#touch #touchGo.pressed{transform:none!important;transition:background .1s,box-shadow .1s;animation:none;box-sizing:border-box}
/* The primary pointer controls input mode, including on hybrid laptops. */
@media(pointer:fine){#touch{display:none!important}}
@media(max-width:700px),(pointer:coarse){
 body:has(#hud:not(.hidden)) header{top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));height:48px}
 body:has(#hud:not(.hidden)) header .brand{font-size:24px}
 body:has(#hud:not(.hidden)) header .brand span{font-size:15px}
 body:has(#hud:not(.hidden)) header .brandSubtitle{font-size:10px;letter-spacing:1px}
 body:has(#hud:not(.hidden)) header .brand i,body:has(#hud:not(.hidden)) header .edition{display:none}
 body:has(#hud:not(.hidden)) header .topRight{gap:8px}
 #driverHud{top:76px;left:14px;width:calc(51% - 20px);max-width:none;height:47px;padding:4px 6px;gap:6px}
 #driverHud img{width:36px;height:36px}
 #driverHud strong{font-size:12px}#driverHud small{font-size:8px;letter-spacing:.3px}
 .rank{top:134px;left:16px;height:37px;gap:6px}.rank>b{font-size:46px}.rank>span{font-size:16px}.rank small{font-size:8px}
 .raceInfo{top:76px;right:14px;width:calc(49% - 16px);font-size:12px;line-height:1.2}
 #raceCourse{font-size:12px;line-height:1.2}.raceInfo #timer{font-size:21px;margin-top:3px}.raceInfo b{margin-left:5px}#cupRound,#lapSplit{font-size:8px;margin-top:4px;letter-spacing:.2px}
 #raceMessages{top:182px;left:14px;right:14px;gap:4px}
 #raceMessages #raceThreat,#raceMessages #announcement,#raceMessages #effectStatus,#raceMessages #skillStatus{font-size:10px;padding:4px 7px;line-height:1.2}
 #countdown{top:37%;font-size:84px}
}
@media(pointer:coarse){
 #touch{position:fixed;inset:auto 0 max(24px,env(safe-area-inset-bottom));height:132px;display:block}
 #touch #thumbstick{left:max(16px,env(safe-area-inset-left));bottom:0;width:132px;height:132px}
 #touch #touchGo{right:max(16px,env(safe-area-inset-right));bottom:0;width:118px;height:118px;min-height:0;margin:0;top:auto}
 #itemBox{right:max(20px,env(safe-area-inset-right));bottom:calc(max(24px,env(safe-area-inset-bottom)) + 136px)!important;height:88px;min-height:0}
 #liveRaceOrder.compactOrder{left:max(16px,env(safe-area-inset-left))!important;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 156px)!important;width:145px!important;height:72px}
 .bottomHud .speed{bottom:max(26px,env(safe-area-inset-bottom));width:65px}.speed b{font-size:30px}.speed span{font-size:8px}#driftMeter{max-width:65px}
}
@media(max-width:700px) and (max-height:600px) and (orientation:portrait){
 #driverHud{display:none}.rank{top:78px}.raceInfo{top:72px}#raceMessages{top:190px}
 #raceMessages #raceThreat{display:none}#raceMessages #raceThreat.danger{display:block}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
 #driverHud{display:none}.rank{top:66px;left:16px}.raceInfo{top:64px;right:16px;width:160px}#lapSplit{display:none}.raceInfo #timer{font-size:16px}#raceCourse{font-size:11px}#cupRound{font-size:8px}
 #raceMessages{top:66px;left:180px;right:190px;gap:3px}
 #raceMessages #raceThreat,#raceMessages #announcement,#raceMessages #effectStatus,#raceMessages #skillStatus{font-size:10px;padding:4px 6px}
 #touch{height:92px}#touch #thumbstick{width:92px;height:92px}#touch #touchGo{width:82px;height:82px;font-size:26px}#touchGo small{font-size:8px}.stickDirections{font-size:19px;line-height:26px}.stickKnob{width:44px;height:44px}#thumbstick small{font-size:8px}
 #itemBox{width:100px!important;max-width:100px!important;height:64px;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 100px)!important}#itemSymbol{font-size:26px!important}#itemName{font-size:8px!important}
 #liveRaceOrder.compactOrder{width:145px!important;height:66px;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 122px)!important}.liveRaceRow{height:22px}
 #liveRaceOrder.compactOrder .liveRaceRow{height:22px}
 #countdown{top:40%;font-size:60px}
}
@media(pointer:coarse) and (max-width:360px){.bottomHud .speed{left:calc(50% + 7px);width:34px}.speed b{font-size:23px}.speed span{font-size:7px}#driftMeter{max-width:34px}}
/* One visible viewport for the canvas, menu and HUD, including first iOS load. */
html,body{height:var(--game-height,100dvh)}
body{position:fixed;inset:0;bottom:auto;width:100%}
#world,#shade,#hud{height:var(--game-height,100dvh);bottom:auto}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
input,textarea,select,[contenteditable="true"],[contenteditable="true"] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#touch,#touch *,#world{touch-action:none;-webkit-tap-highlight-color:transparent}
#touchGo *{pointer-events:none}

/* Safari may restore a document offset even with an internally scrolling menu. */
html{position:fixed;inset:0;overflow:hidden}
body{margin:0;overflow:hidden}
#menu{overscroll-behavior:contain}

#itemBox{touch-action:none!important}#itemBox *{pointer-events:none}

.weaponArtwork{width:64px;height:70px;object-fit:contain;display:block;pointer-events:none}.powerCard>span{width:64px;flex-shrink:0}#itemSymbol .weaponArtwork{width:100%;height:64px}@media(pointer:coarse){#itemSymbol .weaponArtwork{height:44px}}

.careerCompleteActions{display:flex;flex-wrap:wrap;gap:10px}.careerCompleteActions button{flex:1;min-width:160px}