body.battleship-open { overflow:hidden; }
body.battleship-open #Heading { visibility:hidden; }
#battleship-section, #battleship-section * { box-sizing:border-box; }
#battleship-section { display:none; position:fixed; inset:76px 32px 20px; z-index:5; flex-direction:column; max-width:1300px; margin:0 auto; padding:20px 28px; border-radius:28px; color:#163f50; background:linear-gradient(145deg,#f7fcfa,#e7f4f4 65%,#d4ecef); border:2px solid #ffffffc9; box-shadow:0 18px 60px #163f5026; overflow:hidden; }
#battleship-section [hidden] { display:none !important; }
.bs-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-shrink:0; }
.bs-brand { font-size:clamp(20px,2.4vw,30px); font-weight:700; letter-spacing:.3px; }
#battleship-section button { font-family:inherit; touch-action:manipulation; }
#battleship-section button:not(.battleship-cell) { width:auto; height:auto; min-height:42px; padding:10px 22px; margin:0; border:0; border-radius:14px; font-size:18px; font-weight:600; background:#ffcd58; color:#443614; box-shadow:0 4px 0 #d7a338; cursor:pointer; }
#battleship-section button:not(.battleship-cell):hover { filter:brightness(1.05); transform:translateY(-1px); }
#battleship-section button.bs-quiet { background:#dbe9e9; color:#426371; box-shadow:none; font-size:15px; }
#battleship-section button:disabled { cursor:default; }
#battleship-section button:not(.battleship-cell):disabled { opacity:.6; }
#battleship-welcome { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); align-items:center; gap:24px; }
.bs-pirate-art { width:100%; max-height:100%; object-fit:contain; border-radius:24px; mix-blend-mode:multiply; }
.bs-invite-card { padding:30px; border-radius:24px; background:#ffffffbd; text-align:center; box-shadow:0 10px 40px #246b7110; }
.bs-invite-card h2 { font-size:clamp(24px,3vw,36px); margin:0 0 22px; color:#174f60; }
#battleship-lobby { display:flex; flex-direction:column; align-items:center; gap:18px; }
#battleship-lobby select { width:min(250px,100%); padding:12px 14px; font:inherit; font-size:20px; border:2px solid #cde0e2; border-radius:12px; background:white; color:#163f50; }
.bs-choice-avatar img,.bs-invitation-avatar { width:100px; height:100px; object-fit:cover; border-radius:50%; border:5px solid white; box-shadow:0 4px 20px #20556920; }
.bs-invite-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
#battleship-match { min-height:0; flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; }
#battleship-players { display:flex; justify-content:center; gap:28px; margin:10px 0 0; }
.bs-player { display:grid; grid-template-columns:58px auto; grid-template-rows:25px 25px; column-gap:12px; align-items:center; padding:10px 16px; min-width:185px; border:2px solid transparent; border-radius:20px; background:#ffffff9c; transition:background .3s,border-color .3s,box-shadow .3s; }
.bs-portrait { grid-row:1/3; width:58px; height:58px; position:relative; overflow:hidden; border-radius:50%; background:#c6e9ef; }
.bs-portrait img { width:100%; height:100%; object-fit:cover; }
.bs-player > span { font-size:18px; }
.bs-turn { font-size:14px; color:#73919b; }
.bs-player.is-turn { background:#fff2b0; border-color:#eab63c; box-shadow:0 0 0 4px #ffe07745; }
.bs-player.is-turn .bs-turn { color:#806008; }
.bs-player.is-turn .bs-portrait { outline:3px solid #efbb43; outline-offset:2px; }
.bs-player.is-winner { background:#d1f1dc; border-color:#71c891; }
.bs-player.is-winner .bs-turn { color:#217645; }
.bs-player.is-loser .bs-turn { color:#748b94; }
#battleship-grids { display:grid; grid-template-columns:minmax(0,1fr) 205px; gap:36px; align-items:center; margin:auto; }
.bs-target { width:min(590px,calc(100dvh - 340px),calc(100vw - 360px)); }
.bs-own { width:205px; align-self:end; margin-bottom:12px; }
.bs-board-caption { text-align:center; font-size:17px; margin:0 0 10px; color:#436a79; }
#battleship-board,#battleship-own-board { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; padding:10px; background:#b5dbe0; border:1px solid #8bbcc6; border-radius:18px; box-shadow:0 9px 0 #8bbcc63b,0 16px 28px #2b6c7817; }
#battleship-section .battleship-cell { position:relative; display:grid; place-items:center; width:100%; height:auto; min-width:0; min-height:0; aspect-ratio:1; margin:0; padding:0; border:1px solid #cee7e8; border-radius:7px; background:#f7fcfc; color:#295466; box-shadow:0 2px 0 #8bbcc644; font-size:clamp(12px,1.7vw,21px); transition:background .25s,transform .12s; opacity:1; overflow:visible; }
#battleship-section .battleship-cell:not(:disabled):hover { background:#fff1b4; transform:translateY(-2px); border-color:#e8b954; }
#battleship-section .battleship-cell:focus-visible { outline:3px solid #f6ad27; z-index:2; }
#battleship-section .battleship-cell.ship { background:#68bac8; color:#103f52; border-color:#499cae; }
.bs-mark { display:none; font-family:Arial,sans-serif; }
#battleship-section .clicked .bs-number { visibility:hidden; }
#battleship-section .clicked .bs-mark { display:block; position:absolute; font-size:clamp(20px,3.4vw,42px); line-height:1; font-weight:bold; }
#battleship-section .battleship-cell.hit { background:#ffe8df; color:#e54f43; border-color:#f1b5a8; }
#battleship-section .battleship-cell.miss { background:#d9f0f6; color:#3896b4; border-color:#b7dce6; }
#battleship-section .battleship-cell.sunk { background:#d7e0e2; color:#92a2aa; border-color:#bfccd0; box-shadow:none; }
#battleship-own-board { gap:2px; padding:6px; border-radius:12px; }
#battleship-own-board .battleship-cell { border-radius:3px; font-size:10px; }
#battleship-own-board .clicked .bs-mark { font-size:20px; }
#battleship-status { min-height:18px; text-align:center; font-size:14px; color:#b4493a; margin-top:8px; flex-shrink:0; }
#battleship-effects { position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:28px; }
.bs-boom { animation:bs-hit .65s ease-out; z-index:3; }
.bs-boom::after { content:''; position:absolute; inset:-30%; border:4px solid #ffa24c; border-radius:50%; animation:bs-ring .7s ease-out forwards; pointer-events:none; }
.bs-splash { animation:bs-water .8s ease-out; z-index:3; }
.bs-splash::after { content:'•  •  •'; color:#319fc1; position:absolute; inset:-12px; animation:bs-drops .85s ease-out forwards; pointer-events:none; }
.bs-sinking .bs-portrait img { animation:bs-sink 2.3s ease-in forwards; }
.bs-sinking .bs-portrait::after { content:'≋'; position:absolute; bottom:-10px; left:0; width:100%; color:#fff; background:#4bafc6; font-size:34px; text-align:center; animation:bs-tide 2.3s ease-in forwards; }
.bs-confetti { position:absolute; top:-15px; left:var(--x); width:10px; height:18px; background:var(--color); border-radius:3px; animation:bs-confetti 2.8s var(--delay) ease-in forwards; }
@keyframes bs-hit { 0%,100% { transform:scale(1); } 30% { transform:scale(1.24) rotate(-8deg); } 55% { transform:scale(1.12) rotate(8deg); } }
@keyframes bs-ring { from { transform:scale(.4); opacity:1; } to { transform:scale(1.6); opacity:0; } }
@keyframes bs-water { 35% { transform:translateY(-5px); } 60% { transform:translateY(3px); } }
@keyframes bs-drops { from { transform:translateY(0) scale(.4); opacity:1; } to { transform:translateY(-25px) scale(1.4); opacity:0; } }
@keyframes bs-sink { 25% { transform:rotate(-12deg); } to { transform:translateY(115%) rotate(25deg); } }
@keyframes bs-tide { from { transform:translateY(45px); } to { transform:translateY(0); } }
@keyframes bs-confetti { to { top:110%; transform:rotate(600deg); } }
@media (max-width:1000px) {
  #battleship-section { inset:76px 18px 16px; padding:16px 20px; }
  #battleship-grids { grid-template-columns:minmax(0,1fr) 165px; gap:22px; }
  .bs-target { width:min(560px,calc(100dvh - 320px),calc(100vw - 260px)); }
  .bs-own { width:165px; } #battleship-own-board .battleship-cell { font-size:8px; } #battleship-own-board .clicked .bs-mark { font-size:15px; }
}
@media (max-height:650px) and (min-width:601px) {
  #battleship-section { inset:65px 20px 12px; padding:12px 18px; }
  .bs-player { padding:6px 12px; grid-template-columns:44px auto; grid-template-rows:20px 20px; }
  .bs-portrait { width:44px; height:44px; }
  .bs-target { width:min(550px,calc(100dvh - 290px),calc(100vw - 310px)); } .bs-board-caption { margin-bottom:6px; }
}
@media (max-width:600px) {
  #battleship-section { inset:70px 8px 10px; padding:12px; overflow:auto; border-radius:20px; }
  .bs-brand { font-size:19px; } #battleship-section button.bs-quiet { padding:8px; font-size:12px; }
  #battleship-welcome { display:flex; flex-direction:column; justify-content:center; gap:8px; }
  .bs-pirate-art { max-height:30dvh; } .bs-invite-card { padding:16px; width:100%; }
  .bs-invite-card h2 { margin-bottom:12px; } #battleship-lobby { gap:10px; }
  .bs-choice-avatar img,.bs-invitation-avatar { width:70px; height:70px; }
  #battleship-players { gap:8px; width:100%; } .bs-player { min-width:0; flex:1; grid-template-columns:38px auto; padding:7px; column-gap:7px; }
  .bs-portrait { width:38px; height:38px; } .bs-player > span { font-size:14px; } .bs-turn { font-size:12px; }
  #battleship-grids { display:flex; flex-direction:column; gap:18px; width:100%; }
  .bs-target { width:min(100%,calc(100dvh - 330px)); } .bs-own { width:145px; margin:0; align-self:flex-end; }
  #battleship-section .clicked .bs-mark { font-size:27px; }
}
@media (prefers-reduced-motion:reduce) { #battleship-section *,#battleship-section *::after { animation:none !important; transition:none !important; } }