html, body { margin: 0; height: 100%; background: #05070c; overflow: hidden; }
/* T531: a sans-serif page (every panel sets its own font; SimPlane's chart draws its labels in the page's) */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* Square corners everywhere, as across 1kx (.agents/AGENTS.md, "Strict Square Corners"; Casey, 2026-10-05). */
canvas { display: block; touch-action: none; }   /* T392: a drag on the sea turns the harbour's camera, not the page */
.hud {
  position: fixed; left: 10px; top: 10px; color: #cfe3ff; background: rgba(5,10,20,0.55);
  font: 12px/1.5 "SF Mono", Menlo, monospace; padding: 8px 10px; border-radius: 0;
  pointer-events: none; white-space: pre;
}
.keys {
  width: 100%; color: #cfe3ff; border-collapse: collapse;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  border-radius: 0;
}
.keys[hidden] { display: none; }
.keys tr { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.keys th, .keys td { padding: 5px 8px 5px 0; vertical-align: middle; border-radius: 0; }
.keys th {
  color: #00d2ff; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  text-align: left; padding-right: 14px; white-space: nowrap;
}
.keys td:nth-child(2) { white-space: nowrap; padding-right: 12px; }
.keys td:nth-child(3) { color: #9fb6d8; font-size: 12px; }
.keys kbd {
  display: inline-block; min-width: 1.5em; padding: 1px 5px; margin-right: 3px; border-radius: 0; text-align: center;
  font: 700 11.5px/1.35 "SF Mono", Menlo, monospace; color: #fff; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.35);
}
.keys tr.on kbd { background: #2f6fd0; border-color: #a9cbff; color: #fff; }   /* lit while the key is down */
.keys.held tr.helm { opacity: 0.4; }   /* while she is held, the engine and the wheel do not answer */
.hold {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); color: #e8f1ff; background: rgba(5,10,20,0.7);
  font: 14px/1.4 "SF Mono", Menlo, monospace; padding: 10px 16px; border-radius: 0; pointer-events: none;
}
.hold[hidden] { display: none; }
.hold small { display: block; color: #9fb6d8; font-size: 11px; margin-top: 4px; }
/* The loading splash (T390): SimPlane's (T205) with a boat. She sails along the track to a share of the load (--p),
   the waves behind her growing as she goes, and sails off when the helm is free. A clip window slides over waves that
   stay put, so the trail grows without its waves stretching; they drift on their own by a transform. Only transform
   and opacity animate. */
.splash {
  --p: 0.08; position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 16px; box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 42%, #0f2440 0%, #05070c 72%); color: #dbe7ff;
  font: 500 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; transition: opacity .5s ease;
}
.splash.splash-gone { opacity: 0; pointer-events: none; }
.splash-title { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: #8fb3ea; }
.splash-track { position: relative; width: min(72vw, 440px); height: 48px; }
.splash-window, .splash-waves, .splash-carrier { transition: transform .9s cubic-bezier(.3, .7, .3, 1); }
.splash-window { position: absolute; left: 0; right: 0; top: 30px; height: 10px; overflow: hidden;
  transform: translateX(calc((var(--p) - 1) * 100%)); }
.splash-waves { position: absolute; inset: 0; transform: translateX(calc((1 - var(--p)) * 100%)); }
.splash-swell { position: absolute; top: 0; bottom: 0; left: -18px; right: -18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M0 7 Q4.5 1.5 9 7 T18 7' fill='none' stroke='%237fb2ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 18px 10px;
  animation: splash-drift 1.8s linear infinite; }
.splash-carrier { position: absolute; inset: 0; transform: translateX(calc(var(--p) * 100%)); }
.splash-boat { position: absolute; left: -40px; top: 12px; width: 44px; height: 26px; transform-origin: 50% 85%;
  animation: splash-rock 2.6s ease-in-out infinite; }
.splash-boat svg { display: block; width: 100%; height: 100%; }
.splash.splash-sailing .splash-boat { animation: splash-sailoff 1s cubic-bezier(.55, 0, .75, .35) forwards; }
@keyframes splash-drift { from { transform: translateX(0); } to { transform: translateX(-18px); } }
@keyframes splash-rock { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-2px) rotate(2.5deg); } }
@keyframes splash-sailoff {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  30% { transform: translateX(14px) rotate(-3deg); opacity: 1; }
  100% { transform: translateX(42vw) rotate(-1deg); opacity: 0; }
}
.splash-text { font-size: 11px; min-height: 1.4em; color: #b7c9e8; text-align: center; }
/* The credit, pinned to the bottom so it never shifts the track, and the release version under it (as SimPlane's). */
.splash-credit { position: absolute; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  font-size: 11px; letter-spacing: .04em; color: #6f86ab; text-align: center; }
.splash-version { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.splash-error { display: none; max-width: 440px; text-align: center; }
.splash.splash-failed .splash-error { display: block; }
.splash.splash-failed .splash-boat, .splash.splash-failed .splash-swell { animation-play-state: paused; }
.splash.splash-failed .splash-swell { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M0 7 Q4.5 1.5 9 7 T18 7' fill='none' stroke='%23f0b35a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.splash-error p { margin: 0 0 12px; color: #f3d3a4; overflow-wrap: anywhere; }
.splash-error button { padding: 8px 16px; border: 1px solid #7fb2ff; border-radius: 0; background: transparent; color: #dbe7ff; font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .splash-window, .splash-waves, .splash-carrier { transition: none; }
  .splash-boat, .splash-swell, .splash.splash-sailing .splash-boat { animation: none; }
}
/* The harbour (T392): SimPlane's selector over the live sea. Its header is SimPlane's (Casey, 2026-10-05: "mimic the
   layout of SimPlane as much as possible"): the logo, the name and its release, the subtitle, the mode tabs and the icon
   buttons, in SimPlane's navy glass and cyan; the cards in a panel under it, her figures to one side, one big button,
   all square. The section lets the pointer through to the canvas, so a drag on the sea turns the camera round her; only
   its panels take it. While it is open the HUD and the keys card stand aside. */
body.in-harbour .hud, body.in-harbour .hold { display: none !important; }
.harbour {
  --panel-bg: rgba(10, 16, 28, 0.78); --panel-border: rgba(64, 130, 240, 0.28); --panel-border-bright: rgba(90, 160, 255, 0.6);
  --cyan: #00d2ff; --amber: #ffab00; --text-main: #f0f4fc; --text-dim: #8ba0c4;
  position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;
  padding: 28px 28px 44px; pointer-events: none; color: var(--text-main); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.harbour[hidden] { display: none; }
.harbour-carousel, .harbour-specs { pointer-events: auto; background: var(--panel-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--panel-border); border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); }
.harbour-top { flex: none; display: flex; flex-direction: column; gap: 8px; }
.harbour-header { display: flex; align-items: center; gap: 16px; height: 44px; box-sizing: border-box; padding: 4px; pointer-events: auto;
  background: rgba(4, 10, 20, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 210, 255, 0.4); border-radius: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 87, 183, 0.35); }
.harbour-title-group { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; height: 34px; }
.harbour-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; box-sizing: border-box;
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.65) 0%, rgba(0, 210, 255, 0.3) 100%); border: 1px solid var(--cyan); border-radius: 0;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.5), inset 0 0 6px rgba(0, 210, 255, 0.25); color: #fff; }
.harbour-logo svg { width: 22px; height: 22px; }
.harbour-header-text { display: flex; flex-direction: column; justify-content: center; height: 34px; min-width: 0; }
.harbour-header-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.15; color: #fff; }
.harbour-header-subtitle { font-size: 10px; line-height: 1.1; letter-spacing: 0.3px; color: var(--text-dim); white-space: nowrap; }
.harbour-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 0; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; color: var(--cyan); background: rgba(0, 210, 255, 0.15); border: 1px solid rgba(0, 210, 255, 0.4); }
.harbour-badge:empty { display: none; }
.harbour-modes { display: flex; align-items: center; gap: 4px; flex: none; height: 34px; box-sizing: border-box; padding: 2px 3px;
  background: rgba(5, 10, 20, 0.6); border: 1px solid var(--panel-border); border-radius: 0; }
.harbour-mode { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-radius: 0; color: var(--text-dim); font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; transition: all .18s ease; }
.harbour-mode:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.harbour-mode.active { cursor: default; color: #fff; border-color: var(--panel-border-bright);
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.7) 0%, rgba(10, 75, 156, 0.85) 100%); box-shadow: 0 2px 8px rgba(25, 118, 210, 0.35); }
.harbour-mode svg { flex: none; width: 14px; height: 14px; }
/* T1482: the Missions button opens a list, not a mode, and is SimPlane's yellow (its .scenes-tab-btn: --ukraine-yellow, a pale wash on hover or open) */
.missions-tab-btn { color: #ffd700; }
.missions-tab-btn:hover, .missions-tab-btn[aria-expanded="true"] { color: #fff; background: rgba(255, 215, 0, 0.12); }
/* T745: the camera bar, SimPlane's .camera-selector-strip and .cam-btn: at the helm, with the menu open */
.camera-selector-strip { display: flex; align-items: center; gap: 4px; flex: none; height: 34px; box-sizing: border-box; padding: 2px 3px;
  background: rgba(5, 10, 20, 0.6); border: 1px solid var(--panel-border); border-radius: 0; }
body.in-harbour .camera-selector-strip, .harbour-header:not(.menu-expanded) .camera-selector-strip, .camera-selector-strip:empty { display: none; }
.harbour-settings-btn { flex: none; }
/* Casey (2026-10-10): the camera bar and the settings to the right of the open menu, beside the four buttons */
.harbour-tools { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.harbour-header.menu-expanded .harbour-tools ~ .harbour-actions { margin-left: 0; }
.harbour-header:not(.menu-expanded) .harbour-tools { display: none; }
.harbour-header:not(.menu-expanded) .harbour-settings-btn { display: none; }   /* T730: in the menu, as SimPlane's */
.cam-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 0; background: transparent; border: 1px solid transparent;
  color: var(--text-dim); font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: all .18s ease; }
.cam-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.cam-btn.active { color: var(--cyan); background: rgba(0, 210, 255, 0.18); border-color: rgba(0, 210, 255, 0.45); }
.cam-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.harbour-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
/* T1414: on-screen helm controls toggle button group (desktop only: mobile has controls by default) */
.harbour-ctrl-group { display: none; align-items: center; flex: none; }
@media (min-width: 769px) {
  .harbour-ctrl-group { display: flex; }
  .harbour-header.menu-expanded .harbour-ctrl-group { margin-left: auto; margin-right: 0; }
  .harbour-header.menu-expanded .harbour-tools ~ .harbour-ctrl-group { margin-left: 6px; }
  .harbour-header:not(.menu-expanded) .harbour-ctrl-group { pointer-events: auto; padding: 4px; margin: -5px 6px -5px auto;
    background: rgba(4, 10, 20, 0.92); border: 1px solid rgba(0, 210, 255, 0.4); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); border-radius: 0; }
  .harbour-header:not(.menu-expanded) .harbour-ctrl-group ~ .harbour-actions { margin-left: 0; }
}
.harbour-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box;
  background: rgba(20, 32, 55, 0.6); border: 1px solid var(--panel-border); border-radius: 0; color: var(--text-dim); transition: all .18s ease; }
.harbour-icon-btn:hover { background: rgba(40, 60, 95, 0.8); border-color: var(--panel-border-bright); color: #fff; }
.harbour-icon-btn svg { width: 16px; height: 16px; pointer-events: none; }
button.harbour-icon-btn { padding: 0; cursor: pointer; }
.harbour-icon-btn.active { color: var(--cyan); border-color: var(--cyan); background: rgba(0, 210, 255, 0.15); }   /* SimPlane's .ctrl-icon-btn.active */
.harbour-icon-btn[hidden] { display: none; }
/* T725 (Casey, 2026-10-09: "a collapsd SimBoat menu at all times and the mute, help, screenshot and app buttons in the
   upper right, just like SimPlane"): the header stands on its own over the harbour and the helm, above both (its 1kx
   Projects menu opens over the cards). Open, it is the bar above; folded (the helm, a phone's harbour), the logo alone at
   the left and the four buttons at the right, each on its own panel, the sea free between them. At the helm it sits on
   the console's row, and on a narrow screen the console steps down under it. */
.harbour-header {
  --panel-bg: rgba(10, 16, 28, 0.78); --panel-border: rgba(64, 130, 240, 0.28); --panel-border-bright: rgba(90, 160, 255, 0.6);
  --cyan: #00d2ff; --text-main: #f0f4fc; --text-dim: #8ba0c4; --hdr-top: 28px; --hdr-side: 28px;
  position: fixed; z-index: 6; top: max(var(--hdr-top), env(safe-area-inset-top));
  left: max(var(--hdr-side), env(safe-area-inset-left)); right: max(var(--hdr-side), env(safe-area-inset-right));
  color: var(--text-main); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body:not(.in-harbour) .harbour-header { --hdr-top: 10px; --hdr-side: 10px; }
.harbour { padding-top: calc(28px + 44px + 8px); }   /* the cards under the header */
button.harbour-logo { padding: 0; cursor: pointer; font: inherit; }
.harbour-header:not(.menu-expanded) { pointer-events: none; background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.harbour-header:not(.menu-expanded) .harbour-header-text, .harbour-header:not(.menu-expanded) .harbour-modes { display: none; }
.harbour-header:not(.menu-expanded) .harbour-logo { pointer-events: auto; }
.harbour-header:not(.menu-expanded) .harbour-actions { pointer-events: auto; padding: 4px; margin: -5px -5px -5px auto;
  background: rgba(4, 10, 20, 0.92); border: 1px solid rgba(0, 210, 255, 0.4); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); }
/* Where the console would reach the corners (measured: 616 px wide, 386 px on touch where the lever is the telegraph;
   the logo takes 49 px at the left, the buttons 174 px at the right), it is centred in the gap between them instead of
   the screen: 62 px to the left (stepping it down pushed the prompts into the touch buttons on a small phone held
   sideways). Narrower still (a phone upright) the gap is too small: it steps down under them, with room to spare below. */
@media (max-width: 980px) { body:not(.in-harbour):not(.has-touch) .instruments { left: calc(50% - 62px); } }
@media (max-width: 740px) { body:not(.in-harbour).has-touch .instruments { left: calc(50% - 62px); } }
@media (max-width: 838px) { body:not(.in-harbour):not(.has-touch) .instruments { left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 44px + 6px); } }
@media (max-width: 609px) { body:not(.in-harbour).has-touch .instruments { left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 44px + 6px); } }
body.snapshot-capturing .harbour-header { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.18s ease !important; }
/* T725: SimPlane's loading veil (T355, #sim-loading-veil): the sea dimmed and blurred while the hold's card says she waits
   for it; the helm's overlays stay sharp above it (later in the page), and it never takes a pointer. */
.sea-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(4, 10, 24, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.sea-veil.visible { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .sea-veil, .sea-veil.visible { transition: none; } }
/* T528: the 1kx Projects menu (../js/app-nav.js), SimPlane's dropdown in this header's square style. */
.app-nav-container { position: relative; display: flex; }
.app-nav-modal { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; box-sizing: border-box; z-index: 1000; padding: 12px;
  background: rgba(8, 13, 24, 0.98); border: 1px solid var(--panel-border-bright); border-radius: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.app-nav-modal.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.app-nav-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim);
  padding: 4px 8px 8px; border-bottom: 1px solid var(--panel-border); margin-bottom: 8px; }
.app-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.app-nav-link { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 0; text-decoration: none; color: var(--text-dim); transition: all 0.15s ease; }
.app-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.app-nav-link.current-app { background: rgba(0, 210, 255, 0.15); color: var(--cyan); }
.app-nav-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0; background: rgba(255, 255, 255, 0.05); }
.app-nav-icon svg { width: 16px; height: 16px; }
.app-nav-icon.icon-1kx svg { width: 24px; height: 24px; }   /* the symbols' own weights, as every app corrects them */
.app-nav-icon.icon-football svg { width: 18px; height: 18px; }
.app-nav-icon.icon-caseyland svg { width: 28px; height: 28px; }
.app-nav-icon.icon-caseycase svg { width: 24px; height: 24px; }
.app-nav-icon.icon-casey svg { width: 20px; height: 20px; }
.app-nav-icon.icon-simplane svg { width: 20px; height: 20px; }
.app-nav-icon.icon-simboat svg { width: 20px; height: 20px; }
.app-nav-text-col { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.app-nav-header-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.app-nav-name { font-size: 12px; font-weight: 600; color: #fff; }
.app-nav-sub { font-size: 10px; color: var(--text-dim); }
.app-nav-active-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 0; background: var(--cyan); box-shadow: 0 0 8px rgba(0, 210, 255, 0.85); }
.app-nav-ext { opacity: 0.7; color: var(--text-dim); transition: opacity 0.15s ease; }
.app-nav-link:hover .app-nav-ext { opacity: 1; color: #fff; }
.harbour-carousel { flex: none; padding: 6px 8px; }
.harbour-cards { display: flex; gap: 12px; min-width: 0; overflow-x: auto; padding: 4px; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: rgba(0, 210, 255, 0.35) transparent; }
.harbour-card:first-child { margin-left: auto; } .harbour-card:last-child { margin-right: auto; }   /* centred, and scrolled from the first when they overflow */
.harbour-card { flex: 0 0 272px; width: 272px; height: 74px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  text-align: left; cursor: pointer; color: var(--text-dim); font: inherit; scroll-snap-align: center;
  background: rgba(13, 20, 36, 0.65); border: 1px solid var(--panel-border); border-radius: 0;
  transition: background .2s, border-color .2s, box-shadow .2s, color .2s; }
.harbour-card:hover { background: rgba(25, 40, 70, 0.75); border-color: var(--panel-border-bright); color: #fff; }
.harbour-card[aria-selected="true"] { color: #fff; border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.35) 0%, rgba(0, 210, 255, 0.2) 100%);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.3), inset 0 0 8px rgba(0, 210, 255, 0.1); }
.harbour-card:focus-visible, .harbour-launch:focus-visible, .harbour-mode:focus-visible, .harbour-icon-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.harbour-card img { flex: none; width: 86px; height: 54px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; background: rgba(4, 8, 18, 0.9); }
.harbour-card[aria-selected="true"] img { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 210, 255, 0.35); }
.harbour-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.harbour-card-name { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--text-main); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.harbour-card-sub { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.harbour-card[aria-selected="true"] .harbour-card-sub { color: #cfe9ff; }
.harbour-dev { align-self: flex-start; margin-bottom: 2px; padding: 1px 5px; border-radius: 0; font: 700 8.5px/1.3 "SF Mono", Menlo, monospace;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber); background: rgba(255, 171, 0, 0.12); border: 1px solid rgba(255, 171, 0, 0.45); }
.harbour-specs { flex: 0 1 auto; min-height: 0; align-self: flex-end; width: 340px; overflow-y: auto; box-sizing: border-box; padding: 18px 18px 16px; }
.harbour-tags { margin-bottom: 6px; }
.harbour-tags:empty, .harbour-credit:empty { display: none; }
.harbour-name { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; }
.harbour-class { margin-top: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--panel-border); font-size: 11px; letter-spacing: .3px; color: var(--text-dim); }
.harbour-blurb { margin: 12px 0; padding: 12px; font-size: 12px; line-height: 1.6; color: var(--text-dim);
  background: rgba(5, 10, 20, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0; }
.harbour-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.harbour-figures div { padding: 8px 12px; background: rgba(5, 10, 20, 0.45); border: 1px solid var(--panel-border); border-radius: 0; }
.harbour-figures dt { font: 10px/1.3 "SF Mono", Menlo, monospace; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.harbour-figures dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.harbour-credit { margin-top: 12px; font-size: 10.5px; color: #6f86ab; overflow-wrap: anywhere; }
.harbour-go { flex: none; margin-top: auto; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: auto; }
.harbour-launch { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 230px; height: 48px; padding: 0 30px;
  cursor: pointer; color: #fff; font: 700 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(135deg, #0072ff 0%, #004b9c 100%); border: 1px solid rgba(0, 210, 255, 0.7); border-radius: 0;
  box-shadow: 0 0 12px rgba(0, 114, 255, 0.45); transition: all .15s ease; }
.harbour-launch:hover { background: linear-gradient(135deg, #1a88ff 0%, #005bb8 100%); border-color: #00e5ff; box-shadow: 0 0 18px rgba(0, 210, 255, 0.7); }
.harbour-launch:active { transform: translateY(1px); }
.harbour-launch svg { flex: none; width: 20px; height: 20px; }
.harbour-hint { padding: 4px 10px; background: rgba(5, 10, 20, 0.6); border: 1px solid var(--panel-border); border-radius: 0;
  color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.harbour-hint kbd { display: inline-block; min-width: 1.4em; padding: 0 4px; margin-right: 3px; border-radius: 0; text-align: center;
  font: 11px/1.4 "SF Mono", Menlo, monospace; color: #e8f1ff; background: rgba(207, 227, 255, 0.1); border: 1px solid rgba(207, 227, 255, 0.35); }
/* T399: where she is launched from (a button per launch site, from their table), above Launch: the header's tabs in small */
.harbour-sites { display: flex; align-items: center; gap: 4px; padding: 2px 3px; background: rgba(5, 10, 20, 0.6); border: 1px solid var(--panel-border); border-radius: 0; }
.harbour-site { height: 26px; padding: 0 9px; cursor: pointer; white-space: nowrap; background: transparent; border: 1px solid transparent; border-radius: 0;
  color: var(--text-dim); font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; transition: all .18s ease; }
.harbour-site:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.harbour-site.active { color: #fff; border-color: var(--panel-border-bright); background: linear-gradient(135deg, rgba(25, 118, 210, 0.7) 0%, rgba(10, 75, 156, 0.85) 100%); }
.harbour-site:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 760px) { .harbour-sites { align-self: stretch; } .harbour-site { flex: 1; padding: 0 4px; } }
/* A phone, or a narrow window: the header keeps the logo, the name and the tabs' icons; the cards scroll under it; her
   figures sit above a full-width Launch, and the keyboard's hint goes (a finger taps a card and Launch, and drags the sea). */
@media (max-width: 760px) {
  .harbour { gap: 8px; padding: 8px 8px calc(max(14px, env(safe-area-inset-bottom)) + 32px); }
  .harbour-top { gap: 6px; }
  .harbour-header { gap: 8px; --hdr-top: 8px; --hdr-side: 8px; }
  .harbour { padding-top: calc(8px + 44px + 6px); }   /* T725: the cards under the header */
  .harbour-header-subtitle, .harbour-badge { display: none; }
  .harbour-mode { padding: 0 7px; }
  .harbour-mode span { display: none; }
  .harbour-carousel { padding: 4px; }
  .harbour-cards { gap: 8px; padding: 2px; }
  .harbour-card { flex-basis: 230px; width: 230px; height: 66px; padding: 5px 8px 5px 5px; gap: 8px; }
  .harbour-card img { width: 64px; height: 40px; }
  .harbour-specs { align-self: stretch; width: auto; margin-top: auto; max-height: 40vh; padding: 10px 12px; }
  .harbour-name { font-size: 17px; }
  .harbour-class { padding-bottom: 8px; }
  .harbour-blurb { display: none; }
  .harbour-figures { grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
  .harbour-figures div { padding: 5px 7px; }
  .harbour-figures dt { font-size: 8.5px; }
  .harbour-figures dd { font-size: 13px; }
  .harbour-credit { margin-top: 6px; }
  .harbour-go { align-self: stretch; margin-top: 0; }
  .harbour-launch { width: 100%; min-width: 0; }
  .harbour-hint { display: none; }
}

/* The touch controls (T391): the engine telegraph as a lever at the left, the wheel along the bottom at the right, and
   the keys table's buttons above it (round 2, Casey on the iPad: "reverse the controls and put the engine on the left";
   the lever's track on its outer edge, under the left thumb). The wrap covers the screen but lets the sea through (a drag there looks round); only the
   controls take a finger, each with touch-action: none so a drag never scrolls or zooms the page. Nothing here has a
   backdrop-filter that could hold a fixed child. The controls keep clear of a notch and the home bar. */
.touch {
  --tc-gut: 12px; --tc-bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px);
  --tc-left: max(var(--tc-gut), env(safe-area-inset-left)); --tc-right: max(var(--tc-gut), env(safe-area-inset-right));
  --tc-bg: rgba(5, 10, 20, 0.66); --tc-line: rgba(64, 130, 240, 0.35); --tc-cyan: #00d2ff; --tc-amber: #ffab00; --tc-dim: #8ba0c4;
  position: fixed; inset: 0; z-index: 3; pointer-events: none; color: #e8f1ff;
  font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.touch[hidden], body.in-harbour .touch { display: none !important; }
.tc-lever-body, .tc-wheel-track, .tc-btn { pointer-events: auto; touch-action: none; }
.touch.held .tc-lever, .touch.held .tc-wheel, .touch.held .tc-btn.helm { opacity: 0.4; }   /* she is held: as the keys card dims */

.tc-lever { position: absolute; left: var(--tc-left); bottom: var(--tc-bottom); width: 116px; height: min(330px, calc(100% - 170px));
  display: flex; flex-direction: column; box-sizing: border-box; background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: 0; }
.tc-head { flex: none; padding: 5px 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-dim);
  border-bottom: 1px solid var(--tc-line); }
.tc-lever-body { flex: 1; min-height: 0; display: flex; flex-direction: row-reverse; cursor: ns-resize; }
.tc-steps { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tc-steps li { flex: 1; display: flex; align-items: center; justify-content: flex-start; padding-left: 8px; min-height: 0;
  font-size: 10.5px; color: var(--tc-dim); white-space: nowrap; border-top: 1px solid rgba(64, 130, 240, 0.12); }
.tc-steps li:first-child { border-top: 0; }
.tc-steps li.stop { color: #e8f1ff; border-top-color: rgba(207, 227, 255, 0.4); border-bottom: 1px solid rgba(207, 227, 255, 0.4); }   /* ahead above, astern below */
.tc-steps li.astern { color: #c99a5a; }
.tc-steps li.on { color: #fff; background: rgba(0, 210, 255, 0.16); }
.tc-steps li.astern.on { background: rgba(255, 171, 0, 0.18); }
.tc-track { position: relative; flex: none; width: 30px; background: rgba(0, 0, 0, 0.35); border-right: 1px solid var(--tc-line); }
.tc-track::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px; margin-left: -2px; background: rgba(207, 227, 255, 0.18); }
.tc-handle { position: absolute; left: 3px; right: 3px; top: 50%; height: 18px; margin-top: -9px; box-sizing: border-box; border-radius: 0;
  background: linear-gradient(180deg, #1a88ff 0%, #004b9c 100%); border: 1px solid var(--tc-cyan); box-shadow: 0 0 10px rgba(0, 210, 255, 0.45);
  transition: top .12s ease-out; }
.tc-lever-body.grabbed .tc-handle { box-shadow: 0 0 16px rgba(0, 229, 255, 0.85); }

.tc-wheel { position: absolute; right: var(--tc-right); bottom: var(--tc-bottom); width: min(340px, calc(100% - 116px - 3 * var(--tc-gut)));
  height: 64px; display: flex; align-items: stretch; box-sizing: border-box; background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: 0; }
.tc-side { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tc-dim); }
.tc-side.port { color: #ff7a7a; } .tc-side.starboard { color: #6fe08a; }   /* the sidelights' colours */
.tc-wheel-track { position: relative; flex: 1; min-width: 0; margin: 0 2px; cursor: ew-resize; background: rgba(0, 0, 0, 0.35); }
.tc-wheel-track::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px; background: rgba(207, 227, 255, 0.18); }
.tc-mid { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; background: rgba(207, 227, 255, 0.45); }
.tc-rudder { position: absolute; left: 50%; bottom: 3px; width: 0; height: 0; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--tc-amber); }   /* where the rudder is */
.tc-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; color: #fff; pointer-events: none; }
.tc-knob svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.5)); }
.tc-wheel-track.grabbed .tc-knob { color: var(--tc-cyan); }

.tc-buttons { position: absolute; right: var(--tc-right); bottom: calc(var(--tc-bottom) + 64px + 8px); display: flex; gap: 8px; }
.tc-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 56px; height: 52px;
  padding: 0; box-sizing: border-box; cursor: pointer; color: #e8f1ff; font: inherit; font-size: 10px; letter-spacing: .03em;
  background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: 0; }
.tc-btn svg { width: 20px; height: 20px; }
.tc-btn:active { background: rgba(0, 114, 255, 0.55); border-color: var(--tc-cyan); }

/* The rest of the screen around them: a smaller HUD that wraps (the helm's lines only, simboat-app.js), clear of a notch. */
body.has-touch .hud { left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); font-size: 11px;
  white-space: pre-wrap; max-width: calc(100vw - 2 * max(10px, env(safe-area-inset-left)) - 20px); }

/* The helm's instruments (T393): a console across the top in place of the text HUD (kept for probes; ?hud=1 shows it).
   SimPlane's navy and cyan by day; at night the bridge's lights go down to a dim warm glow, readable without washing
   out the sea. On touch the telegraph's block stands aside: the lever is its indicator. The prompts sit under it. */
body.has-instruments:not(.show-hud) .hud { display: none; }
body.in-harbour .instruments { display: none; }
body.has-instruments .hold { top: max(18%, 160px); }
.instruments {
  --i-bg: rgba(5, 10, 20, 0.66); --i-line: rgba(64, 130, 240, 0.35); --i-cyan: #00d2ff; --i-amber: #ffab00; --i-red: #ff5a4f;
  --i-dim: #8ba0c4; --i-main: #f0f4fc; --i-bright: #fff;
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--i-main);
  font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.instruments:empty { display: none; }
.instruments.night { --i-bg: rgba(3, 5, 10, 0.5); --i-line: rgba(150, 120, 80, 0.3); --i-cyan: #c9a46a; --i-dim: #7f7565; --i-main: #b8ac98; --i-bright: #d9cbb2; }
.instruments.held .inst-bar { opacity: 0.55; }   /* she is held: as the keys card dims */
.inst-bar { display: flex; align-items: stretch; background: var(--i-bg); border: 1px solid var(--i-line); border-radius: 0; }
.inst { display: flex; flex-direction: column; align-items: center; padding: 6px 12px 7px; min-width: 72px; box-sizing: border-box;
  border-left: 1px solid rgba(64, 130, 240, 0.18); }
.inst:first-child { border-left: 0; }
.inst-label { display: flex; align-items: baseline; gap: 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--i-dim); white-space: nowrap; }
.inst-big { display: flex; align-items: baseline; gap: 3px; margin-top: auto; padding-top: 6px; }
.inst-v { font: 600 24px/1 "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--i-bright); }
.inst-u { font-size: 11px; color: var(--i-dim); }
.inst-sub { min-height: 1.2em; margin-top: 3px; font-size: 10.5px; color: var(--i-dim); white-space: nowrap; }
.inst-speed.astern .inst-v, .inst-speed.astern .inst-sub { color: var(--i-amber); }
/* the compass: SimPlane's dial's classes, in SimBoat's colours */
.inst-compass { padding: 4px 8px 4px; }
.inst-compass .hdg-readout-val { font: 700 11px/1 "SF Mono", Menlo, monospace; letter-spacing: 0; color: var(--i-cyan); }
.hdg-dial-svg { display: block; width: 84px; height: 84px; margin-top: 3px; }
.hdg-face { fill: rgba(2, 8, 18, 0.55); stroke: var(--i-line); stroke-width: 1; }
.hdg-tick { stroke: var(--i-dim); stroke-width: 1; }
.hdg-tick-major { stroke: var(--i-main); stroke-width: 1.4; }
.hdg-label { fill: var(--i-dim); font: 9px "SF Mono", Menlo, monospace; }
.hdg-label-cardinal { fill: var(--i-bright); font-size: 11px; font-weight: 700; }
.hdg-lubber { fill: var(--i-cyan); }
/* T1520: the mission's heading target, a ring on the card's rim in the missions' green (SimPlane's, T905) */
.hdg-signal-pip { fill: none; stroke: #6ff0a8; stroke-width: 2.4; filter: drop-shadow(0 0 3px rgba(111, 240, 168, 0.9)); }
.hdg-boat { fill: none; stroke: var(--i-bright); stroke-width: 2.2; stroke-linejoin: round; }
/* the telegraph: a pip per step, ahead in cyan, astern in amber */
.inst-pips { display: flex; gap: 3px; margin-top: auto; padding-top: 8px; }
.pip { width: 9px; height: 15px; box-sizing: border-box; background: rgba(207, 227, 255, 0.1); border: 1px solid rgba(207, 227, 255, 0.28); }
.pip.astern { border-color: rgba(255, 171, 0, 0.45); }
.pip.on { background: var(--i-cyan); border-color: var(--i-cyan); }
.pip.astern.on { background: var(--i-amber); border-color: var(--i-amber); }
.pip.stop.on { background: var(--i-bright); border-color: var(--i-bright); }
.inst-step { color: var(--i-main); margin-top: 6px; }
.inst-telegraph.astern .inst-step { color: var(--i-amber); }
/* the rudder: an arc, port red to starboard green, as the sidelights */
.inst-arc { display: block; width: 92px; height: 50px; margin-top: auto; }
.arc-port, .arc-stbd { fill: none; stroke-width: 4; }
.arc-port { stroke: rgba(255, 110, 110, 0.85); } .arc-stbd { stroke: rgba(100, 220, 130, 0.85); }
.arc-tick { stroke: var(--i-dim); stroke-width: 1.3; }
.arc-needle { stroke: var(--i-bright); stroke-width: 2.6; stroke-linecap: square; }
.arc-hub { fill: var(--i-bright); }
/* the water under her keel: amber in the shallows, red aground */
.inst-sea[data-level="shallows"] .inst-v { color: var(--i-amber); }
.inst-sea[data-level="aground"] .inst-v { color: var(--i-red); }
.inst-sea[data-level="deep"] .inst-v { font-size: 18px; }
.inst-pier.made { color: var(--i-bright); }   /* T399: made fast alongside a pier */
/* T397: the wind, for a boat with a rig: her bow up, the no-go zone either side of it, and the needle from where it arrives */
.inst-wind[hidden] { display: none; }
.inst-wind-v { font: 700 11px/1 "SF Mono", Menlo, monospace; letter-spacing: 0; color: var(--i-cyan); }
.inst-wind-dial { display: block; width: 50px; height: 50px; margin-top: auto; }
.wind-face { fill: none; stroke: var(--i-line); stroke-width: 2; }
.wind-nogo { fill: rgba(255, 171, 0, 0.22); }
.wind-boat { fill: var(--i-dim); }
.wind-needle { fill: var(--i-cyan); }
.inst-wind[data-level="irons"] .wind-needle, .inst-wind[data-level="irons"] .inst-sub, .inst-wind[data-level="becalmed"] .inst-sub { fill: var(--i-amber); color: var(--i-amber); }
.inst-telegraph.sailing .inst-step { color: var(--i-cyan); }
.inst-map { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 3px 8px; pointer-events: auto; cursor: pointer;
  color: var(--i-main); font: inherit; font-size: 10.5px; background: rgba(20, 32, 55, 0.6); border: 1px solid var(--i-line); border-radius: 0; }
.inst-map:hover { color: #fff; border-color: var(--i-cyan); }
.inst-map svg { width: 14px; height: 14px; }
.inst-warn { padding: 5px 12px; font: 600 12px/1.3 "SF Mono", Menlo, monospace; color: var(--i-main); background: rgba(5, 10, 20, 0.78);
  border: 1px solid var(--i-line); border-radius: 0; white-space: nowrap; }
.inst-warn[hidden] { display: none; }
.inst-warn[data-level="shallows"] { color: var(--i-amber); border-color: rgba(255, 171, 0, 0.6); }
.inst-warn[data-level="aground"] { color: #fff; background: rgba(150, 25, 20, 0.85); border-color: var(--i-red); }
.inst-warn[data-level="note"] { font-size: 11px; color: var(--i-dim); max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
body.has-touch .inst-telegraph { display: none; }
/* A phone, or a short window: smaller, so it leaves the sea and the touch controls their room. */
@media (max-width: 600px), (max-height: 480px) {
  body.has-instruments .hold { top: max(18%, 128px); }
  .inst { padding: 4px 6px 5px; min-width: 0; }
  /* T726: off the home pier the keel's line names it ("⚓ 092° 7.2 km"), and at 10.5 px it ran the console 18 px past a
     390 px phone ([TI-B7]); smaller here, it fits with room */
  .inst-sub { font-size: 9px; }
  .inst-label { font-size: 8.5px; letter-spacing: .06em; }
  .inst-v { font-size: 18px; }
  .inst-sea[data-level="deep"] .inst-v { font-size: 14px; }
  .hdg-dial-svg { width: 62px; height: 62px; }
  .inst-arc { width: 70px; height: 38px; }
  .inst-wind-dial { width: 38px; height: 38px; }
  body.has-touch .instruments.has-wind .inst-rudder { display: none; }   /* T397: no room for both on a phone, and the wheel shows her rudder */
  .inst-map { padding: 3px 6px; }
  .inst-map span { display: none; }
  .inst-warn { font-size: 11px; white-space: normal; max-width: 92vw; text-align: center; }
}

/* T394: the Horn joins the touch buttons, so they share the row beside the lever: each shrinks to its share of it on a
   narrow phone (56 px where there is room). */
.tc-buttons { width: min(340px, calc(100% - 116px - 3 * var(--tc-gut))); gap: 6px; }
.tc-btn { flex: 1 1 0; min-width: 0; max-width: 56px; font-size: 9.5px; letter-spacing: 0; }
/* T1299: the heading hold's row (Hold, and the bug 5° either way while it is on) above the buttons, at the same right edge. */
.tc-hold { bottom: calc(var(--tc-bottom) + 64px + 8px + 52px + 6px); justify-content: flex-end; }
.tc-btn.active { border-color: var(--tc-cyan); color: var(--tc-cyan); }
.tc-btn[hidden] { display: none; }   /* display: inline-flex above beats the attribute: the bug's buttons while the hold is off, and the Sails button on a boat with none (T789) */

/* The screenshot (T528): SimPlane's capture (T367, ../SimPlane/js/canvas-export.js) builds the viewfinder's bloom, the
   toast with the picture and its tools, and the "saved" note; these are SimPlane's rules for them, square as SimBoat's.
   While the bloom plays, the helm's overlays and the harbour's panels stand aside (the picture is the sea alone). */
.shutter-flash-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 80px rgba(0, 240, 255, 0.4), inset 0 0 24px rgba(0, 240, 255, 0.25); }
.shutter-flash-overlay.active, .shutter-flash-overlay.shutter-active { animation: vfBloom 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
body.snapshot-capturing .instruments, body.snapshot-capturing .hud, body.snapshot-capturing .keys, body.snapshot-capturing .keys-tab,
body.snapshot-capturing .touch, body.snapshot-capturing .harbour-carousel,
body.snapshot-capturing .harbour-specs, body.snapshot-capturing .harbour-go { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.18s ease !important; }
.viewfinder-frame { position: absolute; inset: 2rem; box-sizing: border-box; border: 1px solid rgba(0, 240, 255, 0.3); pointer-events: none; }
.vf-corner { position: absolute; width: 24px; height: 24px; border-color: #00f0ff; border-style: solid; }
.vf-tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.vf-tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.vf-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.vf-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }
.vf-crosshair { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); }
.vf-crosshair::before, .vf-crosshair::after { content: ''; position: absolute; background: rgba(0, 240, 255, 0.65); }
.vf-crosshair::before { top: 14px; left: 0; width: 30px; height: 2px; }
.vf-crosshair::after { top: 0; left: 14px; width: 2px; height: 30px; }
.vf-label { position: absolute; bottom: 0.6rem; right: 0.8rem; font: 700 0.72rem monospace; letter-spacing: 0.12em; color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.8); }
@keyframes vfBloom { 0% { opacity: 1; background: rgba(255, 255, 255, 0.45); } 15% { opacity: 0.95; background: rgba(0, 240, 255, 0.15); } 100% { opacity: 0; background: transparent; } }

.snapshot-toast { position: fixed; z-index: 10000; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; margin-inline: auto;
  width: max-content; max-width: calc(100vw - 2rem); box-sizing: border-box; padding: 0.75rem 1rem;
  background: rgba(8, 12, 20, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 240, 255, 0.4); border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 16px rgba(0, 240, 255, 0.2); font-family: "SF Mono", Menlo, Consolas, monospace; color: #fff;
  opacity: 0; transform: translateY(20px); pointer-events: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.snapshot-toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.snapshot-toast-content { display: flex; align-items: center; gap: 1rem; }
.snapshot-toast-header-row { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.snapshot-thumb-wrap { flex-shrink: 0; width: 48px; height: 48px; overflow: hidden; background: #000; border: 1px solid rgba(0, 240, 255, 0.45); border-radius: 0; }
.snapshot-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.snapshot-details { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.snapshot-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #00f0ff; }
.snapshot-subtitle { max-width: 200px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snapshot-actions { display: flex; align-items: center; gap: 0.45rem; }
.snapshot-watermark-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.25rem; padding: 0.3rem 0.4rem; border-radius: 0;
  font: 0.76rem "SF Mono", Menlo, Consolas, monospace; color: rgba(255, 255, 255, 0.8); cursor: pointer; user-select: none; transition: color 0.2s ease; }
.snapshot-watermark-toggle:hover { color: #33ff33; }
.snapshot-watermark-toggle input[type="checkbox"] { width: 13px; height: 13px; margin: 0; border-radius: 0; accent-color: #33ff33; cursor: pointer; }
.snapshot-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; white-space: nowrap; user-select: none; touch-action: manipulation; cursor: pointer;
  font: 600 0.78rem "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.03em; color: #fff;
  background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.35); border-radius: 0; transition: all 0.2s ease; }
.snapshot-btn:hover { background: rgba(51, 255, 51, 0.2); border-color: #33ff33; box-shadow: 0 0 10px rgba(51, 255, 51, 0.4); transform: translateY(-1px); }
.snapshot-btn:active { transform: scale(0.96); }
.snapshot-close-btn { display: flex; align-items: center; justify-content: center; padding: 0.35rem; cursor: pointer; touch-action: manipulation;
  background: transparent; border: none; border-radius: 0; color: rgba(255, 255, 255, 0.5); font-size: 0.95rem; transition: color 0.2s, background 0.2s; }
.snapshot-close-btn:hover { color: #ff3366; background: rgba(255, 51, 102, 0.15); }
.snapshot-feedback-toast { position: fixed; z-index: 10001; top: calc(5rem + env(safe-area-inset-top, 0px)); left: 50%; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 1.1rem; background: rgba(8, 12, 20, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid #33ff33; border-radius: 0; box-shadow: 0 0 16px rgba(51, 255, 51, 0.35);
  font: 600 0.82rem "SF Mono", Menlo, Consolas, monospace; color: #fff;
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-20px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.snapshot-feedback-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.snapshot-feedback-toast .feedback-icon { flex-shrink: 0; width: 16px; height: 16px; color: #33ff33; stroke: currentColor; }
.btn-flash-pulse { animation: snapshotBtnPulse 0.75s ease-out; border-color: #00f0ff !important; color: #00f0ff !important; }
@keyframes snapshotBtnPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 1), 0 0 16px rgba(0, 240, 255, 0.85); background: rgba(0, 240, 255, 0.55); transform: scale(1.12); }
  50% { box-shadow: 0 0 0 8px rgba(0, 240, 255, 0.35), 0 0 20px rgba(0, 240, 255, 0.5); background: rgba(0, 240, 255, 0.25); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 14px rgba(0, 240, 255, 0), 0 0 0 rgba(0, 240, 255, 0); background: transparent; transform: scale(1); } }
@media (max-width: 680px) {
  .snapshot-toast { bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); left: 0.5rem; right: 0.5rem; width: auto; max-width: calc(100vw - 1rem); padding: 0.65rem 0.75rem; }
  .snapshot-toast-content { flex-direction: column; align-items: stretch; gap: 0.65rem; }
  .snapshot-toast-header-row { width: 100%; justify-content: space-between; }
  .snapshot-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .snapshot-btn { flex: 1 1 auto; justify-content: center; }
}

/* T524: the fast-forward badge, under the console's middle while it is on */
.fast-badge { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 96px);
  padding: 4px 10px; font: 700 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 1px;
  color: #ffab00; background: rgba(4, 10, 20, 0.85); border: 1px solid rgba(255, 171, 0, 0.6); pointer-events: none; }
.fast-badge[hidden] { display: none; }
body.in-harbour .fast-badge { display: none; }

/* T730: SimPlane's settings modal (css/styles.css .modal-backdrop, .flight-settings-panel, .settings-*, .setting-*, and
   the season and time pickers' rules), with SimBoat's colours: square corners, the header's blues and cyan. */
.modal-backdrop { --panel-border: rgba(64, 130, 240, 0.28); --cyan: #00d2ff; --text-main: #f0f4fc; --text-dim: #8ba0c4; --text-bright: #fff;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* T1559: a panel hangs from its top, so a tab or a filter that changes its height moves only its foot (as SimPlane's) */
  --panel-top: max(20px, 5vh);
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: var(--panel-top) 20px 20px; box-sizing: border-box;
  background: rgba(3, 6, 12, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease;
  color: var(--text-main); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.modal-backdrop.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-backdrop:not(.visible) * { pointer-events: none !important; }
.flight-settings-panel { width: 100%; max-width: 580px; max-height: 90vh; overflow: hidden; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px;
  background: rgba(10, 16, 28, 0.92); border: 1px solid rgba(0, 210, 255, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); border-radius: 0; }
.flight-settings-panel > .modal-header, .flight-settings-panel > .settings-tabs, .flight-settings-panel > .settings-modal-footer { flex-shrink: 0; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--panel-border); padding-bottom: 12px; }
.modal-title-group { display: flex; flex-direction: column; gap: 4px; }
.modal-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--text-bright); }
.header-subtitle { font-size: 11px; color: var(--text-dim); }
.modal-close-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; border-radius: 0; transition: color .18s; }
.modal-close-btn:hover { color: var(--text-bright); }
.settings-tabs { display: flex; border-bottom: 1px solid var(--panel-border); }
.settings-tab-btn { flex: 1 1 auto; background: transparent; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text-dim);
  font: 700 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 9px 10px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.settings-tab-btn:hover { color: var(--text-main); }
.settings-tab-btn.active { color: var(--text-bright); border-bottom-color: var(--cyan); }
.settings-content-grid { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.settings-content-grid[hidden] { display: none; }
.settings-section { display: contents; }
.settings-shared-note { margin: 0; font-size: 12px; color: var(--text-dim); }
.setting-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: rgba(10, 18, 32, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; }
.setting-item.setting-toggle-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.setting-text-col { flex: 1 1 180px; min-width: 0; }
.setting-name { font: 700 12px/1.3 var(--mono); color: var(--text-bright); text-transform: uppercase; letter-spacing: .5px; }
.setting-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin: 0; }
/* T1182: the Graphics Quality row's Reload, as SimPlane's (T1178) */
.setting-inline-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0; color: var(--text-main, #fff); font: 700 10px var(--font-mono, monospace); padding: 2px 8px; margin-left: 4px; cursor: pointer; }
.setting-inline-btn[hidden] { display: none; }
.setting-btn { background: rgba(20, 35, 60, 0.85); border: 1px solid var(--panel-border); border-radius: 0; color: var(--text-bright); font: 700 11px/1 var(--mono);
  padding: 8px 12px; cursor: pointer; transition: all .15s ease; letter-spacing: .4px; }
.setting-btn:hover { border-color: var(--cyan); background: rgba(0, 210, 255, 0.15); }
.setting-btn.primary { background: var(--cyan); border-color: var(--cyan); color: #040a14; }
.setting-btn.danger { border-color: rgba(255, 23, 68, 0.4); color: #ff5252; }
.setting-btn.danger:hover { background: rgba(255, 23, 68, 0.15); border-color: #ff1744; }
.setting-toggle-btn { flex-shrink: 0; white-space: nowrap; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0; color: var(--text-dim);
  font: 700 11px/1 var(--mono); padding: 8px 14px; cursor: pointer; min-width: 64px; text-align: center; }
.setting-toggle-btn.active { background: rgba(0, 230, 118, 0.2); border-color: #00e676; color: #00e676; }
/* T790: the settings' dropdowns (the sail colour) dressed as its toggles: dark, square, mono, a cyan chevron, a dark list */
.setting-toggle-row > select { flex-shrink: 0; min-width: 150px; appearance: none; -webkit-appearance: none; color-scheme: dark; cursor: pointer;
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2300d2ff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0; color: var(--text-main); font: 700 11px/1 var(--mono); padding: 8px 30px 8px 12px; }
.setting-toggle-row > select:hover { border-color: var(--panel-border-bright, rgba(90, 160, 255, 0.6)); }
.setting-toggle-row > select:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.setting-toggle-row > select option { background: #0a101c; color: var(--text-main); }
.settings-modal-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--panel-border); padding-top: 14px; margin-top: 4px; }
/* the season and time pickers and the weather card (SimPlane's terrain-season.js, terrain-time.js, weather-card.js) */
.season-panel select, .time-panel select { background: rgba(5, 10, 20, 0.9); color: var(--text-main); border: 1px solid var(--panel-border); border-radius: 0; font: 12px var(--mono); padding: 6px 8px; }
.season-panel > select, .time-panel > select { width: 100%; }
.season-panel input[type="range"], .time-panel input[type="range"] { width: 100%; accent-color: var(--cyan); }
.season-panel .season-dev-readout, .time-panel .season-dev-readout { font: 11px var(--mono); color: var(--cyan); }
.time-panel .time-dev-row { display: flex; gap: 6px; }
.time-panel .time-dev-row select { flex: 1 1 auto; min-width: 0; }
.time-panel .time-dev-row #time-dev-speed { flex: 0 0 76px; }
.time-panel .time-dev-row button { flex: 0 0 34px; background: transparent; color: var(--text-dim); border: 1px solid var(--panel-border); border-radius: 0; cursor: pointer; }
.time-panel select:disabled { opacity: .5; }
.setting-label-row { display: flex; align-items: center; justify-content: space-between; }
/* a phone held sideways: the panel takes the screen, the subtitle goes */
@media (max-height: 480px) { #boat-settings-modal, #help-modal { padding: 6px; } #boat-settings-modal .flight-settings-panel, #help-modal .flight-settings-panel { max-height: 100%; padding: 12px; gap: 10px; }
  #boat-settings-subtitle { display: none; } }
/* T1195: SimPlane's keyboard shortcuts popup (#help-modal), with #keys inside and the link to the full guide */
.help-modal-panel { max-width: 560px; }
.help-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.help-modal-footer { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--panel-border); padding-top: 12px; }
.help-footer-note { font-size: 11px; color: var(--text-dim); line-height: 1.4; flex: 1 1 220px; }
.help-docs-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: var(--text-bright); text-decoration: none; background: rgba(0, 210, 255, 0.12); border: 1px solid var(--cyan); border-radius: 0;
  transition: background .15s ease, box-shadow .15s ease; }
.help-docs-cta:hover { background: rgba(0, 210, 255, 0.22); box-shadow: 0 0 12px rgba(0, 210, 255, 0.35); }

/* T531: SimPlane's navigation chart (../SimPlane/js/nav-map.js), its rules copied from SimPlane/css/styles.css (the
   module brings no CSS of its own), with the variables they read set here for SimBoat. */
.nav-map { --panel-bg: rgba(10, 16, 28, 0.78); --panel-border: rgba(64, 130, 240, 0.28); --panel-border-bright: rgba(90, 160, 255, 0.6);
  --text-bright: #fff; --text-main: #f0f4fc; --text-dim: #8ba0c4; --cyan-accent: #00d2ff;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.inst-map.active { color: #00d2ff; border-color: #00d2ff; }
/* ─── Navigation chart (T349, js/nav-map.js) ──────────────────────────────────────────────────────────────────────
   A chart over the whole view while the flight carries on: above the 3D canvas and the marks drawn on it (the Flight
   HUD's canvas, the satellite tags), below every panel and control, which stay where they are and work as they do. */
.nav-map {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0b1220;
  touch-action: none;
}
.nav-map[hidden] { display: none; }
.nav-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.nav-map-canvas:active { cursor: grabbing; }
.nav-map-info {
  position: absolute;
  left: 2rem;
  top: calc(var(--nav-map-top, 72px) + 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.nav-map-tools { position: absolute; }
.nav-map-strip, .nav-map-target, .nav-map-tools {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.nav-map-strip {
  display: flex;
  gap: 16px;
  padding: 7px 12px;
}
.nav-map-cell { display: flex; flex-direction: column; gap: 1px; min-width: 62px; }
.nav-map-k { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--text-dim); }
.nav-map-v { font-size: 14px; font-weight: 700; color: var(--text-bright); white-space: nowrap; }
.nav-map-target {
  min-width: 232px;
  padding: 7px 10px 8px 12px;
  border-color: var(--panel-border-bright);
}
.nav-map-target[hidden] { display: none; }
.nav-map-target.kind-airport { border-color: rgba(255, 210, 60, 0.6); }
/* T350: a selected place's buttons, and the route. The route is magenta, as the chart draws it. */
.nav-map-target-actions { display: flex; gap: 6px; margin-top: 7px; }
.nav-map-act, .nav-map-go {
  flex: 1;
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 88, 200, 0.14);
  border: 1px solid rgba(255, 88, 200, 0.55);
  color: #ffd2ef;
  font: 700 11.5px var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.nav-map-act:hover, .nav-map-act:focus-visible, .nav-map-go:hover, .nav-map-go:focus-visible { background: rgba(255, 88, 200, 0.28); color: #fff; outline: none; }
.nav-map-act:disabled, .nav-map-go:disabled { opacity: 0.4; cursor: default; }
.nav-map-go { flex: 0 0 auto; min-width: 72px; background: #ff58c8; color: #1a0612; border-color: #ff58c8; }
.nav-map-go:hover, .nav-map-go:focus-visible { background: #ff7fd6; color: #1a0612; }
.nav-map-go.stop { background: rgba(255, 88, 200, 0.14); color: #ffd2ef; }
.nav-map-route {
  min-width: 232px;
  max-width: 300px;
  padding: 7px 10px 9px 12px;
  background: var(--panel-bg);
  border: 1px solid rgba(255, 88, 200, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.nav-map-route[hidden] { display: none; }
.nav-map-route-head { display: flex; align-items: center; gap: 8px; }
.nav-map-route-total { flex: 1; font-size: 12px; font-weight: 700; color: var(--text-bright); white-space: nowrap; }
.nav-map-route-clear, .nav-map-route-rm {
  width: 20px; height: 20px; flex: none; padding: 0;
  background: none; border: 1px solid transparent; color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer;
}
.nav-map-route-clear:hover, .nav-map-route-rm:hover, .nav-map-route-clear:focus-visible, .nav-map-route-rm:focus-visible { color: var(--text-bright); border-color: var(--panel-border-bright); outline: none; }
.nav-map-route-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 34vh; overflow-y: auto; }
.nav-map-route-list li { display: grid; grid-template-columns: 18px 1fr auto auto 20px; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; }
.nav-map-route-list .n { color: #ff58c8; font-weight: 800; text-align: center; }
.nav-map-route-list .nm { color: var(--text-bright); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-map-route-list .brg, .nav-map-route-list .dist { color: var(--text-dim); white-space: nowrap; }
.nav-map-route-list li.from .nm { color: var(--text-dim); font-weight: 600; }
.nav-map-route-list li.done { opacity: 0.45; }
.nav-map-route-list li.current .nm { color: #ff9bdc; }
.nav-map-route-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.nav-map-route-hint { font-size: 10.5px; color: var(--text-dim); }
.nav-map-target.kind-airport .nav-map-target-name { color: #ffd23c; }
.nav-map-target-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nav-map-target-name { font-size: 12.5px; font-weight: 700; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-map-target-clear {
  width: 22px;
  height: 22px;
  flex: none;
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.nav-map-target-clear:hover, .nav-map-target-clear:focus-visible { color: var(--text-bright); border-color: var(--panel-border-bright); outline: none; }
.nav-map-target-row { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
.nav-map-target-row .nav-map-v { margin-right: 8px; }
.nav-map-target-pos { margin-top: 3px; font-size: 10.5px; color: var(--text-dim); user-select: text; -webkit-user-select: text; }
.nav-map-tools {
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}
.nav-map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(20, 32, 54, 0.6);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  cursor: pointer;
}
.nav-map-btn:hover, .nav-map-btn:focus-visible { border-color: var(--panel-border-bright); color: var(--text-bright); outline: none; }
.nav-map-btn.active { border-color: var(--cyan-accent); color: var(--cyan-accent); }
.nav-map-zoom-in { margin-top: 8px; }
.nav-map-follow { margin-top: 8px; }
.nav-map-foot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(var(--nav-map-bottom, 0px) + 10px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(190, 206, 222, 0.78);
  text-shadow: 0 0 3px rgba(4, 9, 18, 0.95), 0 0 3px rgba(4, 9, 18, 0.95);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.nav-map-cursor { white-space: nowrap; }
.nav-map-legend { text-align: right; }
/* The weather key (round 4): bottom middle, above the HUD's panels there (--nav-map-mid, measured by nav-map.js). */
.nav-map-wx {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-map-mid, 0px) + 14px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 7px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.nav-map-wx[hidden] { display: none; }
.nav-map-wx-scale { position: relative; display: block; width: 168px; padding-bottom: 13px; }
.nav-map-wx-bar { display: block; height: 8px; border-radius: 4px; }
.nav-map-wx-labels { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; }
.nav-map-wx-labels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.nav-map-wx-labels span:first-child { transform: none; }
.nav-map-wx-labels span:last-child { transform: translateX(-100%); }
/* The map button, lit while its chart is up; and the marks beside it, light on the dark chart whatever the sky. */
.sim-map-btn.active { opacity: 1; color: var(--cyan-accent); }
body.nav-map-open .pos-readout { color: var(--text-dim); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
body.nav-map-open .sim-goto-btn,
body.nav-map-open .sim-map-btn:not(.active) { color: var(--text-dim); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); }
body.snapshot-capturing .nav-map { display: none; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .nav-map-info { left: calc(1rem + env(safe-area-inset-left, 0px)); top: calc(var(--nav-map-top, 56px) + 8px); gap: 6px; }
  .nav-map-strip { gap: 10px; padding: 5px 9px; }
  .nav-map-cell { min-width: 52px; }
  .nav-map-v { font-size: 12.5px; }
  .nav-map-target { min-width: 0; }
  .nav-map-tools { right: calc(1rem + env(safe-area-inset-right, 0px)); }
  .nav-map-btn { width: 40px; height: 40px; }
  .nav-map-legend { display: none; }
}
/* A phone on its side has no room for a column of tools between the top bar and the stick: a row under the top bar. */
@media (max-height: 560px) {
  .nav-map-tools {
    top: calc(var(--nav-map-top, 56px) + 8px);
    transform: none;
    flex-direction: row;
  }
  .nav-map-zoom-in, .nav-map-follow { margin-top: 0; margin-left: 6px; }
  /* ... and the selection beside the readouts, not under them where the throttle stands; without its coordinates. */
  .nav-map-info { flex-direction: row; flex-wrap: wrap; max-width: calc(100% - 320px); }
  .nav-map-target { padding: 5px 8px 6px 10px; }
  .nav-map-target-pos { display: none; }
}

/* SimBoat: the chart over the 3D view (and its sea veil, 0) but under the console (2), the keys and touch controls (3), the
   fast-forward badge and the harbour (5) and the header (6), which stay above it and work as they do */
.nav-map { z-index: 1; }

/* T745 round 2: SimPlane's orbit view controls, bottom middle at the helm in the orbit (above the touch controls' wheel) */
.orbit-controls { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 6px; padding: 4px;
  background: rgba(4, 10, 20, 0.92); border: 1px solid rgba(0, 210, 255, 0.4); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  --panel-border: rgba(64, 130, 240, 0.28); --panel-border-bright: rgba(90, 160, 255, 0.6); --cyan: #00d2ff; --text-dim: #8ba0c4; }
.orbit-controls[hidden] { display: none; }
body.has-touch .orbit-controls { bottom: 150px; }

/* T764 (Casey, 2026-10-10: "bump this piece down when the SimBoat menu is open"): at the helm, the open menu's bar would
   cover the console's top half: it steps down under the bar (centred, as on a narrow screen), the fast-forward badge with it */
.instruments { transition: top .2s ease; }
body.menu-open:not(.in-harbour) .instruments { top: calc(max(10px, env(safe-area-inset-top)) + 44px + 8px); left: 50%; }
body.menu-open:not(.in-harbour) .fast-badge { top: calc(max(10px, env(safe-area-inset-top)) + 44px + 104px); }
body.menu-open.has-instruments:not(.in-harbour) .hold { top: max(calc(18% + 52px), 212px); }   /* T764: the prompt under the stepped-down console */

/* T1250: SimBoat Missions Modal & Cards */
.missions-panel {
  max-width: 680px;
  --logbook-accent: var(--cyan);   /* T1457: the Logbook tab (css/logbook-view.css) in SimBoat's colour */
}
.missions-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.missions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.missions-chip {
  height: 28px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  color: var(--text-dim);
  font: 600 12px/1 var(--font-sans, sans-serif);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.missions-chip:hover,
.missions-chip:focus-visible {
  color: var(--text-bright);
  border-color: rgba(0, 210, 255, 0.5);
  outline: none;
}
.missions-chip.active {
  color: #040a14;
  background: var(--cyan);
  border-color: var(--cyan);
}
.missions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  overflow-y: auto;
  max-height: 55vh;
  padding: 2px;
  box-sizing: border-box;
}
.mission-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: rgba(10, 18, 32, 0.75);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.mission-card:hover,
.mission-card:focus-visible {
  border-color: var(--cyan);
  background: rgba(0, 210, 255, 0.08);
  outline: none;
}
.mission-card.active,
.mission-card.current {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.25);
}
.mission-card[hidden] {
  display: none;
}
.mission-card-tag {
  font: 700 10px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
}
.mission-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
}
.mission-card-where {
  font: 600 12px/1.3 var(--font-sans, sans-serif);
  color: var(--text-bright);
}
.mission-card-look {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-dim);
}
.mission-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  font-size: 11px;
  color: #728aa8;
}

/* T1452: a mission at sea (SimPlane's missions-ui.js runs it here too): its caption under the header's row, the goal
   ahead and the distance to go, in the missions' green; and its card (made fast at another pier, the debrief) under the
   caption, never modal: she sails on under it. SimPlane's own rules (SimPlane/css/styles.css) are not on this page. */
.scene-caption {
  position: fixed; top: var(--mission-caption-top, calc(max(var(--hdr-top, 28px), env(safe-area-inset-top)) + 100px)); left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(560px, calc(100vw - 32px));
  padding: 6px 6px 6px 12px; box-sizing: border-box; background: rgba(5, 10, 20, 0.78); border: 1px solid rgba(111, 240, 168, 0.5);
  color: #f0f4fc; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  pointer-events: auto;
}
.scene-caption[hidden], .mission-debrief[hidden] { display: none; }
.scene-caption-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; }
.scene-caption-step { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6ff0a8; }
.scene-caption-title { font-size: 13px; font-weight: 700; color: #ffffff; }
.scene-caption-look { flex-basis: 100%; font-size: 11.5px; line-height: 1.35; color: #8ba0c4; }
.scene-caption-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0; color: #ffffff; cursor: pointer;
}
.scene-caption-btn:hover, .scene-caption-btn:focus-visible { background: rgba(0, 210, 255, 0.14); border-color: rgba(0, 210, 255, 0.5); outline: none; }
.mission-caption.pinged { animation: mission-ping 1.5s ease-out; }
@keyframes mission-ping {
  0% { border-color: #6ff0a8; box-shadow: 0 0 0 0 rgba(111, 240, 168, 0.75), inset 0 0 18px rgba(111, 240, 168, 0.45); }
  100% { border-color: rgba(111, 240, 168, 0.5); box-shadow: 0 0 0 14px rgba(111, 240, 168, 0), inset 0 0 0 rgba(111, 240, 168, 0); }
}
.mission-debrief {
  position: fixed; top: calc(var(--scene-caption-bottom, 140px) + 10px); left: 50%; transform: translateX(-50%); z-index: 61;
  width: min(380px, calc(100vw - 32px)); padding: 12px 14px; box-sizing: border-box; background: rgba(5, 10, 20, 0.86);
  border: 1px solid rgba(111, 240, 168, 0.5); color: #f0f4fc; pointer-events: auto;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.mission-debrief-title { margin-top: 2px; font-size: 15px; font-weight: 700; color: #ffffff; }
.mission-debrief-lines { display: flex; flex-direction: column; gap: 0; margin-top: 8px; font-size: 13px; }
/* T1562: a name never wraps, a hairline between rows, the name in small capitals against the value (as SimPlane's card) */
.mission-debrief-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mission-debrief-line:first-child { border-top: 0; }
.mission-debrief-key { flex: 0 0 auto; white-space: nowrap; color: #8ba0c4; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.mission-debrief-val { flex: 1 1 auto; min-width: 0; color: #ffffff; font-variant-numeric: tabular-nums; text-align: right; }
.mission-debrief-line.best .mission-debrief-val { color: #6ff0a8; }
.mission-debrief-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mission-debrief-actions:empty { display: none; }
.mission-debrief-btn {
  display: inline-flex; align-items: center; padding: 6px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.mission-debrief-btn:hover, .mission-debrief-btn:focus-visible { background: rgba(111, 240, 168, 0.14); border-color: rgba(111, 240, 168, 0.6); outline: none; }