:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  --cream: #fff1cf;
  --paper: #f4dfac;
  --ink: #2d1a11;
  --gold: #e7b744;
  --wine: #822c25;
  --navy: #173746;
  --sea: #28687b;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--cream); background: #102f3a; }
button, a { font: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }

.intro-route-status {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #fff1cf;
  background: #102f3a;
  text-align: center;
}

.intro-route-status span { color: var(--gold); font-size: 3rem; line-height: 1; }
.intro-route-status strong { font-size: 1.05rem; }
.intro-route-status a { min-height: 44px; display: grid; place-items: center; padding: 8px 14px; border: 2px solid #d8a84e; border-radius: 999px; color: #fff4d6; text-decoration: none; font-weight: 800; }

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

.intro, .deck-scene { width: 100vw; height: 100vh; min-height: 620px; }
.intro { position: relative; isolation: isolate; }
.deck-scene { position: relative; overflow: hidden; background: #d7a76b; }

.deck-art {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04);
  animation: ship-sway 9s ease-in-out infinite;
}

.scene-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28,14,8,.02) 32%, rgba(24,11,6,.59));
  box-shadow: inset 0 0 110px rgba(37,18,9,.45);
}

.town-link {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 20;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 10px 15px;
  border: 2px solid #d8a84e;
  border-radius: 999px;
  color: #fff4d6;
  background: rgba(37,20,13,.9);
  box-shadow: 0 5px 0 #170b07;
  text-decoration: none;
  font-weight: 700;
}

.encounter-group {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(1040px, calc(100vw - 64px));
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(420px, 1fr);
  align-items: center;
  gap: clamp(18px, 3.4vw, 58px);
  transform: translate(-50%, -47%);
}

.captain {
  width: 100%;
  height: min(86vh, 860px);
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 13px rgba(20,10,5,.55));
  transform-origin: 50% 100%;
  animation: captain-arrives .75s cubic-bezier(.22,1.25,.36,1) both;
}

.dialogue {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 118px);
  overflow: auto;
  padding: clamp(22px, 3vw, 38px);
  border: 5px solid #2a170f;
  border-radius: 24px 24px 24px 6px;
  color: var(--ink);
  background: #fff2cf;
  box-shadow: 0 13px 0 rgba(46,23,13,.9), 0 24px 45px rgba(19,9,5,.45);
  text-align: center;
}

.dialogue::before {
  content: "";
  position: absolute;
  left: -32px;
  bottom: 52px;
  border: 18px solid transparent;
  border-right-color: #2a170f;
}

.dialogue::after {
  content: "";
  position: absolute;
  left: -23px;
  bottom: 56px;
  border: 14px solid transparent;
  border-right-color: #fff2cf;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--wine);
  font: 900 .75rem/1.2 system-ui, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-size: clamp(2.3rem, 4.6vw, 4.8rem); line-height: .96; }
.dialogue > p:not(.eyebrow) { font-size: clamp(1.08rem, 1.7vw, 1.45rem); line-height: 1.48; }
.dialogue .intro-progress-note { margin: 18px 0 0; color: #6c231e; font: 800 .78rem/1.4 system-ui, sans-serif; }

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.choice-grid button, .choice-grid a, .primary-action, .result-actions button,
.hud-actions button, .hud-actions a {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #311a10;
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff7df;
  background: var(--wine);
  box-shadow: 0 5px 0 #35120f;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  transition: transform .15s ease, filter .15s ease;
}

button:hover, a:hover, button:focus-visible, a:focus-visible {
  filter: brightness(1.12);
}

button:focus-visible, a:focus-visible {
  outline: 3px solid #ffd15a;
  outline-offset: 3px;
}

.choice-grid button:hover, .choice-grid a:hover, .primary-action:hover { transform: translateY(-2px); }

.game-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #246276;
}

#sea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.game-hud {
  position: fixed;
  z-index: 8;
  top: 14px;
  left: 14px;
  right: 14px;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 10px 14px;
  border: 2px solid rgba(236,193,88,.75);
  border-radius: 14px;
  background: rgba(13,39,48,.91);
  box-shadow: 0 7px 20px rgba(5,20,26,.34);
  backdrop-filter: blur(8px);
}

.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-lockup .skull { color: var(--gold); font-size: 2.35rem; line-height: 1; }
.brand-lockup div { display: grid; line-height: 1; }
.brand-lockup span:not(.skull) { font-size: .72rem; font-style: italic; }
.brand-lockup strong { color: #fff1c8; letter-spacing: .055em; font-size: clamp(.78rem, 1.05vw, 1rem); }

.voyage-stats {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 32px);
  margin: 0;
  font-family: system-ui, sans-serif;
}

.voyage-stats div { display: grid; gap: 2px; }
.voyage-stats dt { color: #a9c8cf; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.voyage-stats dd { margin: 0; color: white; font-size: 1.05rem; font-weight: 900; }
.hud-actions { display: flex; gap: 8px; }
.hud-actions button, .hud-actions a { min-height: 38px; padding: 6px 11px; border-color: #c99437; background: #50261b; box-shadow: none; font: 800 .78rem/1 system-ui, sans-serif; }
.hud-actions #replayIntroButton { min-height: 44px; }

.mission-strip {
  position: fixed;
  z-index: 7;
  top: 101px;
  left: 50%;
  max-width: min(680px, calc(100vw - 28px));
  padding: 9px 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,231,171,.64);
  border-radius: 999px;
  color: #fff4d4;
  background: rgba(77,42,25,.84);
  box-shadow: 0 4px 15px rgba(18,13,8,.26);
  font-weight: 700;
  text-align: center;
}

.cooldown {
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: 18px;
  width: 200px;
  padding: 10px;
  border: 2px solid #d8ad4d;
  border-radius: 10px;
  color: #fff0c8;
  background: rgba(12,38,47,.9);
  font: 800 .69rem/1 system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.cooldown > span, .cooldown kbd { position: absolute; top: 10px; }
.cooldown > span { left: 10px; }
.cooldown kbd { right: 9px; border: 0; color: #d5e5e9; background: none; }
.cooldown > div { height: 9px; margin-top: 20px; overflow: hidden; border-radius: 99px; background: #091d23; }
.cooldown i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #d67a27, #ffe273); transform-origin: left; }

.modal {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4,19,25,.66);
  backdrop-filter: blur(6px);
}

.paper-panel {
  width: min(940px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: clamp(25px, 4vw, 48px);
  border: 5px solid #28170e;
  border-radius: 20px;
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(103,65,23,.05)),
    repeating-linear-gradient(3deg, transparent 0 6px, rgba(91,57,25,.025) 7px),
    var(--paper);
  box-shadow: 0 12px 0 #1e100b, 0 30px 70px rgba(5,14,18,.56);
  text-align: center;
}

.paper-panel h2 { max-width: 760px; margin: 0 auto 28px; font-size: clamp(2.1rem, 5vw, 4.4rem); line-height: .98; }
.paper-panel.compact { width: min(650px, 100%); }
.paper-panel.compact h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.paper-panel.compact > p:not(.eyebrow) { max-width: 540px; margin: 0 auto 24px; font-size: 1.06rem; line-height: 1.48; }

.orders {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  text-align: left;
}

.orders article {
  padding: 17px;
  border: 2px solid rgba(73,41,20,.32);
  border-radius: 12px;
  background: rgba(255,248,222,.48);
}

.order-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 50%;
  color: #fff4d2;
  background: var(--wine);
  font: 900 1.45rem/1 system-ui, sans-serif;
}

.orders h3 { margin-bottom: 7px; font-size: 1.05rem; }
.orders p { margin-bottom: 0; font: .89rem/1.42 system-ui, sans-serif; }
.warning { margin: 20px 0 22px; color: #6c231e; font-weight: 800; }
.primary-action { width: min(300px, 100%); margin: 0 auto; }
.tutorial-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tutorial-actions .primary-action { margin: 0; }
.tutorial-actions #tutorialReplayIntroButton { min-height: 52px; border: 2px solid #462419; border-radius: 10px; padding: 10px 16px; color: var(--ink); background: transparent; cursor: pointer; font-weight: 800; }

.decision-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.capture-offer {
  position: fixed;
  z-index: 18;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: end center;
  padding: 16px;
  pointer-events: none;
}

.capture-offer .paper-panel {
  width: min(820px, 100%);
  padding: 18px 22px 20px;
  pointer-events: auto;
  animation: offer-up .32s cubic-bezier(.18,.88,.26,1.12) both;
}

.capture-offer .paper-panel h2 {
  margin-bottom: 8px;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.capture-offer .paper-panel > p:not(.eyebrow) {
  margin-bottom: 11px;
  font-size: .9rem;
}

.capture-offer .decision-cards button {
  min-height: 76px;
}

.capture-offer .decision-name {
  font-size: 1.5rem;
}

.offer-timer {
  height: 6px;
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(62,35,21,.2);
}

.offer-timer i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, #b63a2d, #f4be43);
}

.decision-cards button {
  min-height: 132px;
  display: grid;
  align-content: center;
  gap: 10px;
  border: 3px solid #4c2918;
  border-radius: 13px;
  padding: 16px;
  color: #fff1cf;
  background: #753126;
  box-shadow: 0 6px 0 #32160f;
  cursor: pointer;
}

.decision-cards button:last-child { background: #263f46; }
.decision-keycap { display: grid; width: 1.5em; height: 1.5em; place-items: center; margin: 0 auto; border: 2px solid rgba(255,241,207,.88); border-radius: .24em; color: #fff7df; background: rgba(0,0,0,.2); box-shadow: inset 0 -2px rgba(0,0,0,.28); font: 900 2.2rem/1 system-ui, sans-serif; }
.decision-name { font-size: 1.7rem; font-weight: 900; }
.decision-prompt { font: 800 .82rem/1.35 system-ui, sans-serif; }

.result-stats {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 24px 0;
  font: 800 .78rem/1.4 system-ui, sans-serif;
  text-transform: uppercase;
}
.result-stats strong { display: block; color: var(--wine); font: 900 2rem/1 Georgia, serif; }
.result-actions { display: flex; justify-content: center; gap: 10px; }
.result-actions .primary-action { width: auto; margin: 0; }
.result-actions button:not(.primary-action) { min-height: 52px; border: 2px solid #462419; border-radius: 10px; padding: 10px 16px; color: var(--ink); background: transparent; cursor: pointer; font-weight: 800; }

.touch-controls {
  position: fixed;
  z-index: 9;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: none;
  justify-content: space-between;
  align-items: end;
  pointer-events: none;
}

.touch-helm { display: flex; align-items: center; }
.touch-helm div { display: grid; }
.touch-controls button {
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255,222,140,.88);
  border-radius: 12px;
  color: white;
  background: rgba(20,52,62,.88);
  box-shadow: 0 4px 0 rgba(10,24,29,.9);
  pointer-events: auto;
  font: 900 1.5rem/1 system-ui, sans-serif;
}
.touch-controls button.is-held { transform: translateY(3px); box-shadow: 0 1px 0 rgba(10,24,29,.9); background: #8b3a28; }
.touch-controls .touch-fire { width: 74px; height: 74px; border-radius: 50%; background: #8b3026; font-size: .86rem; }

.dock-panel {
  position: fixed;
  z-index: 8;
  left: 50%;
  bottom: 88px;
  width: min(430px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid #e8bf55;
  border-radius: 13px;
  color: #fff1ca;
  background: rgba(15,46,54,.94);
  box-shadow: 0 7px 20px rgba(5,20,26,.38);
  font-family: system-ui, sans-serif;
  transform: translateX(-50%);
}

.dock-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2c1b12;
  background: var(--gold);
  font-size: 1.25rem;
}

.dock-panel > div:nth-child(2) { display: grid; gap: 3px; }
.dock-panel span { color: #bcd5d8; font-size: .76rem; line-height: 1.25; }
.dock-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #081f27; }
.dock-progress i { display: block; width: 100%; height: 100%; transform-origin: left; background: #f0c552; }
.attention { display: grid; gap: 3px; text-align: right; }
.attention small { color: #a9c8cf; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.attention strong { color: #f0c552; font-size: .78rem; }

@keyframes ship-sway { 0%,100% { transform: scale(1.025) rotate(-.15deg); } 50% { transform: scale(1.035) rotate(.15deg); } }
@keyframes captain-arrives { from { opacity: 0; transform: translateX(-35%) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes offer-up { from { opacity: 0; transform: translateY(115%); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .game-hud { grid-template-columns: auto 1fr; }
  .hud-actions { position: fixed; z-index: 8; top: 101px; right: 14px; display: block; }
  .hud-actions > :not(#replayIntroButton) { display: none; }
  .mission-strip { left: 14px; right: 126px; max-width: none; transform: none; }
  .voyage-stats { justify-content: end; gap: 16px; }
  .voyage-stats div:nth-child(3) { display: none; }
  .orders { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .deck-scene { min-height: 700px; height: 100svh; }
  .deck-art { object-position: 52% center; }
  .encounter-group { top: 50%; width: min(650px, calc(100vw - 32px)); height: calc(100svh - 88px); grid-template-columns: 1fr; grid-template-rows: minmax(160px, 34svh) minmax(0, 1fr); gap: 0; transform: translate(-50%, -46%); }
  .captain { align-self: end; justify-self: center; width: min(410px, 82vw); height: 100%; }
  .dialogue { align-self: start; max-height: 100%; padding: clamp(18px, 3.5vw, 28px); }
  .dialogue::before, .dialogue::after { display: none; }
  .touch-controls { display: flex; }
  .cooldown { left: 50%; bottom: 18px; width: 150px; transform: translateX(-50%); }
  .dock-panel { bottom: 96px; grid-template-columns: auto 1fr; transform: translateX(-50%); }
  .dock-panel .attention { grid-column: 2; justify-self: end; grid-row: 1; }
  .capture-offer { bottom: 88px; }
}

@media (max-width: 620px) {
  .game-hud { top: 8px; left: 8px; right: 8px; min-height: 58px; padding: 7px 9px; }
  .hud-actions { top: 77px; right: 8px; }
  .brand-lockup .skull { font-size: 1.65rem; }
  .brand-lockup span:not(.skull) { display: none; }
  .brand-lockup strong { max-width: 132px; font-size: .62rem; letter-spacing: .02em; line-height: 1.08; }
  .voyage-stats { gap: 9px; }
  .voyage-stats div:nth-child(4) { display: none; }
  .voyage-stats div:nth-child(7), .voyage-stats div:nth-child(8) { display: none; }
  .voyage-stats dt { font-size: .55rem; }
  .voyage-stats dd { font-size: .8rem; }
  .mission-strip { top: 77px; left: 8px; right: 116px; font-size: .78rem; }
  .orders { grid-template-columns: 1fr; }
  .paper-panel { padding: 23px 18px; }
  .paper-panel h2 { margin-bottom: 20px; }
  .decision-cards { grid-template-columns: 1fr; }
  .decision-cards button { min-height: 100px; }
  .capture-offer .decision-cards { grid-template-columns: 1fr 1fr; }
  .capture-offer .decision-cards button { min-height: 68px; padding: 9px; }
  .capture-offer .paper-panel { padding: 13px; }
  .capture-offer .paper-panel > p:not(.eyebrow) { display: none; }
  .capture-offer .decision-keycap { font-size: 1.45rem; }
  .capture-offer .decision-name { font-size: 1.05rem; }
  .capture-offer .decision-prompt { font-size: .64rem; }
}

@media (max-width: 520px) {
  .deck-scene { min-height: 700px; }
  .encounter-group { width: calc(100vw - 24px); height: calc(100svh - 76px); grid-template-rows: minmax(145px, 29svh) minmax(0, 1fr); transform: translate(-50%, -45%); }
  .captain { width: min(350px, 90vw); }
  .dialogue { border-width: 4px; border-radius: 18px; padding: 18px 16px; }
  .choice-grid { grid-template-columns: 1fr; }
  .result-actions { flex-direction: column; }
  .result-actions .primary-action { width: 100%; }
  .tutorial-actions { flex-direction: column; }
  .tutorial-actions button { width: 100%; }
}

@media (hover: none), (pointer: coarse) {
  .touch-controls { display: flex; }
}

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