:root {
  color-scheme: light;
  --paper: #e8dfc7;
  --paper-light: #f3ead6;
  --paper-deep: #d6c5a3;
  --ink: #2d211b;
  --muted: #665447;
  --line: #5b3a2b;
  --red: #7b281f;
  --red-dark: #541a15;
  --sea: #356571;
  --sea-dark: #183c46;
  --gold: #a87932;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { background: #9c7a58; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    repeating-linear-gradient(14deg, rgba(75, 48, 29, .035) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 0, #d9c9a9 0, #a98862 58%, #4a3a30 100%);
}

body.landing-active { overflow: auto; background: var(--paper); }
[hidden] { display: none !important; }
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow,
.label,
.dialog-kicker {
  margin: 0 0 .45rem;
  color: var(--red);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Landing page */
.landing {
  position: relative;
  z-index: 50;
  min-height: 100dvh;
  padding: clamp(.75rem, 2vw, 1.25rem);
  overflow: auto;
  background: var(--paper);
  transition: opacity .24s ease, visibility .24s ease;
}

.landing--hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.landing-art {
  position: relative;
  width: min(100%, 1125px);
  margin: 0 auto;
  aspect-ratio: 1125 / 804;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(91, 58, 43, .22);
  touch-action: manipulation;
}

.landing-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.side-choice.attention { animation: side-pulse .75s ease 2; }

@keyframes side-pulse {
  50% { filter: brightness(1.24); }
}

.mobile-landing-controls {
  display: block;
  width: min(100%, 760px);
  margin: .9rem auto 0;
  padding: clamp(1rem, 3vw, 1.4rem);
  text-align: center;
  border: 1px solid rgba(91, 58, 43, .34);
  border-radius: 4px;
  background: var(--paper-light);
  box-shadow: 4px 4px 0 rgba(91, 58, 43, .18);
}

.mobile-landing-controls h1 {
  margin: 0 0 .85rem;
  color: var(--ink);
  font-size: clamp(1.7rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.hunt-notice {
  width: min(100%, 340px);
  margin: 0 auto .9rem;
  padding: .7rem 1rem .55rem;
  color: var(--ink);
  border: 3px double rgba(91, 58, 43, .72);
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(91, 58, 43, .025) 0 1px, transparent 1px 6px),
    #eadfc5;
  box-shadow: inset 0 0 0 2px rgba(243, 234, 214, .8);
}

.hunt-notice h2 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hunt-notice p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
}

.hunt-notice-ornament {
  display: block;
  margin-top: .25rem;
  color: var(--line);
  font-size: .55rem;
}

.mobile-role-options { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.mobile-role-button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-height: 78px;
  padding: .55rem .7rem;
  color: #f6e5bd;
  text-align: left;
  cursor: pointer;
  border: 2px solid #d1b67b;
  border-radius: 4px;
  background: #173f51;
  box-shadow:
    inset 0 0 0 3px rgba(18, 45, 58, .9),
    inset 0 0 0 4px rgba(218, 190, 130, .45),
    3px 3px 0 rgba(91, 58, 43, .22);
  transition: filter 140ms ease, transform 140ms ease;
}

.mobile-role-button[data-role="ahab"] {
  background: #6c2f26;
  box-shadow:
    inset 0 0 0 3px rgba(85, 31, 26, .9),
    inset 0 0 0 4px rgba(218, 190, 130, .45),
    3px 3px 0 rgba(91, 58, 43, .22);
}

.mobile-role-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.mobile-role-copy { display: grid; gap: .15rem; min-width: 0; }

.mobile-role-kicker {
  color: #d9bd7f;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-role-button strong {
  color: #f6e5bd;
  font-size: .95rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.mobile-role-button:hover { filter: brightness(1.1); }
.mobile-role-button:active { transform: translateY(1px); }

.mobile-role-button[aria-pressed="true"] {
  outline: 3px solid #fff8e8;
  outline-offset: -6px;
  transform: translateY(-1px);
}

.mobile-role-button[data-role="moby"][aria-pressed="true"] { background: #24596c; }
.mobile-role-button[data-role="ahab"][aria-pressed="true"] { background: #8a4035; }
.mobile-role-button[aria-pressed="true"] .mobile-role-kicker { color: #f0dba8; }

.mobile-landing-status {
  min-height: 2.8em;
  margin: .8rem 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.35;
}

/* Dialogs */
.result-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 18px 60px rgba(24, 21, 18, .42);
}

.result-dialog::backdrop { background: rgba(12, 19, 24, .76); backdrop-filter: blur(2px); }
.result-dialog { padding: 1.4rem; }

.result-dialog h2 {
  margin: 0 0 .65rem;
  color: var(--ink);
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.result-dialog p { line-height: 1.55; }

.result-dialog button,
.mobile-primary-button,
.reset-button,
.change-role-button {
  min-height: 48px;
  padding: .75rem 1rem;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-light);
  box-shadow: 3px 3px 0 rgba(91, 58, 43, .2);
}

.result-dialog button:hover,
.mobile-primary-button:hover,
.reset-button:hover,
.change-role-button:hover { background: #ddd0b3; }
.mobile-primary-button { width: 100%; color: #fff8e8; text-transform: uppercase; background: var(--red-dark); }
.mobile-primary-button:hover { background: var(--red); }
.result-dialog { text-align: center; }
.result-dialog button { display: block; width: 100%; margin-top: .85rem; }
.result-dialog .secondary-dialog-button { background: transparent; box-shadow: none; }

/* Game */
.game-shell {
  width: min(100%, 980px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: clip;
  background:
    repeating-linear-gradient(0deg, rgba(91, 58, 43, .025) 0 1px, transparent 1px 6px),
    var(--paper);
  box-shadow: 0 0 60px rgba(38, 25, 17, .38);
}

.masthead {
  padding: 1.25rem clamp(1rem, 4vw, 2.4rem) 1rem;
  color: var(--ink);
  text-align: center;
  border-bottom: 1px solid rgba(91, 58, 43, .5);
}

.masthead h1 {
  max-width: 850px;
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.masthead h1 span { color: var(--red); }

.briefing {
  max-width: 720px;
  margin: .8rem auto 0;
  color: var(--muted);
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
  line-height: 1.45;
}

.voyage-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem .8rem;
  margin: .75rem auto 0;
  color: var(--red);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.voyage-line span + span::before { content: "·"; margin-right: .8rem; }

.scene {
  position: relative;
  aspect-ratio: 16 / 7;
  margin: .8rem clamp(.75rem, 3vw, 1.5rem) 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 3px;
  background: url("assets/images/gameplay-banner-v10.webp") center 54% / cover no-repeat;
  box-shadow: 5px 5px 0 rgba(91, 58, 43, .2);
  transition: filter .3s ease;
}

.ahab-harpoon-overlay {
  position: absolute;
  z-index: 2;
  top: 46.5%;
  left: 52.5%;
  width: auto;
  height: clamp(32px, 4vw, 48px);
  pointer-events: none;
  filter:
    drop-shadow(0 0 1px rgba(255, 244, 210, 1))
    drop-shadow(0 0 2px rgba(255, 244, 210, .9));
  transform: translate(-6%, -100%);
}

.scene .pequod,
.scene .whale { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.scene:has(.pequod[data-ship-state="damaged"]),
.scene:has(.whale[data-whale-state="wounded"]) { filter: sepia(.18) contrast(1.08); }

.scene:has(.pequod[data-ship-state="sunk"]),
.scene:has(.whale[data-whale-state="dead"]) { filter: saturate(.62) brightness(.72); }

.command-panel {
  scroll-margin-top: 0;
  padding: clamp(1.1rem, 3vw, 2rem);
  border-block: 1px solid rgba(91, 58, 43, .5);
}

.status-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  max-width: 780px;
  margin: 0 auto 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(91, 58, 43, .42);
  border-left: 5px solid var(--red);
  border-radius: 3px;
  background: rgba(243, 234, 214, .72);
  box-shadow: 3px 3px 0 rgba(91, 58, 43, .12);
}

.status { min-height: 1.5em; margin: 0; font-weight: 800; line-height: 1.35; }
.status:focus { outline: none; }

.prompt {
  max-width: 610px;
  margin: .4rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}

.hit-counter {
  flex: 0 0 auto;
  min-width: 120px;
  padding-left: 1rem;
  text-align: right;
  border-left: 1px solid rgba(91, 58, 43, .35);
}
.hit-counter strong { display: block; color: var(--ink); font-size: 1.65rem; line-height: 1; }

.attempts-left {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.damage-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-width: 780px;
  margin: 0 auto 1.1rem;
}

.damage-track span { height: 11px; border: 1px solid #7b6248; background: #b9ab8d; }
.damage-track span.active { border-color: var(--red-dark); background: var(--red); }
.board-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 780px);
  margin: 1.25rem auto .65rem;
}
.board-heading .label { margin-bottom: .2rem; }

.board-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.4;
}

.chart-size {
  flex: 0 0 auto;
  margin: 0;
  padding: .35rem .55rem;
  color: var(--muted);
  text-align: right;
  border: 1px solid rgba(91, 58, 43, .42);
  border-radius: 2px;
  background: rgba(243, 234, 214, .75);
}

.chart-size span,
.chart-size strong { display: block; }
.chart-size span { font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.chart-size strong { color: var(--ink); font-family: "Courier New", Courier, monospace; font-size: .82rem; }

.board-wrap {
  position: relative;
  width: min(100%, 780px);
  margin: auto;
  padding: clamp(14px, 3vw, 28px) clamp(8px, 4vw, 48px) clamp(18px, 3vw, 34px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  isolation: isolate;
  border: 2px solid var(--line);
  border-radius: 3px;
  background-color: #c9aa62;
  box-shadow: 7px 7px 0 rgba(91, 58, 43, .24);
}

.board-wrap::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: rgba(243, 227, 178, .16);
}

.chart-caption {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 600px);
  margin: 0 auto .65rem;
  padding: .48rem .7rem;
  color: #f7ebca;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(247, 235, 202, .7);
  background: rgba(45, 33, 27, .88);
}

.coordinate-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 28px repeat(7, minmax(52px, 1fr));
  grid-template-rows: 28px repeat(7, minmax(52px, 1fr));
  gap: 3px;
  width: min(100%, 600px);
  min-width: 420px;
  margin: auto;
  padding: 5px;
  border: 3px solid var(--line);
  background-color: rgba(232, 223, 199, .24);
  background-image:
    linear-gradient(rgba(239, 224, 187, .12), rgba(239, 224, 187, .12)),
    url("assets/images/pequod-voyage-map.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 5px 5px 0 rgba(45, 33, 27, .34);
}

.coord-label {
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
  font-size: .76rem;
  font-weight: 900;
  border: 1px solid rgba(91, 58, 43, .3);
  background: rgba(243, 234, 214, .86);
}

.coord-cell {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: .15rem;
  color: transparent;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: crosshair;
  border: 1px solid rgba(24, 60, 70, .82);
  border-radius: 2px;
  background: rgba(243, 234, 214, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: background-color .1s ease, box-shadow .1s ease, transform .06s ease;
}

.coord-cell:not(:disabled):hover,
.coord-cell:not(:disabled):focus-visible {
  z-index: 2;
  outline: 3px solid var(--red);
  outline-offset: -2px;
  background: rgba(255, 247, 219, .9);
  box-shadow: inset 0 0 0 2px rgba(24, 60, 70, .58), 0 2px 7px rgba(45, 33, 27, .24);
}

.coord-cell:not(:disabled):active { transform: scale(.96); }

.coord-cell:disabled { cursor: default; }
.coord-cell.hit { color: #fff8e8; border-color: var(--red-dark); background: var(--red); }
.coord-cell.miss { color: #fff8e8; border-color: #0e2e36; background: var(--sea-dark); }

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1rem auto;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
}

.legend i { display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.legend-hit { border: 1px solid var(--red-dark); background: var(--red); }
.legend-miss { border: 1px solid #0e2e36; background: var(--sea-dark); }

.game-actions {
  display: flex;
  justify-content: center;
  gap: .75rem;
  width: min(100%, 780px);
  margin: 0 auto;
}

.reset-button,
.change-role-button { width: min(100%, 340px); margin: 0; text-transform: uppercase; }
.reset-button:disabled { cursor: not-allowed; opacity: .5; }
.change-role-button { color: var(--red-dark); background: transparent; box-shadow: none; }

.reset-button:active,
.change-role-button:active,
.result-dialog button:active,
.mobile-primary-button:active { transform: translateY(2px); }

.game-shell footer {
  padding: clamp(.85rem, 2.5vw, 1.25rem);
  color: var(--muted);
  text-align: center;
  font-size: .74rem;
  border-top: 1px solid rgba(91, 58, 43, .4);
}

.game-shell footer p { margin: 0; }

.game-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.25rem;
  width: min(100%, 780px);
  margin: 0 auto;
}

.game-footer #footer-rule {
  max-width: 31rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: left;
}

.site-credit-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem .55rem;
  min-height: 48px;
  margin: 0;
  padding: .3rem .4rem .3rem .75rem;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.68rem, 1.8vw, .78rem);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  border: 2px solid #39251a;
  border-radius: 2px;
  background: linear-gradient(#eadfc7, #d7c5a1);
  box-shadow:
    0 0 0 1px #9e7548,
    3px 4px 0 rgba(46, 28, 17, .22),
    inset 0 0 0 1px rgba(255, 248, 225, .55);
}

.site-credit-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .48rem .72rem;
  color: #fff3d2;
  border: 1px solid #a87932;
  border-radius: 2px;
  background: linear-gradient(#263f49, #19303a);
  box-shadow: inset 0 0 0 1px rgba(243, 234, 214, .15);
  text-decoration-color: #d7bd82;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .14s ease, background .14s ease, transform .14s ease;
}

.site-credit-bar a:hover { color: #fff9e8; background: linear-gradient(#31515e, #21404a); }
.site-credit-bar a:active { transform: translateY(1px); }
.site-credit-bar a:focus-visible { outline: 3px solid #7b281f; outline-offset: 3px; }

@media (max-width: 700px) {
  .landing { padding: .75rem; }
  .landing-art { width: 100%; }
  .game-shell { overflow: hidden; }
  .masthead { padding: .85rem .9rem .75rem; text-align: left; }
  .masthead .eyebrow { font-size: .63rem; }
  .masthead h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1; }
  .briefing { margin-top: .55rem; font-size: .84rem; line-height: 1.38; }
  .voyage-line { display: none; }
  .scene { aspect-ratio: 16 / 8; margin: .65rem .65rem 0; background-position: center 54%; }
  .ahab-harpoon-overlay { top: 46.7%; left: 52.4%; height: 32px; }
  .command-panel { padding: 1rem .75rem 1.2rem; }
  .status-row { align-items: start; margin-bottom: .8rem; padding: .75rem; }
  .status { font-size: .96rem; }
  .prompt { font-size: .82rem; }
  .hit-counter { min-width: 92px; }

  .coordinate-board {
    grid-template-columns: 24px repeat(7, 44px);
    grid-template-rows: 24px repeat(7, 44px);
    gap: 2px;
    width: 352px;
    min-width: 352px;
    margin-inline: auto;
    box-shadow: 4px 4px 0 rgba(91, 58, 43, .24);
  }

  .board-wrap {
    padding: 9px 4px 14px;
    background-position: center;
    box-shadow: 4px 4px 0 rgba(91, 58, 43, .24);
  }

  .chart-caption {
    width: 352px;
    min-width: 352px;
    margin-bottom: .45rem;
    padding: .42rem .5rem;
    font-size: .58rem;
  }

  .coord-cell { min-height: 44px; font-size: .56rem; }
  .game-actions { display: grid; grid-template-columns: 1fr; }
  .reset-button,
  .change-role-button { width: 100%; }

  .game-footer-inner {
    flex-direction: column;
    gap: 0;
  }

  .game-footer #footer-rule {
    display: none;
  }

  .game-shell footer { padding: .25rem; }

  .site-credit-bar {
    min-height: 32px;
    padding: .08rem .15rem .08rem .5rem;
    font-size: .6rem;
    letter-spacing: .065em;
    box-shadow:
      0 0 0 1px #9e7548,
      2px 2px 0 rgba(46, 28, 17, .18),
      inset 0 0 0 1px rgba(255, 248, 225, .45);
  }

  .site-credit-bar a {
    position: relative;
    min-height: 26px;
    padding: .22rem .48rem;
    font-size: .66rem;
  }

  .site-credit-bar a::before {
    content: "";
    position: absolute;
    inset: -9px -6px;
  }

  .game-footer .site-credit-bar { width: min(100%, 290px); }
}

@media (max-width: 370px) {
  .mobile-role-options { grid-template-columns: 1fr; }
  .status-row { display: grid; grid-template-columns: 1fr; }
  .hit-counter { padding: .65rem 0 0; text-align: left; border-top: 1px solid rgba(91, 58, 43, .35); border-left: 0; }
  .board-heading { align-items: start; }
  .chart-size { display: none; }

  .site-credit-bar { gap: .25rem; padding-left: .4rem; font-size: .58rem; }
  .site-credit-bar a { padding-inline: .4rem; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}