.p4-wrap { width: min(520px, 100%); }
.p4-board {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
  padding: 8px; background: #1d3fd6;
  box-shadow: 0 0 0 3px #0b1660, inset 0 4px 0 #4d7bff, inset 0 -4px 0 #0f2380, 8px 8px 0 #000;
}
.p4-col { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; border: 0; background: transparent; cursor: default; }
.p4-wrap.my-turn .p4-col:not([aria-disabled="true"]) { cursor: pointer; }
.p4-wrap.my-turn .p4-col:not([aria-disabled="true"]):hover, .p4-col:focus-visible { background: #ffffff1a; outline: none; }
.p4-col:focus-visible { box-shadow: inset 0 0 0 3px var(--yellow); }
.p4-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.p4-cell::before { content: ""; position: absolute; inset: 12%; background: #05040d; box-shadow: inset 3px 3px 0 #000; }
.p4-cell .p4-disc { position: relative; width: 84%; height: 84%; display: block; image-rendering: pixelated; }
.p4-cell .p4-disc.preview { opacity: 0; }
.p4-wrap.my-turn .p4-col:hover .p4-disc.preview, .p4-col:focus-visible .p4-disc.preview { opacity: .45; }
.p4-cell .p4-disc.drop { animation: p4-drop .35s steps(6); }
.p4-cell.last::after { content: ""; position: absolute; inset: 4%; box-shadow: 0 0 0 2px #ffffffaa; }
.p4-cell.win .p4-disc { animation: p4-win .6s steps(2) infinite; }
.p4-cell.win::after { content: ""; position: absolute; inset: 4%; box-shadow: 0 0 0 3px var(--green), 0 0 14px var(--green); }
@keyframes p4-drop { from { transform: translateY(-260%); } }
@keyframes p4-win { 50% { filter: brightness(1.5); } }
.p4-board.mini { padding: 3px; box-shadow: 0 0 0 2px #0b1660; gap: 0; }
.p4-board.mini .p4-cell::before { box-shadow: none; }
.p4-board.mini .p4-cell.last::after { box-shadow: 0 0 0 1px #fff; }
.replay .p4-board.mini, .replay-stage .p4-board.mini { width: 100%; }

.ot-wrap { width: min(500px, 100%); display: grid; gap: 10px; }
.ot-score { display: flex; justify-content: center; gap: 12px; }
.ot-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #000; box-shadow: 0 0 0 2px var(--border); font-family: var(--font-digits); font-size: 1.4rem; }
.ot-chip svg { width: 22px; height: 22px; image-rendering: pixelated; }
.ot-board {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px;
  padding: 8px; background: #05301b;
  box-shadow: 0 0 0 3px #0b4a2a, inset 0 3px 0 #3dff9a44, 8px 8px 0 #000;
}
.ot-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; background: #0f7a46; box-shadow: inset -2px -2px 0 #0007, inset 2px 2px 0 #ffffff14; }
.ot-cell:nth-child(16n+2), .ot-cell:nth-child(16n+4), .ot-cell:nth-child(16n+6), .ot-cell:nth-child(16n+8),
.ot-cell:nth-child(16n+9), .ot-cell:nth-child(16n+11), .ot-cell:nth-child(16n+13), .ot-cell:nth-child(16n+15) { background: #0d6b3d; }
.ot-cell .ot-stone { width: 84%; height: 84%; display: block; image-rendering: pixelated; }
.ot-cell .ot-stone.flip { animation: ot-flip .3s steps(3); }
.ot-cell.last { box-shadow: inset 0 0 0 2px var(--yellow); }
.ot-cell.legal { cursor: pointer; }
.ot-cell.legal::after { content: ""; width: 26%; height: 26%; background: #3dff9a; box-shadow: 0 0 10px #3dff9a; animation: dm-pulse 1.2s ease-in-out infinite; }
.ot-cell.legal:hover, .ot-cell:focus-visible { outline: none; background: #18a862; }
.ot-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--yellow); }
@keyframes ot-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(.1); } }
.ot-pass { padding: 8px 10px; text-align: center; color: var(--yellow); background: #000; box-shadow: 0 0 0 2px var(--yellow); font-size: .85rem; }
.ot-board.mini { padding: 3px; gap: 1px; box-shadow: 0 0 0 2px #0b4a2a; }
.ot-board.mini .ot-cell { box-shadow: none; }
.ot-board.mini .ot-cell.last { box-shadow: inset 0 0 0 1px var(--yellow); }
.ot-board.mini .ot-cell.flipped { filter: brightness(1.25); }
.replay .ot-board.mini, .replay-stage .ot-board.mini { width: 100%; }

.bn-wrap { width: min(760px, 100%); display: grid; gap: 10px; }
.bn-grids { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 640px) { .bn-grids { grid-template-columns: 1fr; } }
.bn-side { display: grid; gap: 8px; }
.bn-head { display: flex; align-items: center; gap: 8px; font: .78rem var(--font-display); text-transform: uppercase; color: var(--text-2); }
.bn-head strong { flex: 1; }
.bn-ship-icon { width: 20px; height: 20px; image-rendering: pixelated; }
.bn-afloat { display: inline-flex; gap: 3px; align-items: center; }
.bn-afloat i { display: inline-block; width: calc(var(--n) * 6px); height: 6px; background: var(--cyan); box-shadow: 0 0 0 1px #000; }
.bn-side.target .bn-afloat i { background: var(--red); }
.bn-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: 6px;
  background: #061a3d; box-shadow: 0 0 0 3px #0b2a5c, 6px 6px 0 #000;
  background-image: linear-gradient(#22e4ff0d 50%, transparent 50%); background-size: 100% 6px;
}
.bn-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; background: #0d3270; color: #fff; font: 1rem/1 var(--font-display); }
.bn-cell.ship { background: #5b6f96; box-shadow: inset 0 0 0 2px #24314d; }
.bn-cell.ship.h.start { border-radius: 40% 0 0 40%; }
.bn-cell.ship.h.end { border-radius: 0 40% 40% 0; }
.bn-cell.ship.v.start { border-radius: 40% 40% 0 0; }
.bn-cell.ship.v.end { border-radius: 0 0 40% 40%; }
.bn-cell.ship.sunk { background: #3a1420; box-shadow: inset 0 0 0 2px var(--red); }
.bn-cell.hit { background: #8a2337; color: var(--yellow); }
.bn-cell.hit .bn-mark { text-shadow: 0 0 6px var(--yellow); }
.bn-cell.ship.hit { background: #8a2337; }
.bn-cell.miss { background: #082456; color: #bfefff99; }
.bn-cell.pending::after { content: ""; position: absolute; inset: 25%; box-shadow: 0 0 0 2px var(--yellow); animation: blink .4s steps(1) infinite; }
.bn-cell.last { box-shadow: inset 0 0 0 2px var(--yellow); }
.bn-wrap.my-turn .target button.bn-cell:not([aria-disabled="true"]) { cursor: crosshair; }
.bn-wrap.my-turn .target button.bn-cell:not([aria-disabled="true"]):hover, .bn-cell:focus-visible { outline: none; background: #1d4fa8; box-shadow: inset 0 0 0 2px var(--cyan); }
.bn-cell[aria-disabled="true"] { cursor: default; }
.bn-side.target .bn-grid { box-shadow: 0 0 0 3px #0b2a5c, 6px 6px 0 #000; }
.bn-wrap.my-turn .bn-side.target .bn-grid { box-shadow: 0 0 0 3px var(--cyan), 0 0 22px -6px var(--cyan), 6px 6px 0 #000; }
.bn-side.own .bn-grid { opacity: .92; }
.bn-hint { text-align: center; color: var(--cyan); font-size: .85rem; }
.bn-result { justify-self: center; padding: 6px 14px; background: #000; font: .8rem var(--font-display); text-transform: uppercase; box-shadow: 0 0 0 2px var(--border); }
.bn-result.hit, .bn-result.sunk { color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.bn-result.sunk { color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.bn-result.miss { color: #bfefff; }
.bn-mini-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bn-grid.mini { padding: 2px; gap: 1px; box-shadow: 0 0 0 2px #0b2a5c; background-image: none; }
.bn-grid.mini .bn-cell { font-size: .45rem; box-shadow: none; border-radius: 0 !important; }
.bn-grid.mini .bn-cell.last { box-shadow: inset 0 0 0 1px var(--yellow); }

.p4-board { --hole: #05040d; }
.p4-cell::before { background: var(--hole); }
.p4-board.theme-wood_p4 { --hole: #2a1608; background: linear-gradient(135deg, #a8743f, #6b4423); box-shadow: 0 0 0 3px #3e2512, inset 0 4px 0 #c8945a, inset 0 -4px 0 #3e2512, 8px 8px 0 #000; }
.p4-board.theme-candy_p4 { --hole: #3a0b2a; background: repeating-linear-gradient(45deg, #ff7ac8 0 10px, #ffb3e1 10px 20px); box-shadow: 0 0 0 3px #a01588, inset 0 4px 0 #ffd6f0, 8px 8px 0 #000; }
.p4-board.theme-neon_p4 { --hole: #0b0820; background: #05040d; box-shadow: 0 0 0 3px #22e4ff, 0 0 26px -6px #22e4ff, 8px 8px 0 #000; }
.p4-board.theme-neon_p4 .p4-cell::before { box-shadow: inset 0 0 0 2px #ff2bd6aa; }
.p4-board.theme-galaxy_p4 { --hole: #0a0420; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fffa, transparent), radial-gradient(circle at 30% 20%, #6d28d9, #1a0b3d 70%); box-shadow: 0 0 0 3px #9b5cff, 8px 8px 0 #000; }
.p4-board.theme-throne_p4 { --hole: #2a1a00; background: linear-gradient(135deg, #b8860b, #f5c96a 50%, #8a6408); box-shadow: 0 0 0 3px #fff3b0, 0 0 22px -6px #f5c96a, 8px 8px 0 #000; }
.p4-board.sample { width: 120px; padding: 3px; }
.p4-disc-preview { display: flex; gap: 6px; justify-content: center; }
.p4-disc-preview svg { width: 40px; height: 40px; image-rendering: pixelated; }
.p4-disc.set-neon_discs, .ot-stone.set-neon_stones { filter: drop-shadow(0 0 3px currentColor); }
.p4-disc.set-gem_discs { filter: drop-shadow(0 0 2px #ffffff88); }
.p4-disc.set-royal_discs, .ot-stone.set-royal_stones { filter: drop-shadow(0 0 3px #f5c96a99); }
.ot-stone.set-lava_stones.flip, .ot-stone.set-lava_stones { filter: drop-shadow(0 0 2px #ff6a00aa); }

.ot-board.sample { width: 110px; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 3px; gap: 1px; }
.ot-board.theme-felt_othello .ot-cell { background: #7a1426; }
.ot-board.theme-felt_othello .ot-cell:nth-child(2n) { background: #6a0f1f; }
.ot-board.theme-felt_othello { background: #3a0610; box-shadow: 0 0 0 3px #c8961e, 8px 8px 0 #000; }
.ot-board.theme-ocean_othello .ot-cell { background: #1d6fa8; }
.ot-board.theme-ocean_othello .ot-cell:nth-child(2n) { background: #185e90; }
.ot-board.theme-ocean_othello { background: #0b3a5c; box-shadow: 0 0 0 3px #7bc0e6, 8px 8px 0 #000; }
.ot-board.theme-sakura_othello .ot-cell { background: #f7c6d9; }
.ot-board.theme-sakura_othello .ot-cell:nth-child(2n) { background: #f2b3cc; }
.ot-board.theme-sakura_othello { background: #8a2a55; box-shadow: 0 0 0 3px #ffd6e8, 8px 8px 0 #000; }
.ot-board.theme-circuit_othello .ot-cell { background: radial-gradient(circle at 50% 50%, #d9a05b33 0 10%, transparent 11%), #0f3b2c; }
.ot-board.theme-circuit_othello .ot-cell:nth-child(2n) { background: linear-gradient(90deg, transparent 46%, #d9a05b55 46% 54%, transparent 54%), #0a2a1f; }
.ot-board.theme-circuit_othello { background: #05150f; box-shadow: 0 0 0 3px #7dffb3, 0 0 20px -6px #7dffb3, 8px 8px 0 #000; }
.ot-board.theme-throne_othello .ot-cell { background: radial-gradient(circle at 30% 30%, #2a2a2a, #050505); }
.ot-board.theme-throne_othello .ot-cell:nth-child(2n) { background: #1a1408; }
.ot-board.theme-throne_othello { background: linear-gradient(135deg, #b8860b, #f5c96a 50%, #8a6408); box-shadow: 0 0 0 3px #fff3b0, 8px 8px 0 #000; }

.bn-sample { width: 120px; }
.bn-wrap, .bn-sample { --sea: #0d3270; --sea-2: #061a3d; --sea-edge: #0b2a5c; --miss: #082456; }
.theme-night_grid { --sea: #0b0f2a; --sea-2: #04061a; --sea-edge: #2a2f6a; --miss: #070a20; }
.theme-arctic_grid { --sea: #7cc4ea; --sea-2: #d9eefb; --sea-edge: #3b82b6; --miss: #a9d8f2; }
.theme-radar_grid { --sea: #062a14; --sea-2: #031a0c; --sea-edge: #3dff9a; --miss: #04200f; }
.theme-lava_grid { --sea: #4a1206; --sea-2: #1a0603; --sea-edge: #ff6a00; --miss: #330a03; }
.theme-throne_grid { --sea: #1a1408; --sea-2: #0b0803; --sea-edge: #f5c96a; --miss: #120d04; }
.bn-wrap .bn-grid, .bn-sample .bn-grid { background-color: var(--sea-2); box-shadow: 0 0 0 3px var(--sea-edge), 6px 6px 0 #000; }
.bn-wrap .bn-cell, .bn-sample .bn-cell { background: var(--sea); }
.bn-wrap .bn-cell.miss, .bn-sample .bn-cell.miss { background: var(--miss); }
.theme-radar_grid .bn-grid { background-image: radial-gradient(circle at 50% 50%, transparent 30%, #3dff9a14 31% 32%, transparent 33%, transparent 60%, #3dff9a14 61% 62%, transparent 63%); }
.bn-cell.ship.skin-grey_fleet { background: #5b6f96; box-shadow: inset 0 0 0 2px #24314d; }
.bn-cell.ship.skin-sub_fleet { background: #f2c94c; box-shadow: inset 0 0 0 2px #8a6408; }
.bn-cell.ship.skin-pirate_fleet { background: repeating-linear-gradient(90deg, #8a5a32 0 4px, #6b4423 4px 8px); box-shadow: inset 0 0 0 2px #2e1a0b; }
.bn-cell.ship.skin-neon_fleet { background: #16061f; box-shadow: inset 0 0 0 2px #22e4ff, 0 0 8px -2px #22e4ff; }
.bn-cell.ship.skin-stealth_fleet { background: linear-gradient(135deg, #1a1d24, #2c313c); box-shadow: inset 0 0 0 2px #0a0b0e; }
.bn-cell.ship.skin-gold_fleet { background: linear-gradient(135deg, #fff3b0, #f5c96a 50%, #b8860b); box-shadow: inset 0 0 0 2px #7a5200; }
.bn-cell.ship.sunk { background: #3a1420 !important; box-shadow: inset 0 0 0 2px var(--red) !important; }
.bn-cell.ship.hit { filter: brightness(.7) saturate(1.4); }

@media (prefers-reduced-motion: reduce) {
  .p4-cell .p4-disc.drop, .p4-cell.win .p4-disc, .ot-cell .ot-stone.flip, .ot-cell.legal::after, .bn-cell.pending::after { animation: none; }
}