:root {
  color-scheme: dark;
  --night: #02050d;
  --ink: #f7f9fd;
  --muted: rgba(224, 234, 247, .65);
  --cold: #d8ecff;
  --cold-bright: #f4fbff;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* The persistent router owns page fades. Native cross-document snapshots
   compete with that lifecycle and can reject with "Transition was skipped". */
@view-transition { navigation: none; }

main[data-navigation-focus]:focus { outline: none; }
.cosmic-internal .intro { animation: none; }
.cosmic-internal body > .home-main { transition: opacity .16s ease; }

.starfield-canvas { view-transition-name: cosmic-sky; }

::view-transition-group(cosmic-sky) {
  animation-duration: .32s;
  animation-timing-function: ease-out;
}

::view-transition-old(cosmic-sky),
::view-transition-new(cosmic-sky) {
  animation: none;
  mix-blend-mode: normal;
}

/* Safari can strand the named canvas snapshot above page content after a
   cross-document handoff. Its persisted WebGL view already makes the next
   page immediate, so disable only that transition layer on WebKit. */
@supports (-webkit-touch-callout: none) {
  @view-transition { navigation: none; }
  .starfield-canvas { view-transition-name: none; }
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--night);
  color: var(--ink);
}

body {
  overflow: hidden;
  font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  cursor: default;
}

body.panning-stars,
body.panning-stars * {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

::selection {
  background: rgba(171, 218, 255, .92);
  color: #02050d;
}

.starfield-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  filter: brightness(.96) contrast(1.08) saturate(1.04);
  transition: opacity .3s ease, filter .8s ease;
}

.starfield-ready .starfield-canvas { opacity: 1; }
.starfield-continuing .starfield-canvas { opacity: 1; transition: none; }

html.cosmic-page-leaving body > :not(.starfield-canvas):not(script):not(style):not([data-site-diagnostics]) {
  opacity: 0 !important;
  transition: opacity .12s ease !important;
}

.environment-flow .starfield-canvas {
  filter: brightness(.82) contrast(1.06) saturate(1.16);
}

.environment-flow body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 56% 44% at 50% 49%, rgba(0, 2, 12, .58), rgba(0, 2, 12, .24) 48%, transparent 76%),
    linear-gradient(to bottom, rgba(0, 0, 0, .13), transparent 28% 72%, rgba(0, 0, 0, .18));
  pointer-events: none;
}

.home-main {
  position: relative;
  z-index: 5;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(52px, 8vh, 96px) clamp(24px, 7vw, 110px);
  transition: opacity .42s ease, filter .42s ease, transform .62s var(--ease-out);
}

.intro {
  width: min(980px, 100%);
  text-align: center;
  animation: intro-arrive .3s ease-out both;
}

h1 {
  display: flex;
  max-width: none;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  color: #f5f7fb;
  font-size: clamp(46px, 5.25vw, 76px);
  font-weight: 500;
  letter-spacing: -.046em;
  /* Iowan/Baskerville descenders extend well below their nominal line box in
     Safari. Keep the composition tight, but leave enough real glyph clearance
     for combinations such as “Apple,” above “challah.” */
  line-height: 1.06;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .82), 0 1px 2px rgba(0, 0, 0, .8);
}

.headline-line {
  display: block;
  white-space: nowrap;
}

.identity-link {
  color: inherit;
  text-decoration: none;
}

.headline-changing {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .18em;
}

.rotator {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  width: max-content;
  max-width: calc(100vw - 44px);
  align-items: center;
  isolation: isolate;
  min-height: 1em;
  margin-left: 0;
  color: var(--cold-bright);
  cursor: pointer;
  vertical-align: -.02em;
  text-shadow: 0 0 .28em rgba(181, 222, 255, .34), 0 2px 30px rgba(0, 0, 0, .82);
}

.rotator::before {
  content: none;
}

.rotator-current {
  grid-area: 1 / 1;
  color: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: color .26s ease, filter .26s ease, text-shadow .26s ease;
  will-change: opacity;
}

.rotator-current:focus-visible {
  border-radius: 8px;
  outline: 1px solid rgba(210, 235, 255, .72);
  outline-offset: 5px;
}

.rotator:hover::before,
.rotator:focus-within::before {
  content: none;
}

.rotator:hover .rotator-current,
.rotator:focus-within .rotator-current {
  color: #fff;
  filter: none;
  text-shadow: 0 0 .12em rgba(255, 255, 255, .72), 0 0 .34em rgba(129, 199, 255, .56), 0 2px 30px rgba(0, 0, 0, .82);
  transition-duration: .82s;
}

.constellation-navigation {
  --constellation-drift-x: 0px;
  --constellation-drift-y: 0px;
  position: fixed;
  z-index: 9;
  inset: 0;
  display: none;
  pointer-events: none;
  transform: translate3d(var(--constellation-drift-x), var(--constellation-drift-y), 0);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

body.constellation-prototype .constellation-navigation { display: block; }



.constellation-destination {
  --node-x: 50%;
  --node-y: 50%;
  --node-delay: 0ms;
  --star-size: 18px;
  --star-alpha: .7;
  position: absolute;
  z-index: 1;
  top: var(--node-y);
  left: var(--node-x);
  display: grid;
  min-width: 78px;
  min-height: 48px;
  place-items: center;
  padding: 25px 12px 4px;
  color: rgba(232, 241, 255, .58);
  font: 400 15px/1.05 "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  letter-spacing: .015em;
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  opacity: 0;
  pointer-events: none;
  filter: blur(1.5px);
  transform: translate(-50%, -50%) scale(.92);
  transition: color .35s ease, opacity .48s ease var(--node-delay), filter .55s ease var(--node-delay), transform .78s var(--ease-out) var(--node-delay);
}

.constellation-destination::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff 0 1px, rgba(226, 241, 255, .98) 1.5px, rgba(153, 198, 255, .5) 3px, rgba(100, 158, 255, .12) 4.5px, rgba(88, 137, 255, .035) 6px, transparent 68%);
  box-shadow: 0 0 4px rgba(196, 226, 255, .13);
  mix-blend-mode: screen;
  opacity: var(--star-alpha);
  transform: translate(-50%, -50%) scale(1);
  transition: filter .38s ease, opacity .38s ease, transform .5s var(--ease-out);
}

.constellation-destination span {
  opacity: .68;
  transform: translateY(2px);
  transition: opacity .3s ease, transform .35s var(--ease-out);
}

.constellation-navigation.is-open .constellation-destination {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.constellation-destination:hover,
.constellation-destination:focus-visible,
.constellation-destination.is-current { color: #fff; }

.constellation-destination:hover::before,
.constellation-destination:focus-visible::before,
.constellation-destination.is-current::before {
  filter: brightness(1.45) drop-shadow(0 0 5px rgba(225, 242, 255, .78)) drop-shadow(0 0 15px rgba(109, 172, 255, .36));
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.38);
}

.constellation-destination:hover span,
.constellation-destination:focus-visible span,
.constellation-destination.is-current span {
  opacity: 1;
  transform: translateY(0);
}

.constellation-destination:focus-visible {
  border-radius: 12px;
  outline: 1px solid rgba(210, 235, 255, .65);
  outline-offset: 2px;
}

.constellation-destination[data-phrase="0"] { --node-x: 82%; --node-y: 79%; --node-delay: 180ms; --star-size: 22px; --star-alpha: .95; }
.constellation-destination[data-phrase="1"] { --node-x: 9%; --node-y: 66%; --node-delay: 40ms; --star-size: 18px; --star-alpha: .72; }
.constellation-destination[data-phrase="2"] { --node-x: 22%; --node-y: 84%; --node-delay: 80ms; --star-size: 16px; --star-alpha: .6; }
.constellation-destination[data-phrase="3"] { --node-x: 92%; --node-y: 52%; --node-delay: 220ms; --star-size: 14px; --star-alpha: .54; }
.constellation-destination[data-phrase="4"] { --node-x: 82%; --node-y: 18%; --node-delay: 260ms; --star-size: 17px; --star-alpha: .64; }
.constellation-destination[data-phrase="5"] { --node-x: 50%; --node-y: 8%; --node-delay: 300ms; --star-size: 20px; --star-alpha: .78; }
.constellation-destination[data-phrase="6"] { --node-x: 18%; --node-y: 18%; --node-delay: 0ms; --star-size: 15px; --star-alpha: .58; }
.constellation-destination[data-phrase="7"] { --node-x: 7%; --node-y: 42%; --node-delay: 20ms; --star-size: 17px; --star-alpha: .66; }


.constellation-destination[data-phrase="1"],
.constellation-destination[data-phrase="2"] { color: rgba(239, 246, 255, .78); }

body.constellation-open .rotator-current { text-shadow: 0 0 .12em rgba(255, 255, 255, .76), 0 0 .38em rgba(129, 199, 255, .62), 0 2px 30px rgba(0, 0, 0, .82); }

body.constellation-open .booba-space { z-index: 7; }
body.constellation-open .booba-space-button { pointer-events: none; }

@media (max-width: 700px) {
  .constellation-destination { min-width: 64px; padding-inline: 7px; font-size: 14px; }
  .constellation-destination[data-phrase="0"] { --node-x: 80%; --node-y: 82%; }
  .constellation-destination[data-phrase="1"] { --node-x: 10%; --node-y: 64%; }
  .constellation-destination[data-phrase="2"] { --node-x: 23%; --node-y: 82%; }
  .constellation-destination[data-phrase="3"] { --node-x: 91%; --node-y: 52%; }
  .constellation-destination[data-phrase="4"] { --node-x: 80%; --node-y: 18%; }
  .constellation-destination[data-phrase="5"] { --node-x: 50%; --node-y: 8%; }
  .constellation-destination[data-phrase="6"] { --node-x: 20%; --node-y: 18%; }
  .constellation-destination[data-phrase="7"] { --node-x: 10%; --node-y: 42%; }
}

@media (max-height: 520px) {
  .home-main { padding-block: 34px; }

  h1 {
    font-size: clamp(31px, 7.4vh, 46px);
    line-height: 1.04;
  }

  .constellation-destination {
    min-width: 60px;
    min-height: 42px;
    padding: 21px 6px 2px;
    font-size: 13px;
  }

  .constellation-destination::before { top: 10px; }
}

@media (max-width: 360px), (max-height: 360px) {
  h1 { font-size: clamp(28px, 8vw, 34px); }

  .constellation-destination {
    min-width: 46px;
    min-height: 36px;
    padding: 18px 3px 0;
    font-size: 11.5px;
  }

  .constellation-destination::before {
    top: 8px;
    max-width: 17px;
    max-height: 17px;
  }

  .booba-space-button { width: clamp(78px, 22vw, 94px); }
}

@media (max-height: 360px) and (min-aspect-ratio: 4 / 3) {
  body.constellation-open .home-main {
    opacity: 0;
    filter: none;
    transform: scale(.96);
  }

  .constellation-destination { color: rgba(239, 246, 255, .82); }
  .constellation-destination span { opacity: .86; }
}

.booba-space {
  position: fixed;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  transition: opacity .32s ease;
}

.booba-space-button {
  --pet-x: 72vw;
  --pet-y: 68vh;
  --pet-roll: -5deg;
  --pet-facing: 1;
  --idle-facing: 1;
  --pet-lift: 1;
  --settle-duration: 720ms;
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(104px, 9.5vw, 144px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transform: translate3d(var(--pet-x), var(--pet-y), 0) rotate(var(--pet-roll)) scale(var(--pet-lift));
  transform-origin: center;
  transition: filter .22s ease, opacity .28s ease;
  will-change: transform;
  contain: layout style;
}

.booba-space-button.is-dragging {
  --pet-lift: 1.065;
  cursor: grabbing;
  filter: drop-shadow(0 0 11px rgba(196, 229, 255, .54)) drop-shadow(0 13px 24px rgba(28, 86, 150, .34));
}

.booba-space-button.is-dragging .booba-pose {
  /* Pose swaps use inline opacity while entering and leaving the game. The
     active drag layer must remain authoritative after those swaps. */
  opacity: 0 !important;
  animation: none;
}

.booba-space-button.is-dragging .booba-swim-cycle {
  opacity: 1;
  animation: swim-frames 620ms steps(7, end) infinite, swim-reach 620ms ease-in-out infinite;
  animation-play-state: running, running;
}

.booba-pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: none;
  will-change: opacity, transform;
}

.booba-pose-front {
  z-index: 2;
  opacity: 1;
}

.booba-pose-back {
  z-index: 1;
  opacity: 0;
}

.booba-swim-cycle,
.booba-settle-cycle,
.booba-depart-cycle {
  position: absolute;
  inset: 0;
  z-index: 4;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 800% 100%;
  opacity: 0;
  pointer-events: none;
  transition: none;
  transform: scaleX(var(--pet-facing, 1));
  transform-origin: center;
  will-change: background-position, transform;
}

.booba-swim-cycle {
  background-image: url("./booba-space/booba-astronaut-swim-v6.webp?v=fixed-family-scale-v6");
}

.booba-settle-cycle {
  z-index: 5;
  background-image: url("./booba-space/booba-astronaut-settle-v8.webp?v=restored-idle-atomic-v8");
}

.booba-depart-cycle {
  z-index: 5;
  background-image: url("./booba-space/booba-astronaut-settle-v8.webp?v=restored-idle-atomic-v8");
}

.booba-space-button.is-swimming .booba-pose,
.booba-space-button.is-settling .booba-pose,
.booba-space-button.is-departing .booba-pose { opacity: 0 !important; }

.booba-space-button.is-swimming .booba-swim-cycle {
  opacity: 1;
  animation: swim-frames 760ms steps(7, end) infinite, swim-reach 760ms ease-in-out infinite;
  animation-play-state: paused, running;
}

.booba-space-button.is-swimming.is-paddling .booba-swim-cycle {
  animation-play-state: running, running;
}

.booba-space-button.is-settling .booba-settle-cycle {
  opacity: 1;
  animation: settle-frames var(--settle-duration) steps(7, end) 1 forwards;
}

.booba-space-button.is-swimming.is-settling .booba-swim-cycle {
  opacity: 0;
}

/* Keep the completed cell registered while its identical idle pose fades in.
   Removing the animation here used to reset the sheet to cell 1 for a frame,
   which read as a last-second flip after Booba had already sat down. */
.booba-space-button.is-settled .booba-settle-cycle {
  opacity: 0;
  animation: settle-frames var(--settle-duration) steps(7, end) 1 forwards;
}

.booba-space-button.is-departed .booba-depart-cycle {
  opacity: 0;
  animation: settle-frames var(--depart-duration, 480ms) steps(7, end) 1 reverse both;
}

.booba-space-button.is-departing .booba-depart-cycle {
  opacity: 1;
  animation: settle-frames var(--depart-duration, 480ms) steps(7, end) 1 reverse both;
}

.booba-space-button:not(.game-player) .booba-pose {
  transform: scaleX(var(--idle-facing, 1));
  animation: zero-g-breathe 4.8s ease-in-out infinite;
}

.booba-space-button.is-idle-arriving .booba-pose {
  animation: none;
  transform: translateY(0) scaleX(var(--idle-facing, 1));
}

.booba-space-button.is-noticing-star .booba-pose {
  animation: booba-notice-star 900ms cubic-bezier(.16, 1, .3, 1) both;
}

.booba-space-button:hover,
.booba-space-button:focus-visible {
  filter: drop-shadow(0 0 8px rgba(196, 229, 255, .48)) drop-shadow(0 8px 18px rgba(28, 86, 150, .28));
  outline: none;
}

.booba-space-button:focus-visible::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(218, 239, 255, .72);
  border-radius: 50%;
}

.raiders-canvas {
  position: fixed;
  inset: 0;
  z-index: 29;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.raiders-hud {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 36;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 11px 16px 10px;
  border: 1px solid rgba(221, 239, 255, .5);
  border-radius: 999px;
  background: rgba(4, 11, 28, .54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 42px rgba(0, 5, 26, .38);
  color: var(--muted);
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -9px);
  transition: opacity .24s ease, transform .4s var(--ease-out);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  white-space: nowrap;
}

.raiders-hud strong {
  color: var(--ink);
  font-weight: 400;
}

.raiders-message,
.raiders-help {
  position: fixed;
  z-index: 36;
  margin: 0;
  color: rgba(236, 244, 255, .78);
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
  transition: opacity .2s ease, transform .35s var(--ease-out);
}

.raiders-message {
  top: 74px;
  left: 50%;
  transform: translate(-50%, -5px);
  text-align: center;
}

.raiders-help {
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: calc(100% - 24px);
  text-align: center;
  transform: translateX(-50%);
}

.raiders-controls[hidden], .raiders-controls button[hidden] { display: none; }

.raiders-controls {
  position: fixed;
  z-index: 40;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 30px));
  left: 50%;
  display: flex;
  gap: 6px;
  padding: 5px;
  transform: translateX(-50%);
  border: 1px solid rgba(221, 239, 255, .28);
  border-radius: 999px;
  background: rgba(4, 11, 28, .84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 32px #0005;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.raiders-controls button {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.raiders-controls button:hover { background: rgba(159, 220, 255, .12); }
.raiders-controls button:focus-visible { outline: 2px solid #b0dcff; outline-offset: 2px; }
.raiders-controls [data-game-pulse] { min-width: 146px; border-color: rgba(159, 220, 255, .22); }
.raiders-controls [data-game-pulse]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(117, 189, 239, .14);
  transform: scaleX(var(--charge, 1));
  transform-origin: left;
  pointer-events: none;
}
.raiders-controls kbd { margin-left: 10px; font: inherit; opacity: .5; }
.raiders-help-touch { display: none; }
body.playing { touch-action: none; }
body.game-paused .raiders-message, body.game-ended .raiders-message {
  top: 42%;
  width: calc(100% - 40px);
  font-size: clamp(15px, 3vw, 22px);
  color: var(--ink);
}
body.game-paused .raiders-canvas { opacity: .3; }
body.game-paused .booba-space { opacity: .45; }
body.game-launch-error .raiders-message { opacity: 1; }

@media (pointer: coarse), (hover: none), (max-width: 720px), (max-height: 520px) {
  .raiders-help-desktop, .raiders-controls kbd { display: none; }
  .raiders-help-touch { display: inline; }
  .raiders-controls [data-game-pulse] { min-width: 116px; }
}

body.playing .home-main {
  opacity: 0;
  pointer-events: none;
}

body.playing .raiders-canvas { opacity: 1; }
body.playing .booba-space { z-index: 35; }

body.playing .raiders-hud {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.playing .raiders-message,
body.playing .raiders-help { opacity: 1; }

body.playing .raiders-message { transform: translate(-50%, 0); }

.booba-space-button.game-player {
  z-index: 35;
  width: clamp(96px, 8.6vw, 128px);
  transition: filter .15s ease;
}

.booba-space-button.game-player .booba-pose { animation: none; }

.booba-space-button.game-player.firing {
  filter: drop-shadow(0 0 11px rgba(107, 194, 255, .62));
}

.booba-space-button.game-player.hit .booba-pose {
  animation: player-hit .34s ease;
}

@keyframes intro-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zero-g-breathe {
  0%, 100% { transform: translateY(0) scaleX(var(--idle-facing, 1)); }
  50% { transform: translateY(-3px) scaleX(var(--idle-facing, 1)); }
}

@keyframes booba-notice-star {
  0%, 100% { transform: translateY(0) scaleX(var(--idle-facing, 1)); }
  26% { transform: translateY(-3px) scaleX(var(--idle-facing, 1)) scale(1.018); }
  64% { transform: translateY(-2px) scaleX(var(--idle-facing, 1)) scale(1.012); }
}

@keyframes swim-frames {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

@keyframes settle-frames {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

@keyframes swim-reach {
  0%, 100% { transform: scaleX(var(--pet-facing, 1)) translateX(0) rotate(-.4deg); }
  50% { transform: scaleX(var(--pet-facing, 1)) translateX(2px) rotate(.5deg); }
}

@keyframes player-hit {
  0%, 100% { transform: translateX(0); filter: none; }
  22% { transform: translateX(-5px); filter: brightness(1.7) saturate(.62); }
  46% { transform: translateX(4px); filter: brightness(1.3); }
  70% { transform: translateX(-2px); filter: none; }
}

@media (max-width: 720px) {
  .home-main { padding: 46px 22px 120px; }

  h1 {
    width: 100%;
    font-size: clamp(32px, 8.6vw, 48px);
    line-height: 1.08;
  }

  .headline-line {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }

  .headline-changing {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .rotator {
    grid-template-columns: minmax(0, 1fr);
  }

  .rotator-current { text-align: center; }

  .booba-space-button { width: clamp(94px, 26vw, 118px); }

  .raiders-hud {
    top: max(12px, env(safe-area-inset-top));
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    max-width: calc(100vw - 20px);
    gap: 9px 16px;
    padding: 12px 18px;
    font-size: 9px;
  }

  .game-best-wrap { display: none; }

  .raiders-message {
    top: max(82px, calc(env(safe-area-inset-top) + 68px));
    width: calc(100vw - 28px);
  }

  .raiders-help {
    max-width: calc(100vw - 24px);
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* The quiet navigation stars remain in the sky; their labels arrive on intent. */
.constellation-navigation:not(.is-open) .constellation-destination {
  opacity: .52; filter: none; pointer-events: auto; transform: translate(-50%, -50%);
}
.constellation-navigation:not(.is-open) .constellation-destination span { opacity: 0; }
.constellation-navigation:not(.is-open) .constellation-destination::before { transform: translate(-50%, -50%) scale(.65); }
.constellation-destination { transition-delay: 0ms; min-height: 44px; }
.constellation-destination span { transition: opacity .2s ease, transform .3s var(--ease-out); }
.constellation-destination::after {
  content: ''; position: absolute; top: 12px; left: 50%; width: 28px; height: 28px;
  border: 1px solid rgba(180,222,255,.35); border-radius: 50%; opacity: 0;
  transform: translate(-50%,-50%) scale(.6); transition: opacity .3s ease, transform .5s var(--ease-out);
}
.constellation-destination:hover::after, .constellation-destination:focus-visible::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.identity-link, .rotator-current { position: relative; }
.identity-link::after, .rotator-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.02em; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,229,255,.65), transparent);
  transform: scaleX(.15); opacity: 0; transition: transform .5s var(--ease-out), opacity .3s ease;
}
.identity-link:hover::after, .identity-link:focus-visible::after, .rotator:hover .rotator-current::after, .rotator:focus-within .rotator-current::after { opacity: 1; transform: scaleX(1); }
.identity-link { transition: text-shadow .4s ease; }
.identity-link:hover { text-shadow: 0 0 24px rgba(187,225,255,.55); }
.sky-navigation-toggle {
  position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left));
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0;
  color: #c1d8e9; background: transparent; border-radius: 50%; cursor: pointer; opacity: .65;
  transition: opacity .25s ease, background .25s ease;
}
.sky-navigation-toggle svg { fill: #dcefff; stroke: currentColor; stroke-width: .8; }
.sky-navigation-toggle:hover, .sky-navigation-toggle[aria-expanded="true"] { opacity: 1; background: rgba(145,202,239,.08); }
.sky-navigation-toggle:focus-visible, .sky-discovery:focus-visible { outline: 1px solid #d3eaff; outline-offset: 3px; }
.sky-discoveries { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
.sky-discovery { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto; }
.sky-discovery span { width: 3px; height: 3px; border-radius: 50%; background: #dcefff; box-shadow: 0 0 7px #80b9dd, 0 0 17px #6a96b488; transition: transform .4s ease; }
.sky-discovery:hover span, .sky-discovery:focus-visible span { transform: scale(2); }
.sky-discovery.is-found span { background: #f6d5a5; }
body.playing .sky-discoveries, body.playing .constellation-navigation { visibility: hidden; }
/* Preserve target contrast against the newly detailed dust clouds. */
body.playing .starfield-canvas { filter: brightness(.57) contrast(1.06) saturate(.85); }
.raiders-controls [data-game-dash] { background: linear-gradient(90deg, rgba(137,209,255,.13) calc(var(--charge, 1) * 100%), transparent 0); min-width: 66px; }
@media (max-width: 720px), (max-height: 520px), (hover: none), (pointer: coarse) {
  .constellation-navigation:not(.is-open) .constellation-destination { opacity: 0; pointer-events: none; }
  .constellation-destination { min-height: 44px; }
  .sky-navigation-toggle { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .raiders-controls { gap: 2px; padding: 4px; }
  .raiders-controls button { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-discovery span, .identity-link::after, .rotator-current::after, .constellation-destination::after { transition: none; }
}

.sky-discovery[hidden] { display: none; }

.constellation-navigation.is-open .constellation-destination { color: rgba(229,240,250,.9); }
.constellation-navigation.is-open .constellation-destination span { opacity: .9; }

body.constellation-open .constellation-navigation { transform: none; transition: none; }


/* Keep the surrounding constellation light: fine interrupted connections,
   small star cores, and stable labels rather than a bright enclosing frame. */
.constellation-destination span { white-space: nowrap; }
.constellation-destination::after { width: 22px; height: 22px; border-color: rgba(180,222,255,.22); }
.constellation-destination:hover::before,
.constellation-destination:focus-visible::before,
.constellation-destination.is-current::before {
  filter: brightness(1.2) drop-shadow(0 0 4px rgba(225,242,255,.48));
  transform: translate(-50%,-50%) scale(1.13);
}
body.constellation-open.constellation-takes-focus .home-main .intro { opacity: 0 !important; pointer-events: none; }
body.constellation-open.constellation-takes-focus .home-main { opacity: 1; transform: none; }

/* The chart is a single asterism: fine angular strokes, with attention moving
   locally through it instead of illuminating an enclosing border. */
.constellation-figure { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.constellation-figure path { fill: none; stroke: #aac4dc; stroke-width: .7; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .65s ease; }
.constellation-figure circle { fill: #d9e6f3; opacity: .3; transition: opacity .55s ease; }
.constellation-navigation.is-open .constellation-figure path { opacity: .22; }
.constellation-navigation.is-open .constellation-figure circle { opacity: .6; }
.constellation-navigation.has-star-focus .constellation-figure path { opacity: .09; }
.constellation-navigation.has-star-focus .constellation-figure circle { opacity: .25; }
.constellation-navigation .constellation-figure .is-lit path { opacity: .7; }
.constellation-navigation .constellation-figure .is-lit circle { opacity: 1; }
.constellation-navigation.is-open .constellation-destination span { opacity: .72; }
.constellation-navigation.has-star-focus .constellation-destination:not(.is-attended) span { opacity: .38; }
.constellation-navigation .constellation-destination.is-attended span { opacity: 1; }
.constellation-destination::before { background: radial-gradient(circle, #fff 0 1px, #cddfeb 1.2px, rgba(153,198,235,.28) 2.2px, transparent 5.5px); box-shadow: none; }
.constellation-destination.is-attended::before { filter: drop-shadow(0 0 5px #c1dff0); }
.constellation-destination::after { border: 0; width: 30px; height: 30px; background: radial-gradient(circle, rgba(161,205,239,.13), transparent 68%); }
body.constellation-open .rotator-current { text-shadow: 0 2px 24px rgba(0,0,0,.7); }
@media (max-width: 720px), (max-height: 520px), (hover: none), (pointer: coarse) {
  .constellation-navigation:not(.is-open) .constellation-figure { visibility: hidden; }
  .constellation-navigation.is-open .constellation-destination span { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .constellation-figure path, .constellation-figure circle { transition: none; }
}

/* A keyboard target is marked at its star, never by its rectangular hit box. */
.constellation-destination:focus-visible { outline: none; }
.constellation-destination:focus-visible::after { width: 25px; height: 25px; border: 1px solid #dcefff; border-radius: 50%; background: none; opacity: 1; transform: translate(-50%,-50%) scale(1); }
.sky-navigation-toggle svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (forced-colors: active) { .constellation-destination:focus-visible::after { border-color: CanvasText; } }

/* The actual sky planet is the link; this target follows its projected position. */
.world-planet {
  position:fixed; z-index:9; left:76%; top:24%;
  width:var(--planet-size,56px); height:var(--planet-size,56px);
  min-width:48px; min-height:48px; transform:translate(-50%,-50%);
  border-radius:50%; color:#dbe9e7; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.world-planet[hidden] { display:none; }
.world-planet-label {
  position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%);
  font:12px/1.4 "Iowan Old Style",Baskerville,serif; white-space:nowrap;
  letter-spacing:.2px; text-shadow:0 2px 8px #02050d;
  opacity:.72; transition:opacity .2s;
}
.world-planet:hover .world-planet-label,.world-planet:focus-visible .world-planet-label { opacity:1; }
.world-planet:focus-visible { outline:1px solid #d8ecff; outline-offset:7px; }
.world-planet-fallback { background:radial-gradient(circle at 30% 28%,#a6b99a,#357987 40%,#071f30 75%); }
body.playing .world-planet, body.constellation-open .world-planet { visibility:hidden; }
@media(max-width:650px) { .world-planet-label { font-size:11px; left:auto; right:0; transform:none; } }
@media(prefers-reduced-motion:reduce) { .world-planet-label { transition:none; } }