.bridge {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  background: #16262d; border: 1px solid #36505a; border-radius: 11px;
  padding: 8px 11px; margin-bottom: 12px; min-width: 0;
}
.bridge-tabs, .bridge-controls, .bridge-reserves { display: flex; align-items: center; gap: 6px; }
.bridge-tabs .button { gap: 9px; padding-inline: 12px; }
.bridge-tabs .button[aria-pressed="true"] { background: #264344; border-color: #6aa497; color: #c4ebcc; }
.bridge-controls .button { min-height: 36px; }
.bridge-reserves { justify-content: center; gap: clamp(18px, 5vw, 76px); }
.bridge-reserves > div { display: grid; gap: 1px; }
.bridge-reserves small { font-size: 11px; color: var(--muted); }
.bridge-reserves strong { color: #d6eac2; font: 700 17px/1.28 var(--mono); white-space: nowrap; }
.bridge-reserves [data-warning] { color: var(--amber); }
.world-alert { margin: 0 0 10px; padding: 9px 12px; border-left: 3px solid var(--amber); background: #372c23; color: #ffe0a7; font-size: 13px; }
.ship-alert:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.task-guide { margin: 8px 0; padding: 8px 10px; border-left: 2px solid var(--accent, #6ec9c7); background: #1b3037; }
.task-guide p { margin-block: 3px; }
.task-guide .actions { margin-top: 6px; }
.navigation-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 365px); gap: 12px; align-items: start; }
.map-panel { overflow: hidden; min-width: 0; border: 1px solid #415d67; border-radius: 12px; background: #152730; }
.map-head, .map-footer, .map-layers { padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.map-head h2 { font-size: 16px; }
.map-head p, .map-footer p { color: #adced2; font-size: 11px; line-height: 1.5; }
.map-head p { margin-top: 3px; }
.map-viewport { position: relative; background: #102737; }
#japan-map { display: block; width: 100%; height: clamp(400px, calc(100vh - 440px), 760px); touch-action: none; cursor: crosshair; }
#japan-map:focus-visible { outline-offset: -3px; }
.map-zoom { display: flex; gap: 3px; position: absolute; right: 10px; top: 10px; padding: 4px; background: #102431e8; border-radius: 8px; }
.map-zoom .button { background: #28404b; min-width: 35px; min-height: 35px; font: 17px var(--mono); }
.map-scale {
  position: absolute; bottom: 14px; right: 14px; color: #bfdae1; font: 10px var(--mono);
  text-shadow: 0 1px 3px #0e2128; pointer-events: none;
}
.map-scale::after { content: ''; display: block; width: clamp(30px, var(--scale-length, 90px), 180px); border-bottom: 1px solid #a7c6cd; }
.map-footer { border-block: 1px solid #304952; align-items: flex-start; flex-wrap: wrap; }
.map-footer details { flex: auto; }
.map-footer summary { color: #bbddde; cursor: pointer; font-size: 12px; }
#map-coordinates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 8px; }
#map-coordinates label { color: #bbddde; font: 12px var(--mono); }
#map-coordinates input { width: 84px; padding: 6px; border-radius: 4px; border: 1px solid #46636c; background: #172c37; color: #f2f7f4; }
.map-layers { justify-content: start; flex-wrap: wrap; gap: 10px 18px; }
.map-layers label { display: inline-flex; align-items: center; gap: 5px; color: #c6d9dc; font-size: 12px; }
.map-layers input { margin: 0; accent-color: #74b6a2; }
.map-layers select { color: #dbe9e5; background: #1d343e; border: 1px solid #3b5864; border-radius: 5px; padding: 4px 8px; }
.map-horizon { margin-left: auto; }
.map-geography text { fill: #e6ecdb; font: 600 12px sans-serif; text-anchor: middle; paint-order: stroke; stroke: #28414a; stroke-width: 3px; }
.map-geography .sea-label { fill: #94b6bd; font-size: 13px; letter-spacing: .2em; }
.map-symbol { transform: scale(var(--world-per-pixel, 1)); transform-origin: 0 0; }
.map-north { position: absolute; top: 14px; left: 14px; color: #c7dddc; font: 12px var(--mono); text-shadow: 0 1px 3px #0e2128; pointer-events: none; }
.terrain-layer { pointer-events: none; }
.terrain-key { display: flex; flex-wrap: wrap; gap: 6px 11px; width: 100%; color: #d3e2df; font-size: 11px; }
.terrain-key span { display: inline-flex; align-items: center; gap: 5px; }
.terrain-key i { width: 13px; height: 8px; border-radius: 2px; }
.terrain-deep { background: #132a43; border: 1px solid #4a667b; }
.terrain-shelf { background: #255e71; }
.terrain-flood { background: #52858a; }
.terrain-land { background: #849979; }
.terrain-outline { border-top: 1px dashed #d0e2bd; }
.map-provenance { width: 100%; font-size: 10px; }
.map-target, .map-site { cursor: crosshair; }
.map-storm .storm-field, .storm-contour, .storm-uncertainty, .map-protected, .beacon-range,
.map-short-route, .map-safe-route, .map-live-route { vector-effect: non-scaling-stroke; }
.map-storm, .map-flight, .map-ship, .map-candidate { pointer-events: none; }
.storm-field { fill: url(#storm-core); stroke: #dba0c1; stroke-width: 2; stroke-dasharray: 8 6; }
.storm-contour, .storm-uncertainty { fill: none; stroke: #da9cb9; stroke-width: 1.5; stroke-opacity: .72; }
.storm-uncertainty { stroke-dasharray: 6 6; }
.storm-mark { stroke: #ffd3e0; stroke-width: 1.7; fill: none; stroke-linecap: round; }
.storm-label, .map-site text, .map-target text, .map-candidate text, .map-ship text {
  font: 700 11px sans-serif; fill: #eaf8f1; paint-order: stroke; stroke: #112936; stroke-width: 2.6px; stroke-linejoin: round;
}
.storm-label { fill: #ffd3e0; }
.map-protected { stroke: #ffdca3; stroke-width: 2; stroke-dasharray: 5 3; fill: url(#protected-pattern); pointer-events: none; }
.map-short-route, .map-safe-route, .map-live-route { fill: none; stroke-linecap: round; stroke-width: 3; pointer-events: none; }
.map-short-route { stroke: #ffcf8a; stroke-dasharray: 9 9; stroke-width: 2.2; }
.map-safe-route { stroke: #bcebb7; stroke-width: 2.4; }
.map-live-route { stroke: #80dfff; stroke-width: 1.6; }
.map-site circle { fill: #173a43; stroke: #9ee3d3; stroke-width: 1.6; }
.map-site path { fill: #b2efdc; }
.map-site.protected circle { stroke: #fed798; }
.map-site.protected path { fill: #fed798; }
.map-site.selected circle { fill: #65a78e; stroke: #e8f3cc; }
.map-target rect { fill: #4b3b61; stroke: #e4c7f4; stroke-width: 1.6; }
.map-target path { fill: none; stroke: #f0dafa; stroke-width: 2.5; stroke-linecap: round; }
.map-target.active rect { fill: #345a4d; stroke: #c0f0ac; }
.map-flight circle { fill: #f6e793; stroke: #667751; stroke-width: 2; }
.map-ship-ring { fill: #28525f9a; stroke: #90dcd9; stroke-width: 2; }
.map-ship-wing { fill: #cdeee3; stroke: #183f4e; stroke-width: 2.5; }
.map-ship-dome { fill: #3c7491; stroke: #2b617b; stroke-width: 1; }
.map-ship text { fill: #c2f2e3; font-family: var(--mono); }
.map-candidate circle, .map-candidate path { fill: none; stroke: #e8f0af; stroke-width: 1.6; }
.map-candidate text { fill: #eff6cc; }
.navigation-side { display: grid; gap: 10px; min-width: 0; }
.nav-mission h3 { font-size: 17px; color: #edf2e9; margin-bottom: 5px; }
.nav-mission p, .nav-plan p, .nav-ground p { font-size: 12px; color: #c3d5d5; line-height: 1.6; }
.nav-mission small { display: block; color: #96c8be; font-size: 11px; margin-top: 5px; }
.nav-mission .button { margin-top: 7px; }
.nav-mission .harm-counter { margin-top: 7px; color: #f9dbac; }
.route-coordinate { margin: 5px 0 8px; font-family: var(--mono); }
.route-options { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.route-option { background: #1a3038; border: 1px solid #3e5962; border-radius: 7px; padding: 8px; min-width: 0; }
.route-option h3 { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.route-stroke { width: 16px; border-top: 2px solid #bcebb7; }
.route-stroke.short { border-top: 2px dashed #ffcf8a; }
.route-option dl, .site-card dl { margin: 6px 0; }
.route-option dl div, .site-card dl div { display: flex; justify-content: space-between; gap: 4px; padding: 3px 0; font-size: 11px; }
.route-option dt, .site-card dt { color: #a8c0c4; }
.route-option dd, .site-card dd { margin: 0; text-align: right; color: #ecf4ee; font-variant-numeric: tabular-nums; }
.route-option .button { width: 100%; }
.route-notes { margin-top: 9px; }
.route-notes p { font-size: 11px; }
.route-notes p.route-warning, .nav-feedback[data-error] { color: #ffc694; }
.nav-feedback { margin-top: 8px; color: #b6e5b9; }
.nav-stock strong { display: block; color: #c9ead7; margin-top: 2px; }
.nav-ground-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.nav-ground-actions .button { white-space: normal; }
.ground-target, .nav-ethics { border-top: 1px solid #3b5359; margin-top: 9px; padding-top: 8px; }
.ground-target > div:first-child { display: flex; justify-content: space-between; gap: 4px; }
.ground-target small { color: #bce0c7; }
.ground-target progress { width: 100%; accent-color: #a3d198; }
.ground-target .actions { margin-top: 3px; flex-wrap: wrap; }
.nav-ethics > strong { color: #f7d39b; }
.nav-logistics { grid-column: 1 / -1; }
.site-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 7px; }
.site-card { display: grid; align-content: start; background: #1c3439; border: 1px solid #39565e; border-radius: 7px; padding: 8px; }
.site-card.selected { border-color: #b1dcc6; }
.site-card header { display: flex; justify-content: space-between; gap: 7px; }
.site-card h3 { margin: 0 0 3px; font-size: 13px; }
.site-card p { font-size: 11px; color: #bdced2; }
.site-allocation { display: flex; align-items: center; gap: 5px; min-height: 34px; border-top: 1px solid #3b545b; padding-top: 5px; }
.site-allocation > span { font-size: 11px; color: #bcddd3; margin-right: auto; }
.site-allocation output { min-width: 29px; text-align: center; white-space: nowrap; }
.site-allocation .button { min-width: 34px; padding: 4px; }
.factory-brief-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.story-entry p + p { margin-top: 4px; }
@media (max-width: 920px) {
  .navigation-work { grid-template-columns: minmax(0, 1fr); }
  .navigation-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nav-ground { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .bridge { flex-wrap: wrap; gap: 7px; }
  .bridge-reserves { gap: 0; order: 3; width: 100%; justify-content: space-around; border-top: 1px solid #394d57; padding-top: 5px; }
  .bridge-reserves strong { font-size: 15px; }
  .bridge-tabs .button { padding-inline: 8px; gap: 5px; }
  .navigation-side { grid-template-columns: minmax(0, 1fr); }
  .map-head, .map-footer, .map-layers { padding-inline: 9px; }
  .map-zoom { right: 5px; top: 5px; padding: 2px; }
  .map-zoom .button { min-width: 30px; width: 30px; min-height: 28px; }
  #japan-map { height: clamp(330px, 46vh, 460px); }
  .map-north { top: 8px; left: 9px; }
  .map-horizon { margin-left: 0; }
  .map-scale { bottom: 7px; right: 7px; }
}

.map-scale { min-width: 22px; text-align: right; border-bottom: 1px solid #a7c6cd; }
.map-scale::after { display: none; }
.beacon-range { fill: #d8caff24; stroke: #eddaff; stroke-width: 4px; stroke-dasharray: 12 8; pointer-events: none; }
.map-beacon .beacon-range-label { fill: #f6e8ff; font-size: 55px; paint-order: stroke; stroke: #16142d; stroke-width: 7px; pointer-events: none; }
.nav-beacon { margin-top: 8px; }
.site-card .site-harm { margin-top: 5px; color: #f7d39b; }
.region-result { display: grid; gap: 8px; }
.region-result > div { display: flex; justify-content: space-between; gap: 8px; }
.route-option p.route-resource-warning { color: #ffc694; font-size: 11px; margin: 5px 0; }

.nav-automation { margin-top: 10px; padding-top: 9px; border-top: 1px solid #3b5359; }
.nav-automation h3 { font-size: 13px; }
.nav-automation > p { margin: 3px 0; }
.nav-auto-budget { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0; font-size: 11px; color: #c3d5d5; }
.nav-auto-budget input { width: 4em; padding: 4px; color: #eef4ef; background: #19323b; border: 1px solid #486571; border-radius: 4px; }
.nav-automation .actions { flex-wrap: wrap; }
.nav-need { display: grid; gap: 3px; }
.nav-need small { color: #a8c9c9; font-size: 10px; }
.ground-manifest { margin: 5px 0; }
.ground-manifest div, .nav-flight-cargo { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ground-manifest div { font-size: 11px; padding-block: 3px; border-block-end: 1px solid #2e4f58; }
.ground-manifest dt { color: #d4e8db; }
.ground-manifest dd { margin: 0; white-space: nowrap; color: #acd4c7; }
.nav-flight-cargo { font-size: 11px; color: #d8ccaa; }
.factory-stock { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-block: 8px; font-size: 11px; }
.factory-stock span { color: #bdcdd1; }
.factory-stock b { color: #deeee3; }
.factory-guide { margin-block-start: 8px; font-size: 12px; color: #c3d5d5; }
.factory-guide summary { color: #afd9cc; cursor: pointer; }
.factory-guide dl { margin: 5px 0; }
.factory-guide dt { padding-block-start: 4px; font-weight: 700; }
.factory-guide dd { margin: 0 0 5px; }

.palette-advanced { margin: 7px 0; }
.palette-advanced summary { margin-bottom: 6px; color: #afd9cc; cursor: pointer; font-size: 12px; }

.direct-speeds { display: flex; gap: 3px; }
.direct-speeds .button { min-width: 34px; padding-inline: 6px; }
.direct-speeds [aria-pressed="true"] { border-color: #79d8c3; background: #245357; color: #effff7; }
#nav-transit:not(:empty) { border-bottom: 1px solid #44616b; padding-block: 5px 10px; }
#nav-transit-status { color: var(--mint, #a4e6d1); margin: 5px 0; }
#nav-transit[data-transit="unload_blocked"] #nav-transit-status,
#nav-transit[data-transit="power_short"] #nav-transit-status { color: #ffda9b; }
.nav-transit-detail { margin: 4px 0; }
.map-travelled { fill: none; stroke: #5594ac; stroke-width: 2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; pointer-events: none; }
#forecast-time { color: #e9cfe5; }
@media (max-width: 560px) {
  .bridge-controls { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .direct-speeds .button { min-width: 32px; padding-inline: 5px; }
}

.navigation-work[data-mobile-map] {
  display: flex;
  flex: 1 1 0;
  min-block-size: 0;
  align-items: stretch;
}
.navigation-work[data-mobile-map] > .navigation-side { display: none; }
[data-mobile-map] .map-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1 1 auto;
  min-block-size: 0;
}
[data-mobile-map] .map-head { padding: 5px 8px 5px 10px; }
[data-mobile-map] .map-head h2 { font-size: 14px; }
[data-mobile-map] .map-head p { margin-block-start: 1px; }
[data-mobile-map] .map-head .button { min-block-size: 44px; padding-inline: 8px; flex: none; }
[data-mobile-map] .map-viewport { min-block-size: 0; }
[data-mobile-map] #japan-map { height: 100%; }
[data-mobile-map] .map-zoom { padding: 2px; gap: 2px; }
[data-mobile-map] .map-zoom .button { min-width: 44px; min-height: 44px; }

.mobile-map-bar {
  padding: 6px 5px 5px;
  background: #162a35;
  border-block-start: 1px solid #38515c;
}
.mobile-map-status {
  margin: 0 4px 4px;
  font-size: 11px;
  line-height: 16px;
  color: #c5dbd7;
}
.mobile-map-bar[data-transit="unload_blocked"] .mobile-map-status,
.mobile-map-bar[data-transit="power_short"] .mobile-map-status { color: #ffddab; }
.mobile-map-actions, .mobile-nav-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.mobile-map-actions .button, .mobile-nav-tabs .button {
  min-inline-size: 0;
  min-block-size: 44px;
  justify-content: center;
  padding-inline: 3px;
  white-space: nowrap;
  font-size: 12px;
}

#mobile-nav-dialog[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: min(640px, 100%);
  max-width: none;
  max-height: min(76dvh, 660px);
  padding: 10px 9px max(9px, env(safe-area-inset-bottom));
  overflow: hidden;
  border: 1px solid #527580;
  border-radius: 16px 16px 0 0;
  background: #132932;
  box-shadow: 0 -12px 40px #07111780;
}
#mobile-nav-dialog::backdrop { background: #07131b80; }
#mobile-nav-dialog .dialog-head { flex: none; margin-block-end: 4px; padding-inline-start: 4px; }
#mobile-nav-dialog .dialog-head .button { min-block-size: 44px; }
.mobile-nav-tabs { flex: none; margin-block-end: 8px; }
.mobile-nav-tabs .button[aria-pressed="true"] {
  background: #295151;
  border-color: #8cc4ac;
  color: #e5fae9;
}
.mobile-nav-scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}
.mobile-nav-launch {
  flex: none;
  margin-block-start: 5px;
  padding: 6px 4px 0;
  border-block-start: 1px solid #466672;
  background: #132932;
}
.mobile-nav-launch p {
  color: #c5dbd7;
  margin-block: 0 5px;
  line-height: 1.35;
  font-size: 11px;
}
.mobile-nav-launch p.route-resource-warning { color: #ffcf9a; }
.mobile-map-departures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mobile-map-departures > div { min-inline-size: 0; }
.mobile-map-departures p { margin-block-end: 3px; text-align: center; }
.mobile-map-departures .button { width: 100%; min-block-size: 44px; justify-content: center; }
.mobile-nav-content:not([hidden]) { display: grid; gap: 6px; }
.mobile-nav-content .panel { min-inline-size: 0; margin: 0; padding: 8px; }
.mobile-nav-content .button { min-block-size: 44px; }
.mobile-nav-content .map-layers { gap: 3px 10px; justify-content: start; }
.mobile-nav-content .map-layers label, .mobile-nav-content .map-footer summary {
  min-block-size: 44px;
  align-content: center;
}
.mobile-nav-content .map-layers select { min-block-size: 44px; font-size: 16px; }
.mobile-nav-content .map-layers input { width: 18px; height: 18px; }
.mobile-nav-content #map-coordinates input, .mobile-nav-content .nav-auto-budget input { font-size: 16px; }
.mobile-nav-content .map-footer { display: grid; }
.mobile-nav-content .map-horizon { margin-inline-start: 0; }
.mobile-nav-content .nav-plan:has(.route-options),
.mobile-nav-content #nav-plans:has(.route-options) { display: flex; flex-direction: column; }
.mobile-nav-content .nav-plan:has(.route-options) #nav-transit,
.mobile-nav-content #nav-plans .route-active { order: 1; }
.mobile-nav-content .nav-automation,
.mobile-nav-content #nav-plans .route-notes { order: 2; }
.mobile-nav-content .route-option {
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.mobile-nav-content .site-list { grid-template-columns: minmax(0, 1fr); }
.mobile-nav-content .site-allocation .button { min-inline-size: 44px; }
.mobile-nav-content .ground-manifest dd { white-space: normal; text-align: end; }
.mobile-nav-content #nav-feedback { margin: 0; padding: 6px 8px; }
@media (max-height: 520px) {
  #mobile-nav-dialog[open] { max-height: 88dvh; }
}
@media (orientation: landscape) and (max-height: 520px) {
  [data-mobile-map] .map-panel {
    grid-template-columns: minmax(0, 1fr) minmax(138px, 20%);
    grid-template-rows: auto minmax(0, 1fr);
  }
  [data-mobile-map] .map-viewport { grid-area: 1 / 1 / -1 / 2; }
  [data-mobile-map] .map-head { grid-area: 1 / 2; align-items: start; flex-wrap: wrap; gap: 3px; }
  [data-mobile-map] .map-head .button { width: 100%; justify-content: center; }
  [data-mobile-map] .map-head > div { min-inline-size: 0; }
  [data-mobile-map] .map-head p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-map-bar {
    grid-area: 2 / 2;
    padding: 4px;
  }
  .mobile-map-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mobile-nav-dialog[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(740px, 100%);
    max-height: 94dvh;
    gap: 0 6px;
  }
  #mobile-nav-dialog .dialog-head { display: contents; }
  #mobile-nav-dialog .dialog-head h2 { position: absolute; clip-path: inset(50%); }
  #mobile-nav-dialog .dialog-head .button { grid-area: 1 / 2; align-self: start; }
  #mobile-nav-dialog .mobile-nav-tabs { grid-area: 1 / 1; margin-block-end: 6px; }
  #mobile-nav-dialog .mobile-nav-scroll { grid-area: 2 / 1 / 3 / -1; }
  #mobile-nav-dialog .mobile-nav-launch { grid-area: 3 / 1 / -1 / -1; }
  .mobile-nav-content .route-coordinate { margin-block: 3px; }
  .mobile-nav-content .route-coordinate br { display: none; }
  .mobile-nav-content .route-coordinate small { margin-inline-start: 8px; }
}