/* Latest user direction, 2026-10-01: top navigation, left panel, centered events. */
#nav-collapse{display:none}
#area-drawing{position:fixed;z-index:20;bottom:12px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);width:480px;padding:10px 14px;background:#17251ff5;border:1px solid #9ac9ca;box-shadow:0 4px 16px #0007;color:#e0ece3;font-size:13px}
#area-drawing small{display:block;margin:5px 0;font-size:11px;color:#b8d4d0}#area-drawing div{display:flex;gap:8px}#area-drawing button{min-height:36px;padding:7px 12px;font-size:12px}
.commander-controls{padding:10px;margin-bottom:12px;border:1px solid #a28d56;background:#20291f}.commander-controls summary{color:#e6cf9c;cursor:pointer}.commander-controls select{margin-top:8px;width:100%}
#unit-tactics.armed:not(.sea-tactics){width:250px}#unit-tactics.armed .tactical-members,#unit-tactics.armed .tactical-actions [data-tactic],#unit-tactics.armed .tactical-actions [data-action="officer-panel"]{display:none}#unit-tactics.armed:not(.sea-tactics) p{max-height:30px;overflow:auto;margin-top:3px;font-size:10px}#unit-tactics.armed header{padding-bottom:2px}#unit-tactics.armed .tactical-actions{margin-top:4px}
#unit-tactics{position:fixed;z-index:12;width:330px;max-width:calc(100vw - 20px);padding:10px;background:#17251ff5;color:#f0e2bf;border:1px solid #b8a16c;box-shadow:0 6px 22px #0009;border-radius:5px;overflow:auto;touch-action:pan-y}
#unit-tactics header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b8a16c66;padding-bottom:5px;font-size:12px}#unit-tactics header button{padding:2px 10px;font-size:18px}#unit-tactics p{font-size:12px;margin:8px 0 0;line-height:1.5}.tactical-members{max-height:76px;overflow:auto;padding:5px 0}.tactical-members label{display:flex;gap:5px;font-size:11px;padding:4px 0}.tactical-actions,.sea-targets{display:flex;gap:5px;flex-wrap:wrap}.tactical-actions button,.sea-targets button{font-size:12px;min-height:34px;padding:6px 9px}.tactical-actions .active{background:#6c623c;border-color:#e8d398}.sea-targets{margin-top:8px}
@media(max-height:550px){#unit-tactics{width:300px;padding:7px}.tactical-members{max-height:40px}.tactical-actions button,.sea-targets button{min-height:32px;padding:5px 7px}#unit-tactics p{font-size:11px;margin-top:5px}}
.group-controls{border:1px solid #82734e;padding:10px;margin-bottom:12px;background:#172119}.group-controls summary{cursor:pointer;color:#e0c797;font-size:13px;padding:6px 0}.group-controls .field{margin-top:10px}.group-controls input{max-width:100%;background:#1d2724;color:#e5dfc9;border:1px solid #727657;padding:9px}.group-summary{border-top:1px solid #82734e66;margin-top:8px;padding-top:5px}.group-summary button{font-size:11px;padding:6px}
#nav{top:70px;left:12px;right:12px;bottom:auto;width:auto;height:49px;display:flex;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;white-space:nowrap;z-index:8}
#nav button{width:auto;min-width:74px;flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;border-right:1px solid #ffffff12;border-bottom:0;padding:8px 12px;font-size:12px}
#nav button span{display:inline-block;font-size:21px;margin:0}#nav button.active{border-left:0;border-bottom:3px solid var(--gold)}
#panel{left:14px;right:auto;top:132px;width:360px;bottom:87px}#panel.province-panel{left:14px;right:auto;top:132px;width:390px;bottom:87px}
#map-tools{left:auto;right:14px;top:132px}#map-caption{left:auto;right:14px;top:179px}
#tutorial{left:auto;right:14px;bottom:87px;max-height:calc(100dvh - 300px)}
#command{left:14px;right:14px;bottom:14px}#message-dock{left:auto;right:315px;top:132px;bottom:auto;width:73px;height:33px}#audio-toggle{top:172px;bottom:auto;right:14px}
#map-caption{right:58px}#panel.politics-panel{left:14px;right:14px;top:132px;bottom:87px;width:auto}
#app.politics-open:has(#tutorial:not([hidden])) #panel.politics-panel{bottom:236px}
#app.politics-open #tutorial{left:14px;right:14px;bottom:87px;max-height:135px}
#modal-layer.message-layer,#modal-layer.telegram-layer,#modal-layer.important-layer,#modal-layer.located{justify-content:center;align-items:center}
#modal-layer.located .dispatch{width:min(550px,82vw)}
@media(max-height:550px) and (orientation:landscape){
 #nav{top:49px;left:7px;right:7px;height:40px}#nav button{flex:1 0 55px;min-width:55px;padding:5px 8px;font-size:10px;gap:4px}#nav button span{font-size:17px}
 #panel,#panel.province-panel{left:7px;right:auto;top:98px;bottom:62px;width:285px}#panel>header{padding:6px 12px}
 #map-tools{left:auto;right:7px;top:98px}#map-caption{left:auto;right:42px;top:138px;font-size:9px}#map-caption small{display:none}
 #tutorial{left:auto;right:7px;bottom:62px;width:270px;max-height:calc(100dvh - 220px)}
 #command{left:7px;right:7px;bottom:7px}#message-dock{left:auto;right:250px;top:98px;bottom:auto;width:60px;height:29px;padding:5px 3px}#audio-toggle{right:7px;top:133px;bottom:auto;padding:4px 8px}
 #panel.politics-panel{left:7px;right:7px;top:98px;bottom:62px;width:auto}
 #app.politics-open:has(#tutorial:not([hidden])) #panel.politics-panel{bottom:164px}
 #app.politics-open #tutorial{left:7px;right:7px;bottom:62px;max-height:94px;width:auto}
 #modal-layer.located .dispatch{width:min(480px,82vw)}
}
/* Compact touch layout keeps an orthographic map and preserves usable hit targets. */
@media(max-height:550px) and (orientation:landscape){
 #top{height:36px;padding:2px max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left));gap:8px}
 .wordmark{font-size:16px;min-width:42px;letter-spacing:2px;padding-right:7px}.wordmark span{display:none}
 #nation-heading{font-size:10px;max-width:78px}.resources{gap:10px}.resources span{font-size:8px;gap:0}.resources b{font-size:11px}
 .clock{display:flex;gap:6px;align-items:center}.clock>div{margin:0;gap:3px}.clock button{height:30px;min-width:30px;padding:2px 5px;font-size:11px}#date{font-size:9px;white-space:normal;width:67px}#speeds{gap:2px}
 #nav{top:36px;left:max(44px,env(safe-area-inset-left));right:6px;height:36px;scrollbar-width:none}
 #nav button{min-width:62px;flex:1 0 62px;min-height:36px;padding:3px 7px;font-size:11px;gap:4px}#nav button span{font-size:14px}
 #nav-collapse{display:block;position:fixed;z-index:10;left:6px;top:36px;width:36px;height:36px;padding:3px;font-size:17px}
 #panel,#panel.province-panel{top:80px;left:6px;bottom:8px;width:min(254px,32vw)}
 #panel>header,#panel.province-panel>header{padding:3px 9px;min-height:35px}#panel h2,#panel.province-panel h2{font-size:16px;margin:1px 0}#panel-kicker{display:none}
 #panel>header button{min-width:36px;min-height:34px}#panel-content,.province-panel #panel-content{padding:9px}
 #app:has(#command:not([hidden])) #panel{bottom:62px}#panel-content button{min-height:34px}
 #map-tools{top:80px;right:6px}#map-tools button{min-height:32px;min-width:32px}
 #map-caption{display:none}#message-dock{top:80px;right:252px;height:32px}#audio-toggle{top:118px}
 #unit-tactics{width:270px;padding:7px}#unit-tactics.armed:not(.sea-tactics){width:238px}
 #area-drawing{bottom:7px;width:420px;padding:7px 10px}
 #app.navigation-collapsed #nav{display:none}
 #app.navigation-collapsed #panel,#app.navigation-collapsed #map-tools,#app.navigation-collapsed #message-dock{top:44px}
 #app.navigation-collapsed #audio-toggle{top:82px}
 #app.navigation-collapsed #nav-collapse{top:40px}
}

/* In-campaign country identity reuses the existing 1912 faction flags. */
#nation-heading{display:flex;align-items:center;gap:8px;min-width:0}
#nation-heading .flag{flex:none;width:32px;height:20px;margin:0}
@media(max-height:550px) and (orientation:landscape){
 .wordmark{flex:none;min-width:65px;font-size:14px;line-height:15px;letter-spacing:2px;padding-right:5px}.wordmark span{display:block;font-size:10px;line-height:12px;letter-spacing:1px;margin:0;white-space:nowrap}
 #nation-heading{gap:4px;flex:none;max-width:100px}#nation-heading .flag{width:24px;height:16px}
}
@media(max-width:650px) and (max-height:550px) and (orientation:landscape){
 #top{gap:6px}.clock{flex-direction:column;gap:0;align-items:flex-end}#date{width:auto;font-size:8px;line-height:10px}.clock button{height:21px;min-width:25px;padding:1px 4px}.resources{gap:7px}
}

/* Confirmed equipment enlargement and peace territory preview. */
.equipment-preview-button{display:block;width:100%;padding:0;border:1px solid #817956;cursor:zoom-in;background:#15201d}
.equipment-preview-button .equipment-image{display:block;margin:0}
.equipment-detail{margin:0 0 14px}.equipment-detail img{display:block;width:100%;max-height:55vh;object-fit:contain}.equipment-detail figcaption{font-size:11px;color:#c0b797;margin-top:6px}
.peace-preview{display:grid;grid-template-columns:1fr 1fr;gap:16px}.peace-preview>div{min-width:0}.peace-map{width:100%;max-height:340px;background:#243d4e;border:1px solid #5c6a63}

.resources{gap:clamp(5px,1.1vw,18px);min-width:0}.resource-button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:0;background:transparent;padding:2px;color:#a4afa5;font-size:10px;white-space:nowrap}.resource-button:hover{background:#53605266}
@media(max-width:1050px){#top{gap:8px}.resources{gap:8px}.resource-button{font-size:9px}}
@media(max-height:550px) and (orientation:landscape){.resources{gap:8px}.resource-button{font-size:8px;gap:1px}}

/* Keep desktop tutorial placement while portrait uses an independently scrolling body. */
.tutorial-body{display:contents}
#app.politics-open #tutorial .tutorial-body>p{grid-column:2;grid-row:3;margin:0}