:root{--bg: #d7edf0;--surface: #fffaf0;--surface-2: #edf3eb;--ink: #142832;--muted: #5e7277;--border: #aac1bd;--water: #5aa7b3;--water-dark: #367e91;--water-light: #74bdc1;--ship: #394a52;--ship-light: #677982;--brass: #d4a94a;--hit: #b83b41;--miss: #f4e6c2;--danger: #a63d46;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;min-height:0}button{font:inherit}h1,h2,p,ol{margin:0}button:focus-visible,a:focus-visible{outline:3px solid rgba(212,169,74,.78);outline-offset:2px}.appShell{height:100dvh;min-height:0;overflow:hidden;padding:clamp(10px,2vh,24px);display:grid;place-items:center;background:linear-gradient(135deg,#fffaf0d6,#fffaf000 38%),linear-gradient(180deg,#d7edf0,#b9dfe2)}.gameSurface{width:min(1540px,100%);height:100%;min-height:0;display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px)}.topBar{flex:0 0 auto;padding:clamp(8px,1.4vh,16px) clamp(12px,1.6vw,20px);border:1px solid var(--border);border-radius:8px;background:#fffaf0f0;box-shadow:0 16px 46px #1428321a;display:flex;align-items:center;justify-content:space-between;gap:16px}.brandLockup{min-width:0;display:flex;align-items:center;gap:14px}.brandMark{width:clamp(44px,7vh,72px);aspect-ratio:1;flex:0 0 auto;border-radius:8px;display:block;background:#d7edf0;box-shadow:inset 0 0 0 7px #fffaf052,0 8px 22px #14283221}.brandMark rect{fill:var(--water);stroke:#245d6e;stroke-width:4}.brandMark path{stroke:#134c5d6b;stroke-width:1.4}.brandMark .markShip{fill:var(--ship);stroke:#17262d;stroke-width:2}.brandMark .markWake{fill:none;stroke:#fffaf0b8;stroke-width:4;stroke-linecap:round}.brandMark .markPing{fill:var(--brass);stroke:var(--hit);stroke-width:3}.titleStack{min-width:0;display:grid;gap:4px}.eyebrow,.modalEyebrow{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase}h1{font-size:clamp(30px,4.8vh,58px);line-height:.95;letter-spacing:0;white-space:nowrap}h2{font-size:15px;letter-spacing:0}.titleHelpLink{width:fit-content;border:0;padding:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;font-weight:800;line-height:1;text-decoration:underline;text-underline-offset:3px}.titleHelpLink:hover,.titleHelpLink:focus-visible{color:var(--ink)}.topActions,.modeSwitch,.difficultySwitch{display:flex;align-items:center;gap:8px}.topActions{flex-wrap:wrap;justify-content:flex-end}.modeSwitch,.difficultySwitch{padding:4px;border:1px solid var(--border);border-radius:8px;background:#dce7e0}.modeSwitch button,.difficultySwitch button,.resetButton{min-width:48px;min-height:38px;border:0;border-radius:6px;cursor:pointer;font-weight:850;color:var(--ink)}.difficultySwitch button{min-width:68px}.modeSwitch button,.difficultySwitch button{background:transparent}.modeSwitch button.active,.difficultySwitch button.active{background:var(--surface);box-shadow:0 2px 10px #14283221}.resetButton{padding:0 14px;background:var(--ink);color:#fffaf0}.boardWrap{width:100%;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #7facb2;border-radius:8px;padding:clamp(8px,1.5vh,16px);background:linear-gradient(90deg,rgba(255,250,240,.18) 0 1px,transparent 1px 100%),linear-gradient(0deg,rgba(255,250,240,.14) 0 1px,transparent 1px 100%),#c1e1e3;background-size:28px 28px;box-shadow:inset 0 0 0 8px #fffaf02e,0 18px 60px #1428321f}.boardWrap.masked .battleBoards,.boardWrap.masked .setupLayout{filter:blur(7px)}.boardWrap.setupWrap{justify-content:flex-start}.boardWrap.winnerFlash{animation:victoryBoardGlow 2.4s ease-out both}.noticeBanner{width:100%;min-height:clamp(52px,8vh,70px);flex:0 0 auto;padding:clamp(8px,1.2vh,12px) 14px;border:2px solid rgba(212,169,74,.58);border-radius:8px;background:#fffaf0f7;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 16px 42px #14283224}.noticeBanner.hit{border-color:#b83b418f}.noticeBanner.ready{border-color:#45747d6b}.noticeBanner.setup{border-color:#245d6e70}.noticeBanner.winner{border-color:#d4a94ac7;animation:winnerBannerPulse 1.8s ease-in-out 3}.noticeBanner>div{min-width:0;display:flex;align-items:center;gap:12px}.noticeBanner strong{display:block;font-size:clamp(16px,2.4vh,20px);line-height:1.08}.noticeBanner p{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.3}.noticeBanner button{min-height:38px;flex:0 0 auto;border:0;border-radius:6px;padding:0 14px;background:var(--water-dark);color:#fffaf0;cursor:pointer;font-weight:850}.resultBadge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--miss);border:1px solid #d6c89e;color:var(--ink);font-weight:950}.resultBadge.hit,.resultBadge.win{background:var(--hit);border-color:#802830;color:#fffaf0}.resultBadge.ready{background:#edf3eb;border-color:var(--border);color:var(--water-dark)}.resultBadge.setup{background:var(--water-dark);border-color:#245d6e;color:#fffaf0}.battleBoards{width:100%;height:100%;min-height:0;position:relative;isolation:isolate;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(360px,1fr));gap:18px;align-items:stretch;transition:filter .18s ease}.setupLayout{width:min(1000px,100%);max-height:100%;display:grid;grid-template-columns:minmax(230px,280px) minmax(420px,1fr);grid-template-areas:"dock board";align-items:start;gap:12px;transition:filter .18s ease}.setupBoardPanel,.setupDock{border:1px solid rgba(69,116,125,.52);border-radius:8px;background:#fffaf0d6;box-shadow:0 12px 28px #1428321a}.setupBoardPanel{grid-area:board;min-width:0;min-height:0;padding:16px}.setupHeader,.setupDockHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.setupHeader{min-height:46px;margin-bottom:8px}.setupHeader h2{margin-top:3px;font-size:18px}.setupHeader strong{padding:4px 7px;border-radius:6px;background:#edf3eb;color:var(--muted);font-size:12px;white-space:nowrap}.setupGridShell{max-width:min(100%,clamp(320px,calc(100dvh - 315px),540px));margin:0 auto}.setupGrid{box-shadow:0 18px 36px #1428322b,0 0 0 4px #fffaf038}.setupCell{cursor:copy}.setupCell.occupiedSetup{background:linear-gradient(135deg,#fffaf024,#fffaf000),var(--water-dark);cursor:pointer}.setupCell.selectedSetupShip{box-shadow:inset 0 0 0 3px #d4a94ad1}.setupCell.placementPreview{background:linear-gradient(135deg,#fffaf038,#fffaf000),#82c5c7;box-shadow:inset 0 0 0 3px #fffaf0e6,inset 0 0 0 6px #d4a94a6b;z-index:1}.setupCell.placementBlocked{cursor:not-allowed;box-shadow:inset 0 0 0 3px #b83b41d1}.setupDock{grid-area:dock;padding:12px;display:grid;gap:10px;align-self:stretch}.setupDockHeader{align-items:stretch;flex-direction:column}.setupDockHeader strong,.setupDockHeader span{display:block}.setupDockHeader strong{font-size:17px;line-height:1.1}.setupDockHeader span{margin-top:3px;color:var(--muted);font-size:12px;font-weight:780}.setupActionBar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.setupActionBar button,.setupDoneButton,.setupShipButton{border:0;border-radius:6px;cursor:pointer;font-weight:850}.setupActionBar button{min-width:0;min-height:36px;padding:0 10px;background:#edf3eb;color:var(--ink);font-size:13px;line-height:1;white-space:nowrap;box-shadow:inset 0 0 0 1px #aac1bd80}.setupActionBar button:disabled{cursor:not-allowed;background:#aac1bd5c;color:#1428326b;box-shadow:inset 0 0 0 1px #aac1bd61}.setupShipTray{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}.setupShipButton{min-width:0;min-height:50px;padding:8px;display:grid;align-content:center;gap:3px;background:#edf3eb;color:var(--ink);text-align:left;border:1px solid rgba(170,193,189,.72)}.setupShipButton span,.setupShipButton small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setupShipButton small{color:var(--muted);font-size:11px;font-weight:780}.setupShipButton.selected{background:var(--ink);color:#fffaf0;border-color:var(--ink)}.setupShipButton.selected small{color:#fffaf0bd}.setupShipButton.placed:not(.selected){background:#74bdc147;border-color:#245d6e52}.setupDoneButton{min-height:40px;background:var(--danger);color:#fffaf0}.setupDoneButton:disabled{cursor:not-allowed;background:#aac1bd;color:#14283294}.victoryOverlay{--victory-primary: #d4a94a;--victory-secondary: #b83b41;--victory-accent: #fffaf0;position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;z-index:12;pointer-events:none;overflow:hidden;border-radius:8px}.victoryOverlay.aiWin{--victory-primary: #74bdc1;--victory-secondary: #245d6e;--victory-accent: #f4e6c2}.victoryWash{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 0 28%,rgba(255,250,240,.48) 44%,transparent 61% 100%),linear-gradient(180deg,#fffaf00f,#14283214);transform:translate(-120%);animation:victoryWashSweep 1.25s ease-out both}.victoryRibbons,.victoryBursts{position:absolute;top:0;right:0;bottom:0;left:0}.victoryRibbon{position:absolute;top:-12%;left:var(--victory-x);width:9px;height:36px;border-radius:2px;background:var(--victory-primary);opacity:0;transform:translateY(-18px) rotate(0);animation:victoryRibbonFall 2.7s ease-in var(--victory-delay) both}.ribbon-2,.ribbon-5{background:var(--victory-secondary)}.ribbon-3{width:7px;height:28px;background:var(--victory-accent)}.ribbon-4,.ribbon-6{height:24px;background:#245d6e}.aiWin .ribbon-4,.aiWin .ribbon-6{background:#d4a94a}.victoryBurst{position:absolute;left:50%;top:50%;width:7px;height:44px;border-radius:999px;background:linear-gradient(180deg,transparent,var(--victory-primary) 35% 68%,transparent);opacity:0;transform-origin:50% 100%;animation:victoryBurstPop 1.45s ease-out var(--victory-delay) both}.victoryBurst:before,.victoryBurst:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:44px;border-radius:inherit;background:inherit;transform-origin:50% 100%}.victoryBurst:before{transform:translate(-50%,-50%) rotate(62deg)}.victoryBurst:after{transform:translate(-50%,-50%) rotate(-62deg)}.burst-1{left:16%;top:18%}.burst-2{left:83%;top:20%;background:linear-gradient(180deg,transparent,var(--victory-secondary) 35% 68%,transparent)}.burst-3{left:54%;top:14%}.burst-4{left:23%;top:78%;background:linear-gradient(180deg,transparent,var(--victory-secondary) 35% 68%,transparent)}.burst-5{left:76%;top:75%}.burst-6{left:50%;top:53%;background:linear-gradient(180deg,transparent,var(--victory-accent) 35% 68%,transparent)}.victorySignal{position:absolute;left:50%;top:50%;width:min(48vw,560px);aspect-ratio:1;transform:translate(-50%,-50%)}.victorySignal span{position:absolute;top:28%;right:28%;bottom:28%;left:28%;border:2px solid var(--victory-primary);border-radius:50%;opacity:0;animation:victorySignalRing 2.2s ease-out both}.victorySignal span:nth-child(2){border-color:var(--victory-secondary);animation-delay:.18s}.victorySignal span:nth-child(3){border-color:#fffaf0c7;animation-delay:.36s}.victoryMedal{position:absolute;left:50%;top:50%;min-width:min(400px,calc(100% - 48px));padding:18px 24px;border:1px solid rgba(255,250,240,.72);border-radius:8px;background:#142832d1;color:#fffaf0;text-align:center;box-shadow:0 22px 70px #14283257;transform:translate(-50%,-50%) scale(.78);opacity:0;animation:victoryMedalArrive .78s cubic-bezier(.16,.84,.24,1.18) .22s both}.victoryMedal strong,.victoryMedal span{display:block}.victoryMedal strong{margin-top:8px;font-size:clamp(32px,6vw,68px);line-height:.9;letter-spacing:0;text-transform:uppercase}.victoryMedal>span:last-child{margin-top:8px;color:#fffaf0c7;font-weight:850}.victoryScope{width:42px;aspect-ratio:1;margin:0 auto;border:3px solid var(--victory-primary);border-radius:50%;background:linear-gradient(90deg,transparent 0 calc(50% - 1px),var(--victory-primary) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px) 100%),linear-gradient(0deg,transparent 0 calc(50% - 1px),var(--victory-primary) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px) 100%);box-shadow:0 0 0 8px #fffaf014;animation:victoryScopeSpin 2.4s ease-in-out .52s both}.boardPanel{min-width:0;min-height:0;padding:16px;display:flex;flex-direction:column;border:1px solid rgba(69,116,125,.52);border-radius:8px;background:#fffaf0d6;box-shadow:0 12px 28px #1428321a}.boardPanelHeader{min-height:46px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.boardPanelHeader p{margin-top:3px;color:var(--muted);font-size:12px;font-weight:760}.boardPanelHeader strong{padding:4px 7px;border-radius:6px;background:#edf3eb;color:var(--muted);font-size:12px;white-space:nowrap}.gridShell{width:100%;min-height:0;display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:22px minmax(0,1fr);gap:4px}.boardPanel .gridShell{max-width:min(100%,clamp(220px,calc(100dvh - 345px),560px));margin:0 auto}.cornerLabel{grid-column:1;grid-row:1}.colLabels{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:end}.rowLabels{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(10,minmax(0,1fr));align-items:center}.colLabels span,.rowLabels span{color:var(--muted);font-size:11px;font-weight:850;text-align:center}.battleGrid{grid-column:2;grid-row:2;width:100%;aspect-ratio:1;position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));border:6px solid #245d6e;border-radius:8px;background:#245d6e;box-shadow:0 18px 36px #1428322b;overflow:hidden}.battleGrid:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,#fffaf000 0,#fffaf000 18%,#fffaf029 22%,#fffaf000 29%,#fffaf000),radial-gradient(circle at 20% 28%,rgba(255,250,240,.12) 0 10%,transparent 22%),radial-gradient(circle at 72% 66%,rgba(255,250,240,.11) 0 9%,transparent 23%),#3d8b9933;background-size:260px 260px,210px 210px,240px 240px,auto;mix-blend-mode:screen;opacity:.74;animation:boardWaterLayer 7s linear infinite}.cell{min-width:0;min-height:0;aspect-ratio:1;position:relative;border:1px solid rgba(29,88,103,.58);display:grid;place-items:center;background:var(--water);cursor:default}.cell.lightWater{background:linear-gradient(135deg,#fffaf01f,#fffaf000),var(--water-light)}.cell.deepWater{background:linear-gradient(135deg,#fffaf014,#fffaf000),var(--water)}.cell.sunkCell{background:linear-gradient(135deg,#fffaf01a,#fffaf000),linear-gradient(180deg,#b83b4133,#b83b410f),var(--water)}.cell.canFire{cursor:crosshair}.cell.canFire:hover,.cell.canFire:focus-visible{box-shadow:inset 0 0 0 3px #d4a94abd;z-index:2}.cell.canFire:hover:after,.cell.canFire:focus-visible:after{content:"";width:34%;aspect-ratio:1;border:2px solid rgba(255,250,240,.92);border-radius:50%}.cell.lastShot{animation:shotPulse .66s ease-out;z-index:1}.bottomDock{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px 14px;padding:8px 8px 0;border-top:1px solid rgba(170,193,189,.76)}.footerNav{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}.footerNav a{color:var(--muted);font-size:12px;line-height:1.4;font-weight:850;text-decoration:none}.footerNav a:hover,.footerNav a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.footerNav a+a:before{content:"|";margin:0 8px;color:var(--border)}.labsBackLink{grid-column:3;justify-self:end;color:var(--muted);font-size:12px;line-height:1.4;font-weight:850;text-decoration:none;white-space:nowrap}.labsBackLink:hover,.labsBackLink:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.shipSpriteWrap{--ship-fit-scale: 1;position:absolute;padding:2px;display:grid;place-items:center;pointer-events:none;z-index:2}.shipSpriteWrap.ship-carrier{--ship-fit-scale: 1.08}.shipSpriteWrap.ship-battleship{--ship-fit-scale: 1.07}.shipSpriteWrap.ship-cruiser{--ship-fit-scale: 1.06}.shipSprite{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;-webkit-user-select:none;user-select:none;transform:scaleX(var(--ship-fit-scale));transform-origin:center;filter:drop-shadow(0 2px 3px rgba(14,35,43,.22))}.shipSpriteWrap.vertical .shipSprite{width:calc(var(--ship-size) * 100%);height:calc(100% / var(--ship-size));transform:rotate(90deg) scaleX(var(--ship-fit-scale))}.shipSpriteWrap.sunk .shipSprite{opacity:.55;filter:drop-shadow(0 2px 3px rgba(84,18,24,.16)) saturate(.46) brightness(.68) blur(.35px);transform:translateY(9%) scaleX(var(--ship-fit-scale)) scaleY(.9)}.shipSpriteWrap.revealed{z-index:3}.shipSpriteWrap.revealed .shipSprite{filter:drop-shadow(0 0 0 rgba(255,250,240,.86)) drop-shadow(0 2px 4px rgba(84,18,24,.24)) saturate(.82) brightness(.94)}.shipSpriteWrap.revealed.sunk .shipSprite{opacity:.55;filter:drop-shadow(0 2px 3px rgba(84,18,24,.16)) saturate(.46) brightness(.68) blur(.35px)}.shipSpriteWrap.sinking .shipSprite{animation:shipGoesUnder 1.75s cubic-bezier(.18,.72,.2,1) both}.shipSpriteWrap.vertical.sunk .shipSprite{transform:translateY(9%) rotate(90deg) scaleX(var(--ship-fit-scale)) scaleY(.9)}.shipSpriteWrap.vertical.sinking .shipSprite{animation-name:shipGoesUnderVertical}.shipSinkWake,.shipSinkBubbles{position:absolute;top:4%;right:4%;bottom:4%;left:4%;z-index:6;pointer-events:none;opacity:0}.shipSinkWake{border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,250,240,.42) 0 12%,rgba(255,250,240,.16) 28%,transparent 62%),linear-gradient(90deg,transparent 0 12%,rgba(255,250,240,.45) 16%,transparent 24% 100%),linear-gradient(90deg,transparent 0 58%,rgba(255,250,240,.36) 65%,transparent 74% 100%);filter:blur(.6px)}.shipSinkBubbles{background:radial-gradient(circle at 18% 54%,rgba(255,250,240,.82) 0 2px,transparent 3px),radial-gradient(circle at 32% 38%,rgba(255,250,240,.66) 0 1.5px,transparent 2.5px),radial-gradient(circle at 58% 68%,rgba(255,250,240,.74) 0 2px,transparent 3px),radial-gradient(circle at 76% 42%,rgba(255,250,240,.58) 0 1.5px,transparent 2.5px)}.shipSpriteWrap.sinking .shipSinkWake{animation:sinkWake 1.75s ease-out both}.shipSpriteWrap.sinking .shipSinkBubbles{animation:sinkBubbles 1.75s ease-out both}.explosionSprite{pointer-events:none;filter:drop-shadow(0 4px 7px rgba(72,13,18,.32))}.boardExplosionMarker{position:absolute;z-index:7}.blastSmoke,.blastFlame,.blastCore,.blastSpark{position:absolute;pointer-events:none}.blastSmoke{left:50%;top:27%;width:76%;height:52%;border-radius:50%;background:radial-gradient(circle at 40% 42%,#39313061 0,#39313061 25%,#39313000 62%),radial-gradient(circle at 67% 36%,#5c4d4652 0,#5c4d4652 22%,#5c4d4600 60%);transform:translate(-50%,-50%);animation:smokePuff 1.55s ease-in-out infinite}.blast-1 .blastSmoke{width:68%;background:radial-gradient(circle at 36% 44%,#302c2b66 0,#302c2b66 23%,#302c2b00 62%),radial-gradient(circle at 66% 32%,#6e5b5047 0,#6e5b5047 19%,#6e5b5000 58%)}.blastFlame{left:50%;top:52%;width:58%;height:66%;border-radius:58% 46% 55% 48%;background:radial-gradient(circle at 52% 62%,#fff3a4 0,#fff3a4 15%,#ffba3b 16%,#ffba3b,#ffba3b00 48%),radial-gradient(circle at 45% 50%,#ff7a2d 0,#ff7a2d 32%,#c72f35 58%,#c72f3500 74%);clip-path:polygon(50% 0,68% 24%,90% 34%,72% 58%,80% 100%,50% 78%,22% 100%,28% 58%,10% 34%,32% 24%);transform:translate(-50%,-50%) rotate(-4deg);animation:flameFlicker .62s ease-in-out infinite alternate}.blast-2 .blastFlame{top:48%;width:70%;height:54%;clip-path:polygon(52% 0,63% 28%,88% 20%,70% 50%,92% 88%,55% 72%,28% 100%,34% 62%,8% 46%,34% 34%);animation-duration:.54s}.blast-2 .blastSmoke{width:88%;height:44%;opacity:.5}.blast-2 .blastCore{top:50%;width:42%}.blast-2 .blastSpark{box-shadow:-18px -2px 0 -1px #fff2a4,16px -15px 0 -2px #ffcf4a,-13px 15px 0 -2px #ff7a2d,19px 6px 0 -2px #ffba3b}.blast-3 .blastFlame{top:55%;width:48%;height:78%;clip-path:polygon(50% 0,62% 32%,78% 38%,62% 58%,74% 100%,48% 82%,30% 100%,34% 62%,16% 40%,38% 30%);animation-duration:.7s}.blast-3 .blastCore{width:42%}.blast-3 .blastSmoke{top:22%;width:60%;height:66%}.blast-3 .blastSpark{background:#fff8bc;box-shadow:-8px -18px 0 -2px #ffcf4a,10px -14px 0 -2px #fff2a4,-18px 7px 0 -2px #ff7a2d,10px 17px 0 -2px #e94e34,19px 2px 0 -3px #ffba3b}.blast-4 .blastFlame{top:50%;width:76%;height:60%;clip-path:polygon(47% 0,60% 20%,82% 12%,70% 40%,98% 52%,72% 68%,78% 100%,50% 82%,20% 100%,28% 68%,2% 52%,30% 40%,18% 12%,40% 20%);animation-duration:.58s}.blast-4 .blastCore{background:radial-gradient(circle,#fff9c9 0,#fff9c9 16%,#ffdf68 17%,#ffdf68 38%,#ff8c2d 39%,#ff8c2d 62%,#ff8c2d00 72%)}.blast-4 .blastSmoke{top:30%;width:94%;height:48%;background:radial-gradient(circle at 28% 48%,#3f353359 0,#3f353359 21%,#3f353300 58%),radial-gradient(circle at 53% 29%,#775f514d 0,#775f514d 18%,#775f5100 56%),radial-gradient(circle at 78% 47%,#4e423d47 0,#4e423d47 17%,#4e423d00 54%)}.blast-4 .blastSpark{width:9%;height:9%;box-shadow:-20px -9px 0 -2px #ffcf4a,18px -18px 0 -3px #fff2a4,-17px 16px 0 -2px #ff7a2d,20px 11px 0 -3px #ffba3b,0 22px 0 -3px #e94e34}.blastCore{left:50%;top:55%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff9c9 0,#fff9c9 20%,#ffcf4a 21%,#ffcf4a 46%,#f06c2f 47%,#f06c2f 70%,#f06c2f00 72%);transform:translate(-50%,-50%);animation:emberPulse .48s ease-in-out infinite alternate}.blastSpark{left:50%;top:50%;width:7%;height:7%;border-radius:50%;background:#ffe89a;box-shadow:-14px -7px 0 -1px #ffcf4a,12px -10px 0 -1px #fff2a4,-10px 12px 0 -2px #ff7a2d,15px 10px 0 -2px #ffba3b;transform:translate(-50%,-50%);animation:sparkScatter .78s ease-in-out infinite alternate}.boardExplosionMarker.active{z-index:5;animation:explosionBurst .62s cubic-bezier(.16,.78,.2,1.12) both}.splashMarker{position:absolute;z-index:5;display:grid;place-items:center;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(20,40,50,.2))}.splashMarker.active{z-index:8}.splashRing,.splashColumn,.splashCrown,.splashDroplets{position:absolute;left:50%;top:50%;pointer-events:none;transform:translate(-50%,-50%)}.splashRing{width:34%;aspect-ratio:1;border:2px solid rgba(255,250,240,.9);border-radius:50%;background:radial-gradient(circle,#fffaf03d 0,#fffaf03d 18%,#fffaf000 58%);box-shadow:0 0 0 3px #245d6e24;opacity:.84}.splashColumn{top:40%;width:18%;height:48%;border-radius:50% 50% 44% 44%;background:linear-gradient(180deg,#fffaf0f5,#d1eef0b3 48%,#d1eef000),radial-gradient(ellipse at center,#fffaf0bd,#fffaf000);opacity:0}.splashCrown{top:54%;width:68%;height:42%;border-radius:50%;background:radial-gradient(circle at 20% 52%,rgba(255,250,240,.82) 0 6%,transparent 12%),radial-gradient(circle at 38% 30%,rgba(255,250,240,.92) 0 6%,transparent 13%),radial-gradient(circle at 58% 28%,rgba(255,250,240,.86) 0 5%,transparent 12%),radial-gradient(circle at 78% 52%,rgba(255,250,240,.78) 0 6%,transparent 13%),radial-gradient(ellipse at center,rgba(209,238,240,.52) 0 28%,transparent 64%);opacity:0}.splashDroplets{width:8%;height:8%;border-radius:50%;background:#fffaf0f2;box-shadow:-16px -10px 0 -1px #fffaf0db,13px -16px 0 -2px #fffaf0e6,-5px -21px 0 -2px #d1eef0f0,18px 1px 0 -2px #fffaf0bd,-19px 2px 0 -2px #d1eef0c7;opacity:0}.splashMarker.active .splashRing{animation:splashRingBurst .86s ease-out both}.splashMarker.active .splashColumn{animation:splashColumnBurst .62s cubic-bezier(.15,.76,.24,1) both}.splashMarker.active .splashCrown{animation:splashCrownBurst .76s ease-out both}.splashMarker.active .splashDroplets{animation:splashDropletsBurst .72s ease-out both}.projectileArcPath{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(20,40,50,.22))}.projectileMotion{filter:drop-shadow(0 3px 5px rgba(20,40,50,.34));transform-box:view-box;transform-origin:0 0;animation:projectileFlight var(--projectile-duration) linear both;will-change:transform}.projectileSvgTrail{transform-origin:center}.projectileTailCore{fill:#ffb53fb8;filter:blur(.7px);animation:projectileTailPulse .19s ease-in-out infinite alternate}.projectileTailSmoke{fill:#fffaf057;filter:blur(2px);animation:projectileSmokeDissipate .52s ease-out infinite}.projectile-shell .projectileTailCore{fill:#c6ab786b}.projectile-shell .projectileTailSmoke{fill:#5c534847}.projectileSvgParticle{--particle-x: -22px;--particle-y: 0px;--particle-delay: 0ms;fill:#ffd261db;filter:blur(.2px);transform-box:fill-box;transform-origin:center;animation:projectileParticleDissipate .52s ease-out var(--particle-delay) infinite}.particle-1{--particle-x: -19px;--particle-y: -4px;--particle-delay: 0ms}.particle-2{--particle-x: -28px;--particle-y: 5px;--particle-delay: 90ms}.particle-3{--particle-x: -36px;--particle-y: -1px;--particle-delay: .17s}.particle-4{--particle-x: -47px;--particle-y: 7px;--particle-delay: .25s}.particle-5{--particle-x: -56px;--particle-y: -6px;--particle-delay: .33s}.projectile-shell .projectileSvgParticle{fill:#7d6f5d94;filter:blur(.55px)}.projectileRocketBody{fill:#d8dee0;stroke:#263845;stroke-width:1.2;stroke-linejoin:round}.projectileRocketFin{fill:#c74b35;stroke:#802830;stroke-width:1;stroke-linejoin:round}.projectileRocketPort{fill:#74bdc1;stroke:#245d6e;stroke-width:.9}.projectileRocketFlame{fill:#ffb53feb;animation:projectileFlameFlicker .17s ease-in-out infinite alternate}.projectileShellOuter{fill:#4f5353;stroke:#252b2f;stroke-width:1.2;stroke-linejoin:round}.projectileShellBand{fill:none;stroke:#252b2f;stroke-width:1.4;stroke-linecap:round;opacity:.66}.projectileShellHighlight{fill:#f8f0d8d1}@keyframes projectileFlight{0%{opacity:0;transform:translate(var(--start-x),var(--start-y)) rotate(var(--projectile-start-angle)) scale(.9)}8%{opacity:1}50%{transform:translate(var(--mid-x),var(--mid-y)) rotate(var(--projectile-mid-angle)) scale(1.03)}to{opacity:1;transform:translate(var(--end-x),var(--end-y)) rotate(var(--projectile-end-angle)) scale(1)}}@keyframes projectileTailPulse{0%{opacity:.62;transform:scaleX(.82)}to{opacity:.95;transform:scaleX(1.08)}}@keyframes projectileSmokeDissipate{0%{opacity:.42;transform:translate(0) scale(.84)}to{opacity:.08;transform:translate(-9px) scale(1.18)}}@keyframes projectileParticleDissipate{0%{opacity:.92;transform:translate(-6px) scale(.78)}to{opacity:0;transform:translate(var(--particle-x),var(--particle-y)) scale(1.42)}}@keyframes projectileFlameFlicker{0%{opacity:.64;transform:scaleX(.74)}to{opacity:1;transform:scaleX(1.12)}}@keyframes boardWaterLayer{0%{background-position:0 0,0 0,0 0,0 0}to{background-position:260px 130px,-210px 110px,180px -240px,0 0}}@keyframes shipGoesUnder{0%{opacity:.9;transform:translateY(0) scaleX(var(--ship-fit-scale)) scaleY(1);filter:drop-shadow(0 2px 3px rgba(14,35,43,.22)) saturate(.88) brightness(.95)}42%{opacity:.72;transform:translateY(10%) scaleX(var(--ship-fit-scale)) scaleY(.94);filter:drop-shadow(0 4px 4px rgba(20,40,50,.16)) saturate(.62) brightness(.82)}to{opacity:.3;transform:translateY(30%) scaleX(var(--ship-fit-scale)) scaleY(.62);filter:drop-shadow(0 1px 2px rgba(20,40,50,.08)) saturate(.34) brightness(.54) blur(.65px)}}@keyframes shipGoesUnderVertical{0%{opacity:.9;transform:rotate(90deg) scaleX(var(--ship-fit-scale)) scaleY(1);filter:drop-shadow(0 2px 3px rgba(14,35,43,.22)) saturate(.88) brightness(.95)}42%{opacity:.72;transform:translateY(10%) rotate(90deg) scaleX(var(--ship-fit-scale)) scaleY(.94);filter:drop-shadow(0 4px 4px rgba(20,40,50,.16)) saturate(.62) brightness(.82)}to{opacity:.3;transform:translateY(30%) rotate(90deg) scaleX(var(--ship-fit-scale)) scaleY(.62);filter:drop-shadow(0 1px 2px rgba(20,40,50,.08)) saturate(.34) brightness(.54) blur(.65px)}}@keyframes sinkWake{0%{opacity:0;transform:scale(.62)}32%{opacity:.85}to{opacity:0;transform:scale(1.35)}}@keyframes sinkBubbles{0%{opacity:0;transform:translateY(8px) scale(.76)}24%{opacity:.9}to{opacity:0;transform:translateY(-16px) scale(1.16)}}@keyframes explosionBurst{0%{opacity:0;transform:scale(.42)}55%{opacity:1;transform:scale(1.28)}to{transform:scale(1)}}@keyframes splashRingBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.24)}36%{opacity:.98;transform:translate(-50%,-50%) scale(1.62)}to{opacity:.82;transform:translate(-50%,-50%) scale(.92)}}@keyframes splashColumnBurst{0%{opacity:0;transform:translate(-50%,8%) scale(.46,.24)}34%{opacity:.96;transform:translate(-50%,-64%) scaleY(1.36)}to{opacity:0;transform:translate(-50%,-94%) scale(.72,.3)}}@keyframes splashCrownBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.34)}42%{opacity:.9;transform:translate(-50%,-50%) scale(1.18)}to{opacity:0;transform:translate(-50%,-50%) scale(1.48)}}@keyframes splashDropletsBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}28%{opacity:1}to{opacity:0;transform:translate(-50%,-118%) scale(1.18)}}@keyframes flameFlicker{0%{transform:translate(-50%,-50%) rotate(-6deg) scale(.92,1.02)}to{transform:translate(-50%,-53%) rotate(5deg) scale(1.05,.94)}}@keyframes emberPulse{0%{opacity:.78;transform:translate(-50%,-50%) scale(.84)}to{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}@keyframes smokePuff{0%,to{opacity:.28;transform:translate(-50%,-48%) scale(.82)}50%{opacity:.5;transform:translate(-50%,-62%) scale(1.12)}}@keyframes sparkScatter{0%{opacity:.6;transform:translate(-50%,-50%) rotate(0) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) rotate(16deg) scale(1.08)}}@keyframes shotPulse{0%{box-shadow:inset 0 0 #fffaf0f0,0 0 #b83b4185}to{box-shadow:inset 0 0 0 8px #fffaf000,0 0 0 12px #b83b4100}}@keyframes victoryBoardGlow{0%{box-shadow:inset 0 0 0 8px #fffaf02e,0 18px 60px #1428321f}38%{box-shadow:inset 0 0 0 8px #fffaf057,0 18px 60px #1428321f,0 0 0 6px #d4a94a52}to{box-shadow:inset 0 0 0 8px #fffaf02e,0 18px 60px #1428321f}}@keyframes winnerBannerPulse{0%,to{transform:translateY(0);box-shadow:0 16px 42px #14283224}50%{transform:translateY(-2px);box-shadow:0 18px 48px #1428322e,0 0 0 4px #d4a94a29}}@keyframes victoryWashSweep{0%{opacity:0;transform:translate(-120%)}24%{opacity:1}to{opacity:0;transform:translate(120%)}}@keyframes victoryRibbonFall{0%{opacity:0;transform:translate3d(0,-18px,0) rotate(0)}14%{opacity:.95}to{opacity:0;transform:translate3d(var(--victory-drift),118vh,0) rotate(420deg)}}@keyframes victoryBurstPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(0)}34%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.75) rotate(34deg)}}@keyframes victorySignalRing{0%{opacity:0;transform:scale(.25)}18%{opacity:.82}to{opacity:0;transform:scale(1.9)}}@keyframes victoryMedalArrive{0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}58%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes victoryScopeSpin{0%{transform:rotate(-16deg) scale(.9)}45%{transform:rotate(18deg) scale(1.08)}to{transform:rotate(0) scale(1)}}@media(prefers-reduced-motion:reduce){.battleGrid:after,.cell.lastShot,.shipSpriteWrap.sinking .shipSprite,.shipSpriteWrap.sinking .shipSinkWake,.shipSpriteWrap.sinking .shipSinkBubbles,.boardExplosionMarker.active,.splashMarker.active .splashRing,.splashMarker.active .splashColumn,.splashMarker.active .splashCrown,.splashMarker.active .splashDroplets,.projectileArcPath,.projectileMotion,.projectileTailCore,.projectileTailSmoke,.projectileSvgParticle,.projectileRocketFlame,.blastSmoke,.blastFlame,.blastCore,.blastSpark,.boardWrap.winnerFlash,.noticeBanner.winner,.victoryWash,.victoryRibbon,.victoryBurst,.victorySignal span,.victoryMedal,.victoryScope{animation:none}.victoryMedal{opacity:1;transform:translate(-50%,-50%) scale(1)}}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;padding:18px;display:grid;place-items:center;overflow-y:auto;background:#1428325c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modalDialog{width:min(430px,100%);max-height:calc(100vh - 36px);overflow-y:auto;padding:20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 24px 80px #14283247}.howToDialog{width:min(570px,100%)}.modalDialog h2{font-size:24px;line-height:1.1}.modalDialog p:not(.modalEyebrow){margin-top:10px;color:var(--muted);line-height:1.45}.howToList{margin-top:16px;padding:0;display:grid;gap:10px;list-style:none;counter-reset:how-to}.howToList li{counter-increment:how-to;display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px;border:1px solid var(--border);border-radius:8px;background:#edf3ebb8}.howToList li:before{content:counter(how-to);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fffaf0;font-size:13px;font-weight:900}.howToList strong,.howToList span{grid-column:2}.howToList strong{margin-top:1px}.howToList span{color:var(--muted);line-height:1.35;font-size:13px}.quickTip{margin-top:12px;padding:10px 12px;border-left:4px solid var(--water-dark);border-radius:8px;background:#edf3eb;color:var(--muted);line-height:1.4;font-size:13px}.modalActions{margin-top:18px;display:flex;justify-content:flex-end;gap:10px}.secondaryButton,.dangerButton{min-height:40px;border:0;border-radius:6px;padding:0 14px;cursor:pointer;font-weight:850}.secondaryButton{background:var(--surface-2);color:var(--ink)}.dangerButton{background:var(--danger);color:#fffaf0}@media(max-width:880px){.battleBoards{grid-template-columns:minmax(0,1fr)}.setupLayout{width:min(720px,100%);grid-template-columns:minmax(0,1fr);grid-template-areas:"board" "dock"}.setupGridShell{max-width:min(100%,clamp(300px,calc(100dvh - 330px),620px))}.setupDockHeader{align-items:center;flex-direction:row}.setupActionBar{justify-content:flex-end}.setupActionBar button{flex:0 1 auto}.setupShipTray{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.appShell{height:100dvh;min-height:0;overflow-x:hidden;overflow-y:hidden;padding:8px;align-items:stretch;place-items:stretch}.gameSurface{height:100%;min-height:0;gap:6px}.topBar{align-items:stretch;flex-direction:column;gap:6px;padding:8px}.brandLockup{gap:8px}.brandMark{display:none}.eyebrow,.modalEyebrow{font-size:10px}h1{font-size:clamp(28px,9vw,36px)}.titleStack{gap:2px}.titleHelpLink{font-size:12px}.topActions{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;justify-content:normal;gap:5px}.modeSwitch,.difficultySwitch{min-width:0;gap:4px;padding:3px}.difficultySwitch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.modeSwitch button,.difficultySwitch button{min-width:0}.modeSwitch button,.difficultySwitch button,.resetButton{min-height:30px;padding:0 6px;font-size:11px}.difficultySwitch button{min-width:0}.boardWrap{flex:1 1 auto;height:auto;min-height:0;overflow:hidden;align-items:stretch;justify-content:center;padding:8px;gap:8px}.battleBoards{height:100%;max-height:100%;min-height:0;overflow:hidden;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}.battleBoards .boardPanel.target{order:-1}.boardPanel{padding:8px}.boardPanelHeader{min-height:0;align-items:center;gap:8px;margin-bottom:5px}.boardPanelHeader h2{font-size:14px}.boardPanelHeader p,.boardPanelHeader strong{font-size:10px}.boardPanel .gridShell,.setupGridShell{max-width:min(100%,calc(100vw - 52px))}.boardPanel .gridShell{width:min(100%,calc((100dvh - 312px)/2),310px,calc(100vw - 52px));flex:0 0 auto;max-width:min(100%,310px,calc(100vw - 52px))}.gridShell{grid-template-columns:20px minmax(0,1fr);grid-template-rows:20px minmax(0,1fr);gap:3px}.battleGrid{border-width:4px}.noticeBanner{align-items:center;flex-direction:row;min-height:0;padding:7px 9px;gap:8px}.noticeBanner>div{align-items:center;gap:8px}.resultBadge{width:30px;height:30px;font-size:12px}.noticeBanner strong{font-size:14px}.noticeBanner p{margin-top:2px;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:11px;line-height:1.18}.noticeBanner button{min-height:32px;padding:0 10px;font-size:12px}.setupLayout{width:100%;height:100%;max-height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:8px}.setupBoardPanel,.setupDock{padding:8px}.setupBoardPanel{display:flex;flex-direction:column;min-height:0}.setupHeader{min-height:0;align-items:center;gap:8px;margin-bottom:5px}.setupHeader .eyebrow{display:none}.setupHeader h2{margin-top:0;font-size:14px}.setupHeader strong{font-size:10px}.setupGridShell{width:min(100%,clamp(190px,calc(100dvh - 405px),310px),calc(100vw - 52px));margin:0 auto}.setupDock{align-self:auto;gap:6px}.setupDockHeader{align-items:stretch;display:grid;grid-template-columns:minmax(72px,.68fr) minmax(0,1.5fr);gap:6px}.setupActionBar{gap:5px}.setupActionBar button{min-height:28px;padding:0 4px;font-size:11px}.setupDockHeader strong{font-size:14px}.setupDockHeader span{margin-top:2px;font-size:10px}.setupShipTray{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.setupShipButton{min-height:30px;padding:4px;gap:1px}.setupShipButton span{font-size:10px}.setupShipButton small{display:none}.setupDoneButton{min-height:32px;font-size:12px}.bottomDock{display:none}.victoryOverlay{top:-8px;right:-8px;bottom:-8px;left:-8px}.victoryMedal{min-width:calc(100% - 28px);padding:14px 16px}.victoryScope{width:34px}}@media(max-width:720px)and (max-height:610px){.topBar{gap:5px;padding:7px}.titleStack .eyebrow,.titleHelpLink{display:none}h1{font-size:clamp(26px,8vw,32px)}.noticeBanner p{display:none}.boardPanel{padding:6px}.boardPanelHeader{margin-bottom:3px}.boardPanelHeader h2{font-size:13px}.boardPanelHeader p{display:none}.boardPanelHeader strong{padding:3px 5px;font-size:9px}.boardPanel .gridShell{width:min(100%,150px,calc(100vw - 52px))}.setupGridShell{width:min(100%,185px,calc(100vw - 52px))}.setupShipButton{min-height:26px}.setupDoneButton{min-height:30px}}