/* Shared phone layout, loaded after the individual game themes. */
@media screen and (max-width:700px){
 body{padding:0;background:#fffbe5}
 .game-shell{width:100%;border:0;border-radius:0;box-shadow:none}
 body .game-shell .topbar{min-height:70px;height:auto;padding:10px 12px;gap:10px}
 body .game-shell .brand{font-size:clamp(19px,5.6vw,28px);letter-spacing:-1px;flex:1;min-width:0;white-space:nowrap}
 .brand>span,.brand>b{-webkit-text-stroke-width:3px}
 body .game-shell .brand small{display:none}
 .header-side{flex-shrink:0;gap:3px;max-width:30%}
 .header-badges{gap:0}
 .save-status:not(.warning){display:none}
 .save-status.warning{font-size:10px;white-space:normal;text-align:right}
 body .game-shell .sound-toggle{min-height:44px;padding:6px 10px;font-size:11px;white-space:nowrap}
 body .game-shell .main-nav{padding:5px 5px 0;gap:3px;height:auto}
 body .game-shell .main-nav a{min-width:0;min-height:57px;padding:6px 1px;gap:4px;flex-direction:column;font-size:clamp(9px,2.6vw,12px);line-height:1.3;white-space:nowrap;border-width:1px;border-radius:9px 9px 0 0}
 body .game-shell .main-nav a span{font-size:20px;line-height:1}
 main{padding:18px 12px 24px;min-height:0}
 .screen-heading{align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:18px}
 .screen-heading>div{min-width:0}
 .screen-title{font-size:clamp(23px,6.5vw,32px);line-height:1.45;-webkit-text-stroke-width:4px;filter:drop-shadow(1px 2px 0 #68412b);overflow-wrap:anywhere}
 .screen-subtitle{font-size:13px;line-height:1.7}
 .counter-pill{font-size:12px;padding:5px 10px;border-width:2px}
 .counter-pill b{font-size:21px}
 .game-button{max-width:100%;font-size:17px;min-height:48px;line-height:1.5;padding:9px 15px;text-align:center}
 .button-row{gap:10px}
 input,select,textarea{max-width:100%;min-width:0;font-size:16px}
 dialog{max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
 .toast{max-width:calc(100vw - 24px);white-space:normal;line-height:1.5;bottom:max(16px,env(safe-area-inset-bottom))}
 footer{flex-wrap:wrap;gap:10px;padding:20px 14px max(20px,env(safe-area-inset-bottom));text-align:center}
 .site-introduction{padding:20px 16px}

 /* Art keeps its native proportions; text takes the space it needs. */
 .home-welcome{gap:8px;padding:12px}
 .welcome-copy h1{font-size:19px;line-height:1.5}
 .welcome-copy .nickname-edit{width:44px;flex-shrink:0}
 .home-actions{gap:12px}
 .home-action{min-width:0}
 .home-action>div{min-width:0}
 .home-action b{font-size:22px;line-height:1.45}
 .guide-dialogue p{min-width:0;font-size:14px;line-height:1.6}
 .world-banner-copy{max-width:100%}
 .world-thumbnail{aspect-ratio:1.45}
 .thumbnail-copy{left:16px;right:48px;bottom:14px}
 .thumbnail-copy h2{font-size:clamp(21px,6vw,27px);line-height:1.4;margin:6px 0}
 .thumbnail-play{right:12px;bottom:20px;width:32px;height:32px}
 .lesson-content{padding:14px}
 .difficulty-picker button{min-height:48px;font-size:14px;padding:8px 2px}
 .collection-tabs{gap:5px}
 .collection-tabs a{min-width:0;font-size:13px;padding:12px 3px}
 .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px}
 .card-slot{padding:7px;border-width:2px}
 .card-stars{white-space:normal;line-height:1.5}
 .detail-toolbar{gap:12px}
 .detail-toolbar .card-pager{width:100%;grid-template-columns:64px minmax(50px,1fr) 64px;gap:10px}
 .detail-toolbar .card-pager-step{width:64px;height:50px;border-radius:14px}
 .detail-toolbar .pager-arrow{width:32px;height:32px}
 .detail-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 .detail-card{max-width:280px}
 .detail-info .character-story{padding:16px}
 .detail-info .character-story .character-description{font-size:18px;line-height:1.8}
 .detail-stats{min-width:0}
 .detail-screen>.button-row .game-button{min-width:0;flex:1 1 130px;font-size:16px}
 .technique-detail{max-width:100%;min-width:0}
 .technique-detail .tech-description{font-size:17px;padding:14px}

 /* Preparation: keep numbers, names and complete artwork readable. */
 .selected-partner-stats.partner-status-card{padding:14px;border-radius:18px}
 .partner-status-portrait{top:14px;left:14px;width:72px;height:84px}
 .partner-status-portrait>.sprite{width:70px;height:auto;aspect-ratio:1}
 .partner-status-heading{padding-left:85px;min-height:92px}
 .partner-status-heading h3{font-size:20px;line-height:1.4}
 .partner-status-heading>div>span{font-size:11px;letter-spacing:0}
 .partner-favorite{max-width:100%;padding:4px 6px;gap:4px}
 .partner-favorite>span{font-size:10px}
 .partner-favorite b{font-size:13px;margin-left:3px}
 .partner-favorite>.hand-icon{width:25px;height:25px;flex-shrink:0}
 .partner-status-card .combat-meters{gap:8px;margin-top:12px}
 .partner-status-card .combat-meter{min-width:0;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px}
 .partner-status-card .combat-meter>span,.partner-status-card .combat-meter>b{grid-column:1;font-size:13px;white-space:normal}
 .partner-status-card .combat-meter>b{font-size:27px}
 .partner-status-card .combat-stat-icon{width:16px;height:16px;margin-right:3px}
 .move-kit{padding:12px!important}
 .move-kit-title{gap:10px;margin-bottom:16px}
 .move-kit-title b{font-size:20px}
 .move-kit-title p>span{font-size:16px}
 .move-slot-head{min-height:80px;gap:10px;padding:12px}
 .move-slot-head h3,.move-compact .move-slot-head h3{font-size:25px;white-space:normal}
 .move-slot-head h3>span{font-size:14px}
 .move-slot-head p{font-size:12px}
 .move-hand-orb{width:52px;height:52px}
 .move-hand-orb>.hand-icon{width:44px;height:44px}
 .move-slot-body{padding:12px;display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;align-items:start}
 .move-art{height:auto;aspect-ratio:auto;min-width:0}
 .move-art img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;flex:none}
 .move-art>span{font-size:10px;padding:4px 2px}
 .move-select{min-width:0}
 .move-select>label{margin:0 0 6px;font-size:13px}
 .move-select select,.move-compact .move-select select{font-size:16px;min-height:48px;padding:8px 20px 8px 6px}
 .move-slot .tech-fit{grid-column:1/-1;margin:0;padding:5px;min-height:0}
 .move-slot .tech-fit-result{min-height:44px;padding:6px;gap:6px}
 .move-slot .tech-fit-result>span{font-size:18px}
 .move-slot .move-effect{grid-column:1/-1;font-size:14px;margin:0;line-height:1.6}
 .move-slot .kit-special-effect{font-size:14px}
 .move-kit .kit-links{flex-wrap:wrap;gap:0 12px;margin-top:14px}
 .enemy-selection,.opponent-copy{min-width:0}

 /* Battle actions sit together below the two opponents. */
 .visual-duel .duel-hud{padding:10px 8px;gap:5px;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)}
 .visual-duel .fighter-name>b{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
 .visual-duel .fighter-life{grid-template-columns:18px auto minmax(0,1fr);gap:3px}
 .visual-duel .fighter-life>strong{font-size:26px}
 .visual-duel .fighter-life>span{font-size:11px;white-space:nowrap}
 .visual-duel .fighter-stock{gap:5px}
 .visual-duel .stock-hand{flex:1;min-width:0;width:auto;height:44px}
 .visual-duel .fighter-stock .hand-icon{width:29px;height:29px}
 .visual-duel .duel-arena{height:215px}
 .visual-duel .duel-actor{width:min(43cqw,67cqh);height:min(43cqw,67cqh);bottom:38px}
 .visual-duel .duel-hands{gap:8px}
 .visual-duel .duel-hands>button,.visual-duel .duel-hands>span{min-width:0;flex:1;padding:3px;gap:3px}
 .visual-duel .duel-hands b{font-size:10px;white-space:nowrap}
 .visual-duel .duel-hands .hand-icon{width:27px;height:27px}
 .visual-duel .duel-choose-tip{font-size:18px;margin-bottom:12px}
 .visual-duel .duel-hand-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .visual-duel .duel-hand-options .hand-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:112px;padding:9px 4px;text-align:center;border-radius:13px}
 .visual-duel .choice-orb{width:48px;height:48px;flex-shrink:0}
 .visual-duel .duel-hand-options .hand-icon{width:44px;height:44px}
 .visual-duel .duel-hand-options .hand-tech-name{font-size:14px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
 .visual-duel .choice-effect{font-size:11px;line-height:1.3;margin-top:3px}
 .visual-duel .choice-effect .battle-icon{width:18px;height:18px}
 .visual-duel .duel-hand-options small{font-size:10px;right:4px;top:-8px}
 .visual-duel .duel-math{grid-template-columns:48px minmax(0,1fr);gap:8px}
 .visual-duel .duel-equation{font-size:23px;gap:4px}
 .visual-duel .duel-equation output{font-size:28px;width:60px}
 .visual-duel .duel-time b{font-size:23px}
 .visual-duel .duel-keypad{gap:8px}
 .visual-duel .duel-keypad button{min-height:48px;font-size:25px}
 .arena-roulette .dodge-outcome{font-size:19px;white-space:normal;line-height:1.4}
 .battle-move-popover{max-width:calc(100vw - 24px)}

 /* Shared rooms stay usable at the narrowest phone width. */
 .online-page{padding:14px 10px!important}
 .room-entry-hero{gap:10px;padding:18px 12px}
 .room-entry-crest{display:none}
 .premium-entry .online-entry-actions>section,.premium-entry .online-entry-actions>form{padding:0 16px 20px}
 .entry-code-preview{gap:4px;width:100%;min-width:0}
 .entry-code-preview i{width:auto;flex:1;max-width:37px;min-width:0}
 .premium-entry .entry-card-copy h2{font-size:25px}
 .premium-entry .entry-card-copy p{font-size:16px}
 .premium-entry .online-entry-actions .entry-start{font-size:19px;padding:10px 12px}
 .room-code-header{padding:10px;border-width:2px}
 .room-code-card{padding:12px 9px}
 .room-code-card h2{font-size:16px;gap:5px;flex-wrap:wrap}
 .room-code-digits>span{height:48px;font-size:30px;border-width:1px}
 .room-my-team,.room-friend-team{padding:13px;border-width:2px}
 .room-character{grid-template-columns:70px minmax(0,1fr);gap:10px}
 .room-character-art{width:70px;height:auto;aspect-ratio:1}
 .room-character label{font-size:15px}
 .room-character .combat-meters{padding:0;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .room-character .combat-meter{min-width:0;grid-template-columns:1fr;font-size:12px;gap:4px}
 .room-character .combat-meter b{font-size:22px}
 .room-character .combat-stat-icon{display:none}
 .room-player-heading h2{font-size:20px}
 .room-player-heading>span{padding:4px 8px;font-size:13px}
 .room-ready-states{flex-wrap:wrap}

 /* Learning controls and result dialogs fit without shrinking the text. */
 .quiz-panel{padding:16px 12px;min-width:0}
 .quiz-question{font-size:20px;overflow-wrap:anywhere}
 .answers{gap:9px}
 .answer-button{padding:10px 5px;min-height:48px}
 .quiz-progress{flex-wrap:wrap;gap:5px}
 .quiz-progress span{width:24px}
 .sweets-layout .pancake-arena{min-height:320px}
 .rounding-keypad button,.sweets-layout .rounding-keypad button{min-height:44px}
 .rounding-keypad .rounding-submit{min-height:48px}
 .pancake-console-slot{height:auto;min-height:0;padding:10px 0}
 .sky-keypad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;gap:6px}
 .sky-keypad .sky-button{width:100%;min-height:44px;font-size:20px}
 .sky-feedback p{min-width:0;flex:1 1 180px}
 .sky-feedback .sky-button{flex:1 1 100%;min-height:48px}
 .sky-flight-tools{gap:8px}
 .sky-target-count{padding:5px 10px;font-size:13px}
 .sky-hint-button{min-height:44px;padding:8px 12px}
 .sky-target{min-width:0}
 .sky-target>svg{max-width:100%}
 .ninja-mentor>.sprite{height:auto;aspect-ratio:1;flex-shrink:0}
 .ninja-welcome .ninja-mentor>.sprite{height:auto;aspect-ratio:1;margin:0;width:45%}
 .ninja-keypad{grid-template-columns:repeat(5,minmax(0,1fr))}
 .ninja-keypad button{min-height:44px}
 .sky-pilot-hero .sprite{max-height:none;height:auto;aspect-ratio:1}

 body:is([data-screen="fight"],[data-screen="pancake"],[data-screen="reading"],[data-screen="lesson"],[data-screen="division"]) .game-shell .main-nav{display:none}
 body:is([data-screen="fight"],[data-screen="pancake"],[data-screen="reading"]) #app>.screen-heading{display:none}
 .visual-duel .duel-console{padding:12px 8px}
 .visual-duel .duel-hud{padding-bottom:8px}
 .sweets-hud{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:9px 12px}
 .sweets-hud .dessert-progress{grid-row:2;grid-column:1/-1;justify-content:center}
 .sweets-level{grid-column:2;grid-row:1;white-space:nowrap}
 .sweets-layout .pancake-console-slot{height:auto;min-height:0;padding:5px 0}
 .sweets-layout .pancake-arena{height:360px;min-height:360px}
 .sweets-layout .order-sign{font-size:16px;line-height:1.4}
 .sweet-aim-hint{font-size:16px;padding:6px 4px;margin-top:6px;line-height:1.5;border-width:2px;border-radius:12px}
 .sweet-aim-hint>span:first-child{display:none}
 .sweets-layout .pancake-overlay{top:76px;max-height:calc(100% - 90px);padding:12px}
 .sweets-layout .pancake-overlay>strong{font-size:21px}
 .sweets-layout .pancake-overlay p{font-size:15px;line-height:1.6}
 .sweets-layout .pancake-overlay .game-button{font-size:16px;min-height:48px;padding:8px}
 .sweets-layout .shot-prompt{font-size:16px;margin-bottom:10px}
 .sweets-layout .shot-next{font-size:13px;margin:10px 0 0}
 .sweets-layout .shoot-feedback{font-size:14px;min-height:0}
 .sweets-layout .shoot-feedback:empty{display:none}
 .sweets-layout .fall-clock{bottom:15px;right:9px}
 .sweets-layout .number-pancake small{min-width:0;width:100%;padding:3px 0;font-size:10px}

 .lesson-board{display:flex;flex-direction:column;gap:16px}
 .lesson-board>.quiz-panel{order:-1}
 .lesson-board>.quest-scene{margin:0;min-height:210px}
 .forest-book-scene{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:16px 12px;margin:0;gap:18px}
 .book-scene-heading{padding:0}
 .book-scene-heading h2{font-size:18px;line-height:1.5;margin:5px 0 0}
 .storybook{position:relative;inset:auto;width:90%;height:175px;flex-shrink:0;margin:0 auto}
 .book-guide{position:relative;inset:auto;gap:8px}
 .book-guide>p{min-width:0;font-size:14px;padding:8px;line-height:1.6}
 .book-guide>.sprite{width:65px}
 .paper-progress{position:static}
 .kanji-lesson .forest-quiz .answers{gap:9px}
 .kanji-lesson .forest-quiz .answer-button{min-height:64px}
 .kanji-lesson .forest-quiz.origin-quiz .origin-feedback{padding:16px 12px;gap:10px}
 .origin-feedback>strong{font-size:19px}
 .origin-feedback>p,.origin-examples{font-size:17px}

 .ninja-mentor{margin:10px 0 0;gap:10px;min-width:0}
 .ninja-mentor p{min-width:0;font-size:14px;padding:0;line-height:1.7}
 .ninja-welcome .ninja-mentor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;padding:12px 0}
 .ninja-welcome .ninja-mentor>.sprite{width:100%;max-width:135px;height:auto;aspect-ratio:1;margin:0}
 .ninja-welcome .ninja-mentor p{grid-column:1/-1;text-align:center}
 .ninja-workbench{padding:10px;gap:14px}
 .ninja-welcome .ninja-paper{padding:14px 10px 0}
 .ninja-keypad .ninja-button,.ninja-keypad .ninja-button:last-child{min-height:44px}
 .ninja-task h2{font-size:23px}
 .ninja-command{padding:16px 12px 12px}
 .ninja-step-track{gap:4px;padding:8px 4px;font-size:14px}
 .ninja-step-track span{padding:5px;gap:4px}
 .ninja-entry{gap:8px;flex-wrap:wrap;justify-content:center}
 .ninja-entry input{font-size:32px;width:85px;height:56px}
 .sky-route{gap:7px}
 .sky-route li{min-width:0;gap:5px}
 .sky-route li b{font-size:10px;white-space:nowrap}
 .sky-route li>span{flex-shrink:0}
 .sky-brand{min-width:0}
 .sky-brand b{font-size:13px}
 .sky-lives{font-size:16px;padding:4px 7px}
 .sky-hud{gap:7px}
 .sky-intro h1{font-size:27px}
 .sky-intro{padding:22px 16px 330px}
 .sky-diagram{aspect-ratio:1000/520}
 .cloud-path circle{r:32px}
 .cloud-path text{font-size:48px;transform:translateY(8px)}
 .cloud-trail{stroke-width:8}
 .known-label{font-size:47px}
 .angle-choice text{font-size:43px}
 .parallel-key{font-size:27px}
 .sky-angle-form{flex-wrap:wrap;justify-content:center;max-width:100%;gap:7px}
 .sky-angle-form .sky-button{padding:9px 12px;font-size:16px}
 .sky-back,.sky-pause{min-width:40px;min-height:44px;flex-basis:40px}
 .sky-intro-copy small{line-height:1.6}
}

@media screen and (min-width:701px) and (max-width:1100px){
 .move-slot-head{gap:8px;padding:12px 10px}
 .move-slot-head>div{min-width:0}
 .move-slot-head h3{font-size:24px;white-space:normal}
 .move-slot-head h3>span{display:block;margin:4px 0 0;font-size:14px}
 .move-slot-head p{font-size:12px}
 .move-hand-orb{width:50px;height:50px}
 .move-hand-orb>.hand-icon{width:42px;height:42px}
 .move-slot .tech-fit-result>span{font-size:18px}
 .move-slot .fit-seal{flex-shrink:0;width:26px;height:26px;font-size:24px}
}

@media screen and (max-width:899px){
 .opponent-art>.enemy-sprite{max-width:100%;height:auto;aspect-ratio:9/8}
 .opponent-art>.enemy-sprite.halloween-sprite{aspect-ratio:1}
 .opponent-art{min-width:0}
}

@media screen and (max-width:360px){
 .partner-status-card .combat-meter{padding:9px 6px}
 .partner-status-card .combat-meter>span{font-size:12px}
 .partner-status-heading h3{font-size:18px}
 .partner-favorite b{display:block;margin-left:0}
 .move-slot-body{grid-template-columns:65px minmax(0,1fr);gap:8px;padding:10px}
 .move-compact .move-slot-body{grid-template-columns:58px minmax(0,1fr);gap:8px}
 .move-compact .move-hand-orb{width:44px;height:44px}
 .move-compact .move-hand-orb>.hand-icon{width:38px;height:38px}
 .visual-duel .fighter-life>strong{font-size:23px}
 .visual-duel .fighter-stock{gap:3px}
 .visual-duel .duel-equation{font-size:21px}
 .visual-duel .duel-equation output{width:52px}
 .difficulty-picker button{font-size:12px}
}