/* ─── OSS shared header + audio rack ───────────────────────────────
   Styled to match index.html's chunky chip-mod skeuomorphic look so
   every page has the same visual header.  Same brass-bordered chips,
   amber LEDs, vintage-CRT-display look.

   Used by every page EXCEPT index.html (which has its own full Beat
   synth engine but the same visual identity). */

/* @import MUST come before any other rule per CSS spec — moved here
   from line 847 so Orbitron actually loads (Captain 2026-06-02). */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

:root {
  --oss-deep: #0A2540;
  --oss-mid: #143552;
  --oss-rim: #1f4a6f;
  --oss-pearl: #FFF5DC;
  --oss-sun: #caa23c;
  --oss-amber: #caa23c;
  --oss-teal: #4DBFB8;
  --oss-coral: #e8745f;
  --oss-mono: ui-monospace, "JetBrains Mono", monospace;
  --oss-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Header font lock — every page renders the header with the SAME
     stack regardless of page-level body font-family inheritance.
     The brand + nav links + CTA inherit oss-sans; chips use oss-mono. */
.oss-header,
.oss-header *,
.oss-header *::before,
.oss-header *::after {
  font-family: var(--oss-sans);
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.oss-chip,
.oss-chip *,
.oss-chip-label,
.oss-chip-val,
.oss-chip select,
.oss-chip button,
.oss-chip input {
  font-family: var(--oss-mono) !important;
}

.oss-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 37, 64, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
}
/* Three-row stacked header: identity | audio | nav.  Each row is its
   own max-width container so they stay balanced and never overflow. */
.oss-header-row {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-content: center;
}
.oss-header-identity { padding: 6px 14px; }
.oss-header-identity .oss-header-spacer { flex: 1; min-width: 0; }
.oss-header-audio-row {
  padding: 4px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 37, 64, 0.55);
}
.oss-header-nav-row { padding: 5px 8px; }
/* Legacy aliases so older CSS rules that targeted .oss-header-top /
   .oss-header-bottom still apply. */
.oss-header-top { /* aliased by .oss-header-identity */ }
.oss-header-bottom { /* aliased by .oss-header-nav-row */ }
.oss-header-brand {
  color: var(--oss-sun);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.oss-header-cta {
  background: linear-gradient(135deg, var(--oss-sun) 0%, var(--oss-coral) 100%);
  color: var(--oss-deep);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.oss-header-cta:hover { filter: brightness(1.08); }

/* Horizontal nav strip */
.oss-nav-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 6px;
  justify-content: center;
}
.oss-nav-strip::-webkit-scrollbar { display: none; }
.oss-nav-link {
  color: rgba(255, 245, 220, 0.80);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 5px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
  /* Captain 2026-05-31 nav-mistap fix: ensure each link has a real
     touch target (Apple HIG min 44px).  Without this, finger taps on
     "Gallery" land on neighboring "Studio" because the hit zone is
     ~25px tall and the 8px gap isn't enough buffer. */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Larger gap between mobile nav links so adjacent taps don't bleed
   into the next button. */
@media (max-width: 540px) {
  .oss-nav-strip { gap: 14px; padding: 4px 10px; }
  .oss-nav-link { padding: 10px 14px; font-size: 13px; }
}
.oss-nav-link:hover { background: rgba(255, 255, 255, 0.07); color: var(--oss-sun); }
.oss-nav-link.active { background: rgba(202, 162, 60, 0.16); color: var(--oss-sun); }

/* Audio rack — centered, chunky chip-mod look */
.oss-header-audio {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1;
  flex-wrap: nowrap;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.oss-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #1a4360 0%, #0A2540 100%);
  border: 1.5px solid var(--oss-amber);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(202, 162, 60, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 0 rgba(0, 0, 0, 0.6);
  color: var(--oss-pearl);
  font-family: var(--oss-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  line-height: 1;
  white-space: nowrap;
  height: 28px;
  flex-shrink: 0;
}

.oss-chip-led {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.oss-chip-led.on {
  background: var(--oss-coral);
  box-shadow: 0 0 8px rgba(255, 138, 107, 1),
              inset 0 0 2px rgba(255, 245, 220, 0.6);
}

.oss-chip-label {
  color: var(--oss-amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
}

.oss-chip select {
  background: #000;
  border: 1px solid var(--oss-amber);
  color: var(--oss-amber);
  font-family: var(--oss-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 0 4px;
  height: 22px;
  /* 2026-05-31 visual debug: bumped from 90px so longer reef names
     ("Mangrove Estuary · Atlantic") don't truncate mid-word. */
  max-width: 140px;
  border-radius: 2px;
  cursor: pointer;
  touch-action: manipulation;
}

.oss-chip input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 6px;
  background: linear-gradient(90deg, #0a0a0a 0%, #2a1a0a 100%);
  border: 1px solid var(--oss-amber);
  border-radius: 1px;
  padding: 0;
  cursor: pointer;
  touch-action: none;
}
.oss-chip input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 22px;
  background: linear-gradient(180deg, var(--oss-amber) 0%, #c8992f 100%);
  border: 2px solid #5a3a0a;
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.oss-chip input[type="range"]::-moz-range-thumb {
  width: 14px; height: 22px;
  background: linear-gradient(180deg, var(--oss-amber) 0%, #c8992f 100%);
  border: 2px solid #5a3a0a;
  border-radius: 2px;
  cursor: pointer;
}

.oss-chip button {
  background: linear-gradient(180deg, #2C8FA8 0%, #1B5A6F 100%);
  border: 1px solid #0a0a0a;
  color: var(--oss-pearl);
  font-family: var(--oss-mono);
  font-size: 11px;
  font-weight: 700;
  height: 22px;
  padding: 0 8px;
  min-width: 26px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(202, 162, 60, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  touch-action: manipulation;
}
.oss-chip button:hover {
  background: linear-gradient(180deg, var(--oss-amber) 0%, #c8992f 100%);
  color: var(--oss-deep);
}

.oss-chip-val {
  color: #9be0a3;
  font-family: var(--oss-mono);
  font-size: 9.5px;
  min-width: 22px;
  text-align: right;
}

/* Mobile compaction */
@media (max-width: 640px) {
  .oss-header-top { padding: 3px 8px; gap: 6px; }
  .oss-header-brand { font-size: 12px; }
  .oss-header-cta {
    padding: 8px 12px;
    font-size: 11px;
    min-height: 36px; /* 44px touch target inc. label vertical space */
  }
  .oss-nav-link {
    font-size: 11px;
    padding: 6px 8px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 540px) {
  /* Captain 2026-06-04 (1788200000): tighter mobile chip sizing so the audio
     row + REEF + clocks fit on 2 mobile rows instead of 4-5.  Single-row
     identity row with smaller chips; clocks wrap below. */
  .oss-header-audio {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    gap: 4px;
    scrollbar-width: none;
  }
  .oss-header-audio::-webkit-scrollbar { display: none; }
  .oss-chip { height: 22px; padding: 0 4px; font-size: 8.5px; }
  .oss-chip input[type="range"] { width: 40px; }
  .oss-chip select { max-width: 56px; font-size: 8.5px; }
  .oss-chip-label { font-size: 8px; letter-spacing: 0.05em; }
  .oss-chip-val { font-size: 8px; }
  .oss-chip button { min-height: 22px; min-width: 24px; padding: 0 4px; font-size: 8.5px; }
  /* Force identity row to one or two lines max; brand+chips wrap reasonably */
  .oss-header-identity { gap: 4px !important; padding: 4px 8px !important; }
}
@media (max-width: 400px) {
  /* Extra-narrow phones: shrink chip internals one more notch and let
     each chip take its own row if it has to. */
  .oss-chip { height: 22px; padding: 1px 4px; font-size: 9px; }
  .oss-chip input[type="range"] { width: 48px; }
  .oss-chip select { max-width: 64px; height: 20px; }
  .oss-chip button { height: 20px; min-height: 20px; padding: 0 6px; }
  .oss-header-audio { gap: 4px 6px; }
}

/* Captain 2026-06-04 (1788200000): .oss-admin-anchor neutralized — no floating anchor per product spec. */
.oss-admin-anchor { display: none !important; }

/* ─── Universal responsive guards ───────────────────────────────────
   These rules apply on EVERY page that loads oss-header.css so the
   whole suite gets the same baseline mobile behavior. */

/* Stop iOS Safari from auto-zooming form inputs (anything < 16px font
   triggers the zoom + a layout shift the user can't undo). */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-size: 16px;
}
/* The audio rack's range/select chips intentionally use smaller font
   for the chip look — that's NOT a focusable text input, so it doesn't
   trigger iOS zoom.  Restore the small chip font. */
.oss-chip select,
.oss-chip input[type="range"] {
  font-size: 10px;
}

/* Defensive: no page should ever horizontal-scroll the whole body.
   If a child overflows, contain it locally. */
html, body { overflow-x: hidden; }

/* Headings: prevent cramped multi-line on mobile. */
@media (max-width: 640px) {
  h1, h2, h3 {
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Touch target floor: any button or anchor inside a tappable card
   gets a minimum 44px height per WCAG.  Doesn't affect inline links
   inside paragraphs. */
@media (max-width: 640px) {
  button:not(.oss-chip button),
  .oss-cta,
  .oss-pagenav-cta,
  a[role="button"] {
    min-height: 44px;
  }
}

/* ── No-hover for touch-only devices ──
   Hover effects (tooltips, popups, color shifts) get stuck visible on
   touch devices because there's no mouseout event to dismiss them.
   Suppress every :hover style globally when the device has no fine
   pointer (= phones, tablets).  Mouse-only desktops/laptops keep
   the full hover experience. */
@media (hover: none), (pointer: coarse) {
  *:hover { all: revert !important; }
  /* Specifically nuke common stuck-tooltip patterns */
  [data-hover-label],
  .tooltip,
  .hover-tooltip,
  #habitat-label { display: none !important; }
}

/* ─── Captain 2026-05-31 mobile audit #285 ──────────────────────────
   Lock nav-link color across :link/:visited/.active/:hover states so
   Gallery doesn't render purple after first visit.  Also add overflow
   guards for narrow viewports. */
a.oss-nav-link,
a.oss-nav-link:link,
a.oss-nav-link:visited {
  color: rgba(255, 245, 220, 0.80) !important;
  text-decoration: none !important;
}
a.oss-nav-link.active,
a.oss-nav-link:hover {
  color: #caa23c !important;
}
@media (max-width: 480px) {
  h1 {
    font-size: clamp(24px, 9vw, 36px) !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  section, header, footer { padding-left: 14px !important; padding-right: 14px !important; }
}
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ─── Captain 2026-05-31 audit: header elements must stay BALANCED, in
   view, and CENTERED at any window size or zoom level.  This block
   overrides any earlier flex-start or width-based mobile breakpoint
   that was knocking the nav strip off-center. */
.oss-header-row {
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.oss-header-identity {
  justify-content: space-between !important;
}
.oss-nav-strip {
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.oss-header-audio {
  justify-content: center !important;
  flex-wrap: wrap !important;
}
/* On narrow viewports, allow rows to wrap but stay centered. */
@media (max-width: 640px) {
  .oss-header-row { gap: 8px !important; padding: 4px 10px !important; }
  .oss-nav-strip { justify-content: center !important; }
}

/* ─── Captain 2026-06-02: dual-clock cluster in header ─────────────
   MASTER (Pacific 24h) + VOYAGER 1 chips — same amber-LCD bezel
   aesthetic as the HABITAT/VOL/TONE audio switches.  Auto-shrinks
   via clamp() so it stays balanced at any viewport width. */
.oss-clock-cluster {
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.oss-chip.oss-clock-master,
.oss-chip.oss-clock-voyager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #0F2A3A;
  border: 1px solid #1f4d63;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(9px, 0.95vw, 11px);
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
              inset 0 -1px 0 rgba(0,0,0,0.35);
  transition: border-color 0.2s;
}
.oss-chip.oss-clock-master:hover,
.oss-chip.oss-clock-voyager:hover {
  border-color: #caa23c;
}
.oss-chip .oss-chip-label {
  color: #caa23c;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.oss-chip .oss-chip-display {
  color: #caa23c;
  background: #0A1F2A;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #1f4d63;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: center;
  text-shadow: 0 0 6px rgba(202,162,60,0.25);
}
.oss-chip .oss-chip-suffix {
  color: rgba(255,245,220,0.55);
  font-size: 0.85em;
  letter-spacing: 0.10em;
}
@media (max-width: 640px) {
  .oss-clock-cluster { gap: 5px; width: 100%; margin-top: 4px; }
  .oss-chip.oss-clock-master,
  .oss-chip.oss-clock-voyager { padding: 3px 7px; font-size: 9px; }
  .oss-chip .oss-chip-display { min-width: 55px; padding: 2px 4px; }
}

/* ─── Captain 2026-06-02: subtle crew font tweak ──────────────────
   Captain spec: 'change all of our fonts just slightly so we can
   have a unique self-created font by the crew.'  We keep the base
   stack (Space Grotesk / Inter / Fraunces) but apply a small
   letter-spacing + weight bias that becomes the OSS visual
   signature.  Identifiable as 'OSS Crew Type' without needing a
   custom font file. */
:root {
  --oss-crew-letter-spacing: -0.011em;
  --oss-crew-weight-bias: 0;  /* +0 = neutral; -50 = lighter; +50 = bolder */
}
body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, textarea {
  letter-spacing: var(--oss-crew-letter-spacing);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'kern' on;
  font-variant-numeric: tabular-nums proportional-nums;
}
h1, h2, h3, h4 {
  letter-spacing: -0.022em;
  font-feature-settings: 'ss01' on, 'cv01' on, 'kern' on;
}
.mono, code, kbd, samp, .oss-chip-display {
  /* Mono stays mono — but with our subtle wider tracking signature. */
  letter-spacing: 0.045em;
  font-variant-numeric: tabular-nums;
}

/* ─── Captain 2026-06-02: STACK + CENTER responsive header ─────────
   Spec: "make sure these all stack and or center depending on the
   browser." Every header row uses flex-wrap with center justification
   so the audio chips, clock cluster, and nav buttons reflow gracefully
   without ever clipping or going off-balance. Single source of truth
   for all 4 page header layouts.

   Layout intent across viewports:
     ≥ 1024px (desktop):  identity | audio chips + clocks all on one row, nav on row 2 — both centered.
     720-1023px (tablet): identity row + audio/clock row + nav row — each centered, wraps as needed.
     ≤ 719px (mobile):    everything stacks vertically, each chip/link is centered, with a sensible gap.
*/
.oss-header,
.oss-header-row,
.oss-header-audio-row,
.oss-header-nav-row,
.oss-nav-strip,
.oss-clock-cluster,
.oss-pagenav-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  row-gap: 6px;
  column-gap: clamp(6px, 1vw, 14px);
}
.oss-header {
  flex-direction: column !important;
  width: 100%;
  padding: clamp(6px, 1vw, 12px) clamp(8px, 2vw, 18px);
  box-sizing: border-box;
}
.oss-header-row,
.oss-header-audio-row,
.oss-header-nav-row {
  width: 100%;
  min-width: 0;   /* allow flex children to shrink below intrinsic width */
}
.oss-nav-strip,
.oss-clock-cluster {
  max-width: 100%;
}
/* Every immediate header child shrinks gracefully — never pushes layout
   off-screen, never clips the OSS brand. */
.oss-header > *,
.oss-header-row > *,
.oss-header-audio-row > *,
.oss-header-nav-row > * {
  min-width: 0;
  max-width: 100%;
}

/* Stack threshold #1 — at <= 900px, push the clock cluster to its own
   visual row beneath the audio chips, both still centered. */
@media (max-width: 900px) {
  .oss-clock-cluster {
    flex-basis: 100%;
    margin-top: 4px;
  }
}

/* Stack threshold #2 — at <= 640px, audio chips + clocks each take
   their own row.  Nav links keep tap targets ≥ 44px (Apple HIG). */
@media (max-width: 640px) {
  .oss-header-audio-row { gap: 4px; }
  .oss-chip,
  .oss-clock-master,
  .oss-clock-voyager { flex: 0 0 auto; }
  .oss-nav-strip { gap: 6px; padding-top: 4px; }
  .oss-nav-link {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 12px !important;
  }
}

/* Stack threshold #3 — at <= 380px (small phones), audio chips can
   stack one-per-row if they'd otherwise crowd. */
@media (max-width: 380px) {
  .oss-header-audio-row > .oss-chip {
    flex: 1 0 80%;
    justify-content: center;
  }
  .oss-clock-master,
  .oss-clock-voyager { flex: 1 0 45%; }
}

/* Defensive: kill horizontal scroll bars from any rogue rule. */
.oss-header, .oss-header-row, .oss-header-audio-row, .oss-header-nav-row {
  overflow-x: visible;
}

/* ─── Captain 2026-06-02: fade transitions + destruction graphics ────
   When a stamped composition slides into a wall tile, it fades in.
   When the Main Showcase work expires (or a blank tile gets purged),
   we play a 5s palette-colored bubble/shard explosion before the next
   piece fades in. */

/* Chip pulse — used by oss-clock-sync.js when the deep-space craft
   changes (different chronicle in Final Call). */
@keyframes ossChipPulse {
  0%   { box-shadow: 0 0 0 0 rgba(202,162,60,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(202,162,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(202,162,60,0); }
}

/* Tile arrival fade — apply .oss-tile-arriving to any chronicle tile
   when it's freshly placed.  3-step keyframe: invisible → soft scale
   in → settled. */
@keyframes ossTileFadeIn {
  0%   { opacity: 0; transform: scale(0.94) translateY(6px); filter: blur(3px); }
  60%  { opacity: 0.95; transform: scale(1.02) translateY(-1px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}
.oss-tile-arriving,
.gallery-piece.fresh-from-live,
.gallery-piece.arriving {
  animation: ossTileFadeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform, filter;
}

/* Tile fade-out — applied to the OLD work when it slides off its
   current position, before being re-placed at the next position. */
@keyframes ossTileFadeOut {
  0%   { opacity: 1; transform: scale(1); filter: none; }
  100% { opacity: 0; transform: scale(0.96) translateY(8px); filter: blur(2px); }
}
.oss-tile-departing,
.gallery-piece.departing {
  animation: ossTileFadeOut 0.9s cubic-bezier(0.55, 0, 0.55, 0.2) both;
  will-change: opacity, transform, filter;
}

/* Main Showcase destruction — 5-second palette-tinted bubble/shard
   field that plays when a Final-Call work is destroyed (or a blank
   placeholder tile is purged).  We project two overlays:
     1. Bubble field via radial-gradients fading up + drifting.
     2. Shard burst via clip-path triangles in the chronicle palette.
   The chronicle palette is read from data-palette on .gallery-piece. */
@keyframes ossExplodeBubbles {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.8) translateY(-180px); }
}
@keyframes ossExplodeShards {
  0%   { opacity: 0; transform: scale(0.6) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.6) rotate(45deg) translate(20px, -40px); }
}
@keyframes ossShockwave {
  0%   { opacity: 0.85; transform: scale(0.2); border-width: 4px; }
  100% { opacity: 0; transform: scale(2.4); border-width: 0; }
}

.oss-destruction-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 12;
}
.oss-destruction-stage .oss-shockwave {
  position: absolute;
  left: 50%; top: 50%;
  width: 60%; aspect-ratio: 1;
  margin-left: -30%; margin-top: -30%;
  border: 4px solid var(--oss-palette-1, #caa23c);
  border-radius: 50%;
  animation: ossShockwave 1.2s ease-out both;
}
.oss-destruction-stage .oss-bubble {
  position: absolute;
  width: var(--bw, 18px); height: var(--bh, 18px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.35),
    var(--oss-palette-1, #caa23c) 65%,
    transparent 100%);
  bottom: 0; left: var(--bx, 50%);
  animation: ossExplodeBubbles var(--bd, 4s) ease-out var(--bdelay, 0s) both;
}
.oss-destruction-stage .oss-shard {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--sw, 24px); height: var(--sh, 6px);
  background: var(--oss-palette-2, #e8745f);
  transform-origin: left center;
  transform: translate(-50%, -50%) rotate(var(--sr, 0deg));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  opacity: 0;
  animation: ossExplodeShards var(--sd, 2.4s) cubic-bezier(0.16, 1, 0.3, 1) var(--sdelay, 0s) both;
}
.oss-destruction-stage.dim::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%,
    rgba(10,37,64,0.0) 0%,
    rgba(10,37,64,0.6) 70%,
    rgba(10,37,64,0.95) 100%);
  animation: ossShardDim 5s ease-in both;
}
@keyframes ossShardDim {
  0%   { opacity: 0; }
  35%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ─── Captain 2026-06-02: clickable craft label on space clock ──── */
.oss-clock-craft-link {
  color: #caa23c;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.10em;
  transition: color 0.15s, text-shadow 0.15s;
}
.oss-clock-craft-link:hover,
.oss-clock-craft-link:focus {
  color: #FFE39E;
  text-shadow: 0 0 8px rgba(202,162,60,0.55);
  text-decoration: underline;
  outline: none;
}

/* ─── Captain 2026-06-02 (1785200000) — identity row IS THE ONE LINE
   Spec: "move clocks, logo, and sign in to same line, recenter,
   balance, etc. in all browsers please". Replace the prior 3-column
   grid with a flex row so OSS brand + clock cluster + reef chip (home)
   + Sign in all sit on ONE line at desktop, and collapse gracefully
   at narrower widths via flex-wrap. */
.oss-header-identity {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  gap: clamp(8px, 1.4vw, 16px);
  padding: clamp(6px, 1vw, 12px) clamp(8px, 2vw, 18px);
}
/* Brand pinned left, sign-in pinned right via auto margins — clocks
   + reef chip naturally float between them, centered by the gap. */
.oss-header-identity > .oss-header-brand,
.oss-header-identity > .oss-header-brand-cell {
  flex: 0 0 auto;
  margin-right: auto;
}
.oss-header-identity > #oss-clock-mount-identity,
.oss-header-identity > .oss-clock-identity-cell {
  flex: 0 1 auto;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 10px);
  min-width: 0;
}
.oss-header-identity > #oss-clock-mount-identity .oss-clock-cluster,
.oss-header-identity > .oss-clock-identity-cell .oss-clock-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(4px, 0.8vw, 10px);
}
.oss-header-identity > .oss-chip-reef-compact {
  flex: 0 0 auto;
}
.oss-header-identity > .oss-header-signin,
.oss-header-identity > .oss-header-signin-cell,
.oss-header-identity > .oss-header-cta,
.oss-header-identity > .relative,
.oss-header-identity > [class*=sign-in],
.oss-header-identity > [class*=signin] {
  flex: 0 0 auto;
  margin-left: auto;
}
/* Captain 2026-06-02 (1785400000) — OSS + Sign in ALWAYS on the
   same row (Captain screenshot showed header wrapping into 3 stacked
   rows on Edge). Strategy: use flex `order` so brand+reef+sign-in
   render first on row 1, with clocks forced to row 2 whenever the
   content would otherwise wrap. The auto-margin trick stays in place
   so brand sits at the left edge and sign-in at the right edge of
   row 1 regardless of viewport. */
/* Captain 2026-06-03 night (1786300000) — Sign-in MUST be in the far
   right corner per screenshot. New order: brand(0) → reef(1) → clocks(2)
   → sign-in(3). Sign-in keeps margin-left:auto to pin against right edge. */
.oss-header-identity > .oss-header-brand,
.oss-header-identity > .oss-header-brand-cell {
  order: 0;
}
.oss-header-identity > .oss-chip-reef-compact {
  order: 1;
}
/* Captain 2026-06-03 night (1786600000) — audio chips (VOL + TONE) now live in row 1 between reef and sign-in. New order: brand(0) → reef(1) → audio(2) → clocks(3) → sign-in(4 far right). */
.oss-header-identity > .oss-chip:not(.oss-chip-reef-compact) {
  order: 2 !important;
}
.oss-header-identity > #oss-clock-mount-identity,
.oss-header-identity > .oss-clock-identity-cell {
  order: 3 !important;
}
.oss-header-identity > .oss-header-signin,
.oss-header-identity > .oss-header-signin-cell,
.oss-header-identity > .oss-header-cta,
.oss-header-identity > .relative,
.oss-header-identity > [class*=sign-in],
.oss-header-identity > [class*=signin] {
  order: 4 !important;
  margin-left: auto !important;
}
/* Captain 2026-06-03 (1787900000) — Identity row stays on ONE line per
   locked-in design "OSS | REEF | VOL | TONE | MAIN | VOYAGER 1 | Sign in
   on row 1, nav on row 2". The 1280px breakpoint that previously forced
   clocks to wrap is REMOVED — at narrower widths the chips shrink via
   clamp() font-size instead of breaking the row. Only on true mobile
   (<=720px) does the row wrap into stack mode. */
@media (max-width: 720px) {
  .oss-header-identity > #oss-clock-mount-identity,
  .oss-header-identity > .oss-clock-identity-cell {
    flex-basis: 100%;
    justify-content: center;
  }
}
@media (max-width: 720px) {
  /* Mobile: tight gap, identity row stays brand+(reef)+sign-in row 1,
     clocks row 2 (already forced via flex-basis 100% above). */
  .oss-header-identity {
    gap: 6px !important;
    padding: 5px 8px !important;
    row-gap: 4px !important;
  }
}
/* Reef chip view-only lock — disable pointer + dropdown arrow for users.
   Admin mode re-enables via body.is-admin override below. */
.oss-reef-select-locked {
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color: inherit !important;
  cursor: default !important;
  text-align: center !important;
  padding-right: 4px !important;
}
.oss-reef-select-locked::-ms-expand { display: none !important; }
body.is-admin .oss-reef-select-locked { pointer-events: auto !important; cursor: pointer !important; }
body.is-admin #chip-reef-cycle.hidden { display: inline-flex !important; }
/* Compact reef chip — small footprint on the identity row */
.oss-chip-reef-compact {
  font-size: 11px !important;
  padding: 3px 8px !important;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .oss-chip-reef-compact { font-size: 10px !important; padding: 2px 6px !important; max-width: 140px; }
  .oss-chip-reef-compact select { max-width: 90px; font-size: 10px !important; }
}
/* Tagline hidden on very small mobile (Captain spec: less technical, fits one line) */
@media (max-width: 540px) {
  .oss-chip .oss-craft-tagline,
  span.oss-craft-tagline.oss-craft-tagline { display: none !important; }
}
/* Captain 2026-06-02 (1784500000): Δ MAIN chip dropped. Hide defensively
   in case any cached/stray cluster mounts the old chip. */
.oss-clock-cluster .oss-clock-tdelta,
.oss-chip.oss-clock-tdelta { display: none !important; }
/* Clock cluster: keep MAIN + Voyager chip on one row on tablet/desktop.
   On phones they wrap to 2 rows (1 chip each) which is unavoidable when
   the V1 chip is wide. */
.oss-clock-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(4px, 1vw, 10px);
}
@media (max-width: 640px) {
  .oss-clock-cluster { flex-wrap: wrap; justify-content: center; }
}

/* ─── Cool time-difference chip ──────────────────────────────────
   Shows cycle phase: 'NEW IN 92s' counting down to the next ~2-min
   composition anchor, then 'AGED 12s' counting up after the moment
   a new chronicle arrives.  Same amber-LCD chip style. */
.oss-chip.oss-clock-tdelta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #0F2A3A; border: 1px solid #1f4d63;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(9px, 0.95vw, 11px);
  letter-spacing: 0.04em;
}
.oss-clock-tdelta.phase-counting-down .oss-chip-label { color: #4DBFB8; }
.oss-clock-tdelta.phase-fresh        .oss-chip-label { color: #caa23c; }
.oss-clock-tdelta.phase-aged         .oss-chip-label { color: rgba(255,245,220,0.6); }

/* ─── Captain 2026-06-02: blue space-age craft label + tagline ──────
   Use Orbitron (loaded via Google Fonts on every page) on the craft
   label (clickable link) and the three-word tagline so they read as
   'space age' relative to the rest of the chip cluster.

   Specificity NOTE: .oss-header * and .oss-chip * both have
   font-family !important at specificity (0,1,1). To win, our rules
   must reach (0,2,0)+ — hence the .oss-chip ancestor selectors. */

.oss-chip .oss-clock-craft-link,
.oss-craft-label .oss-clock-craft-link,
a.oss-clock-craft-link {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif !important;
  color: #6FCBFF !important;        /* sky-blue space-age */
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-decoration: none !important;
  text-shadow: 0 0 5px rgba(111,203,255,0.45);
  transition: color 0.15s, text-shadow 0.15s;
}
.oss-chip .oss-clock-craft-link:hover,
.oss-chip .oss-clock-craft-link:focus,
a.oss-clock-craft-link:hover,
a.oss-clock-craft-link:focus {
  color: #B5E6FF !important;
  text-shadow: 0 0 8px rgba(181,230,255,0.75);
  text-decoration: underline !important;
  outline: none;
}
.oss-chip .oss-craft-tagline,
span.oss-craft-tagline.oss-craft-tagline {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif !important;
  color: rgba(111,203,255,0.78) !important;
  font-size: 0.78em !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: lowercase !important;
  margin-left: 6px !important;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .oss-chip .oss-craft-tagline,
  span.oss-craft-tagline.oss-craft-tagline {
    font-size: 0.70em !important;
    margin-left: 4px !important;
  }
}

/* Refine the time-diff chip so the new wording reads cleanly. */
.oss-chip.oss-clock-tdelta .oss-chip-label {
  color: #4DBFB8;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.10em;
}
.oss-chip.oss-clock-tdelta .oss-chip-suffix {
  color: rgba(255,245,220,0.55);
  font-size: 0.78em;
  letter-spacing: 0.10em;
  margin-left: 4px;
}

/* Captain 2026-06-03 night (1786100000) — visual balance fix:
   tighten brand/reef/signin/clocks vertical alignment in the identity row. */
.oss-header-identity {
    align-items: center !important;
}
.oss-header-identity > .oss-header-brand,
.oss-header-identity > .oss-chip-reef-compact,
.oss-header-identity > .oss-header-signin,
.oss-header-identity > .relative.shrink-0,
.oss-header-identity > #oss-clock-mount-identity,
.oss-header-identity > .oss-clock-identity-cell {
    align-self: center !important;
}


/* Captain 2026-06-03 night (1786300000) — even spacing + balanced rows.
   Audio row, nav row are independently centered with consistent vertical rhythm. */
.oss-header-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 0 !important;
}
.oss-header-identity {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* Tighten nav spacing visually with the header above */
nav.oss-nav, .oss-nav, [role="navigation"] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.5vw, 18px);
    padding: 6px 0;
}
.oss-nav .oss-nav-link, .oss-nav a {
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.oss-nav .oss-nav-link:hover, .oss-nav a:hover {
    background: rgba(202,162,60,

/* ─── Captain 2026-06-04 (1788600000): VOL slider audio-locked hint ──
   Per sec 50 there is no audio pill. Instead, when audio.muted or
   audio.paused (managed by oss-audio-continuity.js setLockedState),
   the body gets class .audio-locked and the VOL chip pulses with a
   coral border + soft glow to draw the user's eye to it as the sole
   unlock + volume control surface. Pulse stops the instant audio
   starts playing audibly. */
@keyframes ossVolHintPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(202, 162, 60, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5),
      1px 1px 0 rgba(0, 0, 0, 0.6),
      0 0 0 0 rgba(255, 138, 107, 0);
    border-color: var(--oss-amber);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(202, 162, 60, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5),
      1px 1px 0 rgba(0, 0, 0, 0.6),
      0 0 0 6px rgba(255, 138, 107, 0.35);
    border-color: var(--oss-coral);
  }
}
body.audio-locked .oss-chip:has(#oss-vol),
body.audio-locked .oss-chip:has(#chip-vol),
body.audio-locked #oss-vol,
body.audio-locked #chip-vol {
  animation: ossVolHintPulse 1.6s ease-in-out infinite;
}
/* Cursor + accessible affordance hint */
body.audio-locked .oss-chip:has(#oss-vol),
body.audio-locked .oss-chip:has(#chip-vol) {
  cursor: pointer;
}


/* ─── Captain 2026-06-04 (1788600000) — mobile header balance fix ───
   Captain reported "bugs in header on mobile, unbalanced, centered
   elements not functioning". Force the identity row and audio row
   to true-center even when content wraps; ensure brand stays left,
   sign-in stays right, audio chips center between them. */
@media (max-width: 720px) {
  .oss-header-identity {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    width: 100%;
  }
  .oss-header-identity > .oss-header-brand,
  .oss-header-identity > .oss-header-brand-cell {
    margin-right: auto !important;
    flex: 0 0 auto !important;
    order: 0 !important;
  }
  .oss-header-identity > .oss-header-signin,
  .oss-header-identity > .oss-header-signin-cell,
  .oss-header-identity > .oss-header-cta,
  .oss-header-identity > [class*=sign-in],
  .oss-header-identity > [class*=signin] {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    order: 99 !important;
  }
  .oss-header-identity > .oss-chip,
  .oss-header-identity > #oss-clock-mount-identity,
  .oss-header-identity > .oss-clock-identity-cell {
    flex: 0 0 auto !important;
    order: 5 !important;
  }
  .oss-nav-strip {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 6px 8px !important;
    width: 100%;
  }
}

/* Footer utility links — global hover state (overrides the inline opacity) */
.oss-footer-util:hover,
.oss-footer-util:focus {
  color: rgba(202, 162, 60, 0.95) !important;
  background: rgba(202, 162, 60, 0.06);
  border-radius: 4px;
  outline: none;
}


/* ─── Captain 2026-06-04 (1789800000) — mobile header rebalance ───
   Captain debug-zip "Header Elements BuG": REEF/VOL/TONE wrap to 2 rows,
   MAIN+PARKER overlap, Sign-in pushed below clocks. Fix by collapsing
   the identity row + audio row into tighter chip widths on narrow
   viewports and forcing single-line flow with horizontal scroll fallback. */
@media (max-width: 640px) {
  .oss-header-identity { padding: 4px 6px !important; gap: 4px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .oss-header-identity > .oss-header-brand-cell { margin-right: auto !important; }
  .oss-header-identity > [class*="signin"], .oss-header-identity > .oss-header-cta { margin-left: auto !important; }
  .oss-header-audio-row { padding: 3px 4px !important; }
  .oss-header-audio { gap: 6px !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 2px 0 !important; justify-content: flex-start !important; }
  .oss-header-audio::-webkit-scrollbar { display: none; }
  .oss-chip { height: 24px !important; padding: 2px 5px !important; font-size: 9.5px !important; flex-shrink: 0 !important; }
  .oss-chip-label { font-size: 8.5px !important; letter-spacing: 0.06em !important; }
  .oss-chip select, .oss-chip input[type=range], .oss-chip button { height: 18px !important; }
  .oss-chip input[type=range] { width: 56px !important; }
  .oss-nav-strip { gap: 8px !important; padding: 3px 8px !important; }
  .oss-clock-cluster { gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
}