/* Shared compact app shell, safe areas, component sizing and typography. No orientation composition. */
.compact-status{display:none}
html.compact-gameplay,body.compact-gameplay{height:100%;overflow:hidden;overscroll-behavior:none}
body.compact-gameplay #app{height:100svh;height:100dvh;min-height:0;padding:0;overflow:hidden}
body.compact-gameplay #app-brand-footer{display:none}
body.compact-room .game{height:100%;min-height:0;max-height:100%;padding:0 max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px;overflow:hidden}
body.compact-room.with-room-navbar .game>header.room-navbar{grid-row:1;grid-template-columns:44px minmax(0,1fr) auto 48px;grid-template-rows:1fr;min-height:52px;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 2px 0;gap:4px;border-bottom-width:1px}
body.compact-room .room-navbar [data-nav-slot="back"]{grid-column:1;grid-row:1}
body.compact-room .room-navbar [data-nav-slot="settings"]{grid-column:4;grid-row:1}
body.compact-room.with-room-navbar .game>header.room-navbar .brand{display:none}
body.compact-room.with-room-navbar .game>header.room-navbar .room{grid-column:2;grid-row:1;min-width:0;justify-content:center;flex-wrap:nowrap;gap:4px;overflow:hidden;font-size:11px}
body.compact-room .room-navbar .room>span:first-child{display:none}
body.compact-room .room-navbar .room b{font-size:12px;letter-spacing:0}
body.compact-room .room-navbar .room .mode-badge{font-size:11px;line-height:1.15;padding:3px;flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;margin:0;border-width:1px;box-shadow:none}
body.compact-room .room-navbar .match-timer{min-width:48px;padding:2px 5px;font-size:12px;flex:0 0 auto}
body.compact-room .room-navbar #copy{min-width:44px;width:44px;padding:10px}
body.compact-room.with-room-navbar .game>header.room-navbar .room-player{grid-column:3;grid-row:1;font-size:12px;max-width:120px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.compact-room .room-navbar #global-back{width:44px;height:44px;padding:0;justify-content:center}
body.compact-room .room-navbar #global-back>span:last-child{display:none}
body.compact-room .game .turn-banner{grid-row:2;width:100%;min-height:26px;height:26px;margin:0;padding:2px 6px;border:0;border-image:none;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
body.compact-room .turn-banner b{font-size:15px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;gap:5px}
body.compact-room .turn-banner .ui-icon{width:16px;height:16px;flex-shrink:0}
body.compact-room .full-status{display:none}
body.compact-room .compact-status{display:inline}
body.compact-gameplay .game .battle{grid-row:3;display:grid;gap:10px;width:100%;height:100%;min-height:0;max-width:none;margin:0;padding:0;align-items:stretch}
body.compact-gameplay .battle>article{display:grid;grid-template-rows:44px minmax(0,1fr) auto;min-width:0;min-height:0;gap:3px;overflow:hidden}
body.compact-gameplay .battle .title{height:44px;min-height:0;margin:0;padding:0 4px;gap:4px;flex-wrap:nowrap;align-items:center;overflow:hidden}
body.compact-gameplay .battle .title>div{min-width:0;flex:1 1 auto;overflow:hidden}
body.compact-gameplay .battle .title p{font-size:11px;line-height:14px;letter-spacing:0;margin:0;white-space:nowrap}
body.compact-gameplay .battle .title h2{font-size:13px;line-height:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.compact-gameplay .player-identity{max-width:100%;overflow:hidden;white-space:nowrap}
body.compact-gameplay .player-identity-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.compact-gameplay .battle .title>span{display:none}
body.compact-gameplay #shuffle{min-width:44px;min-height:44px;width:44px;height:44px;padding:8px;margin:0;flex:0 0 44px;border-image:none;box-shadow:none;font-size:0}
body.compact-gameplay #shuffle .ui-icon{width:22px;height:22px}
body.compact-gameplay .fleet-help{display:none}
body.compact-gameplay .game .ready{grid-row:3;min-height:44px;height:44px;width:min(100%,calc(var(--gameplay-board-side,100%) + 8px));justify-self:center;margin:0;padding:4px 10px;font-size:17px;line-height:1.15}
body.compact-gameplay .game[data-game-state="placing"] .battle>article:last-child::after{content:"";height:44px;grid-row:3}
body.compact-gameplay .board-component{min-width:0;min-height:0;width:100%;height:100%;overflow:hidden}
body.compact-gameplay .board-component .board-scroll{max-height:100%;max-width:100%;margin:auto;overscroll-behavior:contain}
body.compact-gameplay .board-component .board-fit{top:2px;right:2px;opacity:.9}
body.compact-gameplay .battle>article:has(.board-fit:not([hidden])) .title{padding-right:4px}
body.compact-gameplay .board .cell{font-size:clamp(10px,2vw,22px)}
body.compact-gameplay .post-game-controls{grid-row:4;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;max-width:none;gap:6px;margin:0;padding:0}
body.compact-gameplay .post-game-controls button{width:auto;min-width:44px;min-height:44px;margin:0;padding:4px 8px;font-size:14px;line-height:1.15;flex:1;white-space:normal}
body.compact-gameplay .post-game-rematch{width:auto;flex:1;min-width:0;gap:2px}
body.compact-gameplay .post-game-rematch .rematch-status{font-size:11px;line-height:1.1}
body.compact-room #global-settings-panel{top:calc(56px + env(safe-area-inset-top));max-height:calc(100dvh - 64px - env(safe-area-inset-top));overflow:auto;overscroll-behavior:contain}
body.compact-gameplay .game:not([data-game-state="placing"]) .battle>article{grid-template-rows:28px minmax(0,1fr)}
body.compact-gameplay .game:not([data-game-state="placing"]) .title{height:28px}
body.compact-gameplay .game:not([data-game-state="placing"]) .title>div{display:flex;align-items:center;justify-content:center;gap:8px}

body.compact-gameplay .game[data-game-state="placing"] .battle{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body.compact-gameplay .game[data-game-state="placing"] .battle>article:last-child{display:none}
body.compact-gameplay .game[data-game-state="placing"] .board-component{display:grid;place-items:center}
html.compact-app,body.compact-app{height:100%;overflow:hidden;overscroll-behavior:none}
body.compact-app #app{height:100svh;height:100dvh;min-height:0;padding:0;overflow:hidden}
body.compact-app:not(:has(.zaruba-home)) #app-brand-footer,body.compact-app .illustrated-fleet-scene{display:none}
body.compact-app .global-nav-bar{min-height:56px;padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:4px}
body.compact-app .global-nav-bar #global-back{width:48px;padding:0;justify-content:center}
body.compact-app .global-nav-bar #global-back>span:last-child{display:none}
body.compact-app .zaruba-home{height:100%;min-height:0;padding:calc(60px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;place-items:center;overflow:hidden}
body.compact-app .zaruba-home .home-center{align-items:center;justify-content:center;gap:10px;width:min(560px,100%);min-height:0;max-height:100%}
body.compact-app .zaruba-home :is(.home-radar,.home-decoration,.home-description,.home-underline,.home-brand p,.home-or){display:none}
body.compact-app .zaruba-home .home-brand>div{font-size:16px;gap:8px;letter-spacing:.05em;line-height:1.2}
body.compact-app .zaruba-home .home-anchor{width:28px;height:28px;padding:1px;border:0;border-radius:0;background:transparent;outline:none;box-shadow:none}
body.compact-app .zaruba-home .home-anchor .ui-icon{width:18px;height:18px}
body.compact-app .zaruba-home #home-title{font-size:clamp(28px,4vw,42px);line-height:1.02;margin:0}
body.compact-app .zaruba-home .home-live-status{padding:0;margin:0;gap:3px 12px;font-size:16px;line-height:1.3;border:0;background:transparent;box-shadow:none}
body.compact-app .zaruba-home .home-live-status strong{font-size:1.1em}
body.compact-app .zaruba-home .home-live-status .ui-icon{width:14px;height:14px}
body.compact-app .zaruba-home .home-actions{display:grid;gap:8px;min-height:0;width:100%;margin:0;padding:0}
body.compact-app .zaruba-home :is(.mode-selector,.opponent-selector,.bot-difficulty){margin:0;padding:0;border:0;min-width:0}
body.compact-app .zaruba-home :is(.mode-selector,.opponent-selector,.bot-difficulty) legend{font-size:13px;line-height:16px;margin-bottom:3px;padding:0}
body.compact-app .zaruba-home .home-join{gap:6px}
body.compact-app .zaruba-home .home-join.mode-options{grid-template-columns:repeat(4,minmax(0,1fr))}
body.compact-app .zaruba-home .home-join.mode-options button{height:54px;min-height:54px;padding:3px 6px;font-size:16px;line-height:1.1}
body.compact-app .zaruba-home .home-join:is(.opponent-options,.difficulty-options) button{height:44px;min-height:44px;padding:3px 6px;font-size:16px;line-height:1.1}
body.compact-app .zaruba-home .home-join:is(.opponent-options,.difficulty-options) .choice-content{gap:5px}
body.compact-app .zaruba-home .home-actions .mode-check .ui-icon{width:12px;height:12px}
body.compact-app .zaruba-home .home-actions .choice-content>.ui-icon{width:17px;height:17px}
body.compact-app .zaruba-home .home-create,body.compact-app .zaruba-home .home-join:not(.mode-options):not(.opponent-options):not(.difficulty-options) :is(button,input){height:44px;min-height:44px;font-size:17px;line-height:1.1}
body.compact-app .zaruba-home .home-create{padding-block:3px}
body.compact-app .zaruba-home [hidden]{display:none!important}
body.compact-app .zaruba-home .home-join input{padding:3px 6px}
body.compact-room .game[data-game-state="waiting"] .waiting{grid-row:3;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px;text-align:center}
body.compact-room .waiting :is(.home-radar,.sonar){width:min(100px,20dvh);height:auto;max-height:100px;margin:0;flex-shrink:0}
body.compact-room .waiting h2{font-size:24px;line-height:1.1;margin:0}
body.compact-room .waiting p{font-size:16px;line-height:1.2;margin:0;max-width:480px}
body.compact-room .waiting #invite{min-height:44px;height:44px;padding:4px 20px;font-size:17px}
body.compact-app #app>:is(.account-shell,.app-shell){height:100%;min-height:0;max-height:100%;padding-top:calc(64px + env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
body.compact-app :is(.player-dialog,.skin-dialog,.sound-dialog,.account-dialog,.leave-dialog){max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}

/* Compact result is a complete, non-scrolling screen. Keep every metric/action. */
body.compact-app #result-modal{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden}
body.compact-app #result-modal .result-dialog{display:grid;gap:8px;width:min(520px,100%);padding:16px;max-height:100%;overflow:hidden;min-height:0}
body.compact-app #result-modal .result-icon{display:none}
body.compact-app #result-modal #result-title{font-size:32px;line-height:1.05;margin:0}
body.compact-app #result-modal .result-badges{gap:5px;margin:0}
body.compact-app #result-modal .result-badges>.mode-badge{min-height:28px;padding:3px 6px;font-size:13px;line-height:1.15}
body.compact-app #result-modal .result-players{gap:4px;margin:0;font-size:13px;line-height:1.25}
body.compact-app #result-modal #result-description{font-size:13px;line-height:1.3;margin:0;max-width:none}
body.compact-app #result-modal .result-progression{gap:4px 8px;margin:0;padding:6px}
body.compact-app #result-modal .result-progression details{display:none}
body.compact-app #result-modal .result-stats{padding:8px;margin:0;min-width:0}
body.compact-app #result-modal .result-stats h3{font-size:19px;line-height:1.1;margin:0 0 6px}
body.compact-app #result-modal .result-stats dl{gap:7px 2px;grid-template-columns:repeat(3,minmax(0,1fr))}
body.compact-app #result-modal .result-stats dl>div{padding:0 3px}
body.compact-app #result-modal .result-stats dt{font-size:11px;line-height:1.2}
body.compact-app #result-modal .result-stats dd{font-size:18px;line-height:1.2;margin:2px 0 0}
body.compact-app #result-modal .result-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
body.compact-app #result-modal .result-actions>button{min-height:44px;height:auto;padding:5px 8px;font-size:14px;line-height:1.2}
body.compact-app #result-modal #result-close.result-secondary{min-height:44px;margin:0 auto;padding:4px 8px;font-size:14px;line-height:1.2}

/* Lobby: обмеження safe viewport та спільні розміри. Desktop понад 1200 px незмінний. */
@media(max-width:1200px){
 html:has(.zaruba-home),html body:has(#app .zaruba-home){height:100%;min-height:0;overflow:visible}
 html body:has(#app .zaruba-home) #app:has(.zaruba-home){height:100svh;height:100dvh;min-height:0;padding:0;overflow:visible}
 html body #app .zaruba-home{--lobby-title-size:48px;--lobby-gap:8px;--lobby-control-height:54px;--lobby-mode-height:60px;--lobby-max-width:660px;--lobby-control-font:22px;--lobby-section-font:22px;box-sizing:border-box;height:100svh;height:100dvh;min-height:0;margin:0;padding:calc(60px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:grid;place-items:center;overflow:clip}
 html body #app .zaruba-home .home-center{display:flex;flex-direction:column;gap:var(--lobby-gap);width:min(var(--lobby-max-width),100%);max-height:none;min-height:0;margin:0;align-items:stretch}
 html body #app .zaruba-home .home-brand{margin:0 auto 4px}
 html body #app .zaruba-home .home-brand>div{font-size:22px;line-height:1.15}
 html body #app .zaruba-home .home-brand p{display:none}
 html body #app .zaruba-home #home-title{font-size:var(--lobby-title-size);line-height:1.1;margin:0}
 html body #app .zaruba-home .home-description{display:block;margin:4px 0;font-size:19px;line-height:1.15}
 html body #app .zaruba-home .home-live-status{margin:0 auto 4px;padding:6px 12px;font-size:18px;line-height:1.2;gap:4px 14px}
 html body #app .zaruba-home #entry{gap:var(--lobby-gap) 24px;margin:0;grid-column:auto;grid-row:auto}
 html body #app .zaruba-home #entry fieldset{margin:0;padding:0}
 html body #app .zaruba-home #entry legend{font-size:var(--lobby-section-font);line-height:1.1;margin:0 0 5px}
 html body #app .zaruba-home #entry .home-join.mode-options{gap:12px}
 html body #app .zaruba-home #entry :is(button,input){height:var(--lobby-control-height);min-height:var(--lobby-control-height);min-width:0;font-size:var(--lobby-control-font);line-height:1.1;padding:4px 10px;white-space:normal;overflow-wrap:normal}
 html body #app .zaruba-home #entry .mode-selector .mode-options button{height:var(--lobby-mode-height);min-height:var(--lobby-mode-height)}
 html body #app .zaruba-home #entry .home-join-path{grid-template-rows:var(--lobby-control-height) var(--lobby-control-height);gap:var(--lobby-gap)}
 html body #app .zaruba-home #entry .home-path-heading{font-size:var(--lobby-section-font);margin:2px 0 0}
 html body #app .zaruba-home #entry>[data-social-action="invite"]{height:calc(var(--lobby-control-height) - 4px);min-height:44px;font-size:calc(var(--lobby-control-font) - 2px)}
 html body #app .zaruba-home .home-invite-hint{font-size:14px;line-height:1;gap:2px;margin:0}
 html body #app .zaruba-home .home-invite-hint::before,html body #app .zaruba-home .home-invite-hint::after{width:24px;height:20px}
 html body #app .zaruba-home .home-or{height:calc(var(--lobby-control-height)*2 + var(--lobby-gap));bottom:26px;font-size:16px}
 html body #app .zaruba-home .home-radar{position:absolute;pointer-events:none;z-index:-1}
 html body:has(.zaruba-home) .illustrated-fleet-scene{display:block;overflow:hidden}
}

/* Малий кутовий маркер не закриває підпис у компактній картці режиму. */
@media(max-width:1200px){
 html body #app .zaruba-home #entry .mode-check{width:28px;height:28px;top:4px;right:5px;padding:3px 3px 0 0}
 html body #app .zaruba-home #entry .mode-selector .mode-check{width:23px;height:23px;top:4px;right:5px;padding:3px 3px 0 0}
 html body #app .zaruba-home #entry .mode-selector .mode-name{top:0}
}

/* Результат illustrated-fleet: геометрія залежить від доступної висоти, графіка — від skin. */
html[data-skin="illustrated-fleet"] #result-modal{padding:12px;overflow:auto}
html[data-skin="illustrated-fleet"] body.compact-app #result-modal .result-dialog:has(.result-hero){display:block;overflow:visible;max-height:calc(100dvh - 24px)}
html[data-skin="illustrated-fleet"] #result-modal .result-progression details{display:block}
@media(max-height:800px){
 html[data-skin="illustrated-fleet"] #result-modal .result-hero{width:min(62.5%,calc(10dvh * 1310 / 690))}
 
 html[data-skin="illustrated-fleet"] #result-modal .result-players{width:52%;max-width:52%;font-size:21px}
 html[data-skin="illustrated-fleet"] #result-modal .result-progression>.result-rank .rank-insignia{width:24px;height:36px}
}

@media(min-width:701px) and (min-height:601px) and (max-height:800px){html[data-skin="illustrated-fleet"] #result-modal .result-dialog:has(.rank-up) .result-hero{width:min(62.5%,calc(10dvh * 1310 / 690))}}