/* Latest user decision: portrait phone, orthographic map, identical game rules. */
@media(max-width:600px) and (orientation:portrait){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0}
 #orientation{display:none!important}#app{visibility:visible;--phone-panel-top:189px}#map{transform:none}
 #top{height:96px;padding:5px 8px;display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:43px 36px;gap:4px 6px}
 .wordmark{grid-column:1/3;grid-row:1;align-self:start;justify-self:start;display:flex;align-items:baseline;font-size:16px;line-height:21px;min-width:0;padding:0;letter-spacing:1px;border:0;white-space:nowrap}.wordmark span{display:inline;font-size:12px;letter-spacing:1px;margin:0}.wordmark span::before{content:'：'}#nation-heading{grid-column:1/3;grid-row:1;align-self:end;font-size:11px;line-height:18px;max-width:none;gap:5px;white-space:nowrap}#nation-heading .flag{width:24px;height:16px}
 .clock{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.clock>div{margin:0;gap:3px}.clock button{height:30px;min-width:29px;padding:2px 6px;font-size:12px}#date{font-size:10px}#speeds{gap:3px}
 .resources{grid-row:2;grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;width:100%;padding:4px 1px;border-top:1px solid #a7925133}.resources span{font-size:10px;gap:2px}.resources b{font-size:14px}
 #nav{top:96px;left:45px;right:6px;height:40px;scrollbar-width:none}#nav button{min-width:60px;min-height:40px;flex:0 0 auto;padding:4px 7px;font-size:11px;gap:4px}#nav button span{font-size:15px}
 #nav-collapse{display:block;position:fixed;z-index:10;left:5px;top:96px;width:38px;height:40px;padding:3px;font-size:18px}#app:has(#menu:not([hidden])) #nav-collapse{display:none}
 #app.navigation-collapsed #nav{display:none}#app.navigation-collapsed #map-tools{top:102px;left:49px}#app.navigation-collapsed{--phone-panel-top:148px}
 #map-tools{top:143px;left:7px;right:auto;display:flex;gap:4px}#map-tools button{min-width:36px;min-height:38px;padding:6px 9px;font-size:12px}
 #map-caption{display:none}#audio-toggle{right:7px;top:auto;bottom:12px;width:38px;height:38px;padding:4px;font-size:18px}#message-dock{left:7px;right:auto;top:auto;bottom:12px;width:66px;height:38px;padding:6px;font-size:12px}
 #panel,#panel.province-panel{left:6px;right:auto;top:var(--phone-panel-top);bottom:60px;width:calc(100% - 12px);max-width:390px;border:1px solid #a28c55}
 #panel>header,#panel.province-panel>header{padding:6px 12px;min-height:48px}#panel h2,#panel.province-panel h2{font-size:20px;margin:2px 0}#panel-kicker{font-size:9px}#panel>header button{min-height:40px;min-width:40px;font-size:28px}
 #panel-content,.province-panel #panel-content{padding:12px;min-height:0;font-size:13px}#panel-content button{min-height:40px}#panel-content select,#panel-content input{font-size:14px;min-height:40px;max-width:100%}
 #province-tabs button{min-height:42px;font-size:14px}.facility-tile img{height:56px}.facility-detail>img{width:68px}.facility-grid{gap:9px}
 #command{left:6px;right:6px;bottom:8px;padding:8px;min-height:64px;display:flex;gap:8px;align-items:center}#command-info{font-size:11px;min-width:0;flex:1}.command-buttons{gap:5px}.command-buttons button{font-size:12px;padding:8px;min-height:42px}
 #app:has(#command:not([hidden])) #panel{bottom:84px}#app:has(#command:not([hidden])) #audio-toggle,#app:has(#command:not([hidden])) #message-dock{display:none}
 #unit-tactics{width:min(280px,calc(100vw - 48px));max-height:min(36dvh,280px)!important;padding:7px;overscroll-behavior:contain}#unit-tactics.armed:not(.sea-tactics){width:min(244px,calc(100vw - 48px))}
 #unit-tactics header{position:sticky;top:-7px;z-index:1;background:#17251f;font-size:12px;padding-bottom:3px}#unit-tactics header button{height:36px;min-height:36px;min-width:36px;padding:2px 7px}
 .tactical-members{max-height:76px;padding:3px 0;overscroll-behavior:contain}.tactical-members label{min-height:36px;font-size:11px;line-height:1.35;align-items:center}.tactical-members input{min-width:20px;min-height:20px;flex:none}
 .tactical-actions,.sea-targets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.tactical-actions button,.sea-targets button{min-width:0;min-height:36px;font-size:12px;padding:5px 3px;line-height:1.3}#unit-tactics.armed:not(.sea-tactics) .tactical-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.sea-targets{margin-top:6px}#unit-tactics p{font-size:11px;margin-top:5px;line-height:1.4}
 #area-drawing{width:calc(100% - 12px);max-width:none;bottom:7px;padding:10px;font-size:13px}#area-drawing div{gap:6px}#area-drawing button{min-height:44px;flex:1;padding:8px 5px}#area-drawing small{font-size:12px}#app:has(#area-drawing:not([hidden])) #command{display:none}
 #tutorial,#app.politics-open #tutorial{left:6px;right:6px;bottom:60px;width:auto;max-height:200px;display:block;padding:10px 12px}#tutorial h3{font-size:19px}#tutorial button{min-height:36px;font-size:12px}#tutorial p{font-size:12px}.guide-phases{font-size:11px}.guide-input{display:none}
 #app:has(#tutorial:not([hidden])) #panel{top:var(--phone-panel-top);bottom:274px}#app:has(#tutorial:not([hidden])) #unit-tactics{max-height:240px!important}#app:has(#command:not([hidden])) #tutorial{bottom:84px}
 #panel.politics-panel{left:6px;right:6px;top:var(--phone-panel-top);bottom:60px;width:auto;max-width:none}#app.politics-open:has(#tutorial:not([hidden])) #panel.politics-panel{top:var(--phone-panel-top);bottom:274px}
 .politics-overview,.politics-card-grid,.politics-card-grid.government-grid{grid-template-columns:1fr;gap:12px}.politics-leader{grid-template-columns:100px 1fr}.politics-leader>img{height:125px}.politics-frame{padding:12px}.politics-leader{padding-bottom:30px}.politics-tabs{top:-12px;gap:4px}.politics-tabs button{font-size:12px;min-height:44px;padding:6px 2px}.politics-metrics .row{font-size:16px}.policy-card-head img{width:90px;height:85px}.policy-card>button{min-height:44px}.politics-footnote{font-size:11px!important}
 #menu{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.menu-layout{display:flex;flex-direction:column;min-height:0;padding:25px 17px 12px;gap:20px}.menu-brand{width:100%}.menu-brand .eyebrow{font-size:9px;letter-spacing:3px;margin-bottom:9px}.menu-brand h1{font-size:48px;letter-spacing:12px;margin:0}.menu-brand h1 span{font-size:22px;letter-spacing:9px;margin-top:5px}.gold-rule{margin:12px 0;width:105px}.menu-brand p{display:none}.menu-date{font-size:25px;margin-top:5px}.menu-date span{font-size:12px}.build-label{font-size:9px;margin-top:8px}.campaign-card{width:100%;padding:17px}.campaign-card h2{font-size:23px;margin:8px 0 14px}#factions{gap:7px}#factions button{min-height:60px;font-size:12px;padding:7px 3px}#faction-description{min-height:0;font-size:12px;line-height:1.65;margin:12px 0}.check{font-size:12px;min-height:36px;margin:8px 0}.check input{width:20px;height:20px}.start{font-size:15px;min-height:46px}.menu-links button{min-height:40px;font-size:12px}.menu-bottom{height:auto;min-height:42px;padding:10px 17px;gap:8px;flex-wrap:wrap;font-size:9px;letter-spacing:1px}
 #modal-layer,#modal-layer.message-layer{padding:16px}.modal,.dispatch,.dispatch.telegram,.dispatch.newspaper,#modal-layer.located .dispatch{width:min(320px,calc(100vw - 48px));max-width:100%;max-height:64dvh}.dispatch.newspaper{max-height:66dvh}
 .modal-header,.dispatch .modal-header,.dispatch.newspaper .modal-header{padding:8px 11px;gap:8px;flex-shrink:0}.modal-header h2,.dispatch .modal-header h2{font-size:18px;letter-spacing:2px}.modal-header>button{min-width:36px;min-height:36px;padding:4px;font-size:16px}.dispatch-symbol{width:25px;height:25px;font-size:21px}
 .modal-content,.dispatch .modal-content{padding:10px 12px;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-y;font-size:13px}.modal-content p{font-size:13px;line-height:1.65}.modal-content input,.modal-content select{max-width:100%;min-height:36px;font-size:16px}
 .modal-footer,.dispatch .modal-footer{padding:7px 10px;flex-wrap:wrap;gap:6px;flex-shrink:0}.modal-footer button,.dispatch button{min-height:40px;min-width:56px;font-size:13px;padding:6px 10px;line-height:1.3}.dispatch-status{padding:5px 10px;font-size:10px;flex-shrink:0}
 .dispatch h3{font-size:20px;line-height:1.4;margin:0 0 8px}.dispatch p{font-size:14px;line-height:1.65;margin-bottom:7px}.dispatch-body{gap:10px}.dispatch-body>figure{width:30%}.dispatch figcaption{font-size:10px}.dispatch svg{max-height:110px}
 .dispatch.telegram .modal-header{padding-top:8px}.dispatch.telegram .dispatch-symbol{font-size:25px}.dispatch.telegram .telegram-stamp{font-size:11px;margin-top:12px}
 .dispatch.newspaper .modal-header h2{font-size:23px;letter-spacing:4px}.dispatch.newspaper h3{font-size:21px;margin:9px 0}.edition-line{font-size:10px;padding-bottom:6px}.newspaper-columns{grid-template-columns:1fr;gap:10px}.newspaper-columns>aside{border-left:0;padding-left:0;border-top:1px solid #887d5b;padding-top:9px}.newspaper-columns h4{font-size:16px;margin-bottom:7px}.dispatch .history-scene{margin-bottom:8px}.dispatch .history-scene img{max-height:130px;object-fit:contain}.background-note{padding:8px 0;margin-top:8px}.background-note p{font-size:12px}.settings-grid{grid-template-columns:1fr}
 #toast{left:10px;right:10px;transform:none;bottom:88px;max-width:none;width:auto;font-size:12px;padding:12px}
}

@media(max-width:600px) and (orientation:portrait){
 .equipment-preview-button{display:block;width:100%;padding:0;overflow:hidden;border-radius:3px}
 .equipment-image{display:block;width:100%;height:auto;max-height:none;object-fit:contain;margin:0}
 .equipment-detail{margin:0}.equipment-detail img{width:100%;height:auto;max-height:none}
 .peace-preview{grid-template-columns:1fr}.peace-map{max-height:180px}
}

@media(max-width:600px) and (orientation:portrait){
 .resources{gap:3px}.resources span,.resources .resource-button{min-width:0;font-size:9px;gap:2px}.resources b{font-size:12px}.resources .resource-button{padding:0 2px;min-height:31px;justify-content:center}
}

/* Keep tutorial actions inside the visible phone viewport, including browser chrome. */
@media(max-width:600px) and (orientation:portrait){
 #app{--phone-safe-bottom:env(safe-area-inset-bottom,0px);--phone-bottom-controls:calc(60px + var(--phone-safe-bottom));--phone-tutorial-height:clamp(144px,28dvh,218px);height:100dvh;bottom:auto}
 #app:has(#command:not([hidden])){--phone-bottom-controls:calc(76px + var(--phone-safe-bottom))}
 #tutorial,#app.politics-open #tutorial,#app:has(#command:not([hidden])) #tutorial{bottom:var(--phone-bottom-controls);height:var(--phone-tutorial-height);max-height:var(--phone-tutorial-height);display:flex;flex-direction:column;gap:0;padding:6px 10px;overflow:hidden;min-height:0}
 #tutorial .tutorial-top{flex:none;min-height:32px;letter-spacing:1px}
 #tutorial .tutorial-top button{min-height:32px;padding:3px 8px}
 #tutorial .tutorial-body{display:block;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:0 2px 5px}
 #tutorial .guide-phases,#app.politics-open #tutorial .guide-phases{margin:3px 0;padding:4px 0;font-size:10px}
 #tutorial h3,#app.politics-open #tutorial h3{font-size:16px;margin:5px 0;line-height:1.35}
 #tutorial p,#app.politics-open #tutorial .tutorial-body>p{font-size:12px;line-height:1.55;margin:5px 0}
 #tutorial .guide-step{font-size:12px;margin-top:5px}
 #tutorial>.actions,#app.politics-open #tutorial>.actions{display:grid;grid-template-columns:1.25fr 1fr .6fr;gap:5px;flex:none;align-self:stretch;max-width:none;margin:0;padding-top:5px;border-top:1px solid #82744d66;background:#1b251f}
 #tutorial>.actions button,#app.politics-open #tutorial>.actions button{min-width:0;min-height:36px;padding:5px 3px;font-size:12px;white-space:normal;line-height:1.3}
 #app:has(#tutorial:not([hidden])) #panel,#app.politics-open:has(#tutorial:not([hidden])) #panel.politics-panel{top:var(--phone-panel-top);bottom:calc(var(--phone-bottom-controls) + var(--phone-tutorial-height) + 8px);min-height:0}
 #app:has(#tutorial:not([hidden])) #panel>header{flex:none;min-height:36px;padding:2px 10px}
 #app:has(#tutorial:not([hidden])) #panel>header #panel-kicker{display:none}
 #app:has(#tutorial:not([hidden])) #panel h2{font-size:17px;margin:1px 0}
 #app:has(#tutorial:not([hidden])) #panel>header button{min-height:32px;min-width:34px;font-size:24px}
 #app:has(#tutorial:not([hidden])) #province-tabs{flex:none}
 #app:has(#tutorial:not([hidden])) #province-tabs button{min-height:34px;padding:5px 8px;font-size:12px}
 #app:has(#tutorial:not([hidden])) #panel-content{padding:8px 10px;min-height:0}
 #command{bottom:calc(8px + var(--phone-safe-bottom));min-height:56px;height:56px;padding:6px}
 #command-info{max-height:42px;overflow:auto;overscroll-behavior:contain;line-height:1.4}
 #message-dock,#audio-toggle{bottom:calc(12px + var(--phone-safe-bottom))}
 #app:has(#tutorial:not([hidden])) #toast{bottom:calc(var(--phone-bottom-controls) + var(--phone-tutorial-height) + 10px)}
 #unit-tactics,#app:has(#tutorial:not([hidden])) #unit-tactics{max-height:min(36dvh,280px,var(--tactical-available,280px))!important}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:550px){
 #app{--phone-tutorial-height:128px;--phone-bottom-controls:calc(50px + var(--phone-safe-bottom))}
 #app:has(#command:not([hidden])){--phone-bottom-controls:calc(66px + var(--phone-safe-bottom))}
 #command{height:48px;min-height:48px}#command .command-buttons button{min-height:36px}
 #tutorial .tutorial-top,#tutorial .tutorial-top button{min-height:28px}#tutorial>.actions button,#app.politics-open #tutorial>.actions button{min-height:32px}
}

/* Pin the phone HUD independently of panel scrolling and reserve notch space. */
@media(max-width:600px) and (orientation:portrait){
 #app{--phone-safe-top:env(safe-area-inset-top,0px);--phone-panel-top:calc(189px + var(--phone-safe-top));overflow:clip}
 #app.navigation-collapsed{--phone-panel-top:calc(148px + var(--phone-safe-top))}
 #top{position:fixed;z-index:15;top:0;height:calc(96px + var(--phone-safe-top));padding-top:calc(5px + var(--phone-safe-top))}
 #nav,#nav-collapse{position:fixed;z-index:15;top:calc(96px + var(--phone-safe-top))}
 #map-tools{position:fixed;z-index:13;top:calc(143px + var(--phone-safe-top))}
 #app.navigation-collapsed #map-tools{top:calc(102px + var(--phone-safe-top))}
 .menu-brand .publisher-credit{font-size:11px;line-height:1.6;letter-spacing:.3px;white-space:normal}
}