:root{
  --sea-deep:#07161f; --sea:#0d2735; --land:#2a2721; --land-edge:#6d6142;
  --quay-edge:#b3a880; --ink:#dfeaf0; --ink-dim:#7e97a4; --line:#1d3a4a;
  --panel:rgba(7,20,28,.86); --green:#3cc47c; --red:#e2483d; --amber:#f0b429;
  --cyan:#5ad1e6; --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--sea-deep);color:var(--ink);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;overflow:hidden;-webkit-text-size-adjust:100%;
}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
#stage{position:relative;flex:1;min-height:0}
canvas{display:block;width:100%;height:100%;touch-action:none}
.panel{position:absolute;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;backdrop-filter:blur(6px);box-shadow:var(--shadow)}
.panel h2{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-dim)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;line-height:1.55}
.row span:first-child{color:var(--ink-dim);font-size:11.5px;font-weight:400}
.row b{font-size:13px;font-weight:600}
.big{font-size:20px;font-weight:600;letter-spacing:-.4px}
.unit{font-size:11px;color:var(--ink-dim);margin-left:3px}
.row span{white-space:nowrap}
.row span:last-child{text-align:right}
#nav{top:12px;left:12px;min-width:212px}
/* a panel that folds up to its heading — click the heading; the arrow
   points the way it will go, like the console's own fold tab */
.panel h2.fold{display:flex;justify-content:space-between;align-items:center;gap:10px;
  cursor:pointer;user-select:none}
.panel h2.fold .foldhint{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:11px}
.panel h2.fold i{font-style:normal;font-size:17px;font-weight:600;line-height:1;width:12px;text-align:center;color:var(--cyan)}
.panel h2.fold:hover{color:var(--ink)}
.panel.folded h2.fold{margin:0}
.panel.folded .foldbody{display:none}
#wx{top:12px;right:12px;min-width:212px}
.windrose{display:flex;align-items:center;gap:6px;margin-top:6px;
  border-top:1px solid #14313f;padding-top:6px}
.wrvals{font-size:10.5px;color:var(--ink-dim);line-height:1.7;white-space:nowrap}
.wrvals b{display:block;color:var(--ink);font-size:12px;font-weight:600}
.wrvals i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.sw.rel{background:#5ad1e6}
.sw.tru{background:#f0b429}
#dock{bottom:12px;left:12px;width:296px}
/* The overview map that sat in the bottom-right corner is gone (2026-10-21:
   the chart with its predictor and the 3D view say all it did); the VHF
   icon has that corner now, and the corner panel (#pip) sits beside it.
   dev-panel (just the cursor position) stays where it was. */
#dev-panel{bottom:12px;right:236px;min-width:150px}
#dev-panel button{width:100%;margin-top:6px}
#dev-panel .dev-hint{font-size:10.5px;color:var(--ink-dim);margin-top:4px;line-height:1.35;max-width:170px}
#btn-radio-icon{position:absolute;right:12px;bottom:12px;width:78px;height:78px;padding:0;
  background:transparent;border:none;border-radius:12px;display:flex;align-items:center;
  justify-content:center}
#btn-radio-icon:hover{background:transparent;filter:brightness(1.15)}
#btn-radio-icon img{width:100%;height:100%;object-fit:cover;border-radius:12px}
#radio-badge{position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:17px;
  box-shadow:0 0 0 2px #04141c;animation:radio-pulse 1.4s ease-in-out infinite}
@keyframes radio-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#radio-banner{position:absolute;top:70px;left:50%;transform:translate(-50%,-6px);z-index:15;
  max-width:620px;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:8px 18px;font-size:13px;font-style:italic;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#radio-banner.show{opacity:1;transform:translate(-50%,0)}
#radio-banner.ship{color:var(--ink)}
#radio-banner.station{color:var(--cyan)}
#radio-modal{position:absolute;inset:0;display:none;                 /* no dimming — it hid the
  banner underneath, and Grzegorz wants to keep reading the exchange while the window is open */
  align-items:center;justify-content:center;padding:16px;z-index:24;pointer-events:none}
#radio-card{pointer-events:auto}
#radio-card{position:relative;max-width:420px;width:100%;background:#0a1e29;
  border:1px solid var(--line);border-radius:14px;padding:20px 22px 18px;box-shadow:var(--shadow)}
#radio-close{position:absolute;top:12px;right:12px;width:30px;height:30px;padding:0;
  border-radius:8px;font-size:14px}
#radio-checklist{margin:10px 0 14px;font-size:12.5px;line-height:1.7;color:var(--ink-dim)}
#radio-checklist .dim{color:var(--ink-dim);font-style:italic}
#radio-options{display:flex;flex-direction:column;gap:8px}
#radio-options button{width:100%}
#radio-options .dim{color:var(--ink-dim);font-style:italic;font-size:12.5px}
#replaybar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:none;
  align-items:center;gap:10px;padding:8px 12px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:12}
#about{position:absolute;inset:0;background:rgba(4,12,17,.9);display:none;
  align-items:flex-start;justify-content:center;padding:16px 20px 28px;z-index:24;
  overflow-y:auto;overscroll-behavior:contain}
#about .card{max-width:920px;width:100%;background:#0a1e29;border:1px solid var(--line);
  border-radius:14px;padding:22px 26px 22px;box-shadow:var(--shadow)}
.about-layout{display:grid;grid-template-columns:270px 1fr;gap:22px;align-items:start}
/* The photo itself now carries the title and the anchor mark (baked in
   by Grzegorz), so it's the whole panel's background rather than a boxed
   insert below a separately-drawn title — only the version tag, the
   tagline and the quote still get drawn on top, over a bottom scrim so
   they read against the water regardless of how bright that patch of
   the photo is. */
.about-hero{position:sticky;top:0;overflow:hidden;border-radius:12px;border:1px solid var(--line);
  aspect-ratio:746/2108;background:#0c2431 center top/cover no-repeat;
  background-image:url('../Images/StrandbroElsa_AboutPicture.jpg');
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;padding:16px 16px 18px;gap:6px}
.about-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(4,12,17,.88),transparent);pointer-events:none}
.about-hero > *{position:relative}
.about-hero .ver{font-size:11.5px;color:#dcebf2;font-weight:600;letter-spacing:.03em}
.about-hero .tagline{font-style:italic;color:#dcebf2;font-size:12px;margin:0 0 4px}
.about-hero .quote{font-size:11.5px;font-style:italic;color:#dcebf2;line-height:1.5;
  border-top:1px solid rgba(255,255,255,.25);padding-top:10px;margin-top:2px}
.about-hero .quote cite{display:block;margin-top:4px;font-style:normal;color:#fff;font-size:11px}
.about-sections h2{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:8px}
.about-sections h2 svg{color:var(--cyan)}
.about-sections p{margin:6px 0;font-size:13px;line-height:1.6}
.about-sections .warn{border-left:2px solid var(--amber);padding-left:12px;color:#e8d9b4}
.about-log{max-height:200px;overflow-y:auto;font-size:12px;line-height:1.55;
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#081a24}
.about-log b{color:var(--cyan);font-weight:600}
.about-log ul{margin:2px 0 10px;padding-left:18px;color:var(--ink-dim)}
@media (max-width:760px){ .about-layout{grid-template-columns:1fr} .about-hero{position:static} }
#replaybar input{width:320px}
#replaybar b{font-size:13px;min-width:44px;text-align:center}
/* Speed over ground, laid out like the ECDIS docking page: the arrow sits on
   the side the bow/stern is moving towards, and shows only when it moves. */
.sg{display:grid;grid-template-columns:70px 18px 1fr 18px;align-items:center;gap:6px;margin:5px 0}
.sg label{font-size:11.5px;color:var(--ink-dim)}
.sg output{font-size:15px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;
  background:#0a1d28;border:1px solid var(--line);border-radius:3px;padding:2px 0}
.sg i{font-style:normal;color:var(--cyan);font-size:14px;text-align:center;line-height:1}
/* fore-and-aft: ▲ above the box when making way ahead, ▼ below it astern;
   both slots keep their height so the box doesn't jump when one empties */
.sg-fa{display:grid;justify-items:stretch;gap:2px}
.sg-fa i{height:14px}
#dock-berth{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
#dock-berth h2{margin-bottom:4px}
:root{--panel2:#0d2634}
#topbar{display:flex;align-items:center;gap:14px;padding:0 14px;height:52px;
  background:#07161f;border-bottom:1px solid var(--line);flex:0 0 auto}
#topbar .brand{display:flex;align-items:center;gap:8px;color:var(--cyan)}
#topbar .brand b{color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.2px}
#topbar .beta-tag{font-size:10px;font-weight:700;letter-spacing:.8px;color:#1b1406;background:var(--amber,#e8b84a);border-radius:4px;padding:1px 5px;margin-left:2px}
#topbar .crumb{color:var(--ink-dim);font-size:13.5px;white-space:nowrap}
#topbar .badge{font-size:11px;font-weight:600;letter-spacing:.06em;color:#9fe7c4;
  border:1px solid #2f8f5f;background:#12402c;border-radius:5px;padding:3px 7px}
#topbar .topbtns{display:flex;align-items:center;gap:8px;margin-left:auto}
#topbar .btngroup{display:flex;align-items:center;gap:8px;padding-left:8px;border-left:1px solid var(--line)}
#topbar .btngroup:first-child{padding-left:0;border-left:none}
#topbar .rates{margin-right:0}
/* Hardware lamps: grey = off / not connected, amber = connecting or only partly up,
   green = answering. The top-bar one sums up the three rows of the Hardware window. */
#hw-lamp,.hw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#3b5563;vertical-align:1px;flex:none}
#hw-lamp{margin-left:7px}
#hw-lamp.wait,.hw-dot.wait{background:var(--amber)}
#hw-lamp.on,.hw-dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
#hw-modal{position:absolute;inset:0;display:none;align-items:flex-start;justify-content:flex-end;
  padding:12px 14px;z-index:24;pointer-events:none}
#hw-card{pointer-events:auto;position:relative;max-width:470px;width:100%;background:#0a1e29;
  border:1px solid var(--line);border-radius:14px;padding:18px 20px 14px;box-shadow:var(--shadow)}
#hw-card h2{margin:0 0 10px}
#hw-close{position:absolute;top:12px;right:12px;width:30px;height:30px;padding:0;border-radius:8px;font-size:14px}
.hw-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.hw-what{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.hw-what span{color:var(--ink-dim);font-size:12.5px;overflow-wrap:anywhere}
.hw-what span.warn{color:var(--amber)}
.hw-row button{flex:none;min-width:96px}
.hw-note{margin:8px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-dim)}
.hw-note b{color:var(--ink)}
#topbar .topbtns button{padding:7px 14px}
#msg{flex:1;min-width:0;margin:0 6px;padding:7px 14px;text-align:center;font-size:13.5px;
  background:#0c2331;border:1px solid var(--line);border-radius:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
#msg b{color:var(--amber);font-weight:600}
#alert{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:none;z-index:16;
  padding:10px 22px;border-radius:10px;font-size:15px;font-weight:600;letter-spacing:.01em;
  box-shadow:var(--shadow);pointer-events:none;white-space:nowrap}
#alert.bad{background:#4a1b1b;border:1px solid #d8443a;color:#ffd9d4}
#alert.good{background:#12402c;border:1px solid #3cc47c;color:#c9f5dc}
#alert small{display:block;font-size:11.5px;font-weight:400;opacity:.85;margin-top:2px}
#paused-veil{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(4,12,17,.55);z-index:15;pointer-events:none}
#paused-veil span{font-size:26px;font-weight:600;letter-spacing:.18em;color:var(--ink);
  border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:12px 28px}

#console{display:grid;grid-template-columns:1.05fr .92fr 1.03fr;gap:12px;
  padding:10px 14px 12px;background:#081a24;border-top:1px solid var(--line);flex:0 0 auto}
.cbox{background:#0a1f2b;border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px}
.cbox h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:11.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim)}
.cbox h3 i{display:grid;place-items:center;width:17px;height:17px;border-radius:5px;font-style:normal;
  font-size:11px;background:#123a4c;color:var(--cyan)}

.engines{display:grid;grid-template-columns:1fr 86px 1fr;gap:6px;align-items:start}
.lever{display:flex;flex-direction:column;align-items:center;gap:4px;user-select:none}
.lname{font-size:11px;color:var(--ink-dim)}
.ltrack{position:relative;width:26px;height:128px;border-radius:13px;background:#071a24;
  border:1px solid #1d3f52;cursor:ns-resize;touch-action:none}
.lfill{position:absolute;left:3px;right:3px;background:#1b6b4a;border-radius:9px}
.lknob{position:absolute;left:-5px;width:36px;height:12px;margin-top:-6px;border-radius:4px;
  background:#3cc47c;box-shadow:0 0 9px rgba(60,196,124,.5)}
.lticks{position:absolute;inset:0;left:30px;width:60px;pointer-events:none}
.lticks u{position:absolute;left:0;width:6px;height:1px;background:#2b5468;text-decoration:none}
.lticks u.maj{width:11px;background:#4d7f96}
.lticks b{position:absolute;left:14px;font-size:8.5px;font-weight:400;color:#6f93a6;
  transform:translateY(-50%);white-space:nowrap}
.lval{display:flex;align-items:baseline;gap:4px;margin-top:2px}
.lval b{font-size:19px;font-weight:600}
.lval span{font-size:10px;color:var(--ink-dim)}
.lorder{font-size:11px;color:var(--cyan);min-height:14px}
.shipview{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:10px}
.shipview .sync{margin-top:0}

.rudders{display:grid;grid-template-columns:1fr 136px 1fr;gap:4px;align-items:start;justify-items:center}
.rotbox:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:1px}
.rotbox .gval{margin-top:-4px}
.rotbox .sync{margin-top:4px}
.rn{stroke:#e8eef2;stroke-width:2.6;stroke-linecap:round}
.gauge{display:flex;flex-direction:column;align-items:center;gap:2px;user-select:none}
.gauge svg{cursor:ew-resize;touch-action:none}
.gname{font-size:11px;color:var(--ink-dim)}
.gauge .gn{stroke:var(--amber);stroke-width:2.4;stroke-linecap:round}
.gval{display:flex;flex-direction:column;align-items:center;margin-top:-6px}
.gval b{font-size:17px;font-weight:600}
.gval span{font-size:10px;color:var(--ink-dim)}
.sync{padding:7px 14px;font-size:11px;line-height:1.3;border-radius:8px}
.sync small{color:var(--ink-dim)}
.sync.on{background:#12402c;border-color:#2f8f5f}
.sync.on small{color:#9fe7c4}

.centerSlot{display:flex;flex-direction:column;align-items:center}
.viewTabs{display:flex;gap:3px;margin-bottom:5px}
.viewTabs button{background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);
  border-radius:6px;padding:3px 8px;font-size:10px;cursor:pointer}
.viewTabs button.on{background:var(--cyan);color:#04202b;border-color:var(--cyan);font-weight:600}
.apLamp{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-dim);vertical-align:middle}
.apLamp.on{background:var(--green);box-shadow:0 0 4px var(--green)}
.an{stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round}
#ap-bug{fill:var(--amber)}
.apset{flex-direction:row;align-items:center;gap:6px}
.apstep{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:5px;
  width:20px;height:20px;line-height:1;font-size:13px;padding:0}
.apstep:active{background:#123044}
.gauge.ap-driven{opacity:.45;pointer-events:none}

.thr{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}
.thr .units{display:flex;gap:8px}
.btlamps{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:2px 0 14px}
.lamprow{display:flex;gap:8px}

/* the thruster control as it looks on her bridge: one scale, a lever each side */
.btl{display:flex;flex-direction:column;gap:3px;min-width:0}
.btrow{display:flex;align-items:center;gap:9px}
.btrail{position:relative;flex:1;height:15px;border-radius:8px;
  background:linear-gradient(#0a1d27,#0f2a37);border:1px solid #1d3f52;
  cursor:ew-resize;touch-action:none}
.btknob{position:absolute;top:-3px;width:16px;height:21px;margin-left:-8px;border-radius:4px;
  background:linear-gradient(#d4d8dc,#8d949b);border:1px solid #5c646b;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}
.btknob::after{content:"";position:absolute;left:50%;top:4px;width:1.5px;height:13px;
  margin-left:-0.75px;background:#5c646b;border-radius:1px}
.btknob.aux{background:linear-gradient(#c8a679,#8a6f47);border-color:#6b5334}
.btknob.aux::after{background:#6b5334}
.btscale{position:relative;height:19px;border-radius:3px;overflow:hidden;
  margin:1px 66px 1px 0;border:1px solid #24485c}
.bhalf{position:absolute;top:0;bottom:0;width:50%}
.bhalf.port{left:0;background:linear-gradient(90deg,#a8322b,#7e2621)}
.bhalf.stbd{left:50%;background:linear-gradient(90deg,#1a7346,#22a05f)}
.btscale u{position:absolute;top:0;width:1px;height:5px;background:rgba(255,255,255,.5)}
.btscale span{position:absolute;top:5px;transform:translateX(-50%);font-size:9px;
  font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.btval{min-width:57px;text-align:right;font-size:13px;font-weight:600}
.btfeet{display:flex;justify-content:space-between;gap:10px;margin-right:66px}
.btfeet span{font-size:10px;color:var(--ink-dim)}
.ucol{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--ink-dim)}
.tunit{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:#0e2a36;border:1px solid #24485c;color:#5f7a88}
.tunit.on{background:#17553a;border-color:#3cc47c;color:#c9f5dc;box-shadow:0 0 10px rgba(60,196,124,.4)}
.power{min-width:0}
.prow{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;color:var(--ink-dim)}
.prow b{font-size:15px;color:var(--ink)}
.pfoot{font-size:10.5px;color:var(--ink-dim);margin-top:1px}
.cmds{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cmds button{padding:8px 12px}
button.danger{background:#4a1b1b;border-color:#8a3030}
button.danger:hover{background:#5c2222}
.rates{display:flex;gap:4px;margin-left:auto}
.rates button{padding:6px 9px;font-size:12px;min-width:38px}
.rates button.on{background:#123a4c;border-color:var(--cyan);color:var(--ink)}

/* shrunk: the readouts stay, everything you would grab with a mouse goes */
#console{position:relative}
.contab{position:absolute;left:50%;transform:translateX(-50%);top:-12px;z-index:3;
  width:52px;height:20px;padding:0;font-size:11px;line-height:1;border-radius:6px;
  background:#0e2a36;border:1px solid #24485c;color:#8fa8b4}
.contab:hover{background:#123a4c;color:var(--ink)}

/* the shrunk strip: readouts only, small enough to leave the chart the screen */
#mini-console{display:none;position:relative;align-items:flex-start;justify-content:center;
  gap:12px;padding:7px 14px 9px;background:#081a24;border-top:1px solid var(--line);flex:0 0 auto}
.mgroup{display:flex;flex-direction:column;gap:3px}
.mhead{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-dim);padding-left:2px}
.mrow{display:flex;align-items:center;gap:8px;min-height:40px}
.mrow>button:not(.minisync){padding:10px 13px;font-size:12px}
body.compact #console{display:none}
body.compact #mini-console{display:flex}
#mini-console .tile{min-width:62px;padding:4px 8px 3px;border-radius:8px;text-align:center;
  background:#0a1f2b;border:1px solid var(--line)}
#mini-console .tile b{display:block;font-size:16px;font-weight:600;line-height:1.15}
#mini-console .tile span{font-size:9.5px;color:var(--ink-dim);letter-spacing:.02em}
#mini-console .tile.spd b{color:var(--cyan)}
#mini-console .vr{width:1px;height:40px;background:var(--line);margin:14px 1px 0}
#mini-console .lamps{display:flex;gap:5px}
#mini-console .lamps i{width:13px;height:13px;border-radius:50%;
  background:#0e2a36;border:1px solid #24485c}
#mini-console .lamps i.on{background:#3cc47c;border-color:#7ee0aa;
  box-shadow:0 0 8px rgba(60,196,124,.6)}
#mini-console button{padding:6px 11px;font-size:12px}
.minisync{padding:5px 8px;font-size:10px;border-radius:6px;background:#12402c;
  border:1px solid #2f8f5f;color:#9fe7c4}
.minisync.off{background:#0e2a36;border-color:#24485c;color:#5f7a88}
.ctl label{display:block;font-size:11.5px;color:var(--ink-dim);margin-bottom:2px}
.ctl .val{font-size:14px;font-weight:600}
input[type=range]{width:100%;accent-color:var(--cyan);background:transparent}
input[type=range]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.chk{white-space:nowrap;padding-bottom:2px}
.units{display:flex;gap:6px;margin-top:6px}
.chk{font-size:12.5px;color:var(--ink-dim);display:flex;align-items:center;gap:5px;cursor:pointer}
.chk input{accent-color:var(--cyan)}
button{font:inherit;font-size:13px;color:var(--ink);background:#11303f;border:1px solid #22506a;
  border-radius:7px;padding:8px 12px;cursor:pointer}
button:hover{background:#17404f}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button.primary{background:#1c5b3c;border-color:#2f8f5f}
button.primary:hover{background:#226e48}
button:disabled{opacity:.4;cursor:not-allowed}
#veil{position:absolute;inset:0;background:rgba(4,12,17,.9);display:flex;
  align-items:flex-start;justify-content:center;padding:12px 20px 14px;z-index:20;
  overflow-y:auto;overscroll-behavior:contain}
#veil .card{max-width:1150px;width:100%;background:#0a1e29;border:1px solid var(--line);
  border-radius:14px;padding:13px 20px;box-shadow:var(--shadow)}
#veil h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.4px}
#veil h4{margin:0 0 3px;font-size:11.5px;font-weight:600;color:var(--cyan)}
#veil .sub{color:var(--ink-dim);margin:5px 0 8px;font-size:13px}
#veil .sub.small{font-size:12px;margin:6px 0 0;line-height:1.35}
.bcols{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:start;
  padding:6px 0 2px}
#veil table{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:13px}
#veil td{padding:3px 0;border-bottom:1px solid #14313f}
.sep{width:1px;height:22px;background:#22506a;margin:0 3px}
#veil .big{margin-top:4px;padding:10px 20px;font-size:14px}
#veil .narrow{max-width:520px;margin:0 auto}
.startrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid #14313f;padding-top:10px;margin-top:2px}
.credit{font-size:11.5px;line-height:1.5;color:#5f7a88;text-align:right}
.credit b{color:var(--ink-dim);font-weight:600}
#veil td:last-child{text-align:right;font-weight:600}
.wxset{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:5px 0 0;font-size:12px;color:var(--ink-dim)}
.wxset input{width:60px;background:#0a1d28;border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:4px 9px;font:inherit;font-variant-numeric:tabular-nums;text-align:center}
.wxset button{padding:5px 9px;font-size:11.5px}
.wxset .apply-btn{padding:4px 10px;font-size:11px;margin-left:2px}
.wxset #ck-time{width:86px} .wxset #ck-date{width:128px} .wxset input[type=time],.wxset input[type=date]{color-scheme:dark}
.wx-title{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-dim);margin:8px 0 4px}
.pill{border-radius:999px}
.wxadv{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(4,12,17,.6);padding:16px}
.wxadv-card{max-width:560px;width:100%;background:#0a1e29;border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;box-shadow:var(--shadow);max-height:calc(100vh - 32px);overflow-y:auto}
.wxadv-card h3{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:13px;font-weight:600}
.wxadv-card .wxset input{width:64px}
.wxadv-card select{background:#0a1d28;border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:4px 9px;font:inherit}

/* ---- shared: hero banners, icons, cards (briefing + about) ---- */
.micon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  flex:none;display:block}
.hero{position:relative;border-radius:11px;overflow:hidden;padding:11px 16px;margin:0 0 8px;
  display:flex;align-items:center;gap:14px;border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(7,22,31,.6),rgba(7,22,31,.15)),
    radial-gradient(ellipse at 15% 130%,rgba(90,209,230,.22),transparent 60%),
    linear-gradient(160deg,#0c2431,#173445 55%,#0e2836);
  background-size:cover;background-position:center}
/* Real port photos come from the port pack's `hero` (heroStyle() in
   js/menu.js), under the same darkening layers so the title text reads the
   same whatever is underneath. */
.hero-icon{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(90,209,230,.12);
  border:1px solid rgba(90,209,230,.35);display:grid;place-items:center;color:var(--cyan)}
.hero-icon svg{width:17px;height:17px}
.hero-titles{flex:1;min-width:0}
.hero-titles h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.01em}
.hero-titles .hero-route{color:var(--cyan);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  margin-top:2px}
.hero-ship{flex:none;display:flex;align-items:center;gap:9px;padding:6px 12px;border-radius:9px;
  background:rgba(4,14,20,.45);border:1px solid var(--line);font-size:10px;color:var(--ink-dim);
  letter-spacing:.03em;text-transform:uppercase;line-height:1.4}
.hero-ship svg{color:var(--cyan)}
.hero-ship b{display:block;color:var(--ink);font-size:11.5px;letter-spacing:.02em;text-transform:none}
@media (max-width:640px){ .hero-ship{display:none} }

.bpanel{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:11px;
  padding:9px 13px;margin:0}
.bpanel > h3{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan)}
.bpanel > h3 svg{color:var(--cyan)}
details.bpanel summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan)}
details.bpanel summary::-webkit-details-marker{display:none}
details.bpanel summary::after{content:"";margin-left:auto;width:7px;height:7px;flex:none;
  border-right:1.6px solid var(--ink-dim);border-bottom:1.6px solid var(--ink-dim);
  transform:rotate(45deg);transition:transform .15s}
details.bpanel[open] summary::after{transform:rotate(-135deg)}
details.bpanel > *:not(summary){margin-top:6px}

/* Mission orders scrolls internally rather than pushing the whole card
   taller — Gdynia's six-step inbound list was enough on its own to push
   "Start the run" off a full-height screen. Scrollbar styled to actually
   be visible against the dark panel, not just functionally present. */
.orders{list-style:none;margin:0;padding:0 4px 0 0;display:flex;flex-direction:column;gap:5px;
  counter-reset:ord;max-height:210px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(90,209,230,.45) rgba(255,255,255,.04)}
.orders::-webkit-scrollbar{width:8px}
.orders::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px}
.orders::-webkit-scrollbar-thumb{background:rgba(90,209,230,.45);border-radius:4px}
.orders::-webkit-scrollbar-thumb:hover{background:rgba(90,209,230,.7)}
/* Each order's text is arbitrary rich HTML (plain text mixed with <b>
   tags) — that broke badly under display:flex, because a flex container
   turns every run of text between inline elements into its own flex item,
   laid out side by side instead of wrapping as normal text (item 5, the
   berthing line, was the worst hit: four "columns" instead of a sentence).
   A positioned badge over ordinary block flow avoids that entirely. */
.orders li{counter-increment:ord;position:relative;list-style:none;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:8px;
  padding:6px 10px 6px 32px;font-size:12px;line-height:1.4}
.orders li::before{content:counter(ord);position:absolute;left:8px;top:7px;
  width:18px;height:18px;border-radius:50%;background:rgba(90,209,230,.14);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}

.icrow{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:12px;
  border-bottom:1px solid #10262f}
.icrow:last-child{border-bottom:none}
.icrow svg{color:var(--cyan)}
.icrow span{color:var(--ink-dim);flex:1}
.icrow b{font-weight:600;color:var(--ink);text-align:right}

/* Port and Direction only ever hold two short pills each — Other scenarios
   can hold five, so it gets most of the row instead of an equal third. */
.bmodebar{display:grid;grid-template-columns:180px 180px 1fr;gap:8px;margin:8px 0}
.bmode-group{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:9px;
  padding:6px 9px}
.bmode-label{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:5px}
.bmode-label svg{color:var(--cyan)}
.pillrow{display:flex;gap:5px;flex-wrap:wrap}
.pillrow button{padding:5px 11px;border-radius:999px;font-size:11.5px}
@media (max-width:820px){ .bmodebar{grid-template-columns:1fr} }
/* the start menu: three lists in the briefing's own mode-bar boxes */
.menubar{grid-template-columns:repeat(3,1fr)}
.menubar .bmode-group{display:flex;flex-direction:column;gap:6px;cursor:pointer}
.menubar select{width:100%;padding:7px 9px;border-radius:7px;background:var(--sea);color:var(--ink);
  border:1px solid var(--line);font:inherit;font-size:13.5px}
.menubar select:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.menu-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mscn{margin-top:12px}
.menu-err{color:var(--amber);font-size:13px;margin:6px 0}
@media (max-width:820px){ .menubar{grid-template-columns:1fr} }

/* Two panels, not three — Scenario notes was dropped (its content either
   duplicated the mission-orders/description text above, or moved into
   Vessel particulars), and Controls gets the room that freed up: enough
   to lay out all four key groups side by side again instead of the two
   cramped columns that were wrapping mid-phrase. */
.bpanels3{display:grid;grid-template-columns:0.85fr 2fr;gap:10px;margin:8px 0 2px}
@media (max-width:900px){ .bpanels3{grid-template-columns:1fr} }
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 12px;font-size:11px;margin:0}
.keys section{min-width:0}
.keys div{color:var(--ink-dim);line-height:1.5;display:flex;align-items:baseline;gap:6px}
.keys .hint{display:block}
.keys b{color:var(--ink);font-weight:600;background:#0d232e;border:1px solid #24485c;
  border-radius:5px;padding:2px 6px;font-size:10px;white-space:nowrap;flex:none}
@media (max-width:820px){ .keys{grid-template-columns:1fr 1fr} }
.keys .hint{color:#5f7a88;font-style:italic;margin-top:1px;line-height:1.3}
.hidden{display:none!important}
@media (max-width:820px){
  .bcols{grid-template-columns:1fr;gap:14px}
}
@media (max-width:1100px){
  #console{grid-template-columns:1fr 1fr}
  .cbox:last-child{grid-column:1/-1}
  #topbar .crumb,#topbar .badge{display:none}
  #dock{display:none}
  /* On a small window anchor these to the top of the stage instead, so a
     short window can't push them up above the visible chart area. */
  #btn-radio-icon{bottom:auto;top:12px;right:12px}
  #dev-panel{bottom:auto;top:12px;right:64px}
  #nav,#wx{font-size:13px;padding:8px 10px;min-width:0}
  .big{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* score card and the top-20 boards */
.scorebox{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.score-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.score-total span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.score-total b{font-size:30px;font-weight:700;color:var(--cyan);letter-spacing:-.5px}
.score-lines{width:100%;font-size:12.5px;border-collapse:collapse}
.score-lines td{padding:2px 0}
.score-lines td:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.score-lines .neg{color:var(--amber)} .score-lines .pos{color:var(--green)}
.score-lines tr.sum td{border-top:1px solid var(--line);padding-top:4px;font-weight:600}
.score-lines tr.grp td{padding-top:7px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.board-entry{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.board-entry input{flex:1;min-width:160px;padding:7px 9px;border-radius:7px;border:1px solid var(--line);
  background:var(--sea);color:var(--ink);font:inherit;font-size:13.5px}
.board{margin-top:8px}
.board-title{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px}
.board ol{margin:0;padding-left:22px;font-size:12.5px}
.board li{padding:1px 0}
.board li span{display:inline-block;min-width:9em}
.board li b{display:inline-block;min-width:3.5em;text-align:right;color:var(--ink)}
.board li i{font-style:normal;color:var(--ink-dim);margin-left:10px}
.board li.me{color:var(--cyan)} .board li.me b{color:var(--cyan)}

/* before the run (the start menu and the briefing): nothing of the ship's own
   until "Start the run" */
body.in-menu #console, body.in-menu #mini-console, body.in-menu #nav, body.in-menu #wx,
body.in-menu #dock, body.in-menu #dev-panel, body.in-menu #btn-radio-icon,
body.in-menu .crumb, body.in-menu #t-badge, body.in-menu #msg, body.in-menu #btn-pause,
body.in-menu .rates, body.in-menu #btn-devmap, body.in-menu #btn-menu, body.in-menu #btn-restart{display:none!important}

/* loose panels: the bar on the top edge drags them (js/panels.js) */
.panel .grip{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:42px;height:9px;
  border-radius:0 0 6px 6px;background:rgba(90,209,230,.18);cursor:grab;touch-action:none}
.panel .grip::after{content:"";position:absolute;left:12px;right:12px;top:3px;height:2px;border-radius:2px;
  background:rgba(223,234,240,.45)}
.panel .grip:hover{background:rgba(90,209,230,.4)}
.panel.dragging{box-shadow:0 14px 40px rgba(0,0,0,.6);outline:1px solid rgba(90,209,230,.5)}
.panel.dragging .grip{cursor:grabbing}
@media (max-width:820px){ .panel .grip{display:none} }

/* the radar: a Koden-style display */
#radar{top:80px;right:12px;width:430px;padding:8px 9px 9px;background:#08132e;border-color:#1c2f5c;
  resize:horizontal;overflow:hidden;min-width:260px;max-width:92vw}
#radar .rd-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
#radar .rd-head h2{flex:1;margin:0;color:#9fb6e6}
#radar .rd-head h2 .dim{color:#5a6f9c;font-weight:500;text-transform:none;letter-spacing:0}
#radar .rd-head button{width:26px;height:24px;padding:0;background:#0f1f48;border:1px solid #23396b;color:#c8d6f2;border-radius:5px}
#radar.folded #rd-body{display:none}
/* in a window of its own: the whole window, the picture as big as it fits */
#rd-full{display:none}
#radar.popped #rd-full{display:block}
#radar.popped #rd-fold{display:none}
#radar.popped{position:static!important;box-sizing:border-box;width:100%!important;height:100%!important;
  max-width:none!important;border:none;border-radius:0;resize:none;padding:12px}
#radar.popped #rd-body{display:flex;flex-direction:column;align-items:center}
#radar.popped #rd-body>:not(#rd-cv){align-self:stretch}
#radar.popped.wide #rd-body{display:grid;grid-template-columns:auto 300px;column-gap:18px;
  align-items:start;justify-content:center}
#radar.popped.wide #rd-cv{grid-column:1;grid-row:1/span 9}
#radar.popped.wide #rd-body>:not(#rd-cv){grid-column:2}
#radar.popped.wide #rd-data{min-height:160px}
#rd-cv{display:block;border-radius:6px;background:#050c26;cursor:crosshair}
#rd-data{font:11.5px/1.45 ui-monospace,Consolas,monospace;color:#cfe0ff;min-height:34px;margin:6px 2px}
#rd-data .ais{color:#7dffa0} #rd-data .arpa{color:#fff} #rd-data .dim{color:#5a6f9c}
#radar .rd-ctrl{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center}
#radar .rd-ctrl button{flex:1 1 auto;min-width:44px;padding:4px 6px;font:600 11px ui-monospace,Consolas,monospace;
  background:#0f1f48;border:1px solid #23396b;color:#c8d6f2;border-radius:4px}
#radar .rd-ctrl button.on{background:#284a8f;border-color:#4d78c9;color:#fff}
#radar .rd-ctrl button.live{outline:2px solid #ffaa3c}
#radar .rd-ctrl b{font:600 12px ui-monospace,Consolas,monospace;color:#ffe9a0;min-width:58px;text-align:center}
#radar .rd-sliders label{flex:1;display:flex;align-items:center;gap:5px;font:600 10.5px ui-monospace,Consolas,monospace;color:#8fa6d6}
#radar .rd-sliders input{flex:1;min-width:40px}
#btn-radar.on{background:#284a8f;border-color:#4d78c9}
body.in-menu #radar, body.in-menu #btn-radar, body.in-menu #btn-3d, body.in-menu #btn-layout{display:none!important}
@media (max-width:820px){ #radar{left:8px;right:8px;width:auto;top:60px} }

/* top bar: the message line takes the room between the scenario and the
   buttons; everything used now and then sits under ☰ */
#topbar #msg{position:static;transform:none;max-width:none;box-shadow:none;pointer-events:auto}
#topbar .topmenu{position:relative}
#btn-more{font-size:17px;line-height:1;padding:6px 12px!important;position:relative}
#more-lamp{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:transparent}
#more-lamp.wait{background:var(--amber)} #more-lamp.on{background:var(--green);box-shadow:0 0 6px var(--green)}
#more-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:200px;
  background:#0a1e29;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:var(--shadow);
  flex-direction:column;gap:2px}
#more-menu.open{display:flex}
#topbar #more-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  padding:8px 12px;border:none;background:none;border-radius:6px;font-size:13.5px}
#topbar #more-menu button:hover,#topbar #more-menu button:focus-visible{background:#123a4c}
#more-menu hr{border:none;border-top:1px solid var(--line);margin:4px 2px}

/* the corner view (#pip) and the bridge view's container: small in the
   panel, or the whole stage behind the other panels when it is big */
#pip{bottom:12px;right:102px;width:380px;padding:6px 7px 7px;background:#08132e;border-color:#1c2f5c}
#pip .pip-head{display:flex;align-items:center;gap:6px;margin-bottom:5px}
#pip .pip-head h2{flex:1;margin:0;color:#9fb6e6}
#pip .pip-head button{width:26px;height:24px;padding:0;background:#0f1f48;border:1px solid #23396b;color:#c8d6f2;border-radius:5px}
#pip-body{position:relative;height:214px;resize:vertical;overflow:hidden;border-radius:6px;min-height:120px;max-height:70vh}
#pip.folded #pip-body{display:none}
#pip.gone{display:none}
#v3host{position:relative;width:100%;height:100%;background:#9fb7c9}
#v3host.big{position:absolute;inset:0}
#v3host.small .v3box:not(#v3top):not(#v3status){display:none}
#v3host.small #v3top{padding:2px 7px;left:5px;top:5px;font-size:11px}
#v3host.small #v3nav{display:none}
#pip-body #chart{cursor:pointer}
body.in-menu #pip{display:none!important}
/* the big bridge view: its title and buttons along the top middle, clear of
   the panels that sit in the corners */
#v3host.big #v3btns{right:auto;left:50%;transform:translateX(-50%);max-width:70%;top:8px}
#v3host.big #v3top{left:50%;transform:translateX(-50%);top:56px}
#v3host.big #v3hint{top:100px}
#v3host.big #v3keys{left:50%;transform:translateX(-50%);bottom:8px;white-space:nowrap}

/* a bow thruster starting blinks its button and lamp until it runs — done in
   hud() by toggling .on, not with a CSS animation, so it keeps the console
   lamp's exact rhythm and can't be stopped by a browser that pauses animations */