/* =============================================================
   LAPPUNGCTF — Main Menu / Title Screen
   Rhythm-game HUD · dark mode native · HTML + CSS + vanilla JS
   -------------------------------------------------------------
   1. Tokens          5. HUD (player / team)
   2. Base            6. Footer HUD
   3. Space layers    7. Overlay sheet
   4. Radial hub      8. Responsive + motion preferences
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* every screen renders at 90%, like the browser zoomed out one step. Phones keep
     100% (override at the end of this file) so text and tap targets stay full size.
     Scripts that mix viewport and layout pixels read this through getComputedStyle. */
  --zoom: 0.9;
  /* the full viewport height in zoomed layout pixels (100vh alone would come up 10% short) */
  --full-h: calc(100vh / var(--zoom));
  /* colour */
  --primary: #62E6FF;
  --secondary: #7657FF;
  --accent: #FF4FA3;
  --bg: #050817;
  --surface: #0B1224;
  --surface-2: #111B33;
  --text: #F5F7FF;
  --text-dim: #D2D9EE;
  --text-2: #9BA8C7;
  --border: #263454;
  --success: #62E6FF;

  /* type */
  --font-ui: "Chakra Petch", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* spacing: 4px grid, 8px rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --radius-sm: 4px;

  /* motion */
  --ease: cubic-bezier(0, 0, 0.2, 1);
  /* ease-out */
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 300ms;

  /* radial hub geometry: everything derives from the PLAY diameter */
  --play: clamp(112px, 32vmin, 340px);
  --pw-f: 0.70;
  /* panel width  / play */
  --ph-f: 0.385;
  /* panel height / play */
  --ox-f: 0.985;
  /* left/right panel centre offset / play */
  --oy-f: 0.885;
  /* top/bottom panel centre offset / play */
  --pw: calc(var(--play) * var(--pw-f));
  --ph: calc(var(--play) * var(--ph-f));
  --ox: calc(var(--play) * var(--ox-f));
  --oy: calc(var(--play) * var(--oy-f));
  --cut: calc(var(--ph) * 0.32);

  --edge-pad: max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-left));
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

html {
  zoom: var(--zoom);
}

@supports (height: 100dvh) {
  :root {
    --full-h: calc(100dvh / var(--zoom));
  }
}

body {
  margin: 0;
  min-height: var(--full-h);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p,
h1,
h2 {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--fill {
  fill: currentColor;
  stroke-width: 1.5;
}

/* ---------- 3. SPACE LAYERS ---------- */
.space {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.space__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, #0a1030 0%, #060a1f 55%, var(--bg) 100%);
}

.layer {
  position: absolute;
  inset: -48px;
  will-change: transform;
}

#space-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* nebula: soft gradients only (cheap to paint) */
.nebula i {
  position: absolute;
  border-radius: 50%;
  animation: breathe 26s ease-in-out infinite alternate;
}

.nebula__a {
  left: 6%;
  top: 6%;
  width: 48vmax;
  height: 34vmax;
  background: radial-gradient(closest-side, rgba(118, 87, 255, .50), rgba(118, 87, 255, .16) 55%, transparent);
}

.nebula__b {
  right: 2%;
  bottom: -10%;
  width: 46vmax;
  height: 30vmax;
  background: radial-gradient(closest-side, rgba(36, 80, 220, .46), rgba(36, 80, 220, .12) 60%, transparent);
  animation-delay: -9s;
}

.nebula__c {
  left: 26%;
  top: 28%;
  width: 30vmax;
  height: 20vmax;
  background: radial-gradient(closest-side, rgba(255, 79, 163, .16), transparent);
  animation-delay: -16s;
}

/* distant gas giant + moon, top right */
.planet {
  position: absolute;
  right: -3vmin;
  top: -14vmin;
  width: 56vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 34%, rgba(130, 180, 255, .50), transparent 34%),
    repeating-linear-gradient(200deg,
      rgba(118, 87, 255, .18) 0 5%, rgba(40, 62, 170, .20) 5% 13%, rgba(255, 79, 163, .07) 13% 17%, transparent 17% 22%),
    radial-gradient(circle at 30% 32%, #3b47c9, #1b1a6e 45%, #0a0c33 74%, #050817 100%);
  box-shadow:
    inset 3px 2px 0 rgba(190, 235, 255, .30),
    inset 4vmin 2vmin 8vmin rgba(98, 230, 255, .14),
    inset -9vmin -6vmin 12vmin rgba(2, 4, 16, .88),
    0 0 8vmin rgba(118, 87, 255, .26);
}

.moon {
  position: absolute;
  right: 50vmin;
  top: 20vmin;
  width: 6.5vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4a54c8, #1a1c62 55%, #060920);
  box-shadow: inset 2px 1px 0 rgba(190, 235, 255, .35), 0 0 2.5vmin rgba(98, 150, 255, .3);
}

/* orbital station rings, right */
.station {
  position: absolute;
  right: 0;
  top: 24vmin;
  width: 62vmin;
  height: auto;
  opacity: .8;
  overflow: visible;
}

/* planetary limb, bottom left */
.limb {
  position: absolute;
  width: 196vmin;
  height: 196vmin;
  left: -87vmin;
  top: 59vmin;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 20%, rgba(90, 150, 255, .12), transparent 30%),
    radial-gradient(closest-side, #060b28 0%, #08123f 90%, #12358c 96.5%, #56b8f0 99.2%, rgba(98, 230, 255, 0) 100%);
  box-shadow: 0 0 5vmin 0.6vmin rgba(60, 120, 255, .22);
}

/* asteroids */
.rock {
  position: absolute;
  display: block;
  width: var(--s);
  height: var(--s);
  rotate: var(--r, 0deg);
  filter: blur(var(--blur, 0));
  animation: drift var(--dur, 40s) ease-in-out infinite alternate;
  opacity: .92;
}

.space__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 58% at 50% 50%, rgba(5, 8, 23, .58), transparent 72%),
    radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(5, 8, 23, .68) 100%);
}

/* --- scene detail (main menu + mission select) ---
   Static gradients on pseudo-elements: painted once, nothing here animates. */

/* distant tilted galaxy */
.space__base::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 10%;
  width: 34vmax;
  height: 10vmax;
  rotate: -24deg;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(210, 230, 255, .34), rgba(118, 87, 255, .18) 30%, rgba(36, 80, 220, .08) 62%, transparent);
}

/* milky dust band across the frame + a small bright star cluster */
.space__base::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 17% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 19% 73%, #cfe6ff, transparent),
    radial-gradient(2.5px 2.5px at 21% 69%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 23% 74%, #ffd9ef, transparent),
    radial-gradient(1.5px 1.5px at 15% 75%, #cfe6ff, transparent),
    radial-gradient(2px 2px at 62% 16%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 64% 19%, #cfe6ff, transparent),
    radial-gradient(9vmax 6vmax at 19% 72%, rgba(98, 230, 255, .10), transparent),
    linear-gradient(118deg, transparent 28%, rgba(98, 140, 255, .07) 41%, rgba(190, 150, 255, .11) 50%, rgba(98, 230, 255, .06) 58%, transparent 72%);
}

/* gas giant: ring (far half hidden behind the planet) + storm bands */
.planet::before {
  content: "";
  position: absolute;
  inset: 36% -34%;
  rotate: -16deg;
  border: 1vmin solid rgba(160, 180, 255, .26);
  border-top-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 .5vmin rgba(98, 230, 255, .09), inset 0 0 0 .5vmin rgba(255, 79, 163, .10);
}

.planet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 9% 5% at 36% 64%, rgba(255, 140, 200, .34), transparent),
    radial-gradient(ellipse 16% 3% at 50% 46%, rgba(170, 205, 255, .22), transparent),
    radial-gradient(ellipse 12% 2.5% at 30% 54%, rgba(170, 205, 255, .16), transparent);
}

/* moon craters */
.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle 14% at 38% 42%, rgba(4, 6, 24, .5), transparent),
    radial-gradient(circle 9% at 60% 62%, rgba(4, 6, 24, .45), transparent),
    radial-gradient(circle 7% at 55% 30%, rgba(4, 6, 24, .4), transparent);
}

/* horizon planet: cloud streaks and city lights just inside the lit edge */
.limb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(2px 2px at 52% 2.6%, rgba(255, 214, 150, .95), transparent),
    radial-gradient(2px 2px at 55.5% 3.4%, rgba(255, 214, 150, .85), transparent),
    radial-gradient(3px 3px at 58% 5.2%, rgba(255, 226, 170, .95), transparent),
    radial-gradient(2px 2px at 60.5% 4.4%, rgba(255, 214, 150, .8), transparent),
    radial-gradient(2px 2px at 63% 6.6%, rgba(255, 214, 150, .9), transparent),
    radial-gradient(3px 3px at 66% 8.6%, rgba(255, 226, 170, .9), transparent),
    radial-gradient(2px 2px at 69% 8.2%, rgba(255, 214, 150, .8), transparent),
    radial-gradient(2px 2px at 71.5% 10.4%, rgba(255, 214, 150, .85), transparent),
    radial-gradient(ellipse 12% 1.1% at 57% 4.6%, rgba(170, 225, 255, .22), transparent),
    radial-gradient(ellipse 10% 1.3% at 68% 10.5%, rgba(170, 225, 255, .16), transparent),
    radial-gradient(ellipse 14% 1.6% at 60% 9%, rgba(120, 170, 255, .12), transparent);
}

/* sunrise flare on the horizon */
.limb::after {
  content: "";
  position: absolute;
  /* a point on the lit edge, clear of the sponsor column on the main menu */
  left: 68%;
  top: 3.4%;
  width: 34vmin;
  height: 22vmin;
  translate: -50% -50%;
  background:
    radial-gradient(closest-side, rgba(215, 245, 255, .6), rgba(98, 200, 255, .2) 28%, transparent 70%),
    radial-gradient(ellipse 50% 4% at 50% 50%, rgba(200, 240, 255, .5), transparent);
}

/* --- game HUD overlay on the scene (main menu, mission select, scoreboard) ---
   Drawn above the veil, under the UI. Static gradients and text: painted once. */

/* viewport frame: corner brackets + tick rulers on the side and bottom edges */
.space::after {
  --hud: rgba(98, 230, 255, .5);
  --tick: rgba(98, 230, 255, .32);
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--hud), var(--hud)) left 8px top 8px / 28px 1px,
    linear-gradient(var(--hud), var(--hud)) left 8px top 8px / 1px 28px,
    linear-gradient(var(--hud), var(--hud)) right 8px top 8px / 28px 1px,
    linear-gradient(var(--hud), var(--hud)) right 8px top 8px / 1px 28px,
    linear-gradient(var(--hud), var(--hud)) left 8px bottom 8px / 28px 1px,
    linear-gradient(var(--hud), var(--hud)) left 8px bottom 8px / 1px 28px,
    linear-gradient(var(--hud), var(--hud)) right 8px bottom 8px / 28px 1px,
    linear-gradient(var(--hud), var(--hud)) right 8px bottom 8px / 1px 28px,
    repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px 60px) left 4px top 50% / 9px 42%,
    repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px 12px) left 4px top 50% / 5px 42%,
    repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px 60px) right 4px top 50% / 9px 42%,
    repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px 12px) right 4px top 50% / 5px 42%,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 12px) left 50% bottom 4px / 30% 5px;
  background-repeat: no-repeat;
}

/* plotted course: one dashed orbit across the frame with a waypoint at each end */
.space__veil::before {
  content: "";
  position: absolute;
  left: 6%;
  top: 26%;
  width: 88%;
  height: 52%;
  rotate: -9deg;
  border: 1px dashed rgba(98, 230, 255, .2);
  border-radius: 50%;
  background:
    radial-gradient(circle 3px at 2px 50%, rgba(98, 230, 255, .9), transparent 4px),
    radial-gradient(circle 3px at calc(100% - 2px) 50%, rgba(255, 79, 163, .9), transparent 4px);
}

/* nav beacon: reticle (ring + four ticks) with a two-line readout under it */
.space__veil::after {
  --hud: rgba(98, 230, 255, .6);
  content: "NAV-07 // LAMPUNG RELAY\A BRG 105.26E  05.45S";
  position: absolute;
  left: 23%;
  top: 15%;
  box-sizing: content-box;
  width: 46px;
  padding-top: 56px;
  font: 500 10px/14px var(--font-mono);
  letter-spacing: .18em;
  white-space: pre;
  color: rgba(98, 230, 255, .6);
  background:
    radial-gradient(circle at 23px 23px, transparent 15px, var(--hud) 15.5px, var(--hud) 16.5px, transparent 17px),
    linear-gradient(var(--hud), var(--hud)) 23px 0 / 1px 8px,
    linear-gradient(var(--hud), var(--hud)) 23px 38px / 1px 8px,
    linear-gradient(var(--hud), var(--hud)) 0 23px / 8px 1px,
    linear-gradient(var(--hud), var(--hud)) 38px 23px / 8px 1px;
  background-repeat: no-repeat;
}

/* target lock on the moon: it rides the planet layer, so it tracks with the parallax */
.moon::before {
  --hud: rgba(98, 230, 255, .6);
  content: "TRK-02";
  position: absolute;
  left: 50%;
  top: -55%;
  box-sizing: content-box;
  width: 210%;
  padding-top: 210%;
  translate: -50% 0;
  font: 500 10px/16px var(--font-mono);
  letter-spacing: .2em;
  text-align: center;
  color: rgba(98, 230, 255, .7);
  /* the ring fills the square above the 16px label line */
  background:
    radial-gradient(closest-side, transparent calc(100% - 2px), var(--hud) calc(100% - 1.5px), var(--hud) calc(100% - .5px), transparent) top / 100% calc(100% - 16px),
    linear-gradient(var(--hud), var(--hud)) 50% 0 / 1px 7px,
    linear-gradient(var(--hud), var(--hud)) 50% calc(100% - 16px) / 1px 7px;
  background-repeat: no-repeat;
}

@keyframes breathe {
  from {
    opacity: .82;
  }

  to {
    opacity: 1;
  }
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  to {
    transform: translate3d(var(--dx, 1.2vmin), var(--dy, -1.6vmin), 0) rotate(var(--dr, 7deg));
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- STAGE ---------- */
.stage {
  position: relative;
  z-index: 1;
  min-height: max(var(--full-h), calc(var(--play) * 2.2 + 180px));
}

.top {
  position: absolute;
  z-index: 5;
  top: max(clamp(12px, 3vmin, 28px), env(safe-area-inset-top));
  left: var(--edge-pad);
  right: max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  pointer-events: none;
}

.main {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bottom {
  position: absolute;
  z-index: 5;
  left: var(--edge-pad);
  right: max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-right));
  bottom: max(clamp(12px, 3vmin, 28px), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-4);
}

/* sponsors: a static block at each edge, centred on the hub's height */
.sponsors {
  position: absolute;
  left: var(--edge-pad);
  top: 50%;
  z-index: 1;
  /* never wider than the free space beside the hub, which reaches --ox + --pw / 2 from the centre */
  width: min(230px, calc(50% - var(--ox) - var(--pw) / 2 - var(--edge-pad) - 20px));
  translate: 0 -50%;
  pointer-events: none;
  container-type: inline-size;
}

.sponsors__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(18px, 3.6vmin, 34px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  white-space: nowrap;
  color: var(--text-2);
}

.sponsors__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(98, 230, 255, .6), transparent);
}

.sponsors__list {
  display: grid;
  justify-items: start;
  gap: clamp(30px, 7.5vmin, 72px);
  margin: 0;
  padding: clamp(10px, 2vmin, 20px) 0 clamp(10px, 2vmin, 20px) 20px;
  border-left: 1px solid rgba(98, 230, 255, .4);
  list-style: none;
}

.sponsors img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(190px, 100cqi - 22px);
  max-height: clamp(34px, 6.6vmin, 68px);
  opacity: .9;
}

/* right block: the same thing mirrored */
.sponsors--right {
  left: auto;
  right: max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-right));
}

.sponsors--right .sponsors__label {
  flex-direction: row-reverse;
}

.sponsors--right .sponsors__label::after {
  background: linear-gradient(270deg, rgba(98, 230, 255, .6), transparent);
}

.sponsors--right .sponsors__list {
  justify-items: end;
  padding-inline: 0 20px;
  border-left: 0;
  border-right: 1px solid rgba(98, 230, 255, .4);
}

/* too little room beside the hub (portrait / small screens): no sponsor block */
@container (max-width: 130px) {

  .sponsors__label,
  .sponsors__list {
    display: none;
  }
}

/* LOG OUT: bottom-right corner, quiet until hovered. Edge (::before) + fill (::after)
   carry the chamfer, so the focus outline is not clipped. */
.logout {
  --clip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --edge: rgba(155, 168, 199, .55);
  position: absolute;
  right: max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-right));
  bottom: max(clamp(12px, 3vmin, 28px), env(safe-area-inset-bottom));
  z-index: 5;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--text-dim);
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}

.logout::before,
.logout::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--clip);
}

.logout::before {
  inset: 0;
  background: var(--edge);
}

.logout::after {
  inset: 1px;
  background: #0b1224;
}

@media (hover: hover) {
  .logout:hover {
    --edge: #FF5F7A;
    color: #FF8FA3;
  }
}

.logout:focus-visible {
  outline-color: var(--primary);
}

/* ---------- 4. RADIAL HUB ---------- */
.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.orbit {
  position: absolute;
  left: calc(var(--play) * -1.1);
  top: calc(var(--play) * -1.1);
  width: calc(var(--play) * 2.2);
  height: calc(var(--play) * 2.2);
  overflow: visible;
  z-index: 0;
}

.orbit__spin {
  transform-origin: 0 0;
  animation: spin 160s linear infinite;
}

/* connectors between PLAY and the panels */
.link {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.link::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 9px;
}

.link--top {
  left: calc(var(--play) * -0.13);
  width: calc(var(--play) * 0.26);
  top: calc(var(--play) * -0.70);
  height: calc(var(--play) * 0.22);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%);
  background: linear-gradient(180deg, rgba(118, 87, 255, .5), rgba(98, 230, 255, .08));
}

.link--top::after {
  left: 50%;
  top: 56%;
  translate: -50% 0;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.link--bottom {
  left: calc(var(--play) * -0.13);
  width: calc(var(--play) * 0.26);
  top: calc(var(--play) * 0.48);
  height: calc(var(--play) * 0.22);
  clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
  background: linear-gradient(0deg, rgba(118, 87, 255, .5), rgba(98, 230, 255, .08));
}

.link--bottom::after {
  left: 50%;
  top: 30%;
  translate: -50% 0;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.link--left {
  left: calc(var(--play) * -0.67);
  width: calc(var(--play) * 0.19);
  top: calc(var(--play) * -0.09);
  height: calc(var(--play) * 0.18);
  /* clip-path: polygon(0 0, 100% 26%, 100% 74%, 0 100%); */
  /* clip-path: polygon(0% 20.5%, 38.96% 0%, 100% 26%, 100% 74%, 38.96% 97.25%, 0% 81.25%); */
  clip-path: polygon(0% 26.14%, 45.29% 0%, 100% 26%, 100% 74%, 45.29% 96.5%, 0% 74.5%);
  background: linear-gradient(90deg, rgba(98, 230, 255, .35), rgba(118, 87, 255, .1));

}

.link--left::after {
  left: 42%;
  top: 50%;
  translate: 0 -50%;
  background: var(--primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.link--right {
  left: calc(var(--play) * 0.49);
  width: calc(var(--play) * 0.19);
  top: calc(var(--play) * -0.09);
  height: calc(var(--play) * 0.18);
  /* clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 74%); */
  clip-path: polygon(0% 26.14%, 45.29% 0%, 100% 26%, 100% 74%, 45.29% 96.5%, 0% 74.5%);

  background: linear-gradient(270deg, rgba(98, 230, 255, .35), rgba(118, 87, 255, .1));
}

.link--right::after {
  right: 42%;
  top: 50%;
  translate: 0 -50%;
  background: var(--primary);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* --- PLAY --- */
.play {
  position: absolute;
  left: calc(var(--play) / -2);
  top: calc(var(--play) / -2);
  width: var(--play);
  height: var(--play);
  border-radius: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: auto;
  outline: 2px solid transparent;
  outline-offset: 8px;
  transition: scale var(--t-base) var(--ease);
}

.play__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(118, 87, 255, .50)) drop-shadow(0 0 24px rgba(98, 230, 255, .16));
  transition: filter var(--t-base) var(--ease);
}

.play__ticks {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 140s linear infinite;
}

.play__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--play) * 0.04);
  margin-top: calc(var(--play) * 0.02);
}

.play__icon {
  width: calc(var(--play) * 0.44);
  height: calc(var(--play) * 0.44);
  margin-left: calc(var(--play) * 0.012);
  /* optical centring of the triangle */
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35));
}

.play__label {
  font-size: clamp(15px, calc(var(--play) * 0.065), 22px);
  font-weight: 600;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  /* balances trailing tracking */
  line-height: 1;
  color: var(--text);
}

/* luminous pulse (hover / keyboard focus only) */
.play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  pointer-events: none;
}

.play:focus-visible {
  outline-color: var(--primary);
}

.play:focus-visible::after {
  animation: pulse 1.8s var(--ease) infinite;
}

.play:active {
  scale: 0.97;
  transition-duration: 90ms;
}

.play:active .play__art {
  filter: drop-shadow(0 0 14px rgba(98, 230, 255, .8)) drop-shadow(0 0 30px rgba(255, 79, 163, .4));
}

@media (hover: hover) {
  .play:hover {
    scale: 1.02;
  }

  .play:hover .play__art {
    filter:
      drop-shadow(0 0 16px rgba(118, 87, 255, .70)) drop-shadow(0 0 30px rgba(98, 230, 255, .34)) drop-shadow(0 0 22px rgba(255, 79, 163, .22));
  }

  .play:hover::after {
    animation: pulse 1.8s var(--ease) infinite;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  100% {
    transform: scale(1.16);
    opacity: 0;
  }
}

/* --- PLAY launch: hyperspeed warp (script.js adds the classes + temporary .warp overlay)
   1400ms: 0–13% ignition · 13–36% acceleration · 36–86% warp · 82–92% flare, peak at 90% (1260ms)
   Stars/planets/asteroids are driven from the space engine in script.js. --- */
.play.is-launching {
  animation: play-ignite 1400ms var(--ease);
}

.play.is-launching .play__art {
  animation: play-charge 1400ms linear;
}

/* the cyan / magenta / violet ring segments */
.play.is-launching .play__art > g {
  transform-box: fill-box;
  transform-origin: center;
  animation: ring-sweep 1400ms ease-in;
}

/* energy pulse born at the centre */
.play.is-launching::after {
  animation: ignite-pulse 1400ms var(--ease);
}

/* orbit, links, panels and sponsor rails rush past the camera, back in place under the flare */
.stage.is-warping .hub> :not(.play),
.stage.is-warping .sponsors,
.stage.is-warping .logout {
  animation: hub-rush 1400ms cubic-bezier(.5, 0, 1, .5);
}

/* the scaled-up layers must not grow the page (no scrollbar / layout shift) */
.stage.is-warping {
  overflow: clip;
}

@keyframes play-ignite {
  0% {
    transform: none;
  }

  6% {
    transform: scale(.9);
  }

  13% {
    transform: scale(1.05);
  }

  20% {
    transform: scale(1);
  }

  86% {
    transform: scale(1.14);
  }

  90%,
  100% {
    transform: none;
  }
}

@keyframes play-charge {

  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(118, 87, 255, .50)) drop-shadow(0 0 24px rgba(98, 230, 255, .16)) brightness(1);
  }

  9% {
    filter: drop-shadow(0 0 22px rgba(98, 230, 255, .95)) drop-shadow(0 0 44px rgba(255, 79, 163, .6)) brightness(1.7);
  }

  20% {
    filter: drop-shadow(0 0 16px rgba(98, 230, 255, .7)) drop-shadow(0 0 34px rgba(118, 87, 255, .5)) brightness(1.25);
  }

  86% {
    filter: drop-shadow(0 0 30px rgba(98, 230, 255, 1)) drop-shadow(0 0 60px rgba(255, 79, 163, .6)) brightness(1.8);
  }
}

@keyframes ring-sweep {

  88%,
  100% {
    transform: rotate(1080deg);
  }
}

@keyframes ignite-pulse {
  0% {
    transform: scale(.15);
    opacity: 0;
    border-width: 6px;
  }

  6% {
    opacity: 1;
  }

  22%,
  100% {
    transform: scale(1.6);
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes hub-rush {

  0%,
  13% {
    transform: none;
    opacity: 1;
  }

  55%,
  89% {
    transform: scale(2.2);
    opacity: 0;
  }

  90% {
    transform: none;
    opacity: 0;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

/* temporary overlay: edge compression (self), tunnel light trails (::before), forward flare (::after) */
@property --warp-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 200%;
}

.warp {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(circle farthest-corner at var(--cx) var(--cy),
      transparent calc(var(--warp-r) * .6),
      rgba(255, 79, 163, .14) calc(var(--warp-r) * .76),
      rgba(98, 230, 255, .2) calc(var(--warp-r) * .84),
      rgba(5, 8, 23, .88) var(--warp-r));
  animation: warp-edge 1400ms ease-in forwards;
}

.warp::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 0deg at var(--cx) var(--cy), transparent 0 4.4deg, rgba(220, 248, 255, .55) 4.7deg, transparent 5deg 6deg),
    repeating-conic-gradient(from 1.3deg at var(--cx) var(--cy), transparent 0 7.6deg, rgba(118, 87, 255, .5) 8deg, transparent 8.4deg 9.5deg),
    repeating-conic-gradient(from 3.1deg at var(--cx) var(--cy), transparent 0 12.2deg, rgba(255, 79, 163, .42) 12.5deg, transparent 12.8deg 13.7deg);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--play) * .55), #000 calc(var(--play) * 1.7));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--play) * .55), #000 calc(var(--play) * 1.7));
  transform-origin: var(--cx) var(--cy);
  opacity: 0;
  animation: warp-rays 1400ms linear forwards;
}

.warp::after {
  content: "";
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--play);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 35%, rgba(205, 248, 255, .95) 60%, rgba(98, 230, 255, .55) 85%, rgba(118, 87, 255, 0));
  opacity: 0;
  animation: warp-flash 1400ms linear forwards;
}

@keyframes warp-edge {

  0%,
  30% {
    --warp-r: 200%;
  }

  88% {
    --warp-r: 82%;
  }

  90%,
  100% {
    --warp-r: 200%;
  }
}

@keyframes warp-rays {

  0%,
  28% {
    opacity: 0;
    transform: scale(1);
  }

  40% {
    opacity: .55;
  }

  52% {
    opacity: .35;
  }

  64% {
    opacity: .8;
  }

  74% {
    opacity: .5;
  }

  86% {
    opacity: .9;
    transform: scale(1.5);
  }

  90%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes warp-flash {

  0%,
  82% {
    opacity: 0;
    scale: .5;
  }

  84% {
    opacity: 1;
  }

  88%,
  92% {
    opacity: 1;
    scale: 16;
  }

  100% {
    opacity: 0;
    scale: 16;
  }
}

/* reduced motion: ring pulse + quick fade. !important beats the reduced-motion reset in section 8 */
.play.is-pulsing::after {
  animation: pulse 450ms var(--ease) !important;
}

.warp--calm {
  background: rgba(5, 8, 23, .55);
  animation: calm-fade 450ms var(--ease) forwards !important;
}

.warp--calm::before,
.warp--calm::after {
  content: none;
}

/* --- PLAY refused (competition not started): script.js swaps the launch classes for
   .is-denied at 800ms, when the menu has already rushed away.
   0–520ms red alert + hard shake · 420–1150ms the menu and the sky ease back. --- */
.warp.is-denied {
  background: radial-gradient(circle farthest-corner at var(--cx) var(--cy),
      transparent 14%, rgba(255, 40, 70, .2) 42%, rgba(190, 10, 40, .62) 100%);
  animation: denied-wash 1250ms linear forwards;
}

.warp.is-denied::before {
  background:
    repeating-conic-gradient(from 0deg at var(--cx) var(--cy), transparent 0 4.4deg, rgba(255, 120, 130, .6) 4.7deg, transparent 5deg 6deg),
    repeating-conic-gradient(from 1.3deg at var(--cx) var(--cy), transparent 0 7.6deg, rgba(255, 40, 70, .55) 8deg, transparent 8.4deg 9.5deg);
  animation: denied-rays 1250ms var(--ease) forwards;
}

.warp.is-denied::after {
  animation: none;
}

/* the whole screen takes the hit: the stage and the scene behind it */
.stage.is-denied,
body:has(.stage.is-denied) .space {
  animation: denied-shake 520ms linear;
}

.stage.is-denied {
  overflow: clip;
}

/* held away through the shake, then back into place */
.stage.is-denied .hub> :not(.play),
.stage.is-denied .sponsors,
.stage.is-denied .logout {
  animation: hub-return 730ms var(--ease) 420ms both;
}

.play.is-denied .play__art {
  animation: play-alarm 1250ms var(--ease);
}

@keyframes denied-wash {
  0% {
    opacity: 1;
  }

  8% {
    opacity: .45;
  }

  14% {
    opacity: 1;
  }

  22% {
    opacity: .6;
  }

  30%,
  42% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes denied-rays {
  0% {
    opacity: .9;
    transform: scale(1.4);
  }

  42% {
    opacity: .55;
    transform: scale(1.15);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* hard, uneven jolts that die down */
@keyframes denied-shake {
  0% {
    translate: 0 0;
  }

  8% {
    translate: -16px 9px;
  }

  16% {
    translate: 15px -11px;
  }

  24% {
    translate: -13px -8px;
  }

  32% {
    translate: 12px 10px;
  }

  42% {
    translate: -10px 6px;
  }

  52% {
    translate: 9px -7px;
  }

  64% {
    translate: -6px 4px;
  }

  76% {
    translate: 4px -3px;
  }

  88% {
    translate: -2px 1px;
  }

  100% {
    translate: 0 0;
  }
}

@keyframes hub-return {
  from {
    transform: scale(2.2);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes play-alarm {

  0%,
  42% {
    /* recolour first, so the red glow is added after the hue shift and stays red */
    filter: hue-rotate(95deg) saturate(1.6) drop-shadow(0 0 26px rgba(255, 50, 80, 1)) drop-shadow(0 0 54px rgba(255, 50, 80, .6));
  }

  100% {
    filter: hue-rotate(0deg) saturate(1) drop-shadow(0 0 12px rgba(118, 87, 255, .50)) drop-shadow(0 0 24px rgba(98, 230, 255, .16));
  }
}

/* reduced motion: a short red wash instead of the warp abort */
.warp--calm.is-denied {
  background: rgba(150, 12, 38, .5);
}

/* ACCESS DENIED banner, above the hub; script.js removes it after 3.6s */
.denied {
  position: fixed;
  left: 50%;
  top: max(clamp(16px, 5vh, 48px), env(safe-area-inset-top));
  z-index: 11;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 14px clamp(16px, 3vw, 36px) 12px;
  border: 1px solid #FF5F7A;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg, #FF5F7A 0 8px, transparent 8px 16px) top / 100% 4px no-repeat,
    rgba(54, 6, 18, .92);
  translate: -50% 0;
  pointer-events: none;
  animation: denied-in 3600ms var(--ease) forwards;
}

.denied strong {
  /* the tracking after the last letter would push the text off centre */
  margin-right: -.3em;
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .3em;
  color: #FF7A90;
  text-shadow: 0 0 16px rgba(255, 60, 90, .8);
}

.denied span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: #FFD3DA;
}

@keyframes denied-in {
  0% {
    opacity: 0;
    scale: 1.3;
  }

  4% {
    opacity: 1;
    scale: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* PLAY route set: freeze at the peak while the next page loads */
.warp.is-holding,
.warp.is-holding::after {
  animation-play-state: paused !important;
}

@keyframes calm-fade {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* --- Radial panels --- */
.panel {
  --hex: polygon(var(--cut) 0,
      calc(100% - var(--cut)) 0,
      100% 50%,
      calc(100% - var(--cut)) 100%,
      var(--cut) 100%,
      0 50%);
  position: absolute;
  z-index: 2;
  width: var(--pw);
  height: var(--ph);
  min-height: 44px;
  display: grid;
  place-items: center;
  color: var(--text);
  pointer-events: auto;
  outline: 2px solid transparent;
  /* visible in forced-colors mode */
  outline-offset: 6px;
  filter: drop-shadow(0 0 6px rgba(118, 87, 255, .18));
  transition:
    scale var(--t-base) var(--ease),
    translate var(--t-base) var(--ease),
    filter var(--t-base) var(--ease);
}

.panel--top {
  left: calc(var(--pw) / -2);
  top: calc(var(--oy) * -1 - var(--ph) / 2);
}

.panel--bottom {
  left: calc(var(--pw) / -2);
  top: calc(var(--oy) - var(--ph) / 2);
}

.panel--left {
  left: calc(var(--ox) * -1 - var(--pw) / 2);
  top: calc(var(--ph) / -2);
}

.panel--right {
  left: calc(var(--ox) - var(--pw) / 2);
  top: calc(var(--ph) / -2);
}

.panel__edge,
.panel__fill {
  position: absolute;
  clip-path: var(--hex);
  pointer-events: none;
}

.panel__edge {
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--secondary) 52%, var(--accent));
  opacity: .55;
  transition: opacity var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}

.panel__fill {
  inset: 2px;
  background: linear-gradient(180deg, rgba(17, 27, 51, .95), rgba(11, 18, 36, .93));
}

/* accent bars: magenta on the outer-top edge, cyan on the bottom edge */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 34%;
  height: 3px;
  translate: -50% 0;
  z-index: 3;
  pointer-events: none;
  opacity: .8;
  transition: opacity var(--t-base) var(--ease);
}

.panel::before {
  top: 0;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 79, 163, .65);
}

.panel::after {
  bottom: 0;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(98, 230, 255, .55);
}

.panel__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.panel .icon {
  width: clamp(18px, calc(var(--play) * 0.078), 24px);
  height: clamp(18px, calc(var(--play) * 0.078), 24px);
  color: var(--text-dim);
  transition: color var(--t-base) var(--ease);
}

.panel__label {
  font-size: clamp(12px, calc(var(--play) * 0.043), 14px);
  font-weight: 600;
  letter-spacing: 0.14em;
  padding-left: 0.14em;
  line-height: 1.2;
  color: var(--text-dim);
  transition: color var(--t-base) var(--ease);
}

@media (hover: hover) {
  .panel:hover {
    scale: 1.02;
    translate: 0 -2px;
    filter: drop-shadow(0 0 12px rgba(118, 87, 255, .55)) drop-shadow(0 0 6px rgba(98, 230, 255, .25));
  }

  .panel:hover .panel__edge {
    opacity: 1;
  }

  .panel:hover::before,
  .panel:hover::after {
    opacity: 1;
  }

  .panel:hover .icon {
    color: var(--primary);
  }

  .panel:hover .panel__label {
    color: #fff;
  }
}

/* keyboard focus: solid 3px cyan outline that follows the hexagon */
.panel:focus-visible {
  scale: 1.02;
  filter: drop-shadow(0 0 10px rgba(98, 230, 255, .6));
}

.panel:focus-visible .panel__edge {
  opacity: 1;
  background: var(--primary);
}

.panel:focus-visible .panel__fill {
  inset: 3px;
}

.panel:focus-visible::before,
.panel:focus-visible::after {
  opacity: 1;
}

.panel:focus-visible .icon {
  color: var(--primary);
}

.panel:focus-visible .panel__label {
  color: #fff;
}

.panel:active {
  scale: 0.98;
  translate: 0 0;
  transition-duration: 90ms;
}

.panel:active .panel__edge {
  opacity: 1;
  filter: brightness(1.35);
}

/* ---------- 5. HUD (player / team) ---------- */
.hud {
  --hud-clip: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 10px 100%, 0 calc(100% - 10px));
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 60px;
  padding: 10px 40px 10px 12px;
  filter: drop-shadow(0 0 10px rgba(98, 230, 255, .10));
}

.hud--team {
  --hud-clip: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 22px 100%);
  padding: 10px 12px 10px 40px;
}

.hud__edge,
.hud__fill {
  position: absolute;
  clip-path: var(--hud-clip);
  pointer-events: none;
}

.hud__edge {
  inset: 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary) 60%, rgba(255, 79, 163, .75));
  opacity: .8;
}

.hud--team .hud__edge {
  background: linear-gradient(270deg, var(--primary), var(--secondary) 60%, rgba(255, 79, 163, .75));
}

.hud__fill {
  inset: 1.5px;
  background: rgba(11, 18, 36, .86);
}

.hud> :not(.hud__edge):not(.hud__fill) {
  position: relative;
}

.hud__text {
  min-width: 0;
}

.hud__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.hud--team .hud__meta {
  color: var(--primary);
}

.hud--team .icon--sm {
  color: var(--primary);
}

/* compact scoreboard line: label over value, cells split by hairlines */
.hud__stats {
  display: flex;
  margin: 6px 0 0;
  font-family: var(--font-mono);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.hud__stats div {
  padding: 0 12px;
}

.hud__stats div:first-child {
  padding-left: 0;
}

.hud__stats div+div {
  border-left: 1px solid var(--border);
}

.hud__stats dt {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-2);
}

.hud__stats dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.hud__stats .hud__rank {
  color: var(--primary);
}

.meter {
  display: block;
  width: clamp(72px, 9vw, 124px);
  height: 4px;
  background: rgba(155, 168, 199, .26);
}

.meter i {
  display: block;
  width: var(--xp, 50%);
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  box-shadow: 0 0 8px rgba(98, 230, 255, .5);
}

.avatar {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(var(--primary), var(--secondary), var(--accent), var(--primary));
}

.avatar__in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
}

.avatar__in .icon {
  width: 22px;
  height: 22px;
}

.emblem {
  flex: none;
  width: 44px;
  height: 46px;
  padding: 2px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--primary), var(--secondary) 55%, var(--accent));
}

.emblem__in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--surface-2);
  color: var(--text);
}

.emblem__in .icon {
  width: 20px;
  height: 20px;
}

/* ---------- 6. FOOTER HUD ---------- */
.status {
  position: relative;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status::before {
  content: "";
  position: absolute;
  top: 0;
  width: min(220px, 70%);
  height: 1px;
}

.status--left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--success);
}

.status--left::before {
  left: 0;
  background: linear-gradient(90deg, rgba(98, 230, 255, .8), transparent);
}

.status--right {
  justify-self: end;
  color: var(--text-2);
}

.status--right::before {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 79, 163, .8), transparent);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: blink 3.2s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

.brand {
  text-align: center;
}

.brand__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: clamp(13px, 1.25vw, 16px);
  font-weight: 600;
  letter-spacing: 0.5em;
  line-height: 1.2;
  color: var(--text);
}

.brand__name span {
  margin-right: -0.5em;
}

.brand__name::before,
.brand__name::after {
  content: "";
  width: clamp(36px, 8vw, 120px);
  height: 1px;
}

.brand__name::before {
  background: linear-gradient(90deg, transparent, var(--accent));
}

.brand__name::after {
  background: linear-gradient(90deg, var(--primary), transparent);
}

.brand__tag {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  color: var(--text-2);
}

/* ---------- 7. OVERLAY SHEET ---------- */
.sheet {
  width: min(92vw, 520px);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

.sheet::backdrop {
  background: rgba(5, 8, 23, .74);
  backdrop-filter: blur(3px);
}

.sheet[open] {
  animation: sheet-in var(--t-slow) var(--ease);
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sheet__frame {
  --clip: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  position: relative;
  isolation: isolate;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  filter: drop-shadow(0 0 18px rgba(118, 87, 255, .28));
}

.sheet__frame::before,
.sheet__frame::after {
  content: "";
  position: absolute;
  clip-path: var(--clip);
  z-index: -1;
}

.sheet__frame::before {
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--secondary) 55%, var(--accent));
}

.sheet__frame::after {
  inset: 1.5px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.sheet__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.sheet__body {
  margin-top: var(--sp-4);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
}

.sheet__body p+p,
.sheet__body p+ul,
.sheet__body ul+p {
  margin-top: var(--sp-3);
}

.sheet__body ul {
  margin: 0;
  padding-left: 1.2em;
}

.sheet__body li+li {
  margin-top: var(--sp-2);
}

.sheet__body li::marker {
  color: var(--primary);
}

.sheet__stats {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-6);
}

.sheet__stats dt {
  color: var(--text-2);
}

.sheet__stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 44px;
  padding-block: var(--sp-3);
  cursor: pointer;
}

.switch+.switch {
  border-top: 1px solid var(--border);
}

.switch small {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

.switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-2);
  transition: translate var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.switch input:checked {
  background: rgba(98, 230, 255, .2);
  border-color: var(--primary);
}

.switch input:checked::after {
  translate: 20px 0;
  background: var(--primary);
}

.switch input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.sheet__close {
  margin-top: var(--sp-6);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  background: rgba(17, 27, 51, .6);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

/* the destructive answer in a confirmation sheet; Close stays the way out */
.sheet__confirm {
  display: block;
  border-color: #FF5F7A;
  color: #FF8FA3;
}

.sheet__confirm:hover {
  border-color: #FF8FA3;
  background: rgba(255, 95, 122, .14);
}

.sheet__close:not(.sheet__confirm):hover {
  border-color: var(--primary);
  background: rgba(98, 230, 255, .08);
}

.sheet__close:active {
  border-color: #fff;
}

.sheet__close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ---------- 8. RESPONSIVE + MOTION PREFERENCES ---------- */

/* below lg: lighter decoration */
@media (max-width: 1023px) {
  .station {
    opacity: .5;
  }

  .hud__name {
    font-size: 13px;
  }
}

/* portrait screens: keep the limb from swallowing the composition */
@media (max-aspect-ratio: 1/1) {
  .limb {
    width: 96vh;
    height: 96vh;
    left: -60vh;
    top: 70vh;
  }
}

/* below md */
@media (max-width: 767px) {
  .station-layer {
    display: none;
  }

  .planet {
    width: 80vmin;
    top: -22vmin;
    right: -14vmin;
  }

  .moon {
    display: none;
  }
}

/* below sm: compact HUDs, denser hub, hide small decoration */
@media (max-width: 640px) {
  :root {
    --play: min(clamp(112px, 32vmin, 340px), calc((100vw - 24px) / 2.72));
    --pw-f: 0.84;
    --ph-f: 0.42;
    --ox-f: 0.94;
    --oy-f: 0.90;
  }

  .link {
    display: none;
  }

  .rocks--far {
    display: none;
  }

  .top {
    gap: var(--sp-2);
  }

  .hud {
    flex: 0 1 auto;
    max-width: calc(50% - 4px);
    min-height: 48px;
    gap: var(--sp-2);
    padding: 8px 26px 8px 8px;
  }

  .hud--team {
    padding: 8px 8px 8px 26px;
  }

  .hud__name {
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .hud__meta {
    margin-top: 4px;
  }

  .meter {
    display: none;
  }

  .avatar {
    width: 34px;
    height: 34px;
  }

  .avatar__in .icon {
    width: 18px;
    height: 18px;
  }

  .emblem {
    width: 34px;
    height: 36px;
  }

  .emblem__in .icon {
    width: 16px;
    height: 16px;
  }

  .bottom {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-2);
  }

  .brand {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .status--left {
    grid-column: 1;
    grid-row: 2;
  }

  .status--right {
    grid-column: 2;
    grid-row: 2;
  }

  .status {
    font-size: 11px;
    letter-spacing: 0.1em;
    padding-top: 8px;
  }

  .brand__name::before,
  .brand__name::after {
    width: 32px;
  }
}

/* user / OS motion preferences */
[data-motion="off"] .space *,
[data-motion="off"] .play__ticks,
[data-motion="off"] .orbit__spin,
[data-motion="off"] .dot {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* forced-colors: keep controls discoverable */
@media (forced-colors: active) {
  .panel__edge {
    background: CanvasText;
  }

  .play__art {
    forced-color-adjust: none;
  }
}

/* phones / narrow windows: no 90% scale, text and 44px tap targets stay full size */
@media (max-width: 860px) {
  :root {
    --zoom: 1;
  }
}