/* Exclusive tablet-portrait composition. Shared utilities live in responsive-base.css. */
body.compact-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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-tablet-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,1.5vw,13px);line-height:1.05;white-space:normal;overflow-wrap:anywhere}
body.compact-tablet-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.2vw,11px);line-height:1.1;overflow:hidden}

/* Tablet portrait: контрольована ширина, без збільшення кнопок до масштабу екрана. */
@media(min-width:651px) and (max-width:1200px) and (orientation:portrait){
 body.compact-tablet-portrait #app .zaruba-home{--lobby-max-width:720px;--lobby-title-size:52px;--lobby-gap:12px;--lobby-control-height:56px;--lobby-mode-height:64px;align-items:start;padding-top:clamp(90px,12dvh,144px)}
}

/* Верхня композиція та нижній спільний горизонт води лише для tablet portrait. */
@media(min-width:651px) and (max-width:1200px) and (orientation:portrait){
 body.compact-tablet-portrait:has(.zaruba-home) .illustrated-fleet-scene .fleet-connecting-sea{height:clamp(72px,10vw,110px);bottom:3%;left:4%;width:92%;
  /* Краї центральної води розчиняються під незмінними шарами кораблів. */
  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-tablet-portrait:has(.zaruba-home) .illustrated-fleet-scene .home-decoration:is(.home-decoration-left,.home-decoration-right){width:min(47vw,450px);max-width:none}
 body.compact-tablet-portrait:has(.zaruba-home) .illustrated-fleet-scene .fleet-ink-sun{width:160px;top:-70px;right:-70px;opacity:.6}
}
body.compact-tablet-portrait .room-navbar .match-timer{min-width:56px}
body.compact-tablet-portrait #result-modal .result-progression{max-width:480px;justify-self:center;width:100%}

/* Панель XP ділить ширину з рамкою результату: погон не заходить на центральні лаври. */
html[data-skin="illustrated-fleet"] body.compact-tablet-portrait #result-modal .result-progression{max-width:none}
html[data-skin="illustrated-fleet"] body.compact-tablet-portrait #result-modal .result-rank .rank-insignia{width:24px;height:36px}