.battleship-screen,.battleship-water-preview{isolation:isolate;background:linear-gradient(165deg,#12677c,#064258 48%,#032333);animation:none;position:relative;overflow:hidden}
.battleship-screen::before,.battleship-water-preview::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:url('./assets/effects/water-surface.svg') repeat;background-size:384px 384px;opacity:.55;animation:battleship-water-flow 24s linear infinite alternate}
.battleship-screen::after,.battleship-water-preview::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:repeating-radial-gradient(ellipse at 25% 40%,transparent 0 24px,#c4f3ff0b 27px,transparent 30px 65px);background-size:150% 160%;opacity:.6;animation:battleship-reflections 12s ease-in-out infinite alternate}
@keyframes battleship-water-flow{from{background-position:0 0}to{background-position:48px 32px}}
@keyframes battleship-reflections{from{background-position:0 0;opacity:.35}to{background-position:18px 8px;opacity:.65}}
.battleship-board{background:#021c2db5;position:relative;isolation:isolate}
.battleship-cell{position:relative;background:#0c637b99;overflow:visible}
.battleship-cell.miss{background:#0b526b9c;color:#dcf6ff}
.battleship-shot-mark{position:relative;z-index:2;pointer-events:none;display:inline-block}
.battleship-cell.shot-impact{animation:none;z-index:3}
.battleship-cell.shot-impact::before{content:'';position:absolute;inset:24%;border-radius:50%;background:#ecfcff;box-shadow:0 0 12px #b5eaff;pointer-events:none;opacity:0;animation:battleship-arrival 160ms ease-in both}
.battleship-cell.shot-impact::after{inset:-4px;border:2px solid #d1f5ff;animation:battleship-water-splash 720ms ease-out 150ms both}
.battleship-cell.hit.shot-impact::after{border-color:#ffd398;background:radial-gradient(circle,#fff4baaa,transparent 65%);animation:battleship-hull-impact 650ms ease-out 150ms both}
.battleship-cell.shot-impact .battleship-shot-mark{animation:battleship-marker-arrive 240ms ease-out both}
.battleship-cell.sunk-cell{background:linear-gradient(#06425880,#031f36bb),#633444!important;color:#ffc4b9;box-shadow:inset 0 0 0 2px #bc898a;outline:0}
.battleship-cell.sinking-now{animation:battleship-submerge 950ms ease-in-out 160ms both}
@keyframes battleship-arrival{0%{transform:translateY(-45px) scale(.2);opacity:0}65%{opacity:1}100%{transform:translateY(0) scale(.5);opacity:0}}
@keyframes battleship-water-splash{0%{transform:scale(.25);opacity:0}15%{opacity:1}100%{transform:scale(1.85);opacity:0}}
@keyframes battleship-hull-impact{0%{transform:scale(.2);opacity:0}15%{transform:scale(1.1);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes battleship-marker-arrive{0%,60%{opacity:0}100%{opacity:1}}
@keyframes battleship-submerge{0%,25%{transform:translateY(0);filter:brightness(1.25)}65%{transform:translateY(3px) scale(.9);filter:brightness(.7)}100%{transform:none;filter:none}}
.screen.hidden::before,.screen.hidden::after{animation-play-state:paused}
.battleship-screen.shared-game-paused::before,.battleship-screen.shared-game-paused::after{animation-play-state:paused}
.battleship-water-preview{padding:18px;min-height:260px;border-radius:6px;box-sizing:border-box;display:grid;place-items:center}
.battleship-water-preview .battleship-board{width:min(100%,300px);box-sizing:border-box}
.battleship-water-preview .battleship-cell{display:grid;place-items:center}
.resource-game-stage{width:100%;max-width:420px;margin:18px auto 0;overflow:hidden;padding:2px;box-sizing:border-box}
.resource-game-stage>.jigsaw-board{width:100%}
.animation-preview-toolbar{display:flex;justify-content:flex-end;gap:8px;margin:12px 0 18px}
.animation-preview-toolbar button{display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:9px;border:1px solid #39434d;border-radius:6px;background:#111820;color:var(--theme-color)}
.animation-preview-toolbar svg{width:20px;height:20px;display:block}
#animation-weather-section[hidden],#animation-game-section[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.battleship-screen::before,.battleship-screen::after,.battleship-water-preview::before,.battleship-water-preview::after,.battleship-cell.sinking-now,.battleship-cell.shot-impact .battleship-shot-mark{animation:none;will-change:auto}.battleship-cell.shot-impact::before,.battleship-cell.shot-impact::after{display:none}.battleship-cell.shot-impact{outline:2px solid #b6efff}}