/* Approved landing-page blueprint applied across the playable site. */

html,
body {
  background: #0f0f0f;
}

body:not(.landing-active) {
  color: #2a211a;
  background:
    radial-gradient(circle at 50% 18%, #34302c 0, #171615 46%, #0a0a0a 100%);
}

.game-shell {
  width: min(100%, 980px);
  background:
    repeating-linear-gradient(0deg, rgba(64, 42, 24, .025) 0 1px, transparent 1px 6px),
    #e1d4b8;
  border-inline: 4px solid #24170f;
  box-shadow:
    0 0 0 2px #9a7044,
    0 0 0 6px #17100c,
    0 24px 80px rgba(0, 0, 0, .68);
}

.masthead {
  position: relative;
  padding-block: 1.4rem 1.15rem;
  border-bottom: 3px double #6d4a2d;
  background:
    linear-gradient(rgba(236, 222, 190, .96), rgba(215, 196, 158, .96)),
    repeating-linear-gradient(12deg, rgba(92, 61, 34, .04) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 -7px 18px rgba(77, 46, 23, .08);
}

.masthead::before,
.masthead::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  height: 1px;
  background: rgba(109, 74, 45, .42);
}

.masthead::before { top: .45rem; }
.masthead::after { bottom: .45rem; }

.masthead h1 {
  color: #1f1a16;
  text-shadow: 0 1px rgba(255, 255, 255, .5);
}

.masthead h1 span,
.eyebrow,
.label,
.dialog-kicker {
  color: #6f2c25;
}

.briefing,
.voyage-line {
  color: #55463a;
}

.scene {
  aspect-ratio: 16 / 7;
  border: 4px solid #24170f;
  border-radius: 2px;
  background-position: center 54%;
  filter: grayscale(.78) sepia(.24) contrast(1.08) brightness(.82);
  box-shadow:
    0 0 0 2px #9d7348,
    0 0 0 5px #20150f,
    7px 8px 14px rgba(0, 0, 0, .24);
}

/* The harpoon should read as a hand-held tool, not a foreground prop. */
.ahab-harpoon-overlay {
  top: 47.2%;
  left: 52.15%;
  height: clamp(14px, 1.85vw, 22px);
  width: auto;
  opacity: .88;
  transform: translate(-8%, -82%) rotate(-3deg);
  transform-origin: 12% 74%;
  filter:
    sepia(.38)
    brightness(.82)
    contrast(1.18)
    drop-shadow(0 0 .6px rgba(241, 219, 176, .55));
}

.command-panel {
  padding-top: clamp(1.25rem, 3vw, 2.2rem);
  border-block: 3px double #6d4a2d;
  background:
    repeating-linear-gradient(0deg, rgba(84, 54, 31, .024) 0 1px, transparent 1px 6px),
    #dfd1b2;
}

.status-row,
.chart-size {
  border: 2px solid #5f4029;
  background: linear-gradient(#eadfc7, #d9c7a4);
  box-shadow:
    0 0 0 1px #aa8050,
    3px 4px 0 rgba(51, 32, 20, .22),
    inset 0 0 0 1px rgba(255, 247, 222, .55);
}

.status-row {
  border-left-width: 5px;
  border-left-color: #6f2c25;
}

.damage-track span {
  border: 1px solid #4f3524;
  background: #a79778;
}

.damage-track span.active {
  border-color: #4b1815;
  background: #6f2c25;
}

.board-wrap {
  border: 4px solid #21160f;
  border-radius: 2px;
  background-color: #b79a5e;
  filter: sepia(.08) saturate(.86);
  box-shadow:
    0 0 0 2px #9d7348,
    0 0 0 5px #20150f,
    8px 9px 14px rgba(0, 0, 0, .25);
}

.board-wrap::before {
  background: rgba(233, 216, 173, .24);
}

.chart-caption {
  color: #ead7ac;
  border: 1px solid #b88c55;
  background: rgba(25, 21, 18, .92);
  box-shadow: inset 0 0 0 1px rgba(229, 199, 145, .12);
}

.coordinate-board {
  border: 3px solid #3c281b;
  background-color: rgba(220, 205, 171, .2);
  background-image:
    linear-gradient(rgba(229, 211, 169, .08), rgba(229, 211, 169, .08)),
    url("assets/images/pequod-voyage-map.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 1px #9c7145,
    5px 6px 0 rgba(42, 28, 19, .34);
}

.coord-label {
  color: #272019;
  border-color: rgba(72, 46, 29, .38);
  background: rgba(235, 223, 194, .92);
}

.coord-cell {
  border-color: rgba(46, 58, 57, .82);
  background: rgba(230, 218, 190, .2);
}

.coord-cell:not(:disabled):hover,
.coord-cell:not(:disabled):focus-visible {
  outline-color: #9a7648;
  background: rgba(249, 237, 205, .96);
  box-shadow: inset 0 0 0 2px rgba(48, 61, 59, .54), 0 2px 7px rgba(45, 33, 27, .24);
}

.coord-cell.hit {
  color: #f9eaca;
  border-color: #421612;
  background: #702c25;
}

.coord-cell.miss {
  color: #efe2c6;
  border-color: #101d20;
  background: #27383a;
}

.result-dialog,
.landing-dialog {
  color: #2b2119;
  border: 4px double #5e3e29;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(86, 56, 31, .025) 0 1px, transparent 1px 6px),
    #e1d4b8;
  box-shadow:
    0 0 0 2px #9b7044,
    0 20px 65px rgba(0, 0, 0, .55);
}

.result-dialog button,
.landing-dialog button,
.reset-button,
.change-role-button {
  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);
}

.result-dialog button:not(:disabled):hover,
.landing-dialog button:not(:disabled):hover,
.reset-button:not(:disabled):hover,
.change-role-button:not(:disabled):hover {
  background: linear-gradient(#f1e5cb, #decca9);
}

.change-role-button {
  color: #61251f;
}

.game-shell footer {
  border-top: 3px double #6d4a2d;
  background: #d4c19c;
}

@media (max-width: 700px) {
  .game-shell {
    border-inline-width: 2px;
    box-shadow: 0 0 0 1px #9a7044, 0 0 0 3px #17100c;
  }

  .scene {
    margin: .75rem .65rem 0;
    border-width: 3px;
  }

  .ahab-harpoon-overlay {
    top: 47.35%;
    left: 52.1%;
    height: 13px;
    transform: translate(-8%, -82%) rotate(-3deg);
  }

  .command-panel {
    padding-inline: .75rem;
  }

  .board-wrap {
    border-width: 3px;
  }
}