:root {
  --scene-art-height: 180px;
  color-scheme: dark;
  font-family: "Songti SC", "Noto Serif CJK SC", "STSong", Georgia, serif;
  background: #071928;
  color: #f2eadb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-anchor: none; }
body { margin: 0; min-height: 100dvh; }
button { font: inherit; }
button:focus-visible { outline: 3px solid #f2cc84; outline-offset: 3px; }

.page {
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse 110% 65% at 50% 22%, #102c40 0%, #0a2032 45%, #071928 100%);
}

.top-panel { position: sticky; top: 0; z-index: 10; margin: 0 -16px; padding: max(7px, env(safe-area-inset-top)) 16px 4px; background: #0a2030; border-bottom: 1px solid #354c5b; }
.masthead { display: grid; gap: 2px; }
.masthead__top, .masthead__stage { display: flex; align-items: center; gap: 9px; min-width: 0; }
.masthead__top { min-height: 26px; justify-content: space-between; }
.masthead__stage { min-height: 16px; }
.brand { color: #d8b477; font-size: 14px; letter-spacing: .12em; }
.masthead__right { font: 11px/1.4 system-ui, sans-serif; color: #aebfc7; }
.language-control { position: relative; flex: 0 0 auto; }
.language-button { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 8px; border: 1px solid #8d795c; border-radius: 5px; background: transparent; color: #e7c17d; font: 12px system-ui, sans-serif; cursor: pointer; }
.language-button:hover, .language-button[aria-expanded="true"] { background: rgba(216, 180, 119, .12); }
.language-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.language-options { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: grid; min-width: 150px; padding: 5px; border: 1px solid #8d795c; border-radius: 7px; background: #102b3d; box-shadow: 0 8px 20px rgba(2, 13, 22, .45); }
.language-options[hidden] { display: none; }
.language-option { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 6px 9px; border-radius: 4px; color: #f2eadb; font: 13px system-ui, sans-serif; text-decoration: none; }
.language-option:hover, .language-option:focus-visible { background: rgba(216, 180, 119, .15); }
.language-option:focus-visible { outline: 2px solid #f2cc84; outline-offset: -2px; }
.language-option[aria-current="true"] { color: #e7c17d; }
.language-option[aria-current="true"]::after { content: "✓"; margin-left: 12px; }
.hud { margin-top: 7px; padding: 7px 0 5px; border-top: 1px solid #354c5b; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.hud__overview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 7px; }
.hud__identity { display: flex; align-items: baseline; gap: 7px; color: #bac8cf; font-size: 11px; }
.hud__identity strong { color: #e0e6e4; font-size: 12px; font-weight: 550; }
.hud__core { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.hud__abilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px 10px; }
.hud__abilities .hud-stat { position: relative; display: grid; gap: 1px; min-width: 0; font-size: 11px; line-height: 1.3; }
.hud__abilities .hud-stat strong { color: #e7be78; font-size: 13px; }
.hud-stat--gained { background: #e7be7812; border-radius: 3px; }
.hud__abilities .hud-stat__gain { position: absolute; left: 30px; bottom: 0; color: #bce8bd; font-size: 12px; font-weight: 700; pointer-events: none; animation: ability-gain 1.8s ease-out forwards; }
@keyframes ability-gain {
  0% { opacity: 0; transform: translateY(4px); }
  15%, 65% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hud__abilities .hud-stat__gain { animation-name: ability-gain-still; }
}
@keyframes ability-gain-still {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; }
}
.result-details summary:focus-visible { outline: 2px solid #f2cc84; outline-offset: 3px; }
.hud-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #b6c6ce; font-size: 12px; line-height: 1.4; }
.hud-stat strong { color: #e0e6e4; font-size: 13px; font-weight: 550; white-space: nowrap; }
.hud-stat--core { font-size: 11px; }
.hud-stat--core strong { font-size: 13px; }
.hud-stat--condition-0 strong { color: #bad5c9; }
.hud-stat--condition-1 strong { color: #e9c688; }
.hud-stat--condition-2 strong { color: #f0b4a1; font-weight: 700; }
.page__body { padding-top: 18px; flex: 1; }
h1 { font-size: clamp(27px, 7vw, 36px); line-height: 1.22; letter-spacing: .01em; font-weight: 650; margin: 0 0 9px; overflow-wrap: anywhere; }
h2 { color: #e7be78; font-size: 19px; font-weight: 550; line-height: 1.4; margin: 0 0 11px; }
.lead { color: #b6bcc1; font-size: 15px; line-height: 1.5; margin: 0 0 15px; }
.intro { color: #cbd0d0; font-size: 15px; line-height: 1.55; margin: 15px 0 12px; }
.eyebrow { color: #d8b477; font-size: 12px; letter-spacing: .1em; margin: 0 0 8px; }
.eyebrow--failed, .lead--failed { color: #e4a18e; }
.result-heading--failed { color: #f0b4a1; }
.rule { height: 1px; background: #354c5b; margin: 16px 0; }
.stack { display: grid; gap: 8px; margin: 10px 0 14px; }
.result-card { border: 0; border-radius: 0; background: none; padding: 4px 0; margin: 16px 0 18px; }
.result-card--fatal { border-left: 2px solid #b87969; padding-left: 14px; }
.result-card--failed { border-left: 2px solid #c48371; padding-left: 14px; }
.result-card--failed .result-card__detail { color: #bfcdd1; }
.result-card--failed .result-card__action { color: #cfad9d; }
.result-card__identity { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.result-card__avatar { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #8f7957; border-radius: 5px; background: #0d0d0d; }
.result-card__identity h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.result-card__identity p { margin: 4px 0 0; color: #cdb993; font-size: 13px; }
.result-card__action { color: #aebfc7; font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
.result-card__text { color: #f3ebdc; font-size: 17px; line-height: 1.65; margin: 0; }
.result-card--opening .result-card__text + .result-card__text { margin-top: 13px; }
.result-card__reason { color: #e6bbad; font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.result-card__detail { color: #bfcdd1; font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.result-changes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 17px; }
.result-changes--setback .result-change:not(.result-change--danger) { color: #b6c7cf; }
.result-change { color: #b6c7cf; font: 12px/1.5 system-ui, sans-serif; white-space: nowrap; }
.result-change b { font-weight: 700; }
.result-change--danger { color: #f0b4a1; }

.option, .button {
  width: 100%;
  text-align: left;
  border-radius: 9px;
  border: 1px solid #75808a;
  background: rgba(9, 27, 42, .53);
  color: #f2eadb;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.option:active, .button:active { transform: scale(.99); }
.option:hover, .button--choice:hover, .button--secondary:hover { border-color: #d7b270; }
.option { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 82px; padding: 10px 12px; }
.option--selected { border-color: #dfb66f; box-shadow: inset 0 0 0 1px rgba(223, 182, 111, .22); }
.option:disabled { opacity: .48; cursor: default; }
.option__art { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(216, 180, 119, .48); border-radius: 7px; background: rgba(216, 180, 119, .07); color: #ddbc84; }
.option__art svg { display: block; width: 36px; height: 36px; }
.option--person { grid-template-columns: 52px minmax(0, 1fr); }
.option__art--person { width: 52px; height: 58px; border-color: #626975; background: #0d0d0d; }
.pixavatar { display: block; image-rendering: pixelated; }
.option__copy { display: block; min-width: 0; }
.option__title { display: block; color: #f2eadb; font-size: 18px; line-height: 1.2; }
.option__sub { display: block; color: #cabca5; font-size: 12px; line-height: 1.3; margin-top: 2px; }
.rarity { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid #737a7e; border-radius: 3px; color: #bac5c8; font-size: 10px; line-height: 1.35; vertical-align: middle; }
.rarity--uncommon { border-color: #719f9e; color: #a8d7d1; }
.rarity--rare { border-color: #d8aa5e; color: #f3ca80; background: rgba(216, 170, 94, .1); }
.option__detail { display: block; color: #cbd0d0; font-size: 12px; line-height: 1.4; margin-top: 5px; }
.option__detail em { color: #e0bc7d; font-style: normal; }
.button { min-height: 52px; padding: 10px 15px; text-align: center; display: block; font-size: 18px; line-height: 1.35; margin-top: 9px; }
.button--primary { background: linear-gradient(135deg, #e2bd7b, #cda465); border-color: #e9c581; color: #082036; font-weight: 650; }
.button--primary:hover { background: linear-gradient(135deg, #f0cc89, #dab274); }
.button--secondary { border-color: #9aabaf; background: transparent; }
.button--navigation { min-height: 48px; margin-top: 18px; border-color: #b99e6f; background: rgba(216, 180, 119, .06); color: #e5c896; font-size: 15px; }
.button--navigation:hover { background: rgba(216, 180, 119, .12); }
.button--choice { min-height: 59px; text-align: left; padding: 9px 13px; margin: 0; }
.button--choice strong { display: block; font-size: 16px; font-weight: 550; }
.youth-choice { display: grid; align-items: center; }
.button small { display: block; font-family: system-ui, sans-serif; color: #aab5bd; font-size: 11px; line-height: 1.3; margin-top: 3px; }
.choice-action { display: flex; align-items: center; gap: 11px; }
.choice-action__art { flex: 0 0 30px; width: 30px; height: 30px; color: #d9b981; }
.choice-action__art svg { display: block; width: 30px; height: 30px; }
.choice-action__copy { min-width: 0; }
.choice-action__skill { color: #d9b981; font-weight: 600; }
.button:disabled { opacity: .46; cursor: not-allowed; }

.story { border: 0; border-radius: 0; padding: 4px 0; color: #eee8dc; font-size: 15px; line-height: 1.6; margin: 13px 0; }
.story p { margin: 0 0 8px; }
.story p:last-child { margin-bottom: 0; }
.story .story__echo { color: #e1bd7b; border-top: 1px solid #66594a; margin-top: 8px; padding-top: 7px; font-size: 13px; }
.story--failed { border-color: #b87969; background: rgba(124, 47, 37, .13); }
.story--failed h2, .status__unconfirmed { color: #e4a18e !important; }
.story--compact { font-size: 14px; }
.landfall-scene { position: relative; height: var(--scene-art-height); overflow: hidden; margin: -18px -16px 20px; border-bottom: 1px solid #8e795b; background: linear-gradient(#213f50 0%, #416270 50%, #34566a 53%, #173b50 100%); }
.landfall-scene--atlantic { background: linear-gradient(#31546a 0%, #608188 49%, #365c6d 53%, #153b50 100%); }
.landfall-scene--cape { background: linear-gradient(#2b4656 0%, #62737a 49%, #354e60 53%, #102f41 100%); }
.landfall-scene--indian { background: linear-gradient(#4b5865 0%, #987869 49%, #536577 53%, #1c3d51 100%); }
.landfall-scene--pacific { background: linear-gradient(#514b62 0%, #ba8773 49%, #4d7080 53%, #1d4860 100%); }
.landfall-scene svg { display: block; width: 100%; height: 100%; fill: none; stroke: #e5ca94; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.landfall-scene .shore-fill { fill: #152f3d; stroke: #d6af77; }
.landfall-scene .shore-sun { fill: #f1d29a; stroke: none; opacity: .82; }
.landfall-scene .shore-horizon { stroke: #d0b88e; opacity: .55; }
.landfall-scene .shore-waves { stroke: #b3cad0; opacity: .5; }
.landfall-scene > span { position: absolute; left: 16px; bottom: 10px; color: #f5e6cb; font: 12px system-ui, sans-serif; letter-spacing: .07em; text-shadow: 0 2px 6px #071928; }
.landfall-scene .journey-scene-art { margin: 0; border: 0; border-radius: 0; stroke: none; }
.landfall-preview { height: var(--scene-art-height); margin: 14px 0 0; border: 1px solid #9e804f; border-radius: 7px; }
.landfall-preview > span { left: 11px; bottom: 7px; }
.landfall-story { background: rgba(216, 180, 119, .07); border-color: #a38a65; }
.landfall-choice { border-color: #8f8778; background: rgba(17, 45, 60, .75); }
.shore-memories p { border-top: 1px solid #455462; padding-top: 9px; }
.shore-memories b { display: block; color: #e1bd7b; font: 12px system-ui, sans-serif; margin-bottom: 3px; }
.milestones { border-top: 1px solid #796f60; margin: 19px 0 15px; padding-top: 15px; }
.milestones h2 { color: #deb979; font-size: 16px; font-weight: 550; margin: 0 0 12px; }
.milestone { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid #344652; }
.milestone__age { color: #deb979; font-size: 12px; white-space: nowrap; line-height: 1.6; }
.milestone p { color: #eee8dc; font-size: 14px; line-height: 1.65; margin: 0; }
.section-label { display: flex; align-items: center; gap: 9px; color: #deb979; margin: 13px 0 8px; white-space: nowrap; font-size: 14px; letter-spacing: .04em; }
.section-label span { flex: 1; height: 1px; background: #8e795b; opacity: .75; }
.section-label b { font-weight: 500; }
.status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #796f60; border-bottom: 1px solid #796f60; padding: 8px 0; color: #afb7bc; font-size: 12px; }
.status b { color: #dcb676; font-weight: 550; margin-left: 5px; }
.status__guard { color: #dcb676; font-size: 10px; margin-left: 5px; white-space: nowrap; }
.status__companion { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status__avatar { width: 36px; height: 36px; flex: 0 0 36px; overflow: hidden; border: 1px solid #8f7957; border-radius: 3px; background: #0d0d0d; }
.result-line { color: #d8b477; font-size: 15px; line-height: 1.5; margin: 15px 0; }
.risk-note { color: #f0c388; border-left: 2px solid #d8b477; padding-left: 10px; font-size: 13px; line-height: 1.5; }
.footnote { text-align: center; font-size: 11px; color: #8d9ba6; line-height: 1.5; margin: 17px 0; }
.site-footer { font-size: 11px; text-align: center; padding-top: 14px; }
.restart-link { display: block; margin: 11px auto 0; border: 0; background: none; color: #9daab2; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.ability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 15px; margin: 18px 0; }
.ability { display: grid; grid-template-columns: auto minmax(20px, 1fr); align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.ability-line { width: 100%; height: 5px; overflow: visible; }
.route-line { margin: 18px 0 25px; }
.route-line svg { width: 100%; height: 34px; display: block; }
.route-line__labels { display: flex; justify-content: space-between; gap: 3px; font-size: 11px; color: #d7b474; text-align: center; }
.route-line__labels span { width: 16.667%; }

.journey-map { display: block; width: 100%; height: var(--scene-art-height); margin: 14px 0 18px; border: 1px solid #536878; border-radius: 8px; background: #0a2637; }
.journey-scene-art { display: block; width: 100%; height: var(--scene-art-height); margin: 14px 0 18px; border: 0; border-radius: 4px; }
/* Scene motion is shared. Local geometry and activity keep each place distinct. */
.journey-scene-art .scene-flag { transform-origin: 0 0; animation: scene-sway 6s ease-in-out infinite alternate; }
.journey-scene-art .scene-boat { animation: scene-bob 5.5s ease-in-out infinite; }
.journey-scene-art .scene-arm { transform-origin: 8px -33px; animation: scene-gesture 5s ease-in-out infinite; }
.journey-scene-art .scene-walker { --walk-duration: 14s; animation: scene-walk var(--walk-duration) linear var(--walk-delay, 0s) infinite; }
.journey-scene-art .scene-walker--inbound { --walk-distance: -55px; --facing: -1; --walk-delay: -4s; }
.journey-scene-art .scene-facing { animation: scene-turn var(--walk-duration, 14s) steps(1, end) var(--walk-delay, 0s) infinite; }
.journey-scene-art .scene-stride-a, .journey-scene-art .scene-stride-b { transform-origin: 0 -12px; animation: scene-stride var(--walk-duration, 14s) linear var(--walk-delay, 0s) infinite; }
.journey-scene-art .scene-stride-b { animation-name: scene-stride-back; }
.journey-scene-art .scene-action { transform-origin: 8px -33px; animation: scene-work var(--work-duration, 6s) ease-in-out var(--work-delay, 0s) infinite; }
.journey-scene-art .scene-action--explain { --work-angle: -38deg; }
.journey-scene-art .scene-action--inspect { --work-angle: 18deg; }
.journey-scene-art .scene-action--write { animation-name: scene-write; }
.journey-scene-art .scene-action--mend { --work-angle: -32deg; }
.journey-scene-art .scene-action--haul { --work-angle: -48deg; }
.journey-scene-art .scene-action--paddle { animation-name: scene-paddle; }
.journey-scene-art .scene-lean { transform-origin: 0 -12px; animation: scene-lean var(--work-duration, 6s) ease-in-out var(--work-delay, 0s) infinite; }
.journey-scene-art .scene-fronds { transform-origin: 0 -89px; animation: scene-fronds 8s ease-in-out infinite alternate; }
@keyframes scene-fronds { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.journey-scene-art .scene-flame { transform-origin: 0 -6px; animation: scene-flame 2.7s ease-in-out infinite alternate; }
@keyframes scene-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes scene-walk { 0%, 8%, 92%, 100% { transform: translateX(0); } 46%, 54% { transform: translateX(var(--walk-distance, 45px)); } }
@keyframes scene-turn { 0% { transform: scaleX(var(--facing, 1)); } 50% { transform: scaleX(calc(-1 * var(--facing, 1))); } }
@keyframes scene-bob { 0%, 100% { transform: translateY(-3px) rotate(-.5deg); } 50% { transform: translateY(4px) rotate(.5deg); } }
@keyframes scene-gesture { 0%, 75%, 100% { transform: rotate(0deg); } 20%, 45% { transform: rotate(-65deg); } 32%, 57% { transform: rotate(-45deg); } }
@keyframes scene-work { 0%, 15%, 82%, 100% { transform: rotate(0deg); } 38%, 57% { transform: rotate(var(--work-angle, -30deg)); } }
@keyframes scene-lean { 0%, 15%, 82%, 100% { transform: rotate(0deg); } 38%, 57% { transform: rotate(9deg); } }
@keyframes scene-write { 0%, 15%, 82%, 100% { transform: rotate(-20deg); } 32%, 48%, 64% { transform: rotate(-30deg); } 40%, 56%, 72% { transform: rotate(-24deg); } }
@keyframes scene-paddle { 0%, 12%, 100% { transform: rotate(-22deg); } 48%, 62% { transform: rotate(24deg); } }
@keyframes scene-flame { from { transform: scaleX(.94) scaleY(.93); opacity: .88; } to { transform: scaleX(1.04) scaleY(1.07); opacity: 1; } }
@keyframes scene-stride { 0% { transform: rotate(0deg); } 4% { transform: rotate(0deg); } 8% { transform: rotate(0deg); } 12% { transform: rotate(-17deg); } 16% { transform: rotate(17deg); } 20% { transform: rotate(-17deg); } 24% { transform: rotate(17deg); } 28% { transform: rotate(-17deg); } 32% { transform: rotate(17deg); } 36% { transform: rotate(-17deg); } 40% { transform: rotate(17deg); } 44% { transform: rotate(-17deg); } 48% { transform: rotate(0deg); } 52% { transform: rotate(0deg); } 56% { transform: rotate(0deg); } 60% { transform: rotate(-17deg); } 64% { transform: rotate(17deg); } 68% { transform: rotate(-17deg); } 72% { transform: rotate(17deg); } 76% { transform: rotate(-17deg); } 80% { transform: rotate(17deg); } 84% { transform: rotate(-17deg); } 88% { transform: rotate(17deg); } 92% { transform: rotate(0deg); } 96% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes scene-stride-back { 0% { transform: rotate(0deg); } 4% { transform: rotate(0deg); } 8% { transform: rotate(0deg); } 12% { transform: rotate(17deg); } 16% { transform: rotate(-17deg); } 20% { transform: rotate(17deg); } 24% { transform: rotate(-17deg); } 28% { transform: rotate(17deg); } 32% { transform: rotate(-17deg); } 36% { transform: rotate(17deg); } 40% { transform: rotate(-17deg); } 44% { transform: rotate(17deg); } 48% { transform: rotate(0deg); } 52% { transform: rotate(0deg); } 56% { transform: rotate(0deg); } 60% { transform: rotate(17deg); } 64% { transform: rotate(-17deg); } 68% { transform: rotate(17deg); } 72% { transform: rotate(-17deg); } 76% { transform: rotate(17deg); } 80% { transform: rotate(-17deg); } 84% { transform: rotate(17deg); } 88% { transform: rotate(-17deg); } 92% { transform: rotate(0deg); } 96% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .journey-scene-art g { animation: none; }
}
.page--journey-arrival { background: radial-gradient(ellipse 115% 68% at 50% 19%, #1d3941 0%, #0e2636 51%, #071928 100%); }
.page--journey-local { background: radial-gradient(ellipse 115% 68% at 50% 19%, #263b3c 0%, #112733 51%, #071928 100%); }
.page--place-fishery, .page--place-shore-work, .page--place-arrival { background: radial-gradient(ellipse 115% 68% at 50% 19%, #243a46 0%, #102737 51%, #071928 100%); }
.page--place-calicut, .page--place-market-visit, .page--place-market { background: radial-gradient(ellipse 115% 68% at 50% 19%, #364038 0%, #152930 51%, #071928 100%); }
.page--place-quanzhou, .page--place-order, .page--place-porcelain, .page--place-inspection, .page--place-packing { background: radial-gradient(ellipse 115% 68% at 50% 19%, #285154 0%, #102c3a 51%, #071928 100%); }
.page--place-tidore, .page--place-tidore-inspect, .page--place-tidore-trade { background: radial-gradient(ellipse 115% 68% at 50% 19%, #463b3d 0%, #182836 51%, #071928 100%); }
.page--place-patagonia, .page--place-magellan { background: radial-gradient(ellipse 115% 68% at 50% 19%, #263d4a 0%, #102735 51%, #071928 100%); }
.voyage-card, .voyage-action { display: block; width: 100%; border: 1px solid #657b87; border-radius: 8px; padding: 14px 15px; background: rgba(9, 30, 45, .72); color: #f2eadb; text-align: left; cursor: pointer; }
.voyage-card:hover, .voyage-card:focus-visible, .voyage-action:hover, .voyage-action:focus-visible { border-color: #d7b270; background: rgba(23, 54, 69, .85); }
.voyage-card--circle { border-color: #bd9861; background: rgba(109, 77, 36, .16); }
.voyage-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.voyage-card__top strong, .voyage-action strong { display: block; font-size: 17px; line-height: 1.3; }
.voyage-card__top small { flex: 0 0 auto; color: #e7be78; font: 11px system-ui, sans-serif; }
.voyage-card > span:nth-child(2) { display: block; color: #c6d0d3; font-size: 13px; line-height: 1.5; }
.voyage-card__meta { display: block; color: #d6b57d; font: 11px system-ui, sans-serif; margin-top: 8px; }
.voyage-card__aid { display: block; color: #b5d3c9; font: 11px/1.4 system-ui, sans-serif; margin-top: 5px; }
.voyage-action small { display: block; margin-top: 5px; color: #b7c9d0; font: 12px system-ui, sans-serif; }
.journey-story { background: none; }
/* Keep the scene's foreground and choices close together on shorter screens. */
.page--scene-choice .page__body { padding-top: 10px; }
.page--scene-choice .eyebrow { margin-bottom: 4px; }
.page--scene-choice h1 { font-size: clamp(24px, 6vw, 30px); margin-bottom: 6px; }
.page--scene-choice .journey-scene-art { height: var(--scene-art-height); margin: 8px 0; }
.page--scene-choice .journey-map { margin: 8px 0; }
.page--scene-choice .journey-story { padding: 3px 0; margin: 12px 0; font-size: 15px; line-height: 1.6; }
.page--scene-choice .section-label { margin: 9px 0 6px; }
.page--scene-choice .stack { gap: 6px; margin: 6px 0 8px; }
.page--scene-choice .voyage-action { min-height: 52px; padding: 9px 12px; }
.page--scene-choice .voyage-action strong { font-size: 15px; }
.page--scene-choice .voyage-action small { margin-top: 3px; line-height: 1.35; }
.page--scene-choice .site-footer { padding-top: 12px; }
.journey-position { display: grid; gap: 5px; border-left: 2px solid #d6b57d; padding: 4px 0 4px 12px; margin: 18px 0; }
.journey-position span { color: #aebfc7; font: 11px system-ui, sans-serif; }
.journey-position strong { color: #f3e9d8; font-size: 20px; }
.page--journey-navigation .page__body { padding-top: 10px; }
.page--journey-navigation .eyebrow { margin-bottom: 4px; }
.page--journey-navigation h1 { font-size: clamp(24px, 6vw, 30px); margin-bottom: 8px; }
.page--journey-navigation .journey-map { width: 100%; height: var(--scene-art-height); margin: 8px auto 12px; }
.page--journey-navigation .journey-position { gap: 3px; margin: 10px 0; padding: 3px 0 3px 10px; }
.page--journey-navigation .journey-position strong { font-size: 17px; line-height: 1.35; }
.page--journey-navigation .lead { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.page--journey-navigation .stack { gap: 8px; margin: 10px 0; }
.page--journey-navigation .stack .button { margin-top: 0; min-height: 48px; font-size: 17px; }
.page--journey-navigation .site-footer { padding-top: 12px; }
.journey-ending-story { background: rgba(216, 180, 119, .08); }
.journey-ending-proof { color: #e7be78; border-top: 1px solid #66594a; padding-top: 9px; margin-top: 12px !important; }
.journey-memory { margin: 20px 0; }
.journey-memory ol { margin: 0; padding-left: 24px; }
.journey-memory li { padding: 5px 0; color: #cbd0d0; line-height: 1.45; }
.journey-memory li strong { display: block; color: #ead3a8; font-weight: 550; }
.journey-memory li span { display: block; font-size: 13px; }
.journey-past { display: flex; flex-wrap: wrap; gap: 5px 8px; padding: 11px 12px; margin: 0 0 18px; border: 1px solid #706a5c; border-radius: 7px; color: #cbd0d0; font: 12px/1.45 system-ui, sans-serif; }
.journey-past strong { flex-basis: 100%; color: #e7be78; font-weight: 600; }
.journey-past span { border-right: 1px solid #706a5c; padding-right: 8px; }
.journey-past span:last-child { border-right: 0; }

@media (max-width: 360px) {
  .page { padding-left: 14px; padding-right: 14px; }
  .top-panel { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .landfall-scene:not(.landfall-preview) { margin-left: -14px; margin-right: -14px; }
  .masthead__right { font-size: 10px; }
  .option { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; }
  .option__art { width: 44px; height: 44px; }
  .option__art svg { width: 34px; height: 34px; }
  .option--person { grid-template-columns: 52px minmax(0, 1fr); }
  .option__art--person { width: 52px; height: 58px; }
  .ability-grid { gap: 15px 12px; }
}


/* Closing pages use space and a keepsake instead of the sailing HUD. */
.page--ending { background: radial-gradient(ellipse 120% 45% at 50% 16%, #28414a 0%, #102b3b 48%, #071928 100%); }
.page--ending-lost { background: radial-gradient(ellipse 120% 45% at 50% 16%, #293442 0%, #102335 48%, #071928 100%); }
.page--ending-settled, .page--ending-retired { background: radial-gradient(ellipse 120% 45% at 50% 16%, #444039 0%, #182e39 48%, #071928 100%); }
.ending-masthead { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #667373; }
.page--ending .page__body { padding-top: 26px; }
.page--ending h1 { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.3; margin-bottom: 10px; }
.page--ending-lost h1 { color: #e1d9d2; }
.ending-identity { color: #b7c6ca; font: 12px/1.6 system-ui, sans-serif; margin: 0 0 14px; }
.ending-place { color: #c7b58f; font-size: 13px; margin: 0 0 20px; }
.ending-art { display: block; width: 100%; height: var(--scene-art-height); border: 1px solid #74867f; border-radius: 12px; margin: 0 0 20px; }
.page--ending-lost .ending-art { border-color: #687585; }
.ending-resolution { font-size: 17px; line-height: 1.8; }
.ending-resolution > p { margin: 0 0 16px; }
.ending-resolution .ending-proof { padding-top: 14px; border-top: 1px solid #6b766c; font-size: 15px; color: #e8c48a; }
.ending-next { margin: 25px 0 30px; padding: 16px; border: 1px solid #8e815f; border-radius: 10px; background: rgba(212, 177, 114, .07); }
.ending-next h2 { font-size: 16px; margin-bottom: 6px; }
.ending-next p { color: #becbcd; font-size: 13px; line-height: 1.65; margin: 0 0 12px; }
.ending-next .button { font-size: 16px; }
.ending-highlights, .ending-legacy { margin: 28px 0; }
.ending-highlights h2, .ending-legacy h2 { font-size: 19px; }
.ending-highlights ol { padding: 0; list-style: none; margin: 0; }
.ending-choice { border-left: 2px solid #a68a5b; padding: 0 0 0 14px; margin: 20px 0; }
.ending-choice h3 { color: #dec79f; font-size: 15px; font-weight: 550; margin: 0 0 6px; }
.ending-choice p { font-size: 14px; line-height: 1.75; margin: 6px 0 0; }
.ending-choice .ending-choice__action { color: #9fb5bd; font: 12px/1.65 system-ui, sans-serif; }
.ending-choice--failed { border-color: #b58479; }
.ending-choice__status { display: block; color: #dfad9f; font: 12px/1.5 system-ui, sans-serif; margin-top: 7px; }
.ending-legacy { padding: 20px 0; border-top: 1px solid #637373; border-bottom: 1px solid #637373; }
.ending-legacy p { font-size: 15px; line-height: 1.8; }
.ending-legacy h3 { color: #bbc7c7; font-size: 13px; font-weight: 500; margin-top: 24px; }
.ending-legacy ol { padding-left: 22px; margin-bottom: 0; }
.ending-legacy li { padding: 7px 0; color: #e3c69b; font-size: 14px; line-height: 1.6; }
.ending-legacy small { display: block; color: #adbfc6; font-size: 12px; }
.ending-log, .ending-chart { border-top: 1px solid #526672; }
.ending-log summary, .ending-chart summary { min-height: 48px; padding: 13px 4px; color: #c5d0d0; font-size: 14px; cursor: pointer; }
.ending-log summary span { margin-left: 8px; color: #dbb77e; font: 12px system-ui, sans-serif; }
.ending-log summary:focus-visible, .ending-chart summary:focus-visible { outline: 2px solid #f2cc84; outline-offset: 2px; }
.ending-log ol { padding-left: 24px; }
.ending-log li { font-size: 14px; line-height: 1.65; padding: 10px 0; border-top: 1px solid #314956; }
.ending-log li strong, .ending-log li span, .ending-log li small { display: block; }
.ending-log li strong { color: #ddc59e; font-weight: 500; }
.ending-log li span { color: #aabec6; font-size: 12px; }
.ending-log li p { margin: 7px 0; }
.ending-log li small { color: #dfad9f; }
.ending-replay { color: #a7b8c0; font-size: 12px; text-align: center; margin: 26px 0 12px; line-height: 1.6; }

.ending-title--won { color: #e8c487; }

.result-details { margin-top: 16px; font: 13px/1.6 system-ui, sans-serif; color: #bccbd0; }
.result-details summary { min-height: 40px; padding: 9px 0; color: #aebfc7; cursor: pointer; }
.result-details p { margin: 8px 0; }

/* A single youth turning point: colour and words both mark its significance. */
.youth-important { margin: 20px 0 14px; padding: 13px 15px; border: 1px solid #d4ad65; border-left: 4px solid #f0c879; border-radius: 8px; background: linear-gradient(110deg, #58472a85, #2f3d3b70); }
.youth-important__badge { display: inline-flex; align-items: center; gap: 7px; color: #ffe0a0; font: 700 13px/1.5 system-ui, sans-serif; letter-spacing: .04em; }
.youth-important p { margin: 6px 0 0; color: #e8d5b2; font: 13px/1.65 system-ui, sans-serif; }
.youth-goal-art { display: block; width: 100%; height: var(--scene-art-height); margin: 16px 0 18px; border: 1px solid #9b956f; border-radius: 14px; }
.youth-important-story { margin-bottom: 20px; }
.youth-important-story p { margin: 0 0 12px; }
.youth-important-story p:last-child { margin-bottom: 0; }
.youth-goal-choice { --wish-color: #dfbc7e; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 11px; align-items: center; padding: 15px 12px; border: 1px solid #677e7f; border-left: 3px solid var(--wish-color); background: #102c3a; text-align: left; }
.youth-goal-choice--fish { --wish-color: #9dccb9; }
.youth-goal-choice--trade { --wish-color: #efc177; }
.youth-goal-choice--east { --wish-color: #a9c6ea; }
.youth-goal-choice--circle { --wish-color: #d8b5db; }
.youth-goal-choice__art { display: block; }
.youth-goal-choice__art svg { display: block; width: 100%; }
.youth-goal-choice__copy { display: grid; gap: 5px; min-width: 0; }
.youth-goal-choice__copy strong { color: #f5ead6; font-size: 17px; line-height: 1.45; }
.youth-goal-choice__copy > span { color: #becbd0; font-size: 14px; line-height: 1.65; }
.youth-goal-choice__copy small { color: var(--wish-color); font: 600 11px/1.5 system-ui, sans-serif; }
.youth-goal-choice:hover { background: #1b3945; border-color: var(--wish-color); }
.youth-goal-kept { display: grid; gap: 8px; margin: 20px 0; padding: 16px 18px; border: 1px solid #b3945f; border-left: 3px solid #eac780; border-radius: 7px; background: #b58b3617; }
.youth-goal-kept > span { color: #c9b183; font: 12px/1.5 system-ui, sans-serif; }
.youth-goal-kept strong { color: #f4d89f; font-size: 18px; line-height: 1.7; font-weight: 500; }
.ending-youth-goal { padding-top: 18px; border-top: 1px solid #7f785d; color: #eed3a4; }
@media (max-width: 360px) { .youth-goal-choice { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; padding: 13px 10px; } .youth-goal-choice__copy strong { font-size: 16px; } }

.result-card--wish .result-card__text + .result-card__text { margin-top: 14px; }

/* A quiet chart interlude between actions. */
.scene-hero { position: relative; width: 100%; height: var(--scene-art-height); margin: 8px 0 16px; overflow: hidden; border: 1px solid #74877d; border-radius: 10px; background: #254755; }
.scene-hero > svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; }
.scene-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #071928e8 0%, #07192888 28%, #07192800 64%); pointer-events: none; }
.page .scene-hero h1 { position: relative; z-index: 1; margin: 0; padding: 14px 16px; color: #fff1d7; font-size: clamp(23px, 5.9vw, 29px); line-height: 1.3; text-shadow: 0 2px 8px #071928b3; }
.scene-hero--whole { background: linear-gradient(var(--hero-sky) 0 45%, var(--hero-sea) 45% 100%); }
.scene-hero__badge { position: relative; z-index: 1; display: block; padding: 12px 16px 0; color: #ffe0a0; font: 700 11px/1.4 system-ui, sans-serif; }
.page .scene-hero--important h1 { padding-top: 4px; }
.scene-hero--important { border-color: #d4ad65; }
.scene-hero__place { position: absolute; right: 12px; bottom: 8px; z-index: 1; padding: 3px 6px; border-radius: 3px; color: #f5e6cb; background: #071928b3; font: 11px/1.4 system-ui, sans-serif; }
.page .scene-hero h1.ending-title--won { color: #e8c487; }
.page .scene-hero h1.result-heading--failed { color: #f0b4a1; }
.passage-chart { margin: 14px 0 18px; overflow: hidden; border: 1px solid #71877e; border-radius: 10px; background: #0a2637; }
.page--journey-navigation .passage-chart .journey-map { margin: 0; border: 0; border-radius: 0; }
.passage-story { margin: 14px 0 18px; }
.passage-story p { font-size: 16px; line-height: 1.85; }
.passage-proof { color: #d9c798; font-size: 13px; }
.preview-banner { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 7px 12px; color: #c4d4cf; background: #254237; font: 11px/1.5 system-ui, sans-serif; }
.preview-banner a { color: #f1d295; }
.map-leg-reveal { stroke-dasharray: 1; animation: chart-trace 2.4s ease-out both; }
.map-arrival-ring { transform-box: fill-box; transform-origin: center; animation: chart-arrival 2.4s ease-out 2; }
@keyframes chart-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes chart-arrival { 0% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.2); } }
@media (prefers-reduced-motion: reduce) {
  .map-leg-reveal, .map-arrival-ring { animation: none; }
  .map-moving-ship { display: none; }
}