/* Shared game surfaces. The world stays blue; the captain's ledger stays light. */
:root {
  --navy: #102638;
  --navy-light: #1c3b51;
  --paper: #eeeae1;
  --paper-light: #fbf8f1;
  --paper-shade: #e6dfd2;
  --ink: #203646;
  --text: #283e4d;
  --muted: #637078;
  --line: #d5cdbf;
  --deep: var(--paper);
  --panel: var(--paper-light);
  --panel2: #f2ede4;
  --gold: #315e79;
  --rust: #984b3c;
  --red: #a33e35;
  --mint: #316775;
  --display: 'STZhongsong', 'Songti SC', 'SimSun', serif;
  --font: 'Microsoft YaHei UI', 'Microsoft YaHei', system-ui, sans-serif;
  --sans: var(--font);
  --data: 'Bahnschrift', 'DIN Alternate', 'Segoe UI', sans-serif;
  --radius: 5px;
  --rail: 196px;
  --masthead: 76px;
}
html { background: var(--paper); color-scheme: light; }
body {
  background: var(--paper);
  background-image: radial-gradient(ellipse at 85% 0, #fffdf7b0, transparent 70%);
  color: var(--text);
  font-family: var(--font);
}
button, input, select { font-family: var(--font); }
button { touch-action: manipulation; }
.sidebar {
  padding: 25px 13px 14px;
  background: linear-gradient(165deg, #18364b 0%, var(--navy) 55%, #0d202f 100%);
  border-right: 1px solid #2c4658;
  box-shadow: 5px 0 22px #0b203812;
}
.brand { gap: 9px; margin: 0 4px 31px; }
.brand > .icon { width: 44px; height: 54px; filter: drop-shadow(0 3px 4px #0005); }
.brand strong { color: #fcf2de; font-size: 23px; letter-spacing: 3px; }
.brand small { color: #b5c6ce; font-size: 9px; letter-spacing: 5px; }
.nav { gap: 6px; }
.nav button {
  min-height: 59px;
  padding: 10px 15px;
  gap: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #ced9dd;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.nav button .icon { width: 35px; height: 35px; filter: drop-shadow(0 2px 2px #0005); }
.nav button .nav-label { font-size: 14px; letter-spacing: 2px; }
.nav button:hover { background: #244455; color: #fff7e8; border-color: #456070; }
.nav button.active {
  background: linear-gradient(100deg, #365467, #223e50);
  border-color: #72818a70;
  box-shadow: inset 3px 0 #e0a18b, 0 3px 12px #05131e25;
  color: #fff8eb;
}
.nav .count { background: #a14d40; color: #fff; font-family: var(--data); }
.side-ship { position: relative; padding-top: 10px; border-top: 1px solid #afc0c32b; }
.sidebar-vessel { height: 91px; margin: -4px -4px 4px; overflow: hidden; }
.sidebar-vessel .sidebar-portrait { height: 100%; width: 100%; }
.sidebar-vessel .ship-rig-inner { animation: none; }
.side-ship .eyebrow { color: #b6c7cc; font-size: 10px; letter-spacing: 2px; }
.side-ship h3 { color: #f5ead8; font-size: 20px; margin: 7px 0 12px; }
.side-ship h3 span, .ship-state { color: #bdcdd2; font-size: 10px; }
.side-ship .bar { background: #ffffff1a; height: 4px; }
.side-ship .bar > span { background: #a1c4d0; }
.save-tools { border-color: #b6c9cd24; padding-top: 13px; margin-top: 15px; }
.save-tools button { color: #ccdade; min-height: 30px; }
.save-tools button:hover { color: #fff4dd; }
.save-note { color: #9db4be; font-size: 9px; }
.topbar {
  background: #102638;
  color: #f9f2e5;
  border-bottom: 1px solid #49606c;
  box-shadow: 0 4px 16px #0f29381c;
  padding: 0 25px;
  gap: 18px;
}
.captain-status { min-width: 136px; gap: 11px; }
.captain-status strong { color: #fcf2df; font-family: var(--display); font-size: 19px; letter-spacing: 1px; }
.captain-status small { color: #bdcbd2; font-size: 10px; margin-top: 2px; }
.status-lamp { background: #b1c8d0; box-shadow: 0 0 0 4px #9fbcc71c; }
.status-lamp.underway { background: #90d1c2; box-shadow: 0 0 0 4px #91d1c21c; }
.wallet { gap: 10px; }
.resource { min-width: 91px; gap: 9px; padding: 7px 13px 7px 9px; background: #ffffff06; border: 1px solid #c6d5d817; border-radius: 4px; }
.resource .icon { width: 31px; height: 31px; filter: drop-shadow(0 2px 2px #0004); }
.resource small { color: #b4c6ce; font-size: 9px; letter-spacing: 1px; }
.resource strong { color: #fff4dc; font: 21px/1.2 var(--data); font-variant-numeric: tabular-nums; }
.top-actions { gap: 8px; }
.sea-time .time { color: #f8eeda; font-size: 12px; }
.sea-time small { color: #bbccd3; font-size: 9px; }
.topbar .speed-control { background: transparent; border: 1px solid #58707d; border-radius: 3px; overflow: hidden; }
.topbar [data-world-clock] { color: #d2e1e6; }
.topbar .speed-control button { background: transparent; color: #c4d3d9; border: 0; min-width: 27px; min-height: 30px; }
.topbar .speed-control button.active, .topbar .speed-control button:hover { background: #e5e9e5; color: #183449; }
.topbar .icon-button { background: #ffffff0a; color: #f6ead9; border: 1px solid #627987; border-radius: 3px; min-width: 33px; min-height: 33px; }
.topbar .icon-button:hover { background: #345064; border-color: #b0c1c6; }
.topbar .icon-button .painted-icon { filter: brightness(1.8) drop-shadow(0 1px 1px #0008); }
main { max-width: 1780px; padding: 0 25px 35px; }
.page-tabs {
  gap: 26px;
  top: var(--masthead);
  margin: 0 0 22px;
  min-height: 56px;
  align-items: stretch;
  background: var(--paper);
  border-bottom: 1px solid #c5bdaf;
  box-shadow: 0 1px 0 #fff8;
}
.page-tabs button { padding: 16px 3px 13px; font-size: 13px; color: #5b6870; letter-spacing: .5px; }
.page-tabs button:hover { color: #172f43; background: #e4dfd5; }
.page-tabs button.active { color: #1a3d54; border-bottom-color: var(--rust); font-weight: 700; }
.page-head { align-items: center; margin-bottom: 20px; gap: 12px; }
.page-head h1 { font: 30px/1.45 var(--display); letter-spacing: 2px; color: #203b4e; }
.page-head p { margin-top: 6px; color: #68747a; font-size: 12px; letter-spacing: .4px; }
.page-head .pill { border-radius: 3px; background: #f9f5ec; border-color: #c8bfae; color: #3c5666; padding: 7px 10px; font-size: 10px; }
.panel, .crew-card, .module-card, .research-card, .contract-card, .recruit-card, .facility-card,
.order-manifest, .fleet-vessel, .guild-relations > article, .fleet-purchase > article, .council-requirement,
.codex-card, .council-work, .policy-card, .crisis-card, .estate-card, .public-work {
  background: var(--paper-light);
  border-color: var(--line);
  border-radius: 5px;
  box-shadow: 0 4px 12px #38424908, inset 0 1px 0 #fff;
}
.panel-head { background: #f2ede3; border-color: #d9d1c3; padding: 13px 17px; min-height: 51px; }
.panel-head h2, .panel-head h3 { color: #2e4656; font-size: 15px; font-weight: 650; }
.panel-head h2 .icon, .panel-head h3 .icon { width: 28px; height: 28px; }
.panel-head .detail { color: #64717a; font-size: 11px; }
.panel-body { padding: 19px; }
.btn {
  border-radius: 3px;
  border-color: #c1b6a4;
  color: #28485d;
  background: #f0eade;
  min-height: 38px;
  font-size: 12px;
  font-weight: 550;
  padding: 9px 13px;
  box-shadow: inset 0 1px 0 #fff8, 0 1px 2px #2537460a;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:not(:disabled):hover { background: #e3dbce; color: #19374d; border-color: #98866f; transform: none; }
.btn.primary { background: #994b3c; border-color: #8a4134; color: #fff8eb; box-shadow: inset 0 1px 0 #ffffff25, 0 2px 4px #5b30251a; }
.btn.primary:not(:disabled):hover { background: #7c372d; border-color: #713127; color: #fff; }
.btn.ghost { background: #fffcf530; }
.btn.ghost:not(:disabled):hover { background: #e8e0d3; }
.btn.danger { background: #f7e7de; color: #8a3b30; border-color: #cf9e8e; }
.btn:disabled { opacity: .52; box-shadow: none; }
.text-button { color: #365c72; font-size: 11px; }
.text-button:hover { color: #8a4134; }
.bar { height: 5px; background: #ded9cd; border-radius: 2px; overflow: hidden; }
.bar > span { background: #537b8c; border-radius: 2px; }
.bar.gold > span { background: #984b3c; }
.bar.red > span { background: #a44138; }
.work-progress {
  padding: 16px 18px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.work-deadline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; color: var(--text); font-size: 12px; line-height: 1.7; }
.work-deadline time { font-variant-numeric: tabular-nums; }
.work-progress h4 { font-size: 14px; font-weight: 650; line-height: 1.5; margin: 0 0 10px; }
.work-progress .progress-info { color: var(--text); font-size: 12px; line-height: 1.6; gap: 12px; margin: 0 0 8px; }
.work-progress [data-work-text] { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.work-progress .repeat { align-items: flex-start; color: var(--text); font-size: 13px; line-height: 1.6; margin-top: 12px; }
.work-progress .repeat input { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0; }
.work-progress .cost { color: var(--text); font-size: 12px; line-height: 1.75; margin: 6px 0 0; overflow-wrap: anywhere; }
.pill, .tag { color: #50646d; background: #f0ece2; border-color: #d4cabb; border-radius: 3px; }
.pill.gold, .tag.gold { color: #6c4735; background: #f2e8d7; border-color: #d9bfa0; }
.pill:before { background: #65808b; }
.hint, .description, .section-intro, .cost, .reward-line, .atlas-caption { color: #66727a; }
.good, .requirements.good { color: #266475; }
.missing, .requirements:not(.good) { color: #9c4437; }
.tabs button, .sea-tabs button, .sailing-modes button, .quantity-control button {
  background: #f6f1e7; border-color: #c8bfae; border-radius: 3px; color: #4f626e;
}
.tabs button.active, .sea-tabs button.active, .sailing-modes button.active, .quantity-control button.active {
  background: #24495f; border-color: #24495f; color: #fff5e4;
}
body :is(.tabs, .sea-tabs, .sailing-modes, .quantity-control) button:not(:disabled):hover {
  background: #e1d8c9; border-color: #988a75; color: #263f50;
}
body :is(.tabs, .sea-tabs, .sailing-modes, .quantity-control) button.active:not(:disabled):hover {
  background: #18384d; border-color: #18384d; color: #fff9ec;
}
input, select, .text-input { background: #fcfaf4; border-color: #c9bfae; color: #365064; border-radius: 3px; }
main :is(button, input, select, summary):focus-visible { outline-color: #9b4b3c; }
.world-map-canvas :is(.world-port, .continent-name):focus-visible { outline-color: #fff2db; }
.footer-note { border-color: #d0c6b6; color: #66747c; margin-top: 28px; }
.section-title h2 { color: #284254; }
.section-title:after { background: #d0c6b8; }
.merged-section > summary { background: #f2ede3; color: #2d4a5e; border-color: #cfc4b3; border-left-color: #9b5b46; }
.merged-section > summary:hover { background: #eae2d5; }

/* A framed atlas with its controls attached, rather than a card among cards. */
main[data-page='chart'] .page-head { margin-bottom: 14px; }
main[data-page='chart'] .page-head h1 { font-size: 29px; }
.atlas-navigation { margin-bottom: 12px; }
.atlas-filter-options { align-items: center; gap: 12px; }
.continent-tabs { gap: 3px; }
.continent-tabs button { padding: 8px 10px; font-size: 11px; min-height: 36px; }
.city-search { background: #fbf8f1; border-color: #c4b9a7; border-radius: 3px; }
.city-search input { color: #3b5363; }
.city-search button { background: #e5ddcf; color: #344b5a; }
.city-search button:hover { background: #d8cbb8; color: #203c50; }
.atlas-filter-drawer > summary { background: #f9f5ec; border-color: #cbbfae; color: #2b4e65; border-radius: 3px; }
.atlas-filter-drawer > summary > em { color: #68747a; }
.world-workgrid { grid-template-columns: minmax(0, 1fr) 308px; gap: 18px; }
.world-workgrid > .right-column { display: flex; flex-direction: column; gap: 16px; }
.world-workgrid > .chart-primary { grid-column: 1; grid-row: 1; }
.world-workgrid > .right-column { grid-column: 2; grid-row: 1 / 3; }
.world-workgrid > .chart-secondary { grid-column: 1; grid-row: 2; }
.crew-grid + .crew-careers { margin-top: 24px; }
.world-chart { background: #17394f; border: 1px solid #475e6a; box-shadow: 0 5px 17px #1c354725, 0 0 0 3px #fff9; border-radius: 4px; }
.world-chart .panel-head { background: #15364c; color: #f9f0de; border-color: #5a6b702f; padding: 10px 14px; min-height: 48px; }
.world-chart .panel-head h2 { color: #fff2db; font-family: var(--display); font-size: 17px; font-weight: 400; letter-spacing: 1px; }
.world-chart .chart-scope { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.world-chart .chart-scope .map-world { display: inline-flex; align-items: center; gap: 6px; background: #23475c; color: #e4edf0; border-color: #607886; border-radius: 3px; min-height: 32px; padding: 5px 9px; font-size: 11px; white-space: nowrap; }
.world-chart .chart-scope .map-world::before { content: '←'; font-size: 15px; }
.world-chart .chart-scope .map-world:hover { background: #395b6e; color: #fff; border-color: #a3b5ba; }
.world-chart .chart-tools { color: #d0e0e5; gap: 5px; }
.world-chart .chart-tools .btn { background: #23475c; color: #e4edf0; border-color: #607886; min-height: 30px; border-radius: 3px; }
.world-chart .chart-tools .btn:not(:disabled):hover { background: #395b6e; color: #fff; border-color: #a3b5ba; }
.world-chart .map-toolbar { background: #1b3e54; border-color: #66818b55; padding: 8px 11px; }
.world-chart .map-toolbar .tabs button { background: transparent; border-color: transparent; color: #cadbe0; font-size: 11px; min-height: 32px; }
.world-chart .map-toolbar .tabs button.active { color: #fff3d8; background: #365669; border-color: #72848c; }
.world-chart .map-toolbar .tabs button:hover { color: #fff; background: #456579; border-color: #83959e; }
.world-chart .map-select { background: #23485d; color: #ecf2ef; border-color: #647b88; min-height: 32px; border-radius: 3px; }
.world-chart .map-bottom { background: #15364c; color: #bbd0d8; padding: 10px 13px; border-color: #607e8b44; font-size: 9px; }
.world-map-viewport { max-height: min(66svh, 730px); }
.world-pulse { margin: 0; background: #e7ece8; color: #334d59; border: 1px solid #becbc8; border-radius: 4px; }
.world-pulse-head { padding: 11px 13px; font-size: 11px; }
.world-pulse-head > small, .world-activity > summary { color: #4d666e; }
.world-activity { border-color: #c5d2cd; }
.world-events { padding-bottom: 9px; }
.trade-lead, .play-next { border-color: #c9bba7; border-left-color: #9b4b3c; border-radius: 4px; background: linear-gradient(100deg, #fffaf0, #ece5d9); }
.trade-lead h2, .play-next h2 { color: #2a4557; }
.trade-lead small, .play-next small { color: #6b6d65; }
.port-detail > .panel-body, .location-detail > .panel-body { padding: 0 18px 18px; }
.port-quick-action { display: none; }
.port-detail .port-panorama, .location-detail .port-panorama { width: calc(100% + 36px); max-width: none; margin: 0 -18px 17px; height: 146px; border-radius: 0; }
.port-detail h3, .location-detail h3 { color: #203e52; font-size: 27px; }
.port-detail .subtitle, .location-detail .subtitle { color: #66747a; font-size: 11px; }
.port-detail .description { font-size: 12px; line-height: 1.8; }
.port-detail .specs { margin-block: 14px; padding-block: 14px; border-color: #d9cebd; }
.port-detail .specs strong { font-size: 20px; }
.port-specialties { background: #ede7db; border-color: #d7cbb9; border-radius: 3px; }
.port-specialties > span { background: transparent; color: #405a69; }
.port-specialties small { color: #68757a; }
.port-detail .sailing-modes { margin-top: 12px; }
.port-detail .sailing-modes .btn { font-size: 11px; padding: 7px; }
.crew-inline { border-color: #d6cdbc; }
.city-office, .trade-tip, .cargo-meter, .crew-notice, .notice, .training-progress, .production-slip, .dispatch-status { background: #eee9dd; color: #4e6068; border-color: #d1c4b0; }
.atlas-horizon { background: #e4e7df; border-color: #bbc5bd; }
.atlas-horizon h2 { color: #304d57; }
.atlas-progress > div > span { color: #5e6d6e; }
.atlas-progress b { color: #2b4f60; }

/* The market reads like a dockside ledger; cargo and prices carry the weight. */
.market-overview { background: #f8f4eb; border-color: #cbbfae; border-radius: 4px; grid-template-columns: 194px minmax(0, 1fr) auto; }
.market-overview .market-panorama { height: 94px; border-radius: 3px 0 0 3px; }
.market-overview .trade-dashboard strong { color: #23475c; font-size: 28px; }
.market-overview .trade-dashboard small, .market-accounts > summary { color: #5e6c72; }
.market-accounts b { color: #315467; }
.iteration-market .commodity-market .panel-head { background: #efe8dc; padding: 11px 16px; }
.commodity-row { border-color: #e0d8ca; background: #fcf9f2; }
.commodity-row:nth-of-type(even) { background: #f5f0e6; }
.commodity-name h3 { color: #2a4658; font-size: 15px; }
.commodity-name small { color: #67747b; font-size: 11px; }
.commodity-name h3 b { background: #e4e8de; border: 1px solid #c6cebc; color: #4b6451; border-radius: 2px; padding: 1px 4px; }
.commodity-name h3 b.demand { background: #f2e3d4; border-color: #ddbea8; color: #8a4a32; }
.commodity-price strong { color: #244e69; font-size: 24px; }
.commodity-price strong i { color: #6d7e86; }
.commodity-price small { color: #67757e; }
.commodity-actions .btn:first-child:not(:disabled) { background: #244a60; border-color: #1f4155; color: #fff9eb; }
.commodity-actions .btn:first-child:not(:disabled):hover { background: #14394e; border-color: #14394e; }
.commodity-heading, .market-footnote { background: #f0eade; color: #647279; border-color: #d7cebf; }
.goods-mark { background: #eee7da; border: 1px solid #d6ccba; border-radius: 4px; }
.opportunities > button { background: transparent; border-color: #ddd4c5; }
.opportunities > button:hover { background: #ede6d8; }
.opportunities b, .opportunities strong { color: #315c6c; }
.opportunities span { color: #64747c; }
.cargo-arrivals { background: #f7eee0; border-left-color: #a45a40; }
.cargo-arrivals .panel-head { background: #eee1ce; }

/* Ship and character art have room to be objects, not small list icons. */
.iteration-shipyard .shipyard-header { background: #193c50eb; padding: 23px; }
.iteration-shipyard .shipyard-header > .ship-portrait { height: 205px; max-width: 310px; }
.iteration-shipyard .shipyard-header h2 { color: #fff2da; font-size: 30px; }
.iteration-shipyard .shipyard-header > div > small, .iteration-shipyard .shipyard-facts { color: #c8d9dc; }
.iteration-shipyard .shipyard-facts b { color: #fff2da; }
.iteration-shipyard .shipyard-next, .iteration-shipyard .refit-progress { background: #f9f4e9f5; }
.iteration-shipyard .shipyard-next h3 { color: #27495f; font-size: 25px; }
.ship-progression > summary { background: #e9e3d6; color: #405a69; }
.ship-progression .ship-tier-track { background: #f9f4e9; border-color: #d2c4ad; }
.ship-progression .ship-tier-track > div { background: #f6f0e4; border-color: #ded0ba; color: #516774; }
.ship-progression .ship-tier-track > div.current { background: #e8ded0; box-shadow: inset 0 -3px #984b3c; }
.ship-progression .ship-tier-track > div.owned { background: #e5e9df; }
.ship-progression .ship-tier-track strong { color: #2e4e62; font-size: 13px; }
.ship-progression .ship-tier-track span, .ship-progression .ship-tier-track em { color: #5c6d75; font-size: 11px; line-height: 1.6; }
.ship-visual { background: #1a3d52; border-color: #627783; }
.ship-visual .ship-name { color: #fff1d8; text-shadow: 0 2px 3px #102638; }
.module-card { border-top: 3px solid #a59880; }
.module-card.installed { border-color: #87988d; border-top-color: #315f70; background: #edf0e7; }
.module-top h3, .module-card .effect { color: #294e62; }
.iteration-dockyard .module-card .effect { font-size: 13px; }
.iteration-dockyard .module-card .desc { color: #667179; font-size: 11px; }
.tavern-scene { min-height: 205px; border-radius: 5px; border: 1px solid #776c56; box-shadow: 0 4px 13px #3a32251a; }
.tavern-scene h2 { color: #fff0d2; font-size: 32px; letter-spacing: 2px; text-shadow: 0 2px 5px #0008; }
.tavern-scene small { color: #f1e6cf; font-size: 11px; }
.tavern-candidates { gap: 17px; align-items: stretch; }
.recruit-card { display: flex; flex-direction: column; padding: 18px; border-top: 3px solid #8c9087; }
.recruit-card.rarity-border-seasoned { border-top-color: #52778a; }
.recruit-card.rarity-border-rare { border-top-color: #806390; }
.recruit-card.rarity-border-legendary { border-top-color: #a06a36; }
.recruit-top { align-items: center; gap: 17px; flex-wrap: nowrap; }
.recruit-top > .crew-portrait-frame { width: 43%; height: 207px; background: #122a3d; border: 1px solid #a69b84; border-radius: 3px; }
.recruit-top .apprentice-art { object-fit: contain; object-position: center bottom; background: #152e41; }
.recruit-top h3 { color: #274558; font-size: 27px; margin: 9px 0; }
.recruit-top p { color: #4f7183; font-size: 12px; line-height: 1.8; }
.recruit-top small { color: #68767c; font-size: 10px; }
.crew-rarity { border-radius: 2px; padding: 3px 6px; }
.recruit-aptitude { color: #647075; font-size: 12px; margin-top: 13px; }
.recruit-skill { color: #36576a; font-size: 12px; min-height: 38px; margin-block: 11px; }
.recruit-card .trait-line { border-color: #d8cdbb; padding-top: 10px; color: #657379; }
.recruit-card .trait-line b { background: #ebe3d5; border-color: #cdbfa9; color: #6e5140; border-radius: 2px; }
.recruit-fee { margin-top: auto; padding-top: 18px; }
.recruit-fee small { color: #526974; font-size: 12px; line-height: 1.7; }
.recruit-fee .btn { font-size: 12px; min-height: 39px; padding: 9px 12px; }
.crew-card .crew-main { background: #f0eadf; }
.crew-main > .crew-portrait-frame { width: 124px; height: 170px; border: 1px solid #a4a799; border-radius: 3px; }
.crew-main h3 { color: #24465d; font-size: 24px; }
.crew-card .crew-trait { background: #f5f0e6; border-color: #d9cebb; color: #62737c; }
.crew-card .crew-training, .crew-learning, .crew-development, .crew-development .ad-camp-card, .crew-mastery { background: #f7f2e8; border-color: #dbcebb; }
.crew-card .role { font-size: 13px; }
.crew-card .crew-training small, .crew-card .crew-training .btn { font-size: 12px; }
.crew-card .crew-trait small, .crew-card .crew-talent-line { font-size: 11px; }
.crew-learning { color: #35586c; }
.crew-ability { border-color: #d9cdb9; }
.crew-ability small, .crew-learning-next, .crew-learned small, .crew-talent-line { color: #5e737d; }
.crew-development > summary { color: #355a6d; font-size: 12px; }
.crew-mastery > summary { color: #355a6d; }
.crew-development .ad-camp-focus, .crew-development .ad-camp-tasks > div { background: #f0e8d9; border-color: #d0c1a9; }
.crew-development .ad-camp-focus select { background: #fffbf2; color: #355566; border-color: #c3b599; }
.crew-learning .crew-ability small, .crew-learning-next, .crew-learning-head { font-size: 11px; }
.crew-learning .crew-ability .btn { font-size: 11px; }
.crew-mastery button, .mastery-choices button { background: #fffaf0; border-color: #ccbea7; color: #385b6b; }
.crew-mastery button:not(:disabled):hover { background: #e5e5d9; color: #244a5c; }
.crew-skill-choices > button { background: #fffbf1; border-color: #c7baa2; color: #3d5b6a; }
.crew-skill-choices > button:hover:not(:disabled) { background: #e8e7dc; color: #244c60; border-color: #7a9290; }
.crew-careers { color: #294a5e; }
.career-post { background: #f3eee4; border-color: #ccbfaa; }
.career-post > header { border-color: #d8cbb7; }
.career-tracks > button { background: #fdf9ef; color: #3b5664; border-color: #cdbfa8; }
.career-tracks > button[aria-pressed='true'] { background: #e0e8e5; border-color: #63838a; color: #294f60; box-shadow: inset 3px 0 #3d6976; }
.career-candidates { border-color: #d8cbb7; }
.career-candidates > summary { color: #355a6c; }
.career-tracks > button:not(:disabled):hover, .career-candidate > button:not(:disabled):hover { background: #e5e8df; }

/* Adventure and book pages share the same readable frame. */
.play-start { background: #fbf7ed; border: 1px solid #cfc1ab; border-radius: 5px; }
.play-start h2 { color: #2a4b5e; }
.play-start p, .play-start small { color: #66747c; }
.ad-map-panel, .ad-controls { background: #f9f5eb; border-color: #c9bda9; border-radius: 5px; }
.ad-map-head { color: #425e6c; border-color: #d3c7b3; }
.ad-controls h3 { color: #2b4e63; }
.ad-rift-start .ad-rift-level { background: #f6f0e5; border-color: #d3c4ab; border-radius: 4px; }
.ad-rift-start .ad-rift-level p { color: #60747c; font-size: 12px; }
.ad-clues { background: #ede8db; color: #455e69; border-color: #d3c7b0; }
.ad-clues b { color: #2f5165; }
.salvage-stages button { background: #f4eee2; border-color: #c8bda7; color: #4f6878; border-radius: 3px; }
.salvage-stages button.active { background: #24495f; border-color: #24495f; color: #fff3de; }
body .salvage-stages button.active:not(:disabled):hover { background: #16384d; border-color: #16384d; color: #fff9ec; }
.legacy-summary, .ending-banner { background: linear-gradient(120deg, #dce4df, #f9f4e9); border-color: #bbc8bd; }
.ambition { background: #f6f0e4; border-color: #cdbfa8; }
.ambition-title p { color: #67757b; }
.legacy-summary h2, .cycle-action > strong, .research-title h2 { color: #2e5361; }
.legacy-summary p, .cycle-action p { color: #627579; }
.commission-board, .cycle-checklist button, .inheritance-grid > div, .resolution-goal { background: #f3ecdf; border-color: #d1c1a8; color: #4c6470; }
.research-card h3 { color: #294f64; }
.research-card > p, .codex-card p { color: #63757c; }
.log-entry { border-color: #dcd2c0; }
.log-entry p { color: #556b76; }
.commerce-panorama-strip, .painted-commerce-scene, .quay-scene { border-color: #a0a18e; border-radius: 5px; }
.commerce-building-portrait { background: linear-gradient(0deg, #e9e4d7, #f8f4eb); border-color: #d6cbb7; }
.painted-estate.built .commerce-building-portrait { background: linear-gradient(0deg, #dfe6db, #f3f3e8); }
.estate-card p, .public-work p { color: #5c717a; font-size: 12px; }
.estate-card .cost { font-size: 11px; }
.harbor-quick-work, .harbor-commission { background: #f6eee0; border-color: #ccbea6; }
.order-manifest .manifest-top, .manifest-payment { background: #eee6d8; color: #526b77; border-color: #d1c4af; }
.manifest-actions .btn { font-size: 12px; }
.public-work > p:first-of-type { font-size: 12px; }
.overlay { background: #071b2cce; backdrop-filter: blur(5px); }
.dialog { background: #f8f3e8; color: #344d5b; border: 1px solid #bfb29b; border-radius: 6px; box-shadow: 0 24px 100px #03111db3; }
.dialog h2 { color: #26475b; }
.dialog .narrative, .choice p { color: #5e737b; }
.dialog .eyebrow { color: #7b6650; }
.dialog .close { background: #f2eadb; border-color: #bbac92; color: #405864; }
.choice { background: #f0e8d9; border-color: #cdbda4; border-radius: 4px; }
.choice strong { color: #2d5267; }
.choice:hover:not(:disabled) { background: #e4d8c3; border-color: #9d8465; }
.origin-offer { display: flex; flex-direction: column; flex: 1; }
.origin-card { display: flex; flex-direction: column; background: #fbf8ef; border-color: #cbbca1; border-radius: 4px; }
.origin-offer button { margin-top: auto; }
.toast { left: calc(50% + 98px); background: #193d51; border-color: #a0aca9; color: #fff4de; border-radius: 4px; }

@media (min-width: 1600px) {
  main { padding-inline: 34px; }
  .topbar { padding-inline: 34px; }
  .world-workgrid { grid-template-columns: minmax(0, 1fr) 326px; gap: 22px; }
  .wallet { gap: 16px; }
}
@media (max-height: 850px) and (min-width: 1061px) {
  .sidebar { padding-top: 18px; }
  .brand { margin-bottom: 20px; }
  .nav button { min-height: 53px; }
  .sidebar-vessel { height: 70px; }
}
@media (max-width: 1250px) and (min-width: 1061px) {
  :root { --rail: 178px; }
  .sidebar { padding-inline: 11px; }
  .brand { gap: 6px; }
  .brand strong { font-size: 20px; }
  .brand > .icon { width: 36px; }
  .topbar { padding-inline: 20px; gap: 12px; }
  .resource { min-width: 75px; padding-inline: 7px; }
  .wallet { gap: 6px; }
  .world-workgrid { grid-template-columns: minmax(0, 1fr) 286px; }
  .recruit-top { gap: 12px; }
}
@media (max-width: 1060px) and (min-width: 761px) {
  :root { --rail: 82px; }
  .sidebar { padding: 20px 8px 12px; }
  .brand { margin-bottom: 25px; }
  .nav button { padding: 8px 2px; min-height: 69px; gap: 5px; }
  .nav button .nav-label { font-size: 10px; letter-spacing: 1px; }
  .nav button .icon { width: 32px; height: 32px; }
  .topbar { padding-inline: 18px; gap: 11px; }
  .captain-status { min-width: 112px; }
  .wallet { gap: 6px; }
  .resource { min-width: 74px; padding: 6px; gap: 6px; }
  .resource .icon { width: 25px; height: 25px; }
  .resource strong { font-size: 19px; }
  .world-workgrid { grid-template-columns: minmax(0, 1fr) 274px; }
  .world-chart .panel-head h2 { font-size: 15px; }
  .recruit-top { gap: 12px; }
  .recruit-top > .crew-portrait-frame { height: 181px; }
}
@media (max-width: 900px) {
  .world-workgrid { grid-template-columns: minmax(0, 1fr); }
  .world-workgrid > .chart-primary, .world-workgrid > .right-column, .world-workgrid > .chart-secondary { grid-column: auto; grid-row: auto; }
  .world-workgrid > .right-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iteration-market .market-workgrid { grid-template-columns: minmax(0, 1fr); }
  .market-overview { grid-template-columns: 140px minmax(0, 1fr) auto; }
}
@media (max-width: 760px) {
  :root { --rail: 0px; --masthead: 100px; }
  main { padding: 0 13px 25px; }
  .topbar { height: 100px; min-height: 100px; padding: 7px 13px 8px; grid-template-rows: 35px 43px; gap: 6px 10px; background: #102638; }
  .captain-status { gap: 8px; }
  .captain-status strong { font-size: 16px; }
  .captain-status small { font-size: 9px; max-width: 160px; }
  .wallet { gap: 5px; }
  .resource { min-width: 0; padding: 5px 6px; gap: 6px; border-radius: 3px; }
  .resource .icon { width: 25px; height: 27px; }
  .resource strong { font-size: 18px; }
  .resource small { font-size: 8px; letter-spacing: 0; }
  .top-actions { gap: 7px; }
  .sea-time .time { font-size: 10px; }
  .sea-time small { font-size: 8px; }
  .topbar .icon-button { min-width: 29px; min-height: 29px; }
  .sidebar { padding: 3px 5px max(4px, env(safe-area-inset-bottom)); height: 70px; background: #102638; border: 0; border-top: 1px solid #9aa8a64d; box-shadow: 0 -4px 16px #1026381a; }
  .nav { gap: 2px; }
  .nav button { min-height: 0; padding: 5px 1px; gap: 3px; border: 1px solid transparent; border-radius: 3px; }
  .nav button .icon { width: 30px; height: 30px; }
  .nav button .nav-label { font-size: 10px; letter-spacing: 0; }
  .nav button.active { background: #325064; box-shadow: inset 0 2px #dfa18b; border-color: #9dabad40; }
  .content { padding-bottom: 80px; }
  .page-tabs { min-height: 47px; margin-bottom: 16px; gap: 5px; background: var(--paper); }
  .page-tabs button { font-size: 11px; padding: 10px 1px 9px; letter-spacing: 0; }
  .page-head { margin-bottom: 15px; gap: 7px; }
  .page-head h1 { font-size: 25px; letter-spacing: .8px; }
  .page-head p { font-size: 11px; margin-top: 4px; }
  .page-head .pill { padding: 5px 6px; font-size: 9px; }
  .page-head > div:first-child { min-width: min(100%, 185px); flex: 1 1 185px; }
  .panel-head { padding: 11px 13px; min-height: 46px; }
  .panel-head h2, .panel-head h3 { font-size: 14px; }
  .panel-body { padding: 15px; }
  .btn { min-height: 39px; padding: 9px 11px; }
  main[data-page='chart'] .page-head { margin-bottom: 10px; }
  main[data-page='chart'] .page-head h1 { font-size: 25px; }
  .atlas-filter-drawer > summary { min-height: 37px; padding: 6px 10px; font-size: 11px; }
  .atlas-filter-drawer > summary > em { font-size: 10px; }
  .atlas-filter-options { padding: 10px; background: #f6f0e5; border-color: #d0c0a7; }
  .atlas-filter-options .continent-tabs { gap: 5px; }
  .continent-tabs button { min-height: 35px; font-size: 10px; }
  .atlas-navigation { margin-bottom: 10px; }
  .world-workgrid { gap: 16px; }
  .world-workgrid > .right-column { display: flex; flex-direction: column; gap: 15px; }
  .world-chart .panel-head { min-height: 43px; padding: 7px 10px; }
  .world-chart .panel-head h2 { font-size: 14px; letter-spacing: 0; gap: 5px; }
  .world-chart .panel-head h2 .icon { width: 23px; height: 23px; }
  .world-chart .chart-tools { gap: 4px; font-size: 9px; }
  .world-chart .chart-tools .btn { min-height: 31px; min-width: 27px; padding: 4px 6px; font-size: 10px; }
  .world-chart .chart-tools .map-fit { min-width: 57px; font-size: 9px; }
  .world-chart .map-toolbar { padding: 6px 8px; gap: 5px; }
  .world-chart .map-toolbar .tabs button { min-height: 31px; padding: 5px 6px; font-size: 10px; }
  .world-chart .map-select { min-height: 31px; }
  .world-chart .map-bottom { padding: 8px 9px; font-size: 8px; }
  .world-pulse-head { padding: 10px 11px; font-size: 10px; }
  .world-pulse-head > span:not(.living-dot) { font-size: 10px; }
  .world-activity > summary { font-size: 10px; padding: 8px 11px; }
  .port-detail .port-panorama, .location-detail .port-panorama { height: 156px; }
  .port-quick-action { display: flex; gap: 12px; align-items: center; padding: 15px; border-bottom: 1px solid #d2c6b2; }
  .port-quick-action > div { flex: 1; min-width: 0; }
  .port-quick-action h3 { font-size: 23px; margin: 0 0 6px; }
  .port-quick-action small { display: block; font-size: 10px; line-height: 1.7; color: #60727b; }
  .port-quick-action > .btn { flex: 0 0 auto; max-width: 45%; font-size: 12px; min-height: 42px; padding-inline: 12px; }
  .port-detail .panel-body > .btn.primary { display: none; }
  .port-detail .panel-body > .port-panorama { height: 113px; }
  .trade-lead { padding: 11px 13px; margin-bottom: 12px; }
  .trade-lead h2 { font-size: 14px; }
  .trade-lead > .actions .btn { min-height: 37px; }
  .market-overview { grid-template-columns: 80px minmax(0, 1fr) 63px; }
  .market-overview .market-panorama { height: 78px; }
  .market-overview .trade-dashboard > div { padding: 8px; }
  .market-overview .trade-dashboard strong { font-size: 23px; }
  .market-overview .trade-dashboard small { font-size: 9px; }
  .iteration-market .commodity-row { padding: 12px; gap: 7px 8px; min-height: 111px; }
  .iteration-market .commodity-name h3 { font-size: 14px; }
  .iteration-market .commodity-name small { font-size: 10px; }
  .iteration-market .goods-mark { width: 43px; height: 43px; }
  .iteration-market .commodity-price strong { font-size: 21px; }
  .iteration-market .commodity-actions { gap: 7px; }
  .iteration-market .commodity-actions .btn { min-height: 37px; min-width: 93px; font-size: 12px; }
  .iteration-market .commodity-market .panel-head { padding: 9px 12px; }
  .iteration-market .commodity-market .panel-head h2 { font-size: 14px; }
  .iteration-shipyard .shipyard-header { padding: 16px; min-height: 158px; }
  .iteration-shipyard .shipyard-header > .ship-portrait { height: 141px; max-width: 195px; }
  .iteration-shipyard .shipyard-header h2 { font-size: 25px; }
  .iteration-shipyard .shipyard-next, .iteration-shipyard .refit-progress { padding: 14px 16px; gap: 8px; }
  .iteration-shipyard .shipyard-next h3 { font-size: 22px; }
  .iteration-dockyard .section-intro { margin-top: 11px; }
  .tavern-scene { min-height: 164px; padding: 19px; }
  .tavern-scene h2 { font-size: 28px; }
  .tavern-candidates { gap: 13px; }
  .recruit-card { padding: 16px; }
  .recruit-top { gap: 20px; }
  .recruit-top > .crew-portrait-frame { width: 42%; height: 201px; }
  .recruit-top h3 { font-size: 27px; }
  .crew-main > .crew-portrait-frame { width: 107px; height: 146px; }
  .crew-card .crew-main img:not(.icon) { width: 100%; height: 100%; }
  .career-post { padding: 12px; }
  .origin-card { display: grid; grid-template-columns: 90px minmax(0, 1fr); }
  .origin-offer button { margin-top: 9px; }
  .toast { left: 50%; bottom: 85px; }
}
@media (max-width: 370px) {
  main { padding-inline: 10px; }
  .topbar { padding-inline: 10px; }
  .resource { padding-inline: 4px; gap: 3px; }
  .resource .icon { width: 23px; }
  .resource strong { font-size: 16px; }
  .top-actions { gap: 5px; }
  .page-tabs button { font-size: 10px; }
  .page-head h1 { font-size: 23px; }
  .world-chart .panel-head h2 { font-size: 12px; }
  .world-chart .panel-head h2 .icon { width: 19px; height: 19px; }
  .world-chart .chart-tools { gap: 3px; }
  .world-chart .chart-tools .btn { padding-inline: 4px; min-width: 25px; }
  .world-chart .chart-tools .map-fit { min-width: 51px; font-size: 8px; }
  .world-chart .map-toolbar .tabs button { font-size: 9px; padding-inline: 5px; }
  .market-overview { grid-template-columns: 65px minmax(0, 1fr) 55px; }
  .market-overview .trade-dashboard strong { font-size: 21px; }
  .market-overview .trade-dashboard small { font-size: 8px; }
  .iteration-market .commodity-name h3 { font-size: 13px; }
  .recruit-top { gap: 15px; }
  .recruit-top > .crew-portrait-frame { height: 180px; }
  .iteration-shipyard .shipyard-header { padding-block: 13px; }
  .iteration-shipyard .shipyard-header > .ship-portrait { height: 125px; }
  .iteration-shipyard .shipyard-next { padding-block: 11px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.sea-time [data-world-clock] { display: inline-block; min-width: 8ch; font-variant-numeric: tabular-nums; }