/* Shared viewport and safe-area rules, including mobile browser chrome. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
html,body{width:100%;height:100%;overscroll-behavior:none}
#lobby{width:100%;height:100dvh;min-height:0;padding-bottom:calc(28px + var(--safe-bottom));overscroll-behavior:contain;scroll-padding-top:100px}
dialog{max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));overflow-y:auto;overscroll-behavior:contain}
.close{min-width:44px;min-height:44px}.touch-controls button,#item{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-controls button.pressed,.touch-controls button:active{background:#fff0ce;color:#292039;box-shadow:0 0 0 3px #dded7777;transform:translateY(2px)}
#hud:has(#item-event:not([hidden])) #power-feedback,#hud:has(#attack-warning:not([hidden])) #power-feedback{visibility:hidden}
@media(max-width:1024px),(pointer:coarse){
 header{padding:calc(12px + var(--safe-top)) max(16px,var(--safe-right)) 10px max(16px,var(--safe-left));gap:12px}
 .pill{min-height:44px;font-size:10px;padding:10px 12px}.header-actions{gap:7px}
 body:has(#hud:not([hidden])) .brand>span:last-child{display:none}
 .touch-controls{display:flex;position:absolute;bottom:calc(12px + var(--safe-bottom));left:max(14px,var(--safe-left));right:max(14px,var(--safe-right));gap:8px;justify-content:space-between;pointer-events:auto}
 .touch-controls button{flex:1;max-width:100px;min-width:44px;width:auto;height:64px;border:1px solid #fff0ce99;border-radius:14px;background:#292039e8;touch-action:none;font-size:12px;font-weight:800}
 .touch-controls button:last-child{background:#dded77;color:#292039}.touch-controls button:nth-child(3){border-color:#ec93d2}
 .race-bottom{bottom:calc(98px + var(--safe-bottom));left:max(16px,var(--safe-left));right:max(16px,var(--safe-right))}
 .race-top{top:calc(86px + var(--safe-top));left:max(16px,var(--safe-left));right:max(16px,var(--safe-right))}
 .position strong{font-size:50px}.position>span{font-size:20px}.position small{font-size:10px;letter-spacing:1px}
 .lap{gap:5px;max-width:46%}.lap b{font-size:21px}.lap>span{font-size:17px}.race-top .lap small{font-size:9px;letter-spacing:.5px;max-width:190px}#place-name{font-size:9px}
 #pause{top:calc(80px + var(--safe-top));min-width:64px}
 #pack-status{top:calc(159px + var(--safe-top));left:max(16px,var(--safe-left));font-size:9px;max-width:47%;line-height:1.45;padding:6px 9px}
 #road-legend{top:auto;bottom:calc(81px + var(--safe-bottom));font-size:8px;gap:12px;padding:4px 10px}
 #minimap{width:100px;height:83px}.speed{width:135px}.speed strong{font-size:36px}.speed small{font-size:9px;line-height:1.4;display:block}
 .race-bottom #item{right:0;bottom:100px;min-width:100px;width:116px;min-height:100px;padding:9px;gap:5px}#item-icon{font-size:30px}#item-name{font-size:10px;line-height:1.3;letter-spacing:.3px}#item-hint{font-size:9px;opacity:1}
 #item-event{top:calc(213px + var(--safe-top));padding:9px 14px;max-width:90%;width:max-content}#item-event strong{font-size:19px}#item-event span{font-size:10px;line-height:1.4;letter-spacing:.4px}
 #attack-warning{top:calc(291px + var(--safe-top));max-width:90%;font-size:11px;line-height:1.4;padding:8px 12px}
 #stair-warning{top:calc(213px + var(--safe-top));max-width:220px;font-size:10px}#hud:has(#item-event:not([hidden])) #stair-warning{top:calc(355px + var(--safe-top))}
 #power-feedback{top:34%;font-size:11px}#announcement{font-size:16px;padding:0 18px}
 #tour{padding-top:var(--safe-top)}.tour-controls{bottom:calc(16px + var(--safe-bottom));max-height:55dvh;overflow:auto}.tour-controls .pill,#tour-stops button{min-height:44px;font-size:10px}#tour-stops{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:750px){
 #lobby{padding-top:calc(94px + var(--safe-top));padding-left:max(18px,var(--safe-left));padding-right:max(18px,var(--safe-right));gap:24px}
 #lobby .intro h1{font-size:clamp(46px,15vw,76px);margin:18px 0 25px;max-width:100%}#lobby .intro h1 i{right:0}
 #lobby .intro .eyebrow{font-size:9px;letter-spacing:.7px;line-height:1.5}#lobby .intro .tagline{font-size:clamp(20px,5.8vw,26px)}
 #lobby .map-heading h2,#lobby .garage h2,.race-options h2{font-size:11px;line-height:1.5;letter-spacing:.7px}
 .map-card strong{font-size:13px!important}.map-card small{font-size:9px!important}.map-card em{font-size:9px!important;line-height:1.5;min-height:27px}.map-card>span{padding:11px}
 .option-buttons small{font-size:10px;letter-spacing:.3px}.option-buttons button{font-size:14px}.option-group p{font-size:12px}
 .garage .racer{flex-basis:154px;min-height:192px}.racer strong{font-size:12px}.racer small,.racer em{font-size:9px}.vehicle-detail{font-size:12px}
 .garage .launch button{min-height:54px}.garage .launch>span{font-size:11px}
 .course-preview>p,.preview-top,.preview-bottom,.preview-legend{font-size:9px!important;letter-spacing:.3px}#preview-open{font-size:11px;min-height:46px}
 .controls-list p{flex-wrap:wrap;gap:6px}.controls-list span{flex-basis:100%;max-width:none;margin-left:0}.guide-note,.road-guide{font-size:12px;line-height:1.65}
 dialog{padding:24px 20px}dialog h2{font-size:34px}.tour-heading{top:calc(88px + var(--safe-top));right:16px}.tour-controls>div:last-child{flex-wrap:wrap}.tour-controls>div:last-child button{flex:1;min-width:90px}
}
@media(max-width:450px){.option-buttons:not(.levels){display:grid;grid-template-columns:1fr}.option-buttons:not(.levels) button{min-height:62px;padding:11px 14px}.option-buttons:not(.levels) b{font-size:15px}.option-buttons:not(.levels) small{display:inline-block;float:right;max-width:50%;text-align:right;font-size:10px;line-height:1.6;margin-top:0}.header-actions .pill{font-size:9px;padding:9px}.brand-mark{width:45px;height:44px;font-size:36px;line-height:30px}}
@media(max-height:680px) and (orientation:portrait){
 .race-top{top:calc(75px + var(--safe-top))}.lap{gap:3px}.lap small#place-name,.lap small#race-format{display:none}#pause{top:calc(73px + var(--safe-top))}#pack-status{top:calc(143px + var(--safe-top));font-size:8px}
 #item-event{top:calc(190px + var(--safe-top))}#item-event strong{font-size:16px}#attack-warning{top:calc(263px + var(--safe-top));font-size:10px}
 .race-bottom #item{bottom:0;min-height:86px;width:103px}#minimap{display:none}.speed{width:120px}#stair-warning{top:calc(185px + var(--safe-top))}
 .touch-controls button{height:56px}.race-bottom{bottom:calc(90px + var(--safe-bottom))}#road-legend{bottom:calc(73px + var(--safe-bottom))}
}
@media(max-height:500px) and (orientation:landscape){
 header{padding-top:calc(6px + var(--safe-top));padding-bottom:4px}.brand>span:last-child{display:none}.brand-mark{width:42px;height:40px;font-size:33px;line-height:28px}.pill{min-height:40px}
 #lobby{padding-top:calc(70px + var(--safe-top))}.race-top{top:calc(61px + var(--safe-top))}.position strong{font-size:36px}.position small{font-size:9px}.lap b{font-size:18px}.lap>span{font-size:14px}.lap small#place-name,.lap small#race-format{display:none}
 #pause{top:calc(7px + var(--safe-top));min-height:40px}#pack-status{top:calc(117px + var(--safe-top));font-size:8px;max-width:26%}
 .touch-controls{bottom:calc(10px + var(--safe-bottom));gap:12px}.touch-controls button{height:52px;max-width:80px}.touch-controls button:nth-child(3){margin-left:auto}.touch-controls button:nth-child(2){margin-right:10%}
 .race-bottom{bottom:calc(75px + var(--safe-bottom))}.speed{width:120px}.speed strong{font-size:27px}.speed small{font-size:8px}#minimap{display:none}.race-bottom #item{bottom:0;width:115px;min-height:80px;padding:6px;gap:2px}#item-icon{font-size:22px}#item-name,#item-hint{font-size:9px}
 #road-legend{top:calc(56px + var(--safe-top));bottom:auto;font-size:8px}
 #item-event{top:calc(94px + var(--safe-top));left:50%;max-width:48%;padding:7px 10px}#item-event strong{font-size:16px}#item-event span{font-size:9px}#attack-warning{top:calc(169px + var(--safe-top));max-width:48%;font-size:10px}
 #announcement{top:45%;font-size:14px}#stair-warning{top:calc(152px + var(--safe-top));max-width:24%;font-size:9px}#hud:has(#item-event:not([hidden])) #stair-warning{top:calc(152px + var(--safe-top))}
 .tour-heading{top:65px;max-width:38%}.tour-heading h2{font-size:23px}.tour-controls{left:auto;right:max(16px,var(--safe-right));transform:none;width:52%;max-height:70dvh;padding:10px}#tour-stops{gap:4px;margin-bottom:7px}.tour-controls input{margin:6px 0}
}

/* Keep the full game name legible across garage layouts. */
.brand .brand-mark{display:grid;place-items:center;padding:0;letter-spacing:-.08em;line-height:1}
#lobby .intro h1.game-title{font-size:clamp(54px,6.7vw,101px);line-height:.9;letter-spacing:-.075em;max-width:530px}
.game-title span:nth-child(2){font-size:.65em;letter-spacing:-.06em;white-space:nowrap;margin-top:.12em}
.game-title .title-kart{font-size:.34em;letter-spacing:.16em;color:var(--orange);margin-top:.4em;text-shadow:2px 2px 0 #292039}
@media(max-width:750px){#lobby .intro h1.game-title{font-size:clamp(48px,14.6vw,76px)}}