/* Independent phone layout. Wide pages and all scoring rules retain their own code. */
:root{--header:58px;--gutter:12px;--phone-bottom:calc(62px + env(safe-area-inset-bottom));--fs-hero:28px;--tap:44px;--tap-play:48px;--tap-main:48px}
#game-root{min-height:0;height:100dvh}.briefing-layout{margin:0;padding:12px}.phone-diagram-zoom{position:absolute;right:4px;bottom:4px;min-width:44px;min-height:44px;border-radius:10px;background:#111b48dc;color:var(--moon);font-size:24px}.card-figure{position:relative}.phone-diagram-scroll{overflow:auto}.phone-diagram-viewer .card-figure{width:760px;min-width:760px;min-height:240px;height:auto}.phone-diagram-viewer .card-figure>svg{width:720px;max-height:360px}.phone-diagram-viewer .planet-order span{font-size:16px}.phone-diagram-viewer .planet-order>div:nth-child(even) span{margin-top:0}.phone-diagram-viewer>p{font-size:13px}
html,body{overscroll-behavior:none}button,a,summary{touch-action:manipulation}
.global-hud{height:var(--header);padding:4px 12px;padding-top:max(4px,env(safe-area-inset-top));gap:4px}.brand{font-size:17px;gap:6px}.brand-mark{width:30px;height:30px}.top-actions{gap:4px}.star-total{display:none}#sound,#fullscreen{display:none}
.screen:not(.play-screen){padding:calc(var(--header) + 8px) 12px calc(var(--phone-bottom) + 8px);scroll-padding-bottom:var(--phone-bottom)}
.phone-nav{position:absolute;bottom:0;left:0;right:0;z-index:15;display:flex;gap:6px;padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:#101940f5;border-top:1px solid var(--line)}.phone-nav[hidden]{display:none}.phone-nav button{flex:1;min-height:48px;border-radius:12px;font-size:14px;font-weight:800;color:var(--ink-soft);background:transparent}.phone-nav button[aria-current=page]{background:#f6d98a24;color:var(--moon)}
.home-hero{display:grid;grid-template-columns:1fr 98px;gap:4px;min-height:0;margin:0 0 12px}.hero-copy{padding:0}.hero-copy:before{display:none}.hero-copy h1{font-size:25px;line-height:1.25;margin:0 0 12px}.hero-copy h1 span{display:inline}.hero-actions{gap:6px}.hero-actions>[data-action=atlas],.hero-actions>[data-action=help]{display:none}.hero-actions #continue{min-height:48px;width:100%;font-size:15px}.observatory-scene{height:124px;min-height:0;transform:none}.scene-porthole{width:100%;height:124px;min-height:0;border-width:2px;border-radius:50px 50px 18px 18px}.hero-planet{width:76px;height:76px;top:4px;left:10px;transform:none}.scene-caption{display:none}.companion{width:62px;height:76px;right:0;bottom:0;left:auto}.companion-bubble{position:fixed;top:60px;left:12px;right:12px;max-width:none;z-index:25}.home-bottom,.home-solar>.solar-overview{display:none}
.phone-journey-heading{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:4px 0 8px}.phone-chapters{display:flex;overflow-x:auto;gap:6px;margin:0 0 8px;padding:0 0 4px;scrollbar-width:none}.phone-chapters .chapter-tab{display:block;flex:0 0 auto;min-height:44px;min-width:0;padding:6px 12px;font-size:13px;border-radius:12px;white-space:nowrap}.phone-levels{display:grid;gap:7px}.phone-level{position:relative;display:flex;align-items:center;gap:10px;min-height:62px;width:100%;padding:5px 9px;border:1px solid var(--line);background:var(--paper);border-radius:14px;text-align:left;overflow:hidden}.phone-level.current{border-color:var(--moon)}.phone-level-art{flex:0 0 42px;width:42px;height:42px}.phone-level-art>svg,.phone-level-art>div{width:100%;height:100%}.phone-level-copy{display:grid;gap:3px;min-width:0;flex:1}.phone-level-copy small{font-size:13px;color:var(--ink-mute)}.phone-level-copy strong{font-size:15px;line-height:1.3}.phone-level-state{font-size:13px;color:var(--moon);flex-shrink:0;max-width:48px}.phone-level-state svg{width:20px;height:20px}
.screen-title{margin:0 0 8px;gap:8px}.screen-title h2{font-size:22px}.screen-title .overline{display:none}.atlas-count{font-size:13px}#atlas-solar{display:none}#atlas-filters{display:flex;overflow-x:auto;flex-wrap:nowrap;gap:5px;margin-bottom:8px}#atlas-filters button{flex-shrink:0;min-height:44px;font-size:13px}
.phone-deck,#atlas-cards.phone-deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch;padding:2px 0 8px;margin:0;position:relative;overscroll-behavior-x:contain}.phone-deck>*{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}.phone-deck-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;font-size:13px}.phone-deck-controls button{min-width:48px;min-height:44px;background:var(--paper);border:1px solid var(--line);border-radius:10px}.phone-deck-controls span{color:var(--ink-soft)}
#atlas-cards .knowledge-card{padding:14px;margin:0;animation:none;transform:none}#atlas-cards .card-figure{height:160px;min-height:0;margin:10px 0}#atlas-cards .card-heading strong{font-size:19px}#atlas-cards .knowledge-card>p{font-size:15px;line-height:1.7}#atlas-cards .knowledge-card.locked>svg{height:150px}#atlas-cards .knowledge-card.locked{min-height:290px}
.briefing-screen>.back-button{margin:0 0 8px;min-height:44px}.briefing-layout{display:block}.briefing-art{display:none}.briefing-content{width:100%;max-width:none;padding:0}.briefing-content h2{font-size:24px;margin:4px 0 10px}.rule-heading{padding:10px;font-size:17px}.examples{gap:8px;margin:10px 0}.example{padding:8px 4px;min-width:0}.example>svg,.example button{width:62px;height:62px}.example-cue{font-size:13px;gap:3px;padding:0}.practice-hint{margin:4px 0;min-height:22px}.briefing-content #ready{margin:4px 0;min-height:48px}.rule-details{margin-top:8px}.rule-details summary{min-height:44px}
.result-content{display:block;padding:0;gap:0;max-width:none}.result-summary{padding:4px 8px}.result-summary h2{font-size:25px;margin:5px 0}.result-stars{height:38px;margin:0}.result-stars svg{width:32px;height:32px}.score-medallion{width:140px;height:140px;margin:6px auto}.score-readout{margin:4px 0}.score-readout strong{font-size:36px}.result-progress{margin:8px 0}.result-buttons{display:flex;gap:6px;margin:8px 0}.result-buttons button{min-height:48px;padding:6px 8px;flex:1;font-size:14px}.result-buttons b{display:none}.result-details{margin:0}.result-details summary{min-height:44px}.phone-result-deck #result-card{padding:0}.phone-result-deck .knowledge-card{padding:14px;margin:0;animation:none;transform:none}.phone-result-deck .card-figure{height:130px;min-height:0}.phone-result-deck .bunny-lesson-art{display:none}.phone-result-deck .bunny-lesson{display:block}.phone-result-deck .bunny-speech{padding:10px}.phone-result-deck .bunny-speech:before{display:none}.phone-result-deck .bunny-speech p{font-size:15px}
.chapter-cinematic{padding:0;min-height:0;gap:8px}.chapter-stage{height:150px;width:200px;margin:4px auto}.chapter-art{width:150px;height:150px}.chapter-medal{width:80px;height:80px}.chapter-cinematic h2{font-size:26px;margin:8px 0}.chapter-cinematic>p{font-size:15px;margin:6px auto}.chapter-network{display:none}.earned-badge{margin:6px 0;padding:6px;font-size:14px}.chapter-progress{margin:6px 0}.chapter-options{gap:8px;margin-top:6px}.chapter-options button{min-height:44px}.chapter-cinematic>.action-button{min-height:48px}
.ending-content{padding:0}.ending-content h1{font-size:28px;margin:6px 0}.ending-cosmos{height:220px;margin:0}.ending-farewell{margin:8px 0}.ending-badges{gap:10px;margin:10px 0}.ending-badges>span{width:46px;height:46px}.ending-stats{gap:8px;margin:8px 0}.ending-stats span{font-size:13px}.ending-actions{display:grid;gap:8px}.ending-actions button{min-height:48px}.cosmos-controls{gap:6px}.cosmos-caption{font-size:14px}
dialog{width:calc(100% - 20px);max-width:680px;max-height:calc(100dvh - 20px);padding:14px;margin:auto;overflow:auto;overscroll-behavior:contain}.modal-heading{position:sticky;top:-14px;z-index:5;background:#152052;padding:8px 0;margin:0 0 10px;gap:8px}.modal-heading h2{font-size:21px}.modal-heading button{flex:0 0 44px;width:44px;height:44px;min-height:44px}.modal-bunny .bunny-lesson-art{width:60px}.modal-bunny{margin:6px 0}.modal-bunny .bunny-speech p{font-size:15px}.signal-guide{margin:8px 0;gap:6px}.signal-guide-art{width:64px;height:64px}dialog>.action-button,#modal-content>.action-button{min-height:44px;margin:6px 0}#photo-viewer{max-height:calc(100dvh - 16px)}.photo-viewer-bar{min-height:48px}.photo-viewer-bar button{min-height:44px}.photo-viewer img{max-height:calc(100dvh - 95px)}
.home-screen .observatory-scene{padding:0;min-height:0;align-self:center}.home-screen .scene-porthole{box-shadow:0 0 0 3px #f6d98a66;width:94px;height:108px}.home-screen .companion{width:60px;height:72px;right:0;bottom:0}.home-screen .hero-actions{flex-wrap:nowrap}.home-screen .hero-actions #continue{flex:1;min-width:0;padding:8px 12px;font-size:14px}.home-screen .hero-copy h1{font-size:23px;letter-spacing:0}.home-screen .hero-copy h1 span:after{display:none}.phone-level{min-height:54px}.phone-level-art{width:36px;height:36px;flex-basis:36px}.home-hero{margin-bottom:6px}.brand span{display:inline}.brand .brand-mark{width:28px;height:28px}.knowledge-card [inert]{pointer-events:none}
#atlas-cards.phone-deck{height:calc(100dvh - 294px);min-height:260px}#atlas-cards.phone-deck>.knowledge-card{height:100%;overflow-y:auto}#atlas-cards .card-figure{height:130px;padding:8px}#atlas-cards .knowledge-photo img{height:100px}#atlas-cards .knowledge-photo figcaption{font-size:13px}#atlas-cards .knowledge-photo figcaption strong{font-size:13px}#atlas-cards .card-heading{gap:5px}#atlas-cards .card-heading strong{font-size:18px}#atlas-cards .knowledge-card>p{margin:10px 0 0}.phone-result-deck.phone-deck{max-height:calc(100dvh - 242px)}.phone-result-deck.phone-deck>*{overflow-y:auto}
@media(orientation:landscape) and (max-height:500px){
 :root{--header:0px;--phone-bottom:0px;--gutter:10px}.global-hud{position:absolute;left:8px;right:auto;top:4px;height:44px;z-index:16;padding:0;max-width:200px}.brand{font-size:14px}.brand-mark{width:24px;height:24px}.top-actions #settings{display:none}.screen:not(.play-screen){padding:52px 12px 8px 80px}.phone-nav{left:0;right:auto;top:52px;bottom:0;width:68px;display:flex;flex-direction:column;padding:8px 4px;background:#101940e8;border-right:1px solid var(--line);border-top:0}.phone-nav button{flex:0 0 54px;font-size:13px;padding:4px}.home-screen{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(0,1.5fr);gap:14px}.home-screen[hidden]{display:none}.home-hero{display:flex;flex-direction:column-reverse;justify-content:center;gap:8px;margin:0}.observatory-scene{height:100px;width:100px}.scene-porthole{height:100px}.hero-copy h1{font-size:23px;text-align:center}.phone-journey-heading{font-size:13px;padding:0 0 4px}.phone-chapters{margin-bottom:4px}.phone-chapters .chapter-tab{padding:4px 8px}.phone-levels{grid-template-columns:1fr 1fr;gap:6px}.phone-level{min-height:54px;padding:4px;gap:5px}.phone-level-art{width:30px;height:30px;flex-basis:30px}.phone-level-copy strong{font-size:13px}.phone-level-copy small{font-size:13px}.phone-level-state{max-width:22px;font-size:13px}.phone-level:last-child{grid-column:1/-1}.phone-level:last-child .phone-level-state{max-width:48px}
 .atlas-screen .screen-title{position:absolute;top:5px;left:210px;right:12px;margin:0;height:44px}.atlas-screen .screen-title>.icon-button{display:none}.screen-title h2{font-size:19px}#atlas-filters{margin-bottom:5px}#atlas-cards .knowledge-card{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr auto;gap:4px 14px;padding:10px;min-height:0}#atlas-cards .card-heading{grid-column:2;grid-row:1}#atlas-cards .card-heading strong{font-size:17px}#atlas-cards .card-figure{grid-column:1;grid-row:1/4;height:130px;align-self:center;margin:0}#atlas-cards .knowledge-card>p{grid-column:2;grid-row:2;margin:4px 0;font-size:14px;line-height:1.5}#atlas-cards .voice-button{grid-column:2;grid-row:3;justify-self:start;margin:0;min-height:44px}#atlas-cards .knowledge-card.locked{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;min-height:156px}#atlas-cards .knowledge-card.locked>svg{height:100px;width:140px}.phone-deck-controls{padding:0}.phone-deck-controls button{min-height:44px}
 .briefing-screen>.back-button{display:none}.briefing-layout{height:100%}.briefing-content{display:grid;grid-template-columns:1fr 185px;column-gap:14px;align-content:start}.briefing-content #briefing-number{grid-column:1;font-size:13px}.briefing-content h2{grid-column:1;font-size:21px;margin:2px 0 6px}.briefing-content #briefing-rule{grid-column:1;font-size:15px;padding:6px}.briefing-content #examples{grid-column:1;grid-row:4/7;margin:6px 0}.briefing-content #practice-hint{grid-column:2;grid-row:1/3}.briefing-content #ready{grid-column:2;grid-row:3;margin:0}.briefing-content #briefing-details{grid-column:2;grid-row:4/7;font-size:13px;margin-top:6px}.briefing-content #briefing-details p{font-size:13px;line-height:1.5}.examples .example>svg,.examples .example button{width:54px;height:54px}
 .play-hud{top:4px;left:8px;right:8px;width:auto;transform:none;display:flex;justify-content:space-between;gap:8px;padding:4px 8px;height:58px}.level-indicator{display:none}.active-rule{flex:1;min-width:0;min-height:44px;font-size:15px;padding:4px 8px;gap:5px}.hud-actions{gap:5px}.timer-wrap{width:44px;height:44px}.timer-wrap strong{font-size:17px}.play-bottom{bottom:2px;left:12px;right:12px;height:30px;align-items:center}.chapter-repair{display:none}.play-bottom-right{width:100%;flex-direction:row;justify-content:flex-end;gap:8px}.live-count{flex-direction:row;gap:8px;min-height:28px;padding:0 10px;font-size:13px}.live-count strong{font-size:20px}.judgment{bottom:5px;font-size:15px;left:30%;transform:translateX(-50%)}.countdown strong{font-size:72px}.countdown span{font-size:17px}
 .result-content{position:relative}.phone-result-deck.phone-deck{height:calc(100dvh - 116px);max-height:none}.phone-result-deck>.result-summary{display:grid;grid-template-columns:110px 1fr;gap:3px 8px;text-align:left;padding:2px}.result-summary .overline{grid-column:2;font-size:13px}.result-summary h2{grid-column:2;grid-row:2;font-size:21px}.result-stars{grid-column:2;grid-row:3;height:30px}.score-medallion{grid-column:1;grid-row:1/5;width:105px;height:105px;margin:0}.score-readout{grid-column:1;grid-row:5;margin:0;text-align:center}.score-readout strong{font-size:24px}.score-readout span{font-size:13px}.result-details{grid-column:2;grid-row:4}.result-progress{grid-column:2;grid-row:5;margin:0}.result-buttons{position:absolute;top:4px;left:0;right:0;transform:translateY(-52px);padding-left:132px;height:44px;margin:0}.result-buttons button{min-height:44px}.phone-result-deck .knowledge-card{display:grid;grid-template-columns:140px 1fr;gap:5px 10px;padding:8px}.phone-result-deck .card-heading{grid-column:2}.phone-result-deck .card-heading strong{font-size:17px}.phone-result-deck .card-figure{grid-column:1;grid-row:1/3;height:135px;margin:0}.phone-result-deck .bunny-lesson{grid-column:2;margin:0}.phone-result-deck .bunny-speech{padding:6px}.phone-result-deck .bunny-speech p{font-size:14px;line-height:1.4;margin:0}.phone-result-deck .voice-button{margin:4px 0 0;min-height:44px}.new-card-stamp{display:none}
 .chapter-cinematic{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;text-align:left;padding:0}.chapter-stage{grid-column:1;grid-row:1/5;width:140px;height:140px;margin:0}.chapter-cinematic h2{font-size:23px;margin:0}.chapter-cinematic>p{margin:0;font-size:14px}.chapter-cinematic>.overline{font-size:13px}.chapter-cinematic #chapter-progress{display:none}.chapter-cinematic #chapter-badge{padding:4px;margin:0;font-size:14px}.chapter-cinematic #chapter-next{grid-column:2;min-height:44px;justify-self:stretch}.chapter-options{grid-column:1/-1;justify-content:center;margin:0}.chapter-cinematic #chapter-network{display:none}
 .ending-content{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.ending-content h1{font-size:24px}.ending-kicker{grid-column:1/-1;margin:0;font-size:13px}.ending-cosmos{grid-column:1;grid-row:3/6;height:150px}.cosmos-controls{grid-column:1}.ending-farewell{display:none}.ending-badges{grid-column:2;grid-row:2;margin:0}.ending-stats{grid-column:2;grid-row:3;font-size:13px}.ending-actions{grid-column:2;grid-row:4/7}.ending-actions button{min-height:44px}
 dialog{max-width:760px;max-height:calc(100dvh - 12px);padding:10px 16px}dialog .modal-heading{top:-10px;padding:4px 0;margin-bottom:6px}.modal-heading h2{font-size:20px}.modal-bunny .bunny-lesson-art{height:75px}.modal-bunny .bunny-speech p{font-size:14px;line-height:1.5}.modal-bunny{align-items:center}.signal-guide-art{width:50px;height:50px}.signal-guide{margin:6px 0}#modal[data-kind=pause] #modal-content,#modal[data-kind=settings] #modal-content,#modal[data-kind=phone-more] #modal-content{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}#modal .modal-heading{grid-column:1/-1}#modal-content>.action-button{margin:0;font-size:14px}#modal .settings-note,#modal[data-kind=phone-more] p{grid-column:1/-1;margin:4px 0;font-size:13px}.setting-row{padding:4px 0}.setting-row button{min-height:44px}.keepsake-rows{max-width:330px;margin:auto}.keepsake-row{height:34px}.keepsake-words .bunny-lesson-art{display:none}.keepsake-words p{font-size:13px}.keepsake-kicker,.keepsake-hint{margin:4px 0}
 #atlas-cards.phone-deck{height:calc(100dvh - 164px);min-height:150px}.briefing-layout{height:auto;padding:8px}.phone-diagram-viewer .card-figure{min-height:180px;height:180px}.phone-diagram-viewer .card-figure>svg{height:170px}.phone-diagram-viewer .card-figure .planet-order svg{height:90px}.home-screen .hero-copy h1{font-size:21px;line-height:1.25;margin:0 0 8px}.home-screen .hero-copy h1 span{display:block}.home-screen .home-hero{gap:4px}
}
/* Keep the phone result in its own three-row layout, independent of wide grid areas. */
#result-screen .result-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:minmax(0,1fr) 48px 48px;height:calc(100dvh - 158px);margin:0;padding:8px;gap:4px;max-width:none;min-height:0;overflow:hidden}
#result-screen .phone-result-deck{height:100%;max-height:none;min-height:0;padding:0;grid-row:1;grid-column:1}
#result-screen .phone-result-deck>*{height:100%;min-height:0;overflow-y:auto;grid-area:auto}
#result-screen .phone-deck-controls{grid-row:2;grid-column:1}
#result-screen .result-buttons{position:static;transform:none;grid-row:3;grid-column:1;display:flex;flex-wrap:nowrap;margin:0;padding:0;height:48px;background:none;gap:5px}
#result-screen .result-buttons .action-button,#result-screen .result-buttons #next{flex:1 1 0;min-width:0;min-height:44px;order:0;padding:5px;font-size:14px;letter-spacing:0}
#result-screen #result-title{font-size:24px;line-height:1.2;margin:5px 0;letter-spacing:.03em}
#result-screen .result-stars{height:38px;margin:3px 0;align-items:center;gap:6px}
#result-screen .result-stars span,#result-screen .result-stars span:nth-child(2){width:32px;height:32px;margin:0}
#result-screen .result-stars svg{width:100%;height:100%}
#result-screen .score-medallion{width:104px;height:104px;margin:3px auto}
#result-screen .score-readout{margin:3px 0}#result-screen .score-readout strong{font-size:28px}
#result-screen .result-summary{padding:5px;justify-content:center;gap:2px}
#result-screen .result-progress{margin:2px 0;font-size:13px}
#result-screen .knowledge-card{min-height:100%;height:auto;overflow:hidden}#result-screen .card-figure{height:120px;padding:5px;margin:6px 0}
#result-screen .knowledge-photo{margin:0;height:100%;display:flex;flex-direction:column;justify-content:center}#result-screen .knowledge-photo img{height:85px;max-height:85px;object-fit:contain}#result-screen .knowledge-photo figcaption{font-size:13px;line-height:1.2}
.phone-ending{max-width:700px;margin:auto;display:flex;flex-direction:column;gap:12px;text-align:center}.phone-ending-art>svg{width:180px;height:150px}.phone-ending-badges{display:flex;justify-content:center;gap:8px}.phone-ending-badges span{width:36px;height:36px}.phone-ending-badges svg{width:100%;height:100%}.phone-ending h1{font-size:27px;line-height:1.3;margin:8px 0}.phone-ending p{font-size:14px;margin:8px 0}.phone-ending-actions{display:grid;gap:6px}.phone-ending-actions button{min-height:44px;padding:7px;font-size:14px}
.phone-fullscreen,.phone-install-tip summary{min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:14px}.phone-install-tip p{font-size:13px}
#game-root{width:calc(100% - var(--phone-safe-left,0px) - var(--phone-safe-right,0px));margin-left:var(--phone-safe-left,0px)}
@media(orientation:landscape) and (max-height:500px){
 #result-screen .result-content{height:calc(100dvh - 60px);padding:4px;grid-template-rows:minmax(0,1fr) 44px;grid-template-columns:1fr 1.5fr;gap:3px 8px}
 #result-screen .phone-result-deck{grid-column:1/-1;grid-row:1}
 #result-screen .phone-deck-controls{grid-column:1;grid-row:2}
 #result-screen .phone-deck-controls span{font-size:13px;text-align:center;line-height:1.2}
 #result-screen .result-buttons{grid-column:2;grid-row:2;height:44px}
 #result-screen .result-summary{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:24px 30px 30px minmax(44px,auto);align-content:center;gap:0 8px}
 #result-screen .result-summary .overline{grid-column:2;grid-row:1}#result-screen #result-title{grid-column:2;grid-row:2;font-size:21px;margin:0}
 #result-screen .result-stars{grid-column:2;grid-row:3;height:30px;justify-content:flex-start}
 #result-screen .result-stars span,#result-screen .result-stars span:nth-child(2){height:26px;width:26px}
 #result-screen .score-medallion{grid-column:1;grid-row:1/4;width:88px;height:88px;margin:0 auto}
 #result-screen .score-readout{grid-column:1;grid-row:4;display:flex;flex-direction:column;gap:0;align-items:center;margin:0}
 #result-screen .result-details{grid-column:2;grid-row:4;margin:0}#result-screen .result-details summary{justify-content:flex-start}
 #result-screen .result-progress{display:none}#result-screen .knowledge-card{height:100%;padding:6px}
 #result-screen .card-figure{height:110px;margin:0}#result-screen .knowledge-photo img{height:85px}
 .chapter-cinematic{grid-template-columns:130px 1fr;gap:3px 8px;align-items:center}.chapter-stage{width:125px;height:125px}.chapter-art{width:125px;height:125px}.chapter-medal{width:60px;height:60px}.chapter-cinematic #chapter-next{height:44px;min-height:44px;padding:4px;margin:0}.chapter-cinematic .chapter-options{grid-column:1;grid-row:5/7;display:flex;flex-direction:column;gap:0}.chapter-cinematic .chapter-options button{height:44px;padding:4px;font-size:13px}.chapter-cinematic>.overline{grid-column:2}.chapter-cinematic h2{font-size:21px}.chapter-cinematic #chapter-line{font-size:14px}
 .phone-ending{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;height:100%}.phone-ending-art>svg{width:145px;height:130px}.phone-ending-badges{gap:3px}.phone-ending-badges span{width:26px;height:26px}.phone-ending h1{font-size:23px;margin:3px 0}.phone-ending h1 br{display:none}.phone-ending p{font-size:13px;margin:5px 0}.phone-ending-actions{grid-template-columns:1fr 1fr;gap:5px}.phone-ending-actions .text-button{grid-column:1/-1}
}
@media(orientation:landscape) and (max-height:500px){
 #modal[data-kind=keepsake]{width:calc(100% - 20px);max-width:760px;padding:8px 12px}#modal[data-kind=keepsake] .modal-heading{margin:0;padding:0;height:44px}
 #modal[data-kind=keepsake] .keepsake{display:grid;grid-template-columns:1.15fr 1fr;gap:3px 10px}#modal[data-kind=keepsake] .keepsake-kicker{grid-column:1/-1;text-align:center;margin:2px 0;font-size:13px}
 #modal[data-kind=keepsake] .keepsake-rows{grid-column:1;grid-row:2/5;width:100%;padding:5px;gap:2px}#modal[data-kind=keepsake] .keepsake-row{grid-template-columns:30px;gap:4px}
 #modal[data-kind=keepsake] .keepsake-stats{grid-column:2;margin:0;gap:8px;font-size:13px}#modal[data-kind=keepsake] .keepsake-stats strong{font-size:18px}
 #modal[data-kind=keepsake] .keepsake-words{grid-column:2;margin:0}#modal[data-kind=keepsake] .bunny-speech{padding:6px}#modal[data-kind=keepsake] .bunny-speech p{font-size:13px;line-height:1.45}#modal[data-kind=keepsake] .bunny-speech:before{display:none}#modal[data-kind=keepsake] .keepsake-hint{grid-column:2;margin:0;font-size:13px;line-height:1.3}
}
/* The phone home has fixed illustration rows, not a shrinking reversed flex column. */
body.phone .home-screen .home-hero{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:auto;align-items:center;gap:12px;margin:0 0 12px;min-height:0}
body.phone .home-screen .hero-copy{grid-column:1;grid-row:1;padding:0;width:100%}
body.phone .home-screen .hero-copy h1{font-size:23px;line-height:1.35;margin:0 0 12px;letter-spacing:0}
body.phone .home-screen .hero-copy h1 span{display:block;width:auto}
body.phone .home-screen .observatory-scene{grid-column:2;grid-row:1;display:grid;place-items:center;width:104px;height:116px;min-height:116px;padding:0;margin:0;transform:none}
body.phone .home-screen .scene-porthole{width:100px;height:110px;aspect-ratio:auto;border:0;border-radius:50%;box-shadow:none;background:radial-gradient(ellipse,#324a8580,transparent 72%);animation:none}
body.phone .home-screen .scene-sky{display:none}
body.phone .home-screen .hero-planet{width:66px;height:66px;left:0;top:0;transform:none}
body.phone .home-screen .companion{width:66px;height:88px;right:0;bottom:0;min-height:0;animation:none}
body.phone .home-screen .hero-actions #continue{width:100%;min-height:48px;padding:8px 12px;white-space:nowrap}
body.phone .phone-chapters{padding:3px 1px;margin:0 0 10px;gap:7px;min-height:50px}
body.phone .phone-chapters .chapter-tab{height:44px;min-height:44px;margin:0;padding:8px 10px;border:1px solid #6375a0;border-radius:11px;box-shadow:none;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:#14224d;color:#dce6ff;font-size:13px;line-height:1.2}
body.phone .phone-chapters .chapter-tab.active{border-color:#f6d98a;background:#f6d98a;color:#263052;font-weight:800}
body.phone .phone-chapters .chapter-tab::after{display:none;content:none}
body.phone .phone-level-state{max-width:none;white-space:nowrap;flex-shrink:0}
body.phone>.companion-bubble{position:fixed;z-index:100;inset:auto;top:calc(64px + env(safe-area-inset-top));left:calc(12px + var(--phone-safe-left,0px));right:calc(12px + var(--phone-safe-right,0px));bottom:auto;width:auto;min-height:0;height:auto;max-width:480px;max-height:calc(100dvh - 150px);overflow:auto;margin:0 auto;padding:12px 16px;border-radius:14px;border:1px solid #e2c988;font-size:15px;line-height:1.6;transform:none;transition:opacity .15s;box-shadow:0 8px 24px #0005}
body.phone>.companion-bubble::after{display:none;content:none}
body.phone dialog#modal{width:calc(100% - 24px);max-width:680px;max-height:calc(100dvh - 24px);margin:auto;padding:14px}
body.phone dialog#modal .modal-heading{top:-14px;min-height:44px;margin:0 0 10px;background:#172451}
@media(orientation:landscape) and (max-height:500px){
 body.phone .home-screen .home-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:110px auto;align-content:center;justify-items:center;gap:12px;margin:0}
 body.phone .home-screen .observatory-scene{grid-column:1;grid-row:1;width:104px;height:110px;min-height:110px}
 body.phone .home-screen .hero-copy{grid-column:1;grid-row:2;text-align:center}
 body.phone .home-screen .hero-copy h1{font-size:20px;line-height:1.3;margin:0 0 10px}
 body.phone .home-screen .hero-copy h1 span{display:block}
 body.phone .phone-chapters{margin-bottom:6px}
 body.phone>.companion-bubble{top:56px;left:calc(84px + var(--phone-safe-left,0px));right:calc(12px + var(--phone-safe-right,0px));max-width:520px;max-height:calc(100dvh - 76px)}
 body.phone dialog#modal{padding:10px 14px;max-height:calc(100dvh - 16px)}
 body.phone dialog#modal .modal-heading{top:-10px;margin-bottom:6px}
}
body.phone .home-screen #continue .button-icon{width:28px;height:28px;min-width:28px;min-height:28px;flex:0 0 28px}
@media(orientation:landscape) and (max-height:500px){
 body.phone>.companion-bubble{top:5px;left:calc(150px + var(--phone-safe-left,0px));right:calc(12px + var(--phone-safe-right,0px));padding:8px 14px;font-size:14px;line-height:1.5}
}
@media(orientation:landscape) and (max-height:340px){
 body.phone .home-screen .home-hero{grid-template-rows:92px auto;gap:10px}
 body.phone .home-screen .observatory-scene{height:92px;min-height:92px}
 body.phone .home-screen .scene-porthole{height:92px;width:94px}
 body.phone .home-screen .companion{height:76px;width:58px}
 body.phone .home-screen .hero-copy h1{font-size:18px;margin-bottom:8px}
}
@media(orientation:portrait) and (max-height:700px){
 body.phone .home-screen .home-hero{grid-template-columns:minmax(0,1fr) 88px;gap:8px;margin-bottom:6px}
 body.phone .home-screen .observatory-scene{width:88px;height:100px;min-height:100px}
 body.phone .home-screen .scene-porthole{width:88px;height:100px}
 body.phone .home-screen .hero-copy h1{font-size:20px;line-height:1.3;margin-bottom:8px}
 body.phone .phone-chapters{margin-bottom:6px}
}

/* ---- Polish of the phone pages (2026-10-12) -------------------------------------------------------------------
   Measured page by page at 390×664, 360×640 upright and 780×333, 667×331, 844×340, 568×320 on its side:
   nothing may need scrolling, be cut off, or lie on top of something else. The rules below override the ones
   above and keep to the same split: general rules first, then what changes on a phone lying on its side. */

/* The play field never scrolls (a hidden streak counter is moved a little down and used to stretch it). */
body.phone .play-screen{overflow:hidden}

/* The diagram's zoom button covers less of the diagram: a small round mark in the top corner (the names under
   the planets are at the bottom), the same 44px to tap. */
body.phone .phone-diagram-zoom{top:0;right:0;bottom:auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:4px;display:grid;grid-template-columns:28px;grid-template-rows:28px;justify-content:end;align-content:start;text-align:center;line-height:28px;font-size:17px;color:var(--moon);border-radius:0;background:none;isolation:isolate}
body.phone .phone-diagram-zoom::before{content:"";position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;background:#111b48e6;box-shadow:0 0 0 1px #f6d98a55;z-index:-1}
/* The names under the eight planets keep inside the figure, the first and the last too. */
body.phone .knowledge-card .planet-order{padding:0 12px}
/* A drawn figure keeps inside its frame: the Milky Way is square and was drawn as wide as the card, spilling
   over the card's title and words. */
body.phone .knowledge-card .card-figure>svg{max-height:100%}

/* The relay card: its two photographs side by side (also below 600px, where the wide page stacks them), the
   relay diagram under them. */
body.phone .relay-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
body.phone .relay-photos .knowledge-photo img{aspect-ratio:auto;height:70px}
body.phone :is(#atlas-cards,#result-screen,#modal) .relay-figure .knowledge-illustration{min-height:0;height:auto;margin-top:6px;padding:4px 8px}
body.phone .relay-figure .knowledge-illustration>svg{max-height:62px}
body.phone .relay-figure .phone-diagram-zoom{display:none}
body.phone .knowledge-photo figcaption{padding:4px 2px 0;gap:0}
body.phone .knowledge-photo figcaption strong{font-size:13px;line-height:1.35}
body.phone .knowledge-photo button.photo-original::after{right:6px;bottom:6px;width:28px;height:28px;background-size:16px}

/* Result: never sideways (the "new" stamp grows for a moment when it lands). */
body.phone #result-screen{overflow-x:hidden}
/* Result: the labels of the three buttons sit in their middle (their icons are hidden on a phone). */
body.phone #result-screen .result-buttons .action-button{justify-content:center;text-align:center}
/* The "new" stamp sits inside the card, where nothing cuts it off. */
body.phone #result-screen .new-card-stamp{display:inline-flex;top:10px;right:10px;padding:5px 12px;font-size:13px;gap:4px}
body.phone #result-screen .new-card-stamp svg{width:14px;height:14px}

/* Atlas: the row of filters keeps inside the window (the wide rule pulls it out by the wide page's gutter). */
body.phone #atlas-filters{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}

@media (orientation:portrait), (min-height:501px){
 /* Atlas, upright: the listen button sits up beside the card's tags, so the card fits its place with sound on. */
 body.phone #atlas-cards .knowledge-card>.voice-button{position:absolute;top:8px;right:10px;margin:0;min-height:44px}
 body.phone #atlas-cards .knowledge-card:has(>.voice-button) .card-tags{min-height:30px;align-items:center;padding-right:128px}
 /* Result, upright: the card's page is filled by the card and by no more than the card. The listen button sits up
    beside the tags, as in the atlas (the "new" stamp moves down beside the title); the figure takes the room that
    is left under the heading and above the guide's words, and what is in it follows its height: pictures shrink,
    their names stay. Only on a very short phone do the guide's words scroll in their bubble. */
 body.phone #result-screen .phone-result-deck>#result-card{overflow:hidden}
 body.phone #result-screen .knowledge-card{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;overflow:hidden}
 body.phone #result-screen .knowledge-card>*{margin-top:0;margin-bottom:0}
 body.phone #result-screen .card-heading{flex:none;gap:6px}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .card-figure,
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .relay-figure{flex:1 1 0;height:auto;min-height:84px;max-height:250px}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .relay-figure{display:flex;flex-direction:column;justify-content:center;gap:6px}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .relay-figure>*{margin-top:0}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .relay-figure .relay-photos{flex:1 1 0;min-height:0}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .relay-figure .knowledge-illustration{flex:none}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .galaxy-credit{flex:none}
 body.phone #result-screen .bunny-lesson{flex:0 1 auto;min-height:44px;overflow-y:auto}
 body.phone #result-screen .bunny-speech{position:static;margin:0;padding:10px 12px}
 body.phone #result-screen .bunny-speech p{font-size:15px;line-height:1.6}
 body.phone #result-screen .voice-button{position:absolute;top:8px;right:10px;margin:0;min-height:44px}
 body.phone:not(.voice-off) #result-screen .knowledge-card:has(.voice-button) .card-tags{min-height:30px;align-items:center;padding-right:128px}
 body.phone #result-screen .new-card-stamp{top:55px;right:12px}
 /* a figure of painted bodies: each body's picture takes what its name leaves of the figure's height */
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .card-figure:not(.photo-figure):not(.knowledge-illustration){align-items:stretch;padding:6px 10px}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .figure-object{display:flex;flex-direction:column;justify-content:center;min-height:0}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .figure-object>svg{flex:1 1 0;min-height:0;height:auto;max-height:110px}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .figure-object>span{flex:none;font-size:13px;line-height:1.35}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .planet-order{align-self:center}
 /* a photograph fills the figure above its caption */
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .card-figure.photo-figure{padding:6px}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-photo{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:0}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-photo .photo-original{flex:1 1 0;min-height:0}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-photo img{width:100%;height:100%;max-height:none;object-fit:contain}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-photo figcaption{flex:none}
 /* Uranus lying on its side: the drawing is as tall as the figure allows (--h: the planet's height; the wide
    page's drawing is 115px tall, and the dashed axis and the widths keep that drawing's proportions). */
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .card-figure:has(.tilt-diagram){container-type:size}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .tilt-diagram{--h:82px;align-self:center;width:calc(var(--h) * 1.74)}
 @supports (height:1cqh){body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .tilt-diagram{--h:clamp(64px,calc(100cqh - 46px),130px)}}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .tilt-diagram>svg{width:calc(var(--h) * 1.478);height:var(--h)}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .tilt-diagram>i{top:calc(var(--h) * .478);left:calc(var(--h) * .087);width:calc(var(--h) * 1.565)}
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .tilt-diagram>span{font-size:13px}
 /* The two rates take the place of the progress bar while they are open (and the medal is a little smaller),
    so the score's page needs no scrolling. */
 body.phone #result-screen #result-details[open]~.result-progress{display:none}
 body.phone #result-screen .result-summary:has(#result-details[open]) .score-medallion{width:72px;height:72px}
 /* The chapter page fits above the navigation bar. */
 body.phone .chapter-cinematic{gap:4px}
 body.phone #chapter-screen .chapter-stage.has-illustration{width:min(100%,232px);height:156px}
 body.phone .chapter-cinematic h2{margin:4px 0}
 body.phone .chapter-cinematic>p{margin:2px auto}
 body.phone .chapter-cinematic .chapter-progress{margin:4px 0}
 body.phone .chapter-cinematic .earned-badge{margin:2px 0}
 body.phone .chapter-cinematic .chapter-options{margin-top:0}
 /* The welcome dialog fits without scrolling. */
 body.phone #modal[data-kind=intro] .signal-guide{margin:6px 0}
 body.phone #modal[data-kind=intro] #modal-content>p{margin:6px 0}
}

@media (orientation:landscape) and (max-height:500px){
 /* The rail's labels stay on one line. */
 .phone-nav button{padding:4px 0;letter-spacing:0;white-space:nowrap}

 /* Result, on its side: the score on the left, the card on the right, the buttons along the bottom; no pages.
    The game's name takes the top left corner only, so the card column starts at the top. */
 body.phone #result-screen{padding-top:8px}
 body.phone #result-screen .result-content{
  --medal:clamp(56px,calc(100dvh - 262px),84px);
  display:grid;grid-template-columns:clamp(120px,20vw,160px) minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto minmax(0,1fr) 44px;
  height:calc(100dvh - 16px);padding:0;gap:0 10px;
  background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
 body.phone #result-screen .phone-result-deck,
 body.phone #result-screen .result-summary{display:contents}
 body.phone #result-screen .result-summary>*{grid-column:1;justify-self:center;text-align:center;margin:0}
 body.phone #result-screen .result-summary .overline{grid-column:2;grid-row:1;justify-self:start;margin:0 0 6px;font-size:13px}
 body.phone #result-screen .score-medallion{grid-row:2;width:var(--medal);height:var(--medal);margin:22px 0 0}
 body.phone #result-screen .score-readout{grid-row:3;display:flex;flex-direction:column;align-items:center;gap:0;margin:2px 0 0}
 body.phone #result-screen .score-readout strong{font-size:24px;line-height:1.1}
 body.phone #result-screen .score-readout span{font-size:13px}
 body.phone #result-screen #result-title{grid-column:1;grid-row:4;font-size:20px;line-height:1.3;margin:6px 0 0;letter-spacing:.06em}
 body.phone #result-screen .result-stars{grid-row:5;height:28px;margin:2px 0 0;justify-content:center}
 body.phone #result-screen .result-stars span,
 body.phone #result-screen .result-stars span:nth-child(2){width:26px;height:26px;margin:0}
 body.phone #result-screen .result-details{grid-row:6;align-self:start;position:relative;margin:4px 0 0;max-width:100%;overflow:visible}
 body.phone #result-screen .result-details summary{justify-content:center}
 /* the two rates open as a small panel above the button, over the stars */
 body.phone #result-screen .result-details .result-metrics{position:absolute;z-index:3;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);width:max-content;min-width:150px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:0;padding:8px 12px;border-radius:12px;background:#152052f5;border:1px solid var(--line);box-shadow:0 8px 20px #0007}
 body.phone #result-screen .result-details .result-metrics>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0;border:0;border-radius:0;background:none}
 body.phone #result-screen .result-details .result-metrics span{display:inline;font-size:13px}
 body.phone #result-screen .result-details .result-metrics strong{display:inline;margin:0;font-size:16px}
 body.phone #result-screen .result-progress{display:none}
 body.phone #result-screen #result-card{grid-column:2;grid-row:2/7;height:auto;min-height:0;overflow:visible;padding:0}
 body.phone #result-screen .phone-deck-controls{display:none}
 body.phone #result-screen .result-buttons{grid-column:1/-1;grid-row:7;height:44px;margin:0}
 /* the card itself: heading across, figure and the guide's words side by side */
 body.phone #result-screen .knowledge-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 12px;height:100%;min-height:0;padding:10px 12px;overflow:hidden}
 body.phone #result-screen .card-heading{grid-column:1/-1;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
 body.phone #result-screen .card-heading strong{font-size:18px;line-height:1.3}
 body.phone #result-screen .card-figure,
 body.phone #result-screen .relay-figure{grid-column:1;grid-row:2;height:auto;min-height:0;margin:0;padding:6px}
 body.phone #result-screen .relay-figure{padding:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
 body.phone #result-screen .relay-photos{margin-top:0}
 body.phone #result-screen .relay-photos .knowledge-photo img{height:calc(100dvh - 268px);min-height:40px;max-height:78px}
 body.phone #result-screen .card-figure>svg{max-height:100%}
 body.phone #result-screen .knowledge-photo{height:100%;display:flex;flex-direction:column;justify-content:center}
 body.phone #result-screen .card-figure.photo-figure .knowledge-photo img{height:calc(100dvh - 190px);max-height:none}
 body.phone #result-screen .bunny-lesson{grid-column:2;grid-row:2;align-self:center;margin:0}
 body.phone #result-screen .bunny-speech{padding:8px 10px}
 body.phone #result-screen .bunny-speech p{font-size:14px;line-height:1.5;margin:0}
 body.phone #result-screen .voice-button{margin:6px 0 0;min-height:44px}
 body.phone #result-screen .new-card-stamp{top:8px;right:10px}
 /* The card is exactly as tall as its place (it was as tall as its content and centred in its place: the last
    card, whose square picture of the Milky Way wants to be as tall as it is wide, grew under the page's buttons
    and pushed its own heading out at the top). That card's "see the large picture" button gets a row of its own
    under the guide's words. */
 body.phone #result-screen #result-card{display:flex;align-self:stretch}
 body.phone #result-screen .knowledge-card{flex:1 1 auto;height:auto}
 body.phone #result-screen .knowledge-card:has(.galaxy-credit){grid-template-rows:auto minmax(0,1fr) auto}
 body.phone #result-screen .galaxy-credit{grid-column:2;grid-row:3;justify-self:end;margin:0}
}
/* A short phone, upright: the atlas card's figure and the relay photographs are a little lower, and the
   journey's last page sits a little closer. */
@media (orientation:portrait) and (max-height:660px){
 /* the score's page keeps inside its place (it was 3px taller at 375×600) */
 body.phone #result-screen .score-medallion{width:92px;height:92px}
 body.phone #atlas-cards .card-figure{height:112px}
 body.phone #atlas-cards .relay-photos .knowledge-photo img{height:52px}
 body.phone .phone-ending{gap:6px}
 body.phone .phone-ending-art>svg{height:128px}
}
/* A small phone on its side: the level's name gives its line to the card. */
@media (orientation:landscape) and (max-height:500px) and (max-width:640px){
 /* the briefing's rule stays on one line with its label (a long rule wrapped under it and the page grew by 6px) */
 body.phone .briefing-content #briefing-rule{flex-wrap:nowrap;justify-content:center;gap:6px;padding:5px 8px;font-size:14px;letter-spacing:0}
 body.phone .briefing-content #briefing-rule .rule-label{height:28px;padding:0 10px;font-size:14px}
 body.phone #result-screen .result-summary .overline{display:none}
 body.phone #result-screen .score-medallion{margin-top:46px}
 body.phone #result-screen .result-content{grid-template-columns:120px minmax(0,1fr)}
 body.phone #result-screen .knowledge-card{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
 body.phone #result-screen .bunny-speech p{font-size:13px}
 /* no room for the last card's "see the large picture" row: the mark on the picture still opens it large */
 body.phone #result-screen .knowledge-card:has(.galaxy-credit){grid-template-rows:auto minmax(0,1fr)}
 body.phone #result-screen .galaxy-credit{display:none}
}
@media (orientation:landscape) and (max-height:500px){
 /* Atlas, on its side: the arrows and the page count move up beside the filters, so the card gets their row. */
 body.phone #atlas-filters{margin-left:0;padding-left:0;margin-right:184px;padding-right:0}
 body.phone .atlas-screen .phone-deck-controls{position:absolute;top:52px;right:12px;width:172px;height:44px;gap:6px}
 body.phone .atlas-screen .phone-deck-controls span{width:64px;font-size:13px;line-height:1.2;text-align:center;word-break:keep-all}
 body.phone #atlas-cards.phone-deck{height:calc(100dvh - 113px);min-height:150px}
 body.phone #atlas-cards .knowledge-card:not(.locked){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body.phone #atlas-cards .knowledge-card>.card-figure,
 body.phone #atlas-cards .knowledge-card>.relay-figure{grid-column:1;grid-row:1/4;align-self:stretch;height:auto;min-height:0;margin:0}
 body.phone #atlas-cards .card-figure>svg{max-height:100%}
 body.phone #atlas-cards .knowledge-photo{height:100%;display:flex;flex-direction:column;justify-content:center}
 body.phone #atlas-cards .card-figure.photo-figure .knowledge-photo img{height:calc(100dvh - 190px)}
 body.phone #atlas-cards .relay-figure{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
 body.phone #atlas-cards .relay-photos{margin-top:0}
 body.phone #atlas-cards .relay-photos .knowledge-photo img{height:calc(100dvh - 268px);min-height:40px;max-height:78px}
 body.phone #atlas-cards .galaxy-credit{grid-column:2;grid-row:3;justify-self:end;align-self:end;margin:0}

 /* A knowledge card opened as a dialog (from the chapter page): the figure on the left, the words on the right. */
 body.phone #modal[data-kind=card] .knowledge-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 14px;margin:0;padding:10px}
 body.phone #modal[data-kind=card] .card-heading{grid-column:2;grid-row:1;gap:5px}
 body.phone #modal[data-kind=card] .card-heading strong{font-size:18px}
 body.phone #modal[data-kind=card] .knowledge-card>.card-figure,
 body.phone #modal[data-kind=card] .knowledge-card>.relay-figure{grid-column:1;grid-row:1/4;height:calc(100dvh - 126px);min-height:0;margin:0}
 body.phone #modal[data-kind=card] .card-figure>svg{max-height:100%}
 body.phone #modal[data-kind=card] .knowledge-photo{height:100%;display:flex;flex-direction:column;justify-content:center}
 body.phone #modal[data-kind=card] .card-figure.photo-figure .knowledge-photo img{height:calc(100dvh - 190px)}
 body.phone #modal[data-kind=card] .relay-figure{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
 body.phone #modal[data-kind=card] .relay-photos .knowledge-photo img{height:calc(100dvh - 268px);min-height:40px;max-height:78px}
 body.phone #modal[data-kind=card] .knowledge-card>p{grid-column:2;grid-row:2;margin:2px 0;font-size:14px;line-height:1.55}
 body.phone #modal[data-kind=card] .voice-button{grid-column:2;grid-row:3;justify-self:start;margin:0;min-height:44px}
 body.phone #modal[data-kind=card] .galaxy-credit{grid-column:2;grid-row:3;justify-self:end;align-self:end;margin:0}

 /* The three example signals in a dialog, more compact: the picture, under it the mark and the word side by side. */
 body.phone #modal .signal-guide{gap:8px}
 body.phone #modal .signal-guide-item{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:2px 4px;padding:6px 4px}
 body.phone #modal .signal-guide-art{grid-column:1/-1;justify-self:center;width:44px;height:44px}
 body.phone #modal .signal-guide-item>svg{width:18px;height:18px}
 body.phone #modal .signal-guide-item>span{font-size:14px}

 /* How the game is played (a first visit): the words and the rule on the left, the three signals and the button on the right. */
 body.phone #modal[data-kind=intro] #modal-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 18px;align-items:center}
 body.phone #modal[data-kind=intro] .modal-heading{grid-column:1/-1;margin-bottom:0}
 body.phone #modal[data-kind=intro] .intro-lead{grid-column:1;grid-row:2;margin:0;font-size:14px;line-height:1.5}
 body.phone #modal[data-kind=intro] .help-target{grid-column:1;grid-row:3;margin:0}
 body.phone #modal[data-kind=intro] .intro-more{grid-column:1;grid-row:4;margin:0;font-size:14px;line-height:1.5}
 body.phone #modal[data-kind=intro] .signal-guide{grid-column:2;grid-row:2/4;margin:0}
 body.phone #modal[data-kind=intro] #modal-content>.action-button{grid-column:2;grid-row:4;margin:0}

 /* Settings: the three switches on the left, the buttons on the right. */
 body.phone #modal[data-kind=settings] #modal-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;gap:6px 16px;align-items:center}
 body.phone #modal[data-kind=settings] .modal-heading{grid-column:1/-1}
 body.phone #modal[data-kind=settings] .setting-row{grid-column:1;min-height:44px;margin:0;padding-top:0;padding-bottom:0}
 body.phone #modal[data-kind=settings] #modal-content>.action-button,
 body.phone #modal[data-kind=settings] .phone-fullscreen,
 body.phone #modal[data-kind=settings] .phone-install-tip{grid-column:2;margin:0}
 body.phone #modal[data-kind=settings] #modal-content>.action-button,
 body.phone #modal[data-kind=settings] .phone-fullscreen{min-height:44px;height:44px;padding-top:0;padding-bottom:0}
 body.phone #modal[data-kind=settings] .settings-note{grid-column:1/-1;margin:2px 0 0}

 /* How to play, and a level's rule: the rule and the three signals across, then the details and the button. */
 body.phone #modal:is([data-kind=help],[data-kind=rules]) #modal-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;align-items:start}
 body.phone #modal:is([data-kind=help],[data-kind=rules]) .modal-heading{grid-column:1/-1;margin-bottom:0}
 body.phone #modal:is([data-kind=help],[data-kind=rules]) .help-target{grid-column:1/-1;margin:0}
 body.phone #modal:is([data-kind=help],[data-kind=rules]) .signal-guide{grid-column:1/-1;margin:0}
 body.phone #modal:is([data-kind=help],[data-kind=rules]) .rule-details{grid-column:1;grid-row:4;margin:0}
 body.phone #modal:is([data-kind=help],[data-kind=rules]) #modal-content>.action-button{grid-column:2;grid-row:4;margin:0}
 /* hearing the opening again: at the end of the row that begins with the details */
 body.phone #modal[data-kind=help] .story-again{grid-column:1;grid-row:4;justify-self:end;align-self:start;min-height:44px;margin:0}
}
/* A small phone on its side: the atlas card gives its words more of the width, in a slightly smaller size. */
@media (orientation:landscape) and (max-height:500px) and (max-width:640px){
 body.phone #atlas-cards .knowledge-card:not(.locked){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4px 12px;padding:8px}
 body.phone #atlas-cards .knowledge-card>p{font-size:13px;line-height:1.45}
 body.phone .figure-object>span{font-size:13px;white-space:nowrap}
 /* three bodies in a narrow figure: their names only, the second line would run into the next body's */
 body.phone .figure-object>span small{display:none}
 body.phone #atlas-cards .card-figure.photo-figure .knowledge-photo img{height:calc(100dvh - 206px)}
}
/* A small phone on its side: the settings sit a little closer, and the home page's five levels keep above the
   bottom edge. */
@media (orientation:landscape) and (max-height:500px) and (max-width:640px){
 body.phone #modal[data-kind=settings] #modal-content{row-gap:5px}
 body.phone #modal[data-kind=settings] .modal-heading{margin-bottom:0}
 body.phone .home-screen{padding-bottom:4px}
 body.phone .home-screen .phone-levels{gap:5px}
}
/* The keepsake page, on its side: the five rows of collections on the left; the numbers, the guide's words and
   the button that saves the page as a picture on the right. */
@media (orientation:landscape) and (max-height:500px){
 body.phone #modal[data-kind=keepsake] .keepsake{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px 14px;align-items:center}
 /* --row (the height of a row and of every picture in it, see cards.css) is set so that the five rows with their
    gaps and the panel's padding fill the dialog's height. */
 body.phone #modal[data-kind=keepsake] .keepsake-rows{--row:calc((100dvh - 110px) / 5);grid-column:1;grid-row:1/5;height:auto;max-width:none;width:100%;margin:0;padding:6px 8px;display:grid;grid-template-rows:repeat(5,var(--row));gap:2px}
 body.phone #modal[data-kind=keepsake] .keepsake-row{height:var(--row);min-height:0;grid-template-columns:34px;gap:4px}
 body.phone #modal[data-kind=keepsake] .keepsake-badge{height:var(--row);width:100%;display:grid;place-items:center}
 body.phone #modal[data-kind=keepsake] .keepsake-badge svg{width:100%}
 body.phone #modal[data-kind=keepsake] .keepsake-kicker{grid-column:2;grid-row:1;margin:0;text-align:center}
 body.phone #modal[data-kind=keepsake] .keepsake-stats{grid-column:2;grid-row:2;margin:0;justify-content:center}
 body.phone #modal[data-kind=keepsake] .keepsake-words{grid-column:2;grid-row:3;margin:0}
 body.phone #modal[data-kind=keepsake] .keepsake-save{grid-column:2;grid-row:4;justify-self:center;margin:0;min-height:44px}
}
/* The space backdrop is drawn a little larger than the screen. Hidden overflow can still be scrolled by the page
   itself (bringing a button into view, focus coming back from a dialog), which moved the whole game up by 20–38px
   and left a strip under the navigation bar; clipped overflow cannot be scrolled at all. */
body.phone #game-root{overflow:hidden;overflow:clip}
/* The locked card of level 5: its Earth-and-Moon picture is as small, pale and grey as any locked card's body
   (it was drawn in colour as wide as the card, the Moon larger than the Earth on a phone on its side). */
body.phone #atlas-cards .knowledge-card.locked>.earth-moon-art{width:120px;height:150px;flex:none}
/* Dialog headings: no dark box of their own (the close button's circle stood out of it); the dialog's own colour
   shows behind the title. Only while a long dialog is scrolled does a bar of the dialog's colour run from edge to
   edge behind them (phone.mjs adds .scrolled), so the rows pass under it. */
body.phone dialog#modal .modal-heading{background:transparent;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;transition:background-color .15s,box-shadow .15s}
body.phone dialog#modal.scrolled .modal-heading{background:#22317a;box-shadow:0 8px 12px -10px #000a}
/* The atlas filters: a thin bar under the row shows how far along it is and can be dragged (phone.mjs). It takes
   the place of the row's own gap below, so the cards stay where they were. */
body.phone #atlas-filters{margin-bottom:0;scrollbar-width:none}
body.phone .phone-scrollbar{position:relative;height:4px;margin:0 0 4px;border-radius:2px;background:#ffffff1f;touch-action:none;cursor:pointer}
body.phone .phone-scrollbar::before{content:"";position:absolute;inset:-6px 0}
body.phone .phone-scrollbar>span{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:#f6d98acc}
body.phone .phone-scrollbar.idle{visibility:hidden}
@media (orientation:landscape) and (max-height:500px){
 body.phone #atlas-cards .knowledge-card.locked>.earth-moon-art{width:140px;height:100px}
 body.phone .atlas-screen .phone-scrollbar{margin:0 184px 1px 0}
}

/* ---- Knowledge cards with their further parts (backlog B1). A collected card has four tabs (its own sentence and
   the three parts of more.mjs); the card of a level that was just passed has an entry to them, which opens the
   card's dialog. Whatever part is shown, a card keeps to its page: the figure takes the room that the words
   leave (the rules above that make a figure follow its height hold here too). ---- */
body.phone .card-parts{gap:5px;margin:0}
body.phone .card-parts button{min-width:44px;min-height:44px;padding:0 11px;font-size:14px}
body.phone .more-button{min-height:44px;margin:0;padding:0 14px;font-size:14px}
@media (max-width:380px){body.phone .card-parts button{padding:0 9px}}
/* Where the guide says a card's words (the card of a level that was just passed, and the card's dialog) she stands
   beside them: her picture, and the bubble with the words and the buttons that belong to them. */
body.phone :is(#result-screen,#modal[data-kind=card]) .bunny-lesson{display:flex;align-items:flex-end;gap:7px;margin:0}
body.phone :is(#result-screen,#modal[data-kind=card]) .bunny-lesson-art{display:block;flex:0 0 54px;width:54px;height:auto}
body.phone :is(#result-screen,#modal[data-kind=card]) .bunny-speech{position:relative;flex:1 1 0;min-width:0;margin:0 0 6px;padding:10px 12px}
body.phone :is(#result-screen,#modal[data-kind=card]) .bunny-speech::before{display:block}
body.phone :is(#result-screen,#modal[data-kind=card]) .bunny-speech>.voice-button{position:static;flex:none;margin:0;min-height:44px}
/* The card's dialog: as tall as the window allows, so that the figure has a height to follow. */
body.phone #modal[data-kind=card]{display:flex;flex-direction:column;height:calc(100dvh - 24px);max-height:640px;overflow:hidden}
body.phone #modal[data-kind=card]:not([open]){display:none}
body.phone #modal[data-kind=card] #modal-content{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
body.phone #modal[data-kind=card] .modal-heading{flex:none}
body.phone #modal[data-kind=card] .knowledge-card{flex:1 1 auto;min-height:0;overflow-y:auto}

@media (orientation:portrait), (min-height:501px){
 /* Upright: heading, figure, tabs, words, one under the other; the figure gives way. */
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked),
 body.phone #modal[data-kind=card] .knowledge-card{display:flex;flex-direction:column;gap:8px}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked)>*,
 body.phone #modal[data-kind=card] .knowledge-card>*{margin-top:0;margin-bottom:0}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.card-heading{flex:none;gap:6px}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.card-parts{flex:none}
 /* the four tabs keep to one row in the dialog of a narrow phone too */
 body.phone #modal[data-kind=card] .knowledge-card{padding:12px}
 /* the atlas card: room for three rows of words, so that the figure keeps its size from one tab to the next */
 body.phone #atlas-cards.phone-deck .knowledge-card>.card-text{flex:none;min-height:4.8em;font-size:15px;line-height:1.6}
 /* the dialog: the guide and her bubble; in it the words (room for four rows) and under them the listen button */
 body.phone #modal[data-kind=card] .knowledge-card>.bunny-lesson{flex:none}
 body.phone #modal[data-kind=card] .bunny-speech{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
 body.phone #modal[data-kind=card] .bunny-speech>.card-text{align-self:stretch;min-height:6.4em;font-size:15px;line-height:1.6}
 /* The galaxy's "view large" button lies on the corner of its figure instead of taking a row. */
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.galaxy-credit{position:relative;z-index:1;align-self:flex-start;margin:-52px 0 0 6px}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.galaxy-credit .photo-text-button{min-height:44px;background:#0d173ecc}
 /* The relay card has two photographs and a drawing: where its figure is low, the photographs keep the room. */
 body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.relay-figure{container-type:size}
 @container (max-height:178px){body.phone .relay-figure .knowledge-illustration{display:none}}
 /* The card of a level that was just passed: the guide beside her bubble; in the bubble the words, and under them
    the listen button and the entry side by side. The corner of the card is free again for a new card's stamp. */
 body.phone #result-screen .bunny-speech{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 8px}
 body.phone #result-screen .bunny-speech>p{flex:1 1 100%;min-width:0}
 body.phone #result-screen .bunny-speech>.more-button{flex:none}
 body.phone:not(.voice-off) #result-screen .knowledge-card:has(.voice-button) .card-tags{padding-right:0}
 body.phone #result-screen .new-card-stamp{top:10px;right:10px}
 body.phone #result-screen #result-card.fresh .card-tags{min-height:30px;align-items:center;padding-right:92px}
}
/* A narrow phone, upright: beside the guide the bubble is narrow; her words are a size smaller there, so that the
   longest sentence keeps to four rows and the figure keeps a fair height. */
@media (orientation:portrait) and (max-width:380px){
 body.phone #result-screen .bunny-speech p{font-size:14px;line-height:1.55}
}
/* A very low upright window: the atlas card leaves out its tags (the listen button then stands beside the card's
   name) and lets its figure get lower. Where even that is not enough, the card scrolls inside rather than cut
   its words off. */
@media (orientation:portrait) and (max-height:620px){
 /* the page before a level gives up its "back" button there (the bar at the bottom leads home), so that a level
    whose line from the guide takes three rows still keeps to one screen */
 body.phone .briefing-screen>.back-button{display:none}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked) .card-tags{display:none}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked) .card-heading>strong{display:flex;align-items:center;min-height:44px}
 body.phone:not(.voice-off) #atlas-cards.phone-deck>.knowledge-card:has(>.voice-button:not([hidden])) .card-heading>strong{padding-right:132px}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked)>:is(.card-figure,.relay-figure){min-height:54px}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked){gap:5px;padding:8px 12px}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked)>.voice-button{top:6px}
 /* a photograph keeps the little height there is: its caption is left out */
 body.phone #atlas-cards.phone-deck .knowledge-photo figcaption{display:none}
 /* the card of a level that was just passed leaves out its tags too (a new card's stamp then stands beside its
    name), and its figure gets lower before the guide's words have to scroll */
 body.phone #result-screen .card-tags{display:none}
 body.phone #result-screen .card-heading>strong{display:flex;align-items:center;min-height:30px}
 body.phone #result-screen #result-card.fresh .card-heading>strong{padding-right:92px}
 body.phone #result-screen .knowledge-card>:is(.card-figure,.relay-figure){min-height:60px}
}
@media (orientation:landscape) and (max-height:500px){
 /* The atlas card on its side: the figure on the left; on the right the heading (the speaker beside the tags), the
    tabs, the words. */
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked){grid-template-rows:auto auto minmax(0,1fr)}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.card-heading{grid-column:2;grid-row:1}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.card-parts{grid-column:2;grid-row:2}
 body.phone #atlas-cards.phone-deck .knowledge-card>.card-text{grid-column:2;grid-row:3;align-self:start;margin:2px 0 0}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked)>.voice-button{position:absolute;top:6px;right:8px;grid-area:auto;margin:0;width:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
 body.phone #atlas-cards.phone-deck>.knowledge-card:not(.locked)>.voice-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.phone:not(.voice-off) #atlas-cards.phone-deck>.knowledge-card:has(>.voice-button:not([hidden])) .card-tags{min-height:30px;align-items:center;padding-right:50px}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.galaxy-credit{position:relative;z-index:1;grid-column:1;grid-row:3;justify-self:start;align-self:end;margin:0 0 6px 6px}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .knowledge-card>.galaxy-credit .photo-text-button{min-height:44px;background:#0d173ecc}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .card-parts{gap:4px}
 body.phone :is(#atlas-cards.phone-deck,#modal[data-kind=card]) .card-parts button{padding:0 7px}
 /* The card's dialog on its side fills the window's height. Its own name gives its row to the card; the button
    that closes it stays where every dialog has it, in the dialog's top corner, and the card's tags stand on its
    row. The card has no frame of its own here (the dialog is its frame: a second one ran under the button). The
    words' side is the wider one, so that the four tabs keep to one row; under the tabs the guide and her bubble,
    the words and the speaker side by side. */
 body.phone #modal[data-kind=card]{height:calc(100dvh - 16px);max-height:none}
 body.phone dialog#modal[data-kind=card] .modal-heading{position:absolute;top:14px;right:14px;left:auto;z-index:6;width:auto;min-height:0;margin:0;padding:0;background:none;box-shadow:none}
 body.phone #modal[data-kind=card] .modal-heading h2{display:none}
 body.phone #modal[data-kind=card] .knowledge-card{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto minmax(0,1fr);padding:4px 0 0;border:0;border-radius:0;background:none;box-shadow:none}
 body.phone #modal[data-kind=card] .knowledge-card .card-tags{min-height:44px;align-items:center;padding-right:52px}
 body.phone #modal[data-kind=card] .knowledge-card>.card-figure,
 body.phone #modal[data-kind=card] .knowledge-card>.relay-figure{height:auto;align-self:stretch}
 body.phone #modal[data-kind=card] .knowledge-card>.bunny-lesson{grid-column:2;grid-row:3;align-self:start;margin-top:2px}
 body.phone #modal[data-kind=card] .bunny-speech{display:flex;align-items:center;gap:6px;margin-bottom:4px;padding:6px 8px 6px 12px}
 body.phone #modal[data-kind=card] .bunny-speech>.card-text{flex:1 1 0;min-width:0;font-size:14px;line-height:1.55}
 body.phone #modal[data-kind=card] .bunny-speech>.voice-button{width:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
 body.phone #modal[data-kind=card] .bunny-speech>.voice-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 /* The card of a level that was just passed: the guide beside her bubble; the speaker and the entry on one row
    under the words; a new card's stamp keeps clear of the card's name; and a little air between the card and the
    three buttons under it. */
 body.phone #result-screen .bunny-speech{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px;padding:8px 10px}
 body.phone #result-screen .bunny-speech>p{flex:1 1 100%;min-width:0}
 body.phone #result-screen .bunny-speech>.voice-button{width:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
 body.phone #result-screen .bunny-speech>.voice-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 /* the entry takes what the speaker leaves of the row, so that the two keep to one row in a narrow bubble */
 body.phone #result-screen .bunny-speech>.more-button{flex:1 1 0;min-width:0;justify-content:center;margin:0;padding:0 8px}
 body.phone #result-screen #result-card.fresh .card-heading{padding-right:92px}
 body.phone #result-screen #result-card{margin-bottom:8px}
 /* a photograph on that card fills the height its place has (it had a height of its own, worked out from the
    window's, which the air above the buttons made 8px too much) */
 body.phone #result-screen .card-figure.photo-figure .knowledge-photo .photo-original{flex:1 1 0;min-height:0}
 body.phone #result-screen .card-figure.photo-figure .knowledge-photo img{height:100%;max-height:none}
}
@media (orientation:landscape) and (max-height:500px){
 /* on its side she is as large as the window's width allows */
 body.phone :is(#result-screen,#modal[data-kind=card]) .bunny-lesson-art{flex-basis:clamp(40px,6.4vw,58px);width:clamp(40px,6.4vw,58px)}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:640px){
 body.phone #modal[data-kind=card] .bunny-speech>.card-text{font-size:13px;line-height:1.45}
 body.phone #result-screen .bunny-speech>.more-button{font-size:13px}
 /* The smallest phones: with the guide beside it the bubble is narrow and its words run to many rows. The words'
    side gets more of the card's width, and the card's heading keeps to one row beside a new card's stamp (the tag
    that says what kind of card it is is left out). */
 body.phone #result-screen .knowledge-card{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
 body.phone #result-screen .card-kind{display:none}
}
/* A figure of three bodies that has become narrow (a small phone on its side): the names stand upright under the
   pictures, as the eight planets' names do, instead of running into each other ("主小行星带" is wider than its
   third of the figure). The names take the same height, so that the pictures keep the same size. */
body.phone :is(#result-screen,#atlas-cards.phone-deck,#modal[data-kind=card]) .card-figure:has(>.figure-object){container-type:inline-size}
@container (max-width:200px){
 body.phone .card-figure>.figure-object>span{writing-mode:vertical-rl;white-space:nowrap;align-self:center;min-height:5.3em;margin-top:4px;line-height:1.2;letter-spacing:.04em;text-align:start}
 body.phone .card-figure>.figure-object>svg{flex:none;width:100%;height:auto;max-height:none;aspect-ratio:1}
}

/* ---- The level itself (seen on the phone, 2026-10-13). ---- */
@media (orientation:landscape) and (max-height:500px){
 /* The counters in the bottom corner keep inside the window. The "in a row" counter was drawn at its wide-page
    size, taller than the row it stands in, and pushed the row's bottom edge below the window's. */
 body.phone .play-bottom{bottom:4px;height:auto;align-items:flex-end}
 body.phone .play-bottom-right{align-items:center}
 body.phone .live-count{align-items:center}
 body.phone .combo{align-items:center;gap:6px;min-height:28px;padding:0 12px}
 body.phone .combo small{font-size:13px}
 body.phone .combo b{font-size:20px;line-height:1}
 /* The countdown is smaller and keeps below the bar at the top (its ring reached under the bar). */
 body.phone .countdown{gap:26px;padding-top:62px}
 body.phone .countdown>strong{width:100px;height:100px;font-size:58px}
 body.phone .countdown>span{gap:8px;padding:5px 16px 5px 8px;font-size:15px}
 body.phone .countdown .rule-symbol{width:28px;height:28px}
 body.phone .countdown.go>strong{font-size:34px}
 /* The ship is shown here too: in the middle of the lanes' way, as large as it is on an upright phone (45% of the
    screen's short side). The six lanes run as before and their signals pass over it. */
 body.phone .battle-ship{top:calc(50% + 25px);width:45vh;width:45dvh}
}
@media (orientation:portrait){
 body.phone .countdown{gap:30px}
 body.phone .countdown>strong{width:124px;height:124px;font-size:72px}
 body.phone .countdown>span{gap:8px;padding:8px 18px 8px 10px;font-size:17px}
 body.phone .countdown .rule-symbol{width:34px;height:34px}
 body.phone .countdown.go>strong{font-size:42px}
}

/* ---- The settings have a fourth switch (the music, backlog B4): upright, the rows sit closer, so that the dialog
   still keeps to one screen. On its side the rows are in the left column and had the room. ---- */
@media (orientation:portrait){
 body.phone #modal[data-kind=settings] .setting-row{min-height:48px;margin-bottom:0;padding-top:2px;padding-bottom:2px}
 body.phone #modal[data-kind=settings] #modal-content>.action-button{min-height:48px;margin-top:8px}
}
@media (orientation:portrait) and (max-height:620px){
 body.phone #modal[data-kind=settings] .setting-row{min-height:44px}
 body.phone #modal[data-kind=settings] #modal-content>.action-button{min-height:44px;margin-top:6px}
}
/* A phone on its side, dialogs that only ask a question (leave the level, rest, clear the records): the words across,
   the two answers side by side under them. Stacked, they lay one on the other. The paused dialog's two rows of
   buttons keep clear of each other as well. */
@media (orientation:landscape) and (max-height:500px){
 body.phone #modal:is([data-kind=quit],[data-kind=rest],[data-kind=clear-records]) #modal-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;align-items:center}
 body.phone #modal:is([data-kind=quit],[data-kind=rest],[data-kind=clear-records]) #modal-content>:not(.action-button){grid-column:1/-1;margin:0}
 body.phone #modal[data-kind=pause] #modal-content{row-gap:12px}
}
/* The keepsake page on a phone on its side: the guide stands beside her words here too (the first phone layout left
   her out to save room; there is room). */
@media (orientation:landscape) and (max-height:500px){
 body.phone #modal[data-kind=keepsake] .keepsake-words{display:flex;align-items:center;gap:8px}
 body.phone #modal[data-kind=keepsake] .keepsake-words .bunny-lesson-art{display:block;flex:0 0 clamp(50px,9vw,84px);width:auto;height:auto;margin:0}
 body.phone #modal[data-kind=keepsake] .keepsake-words .bunny-lesson-art svg{display:block;width:100%;height:auto}
 body.phone #modal[data-kind=keepsake] .keepsake-words .bunny-speech{flex:1 1 0;min-width:0}
 body.phone #modal[data-kind=keepsake] .keepsake-words .bunny-speech::before{display:block}
}
/* The home page's picture for the last level is the whole solar system, two and a half times as wide as it is tall:
   at a planet's size it was a row of dots. It gets the width of several planets, and the guide stands at its right
   end. */
body.phone .home-screen .home-hero.with-system{grid-template-columns:minmax(0,1fr) min(176px,42vw)}
body.phone .home-screen .home-hero.with-system .observatory-scene,
body.phone .home-screen .home-hero.with-system .scene-porthole{width:min(176px,42vw)}
body.phone .home-screen .home-hero.with-system .scene-porthole{border-radius:48px}
body.phone .home-screen .hero-planet.system{width:calc(100% - 30px);height:auto;aspect-ratio:600/260;left:0;top:8px}
@media(orientation:landscape) and (max-height:500px){
 body.phone .home-screen .home-hero.with-system{grid-template-columns:minmax(0,1fr)}
 body.phone .home-screen .home-hero.with-system .observatory-scene,
 body.phone .home-screen .home-hero.with-system .scene-porthole{width:min(236px,100%)}
 body.phone .home-screen .hero-planet.system{width:calc(100% - 38px);top:2px}
}
/* 手机上设置和退出游戏都在下面（竖屏）或左边（横屏）的菜单里，顶上的齿轮和退出图标只在电脑上用（2026-10-27） */
body.phone .top-actions #settings,body.phone .top-actions #exit-game{display:none}