/* Each board is a poster of the sunk ship until the shared WebGL scene draws into its canvas. */
.battleship-scene{display:block;position:relative;isolation:isolate;width:100%;height:100%;min-height:220px;font-family:Sora,system-ui,sans-serif;text-align:left}
.battleship-scene span{box-sizing:border-box}
.battleship-poster,.battleship-canvas{position:absolute;top:var(--battleship-inset-y,0);left:var(--battleship-inset-x,0);width:calc(100% - 2*var(--battleship-inset-x,0px));height:calc(100% - 2*var(--battleship-inset-y,0px));pointer-events:none}
.battleship-poster{object-fit:contain}
.battleship-ready .battleship-poster{display:none}
.battleship-receipt{position:absolute;bottom:18px;right:18px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #fffdf6;border-radius:7px;background:#f4efe2;color:#49483c;box-shadow:0 6px 18px #14082824;opacity:0;transform:translateY(8px);transition:opacity .42s cubic-bezier(.23,1,.32,1),transform .42s cubic-bezier(.23,1,.32,1);font-size:10px;line-height:1.25;z-index:9}
.battleship-receipt>span:not(.battleship-receipt-mark){display:flex;flex-direction:column;gap:3px}
.battleship-receipt b{font-size:20px;font-weight:500;letter-spacing:-.06em;margin-left:12px}
.battleship-receipt-mark{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#ded8c7;color:#5c6352;font-size:12px}
.battleship-receipt-shown .battleship-receipt{opacity:1;transform:none}
.battleship-art,.sub-more-games .battleship-art,.battleship-dom-game .small-game-art{background:radial-gradient(ellipse at 35% 24%,#684e74,#443350 74%);overflow:hidden}
.battleship-game{--card-back:#f0eadc!important;--card-ink:#49483c!important}
.battleship-game .game-card-back{position:relative;overflow:hidden;gap:18px}
.battleship-keyboard .game-flip-inner{transition:none!important}
.battleship-challenge-art{height:340px}
.battleship-challenge-art .battleship-scene{min-height:340px}
.battleship-challenge-art .battleship-receipt{right:-2px;bottom:5px}
.battleship-game .battleship-scene{--battleship-inset-x:12px;--battleship-inset-y:16px}
.battleship-hero-replay{display:block;position:relative;width:100%;height:100%}
@media(max-width:800px){
  .battleship-challenge-art{height:280px;width:355px}
  .battleship-challenge-art .battleship-scene{min-height:280px}
  .battleship-challenge-art .battleship-receipt{right:12px;bottom:0}
}
@media(max-width:560px){
  .battleship-challenge-art{height:270px;width:320px}
  .battleship-challenge-art .battleship-scene{min-height:270px}
  .battleship-challenge-art .battleship-receipt{right:1px}
}
@media(prefers-reduced-motion:reduce){
  .battleship-receipt{transition:none}
}