/* 海图档案室：羊皮纸、群青与朱砂。 */
:root {
  --bg-0: #172a43;
  --bg-1: #f1ead8;
  --bg-2: #e6dcc5;
  --bg-3: #d2c4a5;
  --bg-4: #b6a27d;
  --ink: #202b3b;
  --ink-2: #526176;
  --ink-3: #778397;
  --gold: #a98139;
  --gold-2: #d3b56a;
  --gold-dim: rgba(169,129,57,.14);
  --red: #a43d35;
  --red-2: #c35445;
  --green: #55718d;
  --blue: #547b9a;
  --purple: #6f617e;
  --line: rgba(32,43,59,.18);
  --line-2: rgba(32,43,59,.12);
  --line-3: rgba(32,43,59,.28);
  --radius: 2px;
  --radius-sm: 1px;
  --shadow-1: 0 2px 7px rgba(22,35,54,.12);
  --shadow-2: 0 14px 38px rgba(18,31,49,.28);
  --font-display: Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --font-ui: "Palatino Linotype", "Book Antiqua", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}

html, body { background: var(--bg-1); color: var(--ink); font-size: 16px; }
#app { grid-template-rows: 68px minmax(0,1fr); min-width: 0; background: var(--bg-1); }
#topbar {
  min-width: 0; overflow-x: auto; scrollbar-width: thin;
  gap: clamp(9px,1.35vw,20px); padding: 0 22px; color: #f2ead8;
  background: #172a43; border-bottom: 3px solid #a43d35; box-shadow: none;
}
.brand { height: 36px; padding-right: 18px; border-right: 1px solid rgba(241,234,216,.28); color: #f2ead8; font-size: 21px; letter-spacing: .06em; text-shadow: none; }
.stat .k { color: #b3bdca; font-size: 12px; }
.stat b, .stat span:last-child { color: #f2ead8; font-size: 15px; }
#s-gold { color: #e2c878; }
.speed { padding: 2px; border: 1px solid rgba(241,234,216,.24); border-radius: 1px; background: #101f34; }
.speed button { min-height: 34px; color: #c3c9cf; font-size: 13px; border-radius: 0; }
.speed button { min-width: 38px; padding-inline: 8px; white-space: nowrap; }
.speed button.on { color: #fff6df; background: #a43d35; box-shadow: none; }
.btn { min-height: 38px; padding: 7px 13px; color: #f2ead8; font-size: 14px; border: 1px solid rgba(241,234,216,.22); border-radius: 1px; }
.btn.ghost { color: #e6dfd1; }
.btn.ghost:hover { color: #fff; background: rgba(255,255,255,.08); }
.btn.primary { color: #fff8eb; background: #a43d35; border-color: #a43d35; box-shadow: none; }
.btn.primary:hover:not(:disabled) { background: #89312c; }

#stage { grid-template-columns: minmax(0,1fr) 344px; background: var(--bg-1); }
#mapwrap { background: #29425f; }
#mapwrap::after { border: 0; box-shadow: inset 0 0 24px rgba(27,42,62,.12); }
#sidebar { gap: 0; color: var(--ink); background: #e6dcc5; border-left: 1px solid #b5a987; }
.panel { color: var(--ink); background: transparent; border-bottom: 1px solid #c9bea6; }
.panel-head { min-height: 48px; padding: 12px 16px; color: #526176; background: #e2d7bd; border-bottom: 1px solid #c8bda4; }
.panel-head b { color: #25364f; font-size: 15px; letter-spacing: .11em; }
.panel-body { padding: 12px 15px; }
.ship-card { color: var(--ink); background: #f4eedf; border: 1px solid #c9bea6; border-radius: 1px; box-shadow: none; }
.ship-name, .cargo-name { color: #24354f; font-size: 16px; }
.ship-type, .ship-meta, .cargo-val, .bar-label, .bar-num { color: #647185; font-size: 13px; }
.bar-track, .bar { background: #d4c9b2; border-radius: 0; }
.bar-label { width: 46px; flex: 0 0 46px; white-space: nowrap; }
.bar-num { width: 56px; flex: 0 0 56px; white-space: nowrap; }
.cargo-row { font-size: 14px; border-color: #c9bea6; }
.cargo-row:hover { background: #ddd2b8; }
.cargo-qty { color: #a43d35; }
.empty { color: #647185; font-size: 14px; }
.log-item { color: #36475d; font-size: 13px; line-height: 1.65; border-color: #c9bea6; }
.log-date { color: #8c7954; font-size: 11px; }
.log-good { color: #405f88; }
.log-bad { color: #a43d35; }

.map-plaque { left: 22px; top: 20px; min-width: 235px; padding: 12px 15px 13px; color: #24354f; background: rgba(245,239,222,.94); border: 1px solid rgba(39,57,82,.32); border-left: 4px solid #a43d35; }
.map-plaque span { color: #8e382f; font-size: 12px; letter-spacing: .1em; }
.map-plaque b { color: #263a57; font-size: 17px; }
.map-plaque b i { color: #a43d35; }
.map-plaque small { color: #5e6c80; font-size: 12px; }
.map-legend { right: 105px; bottom: 20px; gap: 13px; padding: 9px 12px; color: #283b57; background: rgba(245,239,222,.93); border: 1px solid rgba(39,57,82,.26); font-size: 12px; }
.map-legend i { width: 9px; height: 9px; }
.legend-port { background: #a43d35; box-shadow: none; }
.legend-ally { background: #547b9a; border-color: #263a57; }
.legend-share { background: #d3b56a; border-color: #8d6a2c; }
.legend-fog { background: #243b58; border-color: #536983; }
#hint { left: 20px; bottom: 18px; color: #283b57; background: rgba(245,239,222,.93); border: 1px solid rgba(39,57,82,.23); border-radius: 1px; font-size: 13px; padding: 7px 11px; }
#map-ctl { top: 18px; right: 18px; gap: 5px; }
#map-ctl button { width: 42px; height: 42px; color: #263a57; background: #f3ecd9; border: 1px solid #9b8c6d; border-radius: 1px; font-size: 20px; backdrop-filter: none; }
#map-ctl button:hover, #map-ctl button.on { color: #fff8eb; background: #a43d35; border-color: #a43d35; }
#map-ctl [data-map="course"] { width: auto; min-width: 92px; padding: 0 12px; color: #fff8eb; background: #a43d35; border-color: #a43d35; font-family: var(--font-display); font-size: 15px; letter-spacing: .08em; }
#map-ctl [data-map="landing"] { width: auto; min-width: 108px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
#map-ctl [data-map="course"]:hover, #map-ctl [data-map="course"].on { background: #842f2a; }
#map-ctl [data-map="preview-world"] { width: auto; min-width: 102px; padding: 0 12px; color: #24354f; background: #f3ecd9; font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; }
#map-ctl [data-map="preview-world"]:hover, #map-ctl [data-map="preview-world"][aria-pressed="true"] { color: #fff8eb; background: #547b9a; border-color: #547b9a; }
#mapwrap.preview-world-open #hint { color: #fff8eb; background: #172a43; border-color: #b9a575; }
#mapwrap.course-selecting #map,
#mapwrap.landing-selecting #map { cursor: none; }
.sailing-cursor { position: absolute; z-index: 26; width: 28px; height: 34px; pointer-events: none; transform: translate(-50%,-50%) rotate(var(--cursor-angle,0deg)); filter: drop-shadow(0 2px 2px rgba(18,31,50,.75)); }
.sailing-cursor.hidden { display: none; }
.sailing-cursor i { position: absolute; inset: 0; }
.sailing-cursor i::before, .sailing-cursor i::after { content: ""; position: absolute; clip-path: polygon(50% 0, 100% 100%, 50% 77%, 0 100%); }
.sailing-cursor i::before { inset: 0; background: #172a43; }
.sailing-cursor i::after { inset: 3px 4px 5px; background: #e7c979; }
.polar-sea-ice { fill: url(#gPolarIce); fill-opacity: .78; stroke: #e8f0ed; stroke-opacity: .8; stroke-width: 1.5; }
.polar-land-ice { fill: url(#gPolarIce); stroke: #f2f5ed; stroke-width: 1.5; stroke-linejoin: round; }
.polar-ice-grain { fill: url(#pPolarIce); opacity: .65; }
#mapwrap.course-selecting #map, #mapwrap.landing-selecting #map { cursor: none; }
.vh-wind-info { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 5px; color: #40536e; font-size: 14px; }
.vh-wind-info b { color: #8e382f; font-weight: 600; }
.vh-wind-arrow { display: inline-block; margin: 0 3px; color: #a43d35; font-size: 16px; }
.vh-sails { display: flex; align-items: center; gap: 6px; margin: 8px 0; color: #526176; font-size: 13px; }
.vh-sails > span { margin-right: 3px; font-weight: 600; }
.vh-sails button { min-height: 36px; padding: 5px 12px; color: #293b54; background: #e8deca; border: 1px solid #b3a27f; font: inherit; font-size: 13px; cursor: pointer; }
.vh-sails button:hover { background: #ded1b7; }
.vh-sails button.active { color: #fff8eb; background: #263a57; border-color: #263a57; }
.vh-sails button:focus-visible { outline: 2px solid #a43d35; outline-offset: 2px; }
.route-requirement { margin: 8px 0 0 !important; padding-left: 10px; color: #8e382f; border-left: 2px solid #a43d35; font-size: 13px; }
.route-requirement.ready { color: #315d47; border-left-color: #315d47; }
.inn-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; padding: 12px; border-top: 1px solid #c9bea6; border-bottom: 1px solid #c9bea6; background: #eee6d3; }
.inn-rest > div { display: grid; flex: 1 1 220px; gap: 3px; color: #263a57; }
.inn-rest small { color: #667080; font-size: 12px; line-height: 1.4; }
.local-fleet-card, .dock-ship { padding: 12px; color: #273954; background: #eee6d3; border: 1px solid #c9bea6; }
.local-fleet-card + .local-fleet-card, .dock-ship + .dock-ship { margin-top: 8px; }
.local-fleet-card header, .dock-ship > div:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.local-fleet-meta { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 8px; color: #526176; font-size: 13px; }
.local-state { color: #8e382f; font-size: 12px; }
.local-state.trade { color: #315d47; }
.local-route-name { margin: 8px 0 4px; font-family: var(--font-display); color: #263a57; }
.local-report { display: block; color: #667080; line-height: 1.45; }
.local-fleet-controls, .dock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.local-fleet-controls select, .local-create-form select { min-height: 36px; min-width: 160px; padding: 5px 8px; color: #273954; background: #f7f1e3; border: 1px solid #b9aa89; font: inherit; }
.local-create-form { display: grid; grid-template-columns: repeat(3,minmax(140px,1fr)) auto; align-items: end; gap: 9px; margin: 12px 0 20px; padding: 14px; border-top: 2px solid #a43d35; background: #f3ecdc; }
.local-create-form label { display: grid; gap: 5px; color: #526176; font-size: 12px; }
.local-create-form small { grid-column: 1 / -1; color: #667080; }
.local-empty { margin: 8px 0 18px; padding: 10px 12px; color: #667080; background: #f3ecdc; font-size: 13px; line-height: 1.5; }
.dock-ship > div:first-child span { color: #667080; font-size: 13px; }
.compass-wind { pointer-events: none; }
.ship-sails { transition: transform .22s linear; }
.language-picker { display: inline-flex; align-items: center; }
.language-picker select { min-height: 34px; padding: 4px 24px 4px 8px; color: #f1ead8; background: #263a57; border: 1px solid #718097; border-radius: 0; font: inherit; font-size: 12px; }
.language-picker select:focus-visible { outline: 2px solid #d0b26d; outline-offset: 2px; }
.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; }
.course-hint { position: absolute; z-index: 21; left: 50%; top: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 11px 17px; color: #f6efde; background: #172a43; border-bottom: 3px solid #a43d35; font-family: var(--font-display); font-size: 15px; box-shadow: 0 5px 18px rgba(20,33,52,.2); }
.course-hint.hidden { display: none; }
.course-hint button { padding: 5px 11px; color: #f6efde; border: 1px solid rgba(246,239,222,.4); font-size: 13px; }
.course-hint button:hover { background: #a43d35; }

.voyage-hud { width: min(520px,calc(100% - 40px)); padding: 13px 16px; color: #273954; background: rgba(245,239,222,.96); border: 1px solid #9a8b6d; border-top: 3px solid #a43d35; border-radius: 0; box-shadow: 0 4px 20px rgba(26,42,64,.18); backdrop-filter: none; }
.vh-row { font-size: 14px; }
.vh-crew-status { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: #526176; font-size: 13px; }
.vh-crew-status span:first-child { color: #8e382f; font-weight: 600; }
.vh-steering { display: flex; gap: 6px; margin: 8px 0; }
.vh-steering button { min-height: 36px; padding: 5px 10px; color: #293b54; background: #e8deca; border: 1px solid #b3a27f; font: inherit; font-size: 13px; cursor: pointer; }
.vh-steering button:nth-child(2) { color: #fff8eb; background: #a43d35; border-color: #a43d35; }
.vh-steering button:hover { filter: brightness(.94); }
.vh-to { color: #8e382f; font-size: 16px; }
.vh-day { color: #40536e; }
.vh-left { color: #65738a; font-size: 13px; }
.vh-bar { height: 5px; background: #d5c9ae; border-radius: 0; }
.vh-bar i { background: #a43d35; border-radius: 0; }

#port-modal { padding: 3vh 3vw; background: rgba(18,31,50,.72); backdrop-filter: none; }
.port-shell { width: min(1420px,100%); height: min(880px,94vh); max-height: 94vh; grid-template-columns: 320px minmax(0,1fr); grid-template-rows: 450px minmax(0,1fr); color: #202b3b; background: #f1ead8; border: 1px solid #958360; border-radius: 0; box-shadow: 0 18px 55px rgba(12,22,37,.36); }
.port-head, #port-tabs { color: #f1ead8; background: #172a43; }
.port-head { padding: 0 22px 18px; border-bottom: 1px solid #93835f; }
.port-scene { height: 204px; margin: 0 -22px 6px; background: #829bad; border-bottom: 2px solid #a43d35; }
.port-head h2 { margin: 3px 0 0; color: #f1ead8; font-size: 32px; }
.port-head .sub { color: #c7d0d7; font-size: 14px; }
.port-fleet-status { margin-top: 9px; color: #eee5d2; font-size: 12px; line-height: 1.45; }
.pfs-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 5px; border-bottom: 1px solid rgba(241,234,216,.2); }
.pfs-summary b { color: #e3c879; }
.pfs-summary span { color: #d0d6db; }
.pfs-ships { display: grid; gap: 4px; max-height: 86px; overflow-y: auto; }
.pfs-ship { padding: 3px 0 2px; border-bottom: 1px solid rgba(241,234,216,.12); }
.pfs-ship-head, .pfs-ship-meta { display: flex; align-items: center; gap: 8px; }
.pfs-ship-head b { color: #fff5dc; font-weight: 600; }
.pfs-ship-head > span:nth-child(2), .pfs-ship-meta { color: #bdc8d0; }
.pfs-ship-head > span:nth-child(2) { flex: 1; }
.pfs-ship-meta { gap: 14px; font-size: 11px; }
.pfs-fatigue { color: #d8c17a; }
.pfs-fatigue.mid { color: #e5a24e; }
.pfs-fatigue.high { color: #e77d66; }
.port-close { color: #f1ead8; background: rgba(0,0,0,.18); border-radius: 0; }
.port-close:hover { background: #a43d35; }
.port-depart { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 1px 9px; width: 100%; min-height: 56px; margin-top: 10px; padding: 7px 10px; color: #fff5df; text-align: left; background: #a43d35; border: 1px solid #c36552; }
.port-depart span { grid-row: 1 / span 2; font-size: 23px; }
.port-depart b { font-size: 15px; letter-spacing: .04em; }
.port-depart small { color: #f0d9ca; font-size: 12px; }
.port-depart:hover { background: #842f2a; }
#port-tabs { padding: 13px 0; background: #e6dcc5; }
#port-tabs button { min-height: 70px; padding: 8px 17px; color: #4e5d72; border-left: 4px solid transparent; border-bottom: 1px solid #cfc3aa; }
#port-tabs button:hover { color: #24354f; background: #ddd2b8; }
#port-tabs button.on { color: #24354f; border-left-color: #a43d35; background: #d9ceb4; }
.tab-mark { width: 36px; height: 36px; color: #40536e; border-color: #9e8f70; border-radius: 50%; }
#port-tabs button b { font-size: 16px; }
#port-tabs button small { color: #68758a; font-size: 12px; }
#port-tabs button i { color: #8e382f; }
#port-body { background: #f1ead8; color: #202b3b; }
.market-head { border-color: #c8bda4; }
.market-trend-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin: 10px 0; padding: 9px 12px; color: #4b3a31; background: #e9d7bb; border-left: 3px solid #a43d35; }
.market-trend-banner b { color: #8e382f; font-size: 14px; }
.market-trend-banner span { font-size: 14px; }
.market-trend-banner small { margin-left: auto; color: #6b5948; font-size: 12px; }
.trend-tag { display: inline-block; margin-left: 5px; padding: 1px 5px; color: #fff8eb; background: #a43d35; font-size: 11px; line-height: 1.5; vertical-align: 1px; }
.unit, .mini { color: #34445c; background: #f4eedf; border-color: #ad9d7b; border-radius: 0; }
.unit.on { color: #fff5df; background: #344b69; border-color: #344b69; }
.market-table { color: #24354f; }
.market-table th { color: #627087; border-color: #c4b99f; }
.market-table td { border-color: #ded4bf; }
.market-table tbody tr:hover td { background: #e7ddc7; }
.port-foot { color: #647185; border-color: #c4b99f; }
.port-foot b { color: #24354f; }
.rumor { background: #e6dcc5; border-left-color: #a43d35; }
.rumor-label { color: #963c32; }
.rumor p { color: #263a57; }
.tavern-acts .btn { color: #2d405b; background: #eee6d3; border-color: #b9aa89; }
.guild-panel { background: #ebe2cd; border-color: #c3b597; }
.guild-kicker { color: #934139; }
.guild-panel h3 { color: #24354f; }
.guild-panel p, .guild-note { color: #5d6c81; }
.guild-share b { color: #355779; }
.guild-share i { background: #a43d35; }
.guild-offer { color: #283b57; background: #e1d6bd; border-color: #b7a884; }
.guild-offer:hover:not(:disabled) { background: #d7c9a8; border-color: #9b814e; }
.route-option, .route-running, .route-empty, .route-head { color: #25364f; background: #f1ead8; border-color: #c4b99f; }
.ship-crew-plan { display: block; padding: 12px; border: 1px solid #c9bea6; background: #eee6d3; }
.ship-crew-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; }
.ship-crew-head b { color: #263a57; }
.ship-crew-head > span, .ship-crew-remaining { color: #647185; font-size: 12px; }
.ship-crew-remaining { margin: 8px 0 5px; }
.ship-crew-remaining b { color: #a43d35; }
.ship-posts { display: grid; grid-template-columns: repeat(2,minmax(190px,1fr)); gap: 5px 9px; }
.ship-post { display: grid; grid-template-columns: minmax(0,1fr) 28px 24px 28px; align-items: center; gap: 5px; padding: 5px 7px; background: #e6dcc5; border: 1px solid #d0c4aa; }
.ship-post span { display: grid; }
.ship-post b { color: #344760; font-size: 13px; }
.ship-post small { color: #68758a; font-size: 11px; }
.ship-post strong { text-align: center; color: #a43d35; font-variant-numeric: tabular-nums; }
.ship-post .mini { min-width: 25px; width: 28px; height: 28px; padding: 0; font-size: 16px; }
.route-kicker { color: #963c32; }
.route-option-title b { color: #263b5a; }
.route-legs div { border-color: #cfc3aa; }
.route-footnote { color: #637187; }
.hero-modal { align-items: center; background: rgba(18,31,50,.96); }
.hero-shell { width: min(900px,100%); padding: clamp(18px,4vw,42px); color: #263850; background: #f1ead8; border: 1px solid #b6a47d; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.hero-shell::before { border-color: rgba(39,57,82,.18); clip-path: none; }
.hero-kicker, .hero-foot { color: #934139; letter-spacing: .16em; }
.hero-shell h1 { color: #263a57; font-size: clamp(34px,5vw,52px); }
.hero-lede { color: #58687d; font-size: 16px; line-height: 1.8; }
.hero-choice { color: #25364f; background: #e7ddc8; border-color: #c5b99d; border-radius: 0; }
.hero-choice:hover { border-color: #a43d35; background: #eee5d2; transform: none; }
.hero-choice.selected { background: #ded2b7; border-color: #a43d35; box-shadow: inset 3px 0 #a43d35; }
.hero-choice-copy b { color: #263a57; }
.hero-choice-copy small, .hero-index { color: #6d7a8c; }
.hero-mark { color: #a43d35; border-color: #ae9b75; }
.hero-detail { color: #2d405b; background: #e7ddc8; border-color: #c5b99d; }
.hero-detail p { color: #59697d; }
.hero-attributes { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 13px 0; }
.hero-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; color: #40536e; font-size: 12px; }
.hero-stat i { display: block; height: 5px; background: #d0c4ab; }
.hero-stat em { display: block; height: 100%; background: #547b9a; }
.hero-stat small { color: #8e382f; font-variant-numeric: tabular-nums; }
.companion-hall { margin-top: 18px; }
.companion-hall h4 { margin: 16px 0 8px; color: #263a57; }
.companion-aboard-list { display: flex; flex-wrap: wrap; gap: 6px; }
.companion-aboard { padding: 5px 8px; color: #40536e; background: #e6dcc5; border: 1px solid #c9bea6; font-size: 12px; }
.companion-recruit { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 5px 12px; align-items: center; padding: 10px; border-top: 1px solid #c9bea6; }
.companion-recruit header { display: flex; gap: 8px; align-items: baseline; }
.companion-recruit header b { color: #263a57; }
.companion-recruit header span, .companion-recruit p { color: #647185; font-size: 12px; }
.companion-recruit p { grid-column: 1; margin: 0; }
.companion-stats { display: flex; flex-wrap: wrap; gap: 4px 9px; grid-column: 1; color: #526176; font-size: 11px; }
.companion-recruit > button { grid-column: 2; grid-row: 1 / span 3; }
.hero-perk { border-color: #c5b99d; }
.hero-perk b { color: #934139; }
.story-card, .menu-card { color: #263850; background: #f1ead8; border: 1px solid #b6a47d; border-radius: 0; box-shadow: 0 14px 42px rgba(0,0,0,.3); }
.br-card { max-width: min(520px,calc(100vw - 32px)); padding: clamp(22px,4vw,34px); color: var(--ink); background: var(--bg-1); border-color: var(--bg-4); border-radius: var(--radius); }
.br-card p { font-size: 16px; line-height: 1.6; }
.br-card.win h2 { color: #7d5b29; text-shadow: none; }
.br-loot { margin: 0 0 22px; text-align: left; font-size: 15px; }
.br-loot > b { display: block; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.br-loot ul { margin: 0; padding: 0; list-style: none; }
.br-loot li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.br-loot li strong { flex-shrink: 0; font-weight: 600; }
.br-loot-skipped { color: var(--ink-2); }
.story-kicker { color: #934139; }
.story-card h2, .menu-card h3 { color: #263a57; }
.story-card #story-text, .story-bottom span, .menu-stats, .menu-tip { color: #58687d; }
.toast.ok { border-color: #647c98; color: #e1e9f0; }
.toast.err { border-color: #a43d35; color: #f0d1c8; }
.port-card { color: #f1ead8; background: #172a43; border-color: #b6a47d; border-radius: 0; box-shadow: 0 4px 18px rgba(15,26,42,.3); }
.pc-sail { margin-top: 8px; font-size: 15px; }
.port-label { stroke: rgba(28,45,68,.96); }
.port-leader { stroke: #d3bd8e; stroke-width: 1.25; opacity: .8; pointer-events: none; }
.port-anchor { fill: #f1ead8; stroke: #263a57; stroke-width: 1; pointer-events: none; }
.port:focus-visible { outline: none; }
.port:focus-visible .port-halo { stroke: #f1ead8; stroke-width: 2; fill: rgba(211,189,142,.2); }
.preview-world-open .voyage-hud { display: none; }
.port-nation { stroke: rgba(28,45,68,.92); }
.sea-label { fill: rgba(37,58,86,.46); stroke: rgba(221,232,237,.65); stroke-width: 3px; paint-order: stroke; }
.river-line { stroke: rgba(78,119,157,.66); }
.river-label { fill: rgba(62,91,124,.84); stroke: rgba(233,222,194,.8); }
.depth-contour { stroke: rgba(58,100,142,.25); }
.reef-mark, .current-arrow { stroke: rgba(153,91,63,.5); }
.reef-label { fill: rgba(117,77,65,.64); }
.current-line { stroke: rgba(117,77,65,.34); }
.weather-label { fill: #f4ead5; stroke: #273954; }
.port.is-allied .port-dot { fill: #5a7fa0; stroke: #e5edf2; }
.port.is-invested .port-dot { fill: #d3b56a; stroke: #fff2cf; }
.mini.buy:hover:not(:disabled) { color: #395f83; border-color: #7089a0; background: #dce5eb; }
.mini.sell:hover:not(:disabled) { color: #934139; border-color: #a43d35; background: rgba(164,61,53,.1); }
button:focus-visible { outline: 2px solid #c35445; outline-offset: 2px; }

/* 去除边缘装饰条与徽章化图标，靠留白、底色和文字建立层级。 */
#topbar { border-bottom: 1px solid #46566d; }
.map-plaque { border-left: 0; }
.port-scene { border-bottom: 1px solid #958360; }
#port-tabs button, #port-tabs button.on { border-left: 0; box-shadow: none; }
#port-tabs button.on { color: #172a43; background: #d8ccb2; }
.hero-choice.selected { box-shadow: none; }
.hero-mark { display: inline-flex; width: auto; height: auto; min-width: 28px; align-items: baseline; justify-content: flex-start; padding: 0; color: #a43d35; background: transparent; border: 0; border-radius: 0; font: 16px var(--font-display); }
.tab-mark { display: inline-flex; width: 28px; height: auto; align-items: center; justify-content: flex-start; padding: 0; border: 0; border-radius: 0; font-size: 21px; }
.tavern .rumor, .rumor { border: 1px solid #c5b99d; border-left: 1px solid #c5b99d; }
.tavern .rumor { background: #e6dcc5; }
@media (max-width: 680px) {
  .local-create-form { grid-template-columns: 1fr 1fr; }
  .local-create-form > .btn { grid-column: 1 / -1; }
  .local-fleet-controls select { width: 100%; }
  .inn-rest > div { flex-basis: 100%; }
  #port-tabs button.on { border-bottom-color: transparent; }
}
.modal { background: rgba(18,31,50,.72); backdrop-filter: none; }
.tooltip, #tooltip { color: #eee8da; background: #172a43; border: 1px solid #a99466; border-radius: 0; box-shadow: 0 5px 18px rgba(14,24,39,.28); }
.toast { color: #f3ecdc; background: #172a43; border: 1px solid #a99466; border-radius: 0; }

@media (max-width: 980px) {
  #stage { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
  #sidebar { grid-template-columns: 1fr 1fr 1.25fr; border-left: 0; border-top: 1px solid #b5a987; }
  .port-shell { grid-template-columns: 280px minmax(0,1fr); grid-template-rows: 430px minmax(0,1fr); }
  .port-scene { height: 180px; }
  .ship-posts { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  #topbar { gap: 6px; padding: 0 8px; }
  .brand { font-size: 16px; padding-right: 8px; }
  #topbar .stat { display: none; }
  #s-date, #s-gold { display: flex; }
  #topbar .btn { min-height: 34px; padding: 4px 7px; font-size: 12px; }
  .language-picker select { min-height: 34px; max-width: 108px; padding-left: 5px; font-size: 11px; }
  .speed { display: none; }
  #stage { grid-template-rows: minmax(48vh,1fr) minmax(165px,30vh); }
  #sidebar { grid-template-columns: 1fr 1fr; overflow: auto; }
  #p-log { grid-column: 1 / -1; min-height: 130px; }
  #map-ctl { right: 8px; top: 8px; gap: 3px; }
  #map-ctl button { width: 36px; height: 36px; }
  #map-ctl [data-map="course"] { min-width: 68px; padding: 0 7px; font-size: 13px; }
  #map-ctl [data-map="landing"] { min-width: 82px; padding: 0 6px; font-size: 11px; }
  #map-ctl [data-map="preview-world"] { min-width: 72px; padding: 0 7px; font-size: 12px; }
  .map-plaque { left: 8px; top: 8px; min-width: 170px; padding: 8px 10px; }
  .map-plaque span, .map-plaque small { font-size: 10px; }
  .map-plaque b { font-size: 14px; }
  .map-legend { left: 8px; right: 8px; bottom: 8px; gap: 7px 11px; max-width: calc(100% - 16px); padding: 7px 9px; font-size: 10px; }
  #hint { left: 8px; bottom: 54px; font-size: 11px; }
  .course-hint { top: 55px; width: calc(100% - 16px); justify-content: space-between; font-size: 13px; }
  .port-shell { width: 100%; height: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: auto; }
  .port-head { min-height: 385px; padding-bottom: 13px; }
  .port-scene { height: 145px; }
  .port-head h2 { font-size: 27px; }
  .pfs-summary { gap: 3px 9px; font-size: 11px; }
  .hero-attributes { grid-template-columns: 1fr 1fr; }
  .companion-recruit { grid-template-columns: minmax(0,1fr) auto; }
  .ship-posts { grid-template-columns: 1fr; }
  #port-tabs { flex-direction: row; overflow-x: auto; padding: 0; }
  #port-tabs button { display: flex; min-width: 118px; min-height: 58px; gap: 8px; padding: 6px; border-left: 0; border-bottom: 3px solid transparent; }
  #port-tabs button.on { border-bottom-color: #a43d35; }
  #port-tabs button small, #port-tabs button i { display: none; }
  #port-body { min-height: 0; padding: 16px 12px 24px; }
  .market-table { min-width: 620px; }
  #port-body:has(.market-table) { overflow: auto; }
  .voyage-hud { bottom: 44px; }
}

/* Chartroom navigation panel: permanent helm and exploration controls at sea. */
.voyage-hud {
  left: 24px; bottom: 22px; transform: none; width: min(520px, calc(100% - 48px));
  padding: 15px 18px 13px; color: #273954; background: #eee5d1;
  border: 1px solid #8d8064; border-top: 3px solid #a43d35;
  border-radius: 0; box-shadow: 0 8px 24px rgba(26,35,47,.2); backdrop-filter: none;
}
.voyage-hud.hidden { display: none; }
.nav-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #c9bea6; }
.nav-kicker { color: #8e382f; font-size: 12px; letter-spacing: .14em; }
.nav-panel-head h2 { margin: 2px 0 0; color: #25354c; font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
.nav-panel-head p { margin: 3px 0 0; color: #596578; font-size: 13px; }
.nav-weather, .nav-state { flex: 0 0 auto; padding: 5px 8px; color: #534c3d; background: #ded3bb; border: 1px solid #b9ab8c; font-size: 12px; }
.nav-readings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 10px 0; border-bottom: 1px solid #c9bea6; }
.nav-readings > div { min-width: 0; padding: 0 9px; border-left: 1px solid #d2c7b0; }
.nav-readings > div:first-child { padding-left: 0; border-left: 0; }
.nav-readings span { display: block; margin-bottom: 3px; color: #687080; font-size: 12px; }
.nav-readings b { display: block; overflow: hidden; color: #283950; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.nav-readings small { color: #697386; font-size: 11px; font-weight: 400; }
.nav-readings .vh-wind-arrow { font-style: normal; }
.nav-supply { padding: 8px 0 7px; border-bottom: 1px solid #c9bea6; }
.nav-supply .vh-crew-status { justify-content: space-between; margin: 0; color: #596578; font-size: 13px; }
.nav-supply .vh-crew-status b { color: #283950; font-weight: 650; }
.nav-supply .vh-crew-status span:first-child b { color: #8e382f; }
.nav-command-title { margin: 9px 0 4px; color: #8e382f; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.voyage-hud .vh-sails { margin: 0 0 7px; font-size: 13px; }
.voyage-hud .vh-sails button { min-height: 34px; padding: 4px 9px; font-size: 13px; }
.voyage-hud .vh-steering { display: grid; grid-template-columns: .72fr 1.15fr .72fr 1.15fr; gap: 6px; margin: 0; }
.voyage-hud .vh-steering button { min-height: 39px; padding: 6px 8px; font-size: 14px; }
.voyage-hud .vh-steering button:nth-child(2) { color: #fff8eb; background: #263a57; border-color: #263a57; }
.voyage-hud .vh-steering .nav-land { color: #fff8eb; background: #a43d35; border-color: #a43d35; }
.voyage-hud .vh-steering button:disabled, .voyage-hud .vh-steering .nav-land:disabled { color: #8b8a84; background: #ddd6c8; border-color: #c7bead; cursor: not-allowed; }
.voyage-hud .vh-steering button.on { outline: 2px solid #a43d35; outline-offset: 1px; }
.nav-note, .nav-expedition-note { min-height: 18px; margin-top: 6px; color: #687080; font-size: 12px; line-height: 1.4; }
.voyage-hud[data-state="expedition"] .vh-steering { display: flex; }
.voyage-hud[data-state="expedition"] .vh-steering button { color: #fff8eb; background: #263a57; border-color: #263a57; }
.voyage-hud .vh-bar { margin-top: 9px; }

.guild-contract { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 8px; padding: 12px 14px; border: 1px solid #b9aa89; background: #e4dac4; }
.guild-contract.is-active { border-left: 3px solid #526b50; }
.guild-contract.is-missing { border-left: 3px solid #a43d35; }
.guild-contract > div { display: grid; gap: 4px; }
.guild-contract b { color: #273954; font-size: 16px; }
.guild-contract small { color: #687080; font-size: 13px; }
.guild-contract > span { padding: 4px 8px; color: #304a3b; border: 1px solid #87947e; font-size: 12px; }
.guild-contract .btn { min-height: 38px; padding: 6px 12px; font: inherit; font-size: 14px; }
.guild-ownership { display: flex; justify-content: space-between; gap: 12px; margin: -14px 0 22px; color: #626d79; font-size: 14px; }
.guild-ownership b { color: #596578; }
.guild-income { display: flex; justify-content: space-between; gap: 12px; margin: -8px 0 18px; padding: 10px 12px; color: #344d3e; background: #dce1d3; border-bottom: 2px solid #788568; font-size: 14px; }
.guild-income b { font-family: var(--font-display); }
.trade-route-book { margin: 16px 0; padding: 12px 14px; background: #e8dfca; border-top: 2px solid #a98139; }
.trade-route-book-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #293b54; }
.trade-route-book-head b { font-family: var(--font-display); font-size: 16px; }
.trade-route-book-head span { color: #8c7954; font-size: 12px; }
.trade-route-book-empty { display: block; margin-top: 7px; color: #647185; font-size: 13px; line-height: 1.45; }
.trade-route-book-list { display: grid; gap: 6px; margin-top: 8px; }
.trade-route-book-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; background: #f1ead8; border: 1px solid #c9bea6; }
.trade-route-book-row > div { display: grid; gap: 3px; min-width: 0; }
.trade-route-book-row b { color: #293b54; font-size: 13px; }
.trade-route-book-row small { color: #647185; font-size: 12px; line-height: 1.4; }
.trade-route-book-row em, .trade-route-status { color: #647185; font-size: 12px; font-style: normal; white-space: nowrap; }
.trade-route-status.active { color: #496543; }
.trade-route-status.abolished { color: #983c32; }
.trade-route-book-row button { flex: 0 0 auto; min-height: 34px; padding: 5px 9px; color: #fff8eb; background: #8c6a2c; border: 1px solid #8c6a2c; cursor: pointer; }
.trade-route-book-row button:hover { background: #715421; }
@media (max-width: 560px) { .trade-route-book-row { align-items: flex-start; flex-wrap: wrap; } .trade-route-book-row > div { flex: 1 1 100%; } }
.cargo-name { display: grid; gap: 2px; }
.cargo-grade { color: #8c7954; font-size: 11px; font-weight: 500; }
.grade-tag { padding: 1px 5px; color: #654e22; background: #e7d7a9; border: 1px solid #c7b276; font-size: 11px; white-space: nowrap; }
.guild-development { margin: 16px 0 14px; padding: 13px 14px; background: #e2d7bd; border-top: 2px solid #a98139; }
.guild-development-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; color: #293b54; }
.guild-development-head b { font-family: var(--font-display); font-size: 16px; }
.guild-development-head span { color: #647185; font-size: 13px; }
.guild-development-meter { height: 8px; margin: 9px 0; overflow: hidden; background: #c9bea6; }
.guild-development-meter i { display: block; height: 100%; background: #a43d35; transition: width .25s ease; }
.guild-products { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.guild-products span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 7px; color: #526176; background: #eee6d3; border: 1px solid #c9bea6; font-size: 13px; }
.guild-products b { color: #8e382f; font-size: 12px; }
.guild-commercial-offers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.guild-commercial-offers button { display: grid; align-content: center; gap: 4px; min-height: 54px; padding: 7px; text-align: left; color: #293b54; background: #f1ead8; border: 1px solid #b7a884; cursor: pointer; }
.guild-commercial-offers button:hover:not(:disabled) { background: #e7dcc2; border-color: #9b814e; }
.guild-commercial-offers button:disabled { opacity: .55; cursor: not-allowed; }
.guild-commercial-offers b { font-size: 13px; }
.guild-commercial-offers small { color: #647185; font-size: 11px; line-height: 1.35; }
.guild-development-note { display: block; margin-top: 9px; color: #647185; font-size: 12px; line-height: 1.4; }
.trade-contract-needed { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 11px 14px; color: #71342e; background: #ead8cf; border-left: 3px solid #a43d35; font-size: 14px; }
.trade-contract-needed button { flex: 0 0 auto; min-height: 36px; }
.guild-offer:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 680px) {
  .guild-contract { align-items: flex-start; flex-direction: column; }
  .guild-ownership { margin-top: -12px; }
  .guild-commercial-offers { grid-template-columns: 1fr; }
  .trade-contract-needed { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 680px) {
  .voyage-hud { left: 10px; bottom: 42px; width: min(520px,calc(100% - 20px)); padding: 12px; }
  .nav-panel-head h2 { font-size: 20px; }
  .nav-readings { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 8px; }
  .nav-readings > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .voyage-hud .vh-steering { grid-template-columns: .7fr 1fr .7fr 1fr; gap: 4px; }
  .voyage-hud .vh-steering button { padding: 5px 4px; font-size: 12px; }
  .voyage-hud .vh-sails { flex-wrap: wrap; }
}

/* One ocean and one overhead camera for navigation and battle. */
body.is-at-sea #stage { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); min-height: 0; }
body.is-at-sea #sidebar { display: none; }
body.is-at-sea #mapwrap { min-height: 0; }
body.is-in-battle #btn-course, body.is-in-battle #btn-preview-world, body.is-in-battle #speed-ctl, body.is-in-battle #btn-routes { display: none; }
.deck-open { min-height: 36px; padding: 5px 10px; color: #304c6a; background: #f0e7d2; border: 1px solid #a79a7d; font: inherit; cursor: pointer; }
.port-deck-open { margin-top: 9px; }
#deck-modal { z-index: 180; padding: 20px; }
.deck-shell { width: min(1060px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; color: #273954; background: #f1ead8; padding: 22px 28px; border: 1px solid #8b7e62; }
.deck-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #a43d35; padding-bottom: 12px; }
.deck-header span { color: #8b483a; font-size: 14px; }
.deck-header h2 { margin: 3px 0 0; font: 28px var(--font-display); }
.deck-close { min-width: 44px; min-height: 44px; background: transparent; border: 1px solid #ab9b7a; color: #273954; font-size: 26px; cursor: pointer; }
.deck-note { font-size: 16px; line-height: 1.6; color: #536176; }
.deck-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
.deck-presets button { min-height: 44px; padding: 7px 16px; font: inherit; color: #273954; background: #e1d5bb; border: 1px solid #ad9c78; cursor: pointer; }
.deck-presets button:hover { background: #d2c19e; }
.deck-columns { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 28px; }
.deck-columns h3 { margin: 16px 0 8px; font: 20px var(--font-display); }
.deck-post { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); column-gap: 16px; padding: 12px 0; border-top: 1px solid #c6b99b; }
.deck-post b, .deck-post small { display: block; }
.deck-post b { font-size: 17px; }
.deck-post small { margin-top: 4px; color: #59677a; font-size: 13px; }
.deck-post select { min-width: 0; width: 100%; min-height: 44px; padding: 6px; color: #273954; background: #faf5e8; border: 1px solid #aa9a79; font: inherit; font-size: 15px; }
.deck-post p { grid-column: 1 / -1; margin: 6px 0 0; color: #59677a; font-size: 14px; line-height: 1.4; }
.deck-officer { padding: 14px 0; border-top: 1px solid #c6b99b; }
.deck-officer header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 17px; }
.deck-officer header span { color: #8b483a; font-size: 15px; }
.deck-officer p { margin: 7px 0; font-size: 14px; line-height: 1.5; color: #536176; }
.deck-officer progress { width: 100%; height: 6px; accent-color: #8e4637; }
.deck-officer summary { min-height: 44px; padding: 12px 0 0; cursor: pointer; }
.deck-officer dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; margin: 6px 0; }
.deck-officer dl div { display: flex; justify-content: space-between; gap: 6px; }
.deck-officer dt, .deck-officer dd { margin: 0; font-size: 14px; }
#deck-feedback { min-height: 24px; margin: 12px 0 0; color: #8b382f; }
@media(max-width:680px) { #deck-modal { padding: 8px; } .deck-shell { max-height: calc(100dvh - 16px); padding: 16px; } .deck-columns { grid-template-columns: 1fr; gap: 8px; } .deck-post { column-gap: 10px; } }
#battle { position: fixed; inset: 0; display: block; z-index: 150; opacity: 1; visibility: visible; background: transparent; pointer-events: none; transition: none; }
#battle-result { pointer-events: none; }
#battle-result.is-open { pointer-events: auto; }
.ocean-ship { pointer-events: none; }
.naval-models .ocean-ship[data-side] { pointer-events: visiblePainted; cursor: pointer; }
.ocean-ship.is-selected .ocean-team { stroke: #fbf3dd; stroke-width: 3; }
.ocean-ship.is-wreck .ocean-hull { opacity: .18; }
.ocean-label { font: 13px var(--font-body); fill: #253951; paint-order: stroke; stroke: #f2ead8; stroke-width: 3; stroke-linejoin: round; }
.naval-wakes { pointer-events: none; fill: none; stroke: #e0edf0; stroke-width: 1.5; opacity: .65; }
.naval-arcs, .naval-shells, .naval-orders, .ocean-label { pointer-events: none; }
.naval-arcs path { fill: #284f70; fill-opacity: .035; stroke: #2c5274; stroke-opacity: .4; stroke-dasharray: 5 5; stroke-width: 1; }
.naval-arcs path.ready { fill-opacity: .07; stroke-dasharray: none; stroke-opacity: .6; }
.voyage-hud[data-state="battle"] { width: min(500px, calc(100% - 48px)); }
.voyage-hud[data-state="battle"] button { min-height: 44px; padding: 7px 12px; border: 1px solid #9f9276; border-radius: 0; color: #263a57; background: #f3ecd9; font: inherit; font-size: 15px; cursor: pointer; touch-action: manipulation; }
.voyage-hud[data-state="battle"] button:hover:not(:disabled) { background: #ddd1b6; }
.voyage-hud[data-state="battle"] button[aria-pressed="true"] { color: #fbf3e5; background: #314e6d; border-color: #314e6d; }
.voyage-hud[data-state="battle"] button:focus-visible, .deck-open:focus-visible { outline: 2px solid #9e3c34; outline-offset: 2px; }
.voyage-hud[data-state="battle"] button:disabled { opacity: .45; cursor: not-allowed; }
.naval-unit-picker { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.naval-unit-picker button { flex: 1 1 auto; }
.naval-unit-picker:has(button:only-child) { display: none; }
.naval-readings { display: flex; flex-wrap: wrap; gap: 7px 18px; padding: 10px 0; color: #586579; font-size: 15px; }
.naval-readings b { color: #273954; }
.naval-loading { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 0; border-block: 1px solid #c5b99d; }
.naval-loading label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; font-size: 14px; }
.naval-loading progress { width: 100%; height: 7px; accent-color: #365a77; }
.naval-loading b { grid-column: 2; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 500; }
.naval-solution { min-height: 22px; margin: 10px 0; color: #873b32; font-size: 15px; line-height: 1.4; }
.naval-controls { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.naval-footer { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.naval-footer span { color: #5a6778; font-size: 13px; line-height: 1.4; }
.naval-journal { margin-top: 8px; border-top: 1px solid #c5b99d; color: #556275; font-size: 13px; }
.naval-journal summary { min-height: 32px; padding-top: 8px; cursor: pointer; }
.naval-demo-note { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 16; display: flex; align-items: center; gap: 16px; padding: 8px 12px; color: #f4ead8; background: #203751; font-size: 14px; }
.naval-demo-note a { color: #edcc8e; white-space: nowrap; }
.naval-transition { position: absolute; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; pointer-events: none; background: linear-gradient(#172a4366, transparent 24%, transparent 76%, #172a4366); }
.scene-transition-active #voyage-hud, .scene-transition-active #course-hint { visibility: hidden; }
.scene-transition-active #map { pointer-events: none; }
.naval-transition.is-entering, .naval-transition.is-leaving { display: flex; animation: naval-scene-in .25s ease-out both; }
.naval-transition > div { min-width: 240px; max-width: calc(100% - 40px); padding: 20px 38px; text-align: center; color: #f7eddb; background: #1c3049e8; border-block: 1px solid #b6a27d; }
.naval-transition span { color: #e3bd7d; font-size: 15px; letter-spacing: .15em; }
.naval-transition h2 { margin: 8px 0; font: 30px var(--font-display); letter-spacing: .12em; }
.naval-transition p { margin: 5px 0 0; color: #e1e1d8; font-size: 16px; }
@keyframes naval-scene-in { from { opacity: 0; } to { opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .naval-transition.is-entering, .naval-transition.is-leaving { animation: none; } }
#naval-log { max-height: 100px; overflow: auto; line-height: 1.6; }
.nav-treasure-ledger { margin-top: 10px; border-top: 1px solid #c8b99a; color: #2d3c50; }
.nav-treasure-ledger > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 40px; padding: 9px 2px 6px; cursor: pointer; font-weight: 700; }
.nav-treasure-ledger > summary span { color: #667184; font-size: 12px; font-weight: 500; text-align: right; }
.nav-chart-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ddd3c0; }
.nav-chart-row span { display: grid; gap: 3px; }
.nav-chart-row small, .nav-treasure-tracked small { color: #667184; font-size: 12px; line-height: 1.45; }
.nav-treasure-ledger button { min-height: 36px; padding: 5px 10px; border: 1px solid #a99670; border-radius: 0; color: #273b55; background: #eee4d0; font: inherit; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.nav-treasure-ledger button:disabled { opacity: .48; cursor: not-allowed; }
.nav-treasure-ledger button:focus-visible { outline: 2px solid #a43d35; outline-offset: 2px; }
.nav-treasure-tracked { display: grid; gap: 6px; padding: 10px; border-left: 2px solid #a43d35; background: #e9dfcb; }
.nav-treasure-tracked > span { color: #873b32; font-size: 14px; font-variant-numeric: tabular-nums; }
.nav-treasure-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.nav-treasure-actions button:last-child:not(:disabled) { color: #fff8eb; background: #263a57; border-color: #263a57; }
.nav-treasure-found { padding: 9px 0; border-top: 1px solid #ddd3c0; color: #64735c; font-size: 13px; line-height: 1.5; }
.tavern-treasures { margin: 16px 0; border-block: 1px solid #d0c3a7; }
.tavern-treasures h4 { display: flex; justify-content: space-between; margin: 0; padding: 12px 0; color: #273b55; font-family: var(--font-display); font-size: 18px; }
.tavern-treasures > p { color: #667184; font-size: 14px; line-height: 1.55; }
.tavern-treasures article { padding: 10px 0; border-top: 1px solid #ddd3c0; }
.tavern-treasures article p { margin: 5px 0; color: #667184; font-size: 14px; line-height: 1.5; }
.tavern-treasures article small { color: #873b32; }
@media(max-width:680px) {
  body.is-at-sea .voyage-hud { max-height: 38dvh; overflow-y: auto; }
  .voyage-hud[data-state="battle"] { width: calc(100% - 20px); padding: 10px; bottom: 12px; max-height: 38dvh; overflow-y: auto; }
  .voyage-hud[data-state="battle"] button { padding: 6px; font-size: 14px; }
  .voyage-hud[data-state="battle"] .nav-panel-head { padding-bottom: 5px; }
  .voyage-hud[data-state="battle"] .nav-kicker { display: none; }
  .naval-readings { padding: 6px 0; gap: 4px 12px; font-size: 14px; }
  .naval-loading { padding: 5px 0; }
  .naval-solution { margin: 6px 0; font-size: 14px; }
  .naval-footer { margin-top: 5px; gap: 8px; }
  .naval-demo-note { top: 110px; left: 10px; transform: none; max-width: calc(100% - 60px); gap: 8px; font-size: 13px; }
  .nav-treasure-ledger > summary { align-items: flex-start; font-size: 15px; }
  .nav-chart-row { align-items: flex-start; }
  .nav-treasure-actions button { flex: 1 1 135px; min-height: 42px; }
}