/* Refined Battleship boards and setup tray. Loaded after the shared arcade styles. */
#arena{width:min(1120px,calc(100% - 64px))}.arena-top{margin:18px 0 22px}.arena-game-name{font-size:13px;font-weight:650}.arena-game-name>span{font-size:10px;font-weight:400;color:#8c96a4;margin-left:10px}.match-heading{margin:0 0 22px}.match-heading h1{font-size:30px;font-weight:650}.match-heading #match-status{font-size:12px;max-width:530px}.room-code{padding:11px 15px}.versus-bar{background:white;border:1px solid #e2e8ef;border-radius:10px;padding:13px 18px;margin-bottom:18px}.versus-bar .player-info{display:flex;align-items:center;gap:11px}.player-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#c0c8d2}.player-dot.online{background:#4ca783;box-shadow:0 0 0 4px #4ca78310}.series-score{font-size:18px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:5px;color:#9aa5b4}.connection-banner{background:#fff5df;color:#936a28;border:1px solid #f0deb5;font-size:12px;padding:13px 17px;border-radius:8px;margin-bottom:18px}
.play-area.placing{display:grid;grid-template-columns:260px minmax(0,590px);gap:28px;align-items:start;justify-content:center}.play-area.battling{display:block}.play-area .boards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:24px;align-items:start}.play-area .boards.placing{grid-template-columns:minmax(0,1fr)}
#placement-controls{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:15px;background:white;border:1px solid #e2e8ef;border-radius:12px;padding:20px;margin:0}.setup-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.setup-heading h2{font-size:16px;font-weight:650}.setup-heading>span{font-size:10px;color:#8995a4}#placement-hint{flex-basis:auto;font-size:11px;line-height:1.7;color:#7b8899}.ship-picker{display:flex;flex-direction:column;gap:7px}.ship-picker .ship-option{width:100%;min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e3e9f0;border-radius:7px;background:#fafbfd;color:#66798e;padding:10px;font-size:11px}.ship-option>span:first-child{flex:1;text-align:left}.ship-option>small{width:12px;color:#91a0b3}.ship-picker .ship-option.selected{background:#eef1ff;border-color:#aebcf0;color:#4362b4}.ship-picker .ship-option.placed>small{color:#4d9c7c;font-size:13px}.ship-picker .ship-option:disabled{opacity:.7}.ship-pips,.damage-pips{display:inline-flex;gap:3px;align-items:center}.ship-pips i{width:7px;height:7px;background:#c5cfdd;border-radius:2px}.ship-option.placed .ship-pips i{background:#7089ac}.ship-option.selected .ship-pips i{background:#6d87d6}#placement-controls .placement-actions{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;gap:8px}#placement-controls .placement-actions .button{flex:1;min-height:39px;padding:8px;font-size:11px}#clear-fleet{flex:1;font-size:11px}#ready,#edit-fleet{min-height:44px;font-size:12px}.setup-note{font-size:10px;color:#94a0ae;line-height:1.65}
.board-panel{padding:23px;border:1px solid #dce5ee;background:white;border-radius:14px;box-shadow:0 4px 16px #25385903}.board-title{margin-bottom:16px}.board-title h2{font-size:17px;font-weight:650;letter-spacing:-.35px;margin-top:2px}.board-kicker{font-size:8px;letter-spacing:1.6px;color:#98a6b7;font-weight:600}.board-title>span{font-size:10px;color:#8191a4;border:1px solid #e6ecf3;border-radius:20px;padding:4px 9px;white-space:nowrap}.board{position:relative;display:grid;grid-template-columns:18px repeat(10,minmax(0,1fr));grid-template-rows:20px repeat(10,minmax(0,1fr));gap:3px;isolation:isolate}.axis{font-size:9px;color:#8295ad;min-height:0}.cell{position:relative;min-width:0;aspect-ratio:1;padding:0;border-radius:3px;border:1px solid #dce7f2;background:#edf3f9;color:#4665c6;display:grid;place-items:center;font-size:24px}.cell:disabled{opacity:1}.cell:not(:disabled):hover{border-color:#9fb4e5;background:#e5edf9}.cell.occupied{background:#e7eff7}.cell.hit,.cell.sunk{background:#edf3f9;border-color:#dce7f2}.cell.miss{background:#eaf1f8}.cell.hit::after,.cell.miss::after{content:'';position:absolute;z-index:4;width:30%;height:30%;border-radius:50%;left:35%;top:35%}.cell.hit::after{background:#e36f63;border:1px solid #b64f47;box-shadow:inset 0 1px 1px #ffbdb4,0 2px 2px #4e1c3a26}.cell.miss::after{background:#fff;border:1px solid #bac9db;box-shadow:0 1px 2px #60769126}.cell.last-shot::before{content:'';position:absolute;inset:1px;border:1px solid #94a8c0;border-radius:2px;z-index:5;pointer-events:none}.cell.hit.last-shot::before{border-color:#d4877e}.cell.selected{color:#4766d9;background:#e1e9fc;outline:2px solid #718ce6;outline-offset:-2px}.cell.preview::before,.cell.invalid::before{content:'';position:absolute;inset:0;z-index:5;border:1px solid #7497d3;border-radius:2px;background:#829fe94d;pointer-events:none}.cell.invalid::before{background:#ed8e7d4d;border-color:#dc8a7a}.cell.preview,.cell.invalid{background:#edf3f9}
.ship-piece{min-width:0;min-height:0;position:relative;z-index:1;pointer-events:none;align-self:stretch;justify-self:stretch;filter:drop-shadow(0 2px 1px #20375333)}.ship-piece svg{width:100%;height:100%;display:block}.board-legend{justify-content:center;margin-top:16px;font-size:10px;gap:20px}.legend-hit{background:#e36f63;border-radius:50%!important}.legend-miss{background:white;border:1px solid #bac9db;border-radius:50%!important}.fleet-tracker{border-top:1px solid #e8edf3;margin-top:18px;padding-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}.fleet-row{display:flex;align-items:center;gap:8px;min-width:0;font-size:10px;color:#7b899a}.fleet-row>span:first-child{flex:1}.fleet-row>small{font-size:9px;min-width:20px;text-align:right;color:#9ca8b7}.damage-pips{gap:2px}.damage-pips i{width:5px;height:7px;border-radius:1px;background:#dbe3ed}.damage-pips .damaged{background:#de877a}.fleet-row.sunk,.fleet-row.sunk>small{color:#b67369}
.target-controls{background:#f5f7fb;border:1px solid #e8edf4;border-radius:8px;padding:11px 12px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.target-caption{display:block;font-size:7px;letter-spacing:1px;color:#98a5b5;margin-bottom:3px}#target-label{font-size:12px;font-weight:500;color:#526785}.target-controls .button{min-height:41px;min-width:110px;padding:10px 16px;font-size:12px}.shot-feedback{border-radius:8px;background:#edf1f6;color:#6b7f99;padding:11px 16px;font-size:12px;margin-bottom:16px;border-left:3px solid #bac9dc}.shot-feedback.hit{background:#fff1ec;color:#b06e5e;border-color:#e7a28c}.result{background:#edf5ed;border-color:#d5e5d3;margin:0 0 18px;padding:21px 24px}.result h2{margin:0 0 5px;font-size:23px}.result-stats{color:#7a8e77;font-size:11px;margin-top:12px}.rematch-actions{display:flex;flex-direction:column;align-items:center;gap:5px}.rematch-actions .text-button{font-size:11px;padding:3px}#rematch-status{color:#6c846c;font-size:10px}.match-bottom{margin:22px 0;gap:32px}.match-bottom details{border-top:1px solid #e2e7ed;padding-top:8px}.match-bottom summary{display:list-item;font-size:12px}#shot-total{font-size:10px;float:right;color:#a1aab7}#battle-log{list-style:none;padding:8px 0;margin:0;max-height:260px;overflow:auto}#battle-log li{padding:7px 0;font-size:11px;color:#7d8b9d;border-bottom:1px solid #e9edf2}.rules-copy{padding:12px 0}.rules-copy p{font-size:11px;line-height:1.8;color:#7d8b9d}.rules-copy strong{font-weight:600;color:#5a6d83}.rules-copy p+p{margin-top:10px}#arena~footer{margin-top:32px}
@media(max-width:900px){.play-area.placing{grid-template-columns:220px minmax(0,1fr);gap:20px}#placement-controls{padding:16px}.board-panel{padding:17px}.fleet-tracker{grid-template-columns:1fr}.fleet-row{font-size:11px}.board-title>span{font-size:9px;padding:3px 7px}}
@media(max-width:680px){#arena{width:calc(100% - 28px)}.arena-top{margin:12px 0 18px}.arena-game-name{font-size:11px}.arena-game-name>span{font-size:9px;margin-left:5px}.match-heading{gap:14px;margin-bottom:18px;align-items:start}.match-heading h1{font-size:25px}.match-heading #match-status{font-size:11px;line-height:1.65}.room-code{padding:10px}.room-code strong{font-size:16px}.versus-bar{padding:11px 14px}.versus-bar .player-info{gap:8px}.series-score{font-size:15px;letter-spacing:2px}.player-dot{width:5px;height:5px}.play-area.placing{display:flex;flex-direction:column;gap:16px}.play-area .boards,.play-area .boards.placing{grid-template-columns:1fr;width:100%;gap:18px}#placement-controls{width:100%;padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.setup-heading,#placement-hint,.ship-picker{grid-column:1 / -1}.setup-heading h2{font-size:14px}#placement-hint{font-size:10px}.ship-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ship-picker .ship-option{display:grid;grid-template-columns:1fr auto;padding:8px;gap:5px;min-height:49px;font-size:10px}.ship-option .ship-pips{grid-row:2}.ship-option small{grid-column:2;grid-row:1 / 3}.ship-pips i{width:6px;height:6px}#placement-controls .placement-actions{align-items:center}.placement-actions .button{font-size:10px!important;padding:7px!important;min-height:35px!important}#ready,#edit-fleet{grid-column:1 / -1}.setup-note{display:none}.board-panel{padding:16px}.board-title{margin-bottom:14px}.board-title h2{font-size:16px}.board{grid-template-columns:14px repeat(10,minmax(0,1fr));grid-template-rows:18px repeat(10,minmax(0,1fr));gap:2px}.cell{border-radius:2px;font-size:20px}.fleet-tracker{grid-template-columns:1fr 1fr;gap:10px 16px}.fleet-row{font-size:10px}.damage-pips i{width:4px}.play-area .boards.battling :is(#target-panel,#own-panel){order:-1}.target-controls{padding:10px}.target-controls .button{font-size:11px;min-width:108px}.target-caption{font-size:7px}.shot-feedback{font-size:11px;padding:10px 12px}.connection-banner{font-size:11px}.match-bottom{flex-direction:column;gap:12px}.result{padding:18px}.rematch-actions{width:100%}.rematch-actions .button{width:100%}.cell:focus-visible{outline-offset:-2px}}
.cell.selected{animation:target-pulse 1.6s ease-in-out infinite}@keyframes target-pulse{50%{outline-color:#aec1fa}}

/* Image sprites, clean square water cells, and mouse/touch placement. */
.ship-thumbnail{width:80px;height:27px;display:flex;align-items:center;justify-content:center;flex:none}
.ship-thumbnail svg{width:100%;height:100%;overflow:visible}
.ship-picker .ship-option{cursor:grab;touch-action:none;user-select:none;min-height:52px}
.ship-picker .ship-option:disabled{cursor:default;touch-action:auto}
.ship-piece{filter:drop-shadow(0 1px 1px #23313c28)}
.ship-piece.destroyed{opacity:.5;filter:grayscale(1)}
.ship-piece.being-dragged{opacity:.2}
.placing #own-board .cell.occupied{cursor:grab;touch-action:none}
.cell{border-radius:0!important;background:#f0f5f8;border-color:#dce5eb}
.cell.occupied{background:#f0f5f8}
.ship-drag-ghost{position:fixed;z-index:10000;pointer-events:none;opacity:.85;filter:drop-shadow(0 5px 4px #172b4d40)}
.ship-drag-ghost svg{width:100%;height:100%;display:block}
.ship-drag-ghost.invalid{opacity:.45}
.dragging-ship,.dragging-ship *{cursor:grabbing!important;user-select:none!important}
@media(max-width:680px){
  .ship-picker .ship-option{min-height:64px;gap:2px}
  .ship-thumbnail{grid-row:2;width:100%;height:24px;max-width:90px}
  .ship-option small{grid-row:1 / 3}
  .play-area.placing .boards{order:-1}
  #placement-controls{position:relative}
}
.board{aspect-ratio:1;grid-template-rows:18px repeat(10,minmax(0,1fr))}
.cell{aspect-ratio:auto}
@media(max-width:680px){.board{grid-template-rows:14px repeat(10,minmax(0,1fr))}}
/* One focused screen per turn; either view remains available for inspection. */
.battle-navigation{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:680px;margin:0 auto 18px;padding:15px 18px;background:#eaf0fb;border:1px solid #d5dfef;border-radius:11px;scroll-margin-top:18px}.battle-navigation>div:first-child{display:grid;gap:5px}.battle-navigation span{font-size:11px;letter-spacing:1px;font-weight:700;color:#4266a0}.battle-navigation small{font-size:10px;color:#8491a4}.battle-view-buttons{display:flex;gap:5px}.battle-view-buttons button{border:1px solid transparent;background:transparent;border-radius:7px;padding:10px 13px;font:inherit;font-size:11px;color:#6b7e9a;cursor:pointer;white-space:nowrap}.battle-view-buttons button[aria-pressed=true]{background:white;color:#305fba;border-color:#d2dff5;box-shadow:0 2px 4px #3451790a}.play-area .boards.battling{grid-template-columns:minmax(0,620px);justify-content:center}.boards.battling :is(#target-panel,#own-panel){background:#142c48;border-color:#294969;box-shadow:0 12px 30px #102b4920}.boards.battling :is(#target-panel,#own-panel) h2{color:#edf5ff}.boards.battling :is(#target-panel,#own-panel) .board-kicker{color:#7eadd4}.boards.battling :is(#target-panel,#own-panel) .board-title>span{border-color:#3a5672;color:#9cb6d0}.boards.battling :is(#enemy-board,#own-board) .axis{color:#91b3d5}.boards.battling :is(#enemy-board,#own-board) .cell{background:#1c3b5b;border-color:#315472}.boards.battling :is(#enemy-board,#own-board) .cell:enabled:hover{background:#305b82;border-color:#78c5f6}.boards.battling :is(#enemy-board,#own-board) .cell.selected{background:#376c9d;outline-color:#88d4ff;color:white}.boards.battling :is(#target-panel,#own-panel) .target-controls{margin:0 0 15px;background:#203d5b;border-color:#335574}.boards.battling #target-label{color:#d5e8fc}.boards.battling :is(#target-panel,#own-panel) .target-caption{color:#8caecd}.boards.battling :is(#target-panel,#own-panel) .fleet-tracker{border-color:#35516d}.boards.battling :is(#target-panel,#own-panel) .fleet-row{color:#9eb7d2}.boards.battling :is(#target-panel,#own-panel) .fleet-row>small{color:#90abc7}.boards.battling :is(#target-panel,#own-panel) .damage-pips i{background:#426080}.boards.battling :is(#target-panel,#own-panel) .damage-pips .damaged{background:#ef9783}.board-enter{animation:board-switch .24s ease-out}@keyframes board-switch{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:680px){.battle-navigation{flex-direction:column;align-items:stretch;gap:10px;padding:13px}.battle-view-buttons button{flex:1}.play-area .boards.battling{grid-template-columns:1fr}.boards.battling .board-panel{padding:14px}}
/* Server-confirmed shot sequence: bomb fall, impact, then the turn changes. */
.shot-effect{position:relative;z-index:25;pointer-events:none;display:grid;place-items:center;overflow:visible;min-width:0;min-height:0}.falling-bomb{position:absolute;width:13px;height:26px;background:linear-gradient(90deg,#263745,#8b9ca8 55%,#263745);border:1px solid #111f2d;border-radius:50% 50% 42% 42%;box-shadow:0 0 10px #f4c47860;animation:bomb-fall .55s cubic-bezier(.45,.05,.85,.5) both}.falling-bomb:before{content:'';position:absolute;width:21px;height:9px;left:-5px;top:-3px;background:#526775;clip-path:polygon(0 0,40% 30%,60% 30%,100% 0,90% 100%,10% 100%)}.falling-bomb:after{content:'';position:absolute;width:3px;height:75px;bottom:23px;left:4px;background:linear-gradient(transparent,#e8f6ffb0);filter:blur(1px)}.impact-core{position:absolute;width:100%;height:100%;border-radius:50%;opacity:0;animation:shot-burst .55s .52s ease-out both}.impact-hit .impact-core{background:radial-gradient(circle,#fff9bf 0%,#ffc74a 24%,#f48027 46%,#db4f2370 64%,transparent 72%);box-shadow:0 0 25px #ff8b3450}.impact-miss .impact-core{background:radial-gradient(circle,#e9fcff 0%,#8fe0f1aa 30%,transparent 67%)}.splash-ring{position:absolute;width:65%;height:65%;border:2px solid #bcefff;border-radius:50%;opacity:0;animation:shot-ring .85s .55s ease-out both}.splash-ring.second{animation-delay:.7s}.impact-hit .splash-ring{border-color:#ffb562}.impact-particle{position:absolute;width:4px;height:11px;border-radius:50%;background:#bdefff;opacity:0;animation:shot-particle .65s .55s ease-out both;transform:rotate(var(--angle))}.impact-hit .impact-particle{background:#ffb136;width:5px;height:7px}.impact-sunk .impact-core{width:155%;height:155%}.impact-label{position:absolute;top:-28px;padding:4px 7px;background:#dceffb;color:#28597b;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:1px;white-space:nowrap;opacity:0;animation:shot-label .8s .65s ease-out both}.impact-hit .impact-label{background:#ffdec1;color:#9e4327}.shot-resolving:after{animation:reveal-peg .6s step-end both}@keyframes bomb-fall{0%{transform:translate(35px,-230px) rotate(17deg);opacity:0}10%{opacity:1}92%{opacity:1}100%{transform:translate(0,0) rotate(0);opacity:0}}@keyframes shot-burst{0%{transform:scale(.1);opacity:0}20%{opacity:1}55%{opacity:.9}100%{transform:scale(2.5);opacity:0}}@keyframes shot-ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(3.3);opacity:0}}@keyframes shot-particle{0%{transform:rotate(var(--angle)) translateY(0);opacity:0}20%{opacity:1}100%{transform:rotate(var(--angle)) translateY(var(--distance));opacity:0}}@keyframes shot-label{0%{opacity:0;transform:translateY(8px)}20%,75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}@keyframes reveal-peg{from{opacity:0}to{opacity:1}}

/* Opponent waters: a focused targeting console with readable combat history. */
.boards.battling :is(#target-panel,#own-panel){background:radial-gradient(ellipse at 90% 0%,#194958 0,transparent 55%),linear-gradient(145deg,#102d40,#091d30);border:1px solid #294c60;border-radius:18px;padding:25px;box-shadow:0 18px 45px #102b4926;overflow:hidden}
.boards.battling :is(#target-panel,#own-panel) .board-title{align-items:flex-start;margin-bottom:18px;gap:12px}
.boards.battling :is(#target-panel,#own-panel) .board-kicker{color:#73d7cf;font-size:9px;letter-spacing:2px}
.boards.battling :is(#target-panel,#own-panel) h2{font-size:25px;letter-spacing:-.7px;margin:5px 0}
.target-opponent{font-size:12px;color:#9bb6c8;margin:0;overflow-wrap:anywhere}
.attack-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#96f1d9;background:#174b4b;border:1px solid #34756e;border-radius:30px;padding:8px 10px;font-size:10px;font-weight:600}
.attack-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.boards.battling .board-panel[data-state=waiting] .attack-status,.boards.battling .board-panel[data-state=paused] .attack-status{color:#b4c7d7;background:#263e51;border-color:#405c70}
.boards.battling .board-panel[data-state=firing] .attack-status{color:#ffd49a;background:#534128;border-color:#7f6037}
.attack-summary{display:flex;gap:24px;padding:12px 0;border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16;color:#a3bdcd;font-size:11px;align-items:center}
.attack-summary strong{color:#e6f5ff;font-size:16px;font-variant-numeric:tabular-nums;margin-right:4px}
.attack-summary #enemy-count{margin-left:auto;color:#84d7ca;font-size:11px}
.attack-instruction{font-size:12px;line-height:1.6;color:#b7cedc;min-height:20px;margin:15px 0}
.boards.battling :is(#target-panel,#own-panel) .target-controls{background:#071a2b;border:1px solid #36596e;border-radius:10px;padding:12px 15px;margin-bottom:17px;box-shadow:inset 0 1px #ffffff06}
.boards.battling :is(#target-panel,#own-panel) .target-caption{font-size:8px;letter-spacing:1.6px;color:#91afc2}
.boards.battling #target-label{font-size:17px;font-weight:600;letter-spacing:.3px}
#target-panel #fire{background:#82e2c9;color:#0b3033;border:1px solid #a1f3df;box-shadow:0 3px 0 #338a79;min-height:44px;font-weight:700;transition:background .18s,transform .18s,box-shadow .18s}
#target-panel #fire:enabled:hover{background:#a0f1dc;transform:translateY(-1px);box-shadow:0 4px 0 #338a79,0 0 20px #70e7c722}
#target-panel #fire:disabled{background:#284454;color:#90a9ba;border-color:#385569;box-shadow:none;opacity:1}
.boards.battling :is(#enemy-board,#own-board){background:radial-gradient(ellipse at 65% 30%,#23647766,transparent 75%),#0a2438;border-radius:5px;gap:3px}
.boards.battling :is(#enemy-board,#own-board) .axis{font-size:10px;color:#9bbfce;font-weight:600}
.boards.battling :is(#enemy-board,#own-board) .cell{background:#1a405266;border:1px solid #3b718266;transition:background .16s,border-color .16s,box-shadow .16s;opacity:1}
.boards.battling :is(#enemy-board,#own-board) .cell.target-guide{background:#3b91873d;border-color:#568f9366}
.boards.battling :is(#enemy-board,#own-board) .cell:enabled:hover{background:#4ba99b55;border-color:#91e9d4;box-shadow:inset 0 0 12px #7cebd122}
.boards.battling :is(#enemy-board,#own-board) .cell.selected{background:#64c7b33d;outline:2px solid #9bf4dd;outline-offset:-2px;color:#c9fff1;font-size:32px;box-shadow:0 0 18px #6ae7c82b;z-index:3;animation:lock-on 1.8s ease-in-out infinite}
.boards.battling :is(#enemy-board,#own-board) .cell.hit{background:#ac573a40;border-color:#cf835b99}
.boards.battling :is(#enemy-board,#own-board) .cell.hit:after{width:36%;height:36%;background:radial-gradient(circle at 35% 30%,#ffe0ad,#fa8a50 50%,#bd4529);border:1px solid #ffbc85;box-shadow:0 0 9px #f57b3e66}
.boards.battling :is(#enemy-board,#own-board) .cell.miss{background:#102f42;border-color:#315667}
.boards.battling :is(#enemy-board,#own-board) .cell.miss:after{width:22%;height:22%;background:#bfdde8;border:1px solid #e5f6fc;box-shadow:0 0 0 4px #b2e3f00d}
.boards.battling :is(#enemy-board,#own-board) .cell.sunk{background:#914d374d;border-color:#df8a6777}
.attack-legend{display:flex;justify-content:center;gap:23px;color:#a8c1d1;font-size:10px;padding:17px 0}
.attack-legend span{display:flex;align-items:center;gap:7px}.attack-legend i{display:block;width:9px;height:9px}
.unsearched-key{border:1px solid #5f8997;background:#204453}.hit-key{background:#ff9d63;border-radius:50%;box-shadow:0 0 7px #ff965b55}.miss-key{background:#bfdde8;border-radius:50%}
.enemy-fleet-heading{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid #ffffff16;font-size:11px;color:#e2edf4}.enemy-fleet-heading span{font-size:10px;color:#91afc2}
.boards.battling :is(#target-panel,#own-panel) .fleet-tracker{border:0;padding-top:0;margin-top:14px;gap:12px 24px}
.boards.battling :is(#target-panel,#own-panel) .fleet-row{color:#b3cad8}.boards.battling :is(#target-panel,#own-panel) .fleet-row>small{color:#a0bece}.boards.battling :is(#target-panel,#own-panel) .damage-pips i{background:#3b596b;height:8px}.boards.battling :is(#target-panel,#own-panel) .damage-pips .damaged{background:#ff9d63}.boards.battling :is(#target-panel,#own-panel) .fleet-row.sunk{color:#f4a080}
@keyframes lock-on{50%{box-shadow:0 0 22px #6ae7c84d;outline-color:#58bda5}}
@media(max-width:680px){.boards.battling :is(#target-panel,#own-panel){padding:15px;border-radius:13px}.boards.battling :is(#target-panel,#own-panel) h2{font-size:21px}.attack-status{font-size:9px;padding:7px 8px}.attack-summary{gap:15px;font-size:10px}.attack-summary strong{font-size:14px}.attack-instruction{font-size:11px;min-height:35px;margin:12px 0}.boards.battling #target-label{font-size:14px}.boards.battling :is(#target-panel,#own-panel) .target-controls{padding:10px}.boards.battling :is(#enemy-board,#own-board){gap:2px}.boards.battling :is(#enemy-board,#own-board) .cell.selected{font-size:25px}.attack-legend{gap:19px}.enemy-fleet-heading span{font-size:9px}}


/* Keep setup, attack, defence and results usable on narrow touch screens. */
@media(max-width:680px){
  .arena-top{gap:8px;flex-wrap:wrap}.arena-top button{min-height:44px;padding:8px}
  .match-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .match-heading h1{font-size:24px}.match-heading #match-status{font-size:13px;max-width:none}
  .room-code{min-width:95px;align-self:start}.room-code strong{letter-spacing:2px}
  .versus-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;padding:12px}
  .versus-bar .player-info{min-width:0;gap:6px}.player-info>div{min-width:0}
  .versus-bar strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  .versus-bar small{font-size:11px;overflow-wrap:anywhere}.series-score{white-space:nowrap}
  .play-area.placing .boards{order:0}
  #placement-controls{gap:10px;padding:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #placement-hint{font-size:12px;line-height:1.5}.ship-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ship-picker .ship-option{font-size:11px;min-width:0}
  #placement-controls .placement-actions .button{min-height:44px!important;font-size:12px!important}
  #clear-fleet,#ready,#edit-fleet{min-height:44px;font-size:13px}
  .battle-view-buttons button{min-height:44px;font-size:12px}
  .battle-navigation span{font-size:12px}.battle-navigation small{font-size:11px}
  .board-panel{padding:12px}.board-title h2{font-size:19px}
  .boards.battling :is(#target-panel,#own-panel){padding:12px}
  .attack-instruction{font-size:12px;min-height:0}
  .boards.battling :is(#target-panel,#own-panel) .target-controls{gap:8px}.target-controls>div{min-width:0}
  .boards.battling #target-label{font-size:14px;overflow-wrap:anywhere}
  .target-controls .button{min-height:46px;font-size:12px;min-width:100px}
  .target-caption{font-size:9px!important}.fleet-row{font-size:11px}.fleet-row>small{font-size:10px}
  .shot-feedback,.connection-banner{font-size:12px;overflow-wrap:anywhere}
  .result{gap:16px}.result h2{font-size:24px}.result p,.result-stats,#rematch-status{font-size:12px;overflow-wrap:anywhere}
  .match-bottom summary{font-size:14px}.rules-copy p,#battle-log li{font-size:13px}
}
@media(max-width:360px){
  .boards.battling :is(#target-panel,#own-panel) .board-title{flex-wrap:wrap;gap:8px}.attack-summary{gap:10px;font-size:10px}
  .boards.battling :is(#target-panel,#own-panel) .fleet-tracker{gap:12px}.fleet-row{gap:4px}
  .match-heading h1{font-size:21px}.room-code{min-width:88px;padding:8px}
}
@media(max-width:680px){.versus-bar>.player-info{max-width:none;width:100%}.versus-bar>.player-info:last-child{justify-content:flex-end}.versus-bar small{overflow-wrap:normal}}

/* Attack and defence share one battle theme for every player. */
.boards.battling #own-panel .board-legend{color:#a8c1d1;padding:17px 0;margin:0;font-size:10px}
.boards.battling #own-panel .legend-hit{background:#ff9d63}.boards.battling #own-panel .legend-miss{background:#bfdde8;border-color:#e5f6fc}
.boards.battling #own-panel .legend-ship{background:#789da9;border:1px solid #a8c4cb}
.boards.battling #own-panel .cell.occupied{background:#2c5a6b88;border-color:#65909b88}
.boards.battling #own-panel .ship-piece{filter:drop-shadow(0 2px 3px #0009)}
.boards.battling #own-panel .ship-piece.destroyed{opacity:.5;filter:grayscale(1)}
.attack-summary #own-count{margin-left:auto;color:#84d7ca;font-size:11px}
.boards.battling #own-panel .board-title>#defend-status{color:#b4c7d7;border-color:#405c70}
.boards.battling #own-panel[data-state=active] .board-title>#defend-status{color:#96f1d9;border-color:#34756e}
.boards.battling #own-panel[data-state=firing] .board-title>#defend-status{color:#ffd49a;border-color:#7f6037}

/* Shared, bounded impact effects: incoming and outgoing use identical layers. */
.shot-feedback{position:relative;padding:16px 18px 16px 62px;border:1px solid #bdd6e1;border-radius:12px;background:linear-gradient(110deg,#e8f3f8,#f4f8fb);color:#416679;min-height:66px;font-size:13px;line-height:1.5}
.shot-feedback:before{content:'≈';position:absolute;left:17px;top:16px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#cee8f2;color:#367d98;font-size:24px;font-weight:700}
.shot-feedback.hit{background:linear-gradient(110deg,#fff0df,#fff7ef);border-color:#edb789;color:#994d2a}
.shot-feedback[data-outcome=hit]:before{content:'✹';background:#ffdab2;color:#c35123}
.shot-feedback[data-outcome=sunk]{background:linear-gradient(110deg,#382b31,#59382e);border-color:#a86e4c;color:#ffe3c5}
.shot-feedback[data-outcome=sunk]:before{content:'↓';background:#975a3c;color:#ffe6c0}
.impact-reticle{position:absolute;inset:-10%;border:2px dashed #d7f5ff;border-radius:50%;animation:incoming-lock .56s ease-out both}
.impact-plume,.impact-smoke{position:absolute;pointer-events:none;opacity:0;border-radius:50%}
.impact-plume{width:65%;height:170%;bottom:25%;transform-origin:50% 100%;animation:impact-column .85s .53s ease-out both}
.impact-hit .impact-plume{background:radial-gradient(ellipse at 50% 80%,#fff3b8 10%,#ffad39 35%,#ef5224a0 62%,transparent 72%)}
.impact-miss .impact-plume{background:radial-gradient(ellipse at 50% 90%,#f2ffff 8%,#afecffcc 38%,#73c7e780 60%,transparent 73%)}
.impact-smoke{width:160%;height:160%;background:radial-gradient(ellipse,#4c4945b0,#69615b60 40%,transparent 70%);animation:impact-smoke 1.2s .7s ease-out both}
.impact-miss .impact-smoke{background:radial-gradient(ellipse,#d5f7ff70,transparent 70%)}
.impact-sunk .impact-smoke{width:220%;height:220%}
.splash-ring{border-width:2px;animation-duration:1.05s}.splash-ring.third{animation-delay:.84s;border-width:1px}
.impact-miss .splash-ring{transform-origin:center;box-shadow:0 0 5px #c4f4ff50}
.impact-label{top:100%;margin-top:7px;z-index:2;border:1px solid #91c8dc;box-shadow:0 4px 12px #00152650;background:#dff6ff;color:#175976;font-size:10px;animation:shot-label 1.15s .65s ease-out both}
.impact-hit .impact-label{background:#ffddb4;border-color:#ffa86c;color:#883412}.impact-sunk .impact-label{background:#773a23;color:#fff0d6;border-color:#ffc281}
.edge-left .impact-label{left:0}.edge-right .impact-label{right:0}
.falling-bomb{box-shadow:0 0 12px #f4c47890,0 -8px 18px #dcefff40}
@keyframes incoming-lock{from{transform:scale(1.8) rotate(-45deg);opacity:0}30%{opacity:.8}to{transform:scale(.6) rotate(30deg);opacity:0}}
@keyframes impact-column{0%{transform:scale(.15,.05);opacity:0}20%{transform:scale(.9,1);opacity:1}70%{opacity:.6}100%{transform:scale(1.8,.4) translateY(-15%);opacity:0}}
@keyframes impact-smoke{0%{transform:scale(.3);opacity:0}25%{opacity:.8}100%{transform:translateY(-45%) scale(1.6);opacity:0}}
@keyframes impact-jolt{0%,100%{transform:translate(0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}65%{transform:translate(-1px,0)}}
@keyframes feedback-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

 .board:has(.impact-hit){animation:impact-jolt .3s .54s ease-out}
 .shot-feedback.is-resolving{animation:feedback-arrive .25s .55s both}

@media(max-width:680px){.shot-feedback{padding:13px 12px 13px 53px;font-size:12px}.shot-feedback:before{left:12px;top:13px;width:29px;height:29px}.impact-label{font-size:8px;padding:4px 5px}.impact-particle{--distance:38px!important}}

#arena #back{min-width:112px;min-height:50px;padding:12px 22px;font-size:16px;font-weight:700;border:1px solid #cbd7e6;box-shadow:0 2px 4px #20375309}
#outcome-dialog{text-align:center;padding:36px 28px 24px;overflow-wrap:anywhere}
#outcome-dialog::backdrop{background:#071a32b3;backdrop-filter:blur(6px)}
#outcome-symbol{display:grid;place-items:center;width:76px;height:76px;margin:4px auto 20px;border-radius:50%;font-size:40px;background:#e5edf8;color:#526e99}
#outcome-dialog[data-outcome=win] #outcome-symbol{background:#ddf4e8;color:#238363}
#outcome-dialog[data-outcome=loss] #outcome-symbol{background:#f8e4de;color:#ad6049}
#outcome-dialog h2{font-size:34px;padding:0;margin:0 0 12px;letter-spacing:-1px}
#outcome-detail{font-size:15px;line-height:1.6;color:#63748a}#outcome-stats{font-size:12px;color:#8290a2;margin:16px 0 24px}
#outcome-back{min-height:52px;font-size:16px}#outcome-dialog>.text-button{min-height:44px;margin-top:8px}
#outcome-dialog[open]{animation:outcome-reveal .35s ease-out}#outcome-dialog[open] #outcome-symbol{animation:outcome-badge .6s ease-out}
@keyframes outcome-reveal{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes outcome-badge{from{transform:scale(.5) rotate(-15deg)}65%{transform:scale(1.1) rotate(5deg)}to{transform:scale(1) rotate(0)}}
@media(max-width:360px){#arena #back{min-width:95px;padding:12px 16px}.arena-game-name>span{display:block;margin-left:0}#outcome-dialog{padding:30px 20px 20px}}

/* Keep the selected ship visible while editing an auto-placed fleet. */
.placing #own-board .cell.ship-selected{background:#d8f5ef;box-shadow:inset 0 0 0 2px #169b87}
.placing .ship-piece.selected-ship{filter:drop-shadow(0 0 4px #169b8790) drop-shadow(0 2px 2px #16344355)}
.placing #own-board .cell.occupied:hover{box-shadow:inset 0 0 0 2px #169b87}
.desktop-battle-note{display:none}
@media(min-width:1000px){
  .play-area .boards.battling{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .battle-navigation{max-width:none}
  .battle-navigation .battle-view-buttons,.battle-navigation .mobile-battle-note{display:none}
  .battle-navigation .desktop-battle-note{display:block}
  .boards.battling .board-panel{min-width:0}
}