/* One decision per screen, with scrolling retained only as an accessibility fallback. */
body:not([data-screen=playing]){overflow:hidden}
body:not([data-screen=playing]) main{height:100dvh;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px;max-width:800px}
body:not([data-screen=playing]) header{height:44px;min-height:44px;gap:8px}
body:not([data-screen=playing]) .tag,body:not([data-screen=playing]) .bottom,body:not([data-screen=playing]) .rinklabel{display:none}
body:not([data-screen=playing]) #brand{font-size:16px;letter-spacing:1px;gap:7px}body:not([data-screen=playing]) #brand small{font-size:6px;margin-top:3px}
body:not([data-screen=playing]) .brand-orbit{font-size:26px}
body:not([data-screen=playing]) .game{margin:0!important;width:100%;max-width:none;min-height:0;flex:1;display:flex;flex-direction:column}
body:not([data-screen=playing]) #viewport{height:auto!important;min-height:0!important;flex:1;touch-action:pan-y}
body:not([data-screen=playing]) .cockpit{border-width:5px;touch-action:pan-y}
body:not([data-screen=playing]) .cockpit-top{padding:7px 12px;min-height:29px;flex:none;font-size:9px}
body:not([data-screen=playing]) .setup-progress,body:not([data-screen=playing]) .cockpit-bottom{display:none}
body:not([data-screen=playing]) #setupScroller{padding:12px 16px;min-height:0;flex:1;overflow:auto;touch-action:pan-y}
#modeScreen,#stageStep,#racketStep,#storyScreen,#encounterScreen,#lobbyEntry,#roomScreen,#roomSettingsScreen{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px;padding:0}
#setupScroller .back{min-height:40px;padding:7px 10px;margin:0;align-self:flex-start;font-size:12px}
#setupScroller .mission-title{margin:0}#setupScroller .mission-title small{font-size:9px}#setupScroller .mission-title h2{font-size:23px;margin:3px 0;line-height:1.25}#setupScroller .mission-title p{font-size:12px;margin:2px 0;line-height:1.4}
#setupScroller .field-label{font-size:12px;gap:5px;margin:0;min-width:0}#setupScroller .field-label input,#setupScroller .field-label select{min-height:44px;padding:8px 10px;font-size:16px}
#setupScroller .primary,#setupScroller .secondary{min-height:44px;padding:9px 14px;font-size:14px;width:100%;margin:0;flex:none}
#setupScroller .hint{font-size:11px;line-height:1.4;margin:0;color:#b1c8d3}
#setupScroller .ui-error{margin:0;line-height:1.4;font-size:12px}
#setupScroller .ui-error:empty{display:none}
#setupScroller .mode-options{margin:4px 0;gap:10px;flex:1;justify-content:center}
#setupScroller .mode-options button{padding:14px 16px;gap:7px;min-height:80px}#setupScroller .mode-options b{font-size:21px}#setupScroller .mode-options small{font-size:12px}#setupScroller .mode-options span{display:none}
#setupScroller #racketStep .rackets{margin:0;gap:8px;flex:none}
#setupScroller #racketStep .rackets button{min-height:88px;padding:9px 4px;gap:6px}
#setupScroller #racketStep .rackets button>div{gap:3px}#setupScroller #racketStep .rackets b{font-size:13px}#setupScroller #racketStep .rackets small{font-size:10px;line-height:1.2}
#setupScroller .racket-spec{display:none}#setupScroller .racket-icon{width:28px;height:28px;margin:0}
#setupScroller .racket-icon.diamond{width:25px;height:25px;margin:1px}
.match-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#scoreSettings .field-label{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
#scoreSettings .field-help{display:none}#targetScore{max-width:none}
#setupScroller .launch-summary{margin:0;padding:0;border:0;background:none;font-size:12px;line-height:1.4}
#setupScroller .launch-summary>span,#setupScroller .launch-summary p{display:none}#setupScroller .launch-summary small{font-size:12px}
#setupScroller #start,#setupScroller #storyPrepare{margin-top:auto}
#setupScroller .course-title h2{font-size:23px;margin:2px 0}
#setupScroller .demo-frame{margin:0;flex:none}#setupScroller #courseDemo{height:clamp(88px,19dvh,200px)}
#setupScroller .demo-caption{font-size:11px;line-height:1.3;min-height:0;margin:0}
#setupScroller .course-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;overflow:visible}
#setupScroller .course-tabs .stage{min-width:0;min-height:44px;padding:5px}
#setupScroller .course-tabs .stage span{display:none}#setupScroller .course-tabs .stage b{font-size:12px}
#setupScroller .course-facts{font-size:10px;margin:0;gap:8px;line-height:1.4}
#setupScroller .console-readout{margin:0;padding:8px 10px}#setupScroller .console-readout>span{display:none}#setupScroller #stageInfo{font-size:12px;line-height:1.4;margin:0}
#setupScroller #nextSetup{margin-top:auto}
#planetRoute{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0;align-content:center;flex:1;min-height:0}
#planetRoute button{min-height:72px;gap:1px;padding:4px;border-radius:12px}
#planetRoute button img{width:clamp(34px,6dvh,64px);height:clamp(34px,6dvh,64px)}#planetRoute button strong{font-size:13px}#planetRoute button small{font-size:10px}
#planetRoute button:last-child:nth-child(9){grid-column:auto}
#journeyProgress,#journeyResult{margin:0;font-size:12px;line-height:1.4}
#encounterCard{padding:12px;gap:14px;align-items:center;flex:none}#encounterPortrait{width:72px;height:72px;border-radius:18px}
#encounterName{font-size:24px;margin:5px 0}#encounterTitle{font-size:11px}#encounterRule{margin:0;font-size:12px}
.encounter-mission{padding:12px;border:1px solid #42687b;border-radius:12px;background:#102a39}
.encounter-mission small{font-size:11px;color:#a7e8d5}.encounter-mission p{font-size:13px;line-height:1.65;margin:5px 0 0}
.story-notes{font-size:12px;line-height:1.5}.story-notes summary{cursor:pointer;min-height:40px;display:flex;align-items:center;color:#b2d7e4}.story-notes summary:before{content:'＋';margin-right:8px}.story-notes[open] summary:before{content:'−'}.story-notes p,.story-notes blockquote{margin:5px 0}
#cupDifficultySettings{padding:10px 12px;margin:0;border-radius:10px}#cupDifficulties{display:block;width:100%}
#setupScroller .join-box{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;margin:0}#setupScroller .join-box h3,#joinLobbyFlow{grid-column:1/-1}#setupScroller .join-box h3{font-size:15px;margin:0}
#setupScroller .room-code{margin:0;padding:9px}#setupScroller .room-code b{font-size:28px;margin:6px 0}#setupScroller .room-code small{font-size:10px}
#roomPlayers{display:grid;grid-template-columns:1fr 1fr;gap:8px}#roomPlayers .room-player{margin:0;display:flex;flex-direction:column;gap:6px;padding:10px}
#roomSummary,#roomStatus{font-size:12px;margin:0;min-height:0}#setupScroller #roomResult{margin:0;padding:8px;font-size:15px}
#roomGameSettings{margin:0;padding:10px;display:flex;flex-direction:column;gap:10px}#roomGameSettings legend{font-size:12px}#roomGameSettings small{font-size:10px}
#roomScreen #roomStart,#roomScreen #roomReady,#roomSettingsScreen #renamePlayer{margin-top:auto}
#roomScreen #roomLeave{margin-top:0}#roomSettingsScreen #roomApplySettings{margin:0}
body:not([data-screen=playing]) #error{position:fixed;bottom:0;left:0;right:0;z-index:30;font-size:9px;padding:3px 8px;background:#281f18e8;pointer-events:none}
@media(max-width:380px){body:not([data-screen=playing]) #setupScroller{padding:8px 10px}#setupScroller .mission-title h2{font-size:21px}#setupScroller #racketStep .rackets button{min-height:78px}#setupScroller #racketStep .rackets small{font-size:9px}#setupScroller #courseDemo{height:clamp(75px,15dvh,110px)}#encounterPortrait{width:60px;height:60px}.encounter-mission{padding:9px}.encounter-mission p{font-size:12px}}
@media(max-height:700px){#setupScroller .home-orbit{height:140px;width:210px}#homeScreen .home-rink{top:35px;height:85px}#homeScreen .home-caption{margin-top:10px}#setupScroller .mode-options button{padding:10px 14px;min-height:70px}#setupScroller .mode-options b{font-size:19px}#setupScroller #courseDemo{height:clamp(80px,16dvh,110px)}}
@media(orientation:landscape) and (max-height:500px){
 body:not([data-screen=playing]) main{padding:4px 8px;gap:4px}body:not([data-screen=playing]) header{height:36px;min-height:36px}body:not([data-screen=playing]) #brand small{display:none}body:not([data-screen=playing]) .cockpit-top{display:none}body:not([data-screen=playing]) #setupScroller{padding:7px 12px}
 #racketStep,#stageStep{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;grid-template-rows:auto auto auto auto 1fr}
 #racketStep{grid-template-areas:'back title' 'cards fields' 'summary summary' 'start start' 'hint hint'}
 #backSetup{grid-area:back}#racketStep .mission-title{grid-area:title}#racketStep .rackets{grid-area:cards}#racketStep .match-options{grid-area:fields}#racketStep .launch-summary{grid-area:summary}#start{grid-area:start}#racketStep>.hint{grid-area:hint}#setupError{grid-column:1/-1}
 #setupScroller #racketStep .rackets button{min-height:78px}#racketStep .field-help{display:none}
 #stageStep{grid-template-areas:'back title' 'demo tabs' 'demo facts' 'caption info' 'next next' 'hint hint'}
 #stageBack{grid-area:back}#stageStep .course-title{grid-area:title}#stageStep .demo-frame{grid-area:demo}#demoCaption{grid-area:caption}#stageStep .course-tabs{grid-area:tabs}#stageStep .course-facts{grid-area:facts}#stageStep .console-readout{grid-area:info}#nextSetup{grid-area:next}#nextHint{grid-area:hint}#setupScroller #courseDemo{height:100px}
 #modeScreen{display:grid;grid-template-columns:1fr 2fr;gap:8px}#modeScreen .mode-options{grid-column:2;grid-row:1/5;display:flex;flex-direction:row;gap:6px}#setupScroller .mode-options button{flex:1;min-width:0;padding:8px}#setupScroller .mode-options b{font-size:16px}#setupScroller .mode-options small{font-size:11px}
 #planetRoute{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}#planetRoute button img{width:32px;height:32px}#planetRoute button{min-height:65px}
 #encounterScreen{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}#encounterBack{grid-column:1/-1}#encounterCard{grid-row:2/4}#storyPrepare{grid-column:1/-1}.encounter-mission{padding:8px}.encounter-mission p{font-size:12px}#cupDifficultySettings{padding:6px}.story-notes{grid-column:1}
 #lobbyEntry{display:grid;grid-template-columns:1fr 1.4fr;gap:6px 14px}#lobbyEntry .join-box{grid-column:2;grid-row:1/5}#lobbyEntry>.hint{grid-column:1/-1}
 #roomSettingsScreen{display:grid;grid-template-columns:1.3fr 1fr;gap:7px 14px}#roomSettingsBack{grid-column:1/-1}#roomSettingsScreen .mission-title{display:none}#roomGameSettings{grid-column:1;grid-row:2/5}
 #homeScreen .home-orbit{display:none}#homeScreen{padding:6px}#gameStart{margin-top:12px!important}
}
#setupScroller .course-tabs .stage:last-child{grid-column:auto}
#stageStep{gap:5px}
#roomScreen{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;grid-auto-rows:min-content;align-content:start}
#roomScreen>*{grid-column:1/-1}#roomScreen #roomReady{grid-column:1;grid-row:6}#roomScreen #roomStart{grid-column:2;grid-row:6}#roomScreen #roomEdit{grid-column:1;grid-row:7}#roomScreen #roomLeave{grid-column:2;grid-row:7;width:100%;align-self:stretch}
#setupScroller #roomScreen .mission-title h2{font-size:20px}
#setupScroller #roomScreen .room-code{padding:5px}#setupScroller #roomScreen .room-code b{font-size:26px;line-height:1.1;margin:3px 0}#setupScroller #roomScreen .room-code small{font-size:10px;line-height:1.2}
#roomPlayers .room-player{padding:7px;gap:3px}#roomScreen #roomStart,#roomScreen #roomReady{margin:0}
/* v0.23 — machined glass, illuminated bevels and a compact cup loadout. */
#setupScroller button:not(.back),#encounterCard,.encounter-mission,#cupDifficultySettings,.join-box{
 box-shadow:inset 0 1px 0 #d8ffff26,inset 0 -3px 0 #020c1766,0 5px 12px #02091440;
 border-top-color:#99c7d080;border-bottom-color:#183340;
}
#setupScroller button:not(.back){transition:transform .12s,box-shadow .12s,background .12s;border-radius:12px}
#setupScroller button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 5px #02091466}
#setupScroller button:focus-visible{outline:2px solid #b8fff1;outline-offset:3px}
#setupScroller button.selected,#setupScroller button[aria-checked=true]{box-shadow:inset 0 1px #e0fff875,inset 0 -3px #124c5966,0 0 16px #87e9d21c;border-color:#9be7d5}
#encounterCard,.encounter-mission{background:linear-gradient(145deg,#25414f,#102434 80%);border-radius:16px}
#encounterCard{align-items:flex-start}#encounterCard>div{min-width:0;flex:1}#encounterCard .story-notes summary{min-height:40px;font-size:12px}
#encounterPortrait{width:88px;height:88px;border:1px solid #7299ab66;box-shadow:0 5px 12px #02091455}
#encounterTitle{letter-spacing:.1em;color:#afd8dd}#encounterName{margin:3px 0}
#cupRacketSettings{padding:0 12px}#cupDifficultySettings .hint{display:none}
#encounterScreen{gap:9px}#encounterFeature{margin:0;line-height:1.5}
#setupScroller #gameStart{width:calc(9em + 16px);max-width:90%;font-size:clamp(25px,5vw,38px);letter-spacing:0;min-height:54px;padding:8px 20px;line-height:1.3;align-self:center}
#gameStart span{font-size:18px}#gameStart{font-variant-caps:all-small-caps}#homeScreen .home-heading h1{margin-bottom:4px}
#setupScroller .mode-options{flex:0;justify-content:flex-start;margin:4px 0 0}
#setupScroller .mode-options button{background:linear-gradient(130deg,#2a4b54,#142936 80%);position:relative;border-left:3px solid #87c5c2}
#setupScroller .mode-options button:after{content:'↗';position:absolute;right:16px;top:16px;color:#9edbd2}
#setupScroller #modeScreen{gap:12px}
.orbit-route{position:relative;isolation:isolate;flex:1;min-height:0;display:flex}
#routeLines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}
#routeLines path{fill:none;stroke:#50778c;stroke-width:2;stroke-dasharray:4 6}#routeLines path.travelled{stroke:#a0e8cd;stroke-dasharray:none;filter:drop-shadow(0 0 4px #75e6c988)}
#planetRoute{width:100%;align-content:start;gap:18px 14px;padding:10px 5px;margin:0}
#planetRoute button{background:linear-gradient(145deg,#294251ee,#112332f5);padding:7px 4px;min-height:100px;position:relative}
#planetRoute button:disabled{opacity:.6}#planetRoute button.next-stop{border-color:#c8f8df;box-shadow:0 0 18px #81e7cb30,inset 0 1px #f0fff8aa}
#planetRoute button img{width:clamp(44px,9dvh,84px);height:clamp(44px,9dvh,84px)}
#planetRoute button small{color:#b8d6dc}#planetRoute button.next-stop small{color:#b6ffdf}
#journeyResult:empty{display:none}#journeySaveNote{margin-top:auto!important}
@media(max-width:600px){#setupScroller #gameStart{font-size:26px;width:250px}#encounterPortrait{width:76px;height:76px}#planetRoute{gap:12px 10px}#planetRoute button{min-height:86px}}
@media(max-height:700px){#planetRoute button{min-height:74px}#planetRoute button img{width:40px;height:40px}#planetRoute{gap:10px 8px;padding:3px}#encounterPortrait{width:64px;height:64px}#encounterCard{padding:8px;gap:10px}#encounterScreen{gap:6px}.encounter-mission{padding:8px}#cupDifficultySettings{padding:5px 12px}#encounterName{font-size:22px}}
@media(orientation:landscape) and (max-height:500px){
 #planetRoute{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px}#planetRoute button{min-height:72px}#planetRoute button img{width:35px;height:35px}
 #encounterScreen{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;gap:6px 14px}#encounterBack{grid-column:1/-1}#encounterCard{grid-column:1;grid-row:2/5}#encounterScreen .encounter-mission{grid-column:2;grid-row:2}#cupDifficultySettings{grid-column:2;grid-row:3}#cupRacketSettings{grid-column:2;grid-row:4}#storyPrepare{grid-column:1/-1}
 #setupScroller #modeScreen{gap:6px}#setupScroller #gameStart{font-size:26px}
}
@media(prefers-reduced-motion:reduce){#setupScroller button{transition:none}}
/* The flight path turns at row ends rather than crossing other planets. */
#planetRoute button:nth-child(4){grid-column:3;grid-row:2}#planetRoute button:nth-child(5){grid-column:2;grid-row:2}#planetRoute button:nth-child(6){grid-column:1;grid-row:2}
@media(orientation:landscape) and (max-height:500px){#planetRoute button:nth-child(4){grid-column:4;grid-row:1}#planetRoute button:nth-child(5){grid-column:5;grid-row:1}#planetRoute button:nth-child(6){grid-column:5;grid-row:2}#planetRoute button:nth-child(7){grid-column:4;grid-row:2}#planetRoute button:nth-child(8){grid-column:3;grid-row:2}#planetRoute button:nth-child(9){grid-column:2;grid-row:2}}
#setupScroller #gameStart{width:clamp(224px,calc(40vw + 16px),320px);font-size:18px;letter-spacing:2px;font-variant-caps:normal;text-transform:lowercase}
/* Visible hull silhouettes remain on the cup detail screen. */
#cupRacketSettings{margin:0;padding:0;border:0;min-width:0}#cupRacketSettings legend{font-size:12px;color:#b7d9dc;padding:0 0 6px 2px}
#cupRacketSettings .rackets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
#cupRacketSettings button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 3px;min-height:106px;background:linear-gradient(145deg,#28404f,#102434);border:1px solid #516e7d;font-size:12px}
#cupRacketSettings button b{font-size:13px}#cupRacketSettings button small{font-size:10px;line-height:1.3;color:#afc7d3}
#setupScroller .racket-icon{display:block;width:48px!important;height:48px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important;position:static!important}
#setupScroller .racket-icon:after,#setupScroller .racket-icon:before{display:none!important}.racket-icon svg{display:block;width:100%;height:100%}
#setupScroller #racketStep .rackets button{min-height:106px}
@media(max-height:700px){#cupRacketSettings button{min-height:87px;padding:4px 2px}#setupScroller .racket-icon{width:36px!important;height:36px!important}#cupRacketSettings button small{font-size:9px}}
@media(orientation:landscape) and (max-height:500px){#cupRacketSettings button{min-height:88px}#cupRacketSettings legend{padding-bottom:2px}}
@media(max-height:700px){#encounterScreen{gap:5px}}
@media(orientation:landscape) and (max-height:500px){
 #encounterScreen{gap:5px 14px}#cupRacketSettings button{min-height:70px;padding:3px 2px;gap:2px}#cupRacketSettings button small{font-size:9px}
 #cupRacketSettings .racket-icon{width:32px!important;height:32px!important}#cupRacketSettings legend{font-size:11px;padding-bottom:2px}
 #cupDifficultySettings .field-label{gap:3px;font-size:11px}#cupDifficultySettings select{min-height:40px;padding:6px 8px}
}
@media(orientation:landscape) and (max-height:500px){#cupRacketSettings .racket-icon{width:28px!important;height:28px!important}}

/* Solar-system qualifier and the next destination, beneath the Sun. */
#setupScroller .mission-title .cup-qualifier{display:inline-block;margin:3px 0 0;padding:3px 10px;border:1px solid #8fd9ca66;border-radius:6px;background:#254b4c;color:#c7f6e8;font-size:12px;letter-spacing:.15em}
#planetRoute:after{content:"Coming Soon..";grid-column:3;grid-row:4;justify-self:end;align-self:start;color:#b2c7d6;font-size:clamp(10px,2.7vw,13px);letter-spacing:.04em;white-space:nowrap;padding-right:2px}
@media(orientation:landscape) and (max-height:500px){#planetRoute:after{grid-column:2;grid-row:3}#setupScroller #storyScreen .mission-title{display:flex;align-items:center;flex-wrap:wrap;gap:3px 12px}#storyScreen .mission-title>small{display:none}#setupScroller .mission-title .cup-qualifier{margin:0}#storyScreen #planetRoute{row-gap:6px}}

/* Join is a separate decision, with credentials and visible UFO shapes together. */
#lobbyEntry>.primary{min-height:68px!important}#lobbyEntry:not([hidden]){display:flex!important;flex-direction:column!important}
.join-credentials{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body[data-join=true] #racketStep .mission-title p,body[data-join=true] #racketStep>.hint,body[data-join=true] .launch-summary{display:none}
@media(max-width:380px){.join-credentials{gap:7px}body[data-join=true] #racketStep{gap:6px}body[data-join=true] #racketStep .rackets button{min-height:82px}body[data-join=true] #racketStep .rackets small{display:none}}
@media(orientation:landscape) and (max-height:500px){body[data-join=true] #racketStep{grid-template-areas:'back title' 'credentials cards' 'start start' 'error error';grid-template-rows:auto auto auto 1fr}#joinCredentials{grid-area:credentials}body[data-join=true] #setupError{grid-area:error}.join-credentials{grid-template-columns:1fr 1fr}body[data-join=true] #racketStep .rackets button{min-height:90px}}
