/* DCOSMOS-SHIP: the ship builder window (modal over the game), and the
   Ship Interior view at the end of this file (SC-SHIP-INTERIOR).
   The builder itself lives in an isolated same-origin iframe
   (assets/ship-generator.html) with its own three.js — this file only
   styles the frame around it. */
/* The builder owns everything below the nav: an opaque full-bleed surface,
   never a floating card -- no size caps, no border, no rounded frame, no
   translucent backdrop letting the view behind ghost through (owner ruling
   2026-08-22, "no secondary letterbox frame"). */
/* SC-FB12: --header-h is set from the header's real offsetHeight by an
   inline script right after the header in index.html, before first paint,
   so the 108px fallback below never actually runs -- it is the header's
   own default height (12px padding + the 84px atlas button + 12px
   padding, no width media query active), kept honest instead of the
   stale 96px pre-thin number that used to sit here and left a dead band
   under the header on the rare path where this fallback did apply. */
.ship-overlay,
.critter-overlay {
  position: fixed;
  top: var(--header-h, 108px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #05070c;
  display: flex;
}
.ship-overlay[hidden],
.critter-overlay[hidden] { display: none; }
.ship-overlay-inner,
.critter-overlay-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #05070c;
  overflow: hidden;
  /* SC-HEADER-CLEARANCE: the overlay starts at the divider line, so the
     nav buttons' bottom halves hang over its top edge. This padding keeps
     the iframe below them; the band behind the buttons stays this
     overlay's own opaque #05070c. The builder page pairs with it: its
     top-anchored controls sit at small offsets (14px panel, 30px tabs and
     gear -- assets/ship-generator.css) that this pad completes, in place
     of the 56px/72px in-page offsets they carried before. */
  padding-top: var(--nav-hang, 42px);
}
.ship-overlay-inner iframe,
.critter-overlay-inner iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
  background: #05070c;
}
/* SC-SHIP-INTERIOR: the builder's close control, a 44px round X in the
   overlay's top-right corner, above the iframe and the floating Save
   button. The overlay is its own stacking context under the header and
   the fixed options gear, so the X sits in the band right of the nav
   buttons and left of the gear column (60px in from the edge) instead of
   under the gear itself; on a phone the gear and the sound-edit button
   stack down that column and the builder's own gear sits below them.
   js/ship-screen.js wires it to closeShipBuilder, the same call Escape
   and a header nav press make. */
.ship-close { position: absolute; top: 12px; right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 6; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(4, 8, 16, 0.62); color: #f1f5f9; font-size: 28px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ship-close:hover { border-color: var(--accent); color: var(--accent); }
/* From 560px up the nav row ends 104px in from the right edge, exactly where
   this button starts, so it has the corner to itself. On a narrower window
   the row runs past that point and the header paints above the overlay, so
   the nav buttons covered the top of the X and a tap there opened a nav
   screen instead of closing the builder. Below 560px the X drops under the
   nav buttons, into the free band above the builder's own controls
   (measured at 375px: clear of the Save button and the builder's gear). */
@media (max-width: 559px) { .ship-close { top: calc(var(--nav-hang, 42px) + 8px); } }
/* On phones the builder's panel is dense — give it the whole screen. */
@media (max-width: 640px) {
  .ship-overlay,
  .critter-overlay { padding: 0; }
  .ship-overlay-inner,
  .critter-overlay-inner { width: 100%; height: 100%; border-radius: 0; border: 0; }
}
/* ── First-run welcome from the dock officer ── */
.ship-welcome {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(4, 8, 16, 0.9);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ship-welcome[hidden] { display: none; }
.ship-welcome-card {
  width: min(400px, 100%);
  background: linear-gradient(180deg, #0d1526, #080d18);
  border: 1px solid rgba(120, 160, 220, 0.28);
  border-radius: 16px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
  padding: 28px 26px 24px;
  text-align: center;
  /* Owner 2026-09-05: a long line pushed the reply buttons off the bottom of the
     card and the player saw half a button. The card is a column bounded by the
     room it has, and .ship-welcome-text is the only part that scrolls, so the
     portrait, the name and the replies are always whole and in place. */
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}
/* Owner 2026-09-03: the portrait is large enough to read her face. */
.ship-welcome-avatar {
  width: 150px;
  height: 150px;
  margin: 0 auto 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(159, 208, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  flex: 0 0 auto;
}
/* The portrait (assets/crew/vela.png, the owner's file, drawn on a transparent background) fills the round frame; the frame's own colour shows through the transparent parts. */
.ship-welcome-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; background: radial-gradient(circle at 50% 36%, #1d3050, #0a1120); }
.ship-welcome-name {
  color: #9fd0ff;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ship-welcome-text {
  color: #dbe6f5;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px;
  overflow-y: auto;
  min-height: 0;
}
.ship-welcome-go {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(180deg, #2f6db0, #245a94);
  border: 1px solid rgba(159, 208, 255, 0.35);
  border-radius: 10px;
  color: #eaf3ff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.ship-welcome-go:hover { background: linear-gradient(180deg, #397dc6, #2b689f); }
/* SC-ARRIVAL-MESSAGE: the same card as a crew message (js/crew-message.js).
   The buttons sit in one row element, rebuilt on every show; the centered
   first-run form stacks them, the side form puts them side by side. */
.ship-welcome-actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
/* A line longer than the room the card has scrolls inside .ship-welcome-text.
   js/crew-message.js puts this class on while there is more below the fold and
   takes it off at the end, so the last visible line fades out instead of being
   sliced through the middle and looking like the text simply stopped. */
.ship-welcome-text-more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%); }
/* The side form: the card docked at the right edge over the Ship Interior,
   under the band the nav buttons hang into, with no dimming backdrop. Only
   the card takes the pointer; the interior around it stays usable. The
   layer's bottom edge stops above the interior's floating controls (the
   bottom 45% of the interior, which spans the viewport under the header,
   plus the 12px gap, the 48px control and an 8px margin), and the card
   scrolls inside itself when the space left is shorter than its content,
   so the card never covers a control. */
.ship-welcome.ship-welcome-side { background: transparent; backdrop-filter: none; align-items: flex-start; justify-content: flex-end; padding: calc(var(--header-h, 54px) + var(--nav-hang, 42px) + 40px) 16px 0; bottom: calc((100dvh - var(--header-h, 54px)) * 0.3 + 68px); pointer-events: none; } /* owner 2026-09-03: 0.45 clipped the buttons on a desktop window with the larger portrait. Owner 2026-09-04: the gap under the hanging nav buttons was 12px, which left the card's top corner touching them; 40px drops the card clear of them. */
.ship-welcome-side .ship-welcome-card { pointer-events: auto; width: min(320px, 100%); padding: 18px 18px 16px; }
/* Owner 2026-09-05: the portrait was a flat 108px with one step down to 84px
   below a 640px-tall viewport, so a 667px window kept the full portrait and had
   less room for the line under it than a shorter window did. It now scales with
   the viewport between 56 and 108px: the same size as before on a tall screen,
   and a line or two of text given back on a short one. */
.ship-welcome-side .ship-welcome-avatar { width: clamp(56px, 11vh, 108px); height: clamp(56px, 11vh, 108px); margin-bottom: 8px; }
.ship-welcome-side .ship-welcome-text { margin-bottom: 14px; }
/* A short viewport (a phone held sideways): a smaller avatar and tighter spacing so the whole card fits above the controls. */
@media (max-height: 640px) {
  .ship-welcome-side .ship-welcome-card { padding: 12px 14px 12px; }
  .ship-welcome-side .ship-welcome-name { margin-bottom: 6px; }
  .ship-welcome-side .ship-welcome-text { margin-bottom: 10px; }
}
/* A narrow viewport: the Sound Edit toggle (css/cosmos-audio-edit.css) moves to the right edge under the header at 480px and below, 36px tall from 60px down, so the card starts under it. Owner 2026-09-04: both numbers here go up by the same 28px as the wide rule above, since this floor is what a phone actually gets. */
@media (max-width: 480px) {
  .ship-welcome.ship-welcome-side { padding-top: max(calc(var(--header-h, 54px) + var(--nav-hang, 42px) + 40px), 104px); }
}
/* The same side card docked at the left edge instead of the right
   (js/crew-message.js, option left). Vela sits in the left seat of the
   interior, so her arrival card speaks from that side and Rook's stays on the
   right. Horizontal placement is the only difference: the width, the top
   edge, the bottom edge, the padding and the card itself are unchanged. */
.ship-welcome.ship-welcome-side.ship-welcome-left { justify-content: flex-start; }
.ship-welcome-side .ship-welcome-actions { flex-direction: row; }
.ship-welcome-side .ship-welcome-go { flex: 1 1 0; width: auto; min-height: 44px; padding: 10px 12px; }
/* ── Ship window: the Save button floats over the builder's own viewport,
   just left of its gear control. No header bar holds it any more. */
.ship-lockin {
  min-height: 40px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2f6db0, #245a94);
  border: 1px solid rgba(159, 208, 255, 0.4);
  border-radius: 9px;
  color: #eaf3ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.ship-lockin:hover:not(:disabled) { background: linear-gradient(180deg, #397dc6, #2b689f); }
/* Grey and inert once there is nothing left to save -- the same dark
   panel grey the builder's own buttons use (assets/ship-generator.html
   .tweaks button), not just a dimmed blue, so "Saved" reads as off. */
.ship-lockin:disabled {
  background: #121820;
  border-color: #2a3542;
  color: #7d8ea6;
  cursor: default;
}
/* Floats on top of the 3D viewport. js/ship-screen.js measures the
   builder's gear button through the iframe and sets left/top so this
   sits immediately to its left, on every open, resize, and text change.
   The values below are only a brief starting position before that first
   measurement lands. The dark ring behind the blue fill is what keeps the
   button readable over a bright ship rendered right underneath it. */
.ship-lockin-float {
  position: fixed;
  z-index: 5;
  top: calc(var(--header-h, 108px) + var(--nav-hang, 42px) + 26px);
  left: calc(100% - 76px);
  box-shadow: 0 0 0 8px rgba(4, 8, 16, 0.35), 0 6px 20px rgba(0, 0, 0, 0.55);
}
/* ── Reusable confirmation dialog ── the two account buttons that open it
   (reset intro, reset account) moved into the CONFIG options sheet (owner
   order 2026-08-22) -- their own styling now lives in cosmos-options.css
   next to the sheet that holds them; this dialog itself stayed put. ── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(4, 8, 16, 0.9);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-overlay[hidden] { display: none; }
.confirm-card {
  width: min(380px, 100%);
  background: linear-gradient(180deg, #0d1526, #080d18);
  border: 1px solid rgba(120, 160, 220, 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
  padding: 24px 22px 20px;
}
.confirm-card.confirm-danger-mode { border-color: rgba(220, 90, 90, 0.45); }
.confirm-title { color: #eaf3ff; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.confirm-text { color: #b9c7db; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
/* Title-only dialogs (the Atlas "Voyage to <place>?" question) hide the body
   paragraph, which removed the 20px it contributed under the title and left a
   short line stranded in a card sized for a paragraph. js/account.js adds
   .confirm-compact whenever there is no body text: the card narrows to the
   width the title and buttons actually need and the title keeps the same
   distance from the button row that a dialog with body text has. */
.confirm-card.confirm-compact { width: min(300px, 100%); padding: 20px 20px 18px; }
.confirm-compact .confirm-title { margin-bottom: 18px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-cancel, .confirm-ok {
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.confirm-cancel {
  background: rgba(30, 44, 70, 0.7);
  border: 1px solid rgba(120, 160, 220, 0.3);
  color: #cfe3ff;
}
.confirm-cancel:hover { background: rgba(44, 62, 96, 0.85); }
.confirm-ok {
  background: linear-gradient(180deg, #2f6db0, #245a94);
  border: 1px solid rgba(159, 208, 255, 0.35);
  color: #eaf3ff;
}
.confirm-ok:hover { background: linear-gradient(180deg, #397dc6, #2b689f); }
.confirm-danger-mode .confirm-ok {
  background: linear-gradient(180deg, #c0392b, #97271c);
  border-color: rgba(255, 140, 140, 0.5);
  color: #ffffff;
}
.confirm-danger-mode .confirm-ok:hover { background: linear-gradient(180deg, #d0442f, #a82c20); }
/* ── One-time notice: the game has changed ── */
.regen-notice {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 8, 16, 0.9);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.regen-notice[hidden] { display: none; }
.regen-notice-card {
  width: min(400px, 100%);
  background: linear-gradient(180deg, #0d1526, #080d18);
  border: 1px solid rgba(120, 160, 220, 0.28);
  border-radius: 16px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
  padding: 26px 24px 22px;
}
.regen-notice-title { color: #eaf3ff; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.regen-notice-text { color: #b9c7db; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.regen-notice-actions { display: flex; flex-direction: column; gap: 10px; }
.regen-notice-keep, .regen-notice-start {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.regen-notice-keep {
  background: rgba(30, 44, 70, 0.7);
  border: 1px solid rgba(120, 160, 220, 0.3);
  color: #cfe3ff;
}
.regen-notice-keep:hover { background: rgba(44, 62, 96, 0.85); }
.regen-notice-start {
  background: linear-gradient(180deg, #2f6db0, #245a94);
  border: 1px solid rgba(159, 208, 255, 0.35);
  color: #eaf3ff;
}
.regen-notice-start:hover { background: linear-gradient(180deg, #397dc6, #2b689f); }
/* ── SC-SHIP-INTERIOR: the Ship Interior view, the home screen ──
   #ship is a fixed layer from the header line down, above the in-flow
   views (z-index 2 over .view's 1, under every overlay and the header),
   so the System screen (#reveal) can stay in flow at the same rectangle
   and keep drawing underneath it. The interior image's windows are
   transparent pixels: whatever is under #ship shows through them. A
   portrait phone crops the image's sides here (object-fit: cover),
   never the image file. The view-exit fade stays the shared .view one:
   this rule only applies while the view is active. */
#ship.view.active { position: fixed; top: var(--header-h, 54px); left: 0; right: 0; bottom: 0; height: auto; z-index: 2; overflow: hidden; background: transparent; }
.ship-starfield-art, .ship-interior-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.ship-starfield-art { pointer-events: none; object-position: center 40%; }
/* The interior image itself takes the pointer: nothing under the glass is
   reachable, and nothing under the ship is scrolled or dragged. */
.ship-interior-art { pointer-events: auto; }
/* SC-CABIN-TINT: a colour layer over the cabin, masked by the interior
   image's own alpha so the windows stay clear, blended in colour mode so
   only the hue shifts. js/cabin-tint.js sets --cabin-tint and
   .cabin-tinted on arrival; the opacity eases over a few seconds. */
.ship-cabin-tint { position: absolute; inset: 0; pointer-events: none; background: var(--cabin-tint, transparent); opacity: 0; mix-blend-mode: color; -webkit-mask: url(../assets/ship-interior/interior.png) center / cover no-repeat; mask: url(../assets/ship-interior/interior.png) center / cover no-repeat; transition: opacity 2800ms ease, background-color 2800ms ease; }
#ship.cabin-tinted .ship-cabin-tint { opacity: 0.38; }
/* The starfield shows through the windows only while no system is loaded
   in the reveal. js/app.js's startReveal sets body.system-showing and
   showView's teardown clears it; with it set, #reveal is active under
   #ship and its canvases show through the windows instead. */
body.system-showing .ship-starfield-art { display: none; }
/* While the interior sits over a running reveal (body.reveal-under-ship,
   js/app.js's showView), every reveal control and text is hidden and the
   reveal container takes no pointer: space is seen through the glass and
   cannot be steered. The curtain stays -- black while a system loads. */
body.reveal-under-ship #reveal .reveal-container { pointer-events: none; }
body.reveal-under-ship #btnSkipReveal, body.reveal-under-ship #revealHype, body.reveal-under-ship #revealHypeFlash, body.reveal-under-ship #revealStatus, body.reveal-under-ship #hatchCounter, body.reveal-under-ship #pausedChip, body.reveal-under-ship #findViewerMount, body.reveal-under-ship #btnRevealInfo, body.reveal-under-ship #btnHabitableBand, body.reveal-under-ship #btnBodyScan, body.reveal-under-ship #btnScanPulse, body.reveal-under-ship #btnShipArrive, body.reveal-under-ship #btnShipOrbit, body.reveal-under-ship #btnOrbitPrev, body.reveal-under-ship #btnOrbitNext, body.reveal-under-ship #nameSheet, body.reveal-under-ship #cosmosTooltip, body.reveal-under-ship #panelBodyCard, body.reveal-under-ship #revealSystemName, body.reveal-under-ship #revealSheet, body.reveal-under-ship #revealChip, body.reveal-under-ship #revealActions { display: none !important; }
/* ── The interior's floating controls (wave 2b) ── Two controls at the
   sides of the interior, level with each other: Your ship (#btnShip, a
   labelled pill that opens the builder, js/ship-screen.js) at the left
   and Profile (a round button with the person icon that opens the profile
   popup, js/profile-popup.js) at the right, with Notebook (a round button,
   js/notebook-screen.js) between them. All three sit just above the
   bottom 45% of the interior (--ship-bottom-reserve), so the middle of
   the screen stays clear for the windows. The notebook panel rises over
   the bottom 55% (css/cosmos-notebook.css) and covers the three controls
   while it is up; its own close control and Escape lower it. At that
   height a portrait phone's crop leaves window glass at both sides, so the
   fill below is close to opaque: the system view behind never shows through
   a control. The side insets hold a 16px margin and grow with the device's
   own safe area if the page is ever set to draw under a notch. */
#ship { --ship-bottom-reserve: 38%; }
.ship-control { position: absolute; bottom: calc(var(--ship-bottom-reserve, 38%) + 12px); z-index: 3; min-width: 48px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 24px; border: 1px solid var(--border-light); background: rgba(8, 14, 26, 0.95); color: var(--text-secondary); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
.ship-control:hover { border-color: var(--accent); color: var(--accent); }
.ship-control svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
/* The visible label on Your ship; the Profile control is the icon alone. */
.ship-control-label { white-space: nowrap; }
.ship-builder-btn { left: max(16px, env(safe-area-inset-left)); bottom: 14%; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.ship-journal-btn { left: calc(50% + 6px); bottom: 11%; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.ship-profile-btn { right: max(16px, env(safe-area-inset-right)); bottom: 14%; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
/* Twinkling stars over the starfield backdrop (js/ship-sparkles.js): the
   canvas sits between the starfield and the interior art, so it only shows
   through the windows, and hides with the starfield when a system loads. */
.ship-sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body.system-showing .ship-sparkles { display: none; }
/* Pulsing console indicators (js/ship-console-lights.js): a canvas directly
   over the interior artwork and under the floating controls, so the glows
   sit on the console and never cover a button. */
.ship-console-lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
/* ── SC-COCKPIT-SCREENS: the two live screens on the cockpit panels ──
   js/cockpit-screens.js lays these on the panes js/cockpit-panes.js measures.
   Each element is absolutely placed at its pane's top-left corner and warped onto
   the pane's four corners by a matrix3d set inline (transform-origin 0 0), so it
   leans and pitches with the drawn panel. They sit above the interior art and its
   console lights (z-index 1) and below the floating controls (z-index 3) and
   every overlay, so they never take a tap meant for the notebook, the crew cards
   or the arrival message. */
.cockpit-screen { position: absolute; top: 0; left: 0; z-index: 2; transform-origin: 0 0; overflow: hidden; border-radius: 3px; }
/* The galaxy map screen (pane "left", the centre bottom screen the code places it
   on; js/cockpit-panes.js GALAXY_PANE_ID): a snapshot of the galaxy under a faint
   tint, and a button. It takes the pointer; the countdown screen does not. */
.cockpit-screen-galaxy { pointer-events: auto; cursor: pointer; background: radial-gradient(circle at 50% 42%, #0a1424, #04060d); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); filter: brightness(1); transition: filter 140ms ease; -webkit-tap-highlight-color: transparent; }
.cockpit-screen-galaxy.pressed { filter: brightness(1.4); }
.cockpit-screen-galaxy:focus-visible { outline: 2px solid rgba(159, 208, 255, 0.8); outline-offset: 1px; }
/* The snapshot image, cover-fit inside the warped screen. Hidden until a snapshot
   has been taken, so an empty screen shows the dark glass, not a broken image. */
.cockpit-screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 200ms ease; user-select: none; -webkit-user-drag: none; }
.cockpit-screen-galaxy.has-snapshot .cockpit-screen-img { opacity: 1; }
/* The tint that makes the picture read as a lit display: a faint cool wash and a
   soft top highlight, like light coming off glass. */
.cockpit-screen-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(140, 190, 255, 0.16), rgba(80, 120, 190, 0.06) 40%, rgba(4, 8, 16, 0.22)), radial-gradient(circle at 50% 20%, rgba(180, 215, 255, 0.22), rgba(180, 215, 255, 0) 60%); mix-blend-mode: screen; }
/* The voyage countdown screen (pane "3", top centre, thin, green): a digital
   MM:SS readout (js/voyage-slipspace.js writes the text in). It ignores the
   pointer. Dark while no Voyage runs (the text is empty and the "lit" class is
   off); lit green while one is under way. Tabular figures so the seconds do not
   shift the digits as they count down. */
.cockpit-screen-countdown { pointer-events: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #05130c, #020806); color: rgba(120, 255, 176, 0.16); font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace; font-weight: 700; letter-spacing: 0.06em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cockpit-screen-countdown.lit { background: linear-gradient(180deg, #06301c, #041d12); color: #86ffbf; text-shadow: 0 0 4px rgba(120, 255, 176, 0.8), 0 0 8px rgba(120, 255, 176, 0.4); }