/* Exclusive phone-portrait composition. Shared utilities live in responsive-base.css. */
body.compact-phone-portrait .zaruba-home .home-center{display:flex;flex-direction:column}
/* Battle portrait: equal maximized boards, free labels, and an external square salvo action. */
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:2px}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle>article{grid-template-columns:clamp(44px,9vw,60px) minmax(0,1fr) clamp(58px,11vw,72px);grid-template-rows:minmax(0,1fr);gap:2px;align-items:stretch;overflow:hidden}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle .title{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;padding:2px;align-self:stretch;justify-content:center;background:none;border:0;border-image:none;box-shadow:none;overflow:hidden}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle .title>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;min-height:0;text-align:center;overflow:hidden}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle .title p{font-size:clamp(9px,2.2vw,14px);line-height:1.15;white-space:normal;overflow-wrap:normal}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle .title h2{max-width:100%;font-size:clamp(10px,2.4vw,15px);line-height:1.15;white-space:normal;overflow:visible;text-overflow:clip}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle .title .player-identity{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;white-space:normal}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle .title .player-identity-name{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;text-align:center}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle .board-component{grid-column:2;grid-row:1;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .battle>article>.salvo-rules{grid-column:3;grid-row:1;align-self:center;width:100%;max-height:100%;margin:0;padding:3px;font-size:clamp(8px,1.9vw,11px);line-height:1.2;text-align:center;overflow:hidden}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .salvo-controls{grid-column:3;grid-row:1;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;width:100%;min-width:0;min-height:0;margin:0;padding:2px 0}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .salvo-controls .salvo-rules{width:100%;max-height:calc(100% - 74px);margin:0;padding:2px;font-size:clamp(8px,1.8vw,11px);line-height:1.2;text-align:center;overflow:hidden}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .salvo-controls #salvo-fire{flex:0 0 auto;width:min(100%,72px);height:auto;min-width:58px;min-height:0;aspect-ratio:1;margin:0;padding:5px 3px;font-size:clamp(11px,2.5vw,15px);line-height:1.05;white-space:normal;overflow-wrap:anywhere}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .special-mode-controls{grid-column:3;grid-row:1;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;min-height:0;margin:0;padding:2px 0}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .special-mode-controls .primary{width:min(100%,72px);height:auto;min-width:58px;min-height:58px;margin:0;padding:4px 2px;font-size:clamp(9px,2.2vw,13px);line-height:1.05;white-space:normal;overflow-wrap:anywhere}
body.compact-phone-portrait.compact-gameplay .game:not([data-game-state="placing"]) .special-mode-controls p{max-height:calc(100% - 66px);margin:0;padding:1px;font-size:clamp(8px,1.8vw,11px);line-height:1.1;overflow:hidden}
@media(max-width:600px){body.compact-phone-portrait.compact-room .room-player{display:none!important}body.compact-phone-portrait.compact-room .game>header.room-navbar{grid-template-columns:44px minmax(0,1fr) 0 48px!important}body.compact-phone-portrait.compact-room .room #copy{display:none}}
@media(max-height:500px){body.compact-phone-portrait .zaruba-home .home-center{gap:6px 16px}body.compact-phone-portrait .zaruba-home .home-join.mode-options button{height:48px;min-height:48px}body.compact-phone-portrait .zaruba-home :is(.mode-selector,.opponent-selector,.bot-difficulty) legend{font-size:12px;line-height:13px;margin-bottom:2px}}

/* Компактний портрет: функціональний центр у межах safe viewport. */
@media(max-width:650px) and (orientation:portrait){
 body.compact-phone-portrait #app .zaruba-home{--lobby-title-size:clamp(30px,8.5vw,39px);--lobby-control-height:48px;--lobby-mode-height:62px;--lobby-control-font:19px;--lobby-section-font:20px;--lobby-max-width:500px;--lobby-gap:6px;align-items:start;padding-top:calc(76px + env(safe-area-inset-top))}
 body.compact-phone-portrait #app .zaruba-home #entry{column-gap:18px;margin-top:30px}
 body.compact-phone-portrait #app .zaruba-home #entry .mode-selector .mode-options button{font-size:17px;padding:3px}
 body.compact-phone-portrait #app .zaruba-home #entry .difficulty-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.compact-phone-portrait #app .zaruba-home .home-description{font-size:16px}
 body.compact-phone-portrait #app .zaruba-home .home-live-status{font-size:16px;padding:5px;gap:3px 9px}
 body.compact-phone-portrait #app .zaruba-home #code{font-size:16px}
 /* Два рядки Invite мають вільні краї; hint належить саме цій CTA. */
 body.compact-phone-portrait #app .zaruba-home #entry>[data-social-action="invite"]{height:48px;min-height:48px;font-size:14px;line-height:1.1}
 body.compact-phone-portrait #app .zaruba-home .home-invite-hint{font-size:16px;line-height:1.1;margin-top:-4px}
}
@media(max-width:650px) and (orientation:portrait) and (max-height:740px){
 body.compact-phone-portrait #app .zaruba-home{--lobby-gap:5px;--lobby-control-height:48px;--lobby-mode-height:56px;--lobby-title-size:30px}
}

/* Кораблі й вода — нижній декоративний anchor; footer має власну чисту смугу. */
@media(max-width:650px) and (orientation:portrait){
 body.compact-phone-portrait:has(.zaruba-home) .illustrated-fleet-scene{bottom:calc(24px + env(safe-area-inset-bottom))}
 body.compact-phone-portrait:has(.zaruba-home) .illustrated-fleet-scene .home-decoration:is(.home-decoration-left,.home-decoration-right){display:block;bottom:0;width:min(52vw,24dvh,230px);max-width:none;opacity:.72}
 /* Менший боковий crop праворуч урівноважує силуети без зміни waterline. */
 body.compact-phone-portrait:has(.zaruba-home) .illustrated-fleet-scene .home-decoration-right{right:.5vw}
 body.compact-phone-portrait:has(.zaruba-home) .illustrated-fleet-scene .fleet-connecting-sea{
  display:block;bottom:0;left:4%;width:92%;height:clamp(36px,6dvh,56px);opacity:.72;
  mask-image:linear-gradient(to right,transparent,black 28%,black 72%,transparent),linear-gradient(to bottom,black 75%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(to right,transparent,black 28%,black 72%,transparent),linear-gradient(to bottom,black 75%,transparent);
  -webkit-mask-composite:source-in
 }
 body.compact-phone-portrait:has(.zaruba-home) .illustrated-fleet-scene .lobby-ink-cloud:nth-child(n+3){display:none}
}
body.compact-phone-portrait .room-navbar .match-timer{order:3}
body.compact-phone-portrait #result-modal .result-progression>strong{font-size:20px}

/* Компактна початкова композиція; розкриті деталі прокручуються лише у власній секції. */
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal{padding:6px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-dialog:has(.result-hero){padding:8px 12px 5px;max-height:calc(100dvh - 12px)}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-hero{width:min(100%,calc(clamp(46px,10dvh,105px) * 1310 / 690))}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-badges>.mode-badge{font-size:12px;min-height:24px;padding:1px 4px;border-width:2px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-players{width:100%;max-width:100%;font-size:15px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal #result-description{font-size:14px;max-width:90%;line-height:1.1}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-intro-ships i{width:28px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-intro{margin-bottom:3px;gap:1px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression{--result-flourish-gap:42px;grid-template-columns:1fr 1fr;gap:1px 6px;padding:20px 22px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression>strong{grid-column:1;font-size:28px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression>strong::before,html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression>strong::after{width:22px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-rank{grid-column:2;font-size:16px;gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .rank-insignia{width:18px;height:28px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-xp-transition{font-size:12px;gap:4px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-xp-transition i{height:8px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-duration{font-size:14px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-duration time{font-size:19px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-group>b{font-size:16px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-group>div{gap:3px;padding:0}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-item.earned-item{grid-template-columns:32px minmax(0,1fr) auto;gap:2px;min-height:32px;padding:0}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .honor-medal-compact{width:32px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-item strong{font-size:13px;white-space:normal;line-height:1.05}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-item em{font-size:12px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression summary{font-size:14px;min-height:26px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats{padding:4px 23px;margin-top:4px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats-ships i{width:23px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats h3{font-size:18px;margin-bottom:3px;gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats h3::before,html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats h3::after{width:12px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats dl{gap:3px 0}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats dt{font-size:11px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats dd{font-size:16px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-actions{margin-top:4px;gap:3px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #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-portrait #result-modal #result-close.result-secondary{font-size:15px;min-height:44px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .victory-corners{--victory-corner-size:24px;--victory-corner-inset:4px}

html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-actions .ui-icon{width:19px!important;height:19px!important;min-width:19px}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression::after{width:120px;bottom:-2px}



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

html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats dl>div{padding:0 1px}

/* Найнижчий portrait: кубок і badges ділять рядок, зберігаючи читабельний заголовок. */
@media(max-height:600px){
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-dialog:has(.result-hero){display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:0}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-dialog>*{grid-column:1/-1}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-dialog>.result-hero{grid-column:1;grid-row:1;width:min(100%,100px)}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-hero #result-title{font-size:16px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-dialog>.result-badges{grid-column:2;grid-row:1;align-self:center;flex-direction:column;margin:0;gap:2px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression{gap:0 5px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal #result-description{font-size:13px;max-width:100%;padding-inline:20px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression>strong{font-size:24px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-rank .rank-insignia{height:24px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-group>b{font-size:14px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-item.earned-item{min-height:28px;grid-template-columns:28px minmax(0,1fr) auto}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .honor-medal-compact{width:28px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-progression summary{min-height:24px}
 html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats h3{font-size:17px}
}

html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .earned-more{min-width:0}
@media(max-height:600px){
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #result-modal .result-stats dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
html[data-skin="illustrated-fleet"] body.compact-phone-portrait #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-portrait #result-modal .result-stats dd{margin:0}
}