/* Exclusive phone-landscape composition. Shared utilities live in responsive-base.css. */
body.compact-phone-landscape.compact-gameplay .game:not([data-game-state="placing"]) .battle{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
@media(max-width:600px){body.compact-phone-landscape.compact-room .room-player{display:none!important}body.compact-phone-landscape.compact-room .game>header.room-navbar{grid-template-columns:44px minmax(0,1fr) 0 48px!important}body.compact-phone-landscape.compact-room .room #copy{display:none}}
body.compact-phone-landscape .zaruba-home .home-center{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);grid-template-rows:auto auto auto;align-content:center;align-items:center;gap:12px 24px;width:min(980px,100%)}
body.compact-phone-landscape .zaruba-home .home-brand{grid-column:1;grid-row:1;align-self:end}
body.compact-phone-landscape .zaruba-home #home-title{grid-column:1;grid-row:2;font-size:clamp(28px,3.4vw,42px)}
body.compact-phone-landscape .zaruba-home .home-live-status{grid-column:1;grid-row:3;align-self:start}
body.compact-phone-landscape .zaruba-home .home-actions{grid-column:2;grid-row:1/4;gap:5px}
@media(max-height:500px){body.compact-phone-landscape .zaruba-home .home-center{gap:6px 16px}body.compact-phone-landscape .zaruba-home .home-join.mode-options button{height:48px;min-height:48px}body.compact-phone-landscape .zaruba-home :is(.mode-selector,.opponent-selector,.bot-difficulty) legend{font-size:12px;line-height:13px;margin-bottom:2px}}

/* Battle only: no top banner/title row; narrow central status and outer side labels. */
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]){grid-template-columns:minmax(0,1fr) clamp(80px,8vw,96px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:0;row-gap:2px;padding-inline:max(2px,env(safe-area-inset-left)) max(2px,env(safe-area-inset-right))}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"])>header.room-navbar{grid-column:1/-1}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"])>.turn-banner{display:none}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"])>.battle{display:contents}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"])>.landscape-turn-status{display:flex;grid-column:2;grid-row:2;align-self:center;justify-self:center;writing-mode:horizontal-tb;transform:none;justify-content:center;align-items:center;font-size:16px;font-weight:700;line-height:1.15;width:100%;max-height:100%;text-align:center;white-space:normal;overflow-wrap:normal;padding:5px 2px;border:1px solid currentColor;border-radius:5px 3px 5px 3px;background:var(--home-paper,transparent)}
body.compact-phone-landscape.compact-gameplay .game[data-game-state="playing"]>.landscape-turn-status:has(.special-mode-controls){align-self:stretch;flex-direction:column;gap:5px;overflow:hidden}
body.compact-phone-landscape.compact-gameplay .landscape-turn-status .special-mode-controls{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0;margin:0}
body.compact-phone-landscape.compact-gameplay .landscape-turn-status .special-mode-controls .primary{width:100%;height:auto;min-height:44px;padding:3px 1px;font-size:clamp(9px,1.7vw,12px);line-height:1.05;white-space:normal;overflow-wrap:anywhere}
body.compact-phone-landscape.compact-gameplay .landscape-turn-status .special-mode-controls p{max-height:54px;margin:0;font-size:9px;line-height:1.05;overflow:hidden}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"])>.post-game-controls{grid-column:1/-1;grid-row:3}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle>article{grid-column:1;grid-row:2;grid-template-columns:18px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;align-items:stretch}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle>article:last-child{grid-column:3;grid-template-columns:minmax(0,1fr) 18px}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle .title{grid-column:1;grid-row:1;width:18px;height:100%;padding:0;justify-content:center;overflow:hidden}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle>article:last-child .title{grid-column:2}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle .title>div{display:flex;flex-direction:row;writing-mode:vertical-rl;align-items:center;justify-content:center;gap:10px;max-height:100%;overflow:hidden}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle>article:first-child .title>div{transform:rotate(180deg)}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle .title p{display:none}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .landscape-side-name{display:inline;font-size:12px;line-height:16px;flex-shrink:0}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle .title h2{font-size:11px;line-height:16px;max-height:100px;min-height:0}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle .title .player-identity{display:inline-flex;align-items:center;gap:3px}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle .board-component{grid-column:2;grid-row:1;display:grid;place-items:center}
body.compact-phone-landscape.compact-gameplay .game:is([data-game-state="playing"],[data-game-state="finished"]) .battle>article:last-child .board-component{grid-column:1}

/* Short landscape result: summary/actions left, progression right. Use width instead
   of stacking controls below both columns so every action fits a short iPhone. */
body.compact-phone-landscape #result-modal{padding:max(5px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
body.compact-phone-landscape #result-modal .result-dialog{width:min(860px,100%);max-height:calc(100dvh - 10px);grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:4px 12px;padding:8px 12px 7px}
body.compact-phone-landscape #result-modal #result-title{grid-column:1;grid-row:1;font-size:30px}
body.compact-phone-landscape #result-modal .result-badges{grid-column:1;grid-row:2}
body.compact-phone-landscape #result-modal .result-players{grid-column:1;grid-row:3}
body.compact-phone-landscape #result-modal #result-description{grid-column:1;grid-row:4}
body.compact-phone-landscape #result-modal .result-stats{grid-column:2;grid-row:1/5;display:flex;flex-direction:column;justify-content:center}
body.compact-phone-landscape #result-modal .result-stats{display:none}
body.compact-phone-landscape #result-modal .result-progression{grid-column:2;grid-row:1/7;align-self:stretch;min-height:0;padding:5px 7px;gap:2px 7px;overflow:hidden}
body.compact-phone-landscape #result-modal .result-earned{gap:1px}
body.compact-phone-landscape #result-modal .earned-group{gap:0}
body.compact-phone-landscape #result-modal .earned-item{min-height:28px;padding-block:2px}
body.compact-phone-landscape .room-navbar .match-timer{min-width:46px}
body.compact-phone-landscape #result-modal .result-actions{grid-column:1;grid-row:5;align-self:end;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 7px}
body.compact-phone-landscape #result-modal .result-actions>button{min-height:44px;padding:3px 6px}
body.compact-phone-landscape #result-modal #result-close.result-secondary{grid-column:1;grid-row:6;min-height:28px;margin:0 auto;padding:1px 8px}

/* Низький landscape: brand ліворуч, повний інтерактивний блок праворуч. */
@media(max-width:1200px) and (max-height:600px) and (orientation:landscape){
 body.compact-phone-landscape #app .zaruba-home{--lobby-max-width:1080px;--lobby-title-size:clamp(25px,3vw,28px);--lobby-control-height:44px;--lobby-mode-height:56px;--lobby-control-font:18px;--lobby-section-font:17px;--lobby-gap:6px;align-items:start;padding-top:calc(clamp(64px,18dvh,76px) + env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
 body.compact-phone-landscape #app .zaruba-home .home-center{display:grid;grid-template-columns:clamp(180px,22vw,210px) minmax(0,1fr);grid-template-rows:min-content min-content min-content 1fr;gap:6px 20px;align-content:start;align-items:start}
 body.compact-phone-landscape #app .zaruba-home .home-brand{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;z-index:2}
 body.compact-phone-landscape #app .zaruba-home .home-brand>div{font-size:16px}
 body.compact-phone-landscape #app .zaruba-home #home-title{grid-column:1;grid-row:2;line-height:1.05}
 body.compact-phone-landscape #app .zaruba-home .home-description{grid-column:1;grid-row:3;font-size:15px;line-height:1.1;margin:0}
 body.compact-phone-landscape #app .zaruba-home .home-live-status{--icon-sm:12px;--icon-md:14px;--icon-box:17px;position:fixed;left:50%;bottom:calc(52px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-wrap:nowrap;width:max-content;max-width:calc(100% - 40px);font-size:14px;line-height:1.1;margin:0;padding:3px 14px;gap:14px;justify-content:center;z-index:2}
 body.compact-phone-landscape #app .zaruba-home .home-live-status>span:first-child{grid-column:1/-1}
 body.compact-phone-landscape #app .zaruba-home .home-live-status>span{justify-content:center;min-width:0}
 body.compact-phone-landscape #app .zaruba-home #entry{grid-column:2;grid-row:1/5;gap:5px 14px;align-self:start;width:100%;max-width:600px;justify-self:center;position:relative;top:-10px}
 body.compact-phone-landscape #app .zaruba-home #entry .mode-selector{grid-column:1;grid-row:1}
 body.compact-phone-landscape #app .zaruba-home #entry .opponent-selector{grid-column:2;grid-row:1}
 body.compact-phone-landscape #app .zaruba-home #entry .mode-selector .mode-options button{font-size:15px;padding:2px}
 body.compact-phone-landscape #app .zaruba-home #entry .mode-difficulty-indicator{position:relative;left:4px}
 body.compact-phone-landscape #app .zaruba-home #entry .home-join.mode-options{gap:6px}
 body.compact-phone-landscape #app .zaruba-home #entry .opponent-options button{height:var(--lobby-mode-height)}
 body.compact-phone-landscape #app .zaruba-home #entry .home-create-heading,body.compact-phone-landscape #app .zaruba-home #entry .home-join-heading{grid-row:2;margin-top:22px}
 body.compact-phone-landscape #app .zaruba-home #entry .home-create{grid-row:3}
 body.compact-phone-landscape #app .zaruba-home #entry>[data-social-action="invite"]{grid-row:4}
 body.compact-phone-landscape #app .zaruba-home #entry .home-join-path{grid-row:3/5}
 body.compact-phone-landscape #app .zaruba-home #entry .home-invite-hint{grid-row:5;font-size:13px;line-height:1;margin-top:-6px}
 body.compact-phone-landscape #app .zaruba-home #entry>[data-social-action="continue"]{grid-row:6}
 body.compact-phone-landscape #app .zaruba-home #entry .bot-difficulty:not([hidden]){grid-column:1/-1;grid-row:2;margin:0}
 body.compact-phone-landscape #app .zaruba-home #entry .difficulty-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.compact-phone-landscape #app .zaruba-home .home-radar{width:280px;left:-60px;top:0;opacity:.55}
 body.compact-phone-landscape:has(.zaruba-home) .illustrated-fleet-scene{opacity:1;bottom:calc(2px + env(safe-area-inset-bottom))}
 /* Невисокий морський anchor залишає CTA та footer вільними. */
 body.compact-phone-landscape:has(.zaruba-home) .illustrated-fleet-scene :is(.lobby-air,.fleet-ink-sun){opacity:.25}
 body.compact-phone-landscape:has(.zaruba-home) .illustrated-fleet-scene .home-decoration:is(.home-decoration-left,.home-decoration-right){display:block;bottom:0;width:min(32vw,60dvh,320px);max-width:none;opacity:.72}
 body.compact-phone-landscape:has(.zaruba-home) .illustrated-fleet-scene .fleet-connecting-sea{
  display:block;bottom:-16px;left:4%;width:92%;height:90px;opacity:.72;
  mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent),linear-gradient(to bottom,black 75%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent),linear-gradient(to bottom,black 75%,transparent);
  -webkit-mask-composite:source-in
 }
 body.compact-phone-landscape #app .zaruba-home .home-description::after{display:none}
}

/* Світла підкладка лише під підписом поверх нижніх хвиль. */
@media(max-width:1200px) and (max-height:600px) and (orientation:landscape){
 body.compact-phone-landscape:has(.zaruba-home) #app-brand-footer .global-footer{position:relative;isolation:isolate;width:fit-content;margin-inline:auto;padding:2px 6px;background:transparent}
 body.compact-phone-landscape:has(.zaruba-home) #app-brand-footer .global-footer::before{content:"";position:absolute;inset:-3px -8px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,var(--ui-paper) 45%,transparent 75%);filter:blur(3px)}
}

/* Розстановка: поле займає всю висоту після компактних navbar/status.
   Допоміжні controls збоку, тому не віднімають рядки від квадратного поля. */
@media(max-width:1200px) and (max-height:600px) and (orientation:landscape){
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"]{grid-template-rows:calc(48px + env(safe-area-inset-top)) minmax(0,1fr);gap:2px;padding:0 max(4px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"]>header.room-navbar{height:calc(48px + env(safe-area-inset-top));min-height:48px;padding-top:env(safe-area-inset-top)}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .room-navbar .room b{font-size:14px;line-height:1.1}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .title #shuffle{align-self:flex-start;margin:0}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .turn-banner{display:none}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .setup-nav-status{display:inline;font-size:13px;line-height:1.1;white-space:nowrap}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .battle{grid-row:2}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .battle>article:first-child{grid-template-columns:minmax(100px,1fr) minmax(0,2fr) minmax(130px,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:6px 8px;overflow:visible}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .battle>article:first-child>.board-component{grid-column:2;grid-row:1/3}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .battle>article:first-child>.title{grid-column:3;grid-row:1;align-self:end;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;height:auto;min-height:0;padding:0}
 body.compact-phone-landscape.compact-gameplay .game[data-game-state="placing"] .battle>article:first-child>.ready{grid-column:3;grid-row:2;align-self:start;justify-self:start;width:100%;max-width:160px;white-space:normal;font-size:15px}
}

/* Результат: кубок/учасники/статистика ліворуч, XP/дії праворуч. */
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal{padding:4px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-dialog:has(.result-hero){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 44px;gap:1px 10px;width:100%;height:auto;max-height:calc(100dvh - 8px);padding:8px 14px;overflow:visible}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-hero{grid-column:1;grid-row:1;width:min(72%,calc(22dvh * 1310 / 690))}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-badges{grid-column:1;grid-row:2;margin:0}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-badges>.mode-badge{font-size:12px;min-height:24px;border-width:2px;padding:1px 4px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-intro{grid-column:1;grid-row:3;margin:0;gap:0;align-content:start}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-players{width:100%;max-width:100%;font-size:17px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal #result-description{font-size:13px;max-width:85%;line-height:1.1}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-intro-ships i{width:28px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-progression{--result-flourish-gap:42px;grid-column:2;grid-row:1/4;align-self:start;padding:20px 22px;gap:2px 4px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-progression>strong{grid-column:1/3;font-size:30px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-progression>strong::before,html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-progression>strong::after{width:32px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-rank{font-size:16px;gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .rank-insignia{width:19px;height:28px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-xp-transition{font-size:12px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-duration{font-size:14px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .earned-group>b{font-size:16px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .earned-group>div{gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .earned-item.earned-item{grid-template-columns:35px minmax(0,1fr) auto;gap:2px;padding:0;min-height:34px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .honor-medal-compact{width:35px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .earned-item strong{font-size:13px;white-space:normal;line-height:1.1}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .earned-item em{font-size:12px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-progression summary{font-size:14px;min-height:28px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-progression::after{width:120px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats{display:block;grid-column:1;grid-row:4;padding:3px 27px;margin:0}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats h3{font-size:18px;margin-bottom:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats h3::before,html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats h3::after{width:12px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats dt{font-size:11px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats dd{font-size:17px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats-ships i{width:25px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-actions{grid-column:2;grid-row:4;gap:4px;margin:0;align-self:center}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-actions>button{font-size:14px;min-height:44px;padding:2px 3px;border-width:3px;gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-actions .ui-icon{width:18px!important;height:18px!important;min-width:18px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal #result-close.result-secondary{grid-column:1/-1;grid-row:5;min-height:44px;font-size:15px;margin:0 auto;padding:3px 8px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .victory-corners{--victory-corner-size:24px;--victory-corner-inset:4px}

html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .rank-up{font-size:12px;gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .rank-up .rank-insignia{width:10px;height:15px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .rank-up span{font-size:10px}

/* У landscape підпис і значення ділять рядок: запас висоти йде на безпечні поля XP. */
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats dl>div{display:flex;align-items:center;justify-content:space-between;gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-landscape #result-modal .result-stats dd{margin:0}