.mode-selector{display:block;border:0;margin:0 0 18px;padding:0;min-width:0}.mode-selector legend{font-size:13px;margin-bottom:8px}
.mode-group-tabs{display:flex;gap:8px;margin:0 0 10px;overflow-x:auto;scrollbar-width:thin}.mode-group-tabs button{flex:0 0 auto;min-height:40px;padding:7px 15px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:clamp(15px,1.25vw,18px);font-weight:700}.mode-group-tabs button[aria-selected="true"]{background:color-mix(in srgb,currentColor 12%,transparent);box-shadow:inset 0 -2px 0 currentColor}.mode-group-panel[hidden]{display:none}
.mode-rules,.salvo-rules{font-size:clamp(14px,1.25vw,17px);line-height:1.45;margin:10px 0 0}.mode-rules[hidden]{display:none}.salvo-controls{margin:12px 0 0 28px;text-align:center}.salvo-controls .primary{width:100%}.board .cell.salvo-selected{outline:4px solid #d56b1f!important;outline-offset:-4px;background:color-mix(in srgb,#f6a33a 35%,transparent)!important}
.special-mode-controls{margin:12px 0 0 28px;text-align:center}.special-mode-controls .primary{width:100%}.special-mode-controls.active .primary{outline:3px solid currentColor;outline-offset:2px}.special-mode-controls p{font-size:15px;margin:8px 0 0}.special-mode-controls .special-mode-hint{font-weight:800}.special-mode-controls .special-mode-hint[hidden]{display:none}.special-mode-result{padding:7px 9px;border:2px solid currentColor;border-radius:8px;font-weight:900}.special-mode-result.detected{color:#9c2e20;background:#fff1bd}.special-mode-result.clear{color:#176b64;background:#e1fbf5}.battle>article.radar-targeting .board-scroll{outline:4px solid #d56b1f;outline-offset:3px}.battle>article.radar-targeting .board .cell.target{background:color-mix(in srgb,#f6a33a 18%,transparent)!important}
.radar-scan-effect{position:fixed;z-index:18;pointer-events:none;overflow:hidden;isolation:isolate;border:3px solid #19d5b4;border-radius:8px;background:#063d4666;box-shadow:0 0 0 2px #eafffa,0 0 22px 8px #19d5b499,inset 0 0 18px #19d5b477;transform-origin:center;animation:radar-scan-enter 180ms ease-out both}.radar-scan-effect>i{position:absolute;display:block;pointer-events:none}.radar-scan-sector{inset:0;z-index:1;background-image:linear-gradient(90deg,transparent calc(33.333% - 1px),#8fffe8 calc(33.333% - 1px),#8fffe8 calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),#8fffe8 calc(66.666% - 1px),#8fffe8 calc(66.666% + 1px),transparent calc(66.666% + 1px)),linear-gradient(transparent calc(33.333% - 1px),#8fffe8 calc(33.333% - 1px),#8fffe8 calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),#8fffe8 calc(66.666% - 1px),#8fffe8 calc(66.666% + 1px),transparent calc(66.666% + 1px))}.radar-scan-rings{inset:8%;z-index:2;border:2px solid #8fffe8aa;border-radius:50%;box-shadow:inset 0 0 0 12px #19d5b419,inset 0 0 0 24px #19d5b426}.radar-scan-beam{inset:5%;z-index:3;border-radius:50%;background:conic-gradient(from -24deg,transparent 0 68%,#19d5b40d 72%,#aaffecaa 96%,transparent 100%);opacity:.35}.radar-scan-effect.radar-scan-active .radar-scan-beam{opacity:1;animation:radar-scan-sweep var(--radar-scan-duration,1200ms) linear both}.radar-scan-ping{left:50%;top:50%;z-index:4;width:12px;height:12px;border:3px solid #fff6a4;border-radius:50%;background:#19d5b4;box-shadow:0 0 14px 5px #fff6a4;transform:translate(-50%,-50%);opacity:.35}.radar-scan-effect.radar-scan-active .radar-scan-ping{animation:radar-scan-ping 440ms ease-out .12s infinite}.radar-scan-result{position:absolute;left:5%;right:5%;top:50%;z-index:6;transform:translateY(-50%) scale(.75);padding:6px 3px;border:2px solid currentColor;border-radius:7px;background:#fffbedf2;color:#123b45;font-size:clamp(9px,2.4vw,14px);line-height:1.05;text-align:center;text-transform:uppercase;box-shadow:0 2px 12px #001b26aa;animation:radar-scan-result-in 240ms ease-out both}.radar-scan-result[hidden]{display:none}.radar-scan-effect.radar-scan-complete .radar-scan-beam,.radar-scan-effect.radar-scan-complete .radar-scan-ping{display:none}.radar-scan-effect.detected{border-color:#ffcc45;background:#7a281d80;box-shadow:0 0 0 2px #fff4bd,0 0 28px 10px #ff8f3faa,inset 0 0 22px #ffca4577}.radar-scan-effect.detected .radar-scan-result{color:#8b2117;border-color:#b23b20;background:#fff0a8f2}.radar-scan-effect.clear{border-color:#68ddd1;background:#174f5b80}.radar-scan-effect.clear .radar-scan-result{color:#176b64;border-color:#38a99e;background:#e7fffbf2}
@keyframes radar-scan-enter{from{opacity:0;transform:scale(.58)}to{opacity:1;transform:scale(1)}}@keyframes radar-scan-sweep{to{transform:rotate(360deg)}}@keyframes radar-scan-ping{0%{opacity:.15;transform:translate(-50%,-50%) scale(.45)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}@keyframes radar-scan-result-in{to{transform:translateY(-50%) scale(1)}}
.radar-scan-contact{position:absolute;z-index:5;width:clamp(12px,32%,24px);height:auto;aspect-ratio:1;border:3px solid #fff7a4;border-radius:50%;background:#ff3b25;box-shadow:0 0 0 4px #ffdb5988,0 0 24px 10px #ff573cee;opacity:0;transform:translate(-50%,-50%) scale(.35)}.radar-scan-effect.radar-scan-active .radar-scan-contact{animation:radar-contact-detect 900ms ease-out var(--radar-contact-delay,0ms) both}@keyframes radar-contact-detect{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}68%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(.72)}}
@media(prefers-reduced-motion:reduce){.radar-scan-effect{animation:none}.radar-scan-effect.radar-scan-active .radar-scan-beam,.radar-scan-effect.radar-scan-active .radar-scan-ping{animation:none}.radar-scan-beam{transform:rotate(35deg)}.radar-scan-ping{opacity:1}.radar-scan-result{animation:none;transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.radar-scan-effect.radar-scan-active .radar-scan-contact{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}}
.zaruba-home .home-join.mode-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.zaruba-home .home-join.mode-options button{position:relative;flex-direction:column;gap:2px;padding:6px;line-height:1.1;min-width:0;white-space:normal}
[data-skin="illustrated-fleet"] .zaruba-home .home-join.mode-options button{--ink-action-padding:6px}
.mode-options .mode-name{font:inherit}.mode-options .mode-check{position:absolute;top:3px;right:5px;font-size:13px;visibility:hidden}.mode-options [aria-checked="true"] .mode-check{visibility:visible}.mode-options [aria-checked="true"] .mode-name{text-decoration:underline;text-underline-offset:3px}
.mode-badge{display:inline-block;font-size:12px;padding:4px 7px;border:1px solid currentColor;border-radius:5px;white-space:nowrap;letter-spacing:0}.match-list .mode-badge{display:table;margin:4px 0}.result-dialog>.mode-badge{margin:4px 0 12px}
[data-skin="illustrated-fleet"] .mode-badge,[data-skin="illustrated-fleet"] .board-fit{font-family:var(--ink-font);color:var(--ink-color);background:var(--paper-bg);border:2px solid var(--ink-color);border-radius:3px 6px 4px 8px;box-shadow:1px 1px 0 currentColor}
.board-component{min-width:0}.battle>article{min-width:0}.board-scroll{overflow:auto;max-width:100%;max-height:70svh;overscroll-behavior:contain;scrollbar-width:thin;padding:4px;touch-action:none}.board-viewport .board{grid-template-columns:28px repeat(var(--board-size),minmax(0,1fr));grid-template-rows:28px repeat(var(--board-size),minmax(0,1fr))}.board-fit{min-width:44px;min-height:44px;padding:6px 10px;background:var(--home-paper,#f5f5ee);color:var(--home-ink,#183e6a);border:1px solid currentColor;border-radius:5px}.board-fit[hidden]{display:none}.board .column-coord{position:sticky;top:0;z-index:7;background:var(--paper-bg,#f4f1e6)}.board .row-coord{position:sticky;left:0;z-index:7;background:var(--paper-bg,#f4f1e6)}.board .cell-picked{outline:3px solid #c26722!important;outline-offset:-3px;z-index:6}.board-overview .cell{cursor:zoom-in}.board-component[data-generated-grid="true"] :is(.illustrated-grid-layer,.board-ink-grid){background-image:linear-gradient(to right,#314b8660 1px,transparent 1px),linear-gradient(to bottom,#314b8660 1px,transparent 1px);background-size:var(--cell-share) var(--cell-share);border-right:1px solid #314b8660;border-bottom:1px solid #314b8660}.board-component[data-generated-grid="true"] :is(.illustrated-grid-layer,.board-ink-grid)>img{display:none}
@media(pointer:coarse){.board.editable{touch-action:none}.battle{grid-template-columns:minmax(0,1fr);max-width:650px;gap:32px}.board-scroll{max-height:62svh}.board-viewport .cell{min-width:0;min-height:0}.board-component.touch-board .board-viewport{max-width:none!important}}
@media(max-width:650px){.room-navbar .room{flex-wrap:wrap;justify-content:center;gap:3px}.room-navbar .room .mode-badge{font-size:10px;flex-basis:100%;text-align:center}}
.board-component .board-cells{z-index:auto}
.board-component .cell.preview-invalid{outline:3px dashed #a33!important;outline-offset:-3px;z-index:6}
.board-component .cell.ship-selected{outline:2px solid currentColor;outline-offset:-2px;color:var(--ink-color,#314b86)!important;z-index:6}
/* Result remains usable on short mobile screens with mode and match statistics. */
.result-modal .result-dialog{max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain}
[data-skin="ocean"] .board-fit{background:#10394d;color:#baf2ed}
.mine-overlay-layer{position:absolute;z-index:6;left:28px;top:28px;right:0;bottom:0;overflow:visible;pointer-events:none}.mine-sprite{position:absolute;left:calc((var(--mine-x) + .5)*var(--cell-share,10%));top:calc((var(--mine-y) + .5)*var(--cell-share,10%));width:calc(var(--cell-share,10%)*1.12);aspect-ratio:1;transform:translate(-50%,-50%);transform-origin:50% 62%;will-change:transform}.mine-sprite img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #11245b38);transform-origin:50% 64%;animation:mine-float 7.2s cubic-bezier(.45,.05,.55,.95) var(--mine-delay,0s) infinite;will-change:transform;user-select:none;-webkit-user-drag:none}.mine-sprite::before{content:"";position:absolute;z-index:1;left:50%;top:67%;width:90%;height:17%;border:2px solid #3159a050;border-left-color:transparent;border-right-color:transparent;border-radius:50%;opacity:.42;transform:translate(-50%,-50%) scaleX(.82);animation:mine-ripple 7.2s cubic-bezier(.45,.05,.55,.95) var(--mine-delay,0s) infinite}.mine-sprite::after{content:"";position:absolute;z-index:3;left:50%;top:50%;width:160%;height:160%;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,#fffbd0 0 10%,#ffc44f 11% 22%,#ef5b32 23% 35%,#be2d2d99 36% 44%,transparent 66%)}
@keyframes mine-float{0%,100%{transform:translate3d(-1.2%,1.5%,0) rotate(-2.2deg)}16%{transform:translate3d(-.7%,-.2%,0) rotate(-1.1deg)}33%{transform:translate3d(.3%,-1.8%,0) rotate(.5deg)}50%{transform:translate3d(1.2%,-2.7%,0) rotate(2deg)}66%{transform:translate3d(.8%,-1.4%,0) rotate(1.1deg)}83%{transform:translate3d(-.3%,.2%,0) rotate(-.7deg)}}@keyframes mine-ripple{0%,100%{opacity:.25;transform:translate(-50%,-50%) scaleX(.78)}33%{opacity:.43;transform:translate(-50%,-50%) scaleX(.96)}50%{opacity:.58;transform:translate(-50%,-50%) scaleX(1.12)}83%{opacity:.36;transform:translate(-50%,-50%) scaleX(.91)}}
.mine-sprite.mine-triggered{z-index:9}.mine-sprite.mine-triggered::before{animation:none;opacity:0}.mine-sprite.mine-triggered::after{animation:mine-flash .82s ease-out both}.mine-sprite.mine-triggered .mine-intact{animation:mine-intact-break .82s cubic-bezier(.22,.7,.2,1) both}.mine-sprite .mine-destroyed{position:absolute;inset:0;z-index:4;opacity:0;animation:mine-destroyed-settle .82s cubic-bezier(.22,.7,.2,1) both}
@keyframes mine-intact-break{0%,30%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}42%{opacity:1;transform:translate3d(-3px,2px,0) rotate(-7deg) scale(1.06)}54%{opacity:0;transform:translate3d(4px,-3px,0) rotate(8deg) scale(1.18)}100%{opacity:0;transform:scale(1.18)}}
@keyframes mine-destroyed-settle{0%,43%{opacity:0;transform:scale(.72) rotate(-5deg)}55%{opacity:1;transform:scale(1.16) rotate(4deg)}76%{opacity:1;transform:scale(.96) rotate(-1.5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.mine-sprite.mine-explosion-complete::after{display:none}.mine-sprite.mine-explosion-complete .mine-intact{display:none}.mine-sprite.mine-explosion-complete .mine-destroyed{opacity:1;animation:none;transform:none}
@keyframes mine-flash{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.2)}45%{opacity:.96;transform:translate(-50%,-50%) scale(.8)}72%{opacity:.38;transform:translate(-50%,-50%) scale(1.28)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.58)}}@media(prefers-reduced-motion:reduce){.mine-sprite img,.mine-sprite::before{animation:none}.mine-sprite.mine-triggered .mine-intact{display:none}.mine-sprite.mine-triggered .mine-destroyed{opacity:1;animation:none}}
/* Room identity and mode get full rows rather than competing in a narrow slot. */
@media(max-width:1000px){
 .with-room-navbar .game>header.room-navbar{height:auto;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:auto auto auto;gap:4px 8px;min-height:132px;padding:8px 10px}
 .with-room-navbar .room-navbar [data-nav-slot="back"]{grid-column:1;grid-row:1}
 .with-room-navbar .game>header.room-navbar .brand{grid-column:2;grid-row:1;justify-content:center}
 .with-room-navbar .room-navbar [data-nav-slot="settings"]{grid-column:3;grid-row:1}
 .with-room-navbar .game>header.room-navbar .room{grid-column:1/-1;grid-row:2;justify-content:center;flex-wrap:wrap;gap:5px;min-width:0}
 .with-room-navbar .game>header.room-navbar .room .mode-badge{display:inline-block;flex-basis:auto;font-size:13px}
 .with-room-navbar .game>header.room-navbar .room-player{grid-column:1/-1;grid-row:3;justify-self:center;text-align:center;max-width:100%;font-size:16px}
 .battle .title{flex-wrap:wrap;gap:8px;padding-left:0}.battle .title>div{min-width:0;flex:1 1 100%}.battle .title #shuffle{margin-left:auto;min-height:44px;flex-shrink:0}
}
/* Keep footer clear of the modal's scrollable content. */
#result-modal{padding-bottom:64px}
#result-modal .result-dialog{max-height:calc(100dvh - 80px)}

/* Generic gesture viewport: default overview is automatic; Fit is contextual only. */
.board-component{position:relative}.board-scroll{margin-inline:auto;overflow:auto;overflow-anchor:none;scrollbar-width:none;max-height:none;touch-action:none;user-select:none;-webkit-user-select:none}
.board-scroll::-webkit-scrollbar{display:none}.board-viewport{max-width:none!important;margin:0}
.board-component .board-fit{position:absolute;right:var(--board-fit-right,6px);top:-48px;z-index:10;min-width:44px;min-height:44px;padding:3px;font-size:25px;line-height:1;background:var(--paper-bg,#f5f5ee);opacity:.93}
.board-fit[hidden]{display:none!important}.board-gesture-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(pointer:coarse){.board-component .board.editable{touch-action:none}.board-component .board-scroll{max-height:none}}


.battle>article:has(.board-fit:not([hidden])) .title{padding-right:52px}

/* Keep the coordinate corner opaque when rows pan underneath the top ruler. */
.board .column-coord{z-index:8}.board>i:first-child{position:sticky;top:0;left:0;z-index:9;background:var(--paper-bg,#f4f1e6)}

/* Shared viewport frame: border(3) + padding(1) preserves the previous 4px inset.
   It stays outside the scrolling canvas, so zoom/pan cannot clip any side. */
.board-component .board-scroll{border:3px solid transparent;padding:1px;border-radius:4px;background-clip:padding-box}
.board-component .board-scroll:has(.board.field-active-your){border-color:var(--board-active-your,currentColor)}
.board-component .board-scroll:has(.board.field-active-opponent){border-color:var(--board-active-opponent,currentColor)}
.board-component .board:is(.field-active-your,.field-active-opponent){outline:none;box-shadow:none}
.game.modal-open .board-component .board-scroll{border-color:transparent}

/* Внутрішня ієрархія без зміни зовнішньої геометрії кнопки чи skin frame. */
html body #app .zaruba-home #entry .mode-selector .mode-options button{container-type:inline-size}
html body #app .zaruba-home #entry .mode-content{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:3px;width:100%;padding-inline:2px 8px;box-sizing:border-box}
html body #app .zaruba-home #entry .mode-labels{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
html body #app .zaruba-home #entry .mode-selector .mode-name{position:static;font-family:inherit;font-size:clamp(17px,10.5cqi,27px);font-weight:700;line-height:1.05;overflow-wrap:normal}
html body #app .zaruba-home #entry .mode-board-size{font:inherit;font-size:clamp(12px,7cqi,17px);line-height:1;opacity:.82}
html body #app .zaruba-home #entry .mode-difficulty-indicator{display:flex;flex-direction:row;justify-content:center;gap:2px;align-items:center;width:20px;max-width:100%;height:18px;max-height:100%;min-height:0;overflow:hidden;color:inherit;line-height:0}
html body #app .zaruba-home #entry .mode-difficulty-mark{display:block;width:2px;height:12px;flex:0 0 2px;border-radius:2px;background:currentColor;box-shadow:1px 0 0 color-mix(in srgb,currentColor 24%,transparent);transform:rotate(-5deg)}
.board .cell.mini-hit{background-image:linear-gradient(135deg,rgba(220,38,38,.34) 0 50%,transparent 50%);font-weight:900;color:#7f1d1d}
.board .cell.mini-hit.target{cursor:crosshair;box-shadow:inset 0 0 0 2px rgba(185,28,28,.65)}