:root {
  color-scheme: dark;
  --void: #010204;
  --void-soft: #050810;
  --glass: rgba(5, 10, 18, 0.76);
  --glass-heavy: rgba(3, 7, 13, 0.92);
  --ink: #f4fbff;
  --muted: #8da7b6;
  --cyan: #69efff;
  --cyan-soft: #b9f8ff;
  --violet: #a78bff;
  --violet-deep: #5f47c9;
  --gold: #ffd66b;
  --gold-soft: #fff0b8;
  --line: rgba(150, 226, 240, 0.22);
  --line-hot: rgba(105, 239, 255, 0.62);
  --shadow: rgba(0, 0, 0, 0.72);
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-right: max(16px, env(safe-area-inset-right));
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
  --safe-left: max(16px, env(safe-area-inset-left));
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--void);
}

html {
  touch-action: pan-x pan-y pinch-zoom;
}

body {
  color: var(--ink);
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

button,
kbd {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
[role="application"]:focus-visible,
#gameCanvas:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#gameRoot {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 320px;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 18%, rgba(91, 74, 184, 0.17), transparent 25%),
    radial-gradient(circle at 45% 85%, rgba(43, 170, 190, 0.08), transparent 34%),
    #010204;
}

/* The old sci-fi grid overlay died here: it read as a layer of squares
   over every bright sky (Alex, 2026-08-21: "do they have to be there?" No.) */

#gameCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: #010204;
  cursor: crosshair;
  touch-action: pinch-zoom;
}

body.pointer-locked #gameCanvas {
  cursor: none;
}

/* --------------------------------------------------------------------------
   Heads-up display
   -------------------------------------------------------------------------- */

#hud {
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  text-shadow: 0 2px 12px var(--shadow);
}

.meter-track,
.charge-ui__track,
.loading-track {
  position: relative;
  overflow: hidden;
  background: rgba(221, 248, 255, 0.08);
}

.meter-track::after,
.charge-ui__track::after,
.loading-track::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(1, 2, 4, 0.66) 18px 20px);
}

#crosshair,
#hitMarker,
#comboText {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#crosshair {
  width: 38px;
  height: 38px;
  opacity: 0.86;
  transition: opacity 120ms ease, transform 120ms ease;
}

#crosshair i {
  position: absolute;
  display: block;
  background: rgba(238, 253, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(0, 3, 8, 0.84), 0 0 6px rgba(105, 239, 255, 0.72);
}

.crosshair__north,
.crosshair__south {
  left: 18px;
  width: 2px;
  height: 8px;
}

.crosshair__north { top: 1px; }
.crosshair__south { bottom: 1px; }

.crosshair__east,
.crosshair__west {
  top: 18px;
  width: 8px;
  height: 2px;
}

.crosshair__east { right: 1px; }
.crosshair__west { left: 1px; }

#crosshair b {
  position: absolute;
  left: 17px;
  top: 17px;
  width: 4px;
  height: 4px;
  background: rgba(3, 8, 15, 0.48);
  border: 1px solid rgba(255, 232, 153, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 3, 8, 0.82), 0 0 6px rgba(255, 214, 107, 0.58);
  transition: background 100ms ease, border-color 100ms ease, box-shadow 100ms ease, transform 100ms ease;
}

#hitMarker {
  width: 46px;
  height: 46px;
  opacity: 0;
  transition: opacity 70ms ease, transform 70ms ease;
}

#hitMarker i {
  position: absolute;
  width: 11px;
  height: 2px;
  background: var(--gold-soft);
  box-shadow: 0 0 0 1px rgba(0, 3, 8, 0.88), 0 0 8px var(--gold);
}

#hitMarker i:nth-child(1) { left: 4px; top: 9px; transform: rotate(45deg); }
#hitMarker i:nth-child(2) { right: 4px; top: 9px; transform: rotate(-45deg); }
#hitMarker i:nth-child(3) { left: 4px; bottom: 9px; transform: rotate(-45deg); }
#hitMarker i:nth-child(4) { right: 4px; bottom: 9px; transform: rotate(45deg); }

#hitMarker.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.86);
}

#damageVignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle, transparent 42%, rgba(83, 51, 155, 0.18) 70%, rgba(139, 109, 35, 0.7) 114%),
    linear-gradient(90deg, rgba(167, 139, 255, 0.22), transparent 18%, transparent 82%, rgba(255, 214, 107, 0.22));
  mix-blend-mode: screen;
  transition: opacity 100ms ease;
}

#damageVignette.active {
  opacity: 1;
}

#chargeUI {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 104px;
  height: 104px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.78);
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 3, 10, .94)) drop-shadow(0 0 12px rgba(105, 239, 255, .28));
  transition: opacity 100ms ease, transform 120ms cubic-bezier(.2, .82, .24, 1.24), filter 120ms ease;
}

#chargeUI.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.charge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.charge-ring__track,
.charge-ring__fill,
.charge-ring__core {
  fill: none;
}

.charge-ring__track {
  stroke: rgba(150, 244, 255, .22);
  stroke-width: 6;
  stroke-dasharray: 2 6;
}

.charge-ring__fill {
  stroke: url(#chargeGradient);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 1px 1px rgba(0, 3, 10, .92)) drop-shadow(0 0 6px rgba(105, 239, 255, .82));
  transition: stroke-dashoffset 35ms linear, stroke-width 100ms ease;
}

.charge-ring__core {
  stroke: rgba(213, 179, 255, .34);
  stroke-width: 1;
  stroke-dasharray: 1 8;
}

#chargeUI[data-max="true"] {
  filter: drop-shadow(0 1px 1px rgba(0, 3, 10, .94)) drop-shadow(0 0 18px rgba(255, 214, 107, .76));
  animation: charge-lock 420ms ease-in-out infinite alternate;
}

#chargeUI[data-max="true"] .charge-ring__fill {
  stroke-width: 10;
  filter: drop-shadow(0 1px 1px rgba(0, 3, 10, .94)) drop-shadow(0 0 9px rgba(255, 214, 107, .96));
}

#controlsHint {
  position: absolute;
  left: 50%;
  bottom: var(--safe-bottom);
  max-width: calc(100vw - 470px);
  transform: translateX(-50%);
}

.control-set {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.3vw, 21px);
  color: rgba(196, 217, 226, 0.64);
  font: 760 8px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.control-set span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

kbd {
  min-width: 22px;
  padding: 3px 5px;
  border: 1px solid rgba(176, 232, 241, 0.22);
  border-bottom-color: rgba(176, 232, 241, 0.45);
  border-radius: 3px;
  background: rgba(8, 15, 22, 0.68);
  color: var(--ink);
  font: 800 8px/1 ui-monospace, "Cascadia Mono", monospace;
  text-align: center;
}

.gamepad-hints {
  display: none;
}

body.using-gamepad .keyboard-hints {
  display: none;
}

body.using-gamepad .gamepad-hints {
  display: flex;
}

.utility-controls {
  position: absolute;
  z-index: 12;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.utility-button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(150, 226, 240, 0.18);
  border-radius: 2px;
  background: rgba(3, 8, 14, 0.62);
  color: rgba(220, 243, 248, 0.7);
  font: 820 8px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.utility-button:hover,
.utility-button:focus-visible {
  border-color: var(--line-hot);
  background: rgba(8, 19, 27, 0.88);
  color: #fff;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Touch controls
   -------------------------------------------------------------------------- */

#touchControls {
  display: none;
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

body.touch-enabled #touchControls {
  display: block;
}

body.touch-enabled #gameCanvas {
  cursor: default;
}

body.touch-enabled #controlsHint,
body.touch-enabled #fullscreenButton {
  display: none;
}

.touch-pad {
  position: absolute;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(142, 224, 238, 0.25);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(105, 239, 255, 0.09) 0 8%, transparent 9% 47%, rgba(105, 239, 255, 0.05) 48% 49%, transparent 50%),
    rgba(2, 7, 12, 0.22);
  box-shadow: inset 0 0 34px rgba(105, 239, 255, 0.035), 0 0 30px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  touch-action: none;
}

.touch-pad::before,
.touch-pad::after {
  content: "";
  position: absolute;
  background: rgba(156, 231, 243, 0.14);
}

.touch-pad::before {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
}

.touch-pad::after {
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
}

.touch-pad__ticks {
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(167, 139, 255, 0.19);
  border-radius: 50%;
}

.touch-pad > span {
  position: absolute;
  left: 50%;
  bottom: -19px;
  color: rgba(205, 235, 241, 0.64);
  font: 850 8px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.touchKnob {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px;
  border: 1px solid rgba(215, 250, 255, 0.56);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.38), rgba(105, 239, 255, 0.15) 36%, rgba(23, 37, 62, 0.56));
  box-shadow: inset 0 0 20px rgba(105, 239, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.34);
  transform: translate(0, 0);
  will-change: transform;
}

#movePad {
  left: max(24px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
}

#lookPad {
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  border-color: rgba(167, 139, 255, 0.31);
}

.touch-action {
  position: absolute;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid rgba(184, 233, 242, 0.3);
  border-radius: 50%;
  background: rgba(4, 10, 17, 0.58);
  color: var(--cyan-soft);
  font: 900 9px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 22px rgba(105, 239, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transition: transform 80ms ease, filter 80ms ease, background 80ms ease;
}

.touch-action:active,
.touch-action.active {
  transform: scale(0.92);
  filter: brightness(1.35);
}

.touch-action--kick {
  right: calc(max(24px, env(safe-area-inset-right)) + 155px);
  bottom: max(27px, env(safe-area-inset-bottom));
  width: 78px;
  height: 78px;
  border: 2px solid rgba(255, 240, 184, 0.65);
  background: radial-gradient(circle at 32% 26%, #fff8d6, var(--gold) 28%, #7e5d25 100%);
  color: #090b10;
  box-shadow: 0 0 24px rgba(255, 214, 107, 0.18), 0 9px 30px rgba(0, 0, 0, 0.38);
}

.touch-action--kick b,
.touch-action--kick small {
  display: block;
}

.touch-action--kick b {
  align-self: end;
  font-size: 12px;
}

.touch-action--kick small {
  align-self: start;
  margin-top: -3px;
  font-size: 7px;
  letter-spacing: 0.12em;
  opacity: 0.66;
}

.touch-action--snap {
  right: calc(max(24px, env(safe-area-inset-right)) + 176px);
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 106px);
  border-color: rgba(105, 239, 255, 0.58);
  background: radial-gradient(circle at 35% 28%, rgba(210, 251, 255, 0.42), rgba(30, 160, 184, 0.46), rgba(5, 18, 27, 0.76));
}

.touch-action--jump {
  right: calc(max(24px, env(safe-area-inset-right)) + 78px);
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 139px);
  border-color: rgba(167, 139, 255, 0.62);
  color: #e8e0ff;
}

.touch-action--grapple {
  right: calc(max(24px, env(safe-area-inset-right)) + 265px);
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 20px);
  border-color: rgba(255, 214, 107, 0.48);
  color: var(--gold-soft);
}

.touch-pause {
  position: absolute;
  bottom: max(205px, calc(env(safe-area-inset-bottom) + 205px));
  left: max(14px, env(safe-area-inset-left));
  min-width: 64px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(137, 239, 255, 0.42);
  background: rgba(4, 10, 19, 0.78);
  color: #d9faff;
  font: 900 8px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.16em;
  pointer-events: auto;
  touch-action: manipulation;
}

.touch-pause:active {
  color: #061017;
  background: var(--cyan);
}

/* --------------------------------------------------------------------------
   Start, pause, and win overlays
   -------------------------------------------------------------------------- */

.overlay {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 74% 14%, rgba(167, 139, 255, 0.18), transparent 25%),
    radial-gradient(circle at 17% 76%, rgba(105, 239, 255, 0.09), transparent 32%),
    rgba(1, 2, 4, 0.82);
  backdrop-filter: blur(11px) saturate(0.8);
  transition: opacity 260ms ease, visibility 0s linear;
}

.overlay.hidden {
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 255, 255, 0.76) 0 1px, transparent 1.6px),
    radial-gradient(circle at 26% 38%, rgba(105, 239, 255, 0.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 54% 12%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 42%, rgba(167, 139, 255, 0.74) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 84%, rgba(255, 214, 107, 0.65) 0 1px, transparent 1.7px);
  background-size: 263px 219px, 317px 273px, 229px 191px, 373px 307px, 283px 251px;
  opacity: 0.32;
}

.start-overlay {
  background:
    linear-gradient(90deg, rgba(1, 2, 4, 0.97) 0%, rgba(1, 2, 4, 0.84) 31%, rgba(1, 2, 4, 0.34) 58%, rgba(1, 2, 4, 0.06) 78%),
    linear-gradient(0deg, rgba(1, 2, 4, 0.78) 0%, transparent 34%, rgba(1, 2, 4, 0.12) 100%),
    radial-gradient(circle at 15% 49%, rgba(105, 239, 255, 0.12), transparent 34%);
  backdrop-filter: none;
}

.start-overlay::before,
.start-overlay::after {
  display: none;
}

.overlay-panel {
  position: relative;
  z-index: 4;
  width: min(580px, 92vw);
  padding: clamp(26px, 4vw, 54px);
  border: 1px solid rgba(150, 226, 240, 0.24);
  background:
    linear-gradient(145deg, rgba(9, 16, 25, 0.94), rgba(3, 6, 11, 0.87)),
    rgba(3, 7, 13, 0.92);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

.overlay-panel::before,
.overlay-panel::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(105, 239, 255, 0.58);
}

.overlay-panel::before {
  left: 0;
  top: 0;
}

.overlay-panel::after {
  right: 0;
  bottom: 0;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(255, 214, 107, 0.45);
}

.start-panel {
  justify-self: start;
  width: min(820px, 88vw);
  margin-left: clamp(8px, 5.5vw, 104px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  animation: title-arrive 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.start-panel::before,
.start-panel::after {
  display: none;
}

@keyframes title-arrive {
  from {
    opacity: 0;
    transform: translate3d(-28px, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.overlay-kicker {
  color: var(--cyan);
  font: 900 9px/1.2 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

#startTitle {
  width: min-content;
  margin: 0;
  color: #fff;
  font-size: clamp(46px, 7vw, 92px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.075em;
  line-height: 0.76;
  text-transform: uppercase;
}

#startTitle > span {
  display: block;
  padding-right: 0.08em;
  background: linear-gradient(104deg, #ffffff 0 42%, #dffcff 58%, #b8dcff 73%, #d6c1ff 86%, #ffe58f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(78px, 12.8vw, 190px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.095em;
  filter: drop-shadow(0 3px 0 rgba(3, 10, 18, 0.92)) drop-shadow(0 0 35px rgba(105, 239, 255, 0.22));
}

#startTitle::after {
  content: "";
  display: block;
  width: clamp(92px, 17vw, 250px);
  height: 3px;
  margin-top: clamp(22px, 3vh, 34px);
  background: linear-gradient(90deg, var(--cyan), var(--violet) 58%, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(105, 239, 255, 0.48);
}

#startTitle.is-fatal {
  width: min(680px, 86vw);
  font-size: clamp(42px, 7vw, 88px);
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-shadow: 0 0 35px rgba(255, 79, 103, 0.28);
}

.overlay-panel p {
  max-width: 50ch;
  margin: 0;
  color: #b8c8d0;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.62;
}

.start-error:not([hidden]) {
  display: block;
  max-width: 54ch;
  margin-top: 24px;
  color: #ffbdc7;
  font: 740 13px/1.55 ui-monospace, "Cascadia Mono", monospace;
}

.start-law {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: clamp(25px, 4vh, 42px) 0 clamp(24px, 3.5vh, 36px);
  padding-left: 15px;
  border-left: 2px solid var(--cyan);
  color: rgba(225, 243, 247, 0.82);
  font: 790 clamp(8px, 0.75vw, 11px)/1.35 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

.start-law > span {
  color: rgba(225, 243, 247, 0.82);
}

.start-law strong {
  color: var(--gold-soft);
}

.start-actions {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}

.start-panel .primary-button {
  min-width: 248px;
  min-height: 64px;
  padding-left: 25px;
  border-color: rgba(224, 252, 255, 0.74);
  box-shadow: 0 14px 46px rgba(49, 193, 216, 0.24), 0 0 0 1px rgba(105, 239, 255, 0.08);
}

.start-panel .primary-button span {
  font-size: 15px;
  letter-spacing: 0.13em;
}

.primary-button {
  position: relative;
  display: inline-grid;
  min-width: 240px;
  min-height: 58px;
  padding: 11px 49px 9px 20px;
  border: 1px solid rgba(201, 250, 255, 0.62);
  background: linear-gradient(110deg, var(--cyan-soft), var(--cyan) 52%, #70a9ff 100%);
  color: #031016;
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
  box-shadow: 0 12px 36px rgba(49, 193, 216, 0.18);
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.primary-button::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  font-size: 28px;
  font-weight: 300;
  transform: translateY(-53%);
}

.primary-button span,
.primary-button small {
  display: block;
}

.primary-button span {
  align-self: end;
  font-size: 13px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.primary-button small {
  align-self: start;
  margin-top: 3px;
  font: 820 7px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.14em;
  opacity: 0.64;
}

.primary-button:hover,
.primary-button:focus-visible {
  filter: brightness(1.09) saturate(1.06);
  transform: translateY(-2px);
  box-shadow: 0 17px 44px rgba(73, 216, 239, 0.26);
}

.primary-button:active {
  transform: translateY(0) scale(0.985);
}

.primary-button:disabled {
  cursor: wait;
  filter: grayscale(0.55) brightness(0.64);
}

.loading-track {
  width: min(320px, 100%);
  height: 3px;
  margin-top: 19px;
}

.compact-panel .primary-button {
  width: min(290px, 100%);
  margin-top: 22px;
}

#loadingMeter {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--gold));
  box-shadow: 0 0 12px rgba(105, 239, 255, 0.55);
  transition: width 180ms ease;
}

.start-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  margin-top: 12px;
  color: #657d88;
  font: 760 7px/1.2 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.11em;
}

.compact-panel,
.win-panel {
  text-align: center;
}

.compact-panel {
  width: min(520px, 90vw);
}

.compact-panel h2,
.win-panel h2 {
  margin: 15px 0 13px;
  color: #fff;
  font-size: clamp(34px, 5.5vw, 67px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 0.92;
  text-transform: uppercase;
}

.compact-panel p,
.win-panel p {
  margin-inline: auto;
}

.pause-rule {
  width: 76px;
  height: 3px;
  margin: 25px auto 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--gold));
  box-shadow: 0 0 15px rgba(105, 239, 255, 0.28);
}

.win-panel {
  width: min(660px, 92vw);
}

.win-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 27px 0 24px;
}

.win-stats > div {
  padding: 16px 8px 15px;
  border-top: 1px solid rgba(150, 226, 240, 0.23);
  border-bottom: 1px solid rgba(150, 226, 240, 0.09);
  background: rgba(198, 243, 250, 0.025);
}

.win-stats span,
.win-stats strong {
  display: block;
}

.win-stats span {
  color: var(--muted);
  font: 820 8px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.14em;
}

.win-stats strong {
  margin-top: 9px;
  color: var(--ink);
  font: 900 clamp(15px, 1.8vw, 22px)/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.04em;
}

.win-stats > div:last-child strong {
  color: var(--gold);
  font-size: clamp(22px, 2.7vw, 34px);
  filter: drop-shadow(0 0 9px rgba(255, 214, 107, 0.32));
}

.win-panel .primary-button {
  text-align: left;
}

/* --------------------------------------------------------------------------
   Responsive HUD and touch layouts
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hud-brand__edition,
  .hud-brand__slash {
    display: none;
  }

  .objective {
    width: min(48vw, 520px);
  }

  #controlsHint {
    max-width: calc(100vw - 410px);
  }

  .control-set {
    gap: 9px;
  }

  .control-set span:nth-child(2),
  .control-set span:nth-child(6) {
    display: none;
  }
}

@media (max-width: 760px) and (pointer: fine) {
  .hud-brand__mark,
  .vitals-panel,
  .ball-panel,
  #controlsHint {
    display: none;
  }}

@media all {
  body.touch-enabled #gameCanvas {
    cursor: default;
  }

  body.touch-enabled #touchControls {
    display: block;
  }

  body.touch-enabled #controlsHint,
  body.touch-enabled #fullscreenButton {
    display: none;
  }  body.touch-enabled .utility-controls {
    top: auto;
    right: auto;
    bottom: max(160px, calc(env(safe-area-inset-bottom) + 160px));
    left: max(14px, env(safe-area-inset-left));
  }

  body.touch-enabled .utility-button {
    min-height: 24px;
    padding-inline: 7px;
    font-size: 6px;
  }

  body.touch-enabled #chargeUI {
    width: 92px;
    height: 92px;
  }  body.touch-enabled .start-panel {
    justify-self: center;
    margin-left: 0;
  }

  body.touch-enabled .start-overlay::after,
  body.touch-enabled .start-orbit {
    opacity: 0.28;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.touch-enabled .touch-pad {
    width: 112px;
    height: 112px;
  }

  body.touch-enabled .touchKnob {
    width: 46px;
    height: 46px;
    margin: -23px;
  }

  body.touch-enabled .touch-pad > span {
    bottom: -15px;
    font-size: 7px;
  }

  body.touch-enabled .touch-action {
    width: 52px;
    height: 52px;
    font-size: 8px;
  }

  body.touch-enabled .touch-action--kick {
    right: calc(max(18px, env(safe-area-inset-right)) + 135px);
    bottom: max(19px, env(safe-area-inset-bottom));
    width: 70px;
    height: 70px;
  }

  body.touch-enabled .touch-action--snap {
    right: calc(max(18px, env(safe-area-inset-right)) + 150px);
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 89px);
  }

  body.touch-enabled .touch-action--jump {
    right: calc(max(18px, env(safe-area-inset-right)) + 67px);
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 116px);
  }

  body.touch-enabled .touch-action--grapple {
    right: calc(max(18px, env(safe-area-inset-right)) + 230px);
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 15px);
  }

  body.touch-enabled #movePad {
    left: max(18px, env(safe-area-inset-left));
    bottom: max(19px, env(safe-area-inset-bottom));
  }

  body.touch-enabled #lookPad {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(19px, env(safe-area-inset-bottom));
  }

  body.touch-enabled #chargeUI {
    width: 82px;
    height: 82px;
  }

  body.touch-enabled .overlay {
    padding-block: 12px;
  }

  body.touch-enabled .overlay-panel {
    width: min(650px, 82vw);
    padding: 20px 28px;
  }

  body.touch-enabled #startTitle {
    margin: 9px 0 10px;
  }

  body.touch-enabled #startTitle span {
    font-size: clamp(40px, 8vw, 68px);
  }

  body.touch-enabled #startTitle small {
    margin-top: 8px;
    font-size: 15px;
  }

  body.touch-enabled #startCopy {
    max-width: 60ch;
    font-size: 11px;
    line-height: 1.42;
  }

  body.touch-enabled .start-law {
    margin: 11px 0;
    font-size: 7px;
  }

  body.touch-enabled .primary-button {
    min-height: 48px;
  }

  body.touch-enabled .loading-track {
    margin-top: 10px;
  }

  body.touch-enabled .start-meta {
    margin-top: 7px;
  }
}

/* Gesture-first mobile pass: the playfield is the controller. The left half
   owns movement, the right half owns camera + ball, and JUMP is the only
   persistent gameplay button. */
body.touch-enabled .touch-action--kick,
body.touch-enabled .touch-action--snap,
body.touch-enabled .touch-action--spin,
body.touch-enabled .utility-controls,
body.touch-enabled #controlsHint {
  display: none !important;
}

body.touch-enabled .touch-zone > .touch-pad {
  opacity: 0;
}

body.touch-enabled .touch-zone.is-active > .touch-pad {
  opacity: .54;
}

body.touch-enabled .touch-zone.is-holding > .touch-pad {
  opacity: .82;
  border-color: rgba(255, 223, 112, .9);
  box-shadow: inset 0 0 32px rgba(255, 214, 107, .12), 0 0 28px rgba(105, 239, 255, .18);
}

body.touch-enabled .touch-zone.is-holding .touchKnob {
  border-color: rgba(255, 240, 164, .96);
  background: radial-gradient(circle at 34% 27%, #fff9cf, rgba(255, 214, 107, .5) 32%, rgba(50, 27, 96, .74));
}

body.touch-enabled #lookPad > .touch-pad {
  top: 62%;
}

body.touch-enabled #movePad > .touch-pad {
  top: 72%;
}

body.touch-enabled .touch-pad > span {
  bottom: -22px;
  max-width: 44vw;
  overflow: hidden;
  color: rgba(225, 248, 255, .9);
  font-size: 9px;
  text-overflow: ellipsis;
}

body.touch-enabled .touch-action--jump {
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
  width: 68px !important;
  height: 68px !important;
  border: 2px solid rgba(194, 171, 255, .78);
  background: radial-gradient(circle at 32% 25%, rgba(245, 240, 255, .62), rgba(116, 81, 198, .58) 38%, rgba(8, 12, 24, .82));
  box-shadow: 0 0 25px rgba(158, 116, 255, .22), 0 10px 30px rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 9px !important;
}

body.touch-enabled .touch-pause {
  z-index: 18;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
  border-color: rgba(154, 231, 243, .28);
  background: rgba(3, 8, 16, .48);
  color: rgba(225, 248, 255, .74);
  font-size: 8px;
}

@media (orientation: portrait) {
  body.touch-enabled #lookPad > .touch-pad {
    top: 70%;
  }

  body.touch-enabled #movePad > .touch-pad {
    top: 78%;
  }}

@media (orientation: portrait) {  body.touch-enabled .touch-pad {
    width: 112px;
    height: 112px;
  }

  body.touch-enabled .touchKnob {
    width: 46px;
    height: 46px;
    margin: -23px;
  }

  body.touch-enabled #movePad {
    left: max(16px, env(safe-area-inset-left));
    bottom: max(26px, env(safe-area-inset-bottom));
  }

  body.touch-enabled #lookPad {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(26px, env(safe-area-inset-bottom));
  }

  body.touch-enabled .touch-action {
    width: 56px;
    height: 56px;
    font-size: 8px;
  }

  body.touch-enabled .touch-action--kick {
    right: calc(max(16px, env(safe-area-inset-right)) + 122px);
    bottom: max(35px, env(safe-area-inset-bottom));
    width: 72px;
    height: 72px;
  }

  body.touch-enabled .touch-action--snap {
    right: calc(max(16px, env(safe-area-inset-right)) + 63px);
    bottom: calc(max(26px, env(safe-area-inset-bottom)) + 133px);
  }

  body.touch-enabled .touch-action--jump {
    right: calc(max(16px, env(safe-area-inset-right)) + 122px);
    bottom: calc(max(26px, env(safe-area-inset-bottom)) + 93px);
  }

  body.touch-enabled .touch-action--grapple {
    right: calc(max(16px, env(safe-area-inset-right)) + 144px);
    bottom: calc(max(26px, env(safe-area-inset-bottom)) + 166px);
  }

  body.touch-enabled #chargeUI {
    width: 88px;
    height: 88px;
  }  body.touch-enabled .start-overlay::after {
    right: -44vw;
    top: 25%;
    width: 108vw;
  }

  body.touch-enabled .overlay-panel {
    width: min(92vw, 560px);
    padding: 28px 24px;
  }

  body.touch-enabled #startTitle span {
    font-size: clamp(46px, 17vw, 72px);
  }

  body.touch-enabled #startTitle small {
    font-size: clamp(14px, 5vw, 21px);
  }

  body.touch-enabled .start-law {
    align-items: flex-start;
    font-size: 8px;
    line-height: 1.45;
  }

  body.touch-enabled .primary-button {
    width: 100%;
  }

  body.touch-enabled .win-stats {
    grid-template-columns: 1fr;
  }

  body.touch-enabled .win-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 10px;
  }

  body.touch-enabled .win-stats strong {
    margin-top: 0;
  }
}

@media (orientation: portrait) and (max-width: 340px) {
  body.touch-enabled .touch-pad {
    width: 96px;
    height: 96px;
  }

  body.touch-enabled .touchKnob {
    width: 42px;
    height: 42px;
    margin: -21px;
  }

  body.touch-enabled #movePad {
    left: max(10px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
  }

  body.touch-enabled #lookPad {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
  }

  body.touch-enabled .touch-action {
    width: 50px;
    height: 50px;
    font-size: 7px;
  }

  body.touch-enabled .touch-action--kick {
    right: calc(max(10px, env(safe-area-inset-right)) + 123px);
    bottom: max(24px, env(safe-area-inset-bottom));
    width: 62px;
    height: 62px;
  }

  body.touch-enabled .touch-action--snap {
    right: calc(max(10px, env(safe-area-inset-right)) + 60px);
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 130px);
  }

  body.touch-enabled .touch-action--jump {
    right: calc(max(10px, env(safe-area-inset-right)) + 140px);
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 108px);
  }

  body.touch-enabled .touch-action--grapple {
    right: calc(max(10px, env(safe-area-inset-right)) + 75px);
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 172px);
  }

  body.touch-enabled #chargeUI {
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 390px), (max-height: 330px) {  .start-meta {
    display: none;
  }
}

.home-link {
  position: fixed;
  z-index: 120;
  left: max(16px, env(safe-area-inset-left));
  top: calc(max(12px, env(safe-area-inset-top)) + 48px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(121, 235, 255, 0.42);
  border-radius: 999px;
  color: #e9fcff;
  background: rgba(1, 5, 12, 0.78);
  box-shadow: 0 0 22px rgba(77, 222, 255, 0.13);
  font: 700 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  transition: opacity 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.home-link:hover,
.home-link:focus-visible {
  border-color: rgba(255, 226, 96, 0.86);
  outline: none;
  transform: translateY(-1px);
}

body.pointer-locked .home-link {
  opacity: 0;
  pointer-events: none;
}

/* The grapple is a distinct traversal verb, especially for ship sockets. It
   deliberately sits left of DROP and JUMP, leaving the right-hand ball pad
   free for the existing kick / recall / Moonfall grammar. The button itself
   has no printed word: the bright tether-and-spark glyph is the affordance. */
body.touch-enabled .touch-action--grapple {
  display: grid !important;
  right: calc(max(18px, env(safe-area-inset-right)) + 144px) !important;
  bottom: max(28px, env(safe-area-inset-bottom)) !important;
  width: 52px !important;
  height: 52px !important;
  border-color: rgba(255, 214, 107, .78);
  background: radial-gradient(circle at 34% 28%, rgba(255, 250, 212, .56), rgba(209, 157, 44, .42) 38%, rgba(20, 13, 5, .84));
  color: #fff2ad;
  box-shadow: inset 0 0 20px rgba(255, 224, 104, .16), 0 0 20px rgba(255, 194, 56, .22), 0 8px 24px rgba(0, 0, 0, .32);
}

#touchGrapple svg {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4.5;
  filter: drop-shadow(0 0 4px rgba(255, 240, 164, .72));
}

@media (max-width: 340px) {
  body.touch-enabled .touch-action--grapple {
    right: calc(max(10px, env(safe-area-inset-right)) + 138px) !important;
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 520px), (max-height: 430px) {
  .home-link {
    left: max(10px, env(safe-area-inset-left));
    top: calc(max(8px, env(safe-area-inset-top)) + 34px);
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
    padding: 0;
  }

  .home-link__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

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

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

@keyframes charge-lock {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.055); }
}

/* --------------------------------------------------------------------------
   Mobile mastery controls

   The whole left and right halves are input surfaces. Their rings are only
   floating feedback, so a thumb never has to hunt for a fixed joystick.
   -------------------------------------------------------------------------- */

body.touch-enabled #hud {
  z-index: 40;
}

.touch-zone {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

body.touch-enabled #movePad.touch-zone {
  right: auto;
  bottom: 0;
  left: 0;
  width: 50%;
  height: auto;
}

body.touch-enabled #lookPad.touch-zone {
  right: 0;
  bottom: 0;
  left: auto;
  width: 50%;
  height: auto;
  border: 0;
}

.touch-zone > .touch-pad {
  pointer-events: none;
  opacity: 0.13;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 120ms ease, filter 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  will-change: left, top, opacity, filter;
}

#movePad > .touch-pad {
  left: 50%;
  top: 73%;
}

#lookPad > .touch-pad {
  left: 50%;
  top: 38%;
  border-color: rgba(167, 139, 255, 0.38);
}

.touch-zone.is-active > .touch-pad {
  opacity: 0.78;
  filter: brightness(1.14);
}

.touch-zone.is-loop > .touch-pad {
  border-color: rgba(255, 223, 112, 0.96);
  box-shadow: inset 0 0 36px rgba(178, 116, 255, 0.18), 0 0 34px rgba(255, 213, 92, 0.34);
  filter: brightness(1.55) saturate(1.35);
}

.touch-zone.is-loop .touchKnob {
  border-color: #fff2a8;
  background: radial-gradient(circle at 34% 27%, #fff, rgba(255, 214, 107, 0.68) 28%, rgba(127, 76, 210, 0.76));
}

body.touch-enabled .touch-action,
body.touch-enabled .touch-pause {
  z-index: 6;
}

body.touch-enabled .touch-action--kick {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 76px;
  height: 76px;
}

body.touch-enabled .touch-action--snap {
  right: calc(max(18px, env(safe-area-inset-right)) + 88px);
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 12px);
  width: 54px;
  height: 54px;
}

body.touch-enabled .touch-action--jump {
  right: max(22px, env(safe-area-inset-right));
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 94px);
  width: 60px;
  height: 60px;
}

body.touch-enabled .touch-action--grapple {
  display: none;
}

@media (orientation: portrait) {
  #movePad > .touch-pad {
    left: 50%;
    top: 82%;
  }

  #lookPad > .touch-pad {
    left: 50%;
    top: 53%;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.touch-enabled .touch-action--kick {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 70px;
    height: 70px;
  }

  body.touch-enabled .touch-action--snap {
    right: calc(max(18px, env(safe-area-inset-right)) + 82px);
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
    width: 50px;
    height: 50px;
  }

  body.touch-enabled .touch-action--jump {
    right: max(22px, env(safe-area-inset-right));
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 82px);
    width: 56px;
    height: 56px;
  }

  #movePad > .touch-pad {
    top: 72%;
  }

  #lookPad > .touch-pad {
    top: 36%;
  }
}

/* Final gesture-control authority. Keep this after the legacy responsive
   rules so phone play has only the two indispensable movement discs. */
body.touch-enabled .touch-action--kick,
body.touch-enabled .touch-action--snap,
body.touch-enabled .touch-action--spin,
body.touch-enabled .utility-controls,
body.touch-enabled #controlsHint {
  display: none !important;
}

body.touch-enabled .touch-zone > .touch-pad { opacity: 0; }
body.touch-enabled .touch-zone.is-active > .touch-pad { opacity: .54; }
body.touch-enabled .touch-zone.is-holding > .touch-pad { opacity: .82; }

body.touch-enabled #lookPad > .touch-pad { top: 62%; }
body.touch-enabled #movePad > .touch-pad { top: 72%; }

body.touch-enabled .touch-action--jump {
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
  width: 68px !important;
  height: 68px !important;
}

body.touch-enabled .touch-action--drop {
  right: calc(max(18px, env(safe-area-inset-right)) + 80px) !important;
  bottom: max(28px, env(safe-area-inset-bottom)) !important;
  width: 52px !important;
  height: 52px !important;
  border-color: rgba(255, 111, 174, 0.72);
  background: radial-gradient(circle at 34% 28%, rgba(255, 228, 245, 0.38), rgba(182, 50, 133, 0.54), rgba(21, 8, 34, 0.82));
  color: #ffe4f4;
  box-shadow: inset 0 0 22px rgba(255, 111, 174, 0.12), 0 0 18px rgba(255, 111, 174, 0.16), 0 8px 24px rgba(0, 0, 0, 0.32);
}

body.touch-enabled .touch-pause {
  z-index: 18;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
}

#crosshair[data-line="true"] {
  filter: drop-shadow(0 1px 1px rgba(0, 3, 8, .96)) drop-shadow(0 0 10px rgba(255, 214, 107, .84));
}

#crosshair[data-line="true"] b {
  background: #fff0a8;
  box-shadow: 0 0 0 1px rgba(0, 3, 8, .9), 0 0 0 3px rgba(105, 239, 255, .18), 0 0 12px rgba(255, 214, 107, .82);
}

#crosshair[data-target="anchor"] {
  filter: drop-shadow(0 1px 1px rgba(0, 3, 8, .96)) drop-shadow(0 0 10px rgba(105, 239, 255, .96));
}

#crosshair[data-target="anchor"] i {
  background: #ffd86f;
}

#crosshair[data-target="anchor"] b {
  background: transparent;
  border: 2px solid #fff0a8;
  box-shadow: 0 0 0 1px rgba(0, 3, 8, .92), 0 0 0 3px rgba(105, 239, 255, .22), 0 0 13px rgba(255, 214, 107, .86);
  transform: scale(1.5);
}

@media (orientation: portrait) {
  body.touch-enabled #lookPad > .touch-pad { top: 70%; }
  body.touch-enabled #movePad > .touch-pad { top: 78%; }
}


/* ============================================================
   HUD PURGE (3.7): what the visor shows instead of text
   ------------------------------------------------------------
   The old HUD narrated the game in five panels. Everything that
   survived here is either a reticle or a pure-light state cue —
   nothing the player has to read mid-play. Controls and settings
   moved into the overlays, where reading costs no momentum.
   ============================================================ */

/* Screen readers still need the state the visuals now carry. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sustained suit damage frosts the visor edge; it deepens as health
   falls, so "I am nearly dead" is peripheral vision, not a pip row. */
#visorFrost {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 112% 88% at 51% 47%, transparent 45%, rgba(255, 118, 122, .1) 68%, rgba(255, 47, 64, .42) 116%),
    radial-gradient(ellipse 72% 45% at 8% 96%, rgba(255, 75, 88, .32), transparent 66%),
    radial-gradient(ellipse 64% 42% at 94% 5%, rgba(255, 115, 120, .2), transparent 70%),
    linear-gradient(118deg, transparent 0 17%, rgba(255, 204, 204, .13) 17.5% 18%, transparent 18.6% 81%, rgba(96, 0, 18, .2) 82% 83%, transparent 84%);
  mix-blend-mode: screen;
  transition: opacity 320ms ease;
}

/* WATER ON THE CAMERA. Alex: "maybe even one of those effects in first
   person where it looks like theres water on the camera. But not full time.
   maybe when you drop far or when you're on a grind rail."

   Every droplet is one authored radial-gradient given its OWN small tile, so
   the browser rasterises thirteen postage stamps instead of thirteen
   full-screen layers. That is the whole performance story of this rule. The
   pattern is designed, not noise: the aiming lane and the crosshair are left
   clear, and the drops are weighted to the edges so the middle reads first as
   the sheet runs off.

   Each drop is concentric on purpose -- a droplet on a lens is a tiny
   converging lens, so it shows a bright core, a DARK refracted ring and a
   bright caustic rim. That is also what makes it survive anywhere: the dark
   half reads over a lit water surface, the bright half reads over a black lava
   sky, and neither half depends on hue.

   This one deliberately does NOT use mix-blend-mode: screen the way its
   siblings do. Screen can only brighten, and a droplet that cannot darken
   vanishes the moment the ocean is bright. No backdrop-filter either: it would
   force a readback of the live WebGL canvas every frame, and that is the one
   CSS property that can put this game under its budget on a phone.

   Sizes are in vmin so a drop is the same fraction of the screen on Alex's
   phone as on a desktop. JS animates only opacity and transform; the gradients
   never change, so nothing re-rasterises while the water runs off. */
#visorWater {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 44%;
  background-repeat: no-repeat;
  background-image:
    /* two runners: a heavy head with a soft smear above it, the drop and the
       track it has already left behind on the glass */
    radial-gradient(ellipse 42% 46% at 50% 50%, rgba(255, 255, 255, .80) 0 7%, rgba(184, 228, 252, .30) 16%, rgba(4, 16, 28, .50) 31% 52%, rgba(228, 250, 255, .72) 63% 73%, rgba(120, 190, 222, .12) 81%, transparent 89%),
    radial-gradient(ellipse 26% 50% at 50% 62%, rgba(216, 246, 255, .30) 0 26%, rgba(5, 20, 34, .19) 54%, transparent 88%),
    radial-gradient(ellipse 42% 46% at 50% 50%, rgba(255, 255, 255, .74) 0 7%, rgba(4, 16, 28, .46) 31% 52%, rgba(224, 248, 255, .68) 63% 73%, rgba(150, 208, 236, .10) 81%, transparent 89%),
    radial-gradient(ellipse 26% 50% at 50% 62%, rgba(210, 242, 255, .26) 0 26%, rgba(5, 20, 34, .16) 54%, transparent 88%),
    /* six beads with a real lens core: bright point, dark refracted ring,
       bright caustic rim. A droplet on glass is a tiny converging lens, so
       the bright middle and the dark ring around it are the true shape. */
    radial-gradient(ellipse 44% 46% at 50% 47%, rgba(255, 255, 255, .82) 0 7%, rgba(190, 232, 254, .30) 16%, rgba(4, 16, 28, .52) 31% 53%, rgba(230, 251, 255, .74) 64% 73%, rgba(122, 192, 224, .12) 81%, transparent 89%),
    radial-gradient(ellipse 44% 46% at 50% 47%, rgba(255, 255, 255, .76) 0 8%, rgba(186, 230, 254, .26) 17%, rgba(4, 16, 28, .49) 31% 53%, rgba(226, 250, 255, .70) 64% 74%, rgba(150, 208, 236, .10) 82%, transparent 89%),
    radial-gradient(ellipse 44% 46% at 50% 47%, rgba(255, 255, 255, .72) 0 9%, rgba(4, 16, 28, .46) 30% 53%, rgba(222, 248, 255, .66) 64% 75%, rgba(150, 208, 236, .10) 83%, transparent 90%),
    radial-gradient(ellipse 44% 46% at 50% 47%, rgba(255, 255, 255, .68) 0 10%, rgba(4, 16, 28, .43) 30% 53%, rgba(218, 246, 255, .62) 64% 76%, rgba(150, 208, 236, .09) 84%, transparent 90%),
    radial-gradient(ellipse 44% 46% at 50% 47%, rgba(255, 255, 255, .74) 0 12%, rgba(4, 16, 28, .40) 34% 56%, rgba(222, 248, 255, .60) 66% 78%, rgba(150, 208, 236, .09) 85%, transparent 91%),
    radial-gradient(ellipse 44% 46% at 50% 47%, rgba(255, 255, 255, .70) 0 13%, rgba(4, 16, 28, .37) 34% 56%, rgba(218, 246, 255, .56) 66% 78%, rgba(150, 208, 236, .08) 85%, transparent 91%),
    /* six specks, the ones that survive longest */
    radial-gradient(ellipse 42% 42% at 50% 50%, rgba(255, 255, 255, .78) 0 17%, rgba(5, 18, 32, .36) 40% 58%, rgba(222, 248, 255, .60) 70% 82%, transparent 96%),
    radial-gradient(ellipse 42% 42% at 50% 50%, rgba(255, 255, 255, .74) 0 17%, rgba(5, 18, 32, .33) 40% 58%, rgba(218, 246, 255, .56) 70% 82%, transparent 96%),
    radial-gradient(ellipse 42% 42% at 50% 50%, rgba(255, 255, 255, .80) 0 24%, rgba(5, 18, 32, .28) 48% 64%, rgba(220, 247, 255, .50) 76% 88%, transparent 98%),
    radial-gradient(ellipse 42% 42% at 50% 50%, rgba(255, 255, 255, .76) 0 24%, rgba(5, 18, 32, .25) 48% 64%, rgba(216, 245, 255, .47) 76% 88%, transparent 98%),
    radial-gradient(ellipse 42% 42% at 50% 50%, rgba(255, 255, 255, .82) 0 30%, rgba(206, 242, 255, .44) 62% 82%, transparent 98%),
    radial-gradient(ellipse 42% 42% at 50% 50%, rgba(255, 255, 255, .78) 0 30%, rgba(202, 240, 255, .40) 62% 82%, transparent 98%),
    /* water clinging along the top of the visor -- a wet edge, kept thin so it
       never turns into fog over the sky */
    linear-gradient(180deg, rgba(220, 246, 255, .20) 0, rgba(150, 208, 236, .08) 12%, rgba(118, 178, 208, .025) 22%, transparent 34%),
    /* the wet-lens rim: darkens toward the edge, then catches a bright caustic
       right at it, so the frame still reads as wet even where no drop happens
       to land on something busy */
    radial-gradient(ellipse 52% 56% at 50% 46%, transparent 0 52%, rgba(4, 18, 32, .09) 70%, rgba(4, 18, 32, .27) 89%, rgba(198, 238, 255, .20) 100%);
  background-size:
    7vmin 10.4vmin,
    4.6vmin 20vmin,
    5.8vmin 8.8vmin,
    3.8vmin 17vmin,
    10.6vmin 11.2vmin,
    8.8vmin 9.4vmin,
    7.4vmin 7.8vmin,
    6.2vmin 6.6vmin,
    5.4vmin 5.6vmin,
    4.6vmin 4.8vmin,
    5vmin 5vmin,
    5.4vmin 5.6vmin,
    3.4vmin 3.4vmin,
    3.8vmin 3.8vmin,
    2.8vmin 2.8vmin,
    3.1vmin 3.1vmin,
    100% 100%,
    100% 100%;
  background-position:
    7% 30%,
    7% 12%,
    80% 90%,
    80% 72%,
    91% 12%,
    16% 80%,
    97% 56%,
    3% 48%,
    86% 30%,
    96% 33%,
    37% 4%,
    65% 97%,
    27% 92%,
    73% 22%,
    22% 34%,
    88% 76%,
    50% 0%,
    50% 50%;
}

/* Earning a ball core blooms the whole frame in that core's colour. */
#rewardFlash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 255, 255, .72) 0 3%, var(--reward-tint, rgba(255, 226, 140, .85)) 12%, transparent 58%),
    radial-gradient(circle at 50% 54%, transparent 40%, rgba(255, 242, 194, .2) 48%, transparent 66%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Controls and settings now live inside overlay panels: static flow,
   not absolute HUD furniture. */
#controlsHint {
  position: static;
  max-width: none;
  transform: none;
  margin: 2px 0 4px;
  opacity: .74;
}

/* The desktop launch panel has a clipped lower-right corner. The former
   single unbreakable row was 49px wider than its own content box at 1280x720,
   so the last controls ran underneath that corner (and farther out on smaller
   PC windows). Give every verb an authored cell: two calm rows remain readable
   without shrinking the type or depending on overflow outside the panel. */
.start-panel #controlsHint .control-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-content: stretch;
  gap: 8px 14px;
  width: 100%;
  white-space: normal;
}

.start-panel #controlsHint .control-set span {
  min-width: 0;
  white-space: nowrap;
}

.start-panel #controlsHint .gamepad-hints,
body.using-gamepad .start-panel #controlsHint .keyboard-hints {
  display: none;
}

body.using-gamepad .start-panel #controlsHint .gamepad-hints {
  display: grid;
}

@media (max-width: 560px) {
  .start-panel #controlsHint .control-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.utility-controls {
  position: static;
  justify-content: center;
  margin-top: 14px;
}

/* The site back-link is chrome. Once the view locks, it goes away. */
body.pointer-locked .home-link {
  opacity: 0;
  pointer-events: none;
}

/* Touch pads lost their captions with the rest of the reading. */
body.touch-enabled .touch-pad > span {
  display: none;
}

/* COLLECTIBLE BANK — ONE shape, one count, one 2,000 meter, on every moon.
   The centre movement lane stays bare. */
/* An ID selector outranks the UA's [hidden] rule, so these two have to say
   it themselves or .hidden is purely decorative. This shipped broken once:
   the tag hung over the pause screen while its .hidden property said "gone". */
#proximityTag[hidden] { display: none !important; }
#planetCollectibleTarget[hidden] { display: none !important; }

/* THE PROXIMITY TAG. Hovers over the one nearby thing that is waiting on the
   player. (Alex, 2026-09-05: "little hovering things if you're close to
   something ... could say like x/500".) Colour is never the only signal:
   the meter fills, the border thickens and the whole tag lifts when you can
   afford what it is asking for. */
#proximityTag {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 11px 7px;
  border: 1px solid rgba(190, 221, 239, .16);
  border-radius: 12px;
  background: linear-gradient(108deg, rgba(2, 7, 14, .72), rgba(12, 8, 18, .46));
  box-shadow: 0 2px 14px rgba(0, 0, 0, .38), inset 0 0 16px rgba(93, 171, 204, .05);
  font-family: 'Chakra Petch', 'Segoe UI', monospace;
  color: var(--gold-soft);
  filter: drop-shadow(0 1px 1px rgba(0, 3, 8, .96));
  pointer-events: none;
  opacity: .82;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, 1.5, .4, 1), border-color .18s ease;
  z-index: 4;
}
#proximityTag .proximity-tag__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  color: var(--muted);
  white-space: nowrap;
}
#proximityTag .proximity-tag__count {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
}
#proximityTag .proximity-tag__count i {
  font-style: normal;
  opacity: .38;
  padding: 0 1px;
}
#proximityTag .proximity-tag__need { opacity: .58; font-size: 13px; }
#proximityTag .proximity-tag__meter {
  display: block;
  width: 100%;
  min-width: 62px;
  height: 2px;
  border-radius: 2px;
  background: rgba(190, 221, 239, .16);
  overflow: hidden;
}
#proximityTag .proximity-tag__meter b {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: currentColor;
  transition: width .22s ease;
}
/* AFFORDABLE. It lifts, brightens and squares up. The shape changes, not just
   the hue -- meaning never lives in colour alone in this game. */
#proximityTag[data-afford="true"] {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 4px));
  border-color: rgba(105, 239, 255, .46);
  box-shadow: 0 3px 18px rgba(0, 0, 0, .42), 0 0 22px rgba(105, 239, 255, .16), inset 0 0 18px rgba(93, 171, 204, .09);
}
#proximityTag[data-afford="true"] .proximity-tag__label { color: var(--cyan-soft); }
/* A boss court counts bosses, not crescents, and must never be mistaken for
   money. Violet, and its meter is stepped rather than smooth. */
#proximityTag[data-unit="boss"] { color: #dcc9ff; }
#proximityTag[data-unit="boss"] .proximity-tag__meter b {
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px);
}
#proximityTag[data-kind="gate"] { color: #ffb9ec; }
@media (max-width: 760px), (pointer: coarse) {
  /* The phone is the important screen. Smaller, and pulled further from the
     aiming lane. */
  #proximityTag { padding: 5px 9px 6px; gap: 2px; }
  #proximityTag .proximity-tag__label { font-size: 9px; letter-spacing: .15em; }
  #proximityTag .proximity-tag__count { font-size: 15px; }
  #proximityTag .proximity-tag__meter { min-width: 52px; }
}

/* WHAT THIS WORLD IS WAITING FOR. Two lines on the pause screen, in the same
   glass language as the win panel's stats. */
#pauseProgress {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
}
#pauseProgress .pause-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(150, 226, 240, .14);
  border-radius: 10px;
  background: rgba(4, 9, 17, .46);
}
#pauseProgress dt {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--muted);
}
#pauseProgress dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-align: right;
}
#pauseProgress strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold-soft);
}
#pauseProgress small {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
  opacity: .82;
}
/* THE TEST DRAWER. Quiet, shut by default, one deliberate click away -- the
   same treatment the controls drawer gets on the start screen. */
.pause-test {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid rgba(150, 226, 240, .1);
  padding-top: 8px;
}
.pause-test > summary {
  cursor: pointer;
  list-style: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--muted);
  opacity: .45;
  padding: 3px 0;
  transition: opacity .16s ease;
}
.pause-test > summary::-webkit-details-marker { display: none; }
.pause-test > summary:hover,
.pause-test > summary:focus-visible { opacity: .9; }
.pause-test__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 7px;
}
.pause-test__row .utility-button {
  font-size: 10px;
  letter-spacing: .12em;
  padding: 6px 10px;
}
.pause-test__note {
  margin: 8px 0 0;
  min-height: 12px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--cyan-soft);
  opacity: .72;
}

#stoneCounter {
  position: absolute;
  left: 24px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 34px;
  padding: 5px 8px 5px 7px;
  border: 1px solid rgba(190, 221, 239, .12);
  border-radius: 14px;
  background: linear-gradient(108deg, rgba(2, 7, 14, .62), rgba(12, 8, 18, .34));
  box-shadow: 0 2px 12px rgba(0, 0, 0, .26), inset 0 0 16px rgba(93, 171, 204, .04);
  font-family: 'Chakra Petch', 'Segoe UI', monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff1bc;
  filter: drop-shadow(0 1px 1px rgba(0, 3, 8, .96)) drop-shadow(0 0 10px rgba(255, 190, 60, .5));
  pointer-events: none;
  transform-origin: left center;
}
#stoneCounter[data-planet="water"] {
  color: #b9ffff;
  border-color: rgba(105, 239, 255, .2);
  filter: drop-shadow(0 1px 1px rgba(0, 3, 8, .96)) drop-shadow(0 0 10px rgba(69, 221, 255, .34));
}
#stoneCounter[data-planet="lava"] {
  color: #ffe39a;
  border-color: rgba(255, 113, 48, .2);
  filter: drop-shadow(0 1px 1px rgba(0, 3, 8, .96)) drop-shadow(0 0 10px rgba(255, 91, 30, .34));
}
.collectible-cell {
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 6px;
  min-width: 43px;
}
.collectible-icon { display: block; width: 17px; height: 17px; }
@keyframes stoneShimmer {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}
#stoneCounter.bump { animation: stoneBump .26s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stoneBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.32); }
  100% { transform: scale(1); }
}
.stone-crescent {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 38%, #fff6d8, #ffb42a 58%, #a86a06);
  -webkit-mask: radial-gradient(circle at 74% 32%, transparent 55%, #000 57%);
  mask: radial-gradient(circle at 74% 32%, transparent 55%, #000 57%);
  filter: drop-shadow(0 1px 1px rgba(0, 3, 8, .96)) drop-shadow(0 0 8px rgba(255, 190, 60, .92));
}
.collectible-rare {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 13%, #ffb8df 36%, #b44eea 68%, #32104e 100%);
  box-shadow: 0 0 9px rgba(255, 114, 198, .72), inset 0 -2px 4px rgba(29, 2, 45, .7);
}
.collectible-route {
  box-sizing: border-box;
  border: 3px solid currentColor;
  border-radius: 50%;
  transform: rotate(-25deg) scaleY(.72);
  box-shadow: 0 0 8px currentColor, inset 0 0 5px currentColor;
}
#stoneCounter[data-planet="lava"] .collectible-rare {
  border-radius: 2px;
  transform: rotate(45deg) scale(.82);
  background: radial-gradient(circle at 32% 27%, #fff, #ffe277 38%, #ff6a19 72%, #401008);
}
#planetCollectibleTarget {
  display: grid;
  grid-template-columns: auto;
  align-items: baseline;
  column-gap: 2px;
  min-width: 58px;
  padding-left: 10px;
  border-left: 1px solid rgba(205, 230, 244, .16);
  font-size: 14px;
  color: inherit;
}
#planetCollectibleTarget small { font-size: 8px; opacity: .58; letter-spacing: 0; }
.collectible-gate {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(117, 146, 171, .24);
}
#planetCollectibleGateFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  transition: width .18s ease-out;
}
/* The seal meter is the same promise on all three moons, so it is never
   hidden on the Moon any more. */
#stoneCounter.milestone .stone-crescent::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 224, 130, .9);
  animation: stoneMilestone .7s ease-out forwards;
}
@keyframes stoneMilestone {
  from { transform: scale(.4); opacity: 1; }
  to { transform: scale(2.1); opacity: 0; }
}

/* BOSS TROPHY SOCKETS — seven glass dots above the crescent counter, each
   lighting in its core's own colour when that boss falls. */
#coreCounter {
  position: absolute;
  left: 26px;
  bottom: 62px;
  display: none;
  gap: 8px;
  pointer-events: none;
}
.core-socket {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(157, 191, 224, .12), rgba(7, 12, 23, .88) 64%);
  border: 1px solid rgba(166, 198, 232, .42);
  box-shadow: 0 1px 1px rgba(0, 3, 8, .9), inset 0 0 5px rgba(0, 0, 0, .86);
  transition: transform .18s cubic-bezier(.2, 1.6, .4, 1);
}
.core-socket.lit {
  background: radial-gradient(circle at 36% 32%, #ffffff, var(--core-tint, #ffd66b) 55%, rgba(0, 0, 0, .5));
  border-color: var(--core-tint, #ffd66b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72), 0 0 10px var(--core-tint, #ffd66b), inset 0 -2px 3px rgba(0, 0, 0, .42);
}
.core-socket.flash {
  animation: coreFlash .8s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes coreFlash {
  0% { transform: scale(.4); }
  45% { transform: scale(1.9); }
  100% { transform: scale(1); }
}

/* THREE WORLD CROWNS — three distinct rows on the right edge. Shape, order,
   luminance and colour all repeat the progression state. */
/* (Alex, 2026-09-07: "It's not so visible that it represents 3 planets ... it
   shows more on the bottom right. but its hardly visible.") It was three 13px
   rows of 9px dots at 74% opacity, and the two worlds you were not standing on
   were dimmed to 40% and desaturated by half on top of that -- so the one thing
   in the game that says "there are three worlds and here is where you are in
   each" was the faintest thing on the screen. Same layout, read at arm's
   length: bigger sockets, a separating rule between the rows, and the worlds
   you are not on stay legible instead of nearly vanishing. */
#planetBossCounter {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-rows: repeat(3, 20px);
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(147, 180, 211, .26);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(2, 5, 12, .78), rgba(12, 8, 19, .5));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .8), inset 0 0 20px rgba(81, 128, 173, .07);
  opacity: .97;
  pointer-events: none;
  transition: opacity .2s ease, border-color .2s ease;
}
.planet-boss-row {
  --world-tint: #ffd66b;
  display: grid;
  grid-template-columns: 19px repeat(9, 13px) 16px 17px;
  align-items: center;
  gap: 7px;
  height: 20px;
  opacity: .72;
  filter: saturate(.82);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.planet-boss-row + .planet-boss-row {
  border-top: 1px solid rgba(147, 180, 211, .14);
  padding-top: 8px;
  height: 27px;
}
.planet-boss-row.active-planet {
  opacity: 1;
  filter: saturate(1.05);
  transform: scale(1.06);
}
.planet-world-sigil,
.planet-boss-socket {
  display: block;
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 38% 30%, rgba(180, 207, 229, .13), rgba(4, 8, 16, .92) 68%);
  border: 1px solid rgba(158, 188, 216, .32);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .9), 0 1px 1px rgba(0, 0, 0, .9);
}
.planet-world-sigil {
  width: 19px;
  height: 19px;
  border-color: var(--world-tint);
  opacity: .86;
}
.planet-boss-row[data-planet="moon"] { --world-tint: #ffd66b; }
.planet-boss-row[data-planet="water"] { --world-tint: #69efff; }
.planet-boss-row[data-planet="lava"] { --world-tint: #ff6a28; }
.planet-boss-row[data-planet="moon"] .planet-world-sigil {
  border-radius: 50%;
  background: var(--world-tint);
  -webkit-mask: radial-gradient(circle at 72% 31%, transparent 50%, #000 53%);
  mask: radial-gradient(circle at 72% 31%, transparent 50%, #000 53%);
}
.planet-boss-row[data-planet="water"] .planet-world-sigil {
  border-radius: 54% 46% 58% 42%;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #b7ffff, #1b8cac 62%, #092e56);
}
.planet-boss-row[data-planet="lava"] .planet-world-sigil {
  clip-path: polygon(50% 0, 92% 33%, 77% 100%, 23% 100%, 8% 33%);
  background: linear-gradient(#ffe075, #ff5a18 58%, #651009);
}
.planet-boss-socket[data-slot="regional-0"] { border-radius: 50%; }
.planet-boss-socket[data-slot="regional-1"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.planet-boss-socket[data-slot="regional-2"] { transform: rotate(45deg); border-radius: 1px; }
.planet-boss-socket[data-slot="regional-3"] {
  border-radius: 50% 50% 2px 2px;
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.planet-boss-socket[data-slot="regional-4"] {
  clip-path: polygon(50% 0, 63% 35%, 100% 50%, 63% 65%, 50% 100%, 37% 65%, 0 50%, 37% 35%);
}
.planet-boss-socket[data-slot="regional-5"] { border-radius: 50% 50% 15% 15%; }
.planet-boss-socket[data-slot="regional-6"] { clip-path: polygon(0 15%, 50% 0, 100% 15%, 80% 80%, 50% 100%, 20% 80%); }
.planet-boss-socket[data-slot="regional-7"] { border-radius: 2px; transform: rotate(15deg); }
.planet-boss-socket[data-slot="regional-8"] { clip-path: polygon(0 0, 30% 30%, 50% 0, 70% 30%, 100% 0, 85% 100%, 15% 100%); }
.planet-boss-socket[data-slot="final"] {
  width: 16px;
  height: 16px;
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}
.planet-boss-socket[data-slot="mastery"] {
  width: 17px;
  height: 17px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
}
.planet-boss-socket.lit {
  background: radial-gradient(circle at 36% 30%, #fff, var(--world-tint) 51%, rgba(0, 0, 0, .35));
  border-color: var(--world-tint);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 9px var(--world-tint), inset 0 -2px 3px rgba(0, 0, 0, .36);
}
.planet-boss-socket.flash { animation: coreFlash .8s cubic-bezier(.2, 1.6, .4, 1); }

@media (max-width: 680px) {
  #planetBossCounter { right: 10px; top: 88px; transform: scale(.82); transform-origin: top right; }
  #stoneCounter { left: 12px; bottom: 72px; transform: scale(.88); transform-origin: left bottom; }
}

@media (orientation: portrait) and (max-width: 680px) {
  /* Portrait keeps the entire lower movement/aiming lane free. The economy is
     a slim vertical instrument at the far-left shoulder, above touch travel. */
  #stoneCounter {
    top: calc(max(10px, env(safe-area-inset-top)) + 72px);
    bottom: auto;
    left: max(10px, env(safe-area-inset-left));
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: 72px;
    min-height: 0;
    padding: 7px 6px;
    transform: scale(.88);
    transform-origin: left top;
  }
  #stoneCounter .collectible-cell {
    grid-template-columns: 15px 1fr;
    gap: 5px;
    min-width: 0;
    width: 100%;
    font-size: 14px;
  }
  #stoneCounter .collectible-icon { width: 14px; height: 14px; }
  #stoneCounter .stone-crescent { width: 15px; height: 15px; }
  #planetCollectibleTarget {
    min-width: 0;
    width: 100%;
    padding: 5px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(205, 230, 244, .16);
    font-size: 12px;
  }
  .collectible-gate { width: 100%; }
  #coreCounter {
    top: calc(max(10px, env(safe-area-inset-top)) + 204px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left));
    width: 72px;
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* Short landscape screens need the same narrow shoulder instrument as
     portrait. A four-digit pickup bump must never swell across the player's
     lower steering/aim lane. */
  #stoneCounter {
    top: calc(max(8px, env(safe-area-inset-top)) + 54px);
    bottom: auto;
    left: max(10px, env(safe-area-inset-left));
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 72px;
    min-height: 0;
    padding: 6px;
    transform: scale(.84);
    transform-origin: left top;
  }
  #stoneCounter .collectible-cell {
    grid-template-columns: 15px 1fr;
    gap: 5px;
    min-width: 0;
    width: 100%;
    font-size: 14px;
  }
  #stoneCounter .collectible-icon { width: 14px; height: 14px; }
  #stoneCounter .stone-crescent { width: 15px; height: 15px; }
  #planetCollectibleTarget {
    min-width: 0;
    width: 100%;
    padding: 4px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(205, 230, 244, .16);
    font-size: 12px;
  }
  .collectible-gate { width: 100%; }
  #coreCounter {
    top: calc(max(8px, env(safe-area-inset-top)) + 184px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left));
    width: 72px;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* SUIT LIGHTS — bottom right, one visor-glass pip per hit point. Lost pips
   go dark and cracked; the last one breathes. */
#suitMeter {
  position: absolute;
  right: 26px;
  bottom: 20px;
  display: flex;
  gap: 7px;
  align-items: flex-end;
  pointer-events: none;
}
.suit-pip {
  width: 15px;
  height: 21px;
  border-radius: 7px 7px 5px 5px;
  background: radial-gradient(circle at 36% 25%, #ffffff 0 8%, #b9f6ff 34%, #51badf 68%, #155276 100%);
  border: 1px solid rgba(203, 250, 255, .84);
  box-shadow: 0 1px 1px rgba(0, 3, 8, .94), 0 0 9px rgba(120, 226, 255, .6), inset 0 -4px 5px rgba(5, 29, 54, .58);
  transition: transform .16s cubic-bezier(.2, 1.6, .4, 1);
}
.suit-pip.lost {
  background:
    linear-gradient(118deg, transparent 42%, rgba(222, 240, 250, .5) 45%, transparent 49%),
    linear-gradient(64deg, transparent 58%, rgba(210, 232, 246, .38) 62%, transparent 67%),
    radial-gradient(circle at 38% 28%, #26313f, #131b26 60%, #05080d);
  border-color: rgba(148, 173, 198, .45);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .95), inset 0 0 7px rgba(0, 0, 0, .9);
}
.suit-pip.crack {
  animation: pipCrack .5s cubic-bezier(.3, 1.7, .4, 1);
}
@keyframes pipCrack {
  0% { transform: scale(1.55) rotate(-7deg); }
  40% { transform: scale(.82) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
#suitMeter[data-critical="true"] .suit-pip:not(.lost) {
  animation: pipBreathe 1.05s ease-in-out infinite;
}

/* On touch, the lower-right corner belongs to JUMP and the right-hand gesture
   surface. Dock suit health beneath the pause control instead; portrait moves
   it below the compact three-world crown rail. */
body.touch-enabled #suitMeter {
  top: calc(max(10px, env(safe-area-inset-top)) + 50px);
  right: max(14px, env(safe-area-inset-right));
  bottom: auto;
}

@media (orientation: portrait) and (max-width: 680px) {
  body.touch-enabled #suitMeter {
    top: calc(max(10px, env(safe-area-inset-top)) + 146px);
    right: max(12px, env(safe-area-inset-right));
  }
}

@keyframes pipBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 1px 1px rgba(0, 3, 8, .94), 0 0 9px rgba(120, 226, 255, .6), inset 0 -4px 5px rgba(5, 29, 54, .58); }
  50% { transform: scale(1.22); box-shadow: 0 1px 1px rgba(0, 3, 8, .94), 0 0 16px rgba(255, 120, 120, .84), inset 0 -3px 5px rgba(70, 10, 20, .54); }
}

/* ============================================================
   TITLE SCULPT (8.1.0)
   The rendered game is the cover art. The launch UI only names it,
   states the one-ball law, and gets out of the player's way.
   ============================================================ */

.start-controls-drawer {
  position: static;
  z-index: 8;
}

.start-controls-drawer > summary {
  display: flex;
  align-items: center;
  min-width: 142px;
  min-height: 64px;
  padding: 0 19px;
  border: 1px solid rgba(176, 232, 241, 0.24);
  background: linear-gradient(115deg, rgba(7, 14, 23, 0.78), rgba(16, 13, 29, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 34px rgba(0, 0, 0, 0.22);
  color: rgba(221, 244, 248, 0.76);
  font: 850 9px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.18em;
  list-style-position: inside;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.start-controls-drawer > summary::marker {
  color: var(--cyan);
}

.start-controls-drawer > summary:hover,
.start-controls-drawer > summary:focus-visible,
.start-controls-drawer[open] > summary {
  border-color: rgba(176, 239, 248, 0.54);
  background: linear-gradient(115deg, rgba(11, 25, 35, 0.9), rgba(23, 17, 42, 0.78));
  color: #fff;
  transform: translateY(-2px);
}

.start-controls-drawer #controlsHint {
  position: absolute;
  top: calc(100% + 11px);
  left: 0;
  width: min(570px, calc(100vw - 42px));
  max-width: none;
  margin: 0;
  padding: 17px 19px;
  border: 1px solid rgba(176, 232, 241, 0.24);
  background: linear-gradient(135deg, rgba(4, 10, 17, 0.97), rgba(12, 9, 23, 0.94));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  opacity: 1;
  transform: none;
}

.start-panel #controlsHint .control-set {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
}

.start-panel #controlsHint .control-set span {
  font-size: 7px;
}

@media (max-width: 760px) {
  .start-overlay {
    background:
      linear-gradient(90deg, rgba(1, 2, 4, 0.94), rgba(1, 2, 4, 0.66)),
      linear-gradient(0deg, rgba(1, 2, 4, 0.78), transparent 42%),
      radial-gradient(circle at 50% 34%, rgba(105, 239, 255, 0.1), transparent 48%);
  }

  .start-panel {
    justify-self: center;
    width: min(88vw, 620px);
    margin-left: 0;
  }

  #startTitle > span {
    font-size: clamp(64px, 18vw, 112px);
  }

  .start-controls-drawer {
    display: none;
  }
}

@media (max-height: 620px) and (pointer: fine) {
  #startTitle > span {
    font-size: clamp(68px, 20vh, 122px);
  }

  #startTitle::after {
    margin-top: 16px;
  }

  .start-law {
    margin-block: 18px;
  }

  .start-panel .primary-button,
  .start-controls-drawer > summary {
    min-height: 54px;
  }
}

body.touch-enabled .start-panel {
  justify-self: center;
  width: min(88vw, 650px);
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body.touch-enabled .start-controls-drawer {
  display: none !important;
}

body.touch-enabled .start-panel .primary-button {
  width: min(100%, 320px);
}

body.touch-enabled #startTitle > span {
  font-size: clamp(62px, 15vw, 120px);
}

@media (orientation: portrait) {
  body.touch-enabled #startTitle > span {
    font-size: clamp(58px, 19vw, 94px);
  }

  body.touch-enabled #startTitle::after {
    margin-top: 20px;
  }

  body.touch-enabled .start-law {
    margin-block: 25px;
  }

  body.touch-enabled .start-panel .primary-button {
    width: 100%;
  }
}

/* 8.8 boss progression: brief, non-modal, pointer-transparent notices. */
#encounterNotice { position:fixed; z-index:18; left:50%; top:11%; transform:translateX(-50%); max-width:min(88vw,620px); width:max-content; padding:12px 22px; border:1px solid rgba(172,226,255,.28); border-radius:10px; background:rgba(5,13,28,.82); box-shadow:0 5px 30px rgba(0,0,0,.3); text-align:center; pointer-events:none; color:#eaf8ff; font:500 12px/1.5 system-ui,sans-serif; letter-spacing:.07em; }
#encounterNotice strong {display:block; font-size:17px; letter-spacing:.12em; color:#fff; }
#encounterNotice span {display:block; margin-top:4px; color:#bce5ff; }
#encounterNotice[hidden] {display:none!important;}
@media(max-width:600px) {#encounterNotice{top:10%;padding:9px 13px;font-size:10px;}#encounterNotice strong{font-size:14px;}}

@media (max-width:600px) and (orientation:portrait) {#encounterNotice{top:calc(env(safe-area-inset-top, 0px) + 148px);}}