:root {
  --navy: #071a30;
  --navy-light: #102c4a;
  --ivory: #f3e7d1;
  --paper: #ead7b9;
  --gold: #c99745;
  --gold-light: #efd087;
  --ink: #20202a;
  --wave: #bed3dc;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body { height: 100vh; margin: 0; overflow: hidden; min-width: 320px; background: #071526; color: var(--ivory); }
button { font: inherit; }

.game-board {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(8px, 1.25vw, 18px) clamp(16px, 4vw, 68px) 6px;
  border: clamp(7px, .75vw, 13px) solid #a87538;
  background:
    repeating-linear-gradient(168deg, transparent 0 48px, rgba(255,255,255,.025) 49px 50px, transparent 52px 92px),
    radial-gradient(ellipse at 50% 108%, #1d4d69 0 5%, transparent 20%),
    radial-gradient(ellipse at 15% 15%, #173654 0, transparent 25%),
    linear-gradient(135deg, #061526, #102e4c 47%, #071829);
  box-shadow: inset 0 0 0 3px #e5bd70, inset 0 0 65px rgba(0,0,0,.75);
}

.game-board::before, .game-board::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 180px; height: 50px; border-top: 5px double var(--gold); opacity: .8;
}
.game-board::before { top: 14px; left: 9%; transform: rotate(-5deg); }
.game-board::after { top: 14px; right: 9%; transform: rotate(5deg); }
.rope { position: absolute; top: 18px; color: #d4b074; font: 700 clamp(20px, 3vw, 48px)/1 cursive; letter-spacing: -11px; text-shadow: 2px 2px #5e482e; }
.rope-left { left: 2%; transform: rotate(25deg); }.rope-right { right: 2%; transform: rotate(-25deg); }

.masthead { flex: 0 0 auto; display: grid; place-items: center; height: min(15vh, 116px); max-width: 1440px; margin: 0 auto; }
.heading-tab { color: var(--ink); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.heading-tab span { display: block; margin-top: 2px; color: #564634; font-size: .75em; }
.title-lockup { position: relative; z-index: 2; color: var(--gold-light); text-align: center; text-shadow: 1px 2px #312413; }
.helm { display: block; height: clamp(27px, 3vw, 43px); font-size: clamp(37px, 4vw, 58px); line-height: .75; }
h1 { margin: 0; font-weight: normal; font-size: clamp(39px, 5.2vw, 76px); font-style: italic; line-height: 1; }
.title-wave { display: block; margin-top: 2px; font-size: clamp(14px, 1.5vw, 22px); letter-spacing: .3em; }

.battle-area { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(165px, .48fr) minmax(250px, 1fr); align-items: center; gap: clamp(10px, 2.5vw, 42px); width: 100%; max-width: 1440px; margin: 0 auto; }
.fleet-panel { min-width: 0; padding: clamp(5px, .8vw, 12px); border: 5px solid var(--gold); border-radius: 28px 28px 42px 42px; background: linear-gradient(150deg, #f7ead4, #d9c4a6); box-shadow: inset 0 0 0 3px #634725, 0 10px 24px rgba(0,0,0,.28); }
.fleet-panel .heading-tab { padding: 4px 4px 5px; border-bottom: 2px solid #9f7042; font-size: clamp(15px, 1.8vw, 27px); }
.board-status { min-height: 1.1em; margin: 3px 0 4px; color: #634725; font-size: clamp(10px, 1vw, 14px); text-align: center; }
.grid-wrap { display: grid; grid-template-columns: 1.1em repeat(6, minmax(0, 1fr)); grid-template-rows: 1.1em repeat(6, minmax(0, 1fr)); width: min(100%, 54vh); margin: auto; aspect-ratio: 1; background: #0a2845; border: 2px solid #75522a; }
.coord { display: grid; place-items: center; color: var(--ivory); font-size: clamp(12px, 1.65vw, 24px); }
.cell { position: relative; min-width: 0; padding: 0; border: 1px solid rgba(241,224,188,.65); background: linear-gradient(145deg, #153b5c, #09243e); color: var(--ivory); cursor: pointer; transition: background .15s, transform .15s; }
.cell:not(:disabled):hover { background: #20577a; transform: scale(1.035); z-index: 2; }.cell:disabled { cursor: not-allowed; opacity: .72; }
.cell:focus-visible, .controls button:focus-visible, dialog button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cell.miss::after { content: "〰"; color: var(--wave); font-size: clamp(22px, 3.2vw, 48px); text-shadow: 0 1px 4px #fff; }
.cell.hit { background: radial-gradient(circle, #e4ad57 0 5%, #274e69 7% 100%); }.cell.sunk { background: #682d28; }
.cell .guest-photo, .initials { position: absolute; inset: 7%; width: 86%; height: 86%; border: 2px solid var(--gold-light); border-radius: 50%; object-fit: cover; background: #785c3a; box-shadow: 0 1px 5px #010b14; }
.initials { display: grid; place-items: center; color: var(--ivory); font-weight: bold; font-size: clamp(10px, 1.3vw, 18px); }

.fant-deck { position: relative; display: grid; place-items: center; padding: 0; }.paper-stack { position: absolute; width: 76%; height: 82%; background: var(--paper); border: 2px solid #a27649; transform: rotate(-7deg); box-shadow: 6px 7px 0 #d1b184, 11px 14px 0 #bea077; }
.fant-card { position: relative; width: min(100%, 230px); min-height: 0; padding: clamp(9px, 1vw, 16px) 8px 8px; border: 2px solid #9f7042; background: linear-gradient(100deg, #f8ead3, #e5cda7); color: #352718; text-align: center; box-shadow: 0 7px 15px rgba(0,0,0,.4); }
.fant-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid #b38557; pointer-events: none; }.turn-eyebrow { margin: 3px 0 0; font-size: clamp(9px, .85vw, 13px); letter-spacing: .11em; text-transform: uppercase; }.fant-card h2 { margin: 2px 0; font-size: clamp(14px, 1.35vw, 21px); text-transform: uppercase; }.turn-icon { color: #7d5730; font-size: 21px; }.side-selector { position: relative; z-index: 1; display: flex; justify-content: center; gap: 3px; margin: 4px 0; }.side-selector button { border: 1px solid #89613a; padding: 3px 5px; background: transparent; color: #563b22; cursor: pointer; font: inherit; font-size: clamp(9px, .8vw, 12px); }.side-selector button[aria-pressed="true"] { background: #7b522c; color: #fff4dc; }.fant-card hr { width: 58%; margin: 5px auto; border: 0; border-top: 1px solid #926941; }.fant-heading { margin: 7px 0 4px; font-size: clamp(20px, 2vw, 32px); line-height: .95; text-transform: uppercase; }.deck-help { margin: 0; font-size: clamp(9px, .8vw, 12px); line-height: 1.2; }.anchor { display: block; margin-top: 5px; color: #8f6232; font-size: 29px; }

.command-deck { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; width: 100%; max-width: 1440px; margin: 6px auto 0; padding: 6px 10px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); background: rgba(3,13,26,.48); }.move-log { min-width: 0; }.log-label { color: var(--gold-light); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }.move-log ol { display: flex; gap: 12px; margin: 2px 0 0; padding: 0; overflow: hidden; list-style: none; white-space: nowrap; font-size: clamp(11px, 1vw, 14px); }.move-log li + li::before { content: "•"; margin-right: 12px; color: var(--gold); }.controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }.controls button, .modal-action { border: 1px solid var(--gold-light); border-radius: 3px; padding: 6px 9px; background: #163d5c; color: #fff4dc; cursor: pointer; font-size: 13px; }.controls button:hover, .modal-action:hover { background: #235a7e; }.controls .danger { background: #593135; }.motto { flex: 0 0 auto; margin: 5px 0 0; color: var(--gold-light); text-align: center; font-size: clamp(10px, .95vw, 14px); letter-spacing: .26em; text-transform: uppercase; }

dialog { width: min(450px, calc(100vw - 32px)); border: 3px solid var(--gold); padding: 30px; background: linear-gradient(120deg, #f6e7cf, #dfc397); color: var(--ink); text-align: center; box-shadow: 0 20px 80px #000; }dialog::backdrop { background: rgba(0,11,25,.7); backdrop-filter: blur(2px); }.modal-close { position: absolute; top: 5px; right: 9px; border: 0; background: transparent; color: #513a23; font-size: 30px; cursor: pointer; }.modal-compass { color: #96703e; font-size: 42px; }.modal-kicker { margin: 0; color: #7c5a36; letter-spacing: .13em; text-transform: uppercase; }.fant-result { padding: 10px; border-top: 1px solid #ad8050; border-bottom: 1px solid #ad8050; font-style: italic; }.fant-result:empty { display: none; }

@media (max-width: 760px), (max-height: 630px) {
  .game-board { padding: 7px 10px 4px; }.masthead { grid-template-columns: 1fr; height: 72px; }.battle-area { gap: 8px; grid-template-columns: 1fr .58fr 1fr; }.fleet-panel .heading-tab { padding: 1px 3px 2px; font-size: 14px; }.board-status { margin: 1px 0 2px; }.grid-wrap { width: min(100%, 50vh); }.fant-card { min-height: 250px; padding: 10px 6px; }.fant-heading { margin: 8px 0; }.anchor { margin-top: 6px; }.command-deck { margin-top: 5px; }.controls button { padding: 5px 7px; font-size: 12px; }
}
@media (max-width: 520px) {
  .masthead { grid-template-columns: 1fr 1.3fr 1fr; }.heading-tab { font-size: 11px; }.battle-area { grid-template-columns: 1fr; }.fant-deck { order: -1; padding: 8px; }.fant-card { min-height: 0; width: min(100%, 350px); }.paper-stack { height: 80%; }.fleet-panel { padding: 8px; }.command-deck { grid-template-columns: 1fr; }.controls { justify-content: start; }
}