:root {
  color-scheme: dark;
  --cyan: #9df1ff;
  --dim: #54747f;
  --line: rgba(127, 232, 255, 0.16);
  /* Liquid-glass HUD. --glass-tint is the player's setting, 0 = clear water,
     1 = deep culture broth; everything below is derived from it. */
  --glass-tint: 0.6;
  --glass-fill: calc(0.28 + var(--glass-tint) * 0.6);
  --glass-fill-deep: calc(0.32 + var(--glass-tint) * 0.62);
  --glass-blur: 12px;
  --glass-saturation: 150%;
}

/* A weaker lens on low-end machines: the blur is the expensive part of the
   glass, and the panel stays legible with less of it. */
html[data-quality='balanced'] {
  --glass-blur: 11px;
}

html[data-quality='low'] {
  --glass-blur: 6px;
  --glass-saturation: 125%;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #04080b;
}

body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #d7eef6;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  display: block;
  cursor: crosshair;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

/* The HUD arrives after the launch flash, panel by panel, rather than appearing
   on the frame the overlay goes away. */
body.playing #hud {
  opacity: 1;
}

body.playing .panel,
body.playing .hint,
body.playing .legend {
  animation: hud-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.playing .stats {
  animation-delay: 90ms;
}

body.playing .traits {
  animation-delay: 170ms;
}

body.playing .lineages {
  animation-delay: 250ms;
}

body.playing .hint {
  animation-delay: 340ms;
}

body.playing .legend {
  animation-delay: 410ms;
}

/* The HUD is cut from a sheet of liquid glass lying on the plate: the field
   is still visible through it, blurred and lifted, with a lit rim and one
   slow caustic sliding across the surface. */
.panel {
  position: absolute;
  overflow: hidden;
  padding: 13px 15px;
  border: 1px solid rgba(196, 246, 255, calc(0.16 + var(--glass-tint) * 0.13));
  border-radius: 15px;
  background:
    linear-gradient(156deg, rgba(255, 255, 255, calc(0.12 + var(--glass-tint) * 0.06)) 0%, rgba(255, 255, 255, 0.02) 36%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(120% 90% at 10% -16%, rgba(122, 233, 255, calc(0.07 + var(--glass-tint) * 0.12)), rgba(122, 233, 255, 0) 64%),
    radial-gradient(90% 70% at 96% 112%, rgba(170, 244, 255, calc(0.05 + var(--glass-tint) * 0.06)), rgba(170, 244, 255, 0) 62%),
    linear-gradient(180deg, rgb(7 21 27 / var(--glass-fill)), rgb(3 10 14 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 24px rgba(127, 232, 255, 0.045),
    0 24px 50px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-shadow: 0 1px 2px rgba(2, 8, 10, 0.55);
  transition:
    width 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms ease,
    border-color 180ms ease;
}

/* A 1px gradient rim, brightest where the light hits the top-left corner. */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.04) 28%, rgba(127, 232, 255, 0.05) 62%, rgba(214, 252, 255, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* One slow caustic across the sheet. Faint enough to read through, and it
   never brightens the text itself. */
.panel::after {
  content: '';
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(102deg, rgba(255, 255, 255, 0) 40%, rgba(190, 250, 255, 0.062) 49%, rgba(255, 255, 255, 0) 58%);
  animation: glass-caustic 19s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes glass-caustic {
  0%,
  100% {
    transform: translateX(-44%);
  }
  50% {
    transform: translateX(44%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel::after {
    animation: none;
    opacity: 0;
  }
}

.panel-toggle {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(140, 182, 194, 0.58);
  cursor: pointer;
  pointer-events: auto;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.panel-toggle:hover,
.panel-toggle:focus-visible {
  color: var(--cyan);
  background: rgba(127, 232, 255, 0.08);
  outline: none;
}

.panel-toggle:focus-visible {
  box-shadow: 0 0 0 1px rgba(127, 232, 255, 0.45);
}

.panel-glyph {
  display: none;
  width: 17px;
  height: 17px;
}

.panel-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-chevron {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

/* Only folded cards show their name; expanded ones are already titled. */
.panel-name {
  display: none;
  font-size: 9px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Folded, a card keeps its name beside its glyph. A rail of bare symbols made
   the player hover every one of them to find the roster or the journal again,
   so the folded state is a small tab, not an anonymous square. */
.panel.collapsed {
  width: auto;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
}

.panel.collapsed > :not(.panel-toggle) {
  display: none;
}

.panel.collapsed .panel-toggle {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 100%;
  padding: 0;
  color: rgba(157, 241, 255, 0.8);
}

.panel.collapsed .panel-name {
  display: inline;
}

.panel.collapsed .panel-toggle:hover,
.panel.collapsed .panel-toggle:focus-visible {
  background: rgba(127, 232, 255, 0.12);
}

.panel.collapsed .panel-glyph {
  display: grid;
  place-items: center;
}

.panel.collapsed .panel-chevron {
  display: none;
}

.stats {
  top: 18px;
  left: 18px;
  width: 226px;
}

.traits {
  top: 18px;
  right: 18px;
  width: 196px;
}

.lineages {
  top: 182px;
  right: 18px;
  width: 196px;
}

.lineage-list {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.field-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 8.5px;
  letter-spacing: 0.06em;
}

.field-label span,
.field-label b {
  white-space: nowrap;
}

.field-label b {
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(120, 160, 172, 0.7);
}

.field-label b.live {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(127, 232, 255, 0.45);
}

.field-feed {
  display: grid;
  gap: 3px;
  margin-top: 7px;
}

.field-feed-row {
  overflow: hidden;
  color: rgba(255, 158, 154, 0.78);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineage-row {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1em;
}

.lineage-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(255, 255, 255, 0.18);
}

.lineage-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8fb2bd;
}

.lineage-row b {
  font-weight: 500;
  color: #d8f5fc;
  font-variant-numeric: tabular-nums;
}

.lineage-row.you span {
  color: #d3f9ff;
}

.lineage-row.spore {
  opacity: 0.5;
}

.lineage-row.spore b {
  font-size: 8px;
  letter-spacing: 0.06em;
}

/* The operator's signature: a small living spectrum, not a flat badge. The
   title is set by the server, so the glow is also the only role mark in chat. */
.role-title {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  color: transparent;
  font-family: inherit;
  font-size: 7.1px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #d8ffff 0%, #8dffe4 28%, #bba8ff 64%, #ffc89e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 5px rgba(157, 247, 255, 0.8))
    drop-shadow(0 0 13px rgba(150, 177, 255, 0.32));
  animation: role-title-breathe 4.8s ease-in-out infinite;
}

.role-title.tester {
  /* Gold-on-glass needs solid letterforms at HUD scale; the gradient title
     turns into a bar once it is seven pixels tall. Keep the spectrum for the
     larger checkout chip, where it is readable. */
  color: #ffe9af;
  background: none;
  -webkit-text-fill-color: #ffe9af;
  filter:
    drop-shadow(0 0 5px rgba(255, 217, 135, 0.92))
    drop-shadow(0 0 13px rgba(255, 196, 105, 0.38));
  text-shadow:
    0 0 5px rgba(255, 225, 157, 0.6),
    0 0 12px rgba(255, 196, 105, 0.28);
  animation: tester-title-breathe 4.8s ease-in-out infinite;
}

.role-title::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #9dffe8 42%, rgba(109, 255, 221, 0) 75%);
  box-shadow: 0 0 9px 3px rgba(143, 255, 231, 0.62);
}

.role-title.tester::before {
  background: radial-gradient(circle, #ffffff 0%, #ffd98c 42%, rgba(255, 202, 104, 0) 75%);
  box-shadow: 0 0 9px 3px rgba(255, 213, 132, 0.72);
}

@keyframes role-title-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(157, 247, 255, 0.54))
      drop-shadow(0 0 9px rgba(150, 177, 255, 0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 7px rgba(184, 255, 235, 0.92))
      drop-shadow(0 0 17px rgba(174, 190, 255, 0.5));
  }
}

@keyframes tester-title-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(255, 217, 135, 0.62))
      drop-shadow(0 0 9px rgba(164, 255, 225, 0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 7px rgba(255, 231, 163, 0.95))
      drop-shadow(0 0 17px rgba(170, 255, 228, 0.48));
  }
}

.lineage-row.developer {
  position: relative;
  margin: 0 -5px;
  padding: 3px 5px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(124, 255, 230, 0.16), rgba(157, 135, 255, 0.1) 58%, transparent);
  box-shadow:
    inset 2px 0 0 rgba(160, 255, 235, 0.78),
    0 0 22px -9px rgba(143, 255, 235, 0.95);
  animation: developer-row-pulse 4.8s ease-in-out infinite;
}

@keyframes developer-row-pulse {
  0%, 100% {
    box-shadow:
      inset 2px 0 0 rgba(160, 255, 235, 0.6),
      0 0 15px -11px rgba(143, 255, 235, 0.7);
  }
  50% {
    box-shadow:
      inset 2px 0 0 rgba(184, 255, 241, 0.92),
      0 0 23px -7px rgba(159, 255, 239, 1);
  }
}

.lineage-row.developer .lineage-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: visible;
  color: #f4ffff;
  text-overflow: clip;
  text-shadow: 0 0 11px rgba(127, 232, 255, 0.5);
  white-space: nowrap;
}

.lineage-row.developer .lineage-name .role-title {
  margin-top: 1px;
}

.lineage-row.developer b {
  color: #f1ffff;
  text-shadow: 0 0 9px rgba(144, 255, 234, 0.42);
}

.lineage-row.tester {
  position: relative;
  margin: 0 -5px;
  padding: 3px 5px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 218, 143, 0.16), rgba(140, 255, 224, 0.1) 58%, transparent);
  box-shadow:
    inset 2px 0 0 rgba(255, 226, 157, 0.82),
    0 0 22px -9px rgba(255, 211, 120, 0.9);
  animation: tester-row-pulse 4.8s ease-in-out infinite;
}

@keyframes tester-row-pulse {
  0%, 100% {
    box-shadow:
      inset 2px 0 0 rgba(255, 226, 157, 0.62),
      0 0 15px -11px rgba(255, 211, 120, 0.65);
  }
  50% {
    box-shadow:
      inset 2px 0 0 rgba(255, 240, 192, 0.96),
      0 0 23px -7px rgba(255, 225, 150, 1);
  }
}

.lineage-row.tester .lineage-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: visible;
  color: #fff8df;
  text-overflow: clip;
  text-shadow: 0 0 11px rgba(255, 220, 149, 0.42);
  white-space: nowrap;
}

.lineage-row.tester .lineage-name .role-title {
  margin-top: 1px;
}

.lineage-row.tester b {
  color: #fffdf4;
  text-shadow: 0 0 9px rgba(255, 226, 157, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  .role-title,
  .lineage-row.developer,
  .lineage-row.tester { animation: none; }
}

.label {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(127, 232, 255, 0.55);
  margin-bottom: 6px;
}

.big {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ecfdff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(127, 232, 255, 0.28);
}

.bar {
  position: relative;
  height: 4px;
  margin-top: 10px;
  border-radius: 4px;
  background: rgba(127, 232, 255, 0.12);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(90, 214, 255, 0.75), rgba(180, 249, 255, 0.95));
  transition:
    width 90ms linear,
    background 240ms ease,
    box-shadow 240ms ease;
}

.dna-bar {
  height: 3px;
  margin-top: 6px;
}

.dna-bar i {
  background: linear-gradient(90deg, rgba(122, 232, 178, 0.7), rgba(196, 255, 224, 0.92));
}

.dna-bar i.worn {
  background: linear-gradient(90deg, rgba(255, 176, 92, 0.8), rgba(255, 102, 102, 0.96));
  box-shadow: 0 0 12px rgba(255, 138, 76, 0.5);
}

.membrane-bar {
  height: 3px;
  margin-top: 4px;
}

.membrane-bar i {
  background: linear-gradient(90deg, rgba(255, 196, 120, 0.7), rgba(255, 232, 190, 0.92));
}

.membrane-bar i.low {
  background: linear-gradient(90deg, rgba(255, 120, 90, 0.85), rgba(255, 72, 72, 0.96));
  box-shadow: 0 0 12px rgba(255, 90, 72, 0.55);
}

.rows {
  margin-top: 12px;
  display: grid;
  gap: 5px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  letter-spacing: 0.12em;
}

.row b {
  color: #cdeff8;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.trait {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

/* "cell wall" is the one label that used to wrap onto two lines and make the
   genome card ragged. */
.trait span {
  white-space: nowrap;
}

.trait .bar {
  margin-top: 0;
  height: 3px;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(120, 160, 172, 0.6);
  transition:
    color 200ms ease,
    text-shadow 200ms ease;
}

.hint.ready {
  color: #bff7ff;
  text-shadow: 0 0 18px rgba(127, 232, 255, 0.75);
}

.dna-warning {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 5px;
  max-width: min(360px, 54vw);
  padding: 9px 16px 10px;
  border: 1px solid rgba(255, 176, 92, 0.38);
  border-radius: 12px;
  background:
    linear-gradient(152deg, rgba(255, 214, 168, 0.16), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgb(44 22 10 / var(--glass-fill)), rgb(24 11 5 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, 0.22),
    0 16px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.75)) saturate(140%);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.75)) saturate(140%);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.dna-warning.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dna-warning b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffd2a1;
  text-shadow: 0 0 16px rgba(255, 170, 90, 0.5);
  animation: dna-pulse 1.6s ease-in-out infinite;
}

.dna-warning span {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8b98f;
}

@keyframes dna-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.legend {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(84, 116, 127, 0.75);
}

/* ------------------------------------------------------------ the closing page */
/* Death is the run's last cinematic: the plate dims, the HUD steps aside, and
   the colony is read back as a life — how long it lasted, what it grew to, what
   it ate, what it killed, and every beat the field journal wrote down. */

.lost {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: grid;
  /* `safe` keeps a page that is one line too tall from centring its own footer
     past the bottom edge: it starts at the top instead. */
  align-content: safe center;
  justify-items: center;
  padding: clamp(18px, 4vh, 42px) clamp(18px, 5vw, 90px);
  overflow-y: auto;
  background:
    radial-gradient(90% 70% at 50% 8%, rgba(26, 74, 78, 0.34), rgba(2, 7, 9, 0) 62%),
    radial-gradient(70% 50% at 50% 110%, rgba(80, 34, 38, 0.3), rgba(2, 7, 9, 0) 70%),
    linear-gradient(180deg, rgba(3, 10, 13, 0.92), rgba(1, 5, 7, 0.97));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 900ms ease,
    visibility 0s linear 900ms;
}

.lost.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 900ms ease;
}

/* One slow ember under the page, so the dark is moving rather than flat. */
.lost::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 112%, rgba(255, 116, 132, 0.13), rgba(255, 116, 132, 0) 72%);
  animation: lost-ember 8s ease-in-out infinite;
}

@keyframes lost-ember {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

body.colony-lost #game {
  cursor: default;
}

/* The tour is a first-run overlay, not part of the closing record. The lost
   page owns the screen even if the player died while a lesson was open. */
body.colony-lost .tour {
  display: none;
}

/* The closing page is the only card on screen; the rails would show through
   its tint as half-readable labels. */
body.colony-lost .rail,
body.colony-lost .hud-foot,
body.colony-lost .event-banner,
body.colony-lost .event-siren,
body.colony-lost .fusion-coach,
body.colony-lost .dna-warning,
body.colony-lost .player-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lost-stage {
  width: min(1080px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
}

.lost-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.55);
}

.lost-top em {
  margin-left: auto;
  font-style: normal;
  letter-spacing: 0.18em;
  color: rgba(167, 214, 221, 0.55);
  font-variant-numeric: tabular-nums;
}

.lost-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9ba6;
  box-shadow: 0 0 14px rgba(255, 123, 137, 0.75);
  animation: lost-mark 3.4s ease-in-out infinite;
}

@keyframes lost-mark {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.lost-head {
  margin-top: clamp(10px, 2vh, 22px);
}

.lost-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.55);
}

.lost-eyebrow b {
  font-weight: 500;
  color: rgba(216, 248, 255, 0.85);
}

.lost-eyebrow i {
  font-style: normal;
  color: rgba(127, 232, 255, 0.3);
}

.lost-head h2 {
  width: fit-content;
  margin: 0;
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: none;
  background: linear-gradient(96deg, #ffe9ec 0%, #ff9ba6 34%, #ffd9a8 68%, #9df4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lost-deck {
  max-width: 620px;
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(180, 210, 216, 0.78);
}

.lost-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: clamp(18px, 3vh, 30px) 0 0;
  border-top: 1px solid rgba(127, 232, 255, 0.14);
  border-bottom: 1px solid rgba(127, 232, 255, 0.1);
}

.lost-stats div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px 14px;
  border-left: 1px solid rgba(127, 232, 255, 0.07);
}

.lost-stats div:first-child {
  padding-left: 0;
  border-left: 0;
}

.lost-stats span {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.42);
}

.lost-stats b {
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 300;
  color: #ecfeff;
  font-variant-numeric: tabular-nums;
}

.lost-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: clamp(14px, 2.4vh, 24px);
  min-height: 0;
}

/* The closing sentence, then the run's ladder: a band wide enough that the
   left column no longer reads as an empty half of the page. */
.lost-obit {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(127, 232, 255, 0.1);
}

.lost-obit h3,
.lost-chronicle h3 {
  margin: 0;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.5);
}

.lost-obit-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: rgba(196, 222, 228, 0.85);
}

.lost-note {
  margin-top: 5px !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.4) !important;
}

.lost-chronicle {
  min-height: 0;
}

.lost-chronicle h3 i {
  margin-left: 10px;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: rgba(127, 232, 255, 0.28);
}

.lost-chronicle h3 i b {
  font-weight: 500;
  color: rgba(157, 241, 255, 0.55);
}

/* The record reads across, like the field journal's own page. */
.lost-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-content: start;
  gap: 0 32px;
  max-height: min(22vh, 172px);
  margin-top: 6px;
  padding-bottom: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 232, 255, 0.24) transparent;
  /* A dissolve, so the next beat is read as more record below rather than as a
     line sliced in half - and the footer keeps its place on a 720 screen. */
  mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent);
}

.lost-row {
  display: grid;
  grid-template-columns: 26px 6px minmax(0, 1fr) auto;
  gap: 2px 9px;
  align-items: baseline;
  padding: 7px 0 8px;
  border-top: 1px solid rgba(127, 232, 255, 0.07);
}

.lost-step {
  grid-column: 1;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(127, 232, 255, 0.28);
  font-variant-numeric: tabular-nums;
}

.lost-row i {
  grid-column: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.18);
}

.lost-row b {
  grid-column: 3;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d8f8ff;
}

.lost-row span {
  grid-column: 3;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(150, 182, 190, 0.8);
}

.lost-row time {
  grid-column: 4;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: rgba(127, 232, 255, 0.3);
  font-variant-numeric: tabular-nums;
}

.lost-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 3vh, 28px);
  padding-top: 16px;
  border-top: 1px solid rgba(127, 232, 255, 0.12);
}

.lost-foot-note {
  max-width: 280px;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-align: right;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.38);
}

.lost-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lost-reselect {
  border-color: rgba(127, 232, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(127, 232, 255, 0.09), rgba(127, 232, 255, 0.025));
  color: #dffbff;
}

.lost-reselect b {
  border-color: rgba(127, 232, 255, 0.28);
  color: #a9f5ff;
}

.lost-reselect:hover,
.lost-reselect:focus-visible {
  border-color: rgba(143, 243, 255, 0.62);
  background-color: rgba(127, 232, 255, 0.08);
  color: #f0feff;
}

.respawn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 178, 188, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 178, 188, 0.1), rgba(255, 178, 188, 0.03));
  color: #ffe6ea;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.respawn b {
  padding: 2px 6px;
  border: 1px solid rgba(255, 178, 188, 0.3);
  border-radius: 5px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: #ffc9d1;
}

.respawn:hover,
.respawn:focus-visible {
  border-color: rgba(255, 178, 188, 0.7);
  background-color: rgba(255, 178, 188, 0.09);
  color: #fff3f5;
  outline: none;
}

/* The page enters in one slow fade, then its parts rise in reading order. */
.lost.show .lost-top {
  animation: lost-rise 700ms 60ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lost.show .lost-head {
  animation: lost-rise 820ms 140ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lost.show .lost-stats {
  animation: lost-rise 820ms 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lost.show .lost-body {
  animation: lost-rise 860ms 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lost.show .lost-foot {
  animation: lost-rise 860ms 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lost-rise {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .lost-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lost-stats div:nth-child(5) {
    padding-left: 0;
    border-left: 0;
  }

  .lost-obit {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .lost-list {
    max-height: 26vh;
  }
}

@media (max-width: 620px) {
  .lost-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lost-stats div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .lost-foot {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .lost-actions {
    width: 100%;
  }

  .lost-foot-note {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lost.show .lost-top,
  .lost.show .lost-head,
  .lost.show .lost-stats,
  .lost.show .lost-body,
  .lost.show .lost-foot,
  .lost-mark,
  .lost::after {
    animation: none;
  }
}

#overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #03070a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

#overlay.show {
  opacity: 1;
  pointer-events: auto;
}

#intro-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 1200ms ease,
    transform 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The focus pull behind the culture label.
   A live 17px blur on a full-screen canvas re-rasterises a multi-megapixel
   layer every frame of the transition, which is what cost the frames. This veil
   is a copy of the settled film captured once at half resolution, with a blur
   baked into a second copy. Opening the label is then a cross-fade between two
   static layers plus a dim and a vignette: compositor work only, no filter on
   the big canvas. */
.intro-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  background: #03070a;
  transform: scale(1);
  transition:
    opacity 900ms ease,
    transform 2600ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 900ms;
}

.intro-veil canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#intro-veil-soft {
  opacity: 0;
  transition: opacity 2100ms cubic-bezier(0.33, 0, 0.2, 1);
}

/* The dim and the vignette are their own layers, so brightness falls smoothly
   while the two film copies cross-fade underneath. */
.intro-veil::before,
.intro-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.intro-veil::before {
  background: rgba(2, 6, 10, 0.32);
  transition: opacity 1100ms ease;
}

.intro-veil::after {
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(2, 7, 11, 0) 30%,
    rgba(2, 6, 9, 0.5) 76%,
    rgba(1, 4, 7, 0.78) 100%
  );
  transition: opacity 1500ms ease;
}

#overlay[data-stage='identity'] .intro-veil {
  opacity: 1;
  visibility: visible;
  transform: scale(1.055);
  transition:
    opacity 760ms cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 3000ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

#overlay[data-stage='identity'] #intro-veil-soft {
  opacity: 1;
}

#overlay[data-stage='identity'] .intro-veil::before {
  opacity: 1;
}

#overlay[data-stage='identity'] .intro-veil::after {
  opacity: 0.92;
}

#overlay[data-stage='picker'] #intro-canvas,
#overlay[data-stage='launch'] #intro-canvas {
  opacity: 0;
  transform: scale(1.065);
}

#overlay[data-stage='picker'] .intro-veil,
#overlay[data-stage='launch'] .intro-veil {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.08);
  transition:
    opacity 620ms ease,
    transform 900ms ease,
    visibility 0s linear 620ms;
}

.intro-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  transition:
    opacity 650ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 650ms;
}

#overlay[data-stage='identity'] .intro-stage,
#overlay[data-stage='picker'] .intro-stage,
#overlay[data-stage='launch'] .intro-stage {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-24px) scale(0.985);
}

.intro-brand {
  position: relative;
  z-index: 0;
  display: grid;
  justify-items: center;
}

.intro-brand::before {
  /* The bacterial wordmark is painted on the canvas underneath, so a dark
     scrim here would mute the letters it is meant to frame. */
  display: none;
}

.intro-brand > * {
  position: relative;
}

.intro-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 10.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(196, 245, 255, 0.86);
  text-shadow: 0 1px 14px rgba(0, 8, 12, 0.9);
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 900ms ease 120ms,
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.intro-eyebrow::before,
.intro-eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 232, 255, 0.5));
}

.intro-eyebrow::after {
  transform: scaleX(-1);
}

.intro-title {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-left: 0.16em;
  /* The wordmark is the whole opening shot: it should reach for the edges of
     the viewport, not sit as a caption in the middle of it. */
  font-size: clamp(40px, min(13vw, 19.5vh), 190px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: 0.16em;
  color: transparent;
}

/* Narrow screens have width, not height, to spend: tighten the tracking so the
   glyphs themselves can stay large instead of the word shrinking to fit. */
@media (max-width: 560px) {
  .intro-title {
    letter-spacing: 0.11em;
  }
}

/* The h1 is a measuring frame and an accessible label; the visible wordmark is
   formed by the cells on the intro canvas. Its glyphs still occupy space so the
   load panel and tagline keep their composition. */
.intro-title span {
  --title-glow: 34px;
  display: inline-block;
  opacity: 0;
  color: transparent;
  background: none;
  filter: none;
  animation: none;
}

/* If the off-screen wordmark mask cannot be sampled, the canvas leaves the real
   heading visible instead of showing an empty frame. */
.intro-title--fallback,
.intro-title--fallback span {
  color: rgba(190, 247, 255, 0.92);
  opacity: 1;
  text-shadow: 0 0 28px rgba(112, 232, 255, 0.32);
}

.intro-tag {
  margin: 26px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(203, 238, 246, 0.88);
  text-shadow: 0 1px 14px rgba(0, 8, 12, 0.9);
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 800ms ease 260ms,
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 260ms;
}

#overlay[data-stage='ready'] .intro-eyebrow,
#overlay[data-stage='ready'] .intro-tag {
  opacity: 1;
  transform: none;
}

.load-panel {
  position: relative;
  z-index: 0;
  width: min(380px, 84vw);
  /* One fixed box for the whole opening. The meter and the play button share a
     row (they are never on screen together) and the hint has the row below, so
     nothing outside the panel moves when the bar retires or the button arrives.
     Sizing this by its content was what slid the heading - and the cell the film
     holds under it - as the bar filled. */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 68px 30px;
  justify-items: center;
  align-items: center;
  margin-top: 38px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 700ms;
}

#overlay[data-stage='loading'] .load-panel,
#overlay[data-stage='primed'] .load-panel,
#overlay[data-stage='forming'] .load-panel,
#overlay[data-stage='ready'] .load-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

/* The meter is loading chrome, not part of the finished frame. When the culture
   reaches 100% it dissolves back into the film, and the play button is left
   alone above the agar. */
.load-meter {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: center;
  width: 100%;
  transition:
    opacity 560ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

#overlay[data-stage='primed'] .load-meter,
#overlay[data-stage='forming'] .load-meter,
#overlay[data-stage='ready'] .load-meter {
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 560ms ease 260ms,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 1200ms;
}

.load-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 0 2px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(199, 240, 248, 0.88);
  text-shadow: 0 1px 14px rgba(0, 8, 12, 0.92);
}

.load-head b {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #ecfeff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(127, 232, 255, 0.5);
}

/* A capillary rather than a rule: the track is a vessel with a wet inner wall,
   and the fill is a colony creeping along it cell by cell. */
.load-track {
  position: relative;
  width: 100%;
  height: 13px;
  margin-top: 13px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(3, 18, 24, 0.82), rgba(3, 13, 18, 0.6)),
    radial-gradient(ellipse at 50% 130%, rgba(84, 208, 233, 0.18), transparent 72%);
  box-shadow:
    0 0 0 1px rgba(146, 240, 255, 0.24) inset,
    0 1px 0 rgba(216, 253, 255, 0.18) inset,
    0 14px 38px rgba(0, 0, 0, 0.42);
}

.load-track::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(127, 232, 255, 0.12), rgba(12, 48, 58, 0.08));
  box-shadow: 0 0 16px rgba(58, 176, 199, 0.2) inset;
  pointer-events: none;
}

/* Light travels along the wet membrane instead of the old flat sweep. */
.load-track::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 34%, rgba(222, 254, 255, 0.22) 46%, transparent 58%);
  background-size: 260% 100%;
  animation: vein-sheen 6s ease-in-out infinite;
  pointer-events: none;
}

#load-fill {
  position: relative;
  z-index: 2;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.5) 0 1.3px, transparent 1.9px) 0 0 / 9px 9px,
    radial-gradient(circle at 32% 68%, rgba(198, 253, 255, 0.42) 0 2px, transparent 2.7px) 0 0 / 15px 15px,
    linear-gradient(90deg, rgba(30, 126, 146, 0.92), rgba(92, 212, 232, 0.96) 55%, rgba(224, 254, 255, 0.99));
  box-shadow:
    0 0 22px rgba(127, 232, 255, 0.5),
    0 0 0 1px rgba(216, 253, 255, 0.28) inset;
  transition: width 140ms linear;
  animation: culture-creep 7s linear infinite;
}

/* The leading edge is the nutrient front: the brightest part of the colony and
   the only part of it that moves on its own. */
#load-fill::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -2px;
  bottom: -1px;
  width: 24px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 58% 50%, rgba(255, 255, 255, 0.95), rgba(180, 252, 255, 0.5) 36%, rgba(127, 232, 255, 0) 74%);
  filter: blur(1px);
  animation: front-throb 1.9s ease-in-out infinite;
  pointer-events: none;
}

.load-status {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 253, 255, 0.97);
  /* A dark cuticle around each glyph: the macro cell's rim can pass behind this
     line, and an outline keeps the type in front of it without a panel. */
  -webkit-text-stroke: 0.6px rgba(2, 12, 17, 0.82);
  paint-order: stroke fill;
  text-shadow:
    0 0 3px rgba(0, 8, 12, 0.95),
    0 0 12px rgba(0, 8, 12, 0.9),
    0 0 26px rgba(0, 8, 12, 0.75);
}

/* The button is a living cell: a membrane with a nucleus, a breathing halo and
   a ring that keeps budding outward. */
/* The slot carries the pointer-driven deformation; the button keeps its own
   reveal, hover and focus styles. */
.play-slot {
  position: relative;
  display: inline-flex;
  grid-area: 1 / 1;
  /* Sits a touch above the panel's centre line. The capsule is the last thing
     the opening shows, and lifting it off the grid row's middle puts the button
     closer to the title it belongs to instead of hovering over the caption. */
  align-self: start;
  margin-top: -6px;
  isolation: isolate;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* The light the button gives off: one soft bloom, fading to nothing in every
   direction. It replaces a blurred pill shadow, which rasterised as the faint
   rectangle that used to sit behind the button. */
.play-slot::before {
  content: '';
  position: absolute;
  inset: -58% -26%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(126, 234, 255, 0.22),
    rgba(74, 182, 222, 0.08) 46%,
    rgba(36, 118, 168, 0) 74%
  );
  opacity: 0;
  transition: opacity 900ms ease 160ms;
}

#overlay[data-stage='ready'] .play-slot::before {
  opacity: 1;
}

.play {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 0;
  padding: 18px 46px 18px 34px;
  border: 1px solid rgba(170, 248, 255, 0.62);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 32% 14%, rgba(224, 255, 255, 0.42), transparent 56%),
    radial-gradient(ellipse at 72% 92%, rgba(64, 196, 220, 0.42), transparent 62%),
    linear-gradient(180deg, rgba(24, 78, 92, 0.995), rgba(6, 24, 32, 1));
  box-shadow:
    0 0 0 1px rgba(200, 253, 255, 0.14) inset,
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 18px 34px rgba(0, 0, 0, 0.46),
    0 0 16px rgba(94, 220, 244, 0.2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #f2ffff;
  text-shadow: 0 0 18px rgba(150, 246, 255, 0.55);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 500ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    visibility 0s linear 500ms;
}

.play::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, rgba(150, 248, 255, 0.78) 45%, rgba(64, 190, 214, 0.35) 72%, transparent 78%);
  box-shadow:
    0 0 14px rgba(168, 252, 255, 0.85),
    0 0 4px rgba(255, 255, 255, 0.9);
  animation: play-nucleus 2.6s ease-in-out infinite;
}

/* Nothing is drawn round the capsule any more. A second border budding outward
   read as a rectangular plate behind the button; the light it stood in for is the
   slot's soft bloom, which has no edge to see. */

#overlay[data-stage='ready'] .play {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  animation: play-glow 2.8s ease-in-out 600ms infinite;
  transition:
    opacity 500ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}

/* The held 100% frame. The loading bar is gone; one click both starts the
   score and hands the macro cell its first division. */
.mitosis {
  gap: 12px;
  padding: 14px 30px 14px 24px;
  font-size: 11px;
  letter-spacing: 0.28em;
}

.mitosis::before {
  /* Two nucleoids, still joined: the cell is about to pinch. */
  box-shadow:
    0 0 14px rgba(168, 252, 255, 0.85),
    0 0 4px rgba(255, 255, 255, 0.9),
    10px 0 0 -1px rgba(168, 252, 255, 0.72),
    10px 0 12px rgba(127, 232, 255, 0.35);
}

#overlay[data-stage='primed'] .mitosis-slot::before {
  opacity: 1;
}

#overlay[data-stage='primed'] .mitosis {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  animation: play-glow 2.8s ease-in-out 600ms infinite;
  transition:
    opacity 500ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}

#overlay[data-stage='primed'] .mitosis:hover {
  transform: translateY(-1px) scale(1.035);
}

#overlay[data-stage='primed'] .mitosis:active {
  transform: translateY(0) scale(0.985);
}

/* Once the division starts, the play button owns the row again. */
#overlay[data-stage='forming'] .mitosis,
#overlay[data-stage='ready'] .mitosis,
#overlay[data-stage='identity'] .mitosis,
#overlay[data-stage='picker'] .mitosis,
#overlay[data-stage='launch'] .mitosis {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Both controls share one grid cell. A hidden button stops painting, but its
   slot still occupies the cell and was swallowing the top half of Play. Only
   the slot that belongs to the current stage may take pointer hits. */
#overlay:not([data-stage='ready']) #play-slot,
#overlay:not([data-stage='primed']) #mitosis-slot {
  visibility: hidden;
  pointer-events: none;
}

.play:hover {
  border-color: rgba(214, 253, 255, 0.95);
  background:
    radial-gradient(ellipse at 30% 18%, rgba(220, 255, 255, 0.44), transparent 58%),
    radial-gradient(ellipse at 74% 90%, rgba(84, 210, 234, 0.46), transparent 64%),
    linear-gradient(180deg, rgba(30, 90, 106, 0.995), rgba(7, 28, 37, 1));
  box-shadow:
    0 0 0 1px rgba(216, 253, 255, 0.2) inset,
    0 1px 0 rgba(255, 255, 255, 0.26) inset,
    0 20px 36px rgba(0, 0, 0, 0.48),
    0 0 22px rgba(127, 232, 255, 0.3);
  outline: none;
}

#overlay[data-stage='ready'] .play:hover {
  transform: translateY(-1px) scale(1.035);
}

#overlay[data-stage='ready'] .play:active {
  transform: translateY(0) scale(0.985);
}

.play:focus-visible {
  /* The button takes focus the moment the field is ready, so its focus state has
     to be a breath of light, not a second capsule: a five pixel outline at four
     pixels' offset rasterised as the rectangular plate that sat behind the
     button. (The glow animation owns box-shadow, so the cue is the outline.) */
  border-color: rgba(226, 254, 255, 1);
  outline: 2px solid rgba(127, 232, 255, 0.24);
  outline-offset: 7px;
}


.load-hint {
  grid-area: 2 / 1;
  align-self: start;
  margin: 0;
  visibility: hidden;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(216, 246, 252, 0.92);
  -webkit-text-stroke: 0.5px rgba(2, 12, 17, 0.7);
  paint-order: stroke fill;
  text-shadow:
    0 0 3px rgba(0, 8, 12, 0.95),
    0 0 12px rgba(0, 8, 12, 0.9),
    0 0 24px rgba(0, 8, 12, 0.7);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 500ms ease 300ms,
    transform 500ms ease 300ms;
}

#overlay[data-stage='primed'] .load-hint,
#overlay[data-stage='ready'] .load-hint {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* The culture label sits between the title field and the morphology picker. */
.identity-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.985);
  transition:
    opacity 620ms ease,
    transform 950ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 620ms;
}

#overlay[data-stage='identity'] .identity-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 140ms, 140ms, 0s;
}

#overlay[data-stage='picker'] .identity-stage,
#overlay[data-stage='launch'] .identity-stage {
  opacity: 0;
  transform: translateY(-24px) scale(0.97);
  visibility: visible;
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 700ms;
}

.identity-back {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(127, 232, 255, 0.18);
  border-radius: 999px;
  background: rgba(6, 22, 28, 0.62);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(157, 241, 255, 0.72);
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.identity-back:hover {
  color: #e8fdff;
  border-color: rgba(164, 247, 255, 0.34);
  background: rgba(10, 34, 42, 0.8);
}

.identity-back:active {
  transform: translateY(1px);
}

.identity-back:focus-visible {
  outline: 1px solid rgba(164, 247, 255, 0.7);
  outline-offset: 2px;
}

.identity-back span {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
}

.identity-card {
  position: relative;
  width: min(560px, 92vw);
  padding: 26px 28px 22px;
  border: 1px solid rgba(127, 232, 255, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(15, 58, 68, 0.55), rgba(3, 9, 12, 0.94) 68%),
    rgba(3, 8, 11, 0.96);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(127, 232, 255, 0.03) inset;
  text-align: left;
  overflow: visible;
}

#overlay[data-stage='identity'] .identity-card {
  animation: identity-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

#overlay .identity-card [hidden] {
  display: none !important;
}

.account-modes {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin-top: 18px;
  padding: 4px;
  border: 1px solid rgba(127, 232, 255, 0.16);
  border-radius: 999px;
  background: rgba(4, 16, 20, 0.6);
}

.account-mode {
  border: 0;
  border-radius: 999px;
  padding: 7px 15px;
  background: transparent;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(139, 191, 201, 0.72);
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.account-mode:hover {
  color: #dffbff;
}

.account-mode.selected {
  background: rgba(127, 232, 255, 0.12);
  color: #e8fdff;
  box-shadow: 0 0 0 1px rgba(164, 247, 255, 0.18) inset;
}

.account-mode:focus-visible {
  outline: 1px solid rgba(164, 247, 255, 0.7);
  outline-offset: 2px;
}

.google-auth {
  margin-top: 16px;
}

.google-button-slot {
  display: flex;
  justify-content: stretch;
  width: 100%;
  min-height: 44px;
}

.google-button-slot > div,
.google-button-slot iframe {
  width: 100% !important;
}

.google-auth-note {
  margin: 8px 0 0;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: rgba(110, 146, 158, 0.58);
  text-align: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0 0;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(110, 146, 158, 0.5);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(127, 232, 255, 0.11);
}

.google-finish {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 15px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(139, 233, 242, 0.18);
  border-radius: 8px;
  background: rgba(8, 29, 32, 0.46);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgba(171, 216, 217, 0.82);
}

.google-finish b {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 400;
  color: #e8fdff;
}

.google-finish-dot {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b8f4ce;
  box-shadow: 0 0 9px rgba(184, 244, 206, 0.72);
}

.account-wide {
  grid-column: 1 / -1;
}

.account-credentials {
  margin-top: 16px;
}

.account-names {
  margin-top: 12px;
}

.account-signed {
  margin-top: 18px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(127, 232, 255, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(18, 66, 76, 0.55), rgba(4, 15, 19, 0.72) 70%),
    rgba(4, 14, 18, 0.7);
}

.account-signed-label {
  display: block;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(151, 239, 255, 0.6);
}

.account-signed-name {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: #e8fdff;
}

.account-signed-handle {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(155, 196, 206, 0.72);
}

.account-switch {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(157, 241, 255, 0.68);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.account-switch:hover {
  color: #e8fdff;
}

.identity-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 8px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(151, 239, 255, 0.62);
}

.identity-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(127, 232, 255, 0.7), rgba(127, 232, 255, 0));
}

.identity-title {
  margin: 10px 0 0;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8fdff;
  outline: none;
}

.identity-copy {
  max-width: 46ch;
  margin: 14px 0 0;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: rgba(155, 196, 206, 0.78);
}

.identity-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}

.identity-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.identity-field > span {
  font-size: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(139, 191, 201, 0.7);
}

.identity-field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(127, 232, 255, 0.2);
  border-radius: 8px;
  background: rgba(4, 16, 20, 0.72);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #dffbff;
  outline: none;
  user-select: text;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.identity-field input::placeholder {
  color: rgba(120, 158, 168, 0.42);
}

.identity-field input:focus-visible {
  border-color: rgba(164, 247, 255, 0.72);
  background: rgba(8, 28, 34, 0.82);
  box-shadow: 0 0 0 3px rgba(127, 232, 255, 0.12);
}

.identity-field small {
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: rgba(110, 146, 158, 0.6);
}

.identity-error {
  margin: 14px 0 0;
  min-height: 1.4em;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #ff9d8a;
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 200ms ease,
    transform 220ms ease;
}

.identity-error.show {
  opacity: 1;
  transform: none;
}

.identity-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(127, 232, 255, 0.1);
}

.identity-actions .go {
  padding: 11px 30px;
}

.identity-note {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(110, 146, 158, 0.55);
}

.identity-ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(190, 250, 255, 0.75);
  opacity: 0;
  pointer-events: none;
}

#overlay[data-stage='identity'] .identity-ring {
  animation: identity-ring 1200ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.picker-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 38%, rgba(8, 30, 36, 0.78), rgba(2, 6, 9, 0.97) 64%),
    #03070a;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition:
    opacity 700ms ease 160ms,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 160ms,
    visibility 0s linear 700ms;
}

#overlay[data-stage='picker'] .picker-stage {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 700ms ease 160ms,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
}

#overlay .start-card {
  display: flex;
  flex-direction: column;
  width: min(680px, 92vw);
  max-height: 92vh;
  overflow: hidden;
  padding: 8px 6px 0;
  text-align: center;
}

.picker-eyebrow {
  margin: 4px 0 0;
  font-size: 8px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.45);
}

.picker-title {
  margin: 10px 0 0;
  outline: none;
  font-size: clamp(27px, 4.2vw, 42px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  text-transform: uppercase;
  color: #e9feff;
  text-shadow: 0 0 50px rgba(127, 232, 255, 0.35);
}

#overlay .sub {
  margin: 12px 0 26px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.55);
}

@keyframes letter-in {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(1.08);
    filter: blur(12px) drop-shadow(0 0 0 rgba(120, 232, 255, 0));
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0) drop-shadow(0 0 var(--title-glow) rgba(120, 232, 255, 0.32));
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* A cell in agar casts one soft shadow and gives off one soft light. Stacked
   shadows with visible blur edges were what read as a rectangle. */
@keyframes play-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(200, 253, 255, 0.12) inset,
      0 1px 0 rgba(255, 255, 255, 0.2) inset,
      0 14px 30px rgba(0, 0, 0, 0.4),
      0 0 26px rgba(94, 220, 244, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(216, 253, 255, 0.18) inset,
      0 1px 0 rgba(255, 255, 255, 0.24) inset,
      0 16px 34px rgba(0, 0, 0, 0.42),
      0 0 38px rgba(127, 232, 255, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-title span {
    filter: none;
    animation: none;
  }

  #overlay[data-stage='ready'] .play {
    animation: none;
  }

  .play::before,
  .play::after,
  #load-fill,
  #load-fill::after,
  .load-track::after {
    animation: none;
  }

  #intro-canvas {
    transition: opacity 300ms ease;
  }

  .intro-veil,
  #overlay[data-stage='identity'] .intro-veil {
    transition-duration: 1ms;
  }

  #intro-veil-soft,
  .intro-veil::before,
  .intro-veil::after {
    transition-duration: 1ms;
  }

  .intro-stage,
  .picker-stage,
  .load-panel {
    transition-duration: 200ms;
  }
}

.morph-picker {
  max-width: 520px;
  margin: 0 auto 22px;
}

.pick-label {
  margin: 18px 0 9px;
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.45);
}

.shapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.shape {
  display: grid;
  appearance: none;
  -webkit-appearance: none;
  justify-items: center;
  gap: 3px;
  padding: 12px 8px 10px;
  border: 1px solid rgba(127, 232, 255, 0.14);
  border-radius: 11px;
  background: rgba(9, 24, 30, 0.55);
  color: #a9cbd5;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.shape svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.85;
}

.shape svg .inner {
  stroke-width: 1.2;
  opacity: 0.5;
}

.shape b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dcf8ff;
}

.shape span {
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(145, 182, 193, 0.8);
}

.shape:hover {
  border-color: rgba(127, 232, 255, 0.34);
  background: rgba(14, 38, 46, 0.6);
}

.shape.selected {
  border-color: rgba(127, 232, 255, 0.7);
  background: rgba(24, 62, 74, 0.55);
  box-shadow: 0 0 26px rgba(127, 232, 255, 0.14);
  color: #c9f7ff;
}

/*
 * The selected morph's dossier. It occupies a stable block between the shape
 * cards and the diet/colour pickers, so swapping bacteria never moves the
 * colour wheel: only this panel's text changes.
 */
.morph-focus {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 13px;
  min-height: 164px;
  margin-top: 10px;
  padding: 13px 16px 14px;
  border: 1px solid rgba(127, 232, 255, 0.16);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(8, 28, 34, 0.62), rgba(5, 16, 21, 0.5));
  text-align: left;
}

.focus-preview {
  position: relative;
  align-self: center;
  height: 128px;
  border: 1px solid rgba(127, 232, 255, 0.12);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 46%, rgba(18, 58, 68, 0.55), rgba(3, 10, 13, 0.8));
  overflow: hidden;
}

.focus-preview canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.focus-body {
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
}

.morph-focus.pop {
  animation: focus-pop 230ms ease;
}

@keyframes focus-pop {
  0% {
    transform: translateY(3px);
    opacity: 0.55;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.focus-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.focus-head b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e7feff;
}

.focus-head span {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.5);
}

.focus-copy {
  margin: 0;
  font-size: 10px;
  line-height: 1.65;
  color: #8fb2bd;
}

.focus-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2px;
}

.focus-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.focus-stat > span {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f939e;
}

.focus-stat b {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #dbf8ff;
  font-variant-numeric: tabular-nums;
}

.focus-stat i {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  border-radius: 3px;
  background: rgba(127, 232, 255, 0.12);
  overflow: hidden;
}

.focus-stat i span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(90, 214, 255, 0.7), rgba(180, 249, 255, 0.95));
}

.diets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.diet {
  display: grid;
  gap: 3px;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 13px;
  border: 1px solid rgba(127, 232, 255, 0.14);
  border-radius: 11px;
  background: rgba(9, 24, 30, 0.55);
  color: #a9cbd5;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.diet b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dcf8ff;
}

.diet span {
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(145, 182, 193, 0.8);
}

.diet:hover {
  border-color: rgba(127, 232, 255, 0.34);
  background: rgba(14, 38, 46, 0.6);
}

.diet.selected {
  border-color: rgba(255, 178, 92, 0.7);
  background: rgba(62, 36, 16, 0.55);
  box-shadow: 0 0 26px rgba(255, 178, 92, 0.12);
}

.diet.selected b {
  color: #ffe0b5;
}

.color-control {
  --tint: #7ae3ee;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  max-width: 490px;
  margin: 0 auto;
  padding: 15px 17px;
  border: 1px solid rgba(127, 232, 255, 0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9, 27, 33, 0.58), rgba(5, 15, 20, 0.46));
  text-align: left;
}

.wheel-wrap {
  position: relative;
  justify-self: center;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(127, 232, 255, 0.1),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

#color-wheel {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}

#color-wheel:focus-visible {
  outline: 2px solid rgba(127, 232, 255, 0.8);
  outline-offset: 5px;
}

.wheel-cursor {
  --tint: #7ae3ee;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #f2feff;
  border-radius: 50%;
  background: var(--tint);
  box-shadow:
    0 0 0 1px rgba(1, 6, 8, 0.6),
    0 0 16px var(--tint);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    left 40ms linear,
    top 40ms linear,
    background 90ms linear;
}

.wheel-cursor::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
}

.color-side {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.color-readout {
  display: flex;
  align-items: center;
  gap: 11px;
}

.color-chip {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: var(--tint);
  box-shadow:
    0 0 0 1px rgba(1, 6, 8, 0.5),
    0 0 22px var(--tint);
  transition: background 90ms linear;
}

.color-readout div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.color-readout b {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #e6fdff;
  font-variant-numeric: tabular-nums;
}

.color-readout span {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(127, 178, 189, 0.7);
}

.brightness {
  display: grid;
  gap: 7px;
}

.brightness > span {
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(127, 178, 189, 0.7);
}

#color-value {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

#color-value:focus-visible {
  outline: 2px solid rgba(127, 232, 255, 0.7);
  outline-offset: 2px;
}

#color-value::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #050b0d, var(--tint));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#color-value::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: #effeff;
  box-shadow: 0 0 12px var(--tint);
  cursor: pointer;
}

#color-value::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #050b0d, var(--tint));
}

#color-value::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: #effeff;
  box-shadow: 0 0 12px var(--tint);
  cursor: pointer;
}

.color-note {
  margin: 0;
  font-size: 9px;
  line-height: 1.55;
  color: rgba(126, 164, 174, 0.8);
}

@media (max-width: 560px) {
  .intro-title {
    font-size: clamp(38px, 13vw, 62px);
    letter-spacing: 0.1em;
    padding-left: 0.1em;
  }

  .intro-title span {
    --title-glow: 18px;
  }

  .intro-eyebrow {
    margin-bottom: 16px;
  }

  .intro-tag {
    margin-top: 18px;
    font-size: 8px;
    letter-spacing: 0.24em;
  }

  .picker-title {
    font-size: clamp(22px, 7vw, 32px);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
  }

  .shapes,
  .diets {
    grid-template-columns: 1fr;
  }

  .morph-focus {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .focus-preview {
    height: 96px;
  }

  .focus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shape {
    grid-template-columns: 38px 1fr;
    justify-items: start;
    align-items: center;
    column-gap: 10px;
  }

  .shape svg {
    grid-row: span 2;
    width: 38px;
    height: 38px;
  }

  .color-control {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 15px;
    padding: 16px;
  }

  .color-side {
    width: 100%;
  }

  .color-readout {
    justify-content: center;
  }

  .color-note {
    text-align: center;
  }
}

#overlay .body {
  margin: 0 auto;
  max-width: 520px;
  font-size: 12px;
  line-height: 1.85;
  color: #9db8c2;
}

#overlay .keys {
  margin: 22px 0 34px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(110, 146, 158, 0.85);
}

#overlay .go {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  padding: 11px 26px;
  border: 1px solid rgba(127, 232, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c9f7ff;
  cursor: pointer;
  animation: breathe 2.8s ease-in-out infinite;
}

#overlay .go:hover {
  border-color: rgba(127, 232, 255, 0.75);
  background: rgba(127, 232, 255, 0.06);
}

.mutation {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 45%, rgba(4, 22, 18, 0.72), rgba(2, 6, 8, 0.93));
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.mutation.show {
  opacity: 1;
  pointer-events: auto;
}

.mutation .card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1220px, 96vw);
  height: min(88vh, 900px);
  overflow: hidden;
  padding: 22px 24px 18px;
  border: 1px solid rgba(125, 255, 176, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 28, 24, 0.96), rgba(4, 12, 12, 0.94));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
  scrollbar-width: thin;
}

.mutation-minimize {
  position: absolute;
  top: 12px;
  right: 14px;
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 9px;
  border: 1px solid rgba(125, 255, 176, 0.24);
  border-radius: 6px;
  background: transparent;
  color: #9fdcca;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.mutation-minimize:hover {
  border-color: rgba(125, 255, 176, 0.6);
  color: #e2fff4;
}

.mutation-points {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px solid rgba(125, 255, 176, 0.2);
  border-radius: 99px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9ffe7;
}

.mutation-points.empty {
  color: #7e9faa;
  border-color: rgba(127, 232, 255, 0.12);
}

/* The legend: five families by colour, five states by weight. Without it the
   canopy is just coloured boxes. */
.tech-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 12px;
  margin: 10px auto 0;
  max-width: 760px;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9dc2bd;
}

.legend-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip, #7dffb0);
  box-shadow: 0 0 8px var(--chip, #7dffb0);
}

.legend-chip[data-family="wall"] { --chip: #7dffb0; }
.legend-chip[data-family="motion"] { --chip: #7fe8ff; }
.legend-chip[data-family="feeding"] { --chip: #ffd28a; }
.legend-chip[data-family="predation"] { --chip: #ff8fa0; }
.legend-chip[data-family="apocalypse"] { --chip: #c9a6ff; }

.legend-states {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(125, 255, 176, 0.14);
}

.legend-states b {
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.state-open { color: #7dffb0; }
.state-taken { color: #e2fff4; }
.state-locked { color: #5b7885; }
.state-researching { color: #7fe8ff; }
.state-late { color: #ffb05c; }
.state-hunter { color: #ff8fa0; }

/* The tree's toolbar: the banked points on the left, the zoom on the right. */
.tech-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 10px;
}

.tech-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}

.tech-tools button {
  appearance: none;
  -webkit-appearance: none;
  min-width: 26px;
  padding: 4px 7px;
  border: 1px solid rgba(125, 255, 176, 0.22);
  border-radius: 6px;
  background: rgba(8, 26, 23, 0.7);
  color: #a8e8d2;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    color 140ms ease;
}

.tech-tools button:hover,
.tech-tools button:focus-visible {
  border-color: rgba(125, 255, 176, 0.6);
  color: #e2fff4;
  outline: none;
}

.tech-tools span {
  min-width: 38px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #6f97a2;
  font-variant-numeric: tabular-nums;
}

/* The stage: the radial map on the left, the readout pinned on the right. The
   description never moves, so the eye can go from a node to the words without
   hunting for where the text went. */
.tech-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 12px;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
}

/* The viewport: one scrollable pane, the rings drawn inside it at their own
   size. Flex plus an auto margin on the canvas centres the map in the pane when
   it fits and still scrolls from the true top-left when it does not. */
.tech-tree {
  position: relative;
  display: flex;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(125, 255, 176, 0.12);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 50%, rgba(125, 255, 176, 0.07), transparent 58%),
    rgba(4, 16, 14, 0.6);
  text-align: left;
  cursor: grab;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  /* The map is panned by the pointer, not by the browser's own gestures. */
  touch-action: none;
}

.tech-tree.dragging {
  cursor: grabbing;
  user-select: none;
}

/* The readout: a fixed column, not a footer. It keeps its place and its size
   while the map is picked, so a description can be read without chasing it. */
.tech-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 13px 14px 16px;
  overflow: auto;
  border: 1px solid rgba(125, 255, 176, 0.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 0%, rgba(125, 255, 176, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(9, 28, 23, 0.9), rgba(5, 18, 15, 0.84));
  text-align: left;
  scrollbar-width: thin;
}

.tech-detail-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(125, 255, 176, 0.14);
}

.tech-detail-head b {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--detail-tone, #e2fff4);
}

.tech-detail-head i {
  font-style: normal;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #6f97a2;
}

.tech-detail-text {
  font-size: 10px;
  line-height: 1.62;
  color: #93b7c0;
}

.tech-detail[data-family="wall"] { --detail-tone: #7dffb0; }
.tech-detail[data-family="motion"] { --detail-tone: #7fe8ff; }
.tech-detail[data-family="feeding"] { --detail-tone: #ffd28a; }
.tech-detail[data-family="predation"] { --detail-tone: #ff8fa0; }
.tech-detail[data-family="apocalypse"] { --detail-tone: #c9a6ff; }

/* Every number a node changes, before and after, at the level it is bought. */
.tech-detail-stats {
  display: flex;
  flex-direction: column;
}

.tech-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(125, 255, 176, 0.1);
}

.tech-stat span {
  flex: 1 0 100%;
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f97a2;
}

.tech-stat b {
  font-size: 11px;
  font-weight: 400;
  color: #8fa9b2;
  font-variant-numeric: tabular-nums;
}

.tech-stat i {
  font-style: normal;
  font-size: 9px;
  color: #4f6f78;
}

.tech-stat em {
  font-style: normal;
  font-size: 12px;
  color: var(--detail-tone, #e2fff4);
  font-variant-numeric: tabular-nums;
}

.tech-stat small {
  flex: 1 0 100%;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  color: #5d8a86;
}

.tech-detail-state {
  align-self: flex-start;
  padding: 4px 9px;
  border: 1px solid rgba(125, 255, 176, 0.28);
  border-radius: 99px;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9ffe7;
}

.tech-detail-state[hidden] {
  display: none;
}

.tech-canvas {
  position: relative;
  flex: 0 0 auto;
  margin: auto;
  transform-origin: 0 0;
}

.tech-links {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

/* Strands between cells: soft, rounded, faintly lit, like filaments rather
   than wires on a diagram. */
.tech-links path {
  fill: none;
  stroke: rgba(127, 232, 255, 0.16);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.tech-links path.open {
  stroke: var(--tone, rgba(125, 255, 176, 0.6));
  stroke-opacity: 0.62;
  stroke-width: 1.8;
}

.tech-links .bud {
  fill: rgba(127, 232, 255, 0.28);
}

.tech-links .bud.open {
  fill: var(--tone, #7dffb0);
  filter: drop-shadow(0 0 4px var(--tone, #7dffb0));
}

/* The faint rings the tree grows on: they make "one step out" countable
   without adding a single label to the map. */
.tech-links .tech-ring {
  fill: none;
  stroke: rgba(125, 255, 176, 0.09);
  stroke-width: 1;
  stroke-dasharray: 2 9;
}

/* A strand that skips rings the colony has not opened is dashed, so the jump
   reads as distance rather than as a missing connection. */
.tech-links path.leap {
  stroke-dasharray: 3 8;
  stroke-opacity: 0.4;
}

/* The strands from the core to the three starting mutations: the map has a
   trunk, not three circles floating around a cell. */
.tech-links path.root {
  stroke-opacity: 0.42;
  stroke-width: 1.7;
}

/* A taken strand carries a slow current outward, so the eye can follow the line
   from the core to the newest pick without reading a single label. */
.tech-links .flow {
  stroke: var(--tone, #7dffb0);
  stroke-width: 3.4;
  stroke-opacity: 0.16;
  stroke-linecap: round;
  stroke-dasharray: 1 18;
  filter: drop-shadow(0 0 5px var(--tone, #7dffb0));
  animation: tech-flow 3.8s linear infinite;
  pointer-events: none;
}

@keyframes tech-flow {
  to {
    stroke-dashoffset: -38;
  }
}

/* The core is the cell the map belongs to — the one node nobody can buy. */
.tech-core {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(125, 255, 176, 0.36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 26%, rgba(226, 255, 244, 0.16), transparent 52%),
    radial-gradient(circle at 62% 78%, rgba(125, 255, 176, 0.2), transparent 62%),
    rgba(8, 26, 22, 0.94);
  box-shadow:
    0 0 34px rgba(125, 255, 176, 0.18),
    inset 0 0 28px rgba(125, 255, 176, 0.1);
  color: #e2fff4;
  text-align: center;
}

/* Two slow halos around the core: the cell is alive while the map is read. */
.tech-core::before,
.tech-core::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(125, 255, 176, 0.18);
  border-radius: 50%;
  pointer-events: none;
  animation: core-halo 6.4s ease-in-out infinite;
}

.tech-core::after {
  inset: -25px;
  border-color: rgba(125, 255, 176, 0.1);
  animation-delay: -3.2s;
}

@keyframes core-halo {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.03);
  }
}

.tech-core b {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tech-core em {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7dffb0;
}

.tech-core span {
  font-size: 7.5px;
  letter-spacing: 0.08em;
  color: #6f97a2;
}

/* A node is a cell: a circle with a membrane's slight unevenness, lit from
   inside, tinted by family. */
.tech-node {
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(127, 232, 255, 0.2);
  border-radius: 50% 48% 52% 49% / 49% 51% 48% 52%;
  background:
    radial-gradient(120% 100% at 32% 16%, rgba(255, 255, 255, 0.07), transparent 58%),
    radial-gradient(90% 90% at 70% 92%, color-mix(in srgb, var(--tone, #7dffb0) 14%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(10, 33, 28, 0.96), rgba(5, 17, 15, 0.95));
  color: #cdeff8;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.tech-node b {
  max-width: 96px;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e9fff7;
}

.tech-node-label {
  font-size: 6px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f97a2;
}

.tech-node-change {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--tone, #7dffb0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tech-node-cost {
  font-size: 6.5px;
  letter-spacing: 0.08em;
  color: #ffb05c;
}

.tech-node em {
  margin-top: 1px;
  font-style: normal;
  font-size: 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7dffb0;
}

.tech-node:hover:not([aria-disabled="true"]) {
  border-color: var(--tone, rgba(127, 232, 255, 0.5));
  background:
    radial-gradient(120% 100% at 32% 16%, rgba(255, 255, 255, 0.1), transparent 58%),
    radial-gradient(90% 90% at 70% 92%, color-mix(in srgb, var(--tone, #7dffb0) 20%, transparent), transparent 70%),
    rgba(14, 42, 34, 0.96);
}

/* Whatever is buyable right now breathes a little, so a deep tree still reads
   at a glance without having to scan every circle. */
.tech-node:not([aria-disabled="true"]) {
  border-color: var(--tone, rgba(127, 232, 255, 0.4));
  box-shadow:
    0 0 18px rgba(125, 255, 176, 0.14),
    inset 0 0 0 1px rgba(125, 255, 176, 0.1);
  animation: node-breathe 4.8s ease-in-out infinite;
}

.tech-node:not([aria-disabled="true"]):hover {
  transform: translateY(-1px) scale(1.02);
}

@keyframes node-breathe {
  0%,
  100% {
    box-shadow:
      0 0 14px rgba(125, 255, 176, 0.1),
      inset 0 0 0 1px rgba(125, 255, 176, 0.08);
  }

  50% {
    box-shadow:
      0 0 26px rgba(125, 255, 176, 0.24),
      inset 0 0 0 1px rgba(125, 255, 176, 0.16);
  }
}

.tech-node.chosen {
  border-color: var(--tone, rgba(125, 255, 176, 0.7));
  background:
    radial-gradient(120% 100% at 32% 16%, rgba(255, 255, 255, 0.08), transparent 58%),
    radial-gradient(90% 90% at 70% 92%, color-mix(in srgb, var(--tone, #7dffb0) 26%, transparent), transparent 70%),
    rgba(18, 50, 41, 0.96);
  box-shadow: inset 0 0 22px rgba(125, 255, 176, 0.1);
  animation: none;
}

.tech-node.chosen em {
  color: var(--tone, #7dffb0);
}

/* A project in progress has a quiet outer ring that fills clockwise. The ring
   is the only thing redrawn each frame while the countdown runs. */
.tech-node.researching {
  border-color: var(--tone, rgba(125, 255, 176, 0.7));
  box-shadow:
    0 0 26px color-mix(in srgb, var(--tone, #7dffb0) 24%, transparent),
    inset 0 0 0 1px rgba(125, 255, 176, 0.14);
  animation: research-breathe 2.6s ease-in-out infinite;
}

.tech-node.researching::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: conic-gradient(
    from -90deg,
    var(--tone, #7dffb0) calc(var(--research, 0) * 1turn),
    rgba(125, 255, 176, 0.12) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tone, #7dffb0) 46%, transparent));
  pointer-events: none;
}

.tech-node.researching .tech-node-state {
  color: #d8fbff;
}

@keyframes research-breathe {
  0%,
  100% {
    filter: brightness(0.96);
  }

  50% {
    filter: brightness(1.1);
  }
}

.tech-node.locked,
.tech-node.busy,
.tech-node.late,
.tech-node.hunter,
.tech-node.maxed {
  opacity: 0.55;
  cursor: not-allowed;
}

.tech-node.late {
  border-color: rgba(255, 176, 92, 0.24);
}

.tech-node.late em {
  color: #ffb05c;
}

.tech-node.hunter em {
  color: #ff8fa0;
}

.tech-node[aria-disabled="true"] {
  cursor: not-allowed;
}

.mutation h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e2fff4;
  text-shadow: 0 0 30px rgba(125, 255, 176, 0.25);
}

.mutation-copy {
  max-width: 560px;
  margin: 0 auto;
  font-size: 10.5px;
  line-height: 1.6;
  color: #8fb2bd;
}

/* The plate keeps running behind this card, and the colony is sealed while it
   does. Said once, in the same quiet voice as the rest of the panel. */
.tech-live {
  max-width: 560px;
  margin: 6px auto 0;
  font-size: 10px;
  line-height: 1.6;
  color: #9fbf9a;
  letter-spacing: 0.02em;
}

@media (max-width: 820px) {
  .tech-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .tech-detail {
    max-height: 38%;
  }
}

@media (max-width: 560px) {
  .mutation .tech-card {
    padding: 24px 18px;
  }
}

@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(127, 232, 255, 0);
  }
  50% {
    box-shadow: 0 0 26px rgba(127, 232, 255, 0.22);
  }
}
/* ------------------------------------------------------------------------- */
/* Start screen v2: the title film recedes, the picker opens through an iris, */
/* and the whole console is fitted to the viewport instead of scrolling.      */
/* ------------------------------------------------------------------------- */

.intro-brand {
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 650ms ease,
    filter 900ms ease;
}

/* The wordmark must not scale or lift while its cells are landing, or the
   canvas letters would drift away from the h1 frame they are measured against. */
#overlay[data-stage='loading'] .intro-brand,
#overlay[data-stage='forming'] .intro-brand,
#overlay[data-stage='ready'] .intro-brand {
  transform: none;
  opacity: 1;
}

#overlay[data-stage='picker'] .intro-brand {
  opacity: 0;
}


.picker-stage {
  padding: 14px;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
  transition:
    clip-path 1050ms cubic-bezier(0.7, 0, 0.2, 1),
    opacity 560ms ease 90ms,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 1050ms;
}

#overlay[data-stage='picker'] .picker-stage {
  clip-path: circle(150% at 50% 50%);
  transition:
    clip-path 1100ms cubic-bezier(0.7, 0, 0.2, 1),
    opacity 520ms ease 100ms,
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

.reveal-flash,
.reveal-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}

.reveal-flash {
  width: 170vmax;
  height: 170vmax;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(220, 255, 255, 0.66) 0%,
    rgba(137, 243, 255, 0.24) 22%,
    rgba(75, 199, 220, 0.08) 46%,
    rgba(75, 199, 220, 0) 66%
  );
  transform: translate(-50%, -50%) scale(0.06);
}

.reveal-ring {
  width: 58vmin;
  height: 58vmin;
  border: 1px solid rgba(190, 250, 255, 0.7);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(127, 232, 255, 0.14),
    inset 0 0 30px rgba(127, 232, 255, 0.08);
  transform: translate(-50%, -50%) scale(0.08);
}

#overlay[data-stage='picker'] .reveal-flash {
  animation: reveal-flash 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#overlay[data-stage='picker'] .reveal-ring {
  animation: reveal-ring 1150ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Inoculation: the picker is pushed toward the viewer, a bloom opens on the
   agar and the overlay lifts while the camera dives into the founder cell. */
#overlay[data-stage='launch'] {
  opacity: 0;
  transition: opacity 900ms ease 280ms;
}

#overlay[data-stage='launch'] .picker-stage {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(8px);
  transition:
    opacity 420ms ease,
    transform 760ms cubic-bezier(0.55, 0, 0.8, 0),
    filter 640ms ease;
}

#overlay[data-stage='launch'] .reveal-flash {
  animation: launch-flash 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#overlay[data-stage='launch'] .reveal-ring {
  animation: launch-ring 1300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ------------------------------------------------------------------ *
 * Inoculation console. One plate: header, three specimen columns and
 * an action bar. The whole plate is scaled as a single object by
 * fitPicker() instead of scrolling, so a short window shrinks it
 * rather than hiding the wheel or the sporulate button.
 * ------------------------------------------------------------------ */

#overlay .start-card {
  --fit: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1320px, 94vw);
  min-height: min(700px, 88vh);
  max-height: none;
  overflow: visible;
  padding: 20px 24px 14px;
  border: 1px solid rgba(127, 232, 255, 0.11);
  border-radius: 16px;
  background:
    radial-gradient(120% 150% at 8% -20%, rgba(38, 112, 128, 0.3), rgba(6, 17, 22, 0) 56%),
    radial-gradient(100% 140% at 104% 118%, rgba(30, 80, 96, 0.24), rgba(3, 9, 12, 0) 60%),
    linear-gradient(180deg, rgba(6, 18, 23, 0.9), rgba(2, 8, 11, 0.91));
  box-shadow:
    inset 0 1px 0 rgba(206, 253, 255, 0.06),
    0 46px 120px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
  text-align: left;
  transform: scale(var(--fit));
  transform-origin: center center;
}

/* Four hairline brackets instead of a closed frame: the plate reads as a
   microscope stage sitting on the field, not as a dialog box over it. */
#overlay .start-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 11px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) left top / 22px 1px no-repeat,
    linear-gradient(180deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) left top / 1px 22px no-repeat,
    linear-gradient(270deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) right top / 22px 1px no-repeat,
    linear-gradient(180deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) right top / 1px 22px no-repeat,
    linear-gradient(90deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) left bottom / 22px 1px no-repeat,
    linear-gradient(0deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) left bottom / 1px 22px no-repeat,
    linear-gradient(270deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) right bottom / 22px 1px no-repeat,
    linear-gradient(0deg, rgba(150, 240, 255, 0.4), rgba(150, 240, 255, 0)) right bottom / 1px 22px no-repeat;
  opacity: 0.85;
}

.start-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  padding: 2px 2px 15px;
  border-bottom: 1px solid rgba(127, 232, 255, 0.1);
}

.start-headline {
  min-width: 0;
}

.start-head .picker-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 8.5px;
  letter-spacing: 0.32em;
  color: rgba(127, 232, 255, 0.5);
}

.picker-pip {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #e6ffff, #58d2e8 58%, #18758a);
  box-shadow: 0 0 11px rgba(127, 232, 255, 0.65);
  animation: picker-pip 3.8s ease-in-out infinite;
}

@keyframes picker-pip {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

/* The intro hands its gradient wordmark over to this title, so the picker
   opens on the same cyan-to-violet light rather than plain white caps. */
.start-head .picker-title {
  margin: 8px 0 0;
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1;
  letter-spacing: 0.15em;
  padding-left: 0.15em;
  text-align: left;
  color: transparent;
  background: linear-gradient(96deg, #f4ffff 4%, #c2f3ff 30%, #8fdcff 50%, #d9c7ff 72%, #f7ffff 96%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 26px rgba(127, 232, 255, 0.22));
  text-shadow: none;
}

.head-note {
  margin: 7px 0 0;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(127, 232, 255, 0.44);
}

.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 0.96fr);
  align-items: stretch;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 2px 14px;
}

.start-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.start-block .pick-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 8px;
  letter-spacing: 0.26em;
  white-space: nowrap;
}

.start-block .pick-label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(127, 232, 255, 0.16), rgba(127, 232, 255, 0));
}

.pick-index {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(127, 232, 255, 0.16);
  border-radius: 4px;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  color: rgba(127, 232, 255, 0.44);
  font-variant-numeric: tabular-nums;
}

.start-block .diet-label {
  margin-top: 16px;
}

.start-block .shapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  flex: 1 1 auto;
}

.start-block .shape {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  align-items: center;
  gap: 0;
  padding: 14px 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 30, 37, 0.55), rgba(5, 16, 21, 0.45));
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.start-block .shape::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(127, 232, 255, 0.16);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.start-block .shape:hover {
  transform: translateY(-1px);
}

.start-block .shape.selected {
  background:
    radial-gradient(circle at 50% -10%, rgba(96, 226, 255, 0.2), rgba(12, 40, 48, 0) 68%),
    linear-gradient(180deg, rgba(16, 48, 58, 0.7), rgba(6, 20, 26, 0.55));
}

.start-block .shape.selected::after {
  background: #a6f6ff;
  box-shadow: 0 0 10px rgba(166, 246, 255, 0.9);
}

.start-block .shape svg {
  width: 68px;
  height: 68px;
  stroke-width: 1.6;
  opacity: 0.9;
}

.start-block .shape.selected svg {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(127, 232, 255, 0.35));
}

/* The name sits on a hairline at the foot of the slot, like a specimen tag;
   the body floats in the space above it. */
.start-block .shape b {
  width: 100%;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(127, 232, 255, 0.1);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-align: center;
}

.start-block .shape.selected b {
  border-top-color: rgba(127, 232, 255, 0.26);
}

.start-block .shape span {
  padding-top: 4px;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(145, 182, 193, 0.72);
}

.start-block .diets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  flex: 0 0 auto;
}

.start-block .diet {
  gap: 3px;
  padding: 11px 13px 10px;
  border-radius: 12px;
}

.start-block .diet b {
  font-size: 10px;
  letter-spacing: 0.13em;
}

.start-block .diet span {
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.start-dossier .morph-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(96px, 1fr) auto;
  align-items: stretch;
  gap: 13px;
  flex: 1 1 auto;
  min-height: auto;
  margin: 0;
  padding: 15px;
  border-radius: 12px;
}

.start-dossier .focus-preview {
  height: auto;
  min-height: 96px;
  align-self: stretch;
  border-radius: 10px;
}

.start-dossier .focus-body {
  align-content: space-between;
  gap: 12px;
}

.start-dossier .focus-text {
  display: grid;
  gap: 8px;
}

.start-dossier .focus-head b {
  font-size: 11px;
  letter-spacing: 0.18em;
}

.start-dossier .focus-head span {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(127, 232, 255, 0.55);
}

.start-dossier .focus-copy {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  font-size: 10px;
  line-height: 1.62;
  color: #92b6c1;
}

.start-dossier .focus-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 0;
}

.start-dossier .focus-stat {
  gap: 3px 8px;
}

.start-dossier .focus-stat > span {
  grid-column: 1;
  grid-row: 1;
}

.start-dossier .focus-stat > b {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.start-dossier .focus-stat > i {
  grid-column: 1 / -1;
  grid-row: 2;
}

.start-dossier .focus-stat > span {
  font-size: 7.5px;
  letter-spacing: 0.12em;
}

.start-dossier .focus-stat b {
  font-size: 9.5px;
}

.start-note {
  margin: 9px 2px 0;
  font-size: 8px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: rgba(126, 164, 174, 0.66);
}

.start-colour .color-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 16px;
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
}

.start-colour .wheel-wrap {
  width: min(100%, 208px);
  height: auto;
  aspect-ratio: 1;
}

.start-colour .color-side {
  gap: 12px;
  width: 100%;
}

.start-colour .color-readout b {
  font-size: 13px;
}

.start-colour .color-note {
  font-size: 8.5px;
  line-height: 1.55;
}

.start-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 2px 2px;
  border-top: 1px solid rgba(127, 232, 255, 0.1);
  background: none;
}

#overlay .start-actions .keys {
  max-width: 66%;
  margin: 0;
  font-size: 8px;
  line-height: 1.75;
  letter-spacing: 0.14em;
  text-align: left;
}

.start-actions .go {
  flex: 0 0 auto;
  padding: 12px 32px;
  font-size: 10px;
  letter-spacing: 0.3em;
}

@keyframes culture-creep {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 27px 0, -21px 0, 0 0;
  }
}

/* The nutrient front breathes at the head of the colony. */
@keyframes front-throb {
  0%,
  100% {
    opacity: 0.7;
    transform: scaleX(0.94);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes vein-sheen {
  0% {
    background-position: 160% 0;
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  72% {
    opacity: 0.55;
  }
  100% {
    background-position: -70% 0;
    opacity: 0;
  }
}

@keyframes play-ring {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  14% {
    opacity: 0.38;
  }
  100% {
    opacity: 0;
    transform: scale(1.32);
  }
}

@keyframes play-nucleus {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}

@keyframes reveal-flash {
  0% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.045);
  }
  28% {
    opacity: 0.46;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes reveal-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.06);
  }
  14% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.2);
  }
}

@keyframes board-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes identity-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.975);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes identity-ring {
  0% {
    opacity: 0.85;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

@keyframes launch-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }
  14% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
  }
}

@keyframes launch-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }
  18% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.6);
  }
}

@keyframes hud-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Two columns on a narrower window: morphology and biology side by side,
   colour laid out flat underneath so the plate keeps its height. */
@media (max-width: 1060px) {
  #overlay .start-card {
    width: min(94vw, 940px);
    padding: 16px 18px 11px;
  }

  .start-head {
    padding-bottom: 12px;
  }

  .start-head .picker-title {
    font-size: clamp(22px, 3vw, 28px);
    white-space: nowrap;
  }

  .head-note {
    display: none;
  }

  .start-head .resume-card {
    width: min(390px, 44%);
    flex-basis: 390px;
    min-height: 50px;
    padding: 7px 9px 7px 10px;
  }

  .start-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 18px;
    padding: 12px 2px 11px;
  }

  .start-colour {
    grid-column: 1 / -1;
    display: block;
  }

  .start-colour .color-control {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .start-colour .color-side {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 11px 24px;
  }

  .start-colour .color-readout {
    grid-column: 1;
    grid-row: 1;
  }

  .start-colour .brightness {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .start-colour .color-note {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .start-block .pick-label {
    margin-bottom: 8px;
  }

  .start-block .shape svg {
    width: 48px;
    height: 48px;
  }

  .start-block .shape {
    padding: 9px 5px 8px;
  }

  .start-block .shape b {
    font-size: 9.5px;
  }

  .start-block .diet-label {
    margin-top: 12px;
  }

  .start-block .diet {
    padding: 9px 11px;
  }

  .start-dossier .morph-focus {
    grid-template-rows: minmax(64px, 1fr) auto;
    padding: 12px;
    gap: 11px;
  }

  .start-dossier .focus-preview {
    min-height: 64px;
  }

  .start-dossier .focus-copy {
    /* Four lines reserved, so the longest dossier (bacillus) does not push
       the plate taller and shrink the whole console on selection. */
    min-height: 6.2em;
    font-size: 9.5px;
    line-height: 1.55;
  }

  .start-note {
    display: none;
  }

  .start-colour .color-control {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
  }

  .start-colour .wheel-wrap {
    width: 138px;
    height: 138px;
    justify-self: center;
  }

  .start-colour .color-side {
    gap: 9px;
  }

  .start-actions {
    padding-top: 10px;
  }
}

@media (max-height: 560px) {
  .intro-stage {
    padding: 12px 18px;
  }

  .intro-eyebrow {
    margin-bottom: 10px;
    font-size: 9px;
  }

  .intro-title {
    font-size: clamp(30px, min(10vw, 14vh), 96px);
  }

  .intro-tag {
    margin-top: 12px;
    font-size: 9.5px;
  }

  .load-panel {
    margin-top: 18px;
    grid-template-rows: 58px 26px;
  }
}

/* A phone: one column, everything stacked, still scaled to the window. */
@media (max-width: 779px) {
  #overlay .start-card {
    width: min(96vw, 560px);
    min-height: 0;
    padding: 14px 14px 10px;
  }

  .start-head {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding-bottom: 10px;
  }

  .start-head .resume-card {
    width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
  }

  .start-head .picker-eyebrow {
    font-size: 8px;
    letter-spacing: 0.24em;
  }

  .start-head .picker-title {
    font-size: clamp(23px, 6.6vw, 31px);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
  }

  .start-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 11px 0 9px;
  }

  .start-block .shapes {
    flex: 0 0 auto;
  }

  .start-block .shape {
    padding: 8px 4px 7px;
  }

  .start-block .shape svg {
    width: 44px;
    height: 44px;
  }

  .start-block .shape span {
    font-size: 7.5px;
  }

  .start-dossier .morph-focus {
    grid-template-rows: minmax(96px, 1fr) auto;
    padding: 10px;
    gap: 10px;
  }

  .start-dossier .focus-preview {
    min-height: 90px;
  }

  .start-dossier .focus-copy {
    font-size: 9px;
    line-height: 1.5;
  }

  .start-dossier .focus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
  }

  .start-colour {
    display: block;
  }

  .start-colour .color-control {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 13px;
    padding: 10px;
    max-width: none;
  }

  .start-colour .color-side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 9px;
  }

  .start-colour .color-readout,
  .start-colour .brightness {
    grid-column: 1;
    grid-row: auto;
  }

  .start-colour .wheel-wrap {
    width: 118px;
    height: 118px;
  }

  .start-colour .color-note {
    display: none;
  }

  .start-actions {
    gap: 12px;
    padding-top: 9px;
  }

  #overlay .start-actions .keys {
    max-width: 62%;
    font-size: 6.8px;
    line-height: 1.7;
    letter-spacing: 0.1em;
  }

  .start-actions .go {
    padding: 10px 20px;
    font-size: 8px;
    letter-spacing: 0.24em;
  }
}

@media (max-width: 420px) {
  .start-block .shape span {
    display: none;
  }

  .start-block .diet span {
    display: none;
  }

  .start-dossier .focus-copy {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #overlay .start-actions .keys {
    display: none;
  }

  .start-actions {
    justify-content: center;
  }
}

/* Short windows (laptops in landscape, split screens): trim the vertical
   rhythm so the plate keeps a readable size instead of being scaled down. */
@media (max-height: 660px) {
  #overlay .start-card {
    padding: 12px 18px 9px;
  }

  .start-head {
    padding-bottom: 10px;
  }

  .start-head .picker-title {
    margin-top: 5px;
    font-size: clamp(22px, 2.8vw, 30px);
  }

  .head-note {
    display: none;
  }

  .start-grid {
    padding: 10px 2px 9px;
    gap: 14px 20px;
  }

  .start-block .pick-label {
    margin-bottom: 7px;
  }

  .start-block .diet-label {
    margin-top: 10px;
  }

  .start-block .shape {
    padding: 8px 5px 7px;
  }

  .start-block .shape svg {
    width: 46px;
    height: 46px;
  }

  .start-block .shape span {
    font-size: 7.5px;
  }

  .start-block .diet {
    padding: 8px 11px;
  }

  .start-dossier .morph-focus {
    padding: 11px;
  }

  .start-dossier .focus-copy {
    font-size: 9.5px;
    line-height: 1.5;
  }

  .start-dossier .focus-stats {
    gap: 6px 12px;
  }

  .start-note {
    display: none;
  }

  .start-colour .color-control {
    padding: 11px 14px;
    gap: 13px;
  }

  .start-colour .wheel-wrap {
    width: min(100%, 150px);
  }

  .start-colour .color-note {
    display: none;
  }

  .start-actions {
    padding-top: 9px;
  }

  .start-actions .go {
    padding: 10px 26px;
  }
}

@media (max-height: 560px) {
  .start-colour .color-readout {
    gap: 8px;
  }

  .start-colour .color-chip {
    width: 26px;
    height: 26px;
  }

  .start-colour .color-readout b {
    font-size: 11px;
  }

  .start-dossier .focus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 560px) and (max-width: 620px) {
  .start-colour .color-chip {
    display: none;
  }
}

@media (max-width: 640px) {
  .identity-card {
    padding: 22px 18px 18px;
  }

  .identity-fields {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }

  .identity-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
  }

  .identity-note {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .picker-stage,
  #overlay[data-stage='picker'] .picker-stage,
  .identity-stage,
  #overlay[data-stage='identity'] .identity-stage {
    transition-duration: 1ms;
  }

  .reveal-flash,
  .reveal-ring,
  .identity-ring {
    display: none;
  }

  #load-fill {
    animation: none;
  }

  .intro-brand {
    transition-duration: 1ms;
  }

  #overlay[data-stage='picker'] .start-card,
  #overlay[data-stage='identity'] .identity-card,
  body.playing .panel,
  body.playing .hint,
  body.playing .legend {
    animation: none;
  }
}

/* The player menu is deliberately outside #hud: the HUD fades in with a run,
   while this control must stay reachable even when every readout is an icon. */
.player-dock {
  position: fixed;
  /* The account corner: above the right rail, sharing its edge. */
  top: 18px;
  right: 18px;
  bottom: auto;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(196, 246, 255, calc(0.14 + var(--glass-tint) * 0.16));
  border-radius: 50%;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgb(9 24 30 / var(--glass-fill)), rgb(4 11 15 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 12px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.75)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.75)) saturate(var(--glass-saturation));
  color: rgba(157, 241, 255, 0.82);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

body.playing .player-dock {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

body.player-menu-open .player-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.player-dock:hover,
.player-dock:focus-visible {
  border-color: rgba(127, 232, 255, 0.65);
  color: #e2fcff;
  outline: none;
  box-shadow: 0 0 0 1px rgba(127, 232, 255, 0.28), 0 12px 30px rgba(0, 0, 0, 0.46);
}

.player-dock svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.player-dock span {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: rgba(157, 241, 255, 0.62);
}

.player-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
}

.player-menu[hidden] {
  display: none;
}

.player-menu-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(5, 17, 22, 0.6), rgba(1, 4, 6, 0.86));
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.player-menu.show .player-menu-backdrop {
  opacity: 1;
}

.player-menu-card {
  position: relative;
  z-index: 1;
  width: min(590px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 22px 24px 20px;
  border: 1px solid rgba(127, 232, 255, 0.24);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(8, 23, 29, 0.98), rgba(3, 10, 13, 0.98)),
    radial-gradient(circle at 85% 0%, rgba(127, 232, 255, 0.08), transparent 52%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.66);
  opacity: 0;
  transform: translateY(10px) scale(0.988);
  transition:
    opacity 200ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.player-menu.show .player-menu-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.player-menu-card:focus {
  outline: none;
}

.player-menu-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.player-menu-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(127, 232, 255, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(157, 241, 255, 0.22), rgba(6, 18, 23, 0.4));
  box-shadow: inset 0 0 20px rgba(127, 232, 255, 0.08);
  font-size: 16px;
  color: #d9fbff;
}

.player-menu-id {
  min-width: 0;
}

.player-menu-eyebrow {
  margin: 0 0 3px;
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(84, 130, 142, 0.9);
}

.player-menu-id h2 {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e3f9ff;
}

.player-menu-id > span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(114, 154, 166, 0.86);
}

.player-menu-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: rgba(143, 184, 194, 0.7);
  cursor: pointer;
}

.player-menu-close:hover,
.player-menu-close:focus-visible {
  border-color: var(--line);
  outline: none;
  color: var(--cyan);
}

.player-menu-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 2px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(100, 145, 156, 0.8);
}

.player-menu-mode b {
  font-weight: 500;
  color: rgba(157, 241, 255, 0.9);
}

.player-menu-mode > span:last-child {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: rgba(85, 120, 130, 0.65);
}

.player-menu-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7fe8ff;
  box-shadow: 0 0 9px rgba(127, 232, 255, 0.8);
}

.player-menu-session {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0 3px;
}

.player-menu-session div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid rgba(127, 232, 255, 0.1);
  border-radius: 8px;
  background: rgba(127, 232, 255, 0.025);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(94, 137, 148, 0.82);
}

.player-menu-session b {
  font-size: 12px;
  font-weight: 500;
  color: #c9f4fb;
}

.player-menu-section {
  padding: 15px 0 13px;
  border-bottom: 1px solid var(--line);
}

.player-menu-section h3 {
  margin: 0 0 10px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(84, 124, 136, 0.9);
}

.player-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.player-menu-row + .player-menu-row {
  margin-top: 13px;
}

.player-menu-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.player-menu-copy b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #d6f4fa;
}

.player-menu-copy span {
  max-width: 315px;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: rgba(100, 137, 147, 0.9);
}

.profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.9fr);
  align-items: center;
  gap: 8px 18px;
}

.profile-row + .profile-row {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(127, 232, 255, 0.08);
}

.profile-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.profile-input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(127, 232, 255, 0.16);
  border-radius: 7px;
  background: rgba(2, 8, 11, 0.5);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.03em;
  color: #d6f4fa;
}

.profile-input:focus {
  border-color: rgba(127, 232, 255, 0.52);
  outline: 2px solid rgba(127, 232, 255, 0.2);
  outline-offset: 1px;
}

.profile-input:disabled {
  opacity: 0.6;
}

.profile-status {
  grid-column: 1 / -1;
  min-height: 12px;
  margin: 0;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(130, 198, 210, 0.88);
}

.profile-status.is-error {
  color: #ffb4b4;
}

.tester-title-row {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 219, 148, 0.12);
}

.tester-title-toggle {
  min-width: 78px;
}

.tester-title-toggle[aria-pressed="true"] {
  color: #ffe9af;
  border-color: rgba(255, 219, 148, 0.34);
  background: rgba(255, 214, 129, 0.07);
  box-shadow: 0 0 14px -8px rgba(255, 213, 132, 0.7);
}

.tester-title-toggle.is-off {
  color: rgba(111, 151, 162, 0.82);
  border-color: rgba(127, 232, 255, 0.12);
  background: transparent;
  box-shadow: none;
}

.tester-title-status {
  margin-top: 4px;
  min-height: 0;
}

.quality-picker {
  display: flex;
  flex: none;
  padding: 2px;
  border: 1px solid rgba(127, 232, 255, 0.12);
  border-radius: 8px;
  background: rgba(2, 8, 11, 0.5);
}

.quality-picker button {
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(111, 151, 162, 0.82);
  cursor: pointer;
}

.quality-picker button:hover,
.quality-picker button:focus-visible {
  outline: none;
  color: #d9fbff;
}

.quality-picker button.selected {
  background: rgba(127, 232, 255, 0.13);
  color: #d9fbff;
  box-shadow: inset 0 0 0 1px rgba(127, 232, 255, 0.16);
}

/* The glass-tint control: how much colour the HUD lens holds, from clear
   water to a deep broth. The track fills as the thumb moves. */
.tint-control {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.tint-control input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  width: 126px;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.tint-control input[type='range']:focus-visible {
  outline: 2px solid rgba(127, 232, 255, 0.7);
  outline-offset: 2px;
  border-radius: 4px;
}

.tint-control input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(158, 243, 255, 0.72) var(--tint-fill, 60%),
    rgba(127, 232, 255, 0.14) var(--tint-fill, 60%)
  );
  box-shadow: inset 0 0 0 1px rgba(127, 232, 255, 0.12);
}

.tint-control input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #bdf4ff 52%, #4cc8e0);
  box-shadow: 0 0 12px rgba(127, 232, 255, 0.55);
  cursor: pointer;
}

.tint-control input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(127, 232, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(127, 232, 255, 0.12);
}

.tint-control input[type='range']::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: rgba(158, 243, 255, 0.72);
}

.tint-control input[type='range']::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #bdf4ff 52%, #4cc8e0);
  box-shadow: 0 0 12px rgba(127, 232, 255, 0.55);
  cursor: pointer;
}

.tint-control output {
  min-width: 36px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #cdf7ff;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.player-menu-actions {
  display: flex;
  flex: none;
  gap: 6px;
}

.player-menu-button {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 11px;
  border: 1px solid rgba(127, 232, 255, 0.2);
  border-radius: 7px;
  background: rgba(127, 232, 255, 0.035);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(184, 237, 247, 0.9);
  cursor: pointer;
  white-space: nowrap;
}

.player-menu-button:hover,
.player-menu-button:focus-visible {
  border-color: rgba(127, 232, 255, 0.5);
  background: rgba(127, 232, 255, 0.08);
  outline: none;
  color: #effeff;
}

.player-menu-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.player-menu-button.danger {
  border-color: rgba(255, 126, 126, 0.32);
  background: rgba(255, 96, 96, 0.055);
  color: rgba(255, 185, 185, 0.92);
}

.player-menu-button.danger:hover,
.player-menu-button.danger:focus-visible {
  border-color: rgba(255, 126, 126, 0.7);
  background: rgba(255, 96, 96, 0.12);
  color: #ffe8e8;
}

.player-menu-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
}

.player-menu-keys div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 9px;
  color: rgba(104, 144, 155, 0.9);
}

.player-menu-keys kbd,
.player-menu-foot kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 4px 6px;
  border: 1px solid rgba(127, 232, 255, 0.16);
  border-radius: 5px;
  background: rgba(2, 8, 11, 0.44);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(185, 237, 247, 0.9);
}

.player-menu-danger h3 {
  color: rgba(206, 129, 129, 0.9);
}

.player-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(78, 114, 124, 0.8);
}

.player-menu-resume {
  padding: 8px 15px;
  border: 1px solid rgba(127, 232, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d8fbff;
  cursor: pointer;
}

.player-menu-resume:hover,
.player-menu-resume:focus-visible {
  border-color: rgba(127, 232, 255, 0.7);
  background: rgba(127, 232, 255, 0.07);
  outline: none;
}

.player-menu-resume kbd {
  margin-left: 7px;
  padding: 2px 4px;
  font-size: 8px;
}

.player-menu-view[hidden] {
  display: none;
}

.player-menu-confirm {
  padding: 28px 2px 10px;
}

.player-menu-confirm h2 {
  margin: 4px 0 12px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffe9e9;
}

.player-menu-confirm-copy {
  max-width: 430px;
  margin: 0 0 22px;
  font-size: 10px;
  line-height: 1.7;
  color: rgba(154, 167, 169, 0.92);
}

.player-menu-confirm-copy b {
  font-weight: 500;
  color: #d9fbff;
}

.player-menu-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.player-menu-confirm-actions .danger {
  padding: 9px 15px;
  font-size: 9px;
}

.player-menu-confirm-actions .player-menu-button:not(.danger) {
  padding: 9px 15px;
  font-size: 9px;
}

@media (max-width: 560px) {
  .player-menu {
    padding: 10px;
  }

  .player-menu-card {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 18px 16px 16px;
  }

  .player-menu-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .profile-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .profile-control {
    width: 100%;
  }

  .player-menu-copy span {
    max-width: none;
  }

  .player-menu-actions {
    width: 100%;
  }

  .player-menu-actions .player-menu-button {
    flex: 1;
  }

  .player-menu-keys {
    grid-template-columns: 1fr;
  }

  .player-menu-session {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .player-dock {
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .player-dock,
  .player-menu-card,
  .player-menu-backdrop {
    transition-duration: 1ms;
  }

  .resume-card .resume-mark i {
    animation: none;
  }
}

@media (max-width: 560px) {
  .player-menu-card {
    padding: 16px 14px 13px;
  }

  .player-menu-mode {
    padding-top: 9px;
  }

  .player-menu-session {
    gap: 5px;
    margin: 7px 0 1px;
  }

  .player-menu-session div {
    padding: 6px 8px;
  }

  .player-menu-section {
    padding: 11px 0 9px;
  }

  .player-menu-section h3 {
    margin-bottom: 7px;
  }

  .player-menu-row + .player-menu-row {
    margin-top: 9px;
  }

  .player-menu-copy span {
    font-size: 8px;
    line-height: 1.4;
  }

  .player-menu-keys {
    gap: 5px;
  }

  .player-menu-foot {
    padding-top: 10px;
  }
}

/* The endospore bank, parked in the console header. It holds the same slot in
   every state — empty, sealed, or set aside — so a returning player's save can
   never change the height of the plate. Copy is one clamped line per row and
   the action column keeps both rows in every state; only the words change. */
.resume-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas: 'mark copy actions';
  align-items: center;
  gap: 11px;
  flex: 0 1 440px;
  align-self: center;
  width: min(440px, 47%);
  min-width: 0;
  min-height: 56px;
  padding: 9px 10px 9px 11px;
  border: 1px solid rgba(198, 236, 177, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(152deg, rgba(190, 255, 190, 0.09), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(9, 27, 21, 0.55), rgba(4, 14, 11, 0.52));
  box-shadow:
    inset 0 1px 0 rgba(232, 255, 222, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: left;
  transition: border-color 240ms ease;
}

.resume-card .resume-mark {
  grid-area: mark;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(206, 255, 190, 0.45);
  border-radius: 50%;
  box-shadow:
    inset 0 0 12px rgba(180, 255, 170, 0.16),
    0 0 14px rgba(150, 240, 140, 0.12);
}

.resume-card .resume-mark i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f4ffe8, #a9e98b 55%, #4d8a3a);
  box-shadow: 0 0 9px rgba(160, 245, 150, 0.6);
}

/* A sealed colony is the one thing in this header that wants a click, so its
   spore breathes once every few seconds. Nothing pulses when the bank is empty. */
.resume-card:not(.is-empty):not(.is-aside) .resume-mark i {
  animation: bank-pulse 4.8s ease-in-out infinite;
}

@keyframes bank-pulse {
  0%,
  100% {
    box-shadow: 0 0 9px rgba(160, 245, 150, 0.6);
  }
  50% {
    box-shadow: 0 0 16px rgba(190, 255, 170, 0.92);
  }
}

.resume-card.is-empty,
.resume-card.is-aside {
  border-color: rgba(127, 232, 255, 0.15);
  background:
    linear-gradient(152deg, rgba(186, 240, 255, 0.05), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(7, 20, 26, 0.5), rgba(4, 12, 16, 0.5));
}

.resume-card.is-empty .resume-mark,
.resume-card.is-aside .resume-mark {
  border-color: rgba(127, 232, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(127, 232, 255, 0.08);
}

.resume-card.is-empty .resume-mark i,
.resume-card.is-aside .resume-mark i {
  background: rgba(127, 232, 255, 0.18);
  box-shadow: none;
}

.resume-card .resume-copy {
  grid-area: copy;
  display: grid;
  gap: 1px;
  min-width: 0;
}

.resume-card .resume-eyebrow {
  margin: 0;
  font-size: 7px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(206, 235, 168, 0.7);
}

.resume-card.is-empty .resume-eyebrow,
.resume-card.is-aside .resume-eyebrow {
  color: rgba(127, 232, 255, 0.48);
}

.resume-card h2 {
  margin: 0;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #efffdc;
}

.resume-card.is-empty h2,
.resume-card.is-aside h2 {
  color: #c6e0e6;
}

#overlay .resume-detail {
  margin: 0;
  overflow: hidden;
  max-width: none;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: none;
  color: rgba(154, 186, 162, 0.92);
}

#overlay .resume-card.is-empty .resume-detail,
#overlay .resume-card.is-aside .resume-detail {
  color: rgba(140, 176, 186, 0.85);
}

.resume-card .resume-actions {
  grid-area: actions;
  display: grid;
  justify-items: stretch;
  gap: 2px;
}

.resume-go {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 11px;
  border: 1px solid rgba(198, 236, 177, 0.42);
  border-radius: 7px;
  background: rgba(160, 240, 150, 0.08);
  font: inherit;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e8ffd8;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.resume-go:hover,
.resume-go:focus-visible {
  border-color: rgba(206, 255, 190, 0.75);
  background: rgba(170, 255, 160, 0.16);
  outline: none;
}

.resume-go:disabled {
  border-color: rgba(127, 232, 255, 0.14);
  background: rgba(127, 232, 255, 0.04);
  color: rgba(140, 176, 186, 0.55);
  cursor: default;
}

.resume-dismiss {
  justify-self: stretch;
  padding: 1px 0;
  text-align: center;
  border: 0;
  background: none;
  font: inherit;
  font-size: 6.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(136, 166, 145, 0.78);
  cursor: pointer;
  /* Kept in the layout when irrelevant so the chip's height never changes. */
  visibility: hidden;
}

.resume-card:not(.is-empty):not(.is-aside) .resume-dismiss {
  visibility: visible;
}

.resume-dismiss:hover,
.resume-dismiss:focus-visible {
  outline: none;
  color: #efffdc;
}

/* The departure card sits above the sealed field. The coat animation runs on
   the canvas underneath for two seconds before this fades in. */
.seal-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 45%, rgba(28, 35, 19, 0.55), rgba(2, 6, 7, 0.9));
  backdrop-filter: blur(5px);
}

.seal-screen[hidden] {
  display: none;
}

.seal-card {
  width: min(500px, 92vw);
  padding: 28px 30px 24px;
  text-align: center;
  border: 1px solid rgba(219, 234, 168, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(98, 119, 65, 0.24), transparent 66%),
    rgba(6, 13, 12, 0.96);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  animation: fade-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.seal-eyebrow {
  margin: 0 0 8px;
  font-size: 8px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(219, 234, 168, 0.58);
}

.seal-card h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3ffe0;
}

.seal-copy {
  margin: 0 auto 16px;
  max-width: 36em;
  font-size: 9.5px;
  line-height: 1.65;
  letter-spacing: 0.015em;
  color: rgba(165, 187, 157, 0.9);
}

.seal-stats {
  margin: 0 0 18px;
  padding: 9px 11px;
  border: 1px solid rgba(219, 234, 168, 0.14);
  border-radius: 8px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(206, 227, 175, 0.86);
}

.seal-card .go {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  padding: 11px 26px;
  border: 1px solid rgba(214, 238, 172, 0.34);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #eaffd0;
  cursor: pointer;
}

.seal-card .go:hover,
.seal-card .go:focus-visible {
  outline: none;
  border-color: rgba(230, 250, 190, 0.8);
  background: rgba(214, 238, 172, 0.08);
}

.seal-note {
  margin: 16px 0 0;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(126, 150, 127, 0.75);
}

@media (max-width: 620px) {
  .resume-card {
    gap: 9px;
    padding: 8px 9px;
  }

  .resume-card .resume-mark {
    width: 24px;
    height: 24px;
  }

  .resume-card h2 {
    font-size: 10.5px;
  }
}

/* The sporulation cinematics own the whole frame. No HUD, no dock, no cursor
   competing with the close-up; the canvas is the only surface. */
body.spore-cinematic #hud,
body.spore-cinematic .player-dock {
  opacity: 0 !important;
  pointer-events: none;
}

body.spore-cinematic #game {
  cursor: none;
}

/* ---------------------------------------------------------------- events */
/* The escalation ladder's readout: a pulse every minute, a beat every two, a
   chapter every ten and a dose every hour. The journal is the run's story; the
   banner is the telegraph; the chapter card is the one moment the dish waits. */

.panel.journal {
  bottom: 18px;
  right: 18px;
  width: 248px;
}

.dose-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.dose-row b {
  font-weight: 500;
  color: #d8f5fc;
  font-variant-numeric: tabular-nums;
}

.dose-row.live b {
  color: #ffd0d6;
  text-shadow: 0 0 12px rgba(255, 143, 160, 0.5);
}

.dose-copy {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(120, 160, 172, 0.72);
}

.journal-list {
  display: grid;
  gap: 8px;
  margin-top: 11px;
}

.journal-row {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 7px;
  align-items: baseline;
}

.journal-row i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.22);
}

.journal-row b {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #d3f9ff;
}

.journal-row span {
  grid-column: 2;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(126, 159, 170, 0.82);
}

.event-banner {
  position: absolute;
  top: 62px;
  left: 50%;
  z-index: 7;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  width: min(620px, calc(100vw - 54px));
  padding: 14px 18px 15px;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 38%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.015) 34%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(125% 170% at 3% 0%, color-mix(in srgb, var(--tone, #8ee8ff) 24%, transparent), transparent 64%),
    linear-gradient(180deg, rgb(6 18 24 / 0.8), rgb(2 7 10 / 0.94));
  box-shadow:
    inset 0 1px 0 rgba(244, 254, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 24px 70px rgba(0, 0, 0, 0.62),
    0 0 48px color-mix(in srgb, var(--tone, #8ee8ff) 17%, transparent);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  text-align: left;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -16px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 360ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 600ms ease;
}

.event-banner.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.event-banner::before {
  content: '';
  position: absolute;
  inset: -40% -10%;
  z-index: 0;
  background: linear-gradient(115deg, transparent 32%, color-mix(in srgb, var(--tone, #8ee8ff) 26%, transparent) 48%, transparent 64%);
  transform: translateX(-55%);
  animation: event-sheen 5.6s cubic-bezier(0.3, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.event-banner::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tone, #8ee8ff), transparent);
  opacity: 0.72;
}

.event-banner > * {
  position: relative;
  z-index: 1;
}

.event-banner.critical {
  border-color: color-mix(in srgb, var(--tone, #ff8fa0) 62%, transparent);
  animation: event-critical 2.6s ease-in-out infinite;
}

/* The last ten seconds of a dose warning: the top glass card becomes the
   event. It stays at the top and out of the plate's centre; the escalation is
   pressure, scale and a hot countdown, not a full-screen tint over the HUD. */
.event-banner.final {
  border-color: color-mix(in srgb, var(--tone, #ff8fa0) 78%, white);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 250, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 24px 90px rgba(0, 0, 0, 0.72),
    0 0 64px color-mix(in srgb, var(--tone, #ff8fa0) 34%, transparent);
  animation: event-final 900ms ease-in-out infinite;
}

.event-banner.final::before {
  animation-duration: 2.2s;
  opacity: 1;
}

.event-banner.final .event-body b {
  font-size: 19px;
  letter-spacing: 0.08em;
}

.event-banner.final .event-meta em {
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 24px color-mix(in srgb, var(--tone, #ff8fa0) 80%, transparent);
}

.event-banner.final .event-bar {
  height: 5px;
}

.event-banner.final .event-bar i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone, #ff8fa0) 42%, transparent), #fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tone, #ff8fa0) 80%, transparent);
}

.event-banner.final .event-glyph {
  border-color: color-mix(in srgb, var(--tone, #ff8fa0) 76%, white);
  box-shadow:
    inset 0 0 22px color-mix(in srgb, var(--tone, #ff8fa0) 26%, transparent),
    0 0 34px color-mix(in srgb, var(--tone, #ff8fa0) 24%, transparent);
}

@keyframes event-final {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, 0) scale(1.012); }
}

@media (max-width: 760px) {
  .event-banner.final .event-body b {
    font-size: 16px;
  }
  .event-banner.final .event-meta em {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-banner.final {
    animation: none;
  }
}

.event-glyph {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 46%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 34%, color-mix(in srgb, var(--tone, #8ee8ff) 24%, transparent), transparent 68%),
    rgba(2, 9, 13, 0.58);
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--tone, #8ee8ff) 16%, transparent),
    0 0 22px color-mix(in srgb, var(--tone, #8ee8ff) 12%, transparent);
}

.event-glyph::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed color-mix(in srgb, var(--tone, #8ee8ff) 38%, transparent);
  border-radius: 50%;
  animation: sigil-spin 16s linear infinite;
}

.event-glyph svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--tone, #8ee8ff);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tone, #8ee8ff) 58%, transparent));
}

.event-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.event-eyebrow {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone, #8ee8ff) 82%, white);
}

.event-body b {
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f1fdff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--tone, #8ee8ff) 32%, transparent);
}

.event-copy {
  overflow: hidden;
  font-size: 9.5px;
  line-height: 1.55;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(171, 205, 214, 0.92);
}

.event-meta {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 2px;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(131, 171, 182, 0.78);
}

.event-meta em {
  font-style: normal;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--tone, #bfefff);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px color-mix(in srgb, var(--tone, #8ee8ff) 42%, transparent);
}

.event-source {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 24%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--tone, #8ee8ff) 70%, #dff9ff);
  font-size: 7px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.event-code {
  align-self: start;
  padding-top: 2px;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone, #8ee8ff) 72%, #e6fbff);
  opacity: 0.8;
}

.event-bar {
  grid-column: 1 / -1;
  height: 3px;
  margin-top: 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone, #8ee8ff) 14%, rgba(255, 255, 255, 0.03));
  overflow: hidden;
}

.event-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone, #8ee8ff) 24%, transparent), var(--tone, #8ee8ff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tone, #8ee8ff) 54%, transparent);
  transition: width 140ms linear;
}

/* The whole screen takes the event's colour for a beat. It sits under the HUD
   panels and over the plate, so a warning is felt before it is read. */
.event-siren {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

.event-siren.show {
  opacity: 1;
}

/* A single hot flash in the middle of the plate. It is deliberately brief: it
   catches the eye, then gets out of the way of the warning card and the run. */
.event-flash {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.event-flash.show {
  visibility: visible;
  animation: event-flash-fade 1.25s cubic-bezier(0.12, 0.8, 0.2, 1) both;
}

.flash-halo {
  width: min(58vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone, #8ee8ff) 34%, white) 0 2%, color-mix(in srgb, var(--tone, #8ee8ff) 22%, transparent) 9%, color-mix(in srgb, var(--tone, #8ee8ff) 7%, transparent) 30%, transparent 62%);
  box-shadow: 0 0 100px color-mix(in srgb, var(--tone, #8ee8ff) 42%, transparent);
  mix-blend-mode: screen;
  animation: flash-halo 1.25s cubic-bezier(0.12, 0.8, 0.2, 1) both;
}

.flash-ring {
  position: absolute;
  width: min(36vw, 260px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 62%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--tone, #8ee8ff) 34%, transparent), inset 0 0 26px color-mix(in srgb, var(--tone, #8ee8ff) 22%, transparent);
  animation: flash-ring 1.25s cubic-bezier(0.12, 0.8, 0.2, 1) both;
}

.flash-code {
  position: absolute;
  transform: translateY(82px);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone, #8ee8ff) 78%, white);
  text-shadow: 0 0 18px color-mix(in srgb, var(--tone, #8ee8ff) 60%, transparent);
  animation: flash-code 1.25s ease-out both;
}

.event-flash.critical .flash-halo {
  filter: saturate(140%) brightness(1.15);
}


.siren-edge {
  position: absolute;
  inset: -10%;
  background: radial-gradient(
    ellipse at 50% 48%,
    transparent 40%,
    color-mix(in srgb, var(--tone, #8ee8ff) 12%, transparent) 70%,
    color-mix(in srgb, var(--tone, #8ee8ff) 34%, transparent) 100%
  );
  mix-blend-mode: screen;
  animation: siren-breathe 3.8s ease-in-out infinite;
}

.event-siren.critical .siren-edge {
  background: radial-gradient(
    ellipse at 50% 48%,
    transparent 34%,
    color-mix(in srgb, var(--tone, #ff8fa0) 16%, transparent) 66%,
    color-mix(in srgb, var(--tone, #ff8fa0) 46%, transparent) 100%
  );
}

.siren-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, 0.13) 3px 4px);
  opacity: 0.28;
}


.siren-code {
  position: absolute;
  top: 18px;
  left: 22px;
  font-size: 8px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tone, #8ee8ff);
  opacity: 0.64;
  animation: siren-code 2.6s steps(2, end) infinite;
}

@keyframes event-flash-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 0.78; }
  100% { opacity: 0; }
}

@keyframes flash-halo {
  0% { transform: scale(0.42); opacity: 0; }
  9% { opacity: 1; }
  48% { opacity: 0.5; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes flash-ring {
  0% { transform: scale(0.3); opacity: 0; }
  11% { opacity: 0.95; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes flash-code {
  0% { opacity: 0; transform: translateY(82px) scale(0.92); }
  10% { opacity: 0.95; }
  55% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(82px) scale(1.04); }
}

@keyframes event-sheen {
  0% { transform: translateX(-58%); opacity: 0; }
  18% { opacity: 0.65; }
  55% { opacity: 0.28; }
  100% { transform: translateX(58%); opacity: 0; }
}

@keyframes sigil-spin {
  to { transform: rotate(360deg); }
}

@keyframes event-critical {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(244, 254, 255, 0.25), 0 24px 70px rgba(0, 0, 0, 0.62), 0 0 34px color-mix(in srgb, var(--tone, #ff8fa0) 16%, transparent); }
  50% { box-shadow: inset 0 1px 0 rgba(244, 254, 255, 0.3), 0 24px 70px rgba(0, 0, 0, 0.66), 0 0 62px color-mix(in srgb, var(--tone, #ff8fa0) 30%, transparent); }
}

@keyframes siren-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes siren-sweep {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.75; }
  70% { opacity: 0.18; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes siren-code {
  0%, 70%, 100% { opacity: 0.64; }
  72% { opacity: 0.2; }
  76% { opacity: 0.82; }
}

@media (max-width: 760px) {
  .event-banner {
    top: 54px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 5px 10px;
    width: min(94vw, 520px);
    padding: 11px 13px 12px;
    border-radius: 14px;
  }
  .event-glyph-wrap {
    width: 40px;
    height: 40px;
  }
  .event-aura--card {
    --u: 0.82;
  }
  .event-glyph {
    width: 40px;
    height: 40px;
  }
  .event-glyph svg {
    width: 23px;
    height: 23px;
  }
  .event-body b {
    font-size: 14px;
  }
  .event-copy {
    font-size: 8.5px;
  }
  .event-code {
    display: none;
  }
  .event-meta em {
    font-size: 17px;
  }
}

.chapter-veil {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(4, 10, 14, 0.74), rgba(2, 5, 7, 0.92));
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.chapter-veil.show {
  opacity: 1;
  pointer-events: auto;
}

.chapter-card {
  width: min(560px, 86vw);
  padding: 30px 34px 24px;
  text-align: center;
  border: 1px solid rgba(127, 232, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 24, 30, 0.95), rgba(5, 12, 16, 0.94));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.62);
}

.chapter-eyebrow {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.6);
}

.chapter-card h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e6fbff;
}

.chapter-copy {
  margin: 0 0 20px;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #7e9faa;
}

.chapter-choices {
  display: grid;
  gap: 10px;
}

.chapter-choice {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 13px 16px;
  text-align: left;
  border: 1px solid rgba(127, 232, 255, 0.18);
  border-radius: 10px;
  background: rgba(10, 26, 32, 0.6);
  color: #dff9ff;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease;
}

.chapter-choice:hover,
.chapter-choice:focus-visible {
  border-color: rgba(127, 232, 255, 0.5);
  background: rgba(16, 40, 50, 0.82);
  outline: none;
}

.chapter-choice b {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(127, 232, 255, 0.85);
}

.chapter-choice span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chapter-choice em {
  grid-column: 2;
  font-style: normal;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(126, 159, 170, 0.9);
}

.chapter-note {
  margin: 16px 0 0;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(84, 116, 127, 0.85);
}

.lost-story {
  margin-top: 16px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  color: #9fdcea !important;
}

/* --------------------------------------------------------- lab console */
/* The owner's admin drawer: every rung of the ladder on a button, plus the two
   clocks that decide how long the wait is. It lives bottom-left, above the
   legend, where no HUD panel sits. Hidden unless the account is the owner's. */

.mass-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
  margin: 9px 0 4px;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.mass-row b {
  font-weight: 500;
  color: #d8f5fc;
  font-variant-numeric: tabular-nums;
}

.mass-row em {
  margin-left: auto;
  font-style: normal;
  color: rgba(126, 159, 170, 0.85);
  font-variant-numeric: tabular-nums;
}

.mass-row.big b,
.mass-row.big em {
  color: #ffd0a8;
  text-shadow: 0 0 12px rgba(255, 176, 92, 0.45);
}

.lab {
  position: fixed;
  left: 18px;
  bottom: 44px;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

body.playing .lab {
  opacity: 1;
}

.lab[hidden] {
  display: none;
}

.lab-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 12px;
  border: 1px solid rgba(255, 176, 92, 0.32);
  border-radius: 8px;
  background: rgba(24, 14, 8, 0.72);
  color: #ffd2a1;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.lab-tab:hover,
.lab-tab:focus-visible,
.lab-tab[aria-expanded='true'] {
  border-color: rgba(255, 176, 92, 0.6);
  color: #ffe6c4;
  background: rgba(40, 22, 10, 0.85);
  outline: none;
}

.lab-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb05c;
  box-shadow: 0 0 10px rgba(255, 176, 92, 0.85);
}

.lab-console {
  position: fixed;
  left: 18px;
  bottom: 78px;
  width: min(360px, 92vw);
  max-height: 62vh;
  overflow-y: auto;
  padding: 14px 15px 16px;
  border: 1px solid rgba(255, 176, 92, 0.26);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(26, 16, 9, 0.95), rgba(8, 10, 12, 0.94));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  scrollbar-width: thin;
}

.lab-console[hidden] {
  display: none;
}

.lab-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lab-head b {
  font-weight: 500;
  color: #ffe6c4;
}

.lab-head em {
  font-style: normal;
  color: rgba(255, 176, 92, 0.75);
  letter-spacing: 0.14em;
}

.lab-close {
  margin-left: auto;
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 176, 92, 0.26);
  border-radius: 6px;
  background: transparent;
  color: #ffd2a1;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.lab-close:hover,
.lab-close:focus-visible {
  border-color: rgba(255, 176, 92, 0.6);
  outline: none;
}

.lab-readout {
  margin: 10px 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 232, 255, 0.14);
  border-radius: 8px;
  background: rgba(6, 14, 18, 0.7);
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  white-space: pre-line;
  color: rgba(150, 200, 214, 0.92);
}

.lab-readout.flash {
  border-color: rgba(255, 176, 92, 0.4);
  color: #ffe6c4;
}

.lab-group + .lab-group {
  margin-top: 13px;
}

.lab-group h4 {
  margin: 0 0 7px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 176, 92, 0.62);
}

.lab-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.lab-button {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 9px;
  border: 1px solid var(--tone, rgba(127, 232, 255, 0.22));
  border-radius: 7px;
  background: rgba(8, 20, 26, 0.7);
  color: #cdeef7;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease;
}

.lab-button:hover:not(:disabled),
.lab-button:focus-visible:not(:disabled) {
  background: rgba(20, 44, 54, 0.9);
  color: #f2fdff;
  outline: none;
}

.lab-button:disabled {
  color: rgba(120, 160, 172, 0.45);
  border-color: rgba(127, 232, 255, 0.1);
  cursor: default;
}

.lab-button.toggle.active {
  background: rgba(255, 176, 92, 0.16);
  color: #ffe6c4;
  box-shadow: 0 0 0 1px rgba(255, 176, 92, 0.35) inset;
}


/* ------------------------------------------------------------------ frame */
/* The HUD is two edge rails and one bottom band. Nothing is free-floating:
   everything that reads like a panel lives in a rail, so the panels can never
   overlap each other, and the bottom band is inset to clear both rails, so the
   key legend cannot slide under the journal on a small screen. */

#hud {
  /* One width for both rails: the HUD is a frame around the plate, not two
     unrelated columns. The right rail drops below the account dock so the
     top-right corner reads as one stack instead of a panel with a button run
     over it. */
  --rail-left: 246px;
  --rail-right: 246px;
  --rail-gap: 18px;
  --rail-inset: 18px;
  --rail-top-right: 78px;
}

.rail {
  position: absolute;
  top: var(--rail-inset);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.rail-left {
  left: var(--rail-inset);
  width: var(--rail-left);
}

.rail-right {
  top: var(--rail-top-right);
  right: var(--rail-inset);
  bottom: var(--rail-inset);
  width: var(--rail-right);
  /* A body panel can make the right column taller than a short screen. The rail
     scrolls itself rather than letting a panel leave the glass. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.rail-right::-webkit-scrollbar {
  width: 0;
}

/* The rail can outgrow a 720 screen once a body panel is open: it scrolls, and
   this keeps the last card off the screen edge. A mask here would also mask the
   fixed-position blueprint page nested inside the rail, so there is none. */
.rail-right:has(.organism.show) {
  padding-bottom: 22px;
}

/* Panels are laid out by the rail now, not pinned to the viewport. */
.rail .panel {
  position: relative;
  inset: auto;
  width: 100%;
  padding: 11px 13px;
  pointer-events: auto;
}

.rail .panel > .label:first-of-type {
  padding: 0 20px 8px 0;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(127, 232, 255, 0.09);
}

.rail .panel.collapsed {
  width: auto;
  height: 34px;
  padding: 0 12px 0 10px;
}

.rail-left .panel.collapsed {
  align-self: flex-start;
}

.rail-right .panel.collapsed {
  align-self: flex-end;
}

/* The genome and roster keep their own height; the journal takes what is left
   and scrolls inside itself instead of growing past the bottom of the screen. */
/* Nothing in the rail may be squashed below its content: a clipped card reads
   as a broken layout. The journal is the one panel allowed to give ground, and
   it does that by scrolling its own list. */
.rail-right > .panel:not(.journal) {
  flex: 0 0 auto;
}

/* Reading order of the column: what the whole field is doing, then the body you
   are steering, then the neighbours, then the record. */
.rail-right .traits {
  order: 1;
}

.rail-right .organism {
  order: 2;
}

.rail-right .lineages {
  order: 3;
}

.rail-right .journal {
  order: 4;
}

.panel.journal {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 128px;
  bottom: auto;
  right: auto;
  width: 100%;
}

/* Folded, the journal is a glyph like the others — not a tall empty card. The
   min-height above would otherwise win over the shared 44px box. */
.panel.journal.collapsed {
  flex: 0 0 auto;
  min-height: 34px;
}

.journal-list {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  padding-right: 3px;
  /* The fade lands on this padding, not on the last sentence: an entry is never
     half-erased just because the rail ran out of height. */
  padding-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 232, 255, 0.28) transparent;
  /* A longer dissolve: an entry that runs past the rail's height fades out
     instead of being sliced through the middle of a line. */
  mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
}

.journal-list::-webkit-scrollbar {
  width: 4px;
}

.journal-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(127, 232, 255, 0.28);
}

/* The journal's own cap: the one rail card with a page behind it. It sits
   beside the fold control, same size and same quiet colour. */
.journal-expand {
  position: absolute;
  top: 7px;
  right: 34px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(140, 182, 194, 0.58);
  cursor: pointer;
  pointer-events: auto;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.journal-expand svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journal-expand:hover,
.journal-expand:focus-visible {
  color: var(--cyan);
  background: rgba(127, 232, 255, 0.08);
  outline: none;
}

/* Page-only furniture and the chronicle's step/stamp columns stay out of the
   rail card, which is a glance rather than the record. */
.journal-hero,
.journal-foot,
.journal-step,
.journal-stamp {
  display: none;
}

/* ------------------------------------------------------------ the full journal */
/* Maximized, the journal is a page laid over the plate rather than a card in
   the rail: a cinematic fade, the dish still moving underneath, the colony
   sealed where it stands. The type steps up to a reading size and the entries
   become a chronicle wall instead of five dim lines. */

body.journal-open {
  cursor: default;
}

body.journal-open .panel.journal {
  position: fixed;
  inset: 0;
  z-index: 16;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(22px, 4.4vh, 48px) clamp(20px, 6vw, 120px) clamp(16px, 3.6vh, 34px);
  border: 0;
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(120% 72% at 50% -12%, rgba(22, 96, 96, 0.46), rgba(3, 14, 17, 0) 64%),
    radial-gradient(80% 60% at 4% 110%, rgba(46, 118, 88, 0.26), rgba(3, 10, 12, 0) 72%),
    radial-gradient(70% 50% at 100% 96%, rgba(120, 90, 40, 0.14), rgba(3, 10, 12, 0) 70%),
    linear-gradient(180deg, rgba(4, 17, 21, 0.9), rgba(2, 8, 10, 0.945));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform-origin: 50% 38%;
  animation: journal-page-in 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.journal-open .panel.journal::before {
  display: none;
}

/* The moving caustic is a per-frame full-screen sheen; the page has its own
   light and the plate is already moving behind it. */
body.journal-open .panel.journal::after {
  animation: none;
  opacity: 0;
}

@keyframes journal-page-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.996);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes journal-rise {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes journal-row-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

body.journal-open .panel.journal > .panel-toggle,
body.journal-open .panel.journal > .journal-expand,
body.journal-open .panel.journal > .label,
body.journal-open .panel.journal > .mass-row,
body.journal-open .panel.journal > .dose-row,
body.journal-open .panel.journal > .dose-copy {
  display: none;
}

/* The page is the view. The cards behind it would otherwise ghost through its
   tint as half-readable labels, and the account dock would look like part of
   the journal rather than part of the HUD. */
body.journal-open .rail .panel:not(.journal),
body.journal-open .hud-foot,
body.journal-open .event-banner,
body.journal-open .event-siren,
body.journal-open .fusion-coach,
body.journal-open .dna-warning,
body.journal-open .player-dock {
  /* `visibility` matters: the panels enter on an `opacity` keyframe that keeps
     its final frame, and an animation beats a plain declaration here. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.journal-open .journal-hero {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  animation: journal-rise 760ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.journal-hero-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.62);
}

.journal-hero-top em {
  margin-left: 2px;
  font-style: normal;
  letter-spacing: 0.18em;
  color: rgba(167, 214, 221, 0.6);
  font-variant-numeric: tabular-nums;
}

/* The page's own way out: the same cap as the rail's fold, but at reading
   size and at the top of the page where it is seen on the way in. */
.journal-hero-top .journal-close {
  margin-left: auto;
}

.journal-hero-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9dffd0;
  box-shadow: 0 0 14px rgba(125, 255, 176, 0.8);
  animation: journal-mark 4.2s ease-in-out infinite;
}

@keyframes journal-mark {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.journal-hero h2 {
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 0;
  font-size: clamp(34px, 5.6vw, 76px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: none;
  background: linear-gradient(96deg, #f4ffff 0%, #7fe9ff 30%, #8dffc9 66%, #ffd692 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.journal-deck {
  margin: 14px 0 0;
  max-width: 660px;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(176, 210, 216, 0.78);
}

.journal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 25px 0 0;
  border-top: 1px solid rgba(127, 232, 255, 0.14);
  border-bottom: 1px solid rgba(127, 232, 255, 0.1);
}

.journal-stats div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 18px 15px;
  border-left: 1px solid rgba(127, 232, 255, 0.08);
}

.journal-stats div:first-child {
  padding-left: 0;
  border-left: 0;
}

.journal-stats span {
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.45);
}

.journal-stats b {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #ecfeff;
  font-variant-numeric: tabular-nums;
}

body.journal-open .journal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  flex: 0 0 auto;
  align-content: start;
  gap: 0 30px;
  width: 100%;
  max-width: 1280px;
  margin: 6px auto 0;
  padding: 0;
  overflow: visible;
  mask-image: none;
}

body.journal-open .journal-list .journal-row {
  grid-template-columns: 30px 7px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 13px 0 14px;
  border-top: 1px solid rgba(127, 232, 255, 0.085);
  animation: journal-row-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}

body.journal-open .journal-step {
  display: block;
  grid-column: 1;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(127, 232, 255, 0.34);
  font-variant-numeric: tabular-nums;
}

body.journal-open .journal-row i {
  grid-column: 2;
  width: 7px;
  height: 7px;
}

body.journal-open .journal-row b {
  grid-column: 3;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: #e6feff;
}

body.journal-open .journal-stamp {
  display: block;
  grid-column: 4;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(127, 232, 255, 0.34);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.journal-open .journal-row span {
  grid-column: 3;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(165, 200, 206, 0.8);
}

body.journal-open .journal-list:empty::after {
  content: 'the plate has not written anything yet — the first pulse is on its way.';
  grid-column: 1 / -1;
  padding: 26px 0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(150, 188, 194, 0.7);
}

body.journal-open .journal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 1280px;
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(127, 232, 255, 0.12);
}

.journal-foot-note {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.44);
}

.journal-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(127, 232, 255, 0.2);
  border-radius: 999px;
  background: rgba(127, 232, 255, 0.04);
  color: rgba(216, 246, 252, 0.85);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.journal-close b {
  padding: 2px 6px;
  border: 1px solid rgba(127, 232, 255, 0.24);
  border-radius: 5px;
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(157, 241, 255, 0.85);
}

.journal-close:hover,
.journal-close:focus-visible {
  border-color: rgba(127, 232, 255, 0.6);
  background: rgba(127, 232, 255, 0.09);
  color: #f2feff;
  outline: none;
}

@media (max-width: 760px) {
  body.journal-open .panel.journal {
    padding: 18px 16px 14px;
  }

  .journal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-stats div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  body.journal-open .journal-list {
    grid-template-columns: 1fr;
  }

  body.journal-open .journal-foot {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.journal-open .panel.journal,
  body.journal-open .journal-hero,
  body.journal-open .journal-list .journal-row,
  .journal-hero-mark {
    animation: none;
  }
}

/* --------------------------------------------------------------- the card */
/* Everything in the biomass card is one of three things: the number you play
   by, the identity of the culture, or a count. They get one block each. */

.stats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.stats-head .label {
  margin-bottom: 4px;
}

.stats-head .big {
  font-size: 29px;
}

.stats .meters {
  margin-top: 11px;
}

.stats .bar {
  height: 3px;
  margin-top: 6px;
}

.stats .bar:first-of-type {
  margin-top: 0;
}

/* The three meters are unlabelled by habit; name them quietly so the card
   says what the blue, cyan and pale lines are measuring. */
.meter-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 5px;
  font-size: 7px;
  letter-spacing: 0.14em;
  color: rgba(112, 152, 164, 0.7);
}

.meter-keys span:nth-child(2) {
  text-align: center;
}

.meter-keys span:nth-child(3) {
  text-align: right;
}

/* The name heads the card: who the culture is, then what it is. The handle is
   right-aligned so a long display name can never squeeze it into an ellipsis. */
.identity {
  display: grid;
  gap: 5px;
  justify-items: start;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(127, 232, 255, 0.1);
  font-size: 8.5px;
  letter-spacing: 0.12em;
}

.identity-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.identity-name b {
  flex: 1 1 auto;
  overflow: hidden;
  color: #eafcff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-name i {
  flex: 0 0 auto;
  max-width: 54%;
  overflow: hidden;
  font-style: normal;
  color: rgba(126, 170, 184, 0.85);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-code {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 7px 3px;
  border: 1px solid rgba(127, 232, 255, 0.14);
  border-radius: 999px;
  background: rgba(127, 232, 255, 0.05);
  font-size: 7.5px;
  color: rgba(166, 214, 226, 0.9);
}

.identity-code em {
  font-style: normal;
  opacity: 0.45;
}

.identity-code b {
  font-weight: 500;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(127, 232, 255, 0.1);
}

.stat {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.stat span {
  overflow: hidden;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(120, 160, 172, 0.68);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat b {
  color: #d8f5fc;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.stats-foot {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(127, 232, 255, 0.1);
}

.stats-foot .row {
  gap: 10px;
  font-size: 8.5px;
}

.stats-foot .row b {
  overflow: hidden;
  max-width: 64%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-foot .row.traits-row b {
  white-space: normal;
  text-align: right;
  line-height: 1.45;
}

/* The project row only exists while something is being researched. */
.stats-foot .research-row {
  display: none;
}

.stats-foot .research-row.active {
  display: flex;
}

.stats-foot .research-row b {
  color: #9fe8ff;
}

/* A grazer has no prey sense: do not spend two rows saying "—". */
.stats:not(.hunter) .hunter-only {
  display: none;
}

/* A spored colony is a state, not a stat: give it the card's accent colour. */
.stats b[data-k="state"] {
  color: rgba(160, 214, 173, 0.9);
}

/* ------------------------------------------------------------- bottom band */

.hud-foot {
  position: absolute;
  left: calc(var(--rail-left) + var(--rail-inset) + var(--rail-gap));
  right: calc(var(--rail-right) + var(--rail-inset) + var(--rail-gap));
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

/* The keys sit on top of the living field. A soft shadow, not a card, so the
   plate still reads as one endless surface under the text. */
.hud-foot::before {
  content: '';
  position: absolute;
  /* Reaches its own edges at zero alpha, so the scrim has no visible border. */
  inset: -92px -96px -22px;
  background: radial-gradient(
    ellipse 60% 100% at 50% 100%,
    rgba(2, 9, 11, 0.74) 0%,
    rgba(2, 9, 11, 0.52) 42%,
    rgba(2, 9, 11, 0.2) 72%,
    rgba(2, 9, 11, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
}

.hud-foot .hint,
.hud-foot .legend {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  max-width: 100%;
  text-align: center;
}

.hud-foot .legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 3px 16px;
  font-size: 8.5px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: rgba(118, 154, 166, 0.88);
  text-shadow: 0 1px 10px rgba(2, 8, 10, 0.92);
}

/* Two balanced halves instead of one long line that orphans its last word. */
.legend-group {
  white-space: nowrap;
}

.legend-group + .legend-group {
  position: relative;
}

.legend-group + .legend-group::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(127, 232, 255, 0.34);
}

/* Every key is drawn as a key: a cap with a lit edge reads faster than a word
   in the same weight as the rest of the sentence. */
.legend-group b {
  display: inline-block;
  padding: 0 4px 1px;
  border: 1px solid rgba(150, 226, 240, 0.22);
  border-bottom-color: rgba(150, 226, 240, 0.34);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(190, 246, 255, 0.1), rgba(190, 246, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(236, 253, 255, 0.12);
  font-size: 7.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.08em;
  color: rgba(198, 244, 255, 0.96);
}

.hud-foot .hint {
  padding: 3px 11px 4px;
  border: 1px solid rgba(127, 232, 255, 0.13);
  border-radius: 999px;
  background: rgba(4, 14, 19, 0.46);
  backdrop-filter: blur(9px) saturate(130%);
  -webkit-backdrop-filter: blur(9px) saturate(130%);
  font-size: 9.5px;
  line-height: 1.4;
  color: rgba(178, 222, 234, 0.84);
  /* A colony can grow right under this line: it has to read on bright cells. */
  text-shadow:
    0 1px 2px rgba(2, 8, 10, 0.9),
    0 0 16px rgba(2, 8, 10, 0.95);
}

/* The coach clears its own text in states where it has nothing to say, and an
   empty pill would be a stray outline on the plate. */
.hud-foot .hint:empty {
  display: none;
}

/* ------------------------------------------------------------- edge clamps */
/* The banner and the DNA warning are centred, so they have to know about the
   rails; otherwise they slide under the genome on a 1024-wide screen. */

.event-banner {
  max-width: min(540px, calc(100vw - 2 * 282px));
}

.dna-warning {
  max-width: min(360px, calc(100vw - 2 * 282px));
}

@media (max-width: 1180px) {
  #hud {
    --rail-left: 222px;
    --rail-right: 222px;
    --rail-gap: 14px;
    --rail-inset: 14px;
    --rail-top-right: 70px;
  }

  .player-dock {
    top: 14px;
    right: 14px;
  }

  .event-banner,
  .dna-warning {
    max-width: min(460px, calc(100vw - 2 * 240px));
  }

  .rail {
    gap: 10px;
  }

  .rail .panel {
    padding: 10px 12px;
  }

  .stats-head .big {
    font-size: 26px;
  }
}

@media (max-width: 940px) {
  #hud {
    --rail-left: 200px;
    --rail-right: 200px;
    --rail-gap: 12px;
    --rail-inset: 12px;
    --rail-top-right: 64px;
  }

  .player-dock {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }

  .trait {
    grid-template-columns: 52px 1fr;
    gap: 8px;
  }

  .stats-grid {
    gap: 7px 10px;
  }

  .mass-row,
  .dose-row {
    font-size: 8.5px;
    letter-spacing: 0.04em;
  }

  .field-label {
    font-size: 8px;
    letter-spacing: 0.02em;
  }

  .hud-foot .legend {
    gap: 2px 14px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .legend-group + .legend-group::before {
    display: none;
  }
}

/* Short screens: the card drops its quietest line before anything overlaps. */
@media (max-height: 700px) {
  .rail {
    gap: 9px;
  }

  .panel.journal {
    min-height: 108px;
  }

  .panel.journal .dose-copy {
    display: none;
  }

  .stats-grid {
    margin-top: 9px;
    padding-top: 8px;
    gap: 6px 12px;
  }

  .stats-foot {
    margin-top: 8px;
    padding-top: 7px;
  }
}

@media (max-height: 560px) {
  .panel.journal .journal-list {
    display: none;
  }

  .panel.journal {
    min-height: 0;
  }
}


/* Large displays: the same frame, at a reading size. The rails grow with the
   screen, the type comes up half a step, and the play area still owns the
   middle two thirds of the view. */
@media (min-width: 1600px) {
  #hud {
    --rail-left: 262px;
    --rail-right: 262px;
    --rail-gap: 22px;
    --rail-inset: 20px;
    --rail-top-right: 88px;
  }

  .player-dock {
    top: 20px;
    right: 20px;
  }

  .rail {
    gap: 14px;
  }

  .rail .panel {
    padding: 13px 15px;
  }

  .rail .panel,
  .row,
  .stats-foot .row {
    font-size: 10.5px;
  }

  .stat span,
  .identity,
  .stats-foot .row,
  .field-label {
    font-size: 9px;
  }

  .stat b {
    font-size: 12px;
  }

  .stats-head .big {
    font-size: 33px;
  }

  .stats-grid {
    gap: 10px 18px;
  }

  .journal-row b,
  .journal-row span {
    font-size: 9.5px;
  }

  .hud-foot .legend {
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  .hud-foot .hint {
    font-size: 10.5px;
  }

  .stats .bar {
    height: 4px;
    margin-top: 8px;
  }
}

/* The fusion coach. A plate of glass, like the rest of the HUD, that says the one
   thing nothing else says out loud: F is how a lineage becomes more than one
   cell. It sits above the foot hints, breathes while it waits for the call, and
   turns amber-edged when a bite starts eating the seam. */
/* The prompt sits in the left column, under the colony it is about, instead
   of floating over the middle of the plate where the cells feed. */
.fusion-coach {
  position: absolute;
  left: var(--rail-inset);
  bottom: calc(var(--rail-inset) + 66px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--rail-left);
  max-width: none;
  padding: 10px 12px 11px;
  border: 1px solid rgba(120, 226, 255, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(152deg, rgba(150, 235, 255, 0.14), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgb(14 34 44 / var(--glass-fill)), rgb(6 18 24 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(190, 248, 255, 0.2),
    0 18px 44px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    border-color 320ms ease;
}

.fusion-coach.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.fusion-coach.calling {
  border-color: rgba(158, 255, 198, 0.44);
}

.fusion-coach.fused {
  border-color: rgba(196, 140, 255, 0.38);
}

.fusion-coach .coach-key {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(190, 248, 255, 0.34);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(220, 252, 255, 0.16), rgba(120, 200, 230, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.3);
}

.fusion-coach .coach-key b {
  font-size: 16px;
  line-height: 1;
  color: #dffbff;
  text-shadow: 0 0 16px rgba(120, 226, 255, 0.6);
}

/* The key only fidgets while there is something to press it for. */
.fusion-coach.show:not(.fused):not(.calling) .coach-key b {
  animation: coach-key 2.4s ease-in-out infinite;
}

@keyframes coach-key {
  0%, 100% {
    transform: translateY(0);
    text-shadow: 0 0 16px rgba(120, 226, 255, 0.6);
  }
  50% {
    transform: translateY(-1px);
    text-shadow: 0 0 26px rgba(150, 240, 255, 0.95);
  }
}

.fusion-coach .coach-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 12px;
}

.fusion-coach .coach-body b {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cdf4ff;
}

.fusion-coach.calling .coach-body b {
  color: #d8ffe8;
}

.fusion-coach.fused .coach-body b {
  color: #ead9ff;
}

.fusion-coach .coach-body span {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(178, 214, 226, 0.82);
}

.fusion-coach .coach-meter {
  height: 4px;
  margin-top: 2px;
  border-radius: 3px;
  background: rgba(140, 220, 255, 0.14);
  overflow: hidden;
}

.fusion-coach .coach-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(120, 226, 255, 0.7), rgba(196, 255, 236, 0.9));
  transition: width 200ms ease;
}

.fusion-coach.calling .coach-meter i {
  background: linear-gradient(90deg, rgba(158, 255, 198, 0.75), rgba(214, 255, 236, 0.95));
}

.fusion-coach.fused .coach-meter i {
  background: linear-gradient(90deg, rgba(196, 140, 255, 0.7), rgba(255, 214, 168, 0.85));
}

.fusion-coach .coach-dismiss {
  position: absolute;
  top: 5px;
  right: 5px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: rgba(180, 230, 250, 0.1);
  color: rgba(200, 232, 244, 0.7);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.fusion-coach .coach-dismiss:hover {
  background: rgba(180, 230, 250, 0.2);
  color: #eafaff;
}

@media (max-height: 620px) {
  .fusion-coach {
    bottom: calc(var(--rail-inset) + 56px);
    padding: 8px 10px 9px;
  }
}

/* The organism panel: what a body is made of. It is the one rail panel that
   comes and goes with the run, because a lone cell has no organ to speak of -
   it appears the moment two parts weld, and names the part the player picked. */
.panel.organism {
  display: none;
}

/* A panel is a positioned block, not a flex box: opening this one as a row
   squeezed the label and the role grid onto one line. It is a column of rows. */
.panel.organism.show {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel.organism .label {
  margin-bottom: 2px;
}

.panel.organism .organ-pick b {
  min-width: 0;
}

.panel.organism .organ-pick {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(206, 238, 248, 0.86);
}

.panel.organism .organ-pick span {
  color: rgba(255, 214, 168, 0.92);
}

.panel.organism .organ-mass {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: rgba(178, 214, 226, 0.72);
}

.panel.organism .organ-mass b {
  color: #dff8ff;
  font-weight: 500;
}

.panel.organism .organ-mass em {
  font-style: normal;
  color: rgba(196, 255, 236, 0.9);
}

.panel.organism .organ-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}

.panel.organism .organ-role {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 5px;
  /* One line per job: the key and the name are what a player picks by. The
     long description lives in the hover title, where it costs no height. */
  padding: 5px 7px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(120, 226, 255, 0.2);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(150, 235, 255, 0.09), rgba(255, 255, 255, 0));
  color: rgba(214, 242, 250, 0.92);
  font: inherit;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 120ms ease;
}

.panel.organism .organ-role b {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(190, 248, 255, 0.14);
  font-size: 9px;
  color: #dffbff;
}

.panel.organism .organ-role span {
  overflow: hidden;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.panel.organism .organ-role em {
  display: none;
}

.panel.organism .organ-role:hover:not(:disabled) {
  border-color: rgba(158, 255, 214, 0.44);
  transform: translateY(-1px);
}

.panel.organism .organ-role.on {
  border-color: rgba(196, 140, 255, 0.6);
  background: linear-gradient(180deg, rgba(196, 140, 255, 0.2), rgba(120, 226, 255, 0.04));
}

.panel.organism .organ-role:disabled {
  opacity: 0.42;
  cursor: default;
}

.panel.organism .organ-cut {
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 150, 120, 0.28);
  border-radius: 8px;
  background: rgba(255, 150, 120, 0.08);
  color: rgba(255, 214, 198, 0.9);
  font: inherit;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.panel.organism .organ-cut b {
  color: #ffd7c6;
}

.panel.organism .organ-cut:hover:not(:disabled) {
  border-color: rgba(255, 150, 120, 0.6);
  background: rgba(255, 150, 120, 0.16);
}

.panel.organism .organ-cut:disabled {
  opacity: 0.4;
  cursor: default;
}

.panel.organism .organ-note {
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.45;
  color: rgba(178, 214, 226, 0.62);
}

/* The organism panel's own line: the body read as one creature. */
.organism .organ-body {
    margin: 1px 0 6px;
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0;
    opacity: 0.72;
}

/* Where the organism is being bitten: a part the player cannot see from the cockpit
   has to be said out loud, so this row pulses while teeth are on the body. */
.panel.organism .organ-alert {
    display: none;
    margin: 0 0 6px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 138, 112, 0.5);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 96, 74, 0.2), rgba(255, 96, 74, 0.05));
}

.panel.organism .organ-alert.show {
    display: block;
    animation: organ-bite 0.9s ease-in-out infinite;
}

.panel.organism .organ-alert.torn {
    border-color: rgba(255, 186, 96, 0.55);
    background: linear-gradient(180deg, rgba(255, 176, 64, 0.18), rgba(255, 176, 64, 0.04));
    animation: organ-tear 0.6s ease-out 3;
}

.panel.organism .organ-alert b {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd2c6;
}

.panel.organism .organ-alert span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.4;
    color: rgba(255, 222, 210, 0.78);
}

@keyframes organ-bite {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 96, 74, 0); }
    50% { box-shadow: 0 0 12px 1px rgba(255, 96, 74, 0.3); }
}

@keyframes organ-tear {
    0% { box-shadow: 0 0 0 0 rgba(255, 176, 64, 0.45); }
    100% { box-shadow: 0 0 18px 3px rgba(255, 176, 64, 0); }
}

/* The organism's own room, and the one key that carves it. */
.panel.organism .organ-room {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 9px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(178, 214, 226, 0.62);
}

.panel.organism .organ-room > b {
    flex: 1;
    font-weight: 400;
    font-size: 9.5px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(214, 242, 250, 0.86);
}

.panel.organism .organ-hollow {
    padding: 4px 7px;
    border: 1px solid rgba(120, 226, 255, 0.28);
    border-radius: 7px;
    background: rgba(120, 226, 255, 0.08);
    color: rgba(214, 248, 255, 0.9);
    font: inherit;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.panel.organism .organ-hollow b {
    color: #d8fbff;
}

.panel.organism .organ-hollow:hover:not(:disabled) {
    border-color: rgba(120, 226, 255, 0.6);
    background: rgba(120, 226, 255, 0.16);
}

.panel.organism .organ-hollow:disabled {
    opacity: 0.4;
    cursor: default;
}
/* ── Blueprint: the organism panel's drawing board ─────────────────────────── */
.panel.organism .organ-tabs {
  display: flex;
  gap: 3px;
  margin: 2px 0 7px;
  padding: 3px;
  border: 1px solid rgba(120, 226, 255, 0.14);
  border-radius: 9px;
  background: rgba(8, 24, 32, 0.42);
}

.panel.organism .organ-tab {
  flex: 1;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(178, 214, 226, 0.6);
  font: inherit;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.panel.organism .organ-tab:hover {
  color: rgba(226, 250, 255, 0.92);
}

.panel.organism .organ-tab.on {
  color: #e9fdff;
  background: linear-gradient(180deg, rgba(150, 235, 255, 0.2), rgba(150, 235, 255, 0.05));
  box-shadow: inset 0 0 0 1px rgba(158, 245, 255, 0.22);
}

.panel.organism .organ-view[hidden] {
  display: none;
}

.panel.organism .organ-plan {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel.organism .plan-editor {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel.organism .plan-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.panel.organism .plan-meta {
  display: flex;
  align-items: center;
  gap: 9px;
}

.panel.organism .plan-stems {
  padding: 2px 7px;
  border: 1px solid rgba(196, 140, 255, 0.3);
  border-radius: 999px;
  background: rgba(196, 140, 255, 0.08);
  color: rgba(226, 206, 255, 0.9);
  font-size: 8px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.panel.organism .plan-figure {
  color: rgba(196, 255, 236, 0.56);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.panel.organism .plan-rule {
  margin: 0;
  padding: 0 2px;
  font-size: 8.5px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: rgba(196, 174, 255, 0.72);
}

.panel.organism .plan-stem-add {
  border-color: rgba(196, 140, 255, 0.42) !important;
  background: rgba(196, 140, 255, 0.09) !important;
  color: rgba(232, 216, 255, 0.92) !important;
}

.panel.organism .plan-stem-add:hover:not(:disabled) {
  border-color: rgba(226, 190, 255, 0.7) !important;
  background: rgba(196, 140, 255, 0.17) !important;
}

.panel.organism .plan-body {
  display: grid;
  gap: 6px;
  min-height: 0;
}

.panel.organism .plan-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.panel.organism .plan-form-badge,
.panel.organism .plan-form-count {
  position: absolute;
  z-index: 2;
  top: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(4, 14, 19, 0.58);
  border: 1px solid rgba(140, 235, 255, 0.16);
  color: rgba(208, 244, 250, 0.7);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.panel.organism .plan-form-badge {
  left: 8px;
}

.panel.organism .plan-form-count {
  right: 8px;
}

.panel.organism .plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.panel.organism .plan-kicker {
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(178, 214, 226, 0.58);
}

.panel.organism .plan-title {
  font-size: 9px;
  font-weight: 500;
  color: rgba(196, 255, 236, 0.9);
}

.panel.organism .plan-stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(120, 226, 255, 0.16),
    inset 0 12px 30px rgba(0, 0, 0, 0.35);
}

.panel.organism .plan-stage canvas {
  display: block;
  width: 100%;
  height: 168px;
  cursor: grab;
  touch-action: none;
}

.panel.organism .plan-stage canvas:active {
  cursor: grabbing;
}

.panel.organism .plan-stage canvas:focus-visible {
  outline: 1px solid rgba(158, 245, 255, 0.6);
  outline-offset: -2px;
}

.panel.organism .plan-legend {
  position: absolute;
  left: 7px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
  letter-spacing: 0.08em;
  color: rgba(186, 226, 236, 0.55);
  pointer-events: none;
}

.panel.organism .plan-legend i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(196, 140, 255, 0.85);
  box-shadow: 0 0 5px rgba(196, 140, 255, 0.6);
}

.panel.organism .plan-roles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.panel.organism .plan-role {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 1px;
  border: 1px solid rgba(120, 226, 255, 0.16);
  border-radius: 7px;
  background: rgba(120, 226, 255, 0.03);
  color: rgba(204, 238, 246, 0.8);
  font: inherit;
  font-size: 7.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.panel.organism .plan-role i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone, #8ff0ff);
  box-shadow: 0 0 6px var(--tone, #8ff0ff);
}

.panel.organism .plan-role.on {
  border-color: rgba(196, 255, 236, 0.55);
  background: rgba(196, 255, 236, 0.09);
}

.panel.organism .plan-detail {
  margin: 0;
  min-height: 31px;
  padding: 5px 7px;
  border: 1px solid rgba(120, 226, 255, 0.1);
  border-radius: 7px;
  background: rgba(120, 226, 255, 0.035);
  color: rgba(200, 238, 246, 0.74);
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.panel.organism .plan-role:first-letter {
  text-transform: uppercase;
}

.panel.organism .plan-tune {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: rgba(178, 214, 226, 0.7);
}

.panel.organism .plan-tune b {
  color: rgba(222, 255, 246, 0.94);
  font-weight: 500;
}

.panel.organism .plan-tune input[type="range"] {
  width: 100%;
  height: 14px;
  accent-color: rgba(158, 255, 214, 0.8);
  background: transparent;
}

.panel.organism .plan-tools {
  display: flex;
  gap: 4px;
}

.panel.organism .plan-tools button,
.panel.organism .plan-shelf-row button {
  flex: 1;
  padding: 4px 5px;
  border: 1px solid rgba(120, 226, 255, 0.2);
  border-radius: 7px;
  background: rgba(120, 226, 255, 0.045);
  color: rgba(206, 238, 246, 0.82);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.panel.organism .plan-tools button:hover:not(:disabled),
.panel.organism .plan-shelf-row button:hover {
  border-color: rgba(158, 255, 214, 0.5);
  color: #e8fff6;
}

.panel.organism .plan-tools button:disabled {
  opacity: 0.4;
  cursor: default;
}

.panel.organism .plan-shelf-row {
  display: flex;
  gap: 4px;
}

.panel.organism .plan-shelf-row input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid rgba(120, 226, 255, 0.18);
  border-radius: 7px;
  background: rgba(6, 20, 28, 0.62);
  color: #e6fbff;
  font: inherit;
  font-size: 8.5px;
}

.panel.organism .plan-shelf-row input::placeholder {
  color: rgba(178, 214, 226, 0.42);
}

.panel.organism .plan-shelf {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.panel.organism .plan-shelf::-webkit-scrollbar {
  display: none;
}

.panel.organism .plan-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  border: 1px solid rgba(158, 255, 214, 0.2);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(158, 255, 214, 0.05);
}

.panel.organism .plan-chip-load,
.panel.organism .plan-chip-drop {
  border: 0;
  background: transparent;
  color: rgba(214, 250, 240, 0.82);
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}

.panel.organism .plan-chip-load {
  padding: 3px 6px;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel.organism .plan-chip-drop {
  padding: 3px 5px;
  color: rgba(255, 190, 170, 0.7);
  border-left: 1px solid rgba(158, 255, 214, 0.14);
}

.panel.organism .plan-chip-load:hover {
  background: rgba(158, 255, 214, 0.12);
}

.panel.organism .plan-chip-drop:hover {
  background: rgba(255, 150, 120, 0.14);
  color: #ffd9cb;
}

.panel.organism .plan-shelf-empty {
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(178, 214, 226, 0.42);
}

.panel.organism .plan-actions {
  display: flex;
  gap: 4px;
}

.panel.organism .plan-grow,
.panel.organism .plan-stop {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid rgba(158, 255, 214, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(158, 255, 214, 0.14), rgba(158, 255, 214, 0.03));
  color: rgba(222, 255, 242, 0.94);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.panel.organism .plan-stop {
  flex: 0 0 40%;
  border-color: rgba(255, 190, 150, 0.28);
  background: rgba(255, 190, 150, 0.05);
  color: rgba(255, 226, 208, 0.82);
}

.panel.organism .plan-grow:hover:not(:disabled) {
  border-color: rgba(158, 255, 214, 0.68);
  background: linear-gradient(180deg, rgba(158, 255, 214, 0.24), rgba(158, 255, 214, 0.05));
}

.panel.organism .plan-stop:hover {
  border-color: rgba(255, 190, 150, 0.5);
}

.panel.organism .plan-grow:disabled {
  opacity: 0.4;
  cursor: default;
}

.panel.organism .plan-status {
  min-height: 24px;
  font-size: 8.5px;
  line-height: 1.45;
  color: rgba(196, 255, 236, 0.82);
}

.panel.organism .plan-note {
  margin: 0;
  font-size: 8px;
  line-height: 1.45;
  color: rgba(178, 214, 226, 0.5);
}

/* The blueprint is the organism lab, and it opens as a page of its own: a full
   sheet of glass laid over the plate, with the drawing on one side and the
   palette on the other. The field is still alive underneath, which is why the
   glass stays translucent rather than becoming a black modal. */
.rail .panel.organism[data-plan-tab="plan"]:not(.collapsed) {
  position: fixed;
  inset: 10px;
  width: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 18px 16px;
  border-radius: 22px;
  overflow: hidden;
  z-index: 30;
  box-shadow:
    0 40px 120px rgba(0, 3, 7, 0.68),
    inset 0 1px 0 rgba(236, 253, 255, 0.24),
    inset 0 0 90px rgba(127, 232, 255, 0.045);
}

.panel.organism[data-plan-tab="plan"] .organ-tabs {
  flex: 0 0 auto;
  max-width: 340px;
  margin-bottom: 1px;
}

.panel.organism[data-plan-tab="plan"] .organ-plan {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.panel.organism[data-plan-tab="plan"] .plan-editor {
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

.panel.organism[data-plan-tab="plan"] .plan-head {
  flex: 0 0 auto;
  padding: 0 2px;
}

.panel.organism[data-plan-tab="plan"] .plan-rule {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(204, 182, 255, 0.8);
}

.panel.organism[data-plan-tab="plan"] .plan-kicker {
  font-size: 9.5px;
  color: rgba(178, 214, 226, 0.66);
}

.panel.organism[data-plan-tab="plan"] .plan-title {
  font-size: 17px;
  letter-spacing: 0.01em;
  color: rgba(214, 255, 246, 0.96);
}

.panel.organism[data-plan-tab="plan"] .plan-stems {
  font-size: 10px;
  padding: 3px 9px;
}

.panel.organism[data-plan-tab="plan"] .plan-figure {
  font-size: 9px;
  letter-spacing: 0.18em;
}

.panel.organism[data-plan-tab="plan"] .plan-body {
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 336px);
  gap: 14px;
}

.panel.organism[data-plan-tab="plan"] .plan-stage {
  height: auto;
  min-height: 0;
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(120, 226, 255, 0.18),
    inset 0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(4, 14, 20, 0.4);
}

.panel.organism[data-plan-tab="plan"] .plan-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.panel.organism[data-plan-tab="plan"] .plan-form-badge,
.panel.organism[data-plan-tab="plan"] .plan-form-count {
  top: 11px;
  font-size: 8.5px;
  padding: 4px 9px;
}

.panel.organism[data-plan-tab="plan"] .plan-form-badge {
  left: 12px;
}

.panel.organism[data-plan-tab="plan"] .plan-form-count {
  right: 12px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.panel.organism[data-plan-tab="plan"] .plan-legend {
  left: 12px;
  bottom: 10px;
  font-size: 9px;
  gap: 5px;
}

.panel.organism[data-plan-tab="plan"] .plan-legend i {
  width: 7px;
  height: 7px;
}

.panel.organism[data-plan-tab="plan"] .plan-legend b {
  color: rgba(226, 206, 255, 0.86);
  font-weight: 500;
}

.panel.organism[data-plan-tab="plan"] .plan-side {
  gap: 9px;
  padding-right: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 226, 255, 0.24) transparent;
}

/* The column scrolls; its cards must not be squashed to fit. A long cell
   description used to shrink and spill its last lines over the mass slider. */
.panel.organism[data-plan-tab="plan"] .plan-side > * {
  flex: 0 0 auto;
}

.panel.organism[data-plan-tab="plan"] .plan-roles,
.panel.organism[data-plan-tab="plan"] .plan-tune,
.panel.organism[data-plan-tab="plan"] .plan-tools,
.panel.organism[data-plan-tab="plan"] .plan-shelf-row,
.panel.organism[data-plan-tab="plan"] .plan-shelf,
.panel.organism[data-plan-tab="plan"] .plan-actions,
.panel.organism[data-plan-tab="plan"] .plan-status {
  padding: 9px 10px;
  border: 1px solid rgba(120, 226, 255, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(156deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008) 62%),
    rgba(5, 17, 23, 0.28);
  box-shadow: inset 0 1px 0 rgba(236, 253, 255, 0.05);
}

.panel.organism[data-plan-tab="plan"] .plan-roles {
  gap: 5px;
}

.panel.organism[data-plan-tab="plan"] .plan-role {
  gap: 4px;
  padding: 10px 3px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.panel.organism[data-plan-tab="plan"] .plan-role i {
  width: 8px;
  height: 8px;
}

.panel.organism[data-plan-tab="plan"] .plan-role.on {
  border-color: var(--tone, rgba(196, 255, 236, 0.55));
  background: linear-gradient(180deg, var(--tone-soft, rgba(196, 255, 236, 0.12)), rgba(255, 255, 255, 0.02));
  box-shadow: 0 0 20px -8px var(--tone, rgba(196, 255, 236, 0.6));
}

.panel.organism[data-plan-tab="plan"] .plan-tune {
  font-size: 10.5px;
  gap: 9px;
}

.panel.organism[data-plan-tab="plan"] .plan-tune input[type="range"] {
  height: 18px;
}

.panel.organism[data-plan-tab="plan"] .plan-tools {
  flex-wrap: wrap;
}

.panel.organism[data-plan-tab="plan"] .plan-tools button {
  flex: 1 1 calc(50% - 4px);
}

.panel.organism[data-plan-tab="plan"] .plan-tools button,
.panel.organism[data-plan-tab="plan"] .plan-shelf-row button {
  padding: 8px 7px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.panel.organism[data-plan-tab="plan"] .plan-shelf-row input {
  padding: 7px 9px;
  font-size: 10.5px;
}

.panel.organism[data-plan-tab="plan"] .plan-shelf {
  gap: 5px;
}

.panel.organism[data-plan-tab="plan"] .plan-chip-load,
.panel.organism[data-plan-tab="plan"] .plan-chip-drop {
  font-size: 9.5px;
  padding: 5px 7px;
}

.panel.organism[data-plan-tab="plan"] .plan-chip-load {
  max-width: 150px;
}

.panel.organism[data-plan-tab="plan"] .plan-shelf-empty {
  font-size: 9.5px;
}

.panel.organism[data-plan-tab="plan"] .plan-grow,
.panel.organism[data-plan-tab="plan"] .plan-stop {
  padding: 10px 12px;
  font-size: 10.5px;
  border-radius: 10px;
}

.panel.organism[data-plan-tab="plan"] .plan-status {
  min-height: 46px;
  font-size: 10.5px;
  line-height: 1.5;
}

.panel.organism[data-plan-tab="plan"] .plan-note {
  max-width: none;
  padding: 0 3px;
  font-size: 9.5px;
  line-height: 1.6;
  color: rgba(178, 214, 226, 0.58);
}

@media (max-width: 880px) {
  .rail .panel.organism[data-plan-tab="plan"]:not(.collapsed) {
    inset: 6px;
    padding: 12px 12px 13px;
    border-radius: 18px;
  }

  .panel.organism[data-plan-tab="plan"] .organ-tabs {
    max-width: none;
  }

  .panel.organism[data-plan-tab="plan"] .plan-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 42vh) minmax(0, 1fr);
    gap: 10px;
  }

  .panel.organism[data-plan-tab="plan"] .plan-side {
    overflow-y: auto;
  }

  .panel.organism[data-plan-tab="plan"] .plan-title {
    font-size: 14px;
  }
}

/* The board's own caption lies over the drawing; it must never eat a drag. */
.panel.organism .plan-legend,
.panel.organism .plan-legend * {
  pointer-events: none;
}

/* ------------------------------------------------------------ command view */
/* V turns the plate into a map: the camera pulls back, the rest of the agar
   falls into shadow, and the colony stays lit inside soft observation holes. */

.command-layer {
  position: fixed;
  inset: 0;
  z-index: 14;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.command-layer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 320ms ease;
}

.command-field {
  position: absolute;
  inset: 0;
  cursor: default;
  touch-action: none;
}

.command-layer.armed .command-field,
.command-layer.dragging .command-field {
  cursor: crosshair;
}

.command-bar {
  position: absolute;
  top: max(18px, env(safe-area-inset-top, 0px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 28px);
  padding: 9px 11px 9px 16px;
  border: 1px solid rgba(196, 246, 255, calc(0.18 + var(--glass-tint) * 0.16));
  border-radius: 17px;
  background:
    linear-gradient(156deg, rgba(255, 255, 255, calc(0.11 + var(--glass-tint) * 0.06)) 0%, rgba(255, 255, 255, 0.02) 36%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(120% 120% at 8% -30%, rgba(122, 233, 255, calc(0.08 + var(--glass-tint) * 0.12)), rgba(122, 233, 255, 0) 62%),
    linear-gradient(180deg, rgb(7 21 27 / var(--glass-fill)), rgb(3 10 14 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 22px 54px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -12px);
  transition:
    opacity 300ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.command-layer.open .command-bar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.command-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c9f7ff;
}

.command-brand i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9df1ff;
  box-shadow: 0 0 12px rgba(157, 241, 255, 0.9);
  animation: command-pulse 2.4s ease-in-out infinite;
}

.command-brand b {
  font-weight: 500;
}

.command-brand em {
  font-style: normal;
  letter-spacing: 0.18em;
  color: #54747f;
}

.command-read {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid rgba(127, 232, 255, 0.16);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #54747f;
}

.command-read b {
  min-width: 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: right;
  color: #e9fdff;
  text-shadow: 0 0 18px rgba(157, 241, 255, 0.5);
}

.command-keys {
  display: flex;
  gap: 12px;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #54747f;
}

.command-keys kbd,
.command-hint b {
  font-family: inherit;
  font-weight: 500;
  color: #dffcff;
}

.command-actions {
  display: flex;
  gap: 6px;
  padding-left: 13px;
  border-left: 1px solid rgba(127, 232, 255, 0.16);
}

.command-actions button {
  appearance: none;
  padding: 7px 10px;
  border: 1px solid rgba(196, 246, 255, 0.16);
  border-radius: 10px;
  background: rgba(157, 241, 255, 0.05);
  color: #c9edf5;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 120ms ease;
}

.command-actions button b {
  margin-right: 4px;
  font-weight: 500;
  color: #9df1ff;
}

.command-actions button:hover {
  border-color: rgba(196, 246, 255, 0.4);
  background: rgba(157, 241, 255, 0.13);
  color: #f2ffff;
}

.command-actions button:active {
  transform: translateY(1px);
}

.command-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.command-actions .command-send {
  border-color: rgba(157, 241, 255, 0.34);
  background: rgba(157, 241, 255, 0.12);
  color: #eaffff;
}

.command-actions .command-close {
  background: transparent;
}

.command-actions .command-viral {
  border-color: rgba(178, 128, 255, 0.32);
  background: linear-gradient(180deg, rgba(178, 128, 255, 0.16), rgba(178, 128, 255, 0.06));
  color: #f0e6ff;
}

.command-actions .command-viral b {
  color: #c8a6ff;
}

.command-actions .command-viral.on {
  border-color: rgba(200, 166, 255, 0.7);
  background: linear-gradient(180deg, rgba(178, 128, 255, 0.3), rgba(112, 64, 190, 0.18));
  box-shadow:
    0 0 22px rgba(154, 104, 255, 0.28),
    inset 0 0 14px rgba(202, 172, 255, 0.1);
  color: #fffaff;
}

/* The strike console sits under the command rail: payloads, points, launch. */
.command-strike {
  position: absolute;
  top: calc(max(18px, env(safe-area-inset-top, 0px)) + 58px);
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(760px, calc(100vw - 28px));
  padding: 9px 12px 10px;
  border: 1px solid rgba(178, 128, 255, calc(0.2 + var(--glass-tint) * 0.16));
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 12% -20%, rgba(143, 94, 232, 0.16), rgba(143, 94, 232, 0) 60%),
    linear-gradient(180deg, rgb(9 19 25 / var(--glass-fill)), rgb(3 10 14 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.12),
    0 16px 38px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturation));
  opacity: 0;
  transform: translate(-50%, -7px);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.command-layer.open .command-strike:not([hidden]) {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.command-strike[hidden] {
  display: none;
}

/* The standing orders sit under the command rail, on the shelf the viral
   console uses. Opening a strike hides them: one plan at a time. */
.command-orders {
  position: absolute;
  top: calc(max(18px, env(safe-area-inset-top, 0px)) + 58px);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 28px);
  padding: 8px 12px;
  border: 1px solid rgba(196, 246, 255, calc(0.16 + var(--glass-tint) * 0.14));
  border-radius: 13px;
  background:
    radial-gradient(120% 140% at 8% -20%, rgba(122, 233, 255, 0.1), rgba(122, 233, 255, 0) 60%),
    linear-gradient(180deg, rgb(8 20 26 / var(--glass-fill)), rgb(3 10 14 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.14),
    0 16px 38px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturation));
  opacity: 0;
  transform: translate(-50%, -7px);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.command-layer.open .command-orders {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.command-layer.strike .command-orders {
  opacity: 0;
  pointer-events: none;
}

.command-orders-label,
.command-orders-read {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #54747f;
  white-space: nowrap;
  /* The shelf is a readout, not a target: it must never swallow a click meant
     for one of the order buttons beside it. */
  pointer-events: none;
}

.command-orders-read.previewing {
  color: #ffd08a;
  border-left-color: rgba(255, 208, 138, 0.42);
}

.command-orders-read {
  padding-left: 9px;
  margin-left: 2px;
  border-left: 1px solid rgba(127, 232, 255, 0.14);
  letter-spacing: 0.12em;
  color: #8fb7c2;
  /* Reserved width: a hovered order changes the words here, never the layout,
     so the button under the pointer cannot slide away from it. */
  flex: 0 1 30ch;
  width: 30ch;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-orders button {
  appearance: none;
  padding: 6px 10px;
  border: 1px solid rgba(196, 246, 255, 0.16);
  border-radius: 9px;
  background: rgba(157, 241, 255, 0.05);
  color: #c9edf5;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.command-orders button:hover {
  border-color: rgba(196, 246, 255, 0.38);
  background: rgba(157, 241, 255, 0.12);
  color: #f2ffff;
}

.command-orders button.on {
  border-color: rgba(157, 241, 255, 0.62);
  background: linear-gradient(180deg, rgba(157, 241, 255, 0.24), rgba(46, 118, 136, 0.14));
  color: #ffffff;
  box-shadow: inset 0 0 12px rgba(190, 250, 255, 0.12);
}

/* Warheads per marked point. The steppers only appear while a payload is open. */
.command-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 0;
}

.command-plan:empty {
  display: none;
}

.command-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 8px;
  border: 1px solid rgba(178, 128, 255, 0.24);
  border-radius: 999px;
  background: rgba(154, 104, 255, 0.08);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #d8ccf2;
}

.command-plan-chip.empty {
  border-color: rgba(255, 110, 120, 0.28);
  color: #8d909c;
}

.command-plan-label {
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f7ab7;
}

.command-plan-reach {
  font-size: 7px;
  letter-spacing: 0.04em;
  color: #8f7ab7;
  margin-left: -2px;
  pointer-events: none;
}

.command-plan-chip b {
  min-width: 12px;
  text-align: center;
  font-weight: 500;
  font-size: 11px;
  color: #fffaff;
}

.command-plan-step {
  appearance: none;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(204, 178, 255, 0.24);
  border-radius: 50%;
  background: rgba(154, 104, 255, 0.1);
  color: #e8dcff;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease;
}

.command-plan-step:hover {
  border-color: rgba(204, 178, 255, 0.6);
  background: rgba(154, 104, 255, 0.24);
}

.command-plan-step:disabled {
  opacity: 0.3;
  cursor: default;
}

.command-plan-note {
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f8190;
}

.command-plan-note.alert {
  color: #ff9aa2;
}

.command-plan-reset {
  appearance: none;
  padding: 4px 8px;
  border: 1px solid rgba(178, 128, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: #c8b6e8;
  font: inherit;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.command-plan-reset:hover {
  border-color: rgba(204, 178, 255, 0.6);
  color: #fffaff;
}

.command-strike-main,
.command-infect {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.command-strike-label,
.command-infect-label {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b79de0;
  white-space: nowrap;
}

.command-payload {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  appearance: none;
  padding: 6px 9px;
  border: 1px solid rgba(204, 178, 255, 0.16);
  border-radius: 9px;
  background: rgba(154, 104, 255, 0.05);
  color: #bfc9d6;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.command-payload i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a6cff;
  box-shadow: 0 0 10px currentColor;
}

.command-payload[data-kind="lysogenic"] i {
  background: #7effd6;
  box-shadow: 0 0 10px rgba(126, 255, 214, 0.7);
}

.command-payload[data-kind="mine"] i {
  background: #ffc478;
  box-shadow: 0 0 10px rgba(255, 196, 120, 0.5);
}

.command-payload b {
  font-weight: 500;
  color: #f0eaff;
}

.command-payload em {
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.12em;
  color: #6f8190;
}

.command-payload:hover {
  border-color: rgba(204, 178, 255, 0.42);
  background: rgba(154, 104, 255, 0.12);
  color: #f4efff;
}

.command-payload[aria-pressed="true"] {
  border-color: rgba(204, 178, 255, 0.72);
  background: linear-gradient(180deg, rgba(154, 104, 255, 0.28), rgba(92, 54, 156, 0.16));
  color: #fffaff;
  box-shadow: inset 0 0 12px rgba(208, 180, 255, 0.1);
}

.command-payload:disabled {
  opacity: 0.35;
  cursor: default;
}

.command-targets {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93a6b5;
}

.command-launch {
  appearance: none;
  padding: 6px 11px;
  border: 1px solid rgba(126, 255, 214, 0.42);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(126, 255, 214, 0.18), rgba(56, 140, 116, 0.12));
  color: #eafff7;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    opacity 150ms ease;
}

.command-launch:hover {
  border-color: rgba(170, 255, 226, 0.8);
  background: linear-gradient(180deg, rgba(126, 255, 214, 0.3), rgba(56, 140, 116, 0.18));
}

.command-launch:disabled {
  opacity: 0.3;
  cursor: default;
}

.command-infect {
  padding-top: 5px;
  border-top: 1px solid rgba(178, 128, 255, 0.12);
}

.command-infect-count {
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f8190;
}

.command-infect-list {
  display: flex;
  flex: 1;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.command-infect-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  padding: 4px 7px;
  border: 1px solid rgba(178, 128, 255, 0.18);
  border-radius: 999px;
  background: rgba(154, 104, 255, 0.06);
  color: #c9d5dd;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.command-infect-row i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.command-infect-row em {
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a9da9;
}

.command-infect-row[aria-pressed="true"] {
  border-color: rgba(204, 178, 255, 0.62);
  background: rgba(154, 104, 255, 0.2);
  color: #fffaff;
}

.command-box.strike {
  border-color: rgba(196, 155, 255, 0.7);
  background: linear-gradient(180deg, rgba(154, 104, 255, 0.16), rgba(154, 104, 255, 0.04));
  box-shadow:
    0 0 18px rgba(154, 104, 255, 0.24),
    inset 0 0 18px rgba(154, 104, 255, 0.08);
}

@media (max-width: 720px) {
  .command-strike {
    top: calc(max(18px, env(safe-area-inset-top, 0px)) + 66px);
    max-height: 46vh;
    overflow-y: auto;
  }

  .command-targets {
    margin-left: 0;
  }
}

.command-hint {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(196, 246, 255, calc(0.14 + var(--glass-tint) * 0.12));
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(7 21 27 / var(--glass-fill)), rgb(3 10 14 / var(--glass-fill-deep)));
  backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  color: #8fb6c0;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms ease,
    border-color 180ms ease;
  pointer-events: none;
  white-space: nowrap;
}

.command-layer.open .command-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.command-hint.alert {
  color: #ffd2a1;
  border-color: rgba(255, 170, 90, 0.4);
}

.command-hint b,
.command-hint kbd {
  font-family: inherit;
  font-weight: 500;
  color: #eaffff;
}

.command-hint.alert b {
  color: #ffe3c4;
}

.command-box {
  position: absolute;
  border: 1px solid rgba(190, 255, 236, 0.7);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(157, 241, 255, 0.14), rgba(157, 241, 255, 0.05));
  box-shadow:
    0 0 18px rgba(157, 241, 255, 0.25),
    inset 0 0 18px rgba(157, 241, 255, 0.08);
  pointer-events: none;
}

.command-box[hidden] {
  display: none;
}

/* The rail is a strategic view, not a place for the HUD: the plate and the bar
   are the only instruments while the map is open. */
body.command-view .rail,
body.command-view .hud-foot,
body.command-view .event-banner,
body.command-view .event-siren,
body.command-view .fusion-coach,
body.command-view .dna-warning,
body.command-view .player-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

body.command-view #game {
  cursor: default;
}

/* The quiet entry point in the corner of the HUD. */
.command-open {
  position: fixed;
  right: 20px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  padding: 8px 11px;
  border: 1px solid rgba(196, 246, 255, calc(0.14 + var(--glass-tint) * 0.14));
  border-radius: 11px;
  background: linear-gradient(180deg, rgb(7 21 27 / var(--glass-fill)), rgb(3 10 14 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.14),
    0 10px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8fb6c0;
  cursor: pointer;
  pointer-events: auto;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}

.command-open b {
  font-weight: 500;
  color: #9df1ff;
}

.command-open:hover {
  border-color: rgba(196, 246, 255, 0.4);
  color: #eaffff;
}

.command-open:active {
  transform: translateY(1px);
}

/* HUD visibility: one quiet control above command, and one unmistakable way
   back when the plate is clear. The restore control lives inside #hud but is
   exempt from the ui-hidden rule below. */
.ui-toggle,
.ui-restore {
  position: fixed;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  padding: 8px 11px;
  border: 1px solid rgba(196, 246, 255, calc(0.14 + var(--glass-tint) * 0.14));
  border-radius: 11px;
  background: linear-gradient(180deg, rgb(7 21 27 / var(--glass-fill)), rgb(3 10 14 / var(--glass-fill-deep)));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.14),
    0 10px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8fb6c0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, color 160ms ease, border-color 160ms ease;
}

.ui-toggle {
  right: 20px;
  bottom: 64px;
}

.ui-restore {
  top: 18px;
  right: 76px;
  display: none;
}

body.playing .ui-toggle {
  opacity: 1;
  pointer-events: auto;
}

body.player-menu-open .ui-toggle {
  opacity: 0;
  pointer-events: none;
}

.ui-toggle b,
.ui-restore b {
  font-weight: 500;
  color: #9df1ff;
}

.ui-toggle:hover,
.ui-restore:hover {
  border-color: rgba(196, 246, 255, 0.4);
  color: #eaffff;
}

body.ui-hidden .ui-toggle,
body.ui-hidden .rail,
body.ui-hidden .hud-foot,
body.ui-hidden .chat,
body.ui-hidden .player-dock,
body.ui-hidden .event-siren,
body.ui-hidden .event-flash,
body.ui-hidden .event-omen,
body.ui-hidden .event-banner,
body.ui-hidden .fusion-coach,
body.ui-hidden .dna-warning,
body.ui-hidden .lab,
body.ui-hidden .tour {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ui-hidden .ui-restore {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 1180px) {
  .ui-toggle {
    right: 14px;
    bottom: 58px;
  }

  .ui-restore {
    top: 14px;
    right: 66px;
  }
}

@media (max-width: 640px) {
  .ui-toggle {
    right: 12px;
    bottom: 56px;
  }

  .ui-restore {
    top: 12px;
    right: 60px;
  }
}

@keyframes command-pulse {
  0%,
  100% {
    opacity: 0.55;
    box-shadow: 0 0 8px rgba(157, 241, 255, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 16px rgba(157, 241, 255, 0.95);
  }
}

@media (max-width: 900px) {
  .command-bar {
    gap: 10px;
    padding: 8px 9px 8px 13px;
  }

  .command-brand em,
  .command-keys,
  .command-read span {
    display: none;
  }

  .command-read {
    padding-left: 10px;
  }

  .command-actions {
    padding-left: 9px;
  }

  .command-hint {
    white-space: normal;
  }
}


/* --------------------------------------------------------------- pre-impact omen */
/* Before a dose lands, the warning is given the centre of the plate: a large,
   low-frequency card that arrives slowly and leaves as the event takes over. */

.event-omen {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Only a whisper of edge shadow: the plate itself is where a dose is shown,
     so the warning card must never dim the thing it is warning about. */
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(1, 5, 8, 0.14) 100%);
  transition: opacity 800ms ease, visibility 800ms;
}

.event-omen.show {
  opacity: 1;
  visibility: visible;
}

.omen-card {
  display: grid;
  justify-items: center;
  width: min(780px, 78vw);
  text-align: center;
  transform: translateY(14px) scale(0.985);
  filter: blur(6px);
  transition:
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1000ms ease;
}

.event-omen.show .omen-card {
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.omen-sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 46%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, color-mix(in srgb, var(--tone, #8ee8ff) 24%, transparent), transparent 68%), rgba(2, 9, 13, 0.54);
  box-shadow:
    inset 0 0 22px color-mix(in srgb, var(--tone, #8ee8ff) 16%, transparent),
    0 0 38px color-mix(in srgb, var(--tone, #8ee8ff) 12%, transparent);
}

.omen-sigil::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px dashed color-mix(in srgb, var(--tone, #8ee8ff) 38%, transparent);
  border-radius: 50%;
  animation: sigil-spin 18s linear infinite;
}

.omen-sigil > svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--tone, #8ee8ff);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--tone, #8ee8ff) 55%, transparent));
}

.omen-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone, #8ee8ff) 76%, #eaffff);
}

.omen-kicker b {
  font-weight: 500;
  color: var(--tone, #8ee8ff);
}

.omen-kicker em {
  font-style: normal;
  opacity: 0.42;
}

.omen-kicker i {
  font-style: normal;
  opacity: 0.72;
}

.omen-card h2 {
  max-width: 100%;
  margin: 16px 0 12px;
  font-size: clamp(32px, 5.6vw, 76px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: 0.01em;
  color: #f2feff;
  text-wrap: balance;
  text-shadow: 0 0 55px color-mix(in srgb, var(--tone, #8ee8ff) 30%, transparent);
}

.omen-copy {
  max-width: 620px;
  margin: 0;
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.65;
  letter-spacing: 0.015em;
  color: rgba(183, 218, 226, 0.92);
  text-wrap: balance;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

.omen-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(139, 181, 191, 0.82);
}

.omen-meta span:first-child {
  color: var(--tone, #8ee8ff);
}

.omen-meta span:last-child {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 26%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--tone, #8ee8ff) 68%, #e7fbff);
  font-size: 7px;
  letter-spacing: 0.18em;
}

.omen-bar {
  width: min(340px, 68%);
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tone, #8ee8ff) 12%, rgba(255, 255, 255, 0.03));
  overflow: hidden;
}

.omen-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--tone, #8ee8ff));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tone, #8ee8ff) 52%, transparent);
  transition: width 150ms linear;
}

body.colony-lost .event-omen,
body.journal-open .event-omen,
body.command-view .event-omen {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 760px) {
  .omen-card {
    width: 88vw;
  }
  .omen-sigil {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
  }
  .omen-sigil > svg {
    width: 29px;
    height: 29px;
  }
  .omen-card h2 {
    font-size: clamp(28px, 8vw, 52px);
  }
  .omen-copy {
    font-size: 11px;
    line-height: 1.55;
  }
  .omen-meta {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-omen,
  .omen-card {
    transition: none;
  }
  .omen-card {
    transform: none;
    filter: none;
  }
}


/* ------------------------------------------------------------ apocalypse staging */
/* The warning is the title sequence for the event: hazard rails above the card,
   a slow scan across the copy, a larger title and a breathing halo on the
   sigil. Additive overrides, so the layout rules above stay authoritative. */

.omen-card {
  position: relative;
  padding-bottom: 8px;
}

.omen-card::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: min(320px, 54%);
  height: 9px;
  translate: -50% 0;
  background: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--tone, #8ee8ff) 72%, transparent) 0 7px,
    transparent 7px 17px);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.5;
}

.omen-card::after {
  content: '';
  position: absolute;
  inset: -26px -8% -18px;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0 43%,
    color-mix(in srgb, var(--tone, #8ee8ff) 13%, transparent) 50%,
    transparent 57%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 22%, transparent 74%);
  opacity: 0.55;
  animation: omen-scan 4.8s ease-in-out infinite;
}

.omen-card h2 {
  font-size: clamp(34px, 6.2vw, 88px);
  letter-spacing: -0.006em;
  text-shadow:
    0 0 70px color-mix(in srgb, var(--tone, #8ee8ff) 34%, transparent),
    0 2px 34px rgba(0, 0, 0, 0.55);
}

.omen-kicker {
  font-size: 9px;
  letter-spacing: 0.34em;
}

.omen-copy {
  max-width: 640px;
  font-size: clamp(12px, 1.18vw, 15px);
}

.omen-sigil {
  width: 84px;
  height: 84px;
}

.omen-sigil::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 57%,
    color-mix(in srgb, var(--tone, #8ee8ff) 26%, transparent) 60%,
    transparent 72%);
  opacity: 0.6;
  animation: omen-halo 3.4s ease-in-out infinite;
}

.omen-bar {
  width: min(380px, 70%);
  height: 3px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--tone, #8ee8ff) 22%, transparent);
}

@keyframes omen-scan {
  0%, 100% { transform: translateY(-10px); opacity: 0.18; }
  46% { transform: translateY(12px); opacity: 0.62; }
  54% { transform: translateY(12px); opacity: 0.62; }
}

@keyframes omen-halo {
  0%, 100% { transform: scale(0.94); opacity: 0.34; }
  50% { transform: scale(1.06); opacity: 0.72; }
}

@media (max-width: 760px) {
  .omen-sigil {
    width: 64px;
    height: 64px;
  }
  .omen-card::before {
    height: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .omen-card::after,
  .omen-sigil::after {
    animation: none;
  }
}

/* The centre flash gets a second and third pressure ring plus a ring of ticks,
   so the alert reads as a detonation rather than a glow. */
.flash-halo {
  position: relative;
}

.flash-halo::before,
.flash-halo::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 48%, transparent);
  animation: flash-ring 1.25s cubic-bezier(0.12, 0.8, 0.2, 1) both;
}

.flash-halo::after {
  inset: -12%;
  opacity: 0.6;
  animation-delay: 70ms;
}

.flash-ring::before {
  content: '';
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--tone, #8ee8ff) 70%, transparent) 0 0.6deg,
    transparent 0.6deg 15deg);
  mask-image: radial-gradient(circle, transparent 62%, #000 64%, #000 72%, transparent 74%);
  opacity: 0.55;
  animation: flash-ticks 1.25s cubic-bezier(0.12, 0.8, 0.2, 1) both;
}

@keyframes flash-ticks {
  0% { transform: scale(0.6) rotate(-4deg); opacity: 0; }
  22% { opacity: 0.7; }
  100% { transform: scale(1.18) rotate(7deg); opacity: 0; }
}

/* The omen is a title card, not a modal: it sits in the upper third so the
   plate, the comms card and the footer stay readable on a 720p screen. */
.event-omen {
  place-items: start center;
  padding-top: clamp(54px, 9.5vh, 112px);
}

@media (max-width: 760px) {
  .event-omen {
    padding-top: 76px;
  }
}


/* ---------------------------------------------------- parked: multicellularity */
/* Contact fusion, the organism panel, the blueprint board and the fusion coach
   are built but switched off for now (see sim/features.js). Hiding their
   surfaces here keeps a stored preference, a banked organism or a keyboard path
   from revealing a system the run no longer has. */
body.no-multicell .fusion-coach,
body.no-multicell .panel.organism {
  display: none !important;
}


/* ------------------------------------------------------------------ field tour */
/* A first-run guide that sits over the plate without blocking it: one glass card
   and a ring around whichever readout the current step is about. The card is
   pointer-transparent except for its own buttons, so a player can keep steering
   while reading. */

.tour {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.tour[hidden] {
  display: none;
}

.tour-card {
  position: absolute;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: min(432px, calc(100vw - 28px));
  padding: 15px 17px 13px;
  border: 1px solid rgba(150, 235, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(9, 26, 30, 0.9), rgba(5, 13, 16, 0.94));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 46px rgba(96, 210, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  opacity: 0;
  translate: -50% 14px;
  pointer-events: none;
  transition: opacity 260ms ease, translate 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tour.show .tour-card {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

.tour-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(150, 240, 255, 0.6), transparent);
}

.tour-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tour-eyebrow,
.tour-count {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(150, 226, 240, 0.66);
}

.tour-count {
  letter-spacing: 0.12em;
  color: rgba(190, 246, 255, 0.8);
  white-space: nowrap;
}

.tour-title {
  margin: 6px 0 5px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #eafcff;
  text-shadow: 0 0 22px rgba(110, 226, 255, 0.24);
}

.tour-copy {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.62;
  color: rgba(206, 234, 241, 0.86);
}

.tour-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.tour-keys:empty {
  display: none;
}

.tour-keys kbd {
  padding: 2px 7px 3px;
  border: 1px solid rgba(158, 240, 255, 0.24);
  border-radius: 5px;
  background: rgba(120, 220, 255, 0.08);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 250, 255, 0.92);
}

.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(130, 220, 255, 0.12);
}

.tour-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tour-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(150, 226, 240, 0.24);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.tour-dots i.done {
  background: rgba(150, 226, 240, 0.5);
}

.tour-dots i.on {
  background: #b6f4ff;
  box-shadow: 0 0 10px rgba(140, 236, 255, 0.7);
  transform: scale(1.35);
}

.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-skip,
.tour-next {
  border-radius: 999px;
  font: inherit;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.tour-skip {
  padding: 6px 4px;
  border: 0;
  background: none;
  color: rgba(160, 200, 210, 0.55);
}

.tour-skip:hover {
  color: rgba(220, 250, 255, 0.9);
}

.tour-next {
  padding: 7px 15px;
  border: 1px solid rgba(158, 245, 255, 0.34);
  background: linear-gradient(180deg, rgba(140, 232, 255, 0.2), rgba(120, 220, 255, 0.06));
  color: #ecfdff;
  box-shadow: 0 0 22px rgba(110, 226, 255, 0.14);
}

.tour-next:hover {
  border-color: rgba(190, 250, 255, 0.6);
  background: linear-gradient(180deg, rgba(170, 245, 255, 0.28), rgba(130, 230, 255, 0.1));
}

.tour-skip:focus-visible,
.tour-next:focus-visible {
  outline: 1px solid rgba(180, 245, 255, 0.8);
  outline-offset: 2px;
}

/* The readout a step is pointing at: a quiet bracket of light, not a modal
   highlight. It follows the panel when the rail is minimized. */
.tour-ring {
  position: fixed;
  border-radius: 13px;
  box-shadow:
    0 0 0 1px rgba(158, 245, 255, 0.6),
    0 0 0 7px rgba(120, 226, 255, 0.08),
    0 0 34px rgba(120, 226, 255, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.tour-ring.on {
  opacity: 1;
  animation: tour-pulse 2.6s ease-in-out infinite;
}

@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(158, 245, 255, 0.55), 0 0 0 7px rgba(120, 226, 255, 0.07), 0 0 26px rgba(120, 226, 255, 0.16); }
  50% { box-shadow: 0 0 0 1px rgba(198, 250, 255, 0.8), 0 0 0 10px rgba(120, 226, 255, 0.12), 0 0 40px rgba(120, 226, 255, 0.28); }
}

@media (max-height: 720px) {
  .tour-card {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 13px 15px 11px;
  }
  .tour-copy {
    font-size: 11px;
    line-height: 1.52;
  }
}

@media (max-width: 620px) {
  .tour-card {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 20px);
    padding: 13px 14px 11px;
    border-radius: 14px;
  }
  .tour-title {
    font-size: 14px;
  }
  .tour-copy {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-card,
  .tour-ring {
    transition: none;
  }
  .tour-ring.on {
    animation: none;
  }
}


/* viral arsenal — a weapon rack on the left rail
   Three payloads, one blind screen. The card has to read as biology, not as a
   toolbar: a capsid dot, a cooldown filament, and a warning line that changes
   colour with what the colony can actually feel. */
.rail-left .panel.arsenal {
  order: 2;
  padding: 11px 13px 12px;
}

.rail-left .panel.arsenal.armed {
  border-color: rgba(196, 168, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.22),
    inset 0 0 26px rgba(158, 128, 255, 0.09),
    0 24px 50px rgba(0, 0, 0, 0.42);
}

.rail-left .panel.arsenal.offline {
  opacity: 0.58;
}

.arsenal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 20px 8px 0;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(127, 232, 255, 0.09);
}

.arsenal-head .label {
  margin: 0;
  padding: 0;
  border: 0;
}

.arsenal-head b {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(157, 241, 255, 0.66);
  text-transform: uppercase;
  white-space: nowrap;
}

.arsenal.armed .arsenal-head b {
  color: #d8c6ff;
}

.arsenal.alarm .arsenal-head b {
  color: #ff9fae;
  animation: arsenal-alarm 1.4s ease-in-out infinite;
}

@keyframes arsenal-alarm {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.arsenal-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.virus-row {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  grid-template-areas:
    'dot body key'
    'dot note note'
    'meter meter meter';
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  padding: 6px 7px 7px;
  border: 1px solid rgba(150, 220, 236, 0.1);
  border-radius: 9px;
  background: rgba(8, 22, 27, 0.34);
  color: var(--dim);
  font: inherit;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 90ms ease;
}

.virus-row:hover,
.virus-row:focus-visible {
  border-color: rgba(196, 168, 255, 0.34);
  background: rgba(20, 34, 44, 0.6);
  outline: none;
}

.virus-row:active {
  transform: scale(0.985);
}

.virus-row.armed {
  border-color: rgba(196, 168, 255, 0.58);
  background: rgba(34, 28, 54, 0.6);
}

.virus-row.cooling {
  opacity: 0.66;
}

.virus-row.starved {
  opacity: 0.5;
}

.virus-dot {
  grid-area: dot;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: rgb(var(--tone));
  box-shadow:
    0 0 9px rgba(var(--tone), 0.65),
    inset 0 0 3px rgba(255, 255, 255, 0.7);
}

.virus-row.armed .virus-dot {
  border-radius: 50%;
  animation: virus-dot 1.2s ease-in-out infinite;
}

@keyframes virus-dot {
  0%, 100% { box-shadow: 0 0 7px rgba(var(--tone), 0.5); }
  50% { box-shadow: 0 0 16px rgba(var(--tone), 0.95); }
}

.virus-body {
  grid-area: body;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.virus-body b {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: rgba(226, 250, 255, 0.92);
  white-space: nowrap;
}

.virus-body em {
  overflow: hidden;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.1em;
  color: rgba(143, 182, 196, 0.68);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.virus-key {
  grid-area: key;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(150, 220, 236, 0.18);
  border-radius: 4px;
  font-size: 8px;
  color: rgba(184, 232, 242, 0.72);
}

.virus-row small {
  grid-area: note;
  justify-self: end;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: rgba(150, 196, 208, 0.62);
  white-space: nowrap;
}

.virus-row.armed small {
  color: #ddcaff;
}

.virus-row.starved small {
  color: rgba(255, 170, 150, 0.8);
}

.virus-meter {
  grid-area: meter;
  display: block;
  height: 2px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(127, 232, 255, 0.08);
}

.virus-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(126, 255, 214, 0.35), rgba(178, 128, 255, 0.9));
  transition: width 160ms linear;
}

.arsenal-infect {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(127, 232, 255, 0.09);
  border-radius: 8px;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 198, 210, 0.72);
  background: rgba(5, 14, 18, 0.28);
}

.arsenal-infect[data-tone='armed'],
.arsenal-infect[data-tone='launch'] {
  color: #ddcaff;
  border-color: rgba(196, 168, 255, 0.24);
}

.arsenal-infect[data-tone='latent'] {
  color: #a9ffe1;
  border-color: rgba(126, 255, 214, 0.24);
}

.arsenal-infect[data-tone='lytic'],
.arsenal-infect[data-tone='alarm'],
.arsenal-infect[data-tone='warn'] {
  color: #ffb2bc;
  border-color: rgba(255, 140, 156, 0.3);
  background: rgba(54, 12, 20, 0.3);
}

.arsenal-infect[data-tone='purge'] {
  color: #ffd9a8;
  border-color: rgba(255, 196, 120, 0.28);
}

.arsenal-screen {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 196, 120, 0.22);
  border-radius: 8px;
  background: rgba(32, 24, 14, 0.28);
  color: rgba(255, 224, 184, 0.86);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.arsenal-screen:hover,
.arsenal-screen:focus-visible {
  border-color: rgba(255, 212, 150, 0.46);
  background: rgba(52, 38, 20, 0.46);
  outline: none;
}

.arsenal-screen b {
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 220, 170, 0.3);
  border-radius: 4px;
  font-size: 8px;
  font-weight: 600;
}

.arsenal-screen span {
  flex: 1;
  text-align: left;
}

.arsenal-screen em {
  font-style: normal;
  font-size: 7.5px;
  color: rgba(255, 226, 184, 0.6);
}

.arsenal-screen.cooling {
  opacity: 0.55;
}

.arsenal-hint {
  margin: 7px 0 0;
  font-size: 7.5px;
  line-height: 1.55;
  letter-spacing: 0.11em;
  color: rgba(139, 178, 192, 0.55);
  text-transform: uppercase;
}

.arsenal-hint b {
  color: rgba(190, 236, 246, 0.8);
  font-weight: 500;
}

.arsenal-foot {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(127, 232, 255, 0.07);
  font-size: 7.5px;
  letter-spacing: 0.13em;
  color: rgba(139, 178, 192, 0.55);
  text-transform: uppercase;
}

.arsenal-foot b {
  color: rgba(200, 244, 252, 0.82);
  font-weight: 500;
}

.arsenal-foot span:nth-of-type(2) {
  margin-left: auto;
}

@media (max-height: 760px) {
  .arsenal-hint {
    display: none;
  }
  .virus-row {
    padding: 5px 6px 6px;
  }
}

.arsenal-infect[data-tone="good"] {
  color: #b9f7cf;
  text-shadow: 0 0 10px rgba(120, 255, 176, 0.35);
}

/* The rail's "building toward" line: the next node this lineage can afford. */
.stats-foot.landmark {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(125, 255, 176, 0.14);
}

.stats-foot.landmark b {
  font-weight: 500;
  color: #c9ffe7;
}

/* ---------------------------------------------------------- apocalypse auras */
/* A single warning aura system, used twice: the omen's title circle and the
   glass card's circular glyph. Both slots are the disc itself, so every mark
   rings the icon rather than tracing the bottom edge of the whole forecast. */

.event-glyph-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  isolation: isolate;
}

.event-glyph-wrap > .event-aura-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  border-radius: 50%;
  pointer-events: none;
}

.event-glyph-wrap > .event-glyph {
  position: relative;
  z-index: 1;
}

.event-aura {
  --u: 1;
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--tone, #8ee8ff);
  pointer-events: none;
}

.event-aura--sigil {
  inset: -48%;
  z-index: 1;
  --u: 1.05;
}

.event-aura--card {
  inset: -38%;
  --u: 0.95;
}

.event-aura--card .aura-ring {
  width: 88%;
  height: 88%;
  opacity: 0.55;
}

.event-aura--card .aura-ring--far {
  width: 110%;
  height: 110%;
  opacity: 0.26;
}

.omen-sigil > svg {
  position: relative;
  z-index: 2;
}

.omen-sigil .event-aura {
  --flame-scale: 0.95;
}

.event-banner {
  --flame-scale: 0.95;
}

.event-banner.final {
  --flame-scale: 1.12;
}

.event-banner[data-kind="live"] {
  --flame-scale: 1.55;
}

.aura-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee8ff) 30%, transparent);
  border-radius: 50%;
  opacity: 0.42;
  transform: translate(-50%, -50%);
  animation: aura-breathe 4.4s ease-in-out infinite;
}

.aura-ring--far {
  width: 94%;
  height: 94%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--tone, #8ee8ff) 20%, transparent);
  opacity: 0.2;
  animation-direction: reverse;
  animation-duration: 6.4s;
}

@keyframes aura-breathe {
  0%, 100% { opacity: 0.16; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 0.52; transform: translate(-50%, -50%) scale(1.025); }
}

@keyframes aura-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------- lactam */
.aura-lactam {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(10px * var(--u));
  height: calc(11px * var(--u));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 1px solid color-mix(in srgb, #e8f7ff 65%, var(--tone));
  background: linear-gradient(150deg, rgba(240, 253, 255, 0.75), color-mix(in srgb, var(--tone) 36%, rgba(7, 22, 29, 0.9)));
  filter: drop-shadow(0 0 calc(5px * var(--u)) color-mix(in srgb, var(--tone) 58%, transparent));
  transform: translate(-50%, -50%) rotate(var(--a)) scale(0.7);
  animation: aura-lactam-seal 3.4s ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes aura-lactam-seal {
  0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) rotate(var(--a)) scale(0.48); }
  42% { opacity: 0.92; transform: translate(-50%, -50%) rotate(calc(var(--a) + 12deg)) scale(1); }
  70% { opacity: 0.58; transform: translate(-50%, -50%) rotate(calc(var(--a) + 22deg)) scale(0.88); }
}

.event-banner[data-kind="live"] .aura-lactam {
  animation-duration: 1.7s;
  border-color: #f4fdff;
}

/* --------------------------------------------------------------- bleach */
.aura-caustic {
  position: absolute;
  inset: 13%;
  border: 1px dashed color-mix(in srgb, #f2ffe1 48%, var(--tone));
  border-radius: 50%;
  opacity: 0.32;
  filter: drop-shadow(0 0 8px color-mix(in srgb, #ecffd4 35%, transparent));
  animation: aura-spin 17s linear infinite;
}

.aura-bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--size) * var(--u));
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, #f4ffe8 62%, var(--tone));
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.9) 0 10%, transparent 26%),
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--tone) 30%, transparent), rgba(12, 28, 26, 0.08));
  box-shadow:
    inset 0 0 calc(4px * var(--u)) color-mix(in srgb, #f4ffe8 36%, transparent),
    0 0 calc(7px * var(--u)) color-mix(in srgb, var(--tone) 22%, transparent);
  transform: translate(-50%, 8px) scale(0.4);
  animation: aura-rise 3.9s ease-in infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes aura-rise {
  0% { opacity: 0; transform: translate(-50%, 9px) scale(0.35); }
  22% { opacity: 0.9; }
  62% { opacity: 0.52; }
  100% { opacity: 0; transform: translate(-50%, -19px) scale(1.15); }
}

.event-banner[data-kind="live"] .aura-bubble {
  animation-duration: 2.5s;
}

/* --------------------------------------------------------------- osmotic */
.aura-salt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(8px * var(--u));
  height: calc(8px * var(--u));
  border: 1px solid color-mix(in srgb, #fff4c7 55%, var(--tone));
  background: linear-gradient(135deg, rgba(255, 248, 206, 0.78), color-mix(in srgb, var(--tone) 28%, transparent));
  transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
  box-shadow: 0 0 calc(5px * var(--u)) color-mix(in srgb, var(--tone) 28%, transparent);
  animation: aura-salt-pulse 3.6s ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0.25;
}

@keyframes aura-salt-pulse {
  0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) rotate(45deg) scale(0.55); }
  48% { opacity: 0.88; transform: translate(-50%, -50%) rotate(45deg) scale(1.12); }
}

.aura-droplet {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(4px * var(--u));
  height: calc(6px * var(--u));
  border-radius: 50% 50% 50% 0;
  background: color-mix(in srgb, #fff1c7 54%, var(--tone));
  filter: drop-shadow(0 0 calc(4px * var(--u)) color-mix(in srgb, var(--tone) 34%, transparent));
  transform: translate(-50%, -50%) rotate(-45deg);
  animation: aura-droplet-pull 3.8s ease-in infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes aura-droplet-pull {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scale(0.4); }
  25% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 11px)) rotate(-45deg) scale(1.1); }
}

.event-banner[data-kind="live"] .aura-salt,
.event-banner[data-kind="live"] .aura-droplet {
  animation-duration: 2.3s;
}

/* --------------------------------------------------------------- uv */
.aura-uv-fan {
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--tone) 46%, transparent) 0 1.1deg,
    transparent 1.1deg 22.5deg
  );
  mask-image: radial-gradient(circle, transparent 30%, #000 46%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 46%, transparent 76%);
  opacity: 0.45;
  animation: aura-spin 26s linear infinite;
}

.aura-uv-core {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone) 64%, transparent), transparent 68%);
  filter: blur(calc(7px * var(--u)));
  opacity: 0.45;
  animation: aura-uv-pulse 2.7s ease-in-out infinite;
}

@keyframes aura-uv-pulse {
  0%, 100% { opacity: 0.24; transform: scale(0.88); }
  50% { opacity: 0.8; transform: scale(1.14); }
}

.aura-uv-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1px * var(--u));
  height: 47%;
  transform-origin: 50% 0;
  transform: translate(-50%, 0) rotate(var(--a));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 72%, transparent), transparent 80%);
  opacity: 0.3;
  animation: aura-ray 4s ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes aura-ray {
  0%, 100% { opacity: 0.16; }
  44% { opacity: 0.64; }
}

.event-banner[data-kind="live"] .aura-uv-fan {
  opacity: 0.82;
  animation-duration: 12s;
}

.event-banner[data-kind="live"] .aura-uv-core {
  opacity: 0.9;
}

/* --------------------------------------------------------------- oxidative */
.aura-heat {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, rgba(255, 138, 48, 0.5), transparent 64%);
  box-shadow: 0 0 calc(22px * var(--u)) rgba(255, 104, 31, 0.3);
  filter: blur(calc(8px * var(--u)));
  opacity: 0.66;
  animation: aura-heat 2.4s ease-in-out infinite;
}

@keyframes aura-heat {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 0.7; transform: scale(1.06); }
}

.aura-flame-wrap {
  position: absolute;
  left: 50%;
  top: 92%;
  width: calc(24px * var(--u));
  height: calc(42px * var(--u));
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 calc(7px * var(--u)) rgba(255, 113, 38, 0.58));
  animation: aura-flame 1.15s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

.aura-flame {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aura-flame__outer {
  fill: color-mix(in srgb, #ff5d1a 78%, var(--tone));
  opacity: 0.88;
}

.aura-flame__inner {
  fill: #ffe2a0;
  opacity: 0.92;
}

@keyframes aura-flame {
  0% {
    opacity: 0.62;
    transform: translate(-50%, -100%) scale(calc(var(--flame-scale) * 0.88)) rotate(-2.5deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(calc(var(--flame-scale) * 1.08)) rotate(2.5deg);
  }
}

.event-aura--card .aura-flame-wrap {
  top: 98%;
}

.event-banner[data-kind="live"] .aura-flame-wrap {
  animation-duration: 0.62s;
}

.event-banner[data-kind="clearing"] {
  --flame-scale: 0.46;
}

.event-banner[data-kind="clearing"] .aura-heat {
  opacity: 0;
  transition: opacity 420ms ease;
}

.event-banner[data-kind="clearing"] .aura-flame-wrap {
  animation: aura-flame-out 560ms ease-in both;
}

@keyframes aura-flame-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(calc(var(--flame-scale) * 1.6)) rotate(0);
  }
  55% {
    opacity: 0.72;
    transform: translate(-50%, -100%) scale(calc(var(--flame-scale) * 0.9)) rotate(-1.2deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-100% + 7px)) scale(calc(var(--flame-scale) * 0.24)) rotate(1.4deg);
  }
}

/* --------------------------------------------------------------- desiccation */
.aura-crack-ring {
  position: absolute;
  inset: 11%;
  border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent);
  border-radius: 44% 56% 52% 48% / 49% 43% 57% 51%;
  box-shadow:
    0 0 calc(18px * var(--u)) color-mix(in srgb, var(--tone) 14%, transparent),
    inset 0 0 calc(20px * var(--u)) color-mix(in srgb, var(--tone) 8%, transparent);
  opacity: 0.48;
  animation: aura-crack-ring 5.4s ease-in-out infinite;
}

@keyframes aura-crack-ring {
  0%, 100% { opacity: 0.18; transform: rotate(-1deg) scale(0.97); }
  50% { opacity: 0.5; transform: rotate(1.5deg) scale(1.03); }
}

.aura-crack {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(32px * var(--u));
  height: calc(1.3px * var(--u));
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff4d0 72%, var(--tone)), transparent);
  filter: drop-shadow(0 0 calc(3px * var(--u)) color-mix(in srgb, var(--tone) 32%, transparent));
  transform: translate(-50%, -50%) rotate(var(--a)) scaleX(0.45);
  animation: aura-crack-open 4.6s ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0.3;
}

@keyframes aura-crack-open {
  0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) rotate(var(--a)) scaleX(0.38); }
  42% { opacity: 0.86; transform: translate(-50%, -50%) rotate(var(--a)) scaleX(1); }
}

.aura-dust {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(2.8px * var(--u));
  height: calc(2.8px * var(--u));
  border-radius: 50%;
  background: color-mix(in srgb, #fff2ce 70%, var(--tone));
  box-shadow: 0 0 calc(6px * var(--u)) color-mix(in srgb, var(--tone) 40%, transparent);
  animation: aura-dust 4.8s linear infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes aura-dust {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  22% { opacity: 0.78; }
  100% { opacity: 0; transform: translate(calc(-50% + 8px), calc(-50% + 19px)) scale(0.25); }
}

.event-banner[data-kind="live"] .aura-crack {
  animation-duration: 2.7s;
}

/* --------------------------------------------------------------- hunter bloom */
.aura-hunter-origin {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  width: calc(20px * var(--u));
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--tone) 62%, #fff);
  border-radius: 50%;
  box-shadow:
    0 0 calc(10px * var(--u)) color-mix(in srgb, var(--tone) 42%, transparent),
    inset 0 0 calc(7px * var(--u)) color-mix(in srgb, var(--tone) 28%, transparent);
  transform: translate(-50%, -50%) scale(0.2);
  animation: aura-hunter-origin 3.1s ease-out infinite;
  opacity: 0;
}

@keyframes aura-hunter-origin {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
  24% { opacity: 0.8; }
  60% { opacity: 0.28; transform: translate(-50%, -50%) scale(1.15); }
  82%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.72); }
}

.aura-hunter {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  width: calc(31px * var(--u));
  height: calc(13px * var(--u));
  color: var(--tone);
  transform: translate(-50%, -50%) rotate(var(--a));
  animation: aura-hunter-swim var(--dur, 3.2s) cubic-bezier(0.18, 0.72, 0.3, 1) infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

.aura-hunter svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aura-hunter-body,
.aura-hunter-flag {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 calc(4px * var(--u)) color-mix(in srgb, var(--tone) 62%, transparent));
}

.aura-hunter circle {
  fill: currentColor;
}

@keyframes aura-hunter-swim {
  0% {
    left: var(--sx, 50%);
    top: var(--sy, 50%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22) rotate(var(--a));
  }
  16% { opacity: 1; }
  72% { opacity: 0.92; }
  100% {
    left: var(--x);
    top: var(--y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1) rotate(var(--a));
  }
}

.event-banner[data-kind="live"] .aura-hunter {
  animation-duration: 1.9s;
}

.event-banner[data-kind="live"] .aura-hunter-origin {
  animation-duration: 1.9s;
}

/* --------------------------------------------------------------- bacteriophage */
.aura-phage {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(16px * var(--u));
  height: calc(18px * var(--u));
  color: var(--tone);
  transform: translate(-50%, -50%);
  animation: aura-phage-drop 4.8s ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

.aura-phage svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: color-mix(in srgb, var(--tone) 12%, transparent);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 calc(5px * var(--u)) color-mix(in srgb, var(--tone) 58%, transparent));
}

@keyframes aura-phage-drop {
  0% { top: -14%; opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(0.7); }
  28% { opacity: 1; }
  68% { top: var(--y); opacity: 0.92; transform: translate(-50%, -50%) rotate(3deg) scale(1); }
  100% { top: var(--y); opacity: 0; transform: translate(-50%, -50%) translateY(9px) rotate(8deg) scale(0.84); }
}

.event-banner[data-kind="live"] .aura-phage {
  animation-duration: 2.8s;
}

/* The last ten seconds of a warning run hotter than the first fifty. */
.event-banner.final .aura-ring {
  border-color: color-mix(in srgb, var(--tone) 68%, white);
  opacity: 0.72;
}

.event-banner.final .aura-lactam,
.event-banner.final .aura-bubble,
.event-banner.final .aura-salt,
.event-banner.final .aura-crack,
.event-banner.final .aura-hunter,
.event-banner.final .aura-phage {
  animation-duration: 2.1s;
}

.event-banner[data-kind="live"] .aura-ring {
  border-color: color-mix(in srgb, var(--tone) 58%, white);
  opacity: 0.62;
  animation-duration: 2.4s;
}

@media (prefers-reduced-motion: reduce) {
  .event-aura > :not(.aura-ring) {
    display: none;
  }

  .event-aura .aura-ring {
    animation: none;
    opacity: 0.36;
  }
}

/* --------------------------------------------------------- lineage archive */

.lineage-archive {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(74px, auto) minmax(0, 1.75fr) minmax(140px, 0.65fr);
  align-items: center;
  gap: 14px;
  margin: 13px 2px 0;
  padding: 10px 12px 9px;
  overflow: hidden;
  border: 1px solid rgba(146, 216, 255, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(100% 150% at 4% -40%, rgba(122, 229, 239, 0.12), rgba(6, 18, 22, 0) 58%),
    linear-gradient(100deg, rgba(8, 25, 30, 0.68), rgba(8, 17, 25, 0.54));
  box-shadow: inset 0 1px 0 rgba(219, 255, 255, 0.035);
}

.lineage-archive::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 18%, rgba(127, 232, 255, 0.045) 48%, transparent 72%);
  opacity: 0.8;
}

.archive-ident {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.archive-sigil {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(139, 226, 239, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(231, 255, 255, 0.82), rgba(90, 207, 222, 0.55) 30%, rgba(16, 58, 67, 0.3) 66%),
    rgba(8, 30, 35, 0.8);
  box-shadow: 0 0 18px rgba(93, 220, 238, 0.15), inset 0 0 12px rgba(155, 250, 255, 0.13);
}

.archive-sigil::before,
.archive-sigil::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(156, 239, 249, 0.18);
  border-radius: 50%;
}

.archive-sigil::before { inset: 5px; }
.archive-sigil::after { inset: -5px; border-color: rgba(156, 239, 249, 0.08); }

.archive-sigil i {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #d5ffff;
  box-shadow: 0 0 9px rgba(181, 252, 255, 0.8);
}

.archive-title { min-width: 0; }

.archive-title p {
  margin: 0 0 2px;
  font-size: 6.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(138, 205, 214, 0.58);
}

.archive-title h2 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.archive-title h2 b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c7fbff;
}

.archive-title h2 span { color: rgba(137, 204, 214, 0.38); }

.archive-title h2 em {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(151, 204, 213, 0.6);
}

.archive-rank-track {
  width: min(150px, 100%);
  height: 2px;
  margin: 6px 0 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(127, 232, 255, 0.09);
}

.archive-rank-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #70e8f5, #c8bdff);
  box-shadow: 0 0 9px rgba(124, 232, 247, 0.45);
}

.archive-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 6.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: rgba(143, 190, 197, 0.58);
}

.archive-bank {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  min-width: 74px;
  padding-left: 12px;
  border-left: 1px solid rgba(127, 232, 255, 0.1);
}

.archive-bank span {
  font-size: 6px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(155, 205, 212, 0.52);
}

.archive-bank b {
  margin: 1px 0 0;
  font-size: 23px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: #d9fbff;
  text-shadow: 0 0 18px rgba(131, 238, 250, 0.16);
  font-variant-numeric: tabular-nums;
}

.archive-bank small {
  margin-top: 3px;
  font-size: 6px;
  letter-spacing: 0.03em;
  color: rgba(143, 190, 197, 0.48);
  white-space: nowrap;
}

.archive-perks {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 6px;
  min-width: 0;
}

.archive-perk {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px 6px;
  text-align: left;
  border: 1px solid rgba(129, 210, 226, 0.13);
  border-radius: 8px;
  background: rgba(4, 17, 22, 0.5);
  color: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.archive-perk:hover:not(:disabled),
.archive-perk:focus-visible:not(:disabled) {
  outline: none;
  border-color: rgba(143, 243, 255, 0.38);
  background: rgba(14, 44, 51, 0.66);
  transform: translateY(-1px);
}

.archive-perk:disabled {
  cursor: default;
  opacity: 0.58;
}

.archive-perk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
}

.archive-perk-head b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 7.5px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(210, 251, 255, 0.9);
}

.archive-perk-head em {
  flex: 0 0 auto;
  font-size: 6px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(151, 204, 213, 0.62);
}

.archive-perk small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 6px;
  line-height: 1.35;
  white-space: nowrap;
  color: rgba(143, 190, 197, 0.64);
}

.archive-perk-price {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  font-size: 6.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: #a9f7d0;
}

.archive-perk:disabled .archive-perk-price { color: rgba(184, 211, 195, 0.6); }

.archive-note {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 6.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(143, 190, 197, 0.5);
}

.archive-note[data-tone='error'] { color: rgba(255, 158, 158, 0.9); }
.archive-note[data-tone='good'] { color: rgba(159, 255, 202, 0.9); }
.archive-note[data-tone='busy'] { color: rgba(186, 227, 255, 0.78); }

#lineage-archive[data-loading='true'] .archive-perks { opacity: 0.55; }

.seal-spoils {
  margin: -8px 0 18px;
  padding: 9px 11px;
  border: 1px solid rgba(181, 238, 173, 0.18);
  border-radius: 8px;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(209, 255, 201, 0.9);
}

.seal-spoils[hidden] { display: none; }
.seal-spoils[data-tone='error'] { border-color: rgba(255, 149, 149, 0.25); color: rgba(255, 184, 184, 0.9); }
.seal-spoils[data-tone='busy'] { border-color: rgba(159, 222, 255, 0.2); color: rgba(190, 236, 255, 0.8); }

@media (max-width: 1120px) {
  .lineage-archive {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
  }

  .archive-perks {
    grid-column: 1 / -1;
  }

  .archive-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .archive-perks { grid-template-columns: 1fr; }
  .archive-sigil { display: none; }
  .archive-bank { justify-items: end; }
  .lineage-archive { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 10px; }
}


/* ------------------------------------------------------------- spore store */

.archive-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.archive-store-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(159, 238, 255, 0.72);
  font: inherit;
  font-size: 6.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(159, 238, 255, 0.24);
  text-underline-offset: 3px;
  cursor: pointer;
}

.archive-store-toggle:hover,
.archive-store-toggle:focus-visible {
  color: #d3fbff;
  text-decoration-color: rgba(159, 238, 255, 0.62);
  outline: none;
}

.spore-store {
  position: relative;
  margin: 10px 2px 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(177, 190, 255, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(110% 160% at 96% -30%, rgba(162, 146, 255, 0.12), rgba(6, 18, 22, 0) 60%),
    linear-gradient(100deg, rgba(8, 22, 31, 0.72), rgba(14, 16, 30, 0.6));
  box-shadow: inset 0 1px 0 rgba(219, 255, 255, 0.035);
}

.spore-store[hidden] { display: none; }

.spore-store-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.spore-store-head p {
  margin: 0 0 3px;
  font-size: 6.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(177, 181, 232, 0.65);
}

.spore-store-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.09em;
  color: #e2e9ff;
}

.spore-store-head small {
  display: block;
  margin-top: 4px;
  font-size: 6.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(160, 177, 201, 0.6);
}

.spore-store-close {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid rgba(180, 193, 255, 0.16);
  border-radius: 6px;
  background: rgba(8, 13, 25, 0.5);
  color: rgba(196, 209, 238, 0.7);
  font: inherit;
  font-size: 6.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.spore-store-close:hover,
.spore-store-close:focus-visible {
  border-color: rgba(199, 209, 255, 0.4);
  color: #e2e9ff;
  outline: none;
}

.spore-store-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.spore-pack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid rgba(164, 176, 247, 0.18);
  border-radius: 8px;
  background: rgba(8, 12, 27, 0.56);
  color: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.spore-pack:hover:not(:disabled),
.spore-pack:focus-visible:not(:disabled) {
  border-color: rgba(185, 194, 255, 0.5);
  background: rgba(28, 30, 56, 0.7);
  transform: translateY(-1px);
  outline: none;
}

.spore-pack:disabled {
  cursor: default;
  opacity: 0.56;
}

.spore-pack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.spore-pack-head b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e1e7ff;
}

.spore-pack-head em {
  flex: 0 0 auto;
  font-size: 6px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: rgba(180, 190, 235, 0.5);
}

.spore-pack strong {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #b7ffd7;
  font-variant-numeric: tabular-nums;
}

.spore-pack small {
  grid-column: 1 / -1;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 6.5px;
  line-height: 1.4;
  white-space: nowrap;
  color: rgba(165, 185, 205, 0.65);
}

.spore-pack-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #e6dcff;
  font-variant-numeric: tabular-nums;
}

.spore-store-note {
  margin: 9px 0 0;
  font-size: 6.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(166, 184, 204, 0.56);
}

.spore-store-note[data-tone='good'] { color: rgba(159, 255, 202, 0.9); }
.spore-store-note[data-tone='error'] { color: rgba(255, 158, 158, 0.9); }
.spore-store-note[data-tone='busy'] { color: rgba(186, 227, 255, 0.78); }

@media (max-width: 640px) {
  .spore-store-packs { grid-template-columns: 1fr; }
  .spore-store-head { gap: 8px; }
  .spore-store-head h2 { font-size: 12px; }
}

/* the three value tiers: the middle pack is the deliberate best first buy */
.spore-store-packs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spore-pack.is-featured {
  border-color: rgba(239, 211, 143, 0.46);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(255, 219, 139, 0.12), rgba(10, 14, 28, 0) 62%),
    rgba(21, 20, 33, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.09),
    0 0 18px rgba(244, 202, 118, 0.06);
}

.spore-pack.is-featured:hover:not(:disabled),
.spore-pack.is-featured:focus-visible:not(:disabled) {
  border-color: rgba(255, 225, 158, 0.74);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(255, 224, 150, 0.18), rgba(10, 14, 28, 0) 62%),
    rgba(31, 28, 42, 0.86);
}

.spore-pack-tag {
  padding: 1px 4px;
  border: 1px solid rgba(173, 190, 235, 0.18);
  border-radius: 3px;
  color: rgba(198, 211, 245, 0.66);
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.spore-pack.is-featured .spore-pack-tag {
  border-color: rgba(247, 215, 139, 0.3);
  color: rgba(255, 232, 173, 0.92);
}

.spore-pack[data-spore-pack='archive'] {
  grid-column: 1 / -1;
}

.spore-pack[data-spore-pack='archive'] strong {
  font-size: 19px;
}

.spore-pack[data-spore-pack='archive'] small {
  white-space: normal;
}

.spore-pack.is-featured strong {
  color: #f7e4a8;
}

.spore-pack::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 8px 0 0 8px;
  background: transparent;
}

.spore-pack {
  position: relative;
  overflow: hidden;
}

.spore-pack.is-featured::before {
  background: linear-gradient(180deg, rgba(255, 226, 152, 0.82), rgba(255, 198, 98, 0.18));
}

.spore-pack::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.035) 46%, transparent 62%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.spore-pack:hover:not(:disabled)::after {
  opacity: 1;
}

.spore-store-head small {
  max-width: 290px;
}

@media (max-width: 640px) {
  .spore-store-packs { grid-template-columns: 1fr; }
  .spore-pack[data-spore-pack='archive'] { grid-column: auto; }
  .spore-pack[data-spore-pack='archive'] strong { font-size: 17px; }
  .spore-pack small { white-space: normal; }
}

/* ---------------------------------------------------------------- paid beta */

/* The gate arrives after the account card, so it borrows the same glass and
   type but changes the temperature: agar gold against the field's cold cyan. */
.beta-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 620ms ease,
    transform 950ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 620ms;
}

#overlay[data-stage='paywall'] .beta-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 120ms, 120ms, 0s;
}

#overlay[data-stage='paywall'] .identity-stage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-18px) scale(0.985);
}

#overlay[data-stage='paywall'] .intro-stage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-24px) scale(0.985);
}

#overlay[data-stage='paywall'] .intro-veil {
  opacity: 1;
  visibility: visible;
  transform: scale(1.055);
  transition:
    opacity 760ms cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 3000ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

/* The identity screen cross-fades to the soft half-resolution film. The paywall
   is a different stage, so the soft layer and its dim must be re-asserted here;
   otherwise the sharp title canvas shows through behind the receipt. */
#overlay[data-stage='paywall'] #intro-veil-soft,
#overlay[data-stage='paywall'] .intro-veil::before {
  opacity: 1;
}

#overlay[data-stage='paywall'] .intro-veil::after {
  opacity: 0.96;
}

.beta-card {
  position: relative;
  width: min(760px, 94vw);
  max-height: calc(100vh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 30px 36px 26px;
  border: 1px solid rgba(244, 211, 147, 0.36);
  border-radius: 20px;
  background:
    radial-gradient(110% 90% at 92% -16%, rgba(255, 223, 157, 0.2), rgba(255, 223, 157, 0) 58%),
    radial-gradient(85% 90% at -4% 108%, rgba(67, 210, 208, 0.15), rgba(67, 210, 208, 0) 64%),
    linear-gradient(152deg, rgba(18, 38, 38, 0.985), rgba(4, 11, 14, 0.992) 58%, rgba(3, 7, 10, 1));
  box-shadow:
    0 38px 120px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 235, 191, 0.035) inset,
    0 1px 0 rgba(255, 248, 222, 0.15) inset,
    0 0 80px rgba(255, 205, 120, 0.055);
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 211, 147, 0.34) transparent;
  text-align: left;
}

.beta-card::-webkit-scrollbar { width: 5px; }
.beta-card::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(244, 211, 147, 0.3); }

#overlay[data-stage='paywall'] .beta-card {
  animation: beta-in 880ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

.beta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(255, 228, 168, 0.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 14%, rgba(157, 241, 255, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 78%, rgba(255, 218, 146, 0.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 33% 86%, rgba(157, 241, 255, 0.6) 0 1px, transparent 1.7px);
  background-size: 190px 170px, 240px 220px, 210px 260px, 280px 200px;
  animation: beta-drift 26s ease-in-out infinite alternate;
}

.beta-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 21%, rgba(255, 243, 207, 0.045) 45%, transparent 63%),
    linear-gradient(0deg, rgba(255, 218, 146, 0.06), transparent 16%);
}

.beta-card > * { position: relative; z-index: 1; }

.beta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(244, 211, 147, 0.14);
}

#overlay .beta-back {
  position: static;
  top: auto;
  right: auto;
  padding: 8px 13px;
  border-color: rgba(244, 211, 147, 0.32);
  background: rgba(11, 19, 18, 0.78);
  color: rgba(255, 235, 194, 0.92);
  font-size: 10.5px;
}

#overlay .beta-back:hover {
  border-color: rgba(255, 230, 176, 0.62);
  background: rgba(45, 35, 20, 0.72);
  color: #fff8e6;
}

.beta-tag {
  order: 2;
  color: rgba(244, 211, 147, 0.9);
  font-size: 10.5px;
  letter-spacing: 0.22em;
}

.beta-tag::before {
  width: 20px;
  background: linear-gradient(90deg, rgba(255, 214, 139, 0.9), rgba(255, 214, 139, 0));
}

.beta-title {
  margin: 24px 0 0;
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.065em;
  color: #f1fbff;
  text-shadow: 0 0 46px rgba(255, 219, 143, 0.12);
}

.beta-title em {
  font-style: normal;
  color: #f4d393;
  text-shadow: 0 0 40px rgba(255, 207, 111, 0.24);
}

.beta-copy {
  max-width: 64ch;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(213, 229, 226, 0.9);
}

.beta-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
}

.beta-intro .beta-copy { margin: 0; }

.beta-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 211, 147, 0.3);
  border-radius: 12px;
  background: rgba(2, 9, 11, 0.82);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 236, 193, 0.035) inset;
}

.beta-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 7, 9, 0.02) 38%, rgba(2, 7, 9, 0.92) 100%);
}

.beta-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.beta-preview figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(229, 242, 235, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.beta-live-dot {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b8f4ce;
  box-shadow: 0 0 9px rgba(184, 244, 206, 0.72);
}

.beta-offer {
  display: grid;
  grid-template-columns: minmax(215px, 0.78fr) minmax(0, 1.22fr);
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid rgba(244, 211, 147, 0.2);
  border-radius: 14px;
  background: rgba(2, 9, 11, 0.38);
}

.beta-price-block {
  position: relative;
  padding: 24px 26px 22px;
  border-right: 1px solid rgba(244, 211, 147, 0.14);
  background:
    radial-gradient(90% 100% at 18% 10%, rgba(255, 219, 145, 0.14), rgba(255, 219, 145, 0) 70%),
    linear-gradient(145deg, rgba(64, 51, 27, 0.44), rgba(7, 17, 17, 0.5));
}

.beta-price-kicker,
.beta-perks-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
}

.beta-price-kicker { color: rgba(255, 224, 158, 0.88); }

.beta-price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-top: 9px;
}

.beta-currency {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 224, 158, 0.9);
}

.beta-price b {
  font-size: clamp(58px, 7vw, 80px);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: #fff0c8;
  text-shadow: 0 0 38px rgba(255, 208, 112, 0.18);
}

.beta-price-meta {
  display: block;
  margin-top: 13px;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(244, 211, 147, 0.64);
}

.beta-perks-block { padding: 24px 26px 22px; }

.beta-perks-label { color: rgba(157, 241, 255, 0.7); }

.beta-perks {
  display: grid;
  gap: 11px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.beta-perks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.015em;
  color: rgba(219, 235, 231, 0.9);
}

.beta-perks i {
  position: relative;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border: 1px solid rgba(255, 218, 146, 0.7);
  border-radius: 50%;
  background: rgba(255, 218, 146, 0.06);
  box-shadow: 0 0 10px rgba(255, 207, 111, 0.12);
}

.beta-perks i::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2.5px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid #ffe0a0;
  border-bottom: 1.5px solid #ffe0a0;
  transform: rotate(42deg);
}

.beta-perks li.beta-perk-title {
  align-items: center;
  margin: 1px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 218, 146, 0.2);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(255, 218, 146, 0.1), rgba(127, 232, 255, 0.045));
}

.beta-perks li.beta-perk-title > i {
  margin-top: 0;
}

.beta-role-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 2px 6px 2px 5px;
  border: 1px solid rgba(255, 220, 150, 0.52);
  border-radius: 999px;
  color: #fff3c8;
  background: linear-gradient(90deg, rgba(255, 220, 145, 0.22), rgba(135, 255, 224, 0.12));
  box-shadow:
    0 0 14px rgba(255, 215, 130, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 7px rgba(255, 221, 145, 0.6);
  vertical-align: -1px;
}

.beta-role-preview::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe0a0;
  box-shadow: 0 0 7px 2px rgba(255, 214, 130, 0.65);
}

.beta-status {
  min-height: 1.4em;
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: rgba(204, 220, 216, 0.78);
  transition: color 180ms ease;
}

.beta-status[data-tone='good'] { color: #b8f4ce; }
.beta-status[data-tone='error'] { color: #ffad95; }
.beta-status[data-tone='busy'] { color: #f4d393; }

.beta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
  padding: 0;
  border: 0;
}

#overlay .beta-actions .go.beta-unlock {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 17px 24px 16px;
  border-color: rgba(255, 229, 168, 0.7);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 244, 207, 1), rgba(239, 196, 108, 0.98));
  color: #231707;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 12px 32px rgba(213, 153, 54, 0.22),
    0 0 34px rgba(255, 207, 111, 0.14);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-shadow: none;
  animation: none;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

#overlay .beta-actions .go.beta-unlock:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255, 244, 210, 0.95);
  background: linear-gradient(180deg, rgba(255, 249, 225, 1), rgba(246, 207, 128, 1));
  color: #231707;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 16px 40px rgba(213, 153, 54, 0.28),
    0 0 42px rgba(255, 207, 111, 0.2);
}

#overlay .beta-actions .go.beta-unlock:focus-visible {
  outline: 2px solid rgba(255, 226, 158, 0.92);
  outline-offset: 4px;
}

#overlay .beta-actions .go.beta-unlock:disabled {
  opacity: 0.44;
  cursor: not-allowed;
  filter: saturate(0.55);
}

.beta-secure {
  margin: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(190, 212, 207, 0.64);
}

.beta-fine {
  max-width: 68ch;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(244, 211, 147, 0.1);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.015em;
  color: rgba(183, 204, 199, 0.7);
}

#overlay[data-stage='paywall'] .beta-ring {
  animation: beta-ring 1250ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
}

@keyframes beta-in {
  0% { opacity: 0; transform: translateY(26px) scale(0.975); filter: blur(7px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes beta-ring {
  0% { opacity: 0.8; transform: scale(0.995); }
  100% { opacity: 0; transform: scale(1.018); }
}

@keyframes beta-drift {
  0% { transform: translate3d(-9px, 4px, 0); }
  100% { transform: translate3d(9px, -7px, 0); }
}

@media (max-width: 700px) {
  .beta-card {
    width: min(560px, 94vw);
    padding: 24px 22px 22px;
  }

  .beta-title { font-size: clamp(31px, 7vw, 43px); }
  .beta-intro { grid-template-columns: 1fr; gap: 16px; }
  .beta-copy { font-size: 13px; }
  .beta-offer { grid-template-columns: 1fr; }
  .beta-price-block {
    padding: 20px 22px 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 211, 147, 0.14);
  }
  .beta-price b { font-size: clamp(56px, 14vw, 72px); }
  .beta-perks-block { padding: 19px 22px 20px; }
  .beta-perks li { font-size: 12.5px; }
}

@media (max-width: 430px) {
  .beta-card { padding: 20px 16px 18px; }
  .beta-top { gap: 10px; }
  .beta-tag { font-size: 10px; letter-spacing: 0.18em; }
  .beta-title { font-size: clamp(29px, 9.3vw, 37px); letter-spacing: 0.045em; }
  .beta-copy { font-size: 12.5px; line-height: 1.6; }
  .beta-price-block { padding: 18px; }
  .beta-perks-block { padding: 17px 18px 18px; }
  .beta-perks li { font-size: 12.5px; gap: 9px; }
  .beta-price b { font-size: 58px; }
  .beta-status { font-size: 11.5px; }
  #overlay .beta-actions .go.beta-unlock { font-size: 11.5px; letter-spacing: 0.18em; }
  .beta-fine { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .beta-stage,
  #overlay[data-stage='paywall'] .beta-stage { transition-duration: 1ms; }
  #overlay[data-stage='paywall'] .beta-card,
  .beta-card::before,
  #overlay[data-stage='paywall'] .beta-ring { animation: none; }
}

/* monthly spore plans and Stripe billing portal */
.spore-store-recurring {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(177, 190, 255, 0.12);
}

.spore-store-recurring-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spore-store-recurring-head > span {
  font-size: 6.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(177, 181, 232, 0.65);
}

.spore-store-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 7px;
}

.spore-store-plans .spore-pack[data-spore-plan='archive-monthly'] {
  grid-column: 1 / -1;
}

.spore-store-billing {
  margin: 8px 0 0;
  font-size: 6.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(186, 227, 255, 0.78);
}

.spore-store-billing[hidden] { display: none; }

@media (max-width: 640px) {
  .spore-store-packs,
  .spore-store-plans { grid-template-columns: 1fr; }
  .spore-store-plans .spore-pack[data-spore-plan='archive-monthly'] { grid-column: auto; }
}


/* ---------------------------------------------------- plate position / secrets */
/* The coordinate strip is part of the bottom band, not a floating card: it
   stays in the same place as the hint and keys, so the player always has a
   stable read on the shared coordinate plane. */
.field-coord {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 11px;
  max-width: min(720px, 100%);
  padding: 5px 12px 6px;
  border: 1px solid rgba(127, 232, 255, 0.15);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(8, 29, 37, 0.68), rgba(3, 12, 17, 0.52));
  box-shadow:
    inset 0 1px 0 rgba(226, 252, 255, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  font-size: 8.5px;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(123, 165, 177, 0.86);
  white-space: nowrap;
  pointer-events: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.field-coord.signal {
  border-color: color-mix(in srgb, var(--tone, #8ee3ff) 42%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(226, 252, 255, 0.1),
    0 0 20px color-mix(in srgb, var(--tone, #8ee3ff) 13%, transparent);
}

.field-coord.charted {
  border-color: color-mix(in srgb, var(--tone, #8ee3ff) 55%, transparent);
}

.field-coord .coord-label {
  color: rgba(127, 232, 255, 0.43);
  letter-spacing: 0.23em;
}

.coord-axis,
.coord-region,
.coord-secrets {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.coord-axis em,
.coord-secrets em {
  font-style: normal;
  letter-spacing: 0.13em;
  color: rgba(111, 154, 167, 0.7);
}

.coord-axis b {
  min-width: 4.2em;
  color: #e5fbff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-align: right;
}

.coord-region {
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(127, 232, 255, 0.14);
  color: rgba(172, 219, 229, 0.82);
  letter-spacing: 0.1em;
}

.coord-region i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tone, #8ee3ff);
  box-shadow: 0 0 9px var(--tone, #8ee3ff);
  opacity: 0.74;
}

.field-coord.signal .coord-region {
  color: var(--tone, #8ee3ff);
}

.field-coord.signal .coord-region i {
  animation: coord-signal 1.7s ease-in-out infinite;
}

.coord-secrets {
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid rgba(127, 232, 255, 0.14);
}

.coord-secrets b {
  color: rgba(191, 240, 249, 0.86);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* A secret charted during the run gets a small card, not the event banner:
   field weather already owns the top of the screen. */
.secret-toast {
  display: none;
  align-items: center;
  gap: 10px;
  max-width: min(560px, 100%);
  padding: 7px 13px 8px;
  border: 1px solid color-mix(in srgb, var(--tone, #8ee3ff) 44%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(5, 22, 28, 0.84), rgba(2, 9, 13, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(236, 253, 255, 0.14),
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 20px color-mix(in srgb, var(--tone, #8ee3ff) 11%, transparent);
  backdrop-filter: blur(13px) saturate(145%);
  -webkit-backdrop-filter: blur(13px) saturate(145%);
  text-align: left;
  text-transform: none;
  pointer-events: none;
}

.secret-toast.show {
  display: flex;
  animation: secret-arrive 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.secret-toast-mark {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone, #8ee3ff);
  box-shadow: 0 0 16px var(--tone, #8ee3ff);
}

.secret-toast-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.secret-toast-body em {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tone, #8ee3ff);
}

.secret-toast-body b {
  overflow: hidden;
  color: #effeff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.secret-toast-body span {
  overflow: hidden;
  color: rgba(174, 217, 225, 0.82);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes coord-signal {
  0%, 100% { opacity: 0.48; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes secret-arrive {
  from { opacity: 0; transform: translateY(7px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .field-coord {
    gap: 4px 8px;
    padding: 5px 8px;
    font-size: 8px;
  }

  .field-coord .coord-label {
    display: none;
  }

  .coord-region,
  .coord-secrets {
    padding-left: 8px;
  }

  .secret-toast {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .field-coord {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    /* The HUD's hide control is fixed to this edge; reserve its lane rather
       than letting it sit on top of the last coordinate or the secret count. */
    padding-right: 92px;
  }

  .coord-secrets em {
    display: none;
  }

  .secret-toast-body span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-coord.signal .coord-region i,
  .secret-toast.show {
    animation: none;
  }
}


/* The footer uses the two desktop rails as its gutters. On a phone those rails
   are wider than the viewport, so the band collapses to zero width and every
   child inside it has to wrap one character at a time. Give the band the full
   glass width below the rail breakpoint. */
@media (max-width: 760px) {
  .hud-foot {
    left: 12px;
    right: 12px;
    bottom: 10px;
    gap: 5px;
  }

  .field-coord {
    width: auto;
    max-width: 100%;
  }
}

/* The first-run card is useful, but it must not cover the coordinate strip that
   is supposed to be always readable. Lift it clear of the footer on both the
   desktop frame and the phone frame. */
@media (min-width: 621px) {
  .tour-card {
    bottom: calc(172px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 620px) {
  .tour-card {
    bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------- legal / beta consent */

.identity-legal {
  margin: 13px 0 0;
  color: rgba(167, 203, 203, 0.66);
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 0.045em;
  text-align: left;
}

.identity-legal a {
  color: rgba(240, 208, 139, 0.86);
  text-decoration-color: rgba(240, 208, 139, 0.32);
  text-underline-offset: 2px;
}

.identity-legal a:hover,
.identity-legal a:focus-visible {
  color: #ffe9b6;
  text-decoration-color: currentColor;
}

.beta-fine a {
  color: rgba(240, 208, 139, 0.82);
  text-decoration-color: rgba(240, 208, 139, 0.28);
  text-underline-offset: 2px;
}

.beta-fine a:hover,
.beta-fine a:focus-visible {
  color: #ffe9b6;
  text-decoration-color: currentColor;
}

.beta-legal {
  margin-top: 22px;
  padding: 19px 20px 18px;
  border: 1px solid rgba(244, 211, 147, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(255, 223, 157, 0.1), transparent 68%),
    rgba(3, 12, 14, 0.56);
}

.beta-legal-kicker {
  margin: 0 0 6px;
  color: rgba(244, 211, 147, 0.72);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.beta-legal-title {
  margin: 0;
  color: #f4fcf8;
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.beta-legal-copy {
  max-width: 62ch;
  margin: 11px 0 0;
  color: rgba(205, 226, 222, 0.82);
  font-size: 12.5px;
  line-height: 1.62;
  letter-spacing: 0.012em;
}

.beta-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.beta-legal-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border: 1px solid rgba(139, 233, 242, 0.23);
  border-radius: 7px;
  color: rgba(169, 244, 250, 0.92);
  background: rgba(8, 29, 32, 0.55);
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.beta-legal-links a:hover,
.beta-legal-links a:focus-visible {
  border-color: rgba(169, 244, 250, 0.58);
  background: rgba(20, 53, 55, 0.72);
  color: #e7feff;
}

.beta-legal-links a span {
  font-size: 12px;
  line-height: 0.8;
}

.beta-legal-checks {
  display: grid;
  gap: 10px;
  margin-top: 17px;
}

.legal-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: rgba(218, 235, 230, 0.9);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.legal-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: #f0d08b;
  cursor: pointer;
}

.legal-check span {
  min-width: 0;
}

.legal-check b {
  color: #f4e3b7;
  font-weight: 500;
}

.legal-check input:focus-visible {
  outline: 2px solid rgba(255, 226, 158, 0.8);
  outline-offset: 3px;
}

.beta-legal-status {
  min-height: 0;
  margin: 13px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #ffad95;
}

.beta-legal-actions {
  margin-top: 15px;
}

.beta-legal-actions .beta-secure {
  margin-top: 9px;
  font-size: 10px;
}

@media (max-width: 640px) {
  .identity-legal {
    font-size: 9px;
  }

  .beta-legal {
    padding: 16px 14px 15px;
  }

  .beta-legal-copy {
    font-size: 12px;
  }

  .beta-legal-links {
    gap: 7px;
  }

  .beta-legal-links a {
    padding: 8px 9px;
    font-size: 9.5px;
  }

  .legal-check {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 9px;
    font-size: 11.5px;
  }
}


/* ------------------------------------------------------------------------- */
/* Founding sites. Four great grounds and the old open-agar start, as one row */
/* of quiet console cards. The tone comes from the same table as the map.     */
/* ------------------------------------------------------------------------- */

.spawn-block {
  flex: 0 0 auto;
  padding: 0 2px 12px;
}

.spawn-block .pick-label {
  margin: 0 0 9px;
}

.spawn-note {
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: none;
  color: rgba(127, 232, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spawn-sites {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.spawn-site {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(127, 232, 255, 0.14);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(9, 24, 30, 0.6), rgba(5, 15, 20, 0.45));
  color: #a9cbd5;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.spawn-site:hover {
  border-color: color-mix(in srgb, var(--tone) 42%, transparent);
  background: rgba(14, 38, 46, 0.62);
  transform: translateY(-1px);
}

.spawn-site.selected {
  border-color: color-mix(in srgb, var(--tone) 68%, transparent);
  background: color-mix(in srgb, var(--tone) 10%, rgba(9, 24, 30, 0.62));
  box-shadow:
    0 0 22px color-mix(in srgb, var(--tone) 16%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--tone) 7%, transparent);
}

.spawn-site:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tone) 70%, white);
  outline-offset: 2px;
}

.spawn-mark {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid color-mix(in srgb, var(--tone) 46%, transparent);
  border-radius: 50%;
  background: rgba(2, 8, 11, 0.5);
}

.spawn-mark::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 8px var(--tone);
}

.spawn-mark i {
  position: absolute;
  inset: 3px;
  border: 1px dashed color-mix(in srgb, var(--tone) 42%, transparent);
  border-radius: 50%;
  animation: spawn-orbit 18s linear infinite;
}

@keyframes spawn-orbit {
  to { transform: rotate(360deg); }
}

.spawn-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.spawn-copy b {
  overflow: hidden;
  color: #c8e9f1;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spawn-copy small {
  overflow: hidden;
  color: rgba(145, 182, 193, 0.72);
  font-size: 7.5px;
  letter-spacing: 0.055em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spawn-site.selected .spawn-copy b {
  color: #effeff;
}

@media (max-width: 900px) {
  .spawn-sites {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spawn-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spawn-mark i {
    animation: none;
  }

  .spawn-site:hover {
    transform: none;
  }
}