/* One task per screen. Sticky controls are outside scrolling content. */
#panel .hubHeader{gap:8px}#hubBack{flex:0 0 auto;min-height:44px;padding:4px 6px!important;font:18px VT323,monospace!important;color:#b8f5df}#panel:has(#hubBack:not([hidden])) .hubWordmark{max-width:100px;object-fit:contain}#panel .hubScroll{min-height:0;overscroll-behavior:contain}#panel .playGrid{display:block}#panel #homePilotCard{display:none!important}
#playHome,#modeDetail{max-width:450px;margin:0 auto}#playHome>button,#modeDetail>button{display:block;width:100%;min-height:50px;margin:12px 0;font:23px VT323,monospace}#playHome #solo{font-size:17px;min-height:44px;margin-top:22px}#modeHero{display:block;width:160px;height:85px;object-fit:contain;image-rendering:pixelated;margin:0 auto 8px}#modeDetail{text-align:center}#modeName{font:32px VT323,monospace;margin:0 0 8px}#modeDescription{font-size:18px!important;line-height:1.25;color:#aac5ca;max-width:330px;margin:8px auto 20px!important}#panel[data-flow=mode] #playHeading{display:none}
#panel #modeList .modePicker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#panel #modeList .modePicker button{grid-column:auto;grid-template-columns:22px minmax(0,1fr);min-height:82px!important}#modeList .modePicker small{font-size:15px!important}#panel[data-flow=create] #roomsPanel>p,#panel[data-flow=create] #roomList,#panel[data-flow=create] #refreshRooms,#panel[data-flow=create] #roomsPanel>details:last-of-type{display:none}#panel[data-flow=create] #roomsPanel>details:first-of-type>summary{display:none}#panel[data-flow=create] #roomsPanel h2{font-size:26px}
#lobbyNext{font:23px VT323,monospace;color:#8ff0c5;margin:8px 0}#lobby .lobbyWaiting{padding:8px 0}#lobby #roster{max-height:180px;overflow:auto}#lobby #ready,#lobby #leaveLobby{position:sticky;bottom:0;min-height:48px;z-index:2}#lobby #ready{min-width:50%;background:#70edbd}#lobby #fillBotsNow{font-size:18px;min-height:44px}#lobby #lobbyBotPolicy,#lobby #lobbyHostHint{font-size:16px}#lobby #selectedRoom{margin:0 0 8px}#panel[data-flow=lobby] #status{font-size:16px;line-height:1.2}#panel[data-flow=lobby] .hubNav{display:none}
#gameMenu{left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:min(330px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:6px}#gameMenu>h2{flex:none;font-size:26px}#gameMenu>.hint{margin:0 0 4px;font-size:15px}#gamePrimary{display:grid;gap:8px}#gamePrimary>button,#gameExit>button,#gameOptions>button{display:block;width:100%;min-height:44px;padding:8px 10px;margin:0!important;font:21px VT323,monospace!important;text-align:left}#gamePrimary #scoreButton{width:100%;min-height:44px}#gameOptions{min-height:0;overflow:auto;overscroll-behavior:contain;max-height:calc(100dvh - 190px)}#gameOptions>button{margin-bottom:8px!important}#gameOptionsBack{position:sticky;top:0;z-index:1;background:#173947;color:#dcf7ed}#gameOptions details{padding:8px 0}#gameOptions p{font-size:16px;line-height:1.25}#gameExit{flex:none;padding-top:8px;border-top:1px solid #36545f}#gameMenu #leave{width:100%;background:#3d2531;color:#ffd5cb;border:1px solid #a16b70}
#matchCard.resultFlow .matchInner{display:flex;flex-direction:column;width:min(620px,100%);height:min(780px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden;padding:12px;box-sizing:border-box}#resultHeader{flex:none;text-align:center}#matchCard.resultFlow #matchArt,#matchCard.resultFlow #matchDetail,#matchCard.resultFlow #podiumHeading{display:none}#matchCard.resultFlow #matchTitle{font-size:24px;margin:0;color:#c1dadb}#resultPhase{font:30px VT323,monospace;margin:4px 0 10px;color:#80f0c7}#resultPhase:focus{outline:0}.resultPage{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}#matchCard.resultFlow .resultActions{position:static;flex:none;padding:10px 0 0;margin:0;background:#091b28;grid-template-columns:1fr 1fr}#matchCard.resultFlow #resultNext{min-height:46px;grid-column:1/-1}#matchCard.resultFlow #resultNext.secondary{background:transparent!important;color:#a6c7c5!important;border:0;min-height:32px;font-size:17px}#matchCard.resultFlow #resultSkip{position:absolute;right:24px;top:22px;width:auto;min-height:32px;font:15px VT323,monospace;background:transparent;border:0;padding:3px}#matchCard.resultFlow #resultScores{display:block;width:100%;min-height:44px;font:20px VT323,monospace;background:#173943;color:#dcf7ed;margin:8px 0}#matchCard.resultFlow #matchClose{background:#233540;color:#d4e3e2}#matchCard.resultFlow #replayMatch{background:#76eec1;color:#0b3028}#matchCard.resultFlow #replayNotice:empty{display:none}#matchCard.resultFlow #replayNotice{grid-column:1/-1;margin:0;font-size:16px}
#matchCard.resultFlow .progressionAward{margin:0;padding:10px;border:0;background:transparent}#matchCard.resultFlow .progressionAward h3{display:none}#matchCard.resultFlow .progressionAward>strong{font:56px VT323,monospace;color:#ffe29a}#matchCard.resultFlow .progressionAward progress{height:18px;width:100%;accent-color:#75e7be}#matchCard.resultFlow .rewardItems{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:10px 0}#matchCard.resultFlow .rewardItem{flex:0 0 min(240px,85%);scroll-snap-align:center;min-width:0;padding:8px;box-sizing:border-box}#matchCard.resultFlow .rewardItem canvas{width:100px;height:auto}#matchCard.resultFlow .rewardItem strong{font-size:23px}#matchCard.resultFlow #accountReminder{padding:8px;margin-top:12px;font-size:16px}#matchCard.resultFlow #accountReminder strong{font-size:18px}#matchCard.resultFlow #accountReminder p{font-size:15px;margin:4px 0}#matchCard.resultFlow #accountReminder button{min-height:40px;font-size:18px}
#matchCard.resultFlow #podium{gap:6px;margin:8px 0}#matchCard.resultFlow .podiumPlace{padding:7px 3px;min-width:0}#matchCard.resultFlow .podiumPlace img,#matchCard.resultFlow .podiumEquipment{max-height:54px;width:100%;object-fit:contain}#matchCard.resultFlow .podiumPlace strong,#matchCard.resultFlow .pilotProfileButton{font:18px VT323,monospace!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px!important}#matchCard.resultFlow .podiumPlace small{font-size:15px}#matchCard.resultFlow #myResult{display:block;padding:8px;margin:8px 0;border:1px solid #6adbba;background:#163a3e;font:22px VT323,monospace}#matchCard.resultFlow #mvpResult{padding:4px;margin:0;font-size:18px}#matchCard.resultFlow #mvpResult>p,#matchCard.resultFlow #mvpResult>details{display:none}
#rankTicker{position:relative;margin:10px 0 0;border-top:1px solid #284451}#rankWindow{height:120px;overflow:hidden}.rankLine{height:30px;display:grid;grid-template-columns:34px minmax(0,1fr) 60px;align-items:center;gap:7px;font:18px VT323,monospace;border-bottom:1px solid #1a3440;box-sizing:border-box}.rankLine span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rankLine small{text-align:right;font-size:16px}.rankLine.me{color:#84eec9}#rankTrack{will-change:transform}.scrollRanks #rankTrack{animation:rankScroll var(--rank-time) linear infinite}.scrollRanks.paused #rankTrack,#rankWindow:hover #rankTrack,#rankWindow:focus-within #rankTrack{animation-play-state:paused}#rankPause{font:14px VT323,monospace;min-height:30px;background:transparent;color:#9abcbf;border:0;padding:4px 8px;display:block;margin-left:auto}@keyframes rankScroll{to{transform:translateY(var(--rank-distance))}}
.badgeCollection,.rewardBadges{display:flex;gap:8px;flex-wrap:wrap}.levelBadge{display:grid;justify-items:center;flex:0 0 90px;padding:8px 3px;background:#102b37;border:1px solid #365461;box-sizing:border-box}.levelBadge canvas{image-rendering:pixelated;width:64px;height:64px}.levelBadge strong{font:18px VT323,monospace}.levelBadge small{font:15px VT323,monospace;color:#a2c3c7}.levelBadge.locked{opacity:.4}.rewardBadges .levelBadge{animation:rewardPop .65s ease-out both}.rewardBadges{margin:12px 0;justify-content:center}
@media(max-height:500px){#gameMenu{padding:10px;gap:3px}#gameMenu>h2{font-size:22px}#gameMenu>.hint{display:none}#gamePrimary{gap:5px}#modeHero{width:90px;height:45px}#playHome>button,#modeDetail>button{margin:6px 0;min-height:44px}#matchCard.resultFlow .matchInner{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);padding:8px}#matchCard.resultFlow{padding:6px}#resultHeader{display:flex;justify-content:center;align-items:center;gap:12px}#resultPhase{font-size:24px;margin:0}#matchCard.resultFlow .resultActions{padding-top:5px;grid-template-columns:1fr 1fr 1fr}#matchCard.resultFlow #resultNext{grid-column:auto;min-height:44px}#matchCard.resultFlow #resultSkip{top:6px;right:15px}#resultPage-rewards .progressionAward>strong{font-size:38px}#matchCard.resultFlow .rewardItem{display:grid;grid-template-columns:70px 1fr;flex:0 0 240px}#matchCard.resultFlow .rewardItem canvas{width:70px;grid-row:1/3}#matchCard.resultFlow .levelBadge canvas{width:40px;height:40px}#resultPage-podium{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;align-content:start}#resultPage-podium #podium{grid-column:1;grid-row:1/4}#resultPage-podium #myResult,#resultPage-podium #mvpResult{grid-column:1}#resultPage-podium #rankTicker{grid-column:2;grid-row:1/5;margin:0}#resultPage-podium #resultScores{grid-column:2;margin:0!important}}
@media(prefers-reduced-motion:reduce){#rankTrack{animation:none!important;transform:none!important}#rankWindow{overflow:auto}.levelBadge{animation:none!important}#rankPause{display:none}}


#gamePrimary #scoreButton,#gamePrimary #gameOptionsOpen{background:#193943;color:#d2eee5;border:1px solid #4d777a}#reviewScores{max-height:85dvh;overflow:auto;background:#0d2531;color:#e2f5ed;border:1px solid #69bda6}#reviewScoresClose{position:sticky;bottom:0}#matchCard.resultFlow .reviewStamp{flex:none;margin:0;font:13px VT323,monospace}
#matchCard.resultFlow .rewardItems{flex-flow:row nowrap;align-items:stretch}#matchCard.resultFlow .rewardItem{flex-shrink:0}#rankPause{min-height:44px}#matchCard.resultFlow .rewardBadges .levelBadge{flex-basis:110px}#matchCard.resultFlow .rewardBadges .levelBadge strong{white-space:nowrap}
#trainingRecap{text-align:center;padding:24px 8px}#trainingRecap>img{width:180px;height:100px;object-fit:contain;image-rendering:pixelated}#trainingRecap h3{font:30px VT323,monospace;color:#a6ecda}.trainingStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.trainingStats>div{padding:12px 4px;background:#132d39}.trainingStats .resultCounter{font:34px VT323,monospace;color:#ffe099}.trainingStats small{display:block;font:17px VT323,monospace}#trainingRecap>p{font:18px/1.3 VT323,monospace;color:#94b6bf;margin:24px auto;max-width:300px}@media(max-height:500px){#trainingRecap{padding:4px;display:grid;grid-template-columns:160px 1fr;align-items:center}#trainingRecap>img{grid-row:1/3;width:140px;height:80px}#trainingRecap h3{margin:4px}#trainingRecap>p{grid-column:1/-1;margin:8px auto;max-width:500px}}
#matchCard.resultFlow .rewardItems{justify-content:flex-start;scroll-padding:8px}.resultFlow .rewardItem canvas{justify-self:center}
@media(max-height:500px){#matchCard.resultFlow .progressionAward{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5px 12px;padding:4px}#matchCard.resultFlow .progressionAward>strong{grid-column:1;grid-row:1}#matchCard.resultFlow .progressionAward>p:not(.rewardHeading){grid-column:1;grid-row:2;margin:0}#matchCard.resultFlow .progressionAward>progress{grid-column:1;grid-row:3}#matchCard.resultFlow .progressionAward>.rewardBadges{grid-column:1;grid-row:4;margin:0}#matchCard.resultFlow .progressionAward>.rewardHeading{grid-column:2;grid-row:1;margin:0;font-size:18px}#matchCard.resultFlow .progressionAward>.rewardItems{grid-column:2;grid-row:2/5;margin:0}#matchCard.resultFlow .progressionAward>.rewardNext{grid-column:2;grid-row:1/5}#matchCard.resultFlow .progressionAward>button{grid-column:2;grid-row:5;min-height:40px;font-size:17px}#matchCard.resultFlow .rewardItem{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-basis:100%}#matchCard.resultFlow .rewardItem strong{font-size:20px}#matchCard.resultFlow .rewardItem canvas{width:75px}#matchCard.resultFlow .rewardBadges .levelBadge{flex-basis:85px;padding:3px}.rewardBadges .levelBadge strong{font-size:15px}}
#lobbyCountdown:empty{display:none!important}#roomAdvanced{margin:10px 0}#roomAdvanced>summary{min-height:44px;padding:10px 0;box-sizing:border-box}#panel[data-flow=create] #createRoom{position:sticky;bottom:0;display:block;width:100%;min-height:48px;margin:10px 0 0;z-index:2}.lobbyWaiting:has(#lobbyCountdown:empty){min-height:0}#lobby #leaveLobby{font-size:18px}