:root {
  color-scheme: light;
  --ink: #132a33;
  --ink-soft: #496068;
  --paper: #f4f1ea;
  --paper-deep: #eae6dc;
  --card: #fffdf8;
  --white: #ffffff;
  --lime: #c9ff63;
  --lime-dark: #9dcd3f;
  --coral: #ff775f;
  --blue: #82b5ff;
  --gold: #f3c755;
  --line: rgba(19, 42, 51, 0.11);
  --shadow: 0 24px 70px rgba(35, 50, 48, 0.12);
  --font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  background: #dcd9d2;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 5%, rgba(255, 255, 255, 0.84), transparent 26rem),
    #dcd9d2;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

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

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  position: relative;
  width: min(100%, 32rem);
  min-height: 100dvh;
  margin-inline: auto;
  overflow: visible;
  background: var(--paper);
  box-shadow: 0 0 80px rgba(20, 35, 40, 0.13);
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.8rem;
  padding: max(0.85rem, env(safe-area-inset-top)) 1.25rem 0.7rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.87rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.brand-mark,
.modal-brand-mark {
  display: grid;
  width: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.78rem;
  background: var(--ink);
  color: var(--lime);
  box-shadow: 0 8px 20px rgba(19, 42, 51, 0.15);
}

.brand-mark svg,
.modal-brand-mark svg {
  width: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.streak-chip {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  height: 2.45rem;
  padding-inline: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.streak-chip svg {
  width: 1.1rem;
  fill: var(--coral);
}

.avatar-button {
  position: relative;
  display: grid;
  width: 2.55rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.header-logout-button {
  min-height: 2.45rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.header-logout-button:is(:hover, :focus-visible) {
  border-color: var(--coral);
  color: var(--ink);
}

.avatar-dot {
  position: absolute;
  inset: auto 0 0 auto;
  width: 0.7rem;
  aspect-ratio: 1;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--lime-dark);
}

main {
  min-height: calc(100dvh - 10rem);
}

.view {
  padding: 0.45rem 1.25rem 7.5rem;
  animation: view-in 260ms ease both;
}

.view[hidden] {
  display: none;
}

.play-mode-panel[hidden] {
  display: none;
}

html[data-play-mode="classic"] #orbit-game-panel {
  display: none !important;
}

html[data-play-mode="classic"] #classic-game-panel {
  display: block !important;
}

.orbit-liveops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-block: 0.65rem 1rem;
}

.flow-event-card,
.flow-meta-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(19, 42, 51, 0.1);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.65);
  box-shadow:
    0 0.7rem 1.8rem rgba(31, 49, 49, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.flow-event-card {
  --event-color: #cfff63;

  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 5rem;
  padding: 0.72rem;
  background:
    radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--event-color) 33%, transparent), transparent 30%),
    linear-gradient(118deg, #112d3a, #0b1d2d 68%, color-mix(in srgb, var(--event-color) 25%, #0b1d2d));
  color: white;
  text-align: start;
  cursor: pointer;
}

.flow-event-card::after {
  position: absolute;
  inset: auto -1.2rem -2.8rem auto;
  width: 7rem;
  aspect-ratio: 1;
  border: 1rem solid color-mix(in srgb, var(--event-color) 16%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.flow-event-icon {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.12rem solid rgba(255, 255, 255, 0.6);
  border-radius: 0.95rem;
  background: linear-gradient(145deg, white, var(--event-color));
  color: #102731;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 0 1.2rem color-mix(in srgb, var(--event-color) 45%, transparent);
}

.flow-event-copy,
.flow-event-copy > * {
  display: block;
  min-width: 0;
}

.flow-card-label {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.flow-event-copy .flow-card-label {
  color: color-mix(in srgb, var(--event-color) 72%, white);
}

.flow-event-copy strong {
  margin-block-start: 0.12rem;
  font-size: 0.78rem;
}

.flow-event-copy small {
  margin-block-start: 0.08rem;
  overflow: hidden;
  color: rgba(237, 251, 255, 0.68);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-event-copy progress,
.flow-meta-card progress,
.collection-progress {
  width: 100%;
  height: 0.3rem;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  appearance: none;
}

.flow-event-copy progress {
  margin-block-start: 0.42rem;
}

.flow-event-copy progress::-webkit-progress-bar,
.flow-meta-card progress::-webkit-progress-bar,
.collection-progress::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(19, 42, 51, 0.1);
}

.flow-event-copy progress::-webkit-progress-value,
.flow-event-copy progress::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, white, var(--event-color));
}

.flow-event-clock {
  position: relative;
  z-index: 1;
  text-align: end;
}

.flow-event-clock time,
.flow-event-clock small {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.flow-event-clock time {
  color: var(--event-color);
  font-size: 0.77rem;
}

.flow-event-clock small {
  margin-block-start: 0.3rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.48rem;
}

.flow-meta-card {
  min-height: 5.4rem;
  padding: 0.7rem;
}

.flow-rank-line,
.flow-daily-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-block: 0.25rem 0.38rem;
}

.flow-rank-line strong,
.flow-daily-line strong {
  font-family: var(--mono);
  font-size: 1.22rem;
  letter-spacing: -0.07em;
}

.flow-rank-line span,
.flow-daily-line span {
  color: var(--ink-soft);
  font-size: 0.5rem;
}

.flow-rank-line b {
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
}

.flow-meta-card progress::-webkit-progress-value,
.flow-meta-card progress::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #72e7e9, #cfff63);
}

.flow-collection-button {
  width: 100%;
  margin-block-start: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.52rem;
  font-weight: 800;
  text-align: start;
  cursor: pointer;
}

.flow-collection-button span {
  float: right;
  color: var(--ink-soft);
  font-family: var(--mono);
}

.flow-daily-card {
  background:
    radial-gradient(circle at 100% 0, rgba(130, 181, 255, 0.22), transparent 55%),
    rgba(255, 255, 255, 0.65);
}

.flow-daily-card > small {
  display: block;
  margin-block-start: 0.42rem;
  color: var(--ink-soft);
  font-size: 0.48rem;
  line-height: 1.25;
}

.flow-daily-card.is-complete {
  background:
    radial-gradient(circle at 100% 0, rgba(201, 255, 99, 0.42), transparent 58%),
    rgba(255, 255, 255, 0.72);
}

.orbit-heading {
  align-items: center;
}

.orbit-heading h1 {
  font-size: clamp(1.65rem, 6.5vw, 2.05rem);
}

.game-card.orbit-card {
  border-color: rgba(159, 239, 255, 0.28);
  background:
    radial-gradient(circle at 82% -8%, rgba(183, 255, 91, 0.23), transparent 33%),
    radial-gradient(circle at 0% 62%, rgba(128, 108, 255, 0.2), transparent 43%),
    linear-gradient(152deg, #102f40, #071b2a 68%, #0c2532);
  color: #effcff;
  box-shadow:
    0 1.8rem 4.4rem rgba(8, 30, 42, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.game-card.orbit-card::before {
  width: 11rem;
  inset: -7rem -5rem auto auto;
  background: rgba(196, 255, 87, 0.18);
  filter: blur(0.2rem);
}

.orbit-topline {
  gap: 0.75rem;
}

.orbit-card .level-progress {
  color: rgba(238, 252, 255, 0.82);
}

.orbit-remaining-display {
  align-items: center;
  gap: 0.7rem;
}

.orbit-remaining-copy {
  display: flex;
  align-items: end;
  gap: 0.42rem;
}

.orbit-remaining-copy strong {
  color: #f4ffff;
  font-family: var(--mono);
  font-size: clamp(2rem, 8vw, 2.65rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.8;
  text-shadow: 0 0 1.1rem rgba(112, 235, 239, 0.24);
}

.orbit-remaining-copy span {
  width: 3.1rem;
  font-size: 0.48rem;
  letter-spacing: 0.09em;
  line-height: 1.05;
}

.orbit-card .progress-track,
.orbit-card .progress-track::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.13);
}

.orbit-card .progress-track::-webkit-progress-value,
.orbit-card .progress-track::-moz-progress-bar {
  background: linear-gradient(90deg, #65e8ee, #c3ff59);
}

.orbit-stage {
  position: relative;
  contain: layout style paint;
  width: 100%;
  aspect-ratio: 1;
  margin-block: 0.58rem 0.62rem;
  overflow: hidden;
  border: 1px solid rgba(155, 233, 245, 0.2);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 18% 16%, rgba(125, 249, 255, 0.13) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 24%, rgba(255, 146, 223, 0.12) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 72% 82%, rgba(207, 255, 92, 0.11) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 48%, rgba(69, 196, 206, 0.21), transparent 44%),
    radial-gradient(circle at 50% 112%, rgba(169, 255, 92, 0.13), transparent 36%),
    linear-gradient(155deg, rgba(6, 41, 59, 0.64), rgba(3, 14, 30, 0.94));
  box-shadow:
    inset 0 0 3.4rem rgba(2, 11, 19, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.orbit-stage.is-dragging {
  cursor: grabbing;
}

.orbit-stage.is-level-arriving {
  cursor: progress;
  pointer-events: none;
}

.orbit-junk-direction-cue {
  --orbit-junk-cue-color: #79f8ed;
  --orbit-junk-cue-x: 50%;
  --orbit-junk-cue-y: 10.5%;

  position: absolute;
  z-index: 3;
  inset: var(--orbit-junk-cue-y) auto auto var(--orbit-junk-cue-x);
  width: clamp(3rem, 18%, 5.2rem);
  aspect-ratio: 1;
  border: 0.08rem solid color-mix(in oklab, var(--orbit-junk-cue-color) 26%, transparent);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--orbit-junk-cue-color) 42%, transparent),
    color-mix(in oklab, var(--orbit-junk-cue-color) 16%, transparent) 42%,
    transparent 72%
  );
  box-shadow:
    0 0 0.85rem color-mix(in oklab, var(--orbit-junk-cue-color) 28%, transparent),
    0 0 1.8rem color-mix(in oklab, var(--orbit-junk-cue-color) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  scale: 0.76;
  translate: -50% -50%;
}

.orbit-stage[data-junk-direction-target="violet"] .orbit-junk-direction-cue {
  --orbit-junk-cue-color: #c5a8ff;
}

.orbit-stage.is-junk-direction-cue .orbit-junk-direction-cue {
  animation: orbit-junk-direction-glow 1.8s ease-in-out infinite;
}

#orbit-sphere,
.orbit-hit-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  transform-origin: 50% 50%;
}

#orbit-sphere {
  display: block;
  overflow: visible;
}

.orbit-sphere-shadow {
  fill: rgba(0, 7, 16, 0.55);
  filter: blur(0.68rem);
}

.orbit-sphere-atmosphere {
  fill: none;
  stroke: url(#orbit-sphere-rim);
  stroke-width: 5;
  opacity: 0.2;
  filter: url(#orbit-rim-glow);
  pointer-events: none;
}

.orbit-sphere-body {
  fill: url(#orbit-sphere-fill);
  stroke: none;
  filter: url(#orbit-sphere-shadow);
}

.orbit-sphere-gloss {
  fill: url(#orbit-sphere-gloss);
  opacity: 0.76;
  pointer-events: none;
}

.orbit-sphere-rim {
  fill: none;
  stroke: url(#orbit-sphere-rim);
  stroke-width: 1.1;
  opacity: 0.16;
  pointer-events: none;
}

#orbit-echo-layer {
  color: #91f9ff;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0) scale(1);
  transform-box: view-box;
  transform-origin: center;
  transition: color 260ms ease, opacity 320ms ease;
}

.orbit-stage.is-echo-visible #orbit-echo-layer {
  opacity: 1;
}

.orbit-stage[data-echo-mood="taunt"] #orbit-echo-layer { color: #c6a1ff; }
.orbit-stage[data-echo-mood="point"] #orbit-echo-layer { color: #c9ff63; }
.orbit-stage[data-echo-mood="warning"] #orbit-echo-layer { color: #ffc56a; }
.orbit-stage[data-echo-mood="critical"] #orbit-echo-layer,
.orbit-stage[data-echo-mood="failure"] #orbit-echo-layer { color: #ff6680; }
.orbit-stage[data-echo-mood="stabilize"] #orbit-echo-layer,
.orbit-stage[data-echo-mood="rescue"] #orbit-echo-layer { color: #fff477; }
.orbit-stage[data-echo-mood="victory"] #orbit-echo-layer { color: #eaff98; }

.orbit-echo-interior {
  color: inherit;
  opacity: 0.58;
}

.orbit-echo-aura {
  fill: currentColor;
  fill-opacity: 0.035;
  stroke: currentColor;
  stroke-dasharray: 2 11;
  stroke-width: 1;
}

.orbit-echo-depth-rings,
.orbit-echo-rear,
.orbit-echo-figure {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-echo-depth-rings {
  opacity: 0.2;
  stroke-dasharray: 4 10;
  stroke-width: 0.9;
  animation: orbit-echo-rings 5.4s linear infinite;
}

.orbit-echo-rear {
  opacity: 0.12;
  stroke-dasharray: 2 7;
  stroke-width: 4.5;
  filter: blur(2.4px);
}

.orbit-echo-figure {
  opacity: 0.72;
  stroke-width: 1.55;
  filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 7px currentColor);
  transform: translate(0, 0) rotate(0deg) scale(1);
  transform-box: view-box;
  transform-origin: center;
}

.orbit-stage.is-echo-visible .orbit-echo-figure {
  animation: orbit-echo-materialize 3.1s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.orbit-stage.is-echo-visible[data-echo-mood="taunt"] .orbit-echo-figure {
  animation-name: orbit-echo-taunt;
}

.orbit-stage.is-echo-visible:is([data-echo-mood="warning"], [data-echo-mood="critical"]) .orbit-echo-figure {
  animation-name: orbit-echo-warning;
}

.orbit-stage.is-echo-visible:is([data-echo-mood="stabilize"], [data-echo-mood="rescue"]) .orbit-echo-figure {
  animation-name: orbit-echo-stabilize;
}

.orbit-stage.is-echo-visible[data-echo-mood="victory"] .orbit-echo-figure {
  animation-name: orbit-echo-victory;
}

.orbit-stage.is-echo-visible[data-echo-mood="failure"] .orbit-echo-figure {
  animation: orbit-echo-failure 1.55s cubic-bezier(0.18, 0.7, 0.2, 1) both;
}

.orbit-echo-face-plane,
.orbit-echo-spine,
.orbit-echo-ribs {
  opacity: 0.32;
  stroke-dasharray: 3 5;
  stroke-width: 1;
}

.orbit-echo-eyes {
  opacity: 0.9;
  stroke-width: 2.8;
}

.orbit-echo-gesture {
  opacity: 0;
  stroke-width: 1.85;
  transition: opacity 180ms ease;
}

.orbit-stage[data-echo-mood="awaken"] .orbit-echo-gesture.is-neutral,
.orbit-stage[data-echo-mood="encourage"] .orbit-echo-gesture.is-neutral,
.orbit-stage[data-echo-mood="point"] .orbit-echo-gesture.is-point,
.orbit-stage[data-echo-mood="taunt"] .orbit-echo-gesture.is-taunt,
.orbit-stage:is([data-echo-mood="warning"], [data-echo-mood="critical"], [data-echo-mood="stabilize"], [data-echo-mood="rescue"], [data-echo-mood="failure"]) .orbit-echo-gesture.is-brace,
.orbit-stage[data-echo-mood="victory"] .orbit-echo-gesture.is-victory {
  opacity: 0.88;
}

.orbit-echo-nodes {
  fill: currentColor;
  stroke: none;
}

.orbit-echo-nodes circle {
  opacity: 0.76;
  animation: orbit-echo-node 1.6s ease-in-out infinite alternate;
}

.orbit-echo-nodes circle:nth-child(3n + 2) { animation-delay: -520ms; }
.orbit-echo-nodes circle:nth-child(3n) { animation-delay: -980ms; }

.orbit-echo-core {
  fill: currentColor;
  fill-opacity: 0.06;
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  transform: scale(1);
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit-echo-core 1.35s ease-in-out infinite alternate;
}

.orbit-echo-voice {
  position: absolute;
  z-index: 6;
  inset: clamp(6.2rem, 26%, 7.6rem) auto auto 50%;
  display: flex;
  width: min(86%, 20rem);
  align-items: center;
  gap: 0.58rem;
  padding: 0.58rem 0.72rem;
  border: 0.07rem solid color-mix(in srgb, #91f9ff 42%, transparent);
  border-radius: 0.86rem;
  background: linear-gradient(105deg, rgba(3, 19, 34, 0.84), rgba(18, 24, 54, 0.66));
  color: #dffeff;
  box-shadow: 0 0 1rem rgba(112, 239, 255, 0.12), inset 0 0.07rem rgba(255, 255, 255, 0.13);
  opacity: 0;
  pointer-events: none;
  rotate: 0deg;
  scale: 0.94;
  translate: -50% 0.55rem;
  visibility: hidden;
  backdrop-filter: blur(0.34rem);
  transition: opacity 220ms ease, scale 320ms cubic-bezier(0.18, 1.35, 0.3, 1), translate 320ms ease, visibility 0s linear 320ms;
}

.orbit-echo-voice[data-visible="true"] {
  opacity: 0.94;
  scale: 1;
  translate: -50% 0;
  visibility: visible;
  transition-delay: 0s;
}

.orbit-echo-voice > span:first-child {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 0.07rem solid currentColor;
  border-radius: 50%;
  background: rgba(145, 249, 255, 0.08);
  font-size: 1.2rem;
  text-shadow: 0 0 0.6rem currentColor;
}

.orbit-echo-voice > span:last-child {
  min-width: 0;
}

.orbit-echo-voice :is(small, strong) {
  display: block;
}

.orbit-echo-voice small {
  color: #bafcff;
  font-family: var(--mono);
  font-size: clamp(0.54rem, 2vw, 0.62rem);
  line-height: 1.15;
  letter-spacing: 0.12em;
}

.orbit-echo-voice strong {
  margin-block-start: 0.14rem;
  color: white;
  font-size: clamp(0.78rem, 2.9vw, 0.9rem);
  font-weight: 820;
  line-height: 1.35;
  text-wrap: balance;
}

@keyframes orbit-echo-materialize {
  0% { opacity: 0; transform: translateY(10px) scale(0.86, 1.08); }
  18% { opacity: 0.76; transform: translateY(-2px) scale(1.04, 0.97); }
  72% { opacity: 0.68; transform: translateY(1px) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(0.98, 1.03); }
}

@keyframes orbit-echo-taunt {
  0% { opacity: 0; transform: translateX(-7px) scale(0.9); }
  20% { opacity: 0.75; transform: translateX(3px) rotate(1.5deg) scale(1.02); }
  70% { opacity: 0.68; transform: translateX(-2px) rotate(-1deg) scale(1); }
  100% { opacity: 0; transform: translateX(7px) scale(0.95); }
}

@keyframes orbit-echo-warning {
  0% { opacity: 0; transform: scale(0.86); }
  18%, 42%, 68% { opacity: 0.82; transform: scale(1.04); }
  30%, 55%, 82% { opacity: 0.5; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes orbit-echo-stabilize {
  0% { opacity: 0; transform: scale(1.18, 0.78); }
  28% { opacity: 0.9; transform: scale(0.94, 1.08); }
  54% { opacity: 0.72; transform: scale(1.06, 0.96); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes orbit-echo-victory {
  0% { opacity: 0; transform: translateY(18px) scale(0.82); }
  26% { opacity: 0.88; transform: translateY(-7px) scale(1.08); }
  74% { opacity: 0.72; transform: translateY(-3px) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.94); }
}

@keyframes orbit-echo-failure {
  0% { opacity: 0; transform: scale(0.72); }
  35% { opacity: 0.96; transform: scale(1.18); }
  72% { opacity: 0.78; transform: scale(1.48, 1.22); }
  100% { opacity: 0; transform: scale(1.9, 0.5); }
}

@keyframes orbit-echo-rings {
  to { stroke-dashoffset: -56; }
}

@keyframes orbit-echo-node {
  to { opacity: 0.25; }
}

@keyframes orbit-echo-core {
  to { fill-opacity: 0.16; stroke-dashoffset: -14; transform: scale(1.1); }
}

.orbit-grid-line {
  fill: none;
  stroke: rgba(171, 226, 231, 0.13);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.orbit-surface-art {
  opacity: 0;
  pointer-events: none;
  animation: orbit-surface-cycle 21s ease-in-out infinite both;
}

.orbit-surface-art-world {
  animation-delay: 0s;
}

.orbit-world-continent,
.orbit-world-current,
.orbit-eye-lid,
.orbit-eye-iris,
.orbit-eye-ring,
.orbit-eye-vein,
.orbit-eye-pupil,
.orbit-eye-glint,
.orbit-cosmos-planet,
.orbit-cosmos-ring,
.orbit-cosmos-moon,
.orbit-cosmos-crater,
.orbit-cosmos-star,
.orbit-cosmos-orbit {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-world-continent {
  stroke: #a5ffd0;
  stroke-width: 5.5;
}

.orbit-world-current {
  stroke: #d8fff2;
  stroke-width: 1.8;
  stroke-dasharray: 5 8;
}

.orbit-surface-art-eye {
  animation-delay: 7s;
}

.orbit-eye-lid,
.orbit-eye-iris,
.orbit-eye-ring,
.orbit-eye-vein,
.orbit-eye-pupil,
.orbit-eye-glint {
  stroke: #b8f8ff;
}

.orbit-eye-lid { stroke-width: 8; }
.orbit-eye-iris { stroke-width: 13; }
.orbit-eye-ring { stroke-width: 4; stroke-dasharray: 5 8; }
.orbit-eye-pupil { stroke: #020b15; stroke-width: 14; }
.orbit-eye-glint { stroke: white; stroke-width: 5; }
.orbit-eye-vein { stroke-width: 2.4; }

.orbit-surface-art-cosmos {
  animation-delay: 14s;
}

.orbit-stage[data-world-face-surface] .orbit-surface-art {
  opacity: 0;
  animation: none;
}

.orbit-stage[data-world-face-surface="world"] .orbit-surface-art-world,
.orbit-stage[data-world-face-surface="eye"] .orbit-surface-art-eye,
.orbit-stage[data-world-face-surface="cosmos"] .orbit-surface-art-cosmos {
  opacity: 0.14;
}

.orbit-stage[data-world-face="aurora"] .orbit-world-continent,
.orbit-stage[data-world-face="aurora"] .orbit-world-current {
  stroke: #69ffe2;
}

.orbit-stage[data-world-face="stargaze"] :is(.orbit-eye-lid, .orbit-eye-iris, .orbit-eye-ring, .orbit-eye-vein) {
  stroke: #ff9ddd;
}

.orbit-stage[data-world-face="nova"] :is(.orbit-cosmos-planet, .orbit-cosmos-ring, .orbit-cosmos-star) {
  stroke: #ffd66b;
}

.orbit-stage[data-world-face="oracle"] :is(.orbit-eye-iris, .orbit-eye-ring, .orbit-eye-glint) {
  stroke: #c7adff;
}

.orbit-cosmos-planet {
  stroke: #d5c9ff;
  stroke-width: 10;
}

.orbit-cosmos-ring,
.orbit-cosmos-orbit,
.orbit-cosmos-moon,
.orbit-cosmos-crater,
.orbit-cosmos-star {
  stroke: #b7ff82;
}

.orbit-cosmos-ring { stroke-width: 8; }
.orbit-cosmos-ring.is-inner { stroke: #8cecf1; stroke-width: 2.5; }
.orbit-cosmos-moon { stroke: #dffaff; stroke-width: 8; }
.orbit-cosmos-crater { stroke: #7eb4c0; stroke-width: 4; }
.orbit-cosmos-star { stroke: white; stroke-width: 5; }
.orbit-cosmos-orbit { stroke-width: 3; stroke-dasharray: 5 9; }

.orbit-route-preview {
  fill: none;
  stroke: rgba(221, 255, 238, 0.7);
  stroke-width: 2.2;
  stroke-dasharray: 4 7;
  stroke-linecap: round;
  filter: url(#orbit-soft-glow);
  animation: orbit-route-flow 900ms linear infinite;
}

.orbit-touch-guide {
  color: #8ff8fb;
  pointer-events: none;
}

.orbit-touch-guide.is-violet {
  color: #c7b5ff;
}

.orbit-touch-guide-path,
.orbit-touch-guide-origin,
.orbit-touch-guide-chevron :is(circle, path) {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-touch-guide-path {
  opacity: 0.48;
  stroke-width: 2.1;
  stroke-dasharray: 3 8;
  animation: orbit-route-flow 1.45s linear infinite;
}

.orbit-touch-guide-origin {
  opacity: 0.32;
  stroke-width: 1.7;
  stroke-dasharray: 2 5;
}

.orbit-touch-guide-chevron circle {
  fill: currentColor;
  fill-opacity: 0.08;
  opacity: 0.5;
  stroke-width: 1.4;
}

.orbit-touch-guide-chevron path {
  fill: currentColor;
  fill-opacity: 0.52;
  opacity: 0.72;
  stroke-width: 1.2;
}

.orbit-hover-route,
.orbit-route-status-ring,
.orbit-route-status-mark {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.orbit-hover-route {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
  filter: url(#orbit-soft-glow);
  animation: orbit-route-flow 680ms linear infinite;
}

.orbit-hover-route.is-clear,
.orbit-route-status-ring.is-clear {
  stroke: #cfff5c;
}

.orbit-hover-route.is-blocked,
.orbit-route-status-ring.is-blocked {
  stroke: #ff806b;
}

.orbit-route-status-ring {
  fill: rgba(2, 16, 25, 0.84);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.orbit-route-status-mark {
  fill: none;
  stroke: #f7ffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity-group:is(:hover, .is-previewed, .is-blocked-feedback) :is(.orbit-hover-route, .orbit-route-status-ring, .orbit-route-status-mark) {
  opacity: 1;
}

.orbit-route-status-ring.is-blocked.is-near-junk {
  fill: rgba(72, 14, 22, 0.92);
  stroke-width: 3;
}

.orbit-oddity-group.is-blocked-feedback .orbit-route-status-ring.is-blocked.is-near-junk {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit-blocked-marker-pop 720ms cubic-bezier(.18, .86, .26, 1) both;
}

.orbit-oddity-group.is-blocked-feedback .orbit-route-status-mark.is-blocked {
  stroke-width: 2.8;
  animation: orbit-blocked-mark-flash 720ms ease both;
}

.orbit-blocker-wisp {
  pointer-events: none;
  filter: drop-shadow(0 0 2px #eaff9d) drop-shadow(0 0 7px rgba(104, 245, 255, 0.84));
}

.orbit-blocker-wisp :is(.orbit-blocker-wisp-ring, .orbit-blocker-wisp-strand) {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-blocker-wisp-ring {
  stroke: #d9ff68;
  stroke-width: 2.3;
  stroke-dasharray: 3 5;
  animation: orbit-blocker-wisp-ring 680ms ease-in-out infinite alternate;
  animation-delay: var(--wisp-time);
}

.orbit-blocker-wisp-strand {
  stroke-width: 3.2;
  stroke-dasharray: 13 7 3 7;
  animation: orbit-blocker-wisp-flow 720ms linear infinite;
  animation-delay: var(--wisp-time);
}

.orbit-blocker-wisp-strand.is-one {
  stroke: #75fff0;
}

.orbit-blocker-wisp-strand.is-two {
  stroke: #efff85;
  stroke-width: 2.2;
  animation-direction: reverse;
  animation-duration: 560ms;
}

.orbit-blocker-wisp-spark {
  fill: #fffbd0;
  stroke: #a7ffec;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  animation: orbit-blocker-wisp-spark 520ms ease-in-out infinite alternate;
  animation-delay: var(--wisp-time);
}

.orbit-blocker-wisp-spark.is-two { animation-delay: calc(var(--wisp-time) - 170ms); }
.orbit-blocker-wisp-spark.is-three { animation-delay: calc(var(--wisp-time) - 330ms); }

.orbit-rocket-tail {
  --flare-glow: #39efff;
  --flare-plume: #ff6255;
  --flare-hot: #ffbd35;
  --flare-core: #fffde5;
  --flare-spark: #fff5a2;
  --flare-time: 0ms;
  --flare-plume-phase: 0ms;
  --flare-flow-phase: 0ms;
  pointer-events: none;
}

.orbit-rocket-tail :is(
  .orbit-rocket-glow,
  .orbit-rocket-plume,
  .orbit-rocket-flame,
  .orbit-rocket-core,
  .orbit-rocket-bloom,
  .orbit-rocket-sparks
) {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-rocket-glow {
  stroke: var(--flare-glow);
  stroke-width: 10;
  opacity: 0.34;
  filter: url(#orbit-soft-glow);
  animation: orbit-rocket-glow 340ms ease-in-out infinite alternate;
  animation-delay: calc(var(--flare-time) + var(--flare-plume-phase));
}

.orbit-rocket-plume {
  stroke: var(--flare-plume);
  stroke-width: 6.4;
  opacity: 0.9;
  filter: url(#orbit-soft-glow);
  animation: orbit-rocket-plume 260ms ease-in-out infinite alternate;
  animation-delay: calc(var(--flare-time) + var(--flare-plume-phase));
}

.orbit-rocket-flame {
  stroke: var(--flare-hot);
  stroke-width: 4.15;
  stroke-dasharray: 27 3 13 4;
  filter: drop-shadow(0 0 1.6px rgba(255, 167, 46, 0.95));
  animation: orbit-rocket-flow 520ms linear infinite;
  animation-delay: calc(var(--flare-time) + var(--flare-flow-phase));
}

.orbit-rocket-core {
  stroke: var(--flare-core);
  stroke-width: 1.75;
  stroke-dasharray: 18 3 8 4;
  filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.96));
  animation: orbit-rocket-flow 360ms linear infinite reverse;
  animation-delay: calc(var(--flare-time) + var(--flare-flow-phase));
}

.orbit-rocket-bloom {
  stroke: var(--flare-core);
  stroke-width: 6.8;
  stroke-dasharray: 0.1 20;
  opacity: 0.86;
  filter: drop-shadow(0 0 2.4px var(--flare-hot));
  animation: orbit-rocket-bloom 620ms linear infinite;
  animation-delay: calc(var(--flare-time) + var(--flare-flow-phase));
}

.orbit-rocket-sparks {
  stroke: var(--flare-spark);
  stroke-width: 2.7;
  stroke-dasharray: 0.1 12.4;
  stroke-dashoffset: 0;
  opacity: 0.9;
  filter: drop-shadow(0 0 1.5px rgba(255, 196, 54, 0.94));
  animation: orbit-rocket-sparks 680ms linear infinite;
  animation-delay: calc(var(--flare-time) + var(--flare-flow-phase));
}

.orbit-rocket-tail.is-phase-1 { --flare-plume-phase: -70ms; --flare-flow-phase: -110ms; }
.orbit-rocket-tail.is-phase-2 { --flare-plume-phase: -140ms; --flare-flow-phase: -220ms; }
.orbit-rocket-tail.is-phase-3 { --flare-plume-phase: -210ms; --flare-flow-phase: -330ms; }
.orbit-rocket-tail.is-phase-4 { --flare-plume-phase: -280ms; --flare-flow-phase: -440ms; }

/* Idle exhaust should read as motion, not make every junk object blink. */
.orbit-rocket-tail:not(.is-capturing) :is(
  .orbit-rocket-glow,
  .orbit-rocket-plume,
  .orbit-rocket-bloom
) {
  animation: none;
}

.orbit-rocket-tail:not(.is-capturing) .orbit-rocket-sparks {
  animation: orbit-rocket-flow 900ms linear infinite;
  opacity: 0.58;
}

.orbit-rocket-tail.is-flare-plasma {
  --flare-plume: #7d72ff;
  --flare-hot: #2ff3ff;
  --flare-core: #f4ffff;
  --flare-spark: #f59bff;
}

.orbit-rocket-tail.is-flare-plasma .orbit-rocket-plume {
  stroke-width: 7.2;
  animation-duration: 310ms;
}

.orbit-rocket-tail.is-flare-sparkler {
  --flare-plume: #ff7d2e;
  --flare-hot: #ffe83e;
  --flare-core: #ffffff;
  --flare-spark: #d6ff55;
}

.orbit-rocket-tail.is-flare-sparkler .orbit-rocket-plume { stroke-width: 4.8; }
.orbit-rocket-tail.is-flare-sparkler .orbit-rocket-sparks {
  stroke-width: 3.7;
  stroke-dasharray: 0.1 8.4;
  animation-duration: 480ms;
}

.orbit-rocket-tail.is-flare-comet {
  --flare-plume: #4b9fff;
  --flare-hot: #65f8ff;
  --flare-core: #ffffff;
  --flare-spark: #a8e8ff;
}

.orbit-rocket-tail.is-flare-comet .orbit-rocket-glow { stroke-width: 13; opacity: 0.42; }
.orbit-rocket-tail.is-flare-comet .orbit-rocket-plume { stroke-width: 7.8; animation-duration: 420ms; }
.orbit-rocket-tail.is-flare-comet .orbit-rocket-core { stroke-width: 2.2; }

.orbit-rocket-tail.is-flare-prism {
  --flare-plume: #c36cff;
  --flare-hot: #55ffe1;
  --flare-core: #fff6bd;
  --flare-spark: #ff8fdb;
}

.orbit-rocket-tail.is-flare-prism .orbit-rocket-flame {
  stroke-dasharray: 16 2 8 2;
  animation-duration: 430ms;
}

.orbit-rocket-tail.is-flare-sunburst {
  --flare-plume: #ff5d45;
  --flare-hot: #ffc62f;
  --flare-core: #fffde8;
  --flare-spark: #fff37f;
}

.orbit-rocket-tail.is-flare-sunburst .orbit-rocket-bloom {
  stroke-width: 8.2;
  animation-duration: 520ms;
}

.orbit-rocket-tail.is-aqua {
  --flare-glow: #32ecff;
}

.orbit-rocket-tail.is-violet {
  --flare-glow: #d58aff;
}

.orbit-rocket-tail.is-hint .orbit-rocket-glow {
  stroke: #d4ff66;
  opacity: 0.72;
}

.orbit-rocket-tail.is-blocked .orbit-rocket-glow {
  stroke: #ff5f68;
  opacity: 0.78;
}

.orbit-rocket-tail.is-blocked :is(.orbit-rocket-plume, .orbit-rocket-flame) {
  opacity: 0.64;
}

.orbit-rocket-tail.is-capturing {
  opacity: 1;
}

.orbit-rocket-tail.is-capturing .orbit-rocket-glow {
  stroke-width: 12;
  opacity: 0.72;
  animation-duration: 180ms;
}

.orbit-rocket-tail.is-capturing .orbit-rocket-plume {
  stroke-width: 8;
  opacity: 1;
  animation-duration: 140ms;
}

.orbit-rocket-tail.is-capturing .orbit-rocket-flame {
  animation-duration: 280ms;
}

.orbit-rocket-tail.is-capturing .orbit-rocket-core {
  animation-duration: 220ms;
}

.orbit-rocket-tail.is-capturing .orbit-rocket-bloom {
  animation-duration: 300ms;
}

.orbit-rocket-tail.is-capturing .orbit-rocket-sparks {
  animation-duration: 320ms;
}

.orbit-oddity-interaction {
  fill: none;
  stroke: transparent;
  stroke-width: 24;
  pointer-events: stroke;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity {
  pointer-events: none;
  filter: url(#orbit-oddity-shadow);
  transform-box: fill-box;
  transform-origin: center;
}

.orbit-turnaround-spin {
  pointer-events: none;
  filter: url(#orbit-oddity-shadow);
}

.orbit-turnaround-ring,
.orbit-turnaround-arrow {
  fill: none;
  stroke: #77f3f0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-turnaround-spin.is-violet :is(.orbit-turnaround-ring, .orbit-turnaround-arrow) {
  stroke: #d4adff;
}

.orbit-turnaround-ring {
  stroke-width: 2.4;
  stroke-dasharray: 70 62;
  opacity: 0.72;
}

.orbit-turnaround-arrow {
  stroke: white;
  stroke-width: 2.8;
}

.orbit-turnaround-spark {
  fill: white;
  stroke: #173b5f;
  stroke-width: 0.65;
  vector-effect: non-scaling-stroke;
}

.orbit-turnaround-spark.is-two {
  opacity: 0.68;
}

.orbit-direction-token {
  pointer-events: none;
}

.orbit-direction-token path {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-direction-depth {
  fill: #061d35;
  opacity: 0.9;
  transform: translate(0, 1.7px);
}

.orbit-direction-shell {
  fill: #edffff;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 0.8;
}

.orbit-direction-body {
  stroke-width: 0.9;
}

.orbit-oddity.is-aqua .orbit-direction-body {
  fill: #21dded;
  stroke: #087d9b;
}

.orbit-oddity.is-violet .orbit-direction-body {
  fill: #a36dff;
  stroke: #5134a8;
}

.orbit-direction-gloss {
  fill: rgba(255, 255, 255, 0.62);
  stroke: none;
}

.orbit-oddity-cargo {
  transform: scale(0.9);
  transform-box: fill-box;
  transform-origin: center;
}

.orbit-oddity-body,
.orbit-oddity-panel {
  stroke: rgba(244, 255, 255, 0.96);
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity.is-aqua .orbit-oddity-body {
  fill: url(#orbit-oddity-aqua);
}

.orbit-oddity.is-violet .orbit-oddity-body {
  fill: url(#orbit-oddity-violet);
}

.orbit-oddity.is-aqua .orbit-oddity-panel {
  fill: #24b8d5;
}

.orbit-oddity.is-violet .orbit-oddity-panel {
  fill: #7556dc;
}

.orbit-oddity-dark {
  fill: rgba(6, 22, 48, 0.74);
  stroke: rgba(226, 255, 255, 0.2);
  stroke-width: 0.55;
}

.orbit-oddity-light {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.35;
  stroke-linecap: round;
}

.orbit-oddity-line {
  fill: none;
  stroke: rgba(240, 255, 255, 0.9);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity-eye {
  fill: #eaffff;
  stroke: rgba(3, 23, 46, 0.8);
  stroke-width: 0.65;
}

.orbit-oddity-pupil {
  fill: #071a35;
}

.orbit-oddity-accent {
  fill: #fff06c;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 0.55;
}

.orbit-oddity-metal {
  fill: url(#orbit-junk-metal);
  stroke: rgba(245, 255, 255, 0.9);
  stroke-width: 0.72;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity-glass {
  fill: url(#orbit-junk-glass);
  stroke: rgba(230, 255, 255, 0.88);
  stroke-width: 0.65;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity-warning {
  fill: #fff06c;
  stroke: rgba(48, 48, 35, 0.62);
  stroke-width: 0.58;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity-gloss {
  fill: rgba(255, 255, 255, 0.46);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.35;
  pointer-events: none;
}

.orbit-oddity-grid {
  stroke: rgba(224, 255, 255, 0.72);
  stroke-width: 0.58;
}

.orbit-oddity-damage {
  fill: none;
  stroke: #ff8b82;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity-face {
  filter: drop-shadow(0 0.45px 0 rgba(3, 17, 38, 0.55));
}

.orbit-oddity-smile {
  fill: none;
  stroke: #071a35;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-oddity-ooh {
  fill: #071a35;
  stroke-width: 0.45;
}

.orbit-oddity-cheek {
  fill: #ff93c7;
  opacity: 0.9;
}

.orbit-oddity-glint {
  fill: white;
}

.orbit-oddity.is-hint {
  filter: url(#orbit-hint-glow) url(#orbit-oddity-shadow);
  animation: orbit-oddity-pulse 620ms ease-in-out infinite alternate;
}

.orbit-oddity.is-blocked {
  filter: drop-shadow(0 0 4px rgba(255, 96, 90, 0.9)) url(#orbit-oddity-shadow);
  animation: orbit-oddity-alert 420ms ease;
}

.orbit-oddity.is-blocked .orbit-oddity-body {
  fill: #ff806b;
}

.orbit-oddity.is-blocked .orbit-direction-body {
  fill: #ff5d70;
  stroke: #9f203d;
}

.orbit-oddity.is-capturing {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 7px rgba(122, 242, 255, 0.66))
    url(#orbit-oddity-shadow);
}

.orbit-capture-pitch-shadow {
  fill: rgba(0, 8, 22, 0.82);
  filter: blur(1.2px);
  pointer-events: none;
}

.orbit-oddity.is-capturing .orbit-oddity-gloss {
  transform: translateY(var(--capture-gloss-shift, 0));
}

.orbit-slurp-stream,
.orbit-slurp-stream-depth {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.orbit-slurp-stream-depth {
  stroke-width: 8.5;
  filter: blur(1.1px);
}

.orbit-slurp-stream {
  stroke-width: 2.8;
  stroke-dasharray: 3 5;
  filter: drop-shadow(0 0 2px currentColor);
}

.orbit-slurp-stream.is-aqua,
.orbit-slurp-bubble.is-aqua {
  stroke: #a9ffff;
  color: #72f4fa;
}

.orbit-slurp-stream-depth.is-aqua {
  stroke: #168ca5;
}

.orbit-slurp-stream.is-violet,
.orbit-slurp-bubble.is-violet {
  stroke: #ffe0ff;
  color: #d299ff;
}

.orbit-slurp-stream-depth.is-violet {
  stroke: #6742c9;
}

.orbit-slurp-bubble {
  fill: currentColor;
  stroke-width: 0.7;
  filter: drop-shadow(0 0 2px currentColor);
  pointer-events: none;
}

.orbit-slurp-current :is(path, circle, ellipse, polygon) {
  pointer-events: none;
}

.orbit-slurp-current.is-star-funnel .orbit-slurp-stream {
  stroke: #fff7a8;
  stroke-width: 3.4;
  stroke-dasharray: 1.2 5.2;
  filter: drop-shadow(0 0 3px #ffd75e) drop-shadow(0 0 6px rgba(255, 137, 213, 0.65));
}

.orbit-slurp-current.is-star-funnel .orbit-slurp-stream-depth {
  stroke: #cc5d8f;
  stroke-width: 9.5;
}

.orbit-slurp-star {
  fill: #fff9bd;
  stroke: #ffbf48;
  stroke-width: 0.55;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ff7bcb);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-star-flash {
  fill: rgba(255, 248, 175, 0.82);
  stroke: white;
  stroke-width: 1.05;
  filter: drop-shadow(0 0 3px white) drop-shadow(0 0 9px #ffb42e);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-current.is-bubble-gulp .orbit-slurp-stream {
  stroke: #b9ffff;
  stroke-width: 4.6;
  stroke-dasharray: 0.8 7.2;
  filter: drop-shadow(0 0 3px #67efff);
}

.orbit-slurp-current.is-bubble-gulp .orbit-slurp-stream-depth {
  stroke: #4f72d4;
  stroke-width: 11;
  opacity: 0.66;
}

.orbit-slurp-gel-bubble > circle:first-child {
  fill: rgba(142, 246, 255, 0.56);
  stroke: #eaffff;
  stroke-width: 0.72;
  filter: drop-shadow(0 0 3px #70dcff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-gel-bubble .is-glint {
  fill: white;
  stroke: none;
}

.orbit-slurp-pop-ring {
  fill: none;
  stroke: #bbffff;
  stroke-width: 1.25;
  filter: drop-shadow(0 0 3px #61cfff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-pop-ring.is-ring-2 { stroke: #e6a7ff; }
.orbit-slurp-pop-ring.is-ring-3 { stroke: #fff3a0; }

.orbit-slurp-current.is-ribbon-rush .orbit-slurp-stream {
  stroke-width: 2.2;
  stroke-dasharray: 7 4;
}

.orbit-slurp-ribbon {
  fill: none;
  stroke-width: 2.4;
  stroke-dasharray: 8 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-ribbon.is-ribbon-1 { stroke: #8cfff0; color: #8cfff0; }
.orbit-slurp-ribbon.is-ribbon-2 { stroke: #fff3a6; color: #fff3a6; }
.orbit-slurp-ribbon.is-ribbon-3 { stroke: #ff8fe1; color: #ff8fe1; }

.orbit-slurp-ribbon-bead {
  stroke: white;
  stroke-width: 0.55;
  filter: drop-shadow(0 0 3px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-ribbon-bead.is-bead-1 { fill: #70f5ff; color: #70f5ff; }
.orbit-slurp-ribbon-bead.is-bead-2 { fill: #fff07b; color: #fff07b; }
.orbit-slurp-ribbon-bead.is-bead-3 { fill: #ff82dd; color: #ff82dd; }

.orbit-slurp-current.is-prism-snap .orbit-slurp-stream {
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 2 4;
  filter: drop-shadow(0 0 4px #b6f6ff);
}

.orbit-slurp-prism-ray {
  fill: none;
  stroke-width: 2.15;
  stroke-dasharray: 5 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-prism-ray.is-ray-1 { stroke: #66f5ff; color: #66f5ff; }
.orbit-slurp-prism-ray.is-ray-2 { stroke: #fff47b; color: #fff47b; }
.orbit-slurp-prism-ray.is-ray-3 { stroke: #ff72d4; color: #ff72d4; }

.orbit-slurp-prism-shard {
  stroke: white;
  stroke-width: 0.5;
  filter: drop-shadow(0 0 3px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-prism-shard.is-shard-1 { fill: #70efff; color: #70efff; }
.orbit-slurp-prism-shard.is-shard-2 { fill: #fff469; color: #fff469; }
.orbit-slurp-prism-shard.is-shard-3 { fill: #ff76dc; color: #ff76dc; }

.orbit-slurp-prism-flare {
  fill: none;
  stroke: white;
  stroke-width: 1.7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px white) drop-shadow(0 0 8px #d37cff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-current.is-nova-crunch .orbit-slurp-stream {
  stroke: #fff1a0;
  stroke-width: 3.6;
  stroke-dasharray: 6 3 1 3;
  filter: drop-shadow(0 0 3px #ff8c43) drop-shadow(0 0 7px rgba(255, 77, 125, 0.78));
}

.orbit-slurp-current.is-nova-crunch .orbit-slurp-stream-depth {
  stroke: #a63a73;
  stroke-width: 10;
}

.orbit-slurp-confetti {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.48;
  filter: drop-shadow(0 0 3px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-confetti.is-confetti-1 { fill: #ffef65; color: #ffef65; }
.orbit-slurp-confetti.is-confetti-2 { fill: #ff746f; color: #ff746f; }
.orbit-slurp-confetti.is-confetti-3 { fill: #79f5ff; color: #79f5ff; }
.orbit-slurp-confetti.is-confetti-4 { fill: #d788ff; color: #d788ff; }

.orbit-slurp-nova-rays {
  fill: none;
  stroke: #fff4a6;
  stroke-width: 1.45;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #ff9a43) drop-shadow(0 0 8px #ff4b8d);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-current.is-tractor-tug .orbit-slurp-stream {
  stroke: #dfffff;
  stroke-width: 2.3;
  stroke-dasharray: 10 3 2 3;
  filter: drop-shadow(0 0 3px #51e8ff) drop-shadow(0 0 7px rgba(108, 123, 255, 0.72));
}

.orbit-slurp-current.is-tractor-tug .orbit-slurp-stream-depth {
  stroke: #3956ba;
  stroke-width: 11;
}

.orbit-slurp-tractor-rail {
  fill: none;
  stroke-width: 2.35;
  stroke-dasharray: 12 4 2 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-tractor-rail.is-rail-1 { stroke: #67f8ff; color: #67f8ff; }
.orbit-slurp-tractor-rail.is-rail-2 { stroke: #b8a0ff; color: #b8a0ff; }

.orbit-slurp-tractor-chevron {
  fill: none;
  stroke: #fff6a4;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #ffd95e);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-tractor-chevron.is-chevron-2 { stroke: #80fbff; }
.orbit-slurp-tractor-chevron.is-chevron-3 { stroke: #e1a1ff; }

.orbit-slurp-tractor-lock {
  fill: none;
  stroke: #8dfaff;
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
  filter: drop-shadow(0 0 3px #6de5ff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-tractor-lock.is-lock-2 { stroke: #df9bff; }
.orbit-slurp-tractor-lock.is-lock-3 { stroke: #fff28a; }

.orbit-slurp-current.is-pixel-munch .orbit-slurp-stream {
  stroke: #fff0a1;
  stroke-width: 3.1;
  stroke-dasharray: 2 4;
  filter: drop-shadow(0 0 3px #ffaf49) drop-shadow(0 0 7px rgba(255, 100, 195, 0.72));
}

.orbit-slurp-current.is-pixel-munch .orbit-slurp-stream-depth {
  stroke: #8b3da9;
  stroke-width: 9.5;
}

.orbit-slurp-pixel {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 0.5;
  filter: drop-shadow(0 0 3px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-pixel.is-pixel-1 { fill: #fff16f; color: #fff16f; }
.orbit-slurp-pixel.is-pixel-2 { fill: #ff7bcf; color: #ff7bcf; }
.orbit-slurp-pixel.is-pixel-3 { fill: #66efff; color: #66efff; }
.orbit-slurp-pixel.is-pixel-4 { fill: #a98aff; color: #a98aff; }

.orbit-slurp-pixel-grid {
  fill: none;
  stroke: #fff8bd;
  stroke-width: 0.85;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #ff82d3) drop-shadow(0 0 7px #9c7cff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-current.is-lightning-lick .orbit-slurp-stream {
  stroke: white;
  stroke-width: 2.1;
  stroke-dasharray: 1 3;
  filter: drop-shadow(0 0 3px #75f7ff) drop-shadow(0 0 7px rgba(197, 111, 255, 0.9));
}

.orbit-slurp-current.is-lightning-lick .orbit-slurp-stream-depth {
  stroke: #4e2eb2;
  stroke-width: 10.5;
}

.orbit-slurp-lightning {
  fill: none;
  stroke: #f8ffff;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #6ef5ff) drop-shadow(0 0 5px #c46fff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-lightning.is-bolt-1 { stroke: #69f6ff; }
.orbit-slurp-lightning.is-bolt-3 { stroke: #e6a0ff; }

.orbit-slurp-lightning-spark {
  fill: #fff5a4;
  stroke: white;
  stroke-width: 0.45;
  filter: drop-shadow(0 0 3px #77f7ff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-lightning-flash {
  fill: rgba(239, 255, 255, 0.24);
  stroke: white;
  stroke-width: 1.25;
  stroke-dasharray: 2 3;
  filter: drop-shadow(0 0 4px white) drop-shadow(0 0 10px #9a67ff);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-current.is-ring-slinky .orbit-slurp-stream {
  stroke: #c8fff0;
  stroke-width: 2.5;
  stroke-dasharray: 5 5;
  filter: drop-shadow(0 0 3px #62f1d5) drop-shadow(0 0 7px rgba(255, 123, 219, 0.68));
}

.orbit-slurp-current.is-ring-slinky .orbit-slurp-stream-depth {
  stroke: #2f8a94;
  stroke-width: 10;
}

.orbit-slurp-slinky-ring,
.orbit-slurp-slinky-throat {
  fill: none;
  stroke-width: 1.45;
  filter: drop-shadow(0 0 3px currentColor);
  vector-effect: non-scaling-stroke;
}

.orbit-slurp-slinky-ring.is-ring-1,
.orbit-slurp-slinky-throat.is-ring-1 { stroke: #72f4e6; color: #72f4e6; }
.orbit-slurp-slinky-ring.is-ring-2,
.orbit-slurp-slinky-throat.is-ring-2 { stroke: #fff17c; color: #fff17c; }
.orbit-slurp-slinky-ring.is-ring-3,
.orbit-slurp-slinky-throat.is-ring-3 { stroke: #ff8ddd; color: #ff8ddd; }

.orbit-slurp-slinky-throat {
  stroke-dasharray: 4 3;
}

.orbit-whirlpool {
  filter: url(#orbit-vortex-glow);
}

.orbit-whirlpool-core {
  fill: #010711;
  stroke: rgba(239, 255, 255, 0.78);
  stroke-width: 0.9;
}

.orbit-whirlpool-core-rim {
  fill: none;
  stroke-width: 5.4;
  opacity: 0.62;
  filter: blur(1.3px);
}

.orbit-whirlpool-core-glint {
  fill: none;
  stroke: white;
  stroke-width: 0.55;
  stroke-dasharray: 5 12;
  stroke-linecap: round;
  opacity: 0.86;
}

.orbit-vortex-aura {
  opacity: 0.62;
  filter: blur(4.2px);
}

.orbit-vortex-pool {
  opacity: 0.38;
  filter: blur(1.6px);
}

.orbit-vortex-pool-rim {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  opacity: 0.6;
}

.orbit-vortex-slurp-ring {
  fill: none;
  stroke-width: 3.2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px currentColor);
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.orbit-vortex-arm,
.orbit-vortex-arm-depth {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.orbit-vortex-arm-depth {
  stroke-width: 8.6;
  opacity: 0.38;
  filter: blur(1.25px);
}

.orbit-vortex-arm {
  stroke-width: 5.3;
  opacity: 0.94;
  filter: drop-shadow(0 1.2px 1.2px rgba(0, 5, 13, 0.78));
}

.orbit-vortex-arm.is-inner {
  stroke-width: 2.2;
  opacity: 0.9;
}

.orbit-vortex-arm-depth.is-inner {
  stroke-width: 5.4;
  opacity: 0.45;
}

.orbit-vortex-wisp {
  opacity: 0.94;
  filter: drop-shadow(0 0 2px currentColor);
}

.orbit-whirlpool.is-catching {
  filter: url(#orbit-vortex-glow) brightness(1.72) saturate(1.42);
}

.orbit-whirlpool.is-slurp-star-funnel {
  filter: url(#orbit-vortex-glow) brightness(1.88) saturate(1.52) drop-shadow(0 0 5px #ffd95b);
}

.orbit-whirlpool.is-slurp-bubble-gulp {
  filter: url(#orbit-vortex-glow) brightness(1.68) saturate(1.32) drop-shadow(0 0 6px #73e8ff);
}

.orbit-whirlpool.is-slurp-ribbon-rush {
  filter: url(#orbit-vortex-glow) brightness(1.78) saturate(1.64) drop-shadow(0 0 5px #ff8ee0);
}

.orbit-whirlpool.is-slurp-prism-snap {
  filter: url(#orbit-vortex-glow) brightness(2) saturate(1.72) drop-shadow(0 0 6px white);
}

.orbit-whirlpool.is-slurp-nova-crunch {
  filter: url(#orbit-vortex-glow) brightness(1.92) saturate(1.7) drop-shadow(0 0 7px #ff884d);
}

.orbit-whirlpool.is-slurp-tractor-tug {
  filter: url(#orbit-vortex-glow) brightness(1.82) saturate(1.48) drop-shadow(0 0 7px #66efff);
}

.orbit-whirlpool.is-slurp-pixel-munch {
  filter: url(#orbit-vortex-glow) brightness(1.9) saturate(1.66) drop-shadow(0 0 7px #ff76c9);
}

.orbit-whirlpool.is-slurp-lightning-lick {
  filter: url(#orbit-vortex-glow) brightness(2.08) saturate(1.46) drop-shadow(0 0 8px #b57aff);
}

.orbit-whirlpool.is-slurp-ring-slinky {
  filter: url(#orbit-vortex-glow) brightness(1.86) saturate(1.58) drop-shadow(0 0 7px #62f2da);
}

.orbit-vortex-slurp-ring.is-star-funnel {
  stroke: #fff3a0;
  stroke-width: 4.2;
  stroke-dasharray: 1 5;
}

.orbit-vortex-slurp-ring.is-bubble-gulp {
  stroke: #b8ffff;
  stroke-width: 4.8;
  stroke-dasharray: 0.8 7;
  filter: blur(0.4px) drop-shadow(0 0 4px #62e6ff);
}

.orbit-vortex-slurp-ring.is-ribbon-rush {
  stroke: #ff9de4;
  stroke-width: 3.5;
  stroke-dasharray: 8 3 2 3;
}

.orbit-vortex-slurp-ring.is-prism-snap {
  stroke: white;
  stroke-width: 3.8;
  stroke-dasharray: 2 3;
  filter: drop-shadow(0 0 4px #d583ff);
}

.orbit-vortex-slurp-ring.is-nova-crunch {
  stroke: #fff087;
  stroke-width: 4.4;
  stroke-dasharray: 9 3 1 3;
  filter: drop-shadow(0 0 4px #ff734f);
}

.orbit-vortex-slurp-ring.is-tractor-tug {
  stroke: #7ff7ff;
  stroke-width: 4;
  stroke-dasharray: 12 3 2 3;
  filter: drop-shadow(0 0 4px #6178ff);
}

.orbit-vortex-slurp-ring.is-pixel-munch {
  stroke: #fff078;
  stroke-width: 4.2;
  stroke-dasharray: 2 4;
  filter: drop-shadow(0 0 4px #ff6dc7);
}

.orbit-vortex-slurp-ring.is-lightning-lick {
  stroke: white;
  stroke-width: 3.4;
  stroke-dasharray: 1 2 7 2;
  filter: drop-shadow(0 0 4px #68efff) drop-shadow(0 0 7px #b667ff);
}

.orbit-vortex-slurp-ring.is-ring-slinky {
  stroke: #8cffe8;
  stroke-width: 3.7;
  stroke-dasharray: 5 3;
  filter: drop-shadow(0 0 4px #ff83d9);
}

.orbit-whirlpool.is-charge-1 { filter: url(#orbit-vortex-glow) brightness(1.05); }
.orbit-whirlpool.is-charge-2 { filter: url(#orbit-vortex-glow) brightness(1.12) saturate(1.08); }
.orbit-whirlpool.is-charge-3 { filter: url(#orbit-vortex-glow) brightness(1.2) saturate(1.14); }
.orbit-whirlpool.is-charge-4 { filter: url(#orbit-vortex-glow) brightness(1.32) saturate(1.2); }

.orbit-whirlpool.is-overcharged {
  filter: url(#orbit-vortex-glow) brightness(1.8) saturate(1.5);
}

.orbit-whirlpool.is-overcharged .orbit-vortex-aura {
  animation: orbit-overcharge-aura 680ms cubic-bezier(.16, .82, .24, 1) both;
}

.orbit-whirlpool.is-preview-target {
  filter: url(#orbit-vortex-glow) brightness(1.55) saturate(1.28);
}

.orbit-whirlpool.is-preview-target .orbit-vortex-pool-rim,
.orbit-whirlpool.is-preview-target .orbit-whirlpool-core-rim {
  animation: orbit-vortex-target 640ms ease-in-out infinite alternate;
}

.orbit-whirlpool.is-catching .orbit-whirlpool-core-rim,
.orbit-whirlpool.is-catching .orbit-vortex-pool-rim {
  animation: orbit-vortex-catch 540ms cubic-bezier(.18, .8, .25, 1) both;
}

.orbit-stage[data-orbit-quality="balanced"] .orbit-oddity:not(.is-capturing) {
  filter: drop-shadow(0 1px 0 rgba(0, 16, 27, 0.82));
}

.orbit-stage[data-orbit-quality="balanced"] .orbit-rocket-plume,
.orbit-stage[data-orbit-quality="balanced"] .orbit-rocket-core,
.orbit-stage[data-orbit-quality="balanced"] .orbit-rocket-sparks {
  filter: none;
}

.orbit-stage[data-orbit-quality="balanced"] .orbit-whirlpool:not(.is-catching):not(.is-preview-target):not(.is-overcharged) {
  filter: none;
}

.orbit-stage[data-orbit-quality="balanced"] .orbit-whirlpool:not(.is-catching) .orbit-vortex-aura {
  filter: blur(2px);
  opacity: 0.5;
}

.orbit-stage[data-orbit-quality="balanced"] .orbit-whirlpool:not(.is-catching) :is(
  .orbit-vortex-pool,
  .orbit-vortex-arm,
  .orbit-vortex-arm-depth,
  .orbit-vortex-wisp
) {
  filter: none;
}

.orbit-stage.is-animation-paused :is(
  .orbit-surface-art,
  .orbit-route-preview,
  .orbit-touch-guide-path,
  .orbit-hover-route,
  .orbit-blocker-wisp > *,
  .orbit-rocket-glow,
  .orbit-rocket-plume,
  .orbit-rocket-flame,
  .orbit-rocket-core,
  .orbit-rocket-bloom,
  .orbit-rocket-sparks,
  .orbit-whirlpool,
  .orbit-vortex-pool-rim,
  .orbit-whirlpool-core-rim,
  .orbit-echo-depth-rings,
  .orbit-echo-figure,
  .orbit-echo-nodes circle,
  .orbit-echo-core
) {
  animation-play-state: paused !important;
}

.orbit-hit-layer {
  z-index: 4;
  pointer-events: none;
}

.orbit-arrow-hit {
  position: absolute;
  inset: 0 auto auto 0;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

.orbit-arrow-hit::before {
  position: absolute;
  inset: 0.22rem;
  border: 0.11rem solid rgba(216, 255, 244, 0.78);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 140ms ease, transform 140ms ease;
  content: "";
}

.orbit-arrow-hit:focus-visible::before,
.orbit-arrow-hit.is-hint::before {
  opacity: 1;
  transform: scale(1);
}

.orbit-arrow-hit.is-aqua:focus-visible::before {
  border-color: #82ffe5;
  box-shadow: 0 0 0.8rem rgba(76, 239, 228, 0.72);
}

.orbit-arrow-hit.is-violet:focus-visible::before {
  border-color: #ff9fdf;
  box-shadow: 0 0 0.8rem rgba(170, 126, 255, 0.72);
}

.orbit-arrow-hit.is-hint::before {
  border-color: #d4ff66;
  box-shadow: 0 0 0.8rem rgba(207, 255, 92, 0.75);
}

.orbit-arrow-hit.is-behind:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.orbit-drag-label {
  position: absolute;
  z-index: 2;
  inset: 0.75rem auto auto 0.78rem;
  color: rgba(217, 247, 250, 0.46);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  pointer-events: none;
}

.orbit-reward-burst {
  --reward-color: #cfff63;

  position: absolute;
  z-index: 8;
  inset: 47% auto auto 50%;
  display: grid;
  min-width: 7.2rem;
  place-items: center;
  color: white;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.55);
}

.orbit-reward-burst.is-visible {
  animation: orbit-reward-pop 820ms cubic-bezier(.16, .82, .2, 1) both;
}

.orbit-reward-icon {
  display: grid;
  width: 2.4rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.13rem solid rgba(255, 255, 255, 0.72);
  border-radius: 0.82rem;
  background: linear-gradient(145deg, white, var(--reward-color));
  color: #102731;
  box-shadow: 0 0 1.4rem var(--reward-color);
}

.orbit-reward-burst strong {
  margin-block-start: 0.25rem;
  font-family: var(--mono);
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 0.12rem 0.65rem #06131d;
}

.orbit-reward-burst small {
  margin-block-start: 0.15rem;
  color: #eaffff;
  font-size: 0.56rem;
  font-weight: 800;
  text-shadow: 0 0.1rem 0.45rem #06131d;
}

.orbit-reward-burst i {
  --particle-angle: 0deg;
  --particle-delay: 45ms;
  --particle-distance: 4rem;

  position: absolute;
  inset: 33% auto auto 50%;
  width: 0.34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--reward-color);
  box-shadow: 0 0 0.6rem var(--reward-color);
  opacity: 0;
}

.orbit-reward-burst.is-visible i {
  animation: orbit-reward-particle 720ms cubic-bezier(.12, .72, .18, 1) var(--particle-delay) both;
}

.orbit-reward-burst i:nth-of-type(1) { --particle-angle: 0deg; }
.orbit-reward-burst i:nth-of-type(2) { --particle-angle: 60deg; }
.orbit-reward-burst i:nth-of-type(3) { --particle-angle: 120deg; }
.orbit-reward-burst i:nth-of-type(4) { --particle-angle: 180deg; }
.orbit-reward-burst i:nth-of-type(5) { --particle-angle: 240deg; }
.orbit-reward-burst i:nth-of-type(6) { --particle-angle: 300deg; }
.orbit-reward-burst i:nth-of-type(7) { --particle-angle: 30deg; }
.orbit-reward-burst i:nth-of-type(8) { --particle-angle: 90deg; }
.orbit-reward-burst i:nth-of-type(9) { --particle-angle: 150deg; }
.orbit-reward-burst i:nth-of-type(10) { --particle-angle: 210deg; }
.orbit-reward-burst i:nth-of-type(11) { --particle-angle: 270deg; }
.orbit-reward-burst i:nth-of-type(12) { --particle-angle: 330deg; }

.orbit-reward-burst i:nth-of-type(n + 7) {
  --particle-delay: 130ms;
  --particle-distance: 3rem;

  width: 0.36rem;
  background: white;
}

.board-message.orbit-message {
  --orbit-message-accent: #75f5ff;
  --orbit-message-accent-two: #cfff5c;

  position: absolute;
  z-index: 7;
  inset: 25% auto auto 50%;
  display: flex;
  width: max-content;
  max-width: min(82%, 22rem);
  min-height: 3.5rem;
  align-items: center;
  gap: 0.68rem;
  padding: 0.62rem 1rem 0.62rem 0.7rem;
  border: 0.12rem solid color-mix(in srgb, var(--orbit-message-accent) 72%, white);
  border-radius: 1.2rem;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.2) 44%, transparent 52%) -12rem 0 / 12rem 100% no-repeat,
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(145deg, rgba(13, 63, 81, 0.98), rgba(6, 20, 42, 0.98));
  box-shadow:
    0 0 0 0.22rem rgba(4, 18, 33, 0.76),
    0 0.75rem 2rem rgba(0, 5, 18, 0.58),
    0 0 1.6rem color-mix(in srgb, var(--orbit-message-accent) 46%, transparent),
    inset 0 0.1rem rgba(255, 255, 255, 0.38);
  color: white;
  font-size: clamp(0.86rem, 3vw, 1rem);
  line-height: 1.2;
  text-align: left;
  text-wrap: balance;
  text-shadow: 0 0.12rem 0.55rem #03121d;
  transform: translate(-50%, -50%) scale(0.82) rotate(-2deg);
  filter: saturate(1.12);
  contain: layout paint;
}

.board-message.orbit-message[data-variant="warning"] {
  --orbit-message-accent: #ff786d;
  --orbit-message-accent-two: #ffd65c;
}

.board-message.orbit-message[data-variant="hint"] {
  --orbit-message-accent: #c398ff;
  --orbit-message-accent-two: #65f5ff;
}

.orbit-message-icon {
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 0.12rem solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, white 0 7%, transparent 9%),
    linear-gradient(145deg, var(--orbit-message-accent-two), var(--orbit-message-accent));
  box-shadow:
    0 0.22rem 0 rgba(1, 17, 29, 0.46),
    0 0 1rem color-mix(in srgb, var(--orbit-message-accent) 72%, transparent),
    inset 0 0.18rem 0.25rem rgba(255, 255, 255, 0.48);
  color: #0a2732;
  font-size: 1.18rem;
  text-shadow: 0 0.06rem white;
}

.orbit-message-sparkles,
.orbit-message-sparkles i {
  position: absolute;
  pointer-events: none;
}

.orbit-message-sparkles {
  inset: -0.55rem;
}

.orbit-message-sparkles i {
  width: 0.34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orbit-message-accent-two);
  box-shadow: 0 0 0.55rem currentColor;
}

.orbit-message-sparkles i:nth-child(1) { top: 4%; left: 8%; }
.orbit-message-sparkles i:nth-child(2) { top: -4%; left: 38%; }
.orbit-message-sparkles i:nth-child(3) { top: 12%; right: 4%; }
.orbit-message-sparkles i:nth-child(4) { right: 10%; bottom: -2%; }
.orbit-message-sparkles i:nth-child(5) { bottom: 3%; left: 28%; }
.orbit-message-sparkles i:nth-child(6) { bottom: 15%; left: 1%; }

.board-message.orbit-message.is-visible {
  animation: orbit-message-pop 1000ms cubic-bezier(.2, .82, .24, 1) both;
}

.board-message.orbit-message.is-visible {
  background-position: 32rem 0, 0 0, 0 0;
  transition: background-position 760ms ease-out;
}

.board-message.orbit-message.is-visible .orbit-message-icon {
  animation: orbit-message-icon-pop 820ms cubic-bezier(.18, .88, .28, 1) both;
}

.board-message.orbit-message.is-visible .orbit-message-sparkles i {
  animation: orbit-message-sparkle 760ms ease-out both;
}

.orbit-message-sparkles i:nth-child(even) { animation-delay: 80ms !important; }

@keyframes orbit-message-pop {
  0% { opacity: 0; transform: translate(-50%, -36%) scale(0.72) rotate(-4deg); }
  16% { opacity: 1; transform: translate(-50%, -52%) scale(1.08) rotate(1.2deg); }
  27%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  88% { opacity: 1; transform: translate(-50%, -53%) scale(1.02) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(0.88) rotate(1deg); }
}

@keyframes orbit-message-icon-pop {
  0% { transform: scale(0.25) rotate(-50deg); }
  30% { transform: scale(1.25) rotate(14deg); }
  52%, 100% { transform: scale(1) rotate(0); }
}

@keyframes orbit-message-sparkle {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  24% { opacity: 1; transform: translateY(-0.35rem) scale(1.35); }
  100% { opacity: 0; transform: translateY(-1rem) scale(0.25); }
}

.orbit-level-arrival {
  --orbit-arrival-duration: 1160ms;
  --orbit-arrival-primary: #84f6ff;
  --orbit-arrival-secondary: #acff54;
  --orbit-arrival-tertiary: #b8a2ff;
  --orbit-arrival-ink: #12313a;
  --orbit-arrival-shadow: #368792;

  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  contain: layout paint;
}

.orbit-level-arrival::before,
.orbit-level-arrival::after {
  position: absolute;
  inset: 0;
  content: "";
}

.orbit-level-arrival::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2%, color-mix(in oklab, var(--orbit-arrival-primary) 62%, transparent) 7%, transparent 27%),
    radial-gradient(circle at 50% 52%, color-mix(in oklab, var(--orbit-arrival-secondary) 30%, transparent), transparent 43%);
  mix-blend-mode: screen;
}

.orbit-level-arrival::after {
  inset: -30%;
  background: repeating-conic-gradient(
    from 8deg,
    transparent 0 13deg,
    color-mix(in oklab, var(--orbit-arrival-primary) 22%, transparent) 15deg 17deg,
    transparent 19deg 34deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0 16%, #000 23% 58%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 0 16%, #000 23% 58%, transparent 76%);
}

.orbit-stage.is-level-arriving .orbit-level-arrival {
  animation: orbit-arrival-overlay var(--orbit-arrival-duration) ease-out both;
}

.orbit-stage.is-level-arriving .orbit-level-arrival::before {
  animation: orbit-arrival-flash var(--orbit-arrival-duration) ease-out both;
}

.orbit-stage.is-level-arriving .orbit-level-arrival::after {
  animation: orbit-arrival-rays var(--orbit-arrival-duration) ease-out both;
}

.orbit-stage.is-level-arriving :is(#orbit-sphere, .orbit-hit-layer) {
  animation-duration: var(--orbit-arrival-duration);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.16, .84, .22, 1);
  will-change: transform, opacity;
}

.orbit-stage.is-level-arriving[data-level-transition="nova-pop"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-nova-pop;
}

.orbit-stage.is-level-arriving[data-level-transition="orbit-sling"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-sling;
}

.orbit-stage.is-level-arriving[data-level-transition="gravity-drop"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-gravity-drop;
}

.orbit-stage.is-level-arriving[data-level-transition="portal-squash"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-portal-squash;
}

.orbit-stage.is-level-arriving[data-level-transition="cosmic-flip"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-cosmic-flip;
  backface-visibility: hidden;
}

.orbit-stage.is-level-arriving[data-level-transition="comet-corkscrew"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-comet-corkscrew;
}

.orbit-stage.is-level-arriving[data-level-transition="prism-bloom"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-prism-bloom;
}

.orbit-stage.is-level-arriving[data-level-transition="planet-pinball"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-planet-pinball;
}

.orbit-stage.is-level-arriving[data-level-transition="ribbon-unfurl"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-ribbon-unfurl;
  backface-visibility: hidden;
}

.orbit-stage.is-level-arriving[data-level-transition="wormhole-ripple"] :is(#orbit-sphere, .orbit-hit-layer) {
  animation-name: orbit-arrival-wormhole-ripple;
  backface-visibility: hidden;
}

.orbit-stage[data-level-transition="comet-corkscrew"] .orbit-level-arrival {
  --orbit-arrival-primary: #68f5ff;
  --orbit-arrival-secondary: #ffe36e;
  --orbit-arrival-tertiary: #ff7ccd;
  --orbit-arrival-shadow: #356db0;
}

.orbit-stage[data-level-transition="prism-bloom"] .orbit-level-arrival {
  --orbit-arrival-primary: #84e7ff;
  --orbit-arrival-secondary: #efff75;
  --orbit-arrival-tertiary: #ff82e2;
  --orbit-arrival-shadow: #8261bc;
}

.orbit-stage[data-level-transition="planet-pinball"] .orbit-level-arrival {
  --orbit-arrival-primary: #ff8dd4;
  --orbit-arrival-secondary: #78f5ef;
  --orbit-arrival-tertiary: #ffe16b;
  --orbit-arrival-shadow: #864f9d;
}

.orbit-stage[data-level-transition="ribbon-unfurl"] .orbit-level-arrival {
  --orbit-arrival-primary: #c6ff68;
  --orbit-arrival-secondary: #6be9f1;
  --orbit-arrival-tertiary: #ff8bca;
  --orbit-arrival-shadow: #438c84;
}

.orbit-stage[data-level-transition="wormhole-ripple"] .orbit-level-arrival {
  --orbit-arrival-primary: #a88dff;
  --orbit-arrival-secondary: #67f4df;
  --orbit-arrival-tertiary: #ff77ba;
  --orbit-arrival-shadow: #593f9c;
}

.orbit-stage.is-level-arriving[data-level-transition="comet-corkscrew"] .orbit-level-arrival::after {
  animation-name: orbit-arrival-comet-rays;
}

.orbit-stage.is-level-arriving[data-level-transition="planet-pinball"] .orbit-level-arrival::after {
  background:
    radial-gradient(circle at 25% 26%, var(--orbit-arrival-tertiary) 0 0.2rem, transparent 0.23rem),
    radial-gradient(circle at 78% 33%, var(--orbit-arrival-secondary) 0 0.24rem, transparent 0.27rem),
    radial-gradient(circle at 66% 76%, var(--orbit-arrival-primary) 0 0.18rem, transparent 0.21rem),
    radial-gradient(circle at 31% 70%, white 0 0.15rem, transparent 0.18rem);
  -webkit-mask-image: none;
  mask-image: none;
  animation-name: orbit-arrival-pinball-burst;
}

.orbit-stage.is-level-arriving[data-level-transition="ribbon-unfurl"] .orbit-level-arrival::after {
  background: repeating-linear-gradient(
    118deg,
    transparent 0 1.2rem,
    color-mix(in oklab, var(--orbit-arrival-primary) 32%, transparent) 1.25rem 1.55rem,
    transparent 1.6rem 2.8rem
  );
  -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 72%);
  mask-image: radial-gradient(circle, #000 5%, transparent 72%);
  animation-name: orbit-arrival-ribbon-rays;
}

.orbit-stage.is-level-arriving[data-level-transition="wormhole-ripple"] .orbit-level-arrival::after {
  animation-name: orbit-arrival-wormhole-rays;
}

.orbit-arrival-ring {
  --arrival-ring-rotation: 0deg;

  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 0.12rem solid color-mix(in oklab, var(--orbit-arrival-primary) 82%, white);
  border-radius: 50%;
  box-shadow:
    0 0 0.8rem color-mix(in oklab, var(--orbit-arrival-primary) 72%, transparent),
    inset 0 0 0.8rem color-mix(in oklab, var(--orbit-arrival-secondary) 42%, transparent);
  opacity: 0;
}

.orbit-arrival-ring.is-middle {
  width: 54%;
  border-color: color-mix(in oklab, var(--orbit-arrival-secondary) 74%, transparent);
  animation-delay: 70ms !important;
}

.orbit-arrival-ring.is-outer {
  width: 68%;
  border-color: color-mix(in oklab, var(--orbit-arrival-tertiary) 68%, transparent);
  animation-delay: 135ms !important;
}

.orbit-stage.is-level-arriving .orbit-arrival-ring {
  animation: orbit-arrival-ring calc(var(--orbit-arrival-duration) - 250ms) cubic-bezier(.12, .72, .2, 1) both;
}

.orbit-stage[data-level-transition="prism-bloom"] .orbit-arrival-ring {
  --arrival-ring-rotation: 45deg;

  border-radius: 1.05rem;
}

.orbit-stage[data-level-transition="planet-pinball"] .orbit-arrival-ring.is-middle {
  border-style: dashed;
}

.orbit-stage[data-level-transition="wormhole-ripple"] .orbit-arrival-ring {
  border-width: 0.2rem;
  border-radius: 46% 54% 44% 56% / 56% 44% 58% 42%;
}

.orbit-arrival-badge {
  position: relative;
  z-index: 3;
  display: grid;
  min-width: 9.4rem;
  place-items: center;
  padding: 0.68rem 1.15rem 0.62rem;
  overflow: hidden;
  border: 0.12rem solid rgba(255, 255, 255, 0.9);
  border-radius: 1.15rem;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.86), transparent 28% 66%, rgba(255, 255, 255, 0.52)),
    linear-gradient(145deg, var(--orbit-arrival-secondary), var(--orbit-arrival-primary) 58%, var(--orbit-arrival-tertiary));
  color: var(--orbit-arrival-ink);
  box-shadow:
    0 0.34rem 0 var(--orbit-arrival-shadow),
    0 0.9rem 2.2rem color-mix(in oklab, var(--orbit-arrival-primary) 46%, transparent),
    inset 0 0.13rem 0 rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 0.05rem 0 rgba(255, 255, 255, 0.65);
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.orbit-arrival-badge::before {
  position: absolute;
  inset: -70% auto -70% -28%;
  width: 24%;
  background: rgba(255, 255, 255, 0.74);
  content: "";
  transform: rotate(18deg);
}

.orbit-arrival-badge small,
.orbit-arrival-badge strong {
  position: relative;
}

.orbit-arrival-badge small {
  font-size: 0.52rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.orbit-arrival-badge strong {
  margin-block-start: 0.12rem;
  font-family: var(--mono);
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.orbit-stage.is-level-arriving .orbit-arrival-badge {
  animation: orbit-arrival-badge var(--orbit-arrival-duration) cubic-bezier(.34, 1.56, .64, 1) both;
  animation-timing-function: linear(0, .42 15%, .88 30%, 1.09 43%, .97 58%, 1.03 72%, 1 86%);
}

.orbit-stage.is-level-arriving[data-level-transition="comet-corkscrew"] .orbit-arrival-badge {
  animation-name: orbit-arrival-badge-comet;
}

.orbit-stage.is-level-arriving[data-level-transition="prism-bloom"] .orbit-arrival-badge {
  animation-name: orbit-arrival-badge-prism;
  backface-visibility: hidden;
}

.orbit-stage.is-level-arriving[data-level-transition="planet-pinball"] .orbit-arrival-badge {
  animation-name: orbit-arrival-badge-pinball;
}

.orbit-stage.is-level-arriving[data-level-transition="ribbon-unfurl"] .orbit-arrival-badge {
  animation-name: orbit-arrival-badge-ribbon;
}

.orbit-stage.is-level-arriving[data-level-transition="wormhole-ripple"] .orbit-arrival-badge {
  animation-name: orbit-arrival-badge-wormhole;
}

.orbit-stage.is-level-arriving .orbit-arrival-badge::before {
  animation: orbit-arrival-badge-shine var(--orbit-arrival-duration) ease-in-out both;
}

.orbit-arrival-particles {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
}

.orbit-arrival-particles i {
  --arrival-angle: 0deg;
  --arrival-distance: 9rem;
  --arrival-delay: 0ms;

  position: absolute;
  inset: 0 auto auto 0;
  width: 0.42rem;
  aspect-ratio: 1;
  border: 0.07rem solid rgba(255, 255, 255, 0.92);
  border-radius: 0.16rem;
  background: var(--orbit-arrival-secondary);
  box-shadow: 0 0 0.7rem currentColor;
  color: var(--orbit-arrival-primary);
  opacity: 0;
}

.orbit-arrival-particles i:nth-child(3n + 2) {
  width: 0.28rem;
  border-radius: 50%;
  background: var(--orbit-arrival-tertiary);
  color: var(--orbit-arrival-tertiary);
}

.orbit-arrival-particles i:nth-child(4n) {
  width: 0.55rem;
  background: color-mix(in oklab, var(--orbit-arrival-tertiary) 72%, white);
  color: var(--orbit-arrival-tertiary);
  transform: rotate(45deg);
}

.orbit-stage.is-level-arriving .orbit-arrival-particles i {
  animation: orbit-arrival-particle calc(var(--orbit-arrival-duration) - 210ms) cubic-bezier(.12, .75, .2, 1) var(--arrival-delay) both;
}

.orbit-arrival-particles i:nth-child(1) { --arrival-angle: 4deg; --arrival-distance: 8.7rem; }
.orbit-arrival-particles i:nth-child(2) { --arrival-angle: 27deg; --arrival-distance: 10.2rem; --arrival-delay: 45ms; }
.orbit-arrival-particles i:nth-child(3) { --arrival-angle: 50deg; --arrival-distance: 8rem; --arrival-delay: 90ms; }
.orbit-arrival-particles i:nth-child(4) { --arrival-angle: 73deg; --arrival-distance: 9.6rem; --arrival-delay: 20ms; }
.orbit-arrival-particles i:nth-child(5) { --arrival-angle: 96deg; --arrival-distance: 8.9rem; --arrival-delay: 70ms; }
.orbit-arrival-particles i:nth-child(6) { --arrival-angle: 119deg; --arrival-distance: 10.4rem; --arrival-delay: 110ms; }
.orbit-arrival-particles i:nth-child(7) { --arrival-angle: 142deg; --arrival-distance: 8.1rem; --arrival-delay: 55ms; }
.orbit-arrival-particles i:nth-child(8) { --arrival-angle: 165deg; --arrival-distance: 9.8rem; }
.orbit-arrival-particles i:nth-child(9) { --arrival-angle: 188deg; --arrival-distance: 8.6rem; --arrival-delay: 85ms; }
.orbit-arrival-particles i:nth-child(10) { --arrival-angle: 211deg; --arrival-distance: 10rem; --arrival-delay: 35ms; }
.orbit-arrival-particles i:nth-child(11) { --arrival-angle: 234deg; --arrival-distance: 8rem; --arrival-delay: 105ms; }
.orbit-arrival-particles i:nth-child(12) { --arrival-angle: 257deg; --arrival-distance: 9.5rem; --arrival-delay: 65ms; }
.orbit-arrival-particles i:nth-child(13) { --arrival-angle: 280deg; --arrival-distance: 8.8rem; --arrival-delay: 15ms; }
.orbit-arrival-particles i:nth-child(14) { --arrival-angle: 303deg; --arrival-distance: 10.1rem; --arrival-delay: 95ms; }
.orbit-arrival-particles i:nth-child(15) { --arrival-angle: 326deg; --arrival-distance: 8.2rem; --arrival-delay: 40ms; }
.orbit-arrival-particles i:nth-child(16) { --arrival-angle: 349deg; --arrival-distance: 9.7rem; --arrival-delay: 75ms; }

.orbit-cascade-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  margin-block: 0.7rem;
  padding: 0.68rem;
  border: 1px solid rgba(19, 42, 51, 0.1);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 0 0, rgba(130, 181, 255, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.orbit-cascade-copy > * {
  display: block;
}

.orbit-cascade-copy :is(strong, h2) {
  margin: 0.12rem 0 0;
  font-size: 0.7rem;
}

.orbit-cascade-copy small {
  margin-block-start: 0.1rem;
  color: var(--ink-soft);
  font-size: 0.5rem;
}

.orbit-cascade-status {
  text-align: center;
}

.orbit-cascade-status span,
.orbit-cascade-status strong {
  display: block;
}

.orbit-cascade-status span {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
}

.orbit-cascade-status strong {
  color: #684df0;
  font-family: var(--mono);
  font-size: 1.08rem;
}

.orbit-cascade-status > small {
  display: block;
  margin-block-start: 0.08rem;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.orbit-cascade-status.is-hot strong {
  color: #db4e9d;
  text-shadow: 0 0 0.75rem rgba(255, 91, 183, 0.32);
}

.orbit-cascade-options {
  display: flex;
  gap: 0.24rem;
  padding: 0.2rem;
  border-radius: 0.78rem;
  background: rgba(19, 42, 51, 0.08);
}

.orbit-cascade-options button {
  min-width: 2.2rem;
  min-height: 2.1rem;
  padding: 0.3rem;
  border: 0;
  border-radius: 0.62rem;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
}

.orbit-cascade-options button.is-active {
  background: linear-gradient(145deg, #b69aff, #76e5e8);
  color: #0c2632;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0.3rem 0.8rem rgba(89, 78, 180, 0.18);
}

.classic-cascade-panel {
  grid-template-areas:
    "copy status options"
    "surge surge surge";
  grid-template-columns: minmax(0, 1fr) auto auto;
  background:
    radial-gradient(circle at 0 0, rgba(255, 205, 92, 0.2), transparent 38%),
    rgba(255, 255, 255, 0.67);
}

.classic-cascade-panel .orbit-cascade-copy { grid-area: copy; }
.classic-cascade-panel .orbit-cascade-status { grid-area: status; }
.classic-cascade-panel .orbit-cascade-options { grid-area: options; }

.classic-surge-meter {
  --classic-charge: 0%;

  position: relative;
  display: grid;
  grid-area: surge;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.58rem;
  overflow: hidden;
  border: 1px solid rgba(19, 42, 51, 0.1);
  border-radius: 0.75rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffd65f 26%, transparent) var(--classic-charge), transparent var(--classic-charge)),
    rgba(19, 42, 51, 0.055);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  transition: background 240ms ease;
}

.classic-surge-meter::after {
  position: absolute;
  inset: 0 auto 0 -22%;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  content: "";
  opacity: 0;
  transform: skewX(-18deg);
}

.classic-surge-meter.is-surging::after {
  animation: classic-surge-flash 620ms ease-out both;
}

.classic-surge-pips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.26rem;
}

.classic-surge-pips i {
  height: 0.38rem;
  border-radius: 99px;
  background: rgba(19, 42, 51, 0.13);
  box-shadow: inset 0 1px 1px rgba(19, 42, 51, 0.12);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.classic-surge-pips i.is-charged {
  background: linear-gradient(90deg, #ffc453, #cfff63);
  box-shadow: 0 0 0.55rem rgba(255, 196, 83, 0.55);
  transform: scaleY(1.2);
}

.classic-reward-burst {
  z-index: 20;
  color: var(--ink);
}

.classic-reward-burst strong,
.classic-reward-burst small {
  padding: 0.18rem 0.42rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 0.35rem 1rem rgba(19, 42, 51, 0.18);
  text-shadow: none;
}

@keyframes classic-surge-flash {
  0% { left: -22%; opacity: 0; }
  18% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@keyframes orbit-route-flow {
  to { stroke-dashoffset: -22; }
}

@keyframes orbit-junk-direction-glow {
  0%, 100% { opacity: 0.16; scale: 0.78; }
  50% { opacity: 0.42; scale: 1.04; }
}

@keyframes orbit-blocked-marker-pop {
  0% { opacity: 0; transform: scale(0.42) rotate(-16deg); }
  44% { opacity: 1; transform: scale(1.18) rotate(4deg); }
  68% { transform: scale(0.94) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes orbit-blocked-mark-flash {
  0%, 16% { opacity: 0; }
  38%, 100% { opacity: 1; }
}

@keyframes orbit-blocker-wisp-flow {
  to { stroke-dashoffset: -30; }
}

@keyframes orbit-blocker-wisp-ring {
  from { opacity: 0.62; stroke-width: 1.7; stroke-dashoffset: 0; }
  to { opacity: 1; stroke-width: 3.2; stroke-dashoffset: -12; }
}

@keyframes orbit-blocker-wisp-spark {
  from { opacity: 0.38; }
  to { opacity: 1; }
}

@keyframes orbit-rocket-glow {
  from { opacity: 0.22; }
  to { opacity: 0.46; }
}

@keyframes orbit-rocket-plume {
  from { opacity: 0.68; }
  to { opacity: 1; }
}

@keyframes orbit-rocket-flow {
  to { stroke-dashoffset: -47; }
}

@keyframes orbit-rocket-sparks {
  0% { opacity: 0.18; stroke-dashoffset: 0; }
  22% { opacity: 1; }
  72% { opacity: 0.78; }
  100% { opacity: 0.12; stroke-dashoffset: -52; }
}

@keyframes orbit-rocket-bloom {
  0% { opacity: 0; stroke-dashoffset: 4; }
  16% { opacity: 0.95; }
  58% { opacity: 0.62; }
  100% { opacity: 0; stroke-dashoffset: -42; }
}

@keyframes orbit-surface-cycle {
  0%, 27% { opacity: 0.12; }
  32%, 95% { opacity: 0; }
  100% { opacity: 0.12; }
}

@keyframes orbit-oddity-pulse {
  to { opacity: 0.72; }
}

@keyframes orbit-oddity-alert {
  0%, 100% { opacity: 1; }
  35%, 70% { opacity: 0.52; }
}

@keyframes orbit-vortex-target {
  to { stroke-width: 7.4; opacity: 1; }
}

@keyframes orbit-overcharge-aura {
  0% { opacity: 0.5; }
  36% { opacity: 1; filter: blur(2px); }
  100% { opacity: 0.62; filter: blur(4.2px); }
}

@keyframes orbit-reward-pop {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(0.55) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  38%, 70% { opacity: 1; transform: translate(-50%, -54%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(0.92); }
}

@keyframes orbit-reward-particle {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(-0.8rem) scale(0.4); }
  20% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(calc(var(--particle-distance) * -1)) scale(1.18) rotate(45deg); }
}

@keyframes orbit-arrival-overlay {
  0% { opacity: 0; }
  8%, 74% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes orbit-arrival-flash {
  0% { opacity: 0; transform: scale(0.18); }
  13% { opacity: 0.95; }
  46% { opacity: 0.28; transform: scale(1.24); }
  100% { opacity: 0; transform: scale(1.7); }
}

@keyframes orbit-arrival-rays {
  0% { opacity: 0; transform: rotate(-16deg) scale(0.55); }
  18%, 58% { opacity: 0.8; }
  100% { opacity: 0; transform: rotate(42deg) scale(1.12); }
}

@keyframes orbit-arrival-ring {
  0% { opacity: 0; transform: rotate(var(--arrival-ring-rotation)) scale(0.12); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--arrival-ring-rotation) + 72deg)) scale(1.82); }
}

@keyframes orbit-arrival-badge {
  0% { transform: translateY(1.6rem) rotate(-7deg) scale(0.12); }
  58% { transform: translateY(-0.14rem) rotate(1deg) scale(1); }
  100% { transform: translateY(-0.7rem) rotate(0deg) scale(0.96); }
}

@keyframes orbit-arrival-badge-shine {
  0%, 30% { left: -28%; opacity: 0; }
  42% { opacity: 0.9; }
  72%, 100% { left: 122%; opacity: 0; }
}

@keyframes orbit-arrival-badge-comet {
  0% { opacity: 0; transform: translate(5.4rem, -3rem) rotate(14deg) scale(0.32); }
  38% { opacity: 1; transform: translate(-0.45rem, 0.2rem) rotate(-3deg) scale(1.09); }
  67% { transform: translate(0.12rem, -0.1rem) rotate(1deg) scale(0.98); }
  100% { opacity: 1; transform: translateY(-0.7rem) rotate(0) scale(0.96); }
}

@keyframes orbit-arrival-badge-prism {
  0% { opacity: 0; transform: perspective(28rem) rotateY(88deg) rotateZ(12deg) scale(0.38); }
  42% { opacity: 1; transform: perspective(28rem) rotateY(-13deg) rotateZ(-2deg) scale(1.08); }
  70% { transform: perspective(28rem) rotateY(5deg) rotateZ(0.7deg) scale(0.99); }
  100% { opacity: 1; transform: perspective(28rem) rotateY(0) translateY(-0.7rem) scale(0.96); }
}

@keyframes orbit-arrival-badge-pinball {
  0% { opacity: 0; transform: translate(-5rem, -2.8rem) rotate(-12deg) scale(0.4); }
  30% { opacity: 1; transform: translate(1.2rem, 0.6rem) rotate(5deg) scale(1.07); }
  53% { transform: translate(-0.65rem, -0.25rem) rotate(-2deg) scale(0.98); }
  74% { transform: translate(0.22rem, -0.42rem) rotate(0.8deg) scale(1.01); }
  100% { opacity: 1; transform: translateY(-0.7rem) rotate(0) scale(0.96); }
}

@keyframes orbit-arrival-badge-ribbon {
  0% { opacity: 0; transform: scaleX(0.04) scaleY(0.72) rotate(-5deg); }
  40% { opacity: 1; transform: scaleX(1.12) scaleY(0.94) rotate(2deg); }
  64% { transform: scaleX(0.97) scaleY(1.04) rotate(-0.6deg); }
  100% { opacity: 1; transform: translateY(-0.7rem) scale(0.96); }
}

@keyframes orbit-arrival-badge-wormhole {
  0% { opacity: 0; transform: perspective(30rem) translateZ(-14rem) rotateX(68deg) scale(0.12); }
  38% { opacity: 1; transform: perspective(30rem) translateZ(1.2rem) rotateX(-8deg) scale(1.1); }
  65% { transform: perspective(30rem) translateZ(-0.3rem) rotateX(3deg) scale(0.98); }
  100% { opacity: 1; transform: perspective(30rem) translateY(-0.7rem) rotateX(0) scale(0.96); }
}

@keyframes orbit-arrival-particle {
  0% { opacity: 0; transform: rotate(var(--arrival-angle)) translateY(-1rem) rotate(0deg) scale(0.2); }
  16%, 64% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--arrival-angle)) translateY(calc(var(--arrival-distance) * -1)) rotate(135deg) scale(1.12); }
}

@keyframes orbit-arrival-nova-pop {
  0% { opacity: 0; transform: scale(0.12) rotate(-17deg); }
  34% { opacity: 1; transform: scale(1.13) rotate(4deg); }
  55% { transform: scale(0.97) rotate(-1.5deg); }
  76% { transform: scale(1.025) rotate(0.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes orbit-arrival-sling {
  0% { opacity: 0; transform: translate(-62%, 34%) scale(0.42) rotate(-19deg); }
  42% { opacity: 1; transform: translate(7%, -4%) scale(1.08) rotate(3deg); }
  62% { transform: translate(-2.5%, 1.5%) scale(0.98) rotate(-1deg); }
  80% { transform: translate(1%, -0.5%) scale(1.015) rotate(0.3deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes orbit-arrival-gravity-drop {
  0% { opacity: 0; transform: translateY(-52%) scale(0.76, 1.12); }
  40% { opacity: 1; transform: translateY(7%) scale(1.1, 0.88); }
  57% { transform: translateY(-4%) scale(0.96, 1.04); }
  74% { transform: translateY(1.5%) scale(1.02, 0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes orbit-arrival-portal-squash {
  0% { opacity: 0; transform: scale(0.08, 1.26) rotate(8deg); }
  36% { opacity: 1; transform: scale(1.15, 0.86) rotate(-3deg); }
  56% { transform: scale(0.94, 1.05) rotate(1deg); }
  76% { transform: scale(1.025, 0.985) rotate(-0.3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes orbit-arrival-cosmic-flip {
  0% { opacity: 0; transform: perspective(36rem) rotateY(88deg) rotateZ(-10deg) scale(0.62); }
  32% { opacity: 1; transform: perspective(36rem) rotateY(-18deg) rotateZ(3deg) scale(1.08); }
  52% { transform: perspective(36rem) rotateY(8deg) rotateZ(-1.4deg) scale(0.97); }
  72% { transform: perspective(36rem) rotateY(-3deg) rotateZ(0.5deg) scale(1.018); }
  86% { transform: perspective(36rem) rotateY(1deg) rotateZ(-0.15deg) scale(0.995); }
  100% { opacity: 1; transform: perspective(36rem) rotateY(0deg) rotateZ(0deg) scale(1); }
}

@keyframes orbit-arrival-comet-corkscrew {
  0% { opacity: 0; transform: translate(58%, -48%) scale(0.14) rotate(-216deg); }
  31% { opacity: 1; transform: translate(7%, -6%) scale(1.12) rotate(18deg); }
  52% { transform: translate(-3%, 2%) scale(0.96) rotate(-6deg); }
  73% { transform: translate(1.2%, -0.7%) scale(1.025) rotate(2deg); }
  100% { opacity: 1; transform: translate(0) scale(1) rotate(0); }
}

@keyframes orbit-arrival-prism-bloom {
  0% { opacity: 0; transform: scale(0.04) rotate(48deg); }
  27% { opacity: 1; transform: scale(1.2) rotate(-8deg); }
  48% { transform: scale(0.92) rotate(4deg); }
  67% { transform: scale(1.055) rotate(-1.5deg); }
  84% { transform: scale(0.985) rotate(0.4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes orbit-arrival-planet-pinball {
  0% { opacity: 0; transform: translate(-52%, -38%) scale(0.38) rotate(-18deg); }
  24% { opacity: 1; transform: translate(25%, 9%) scale(0.82) rotate(11deg); }
  45% { transform: translate(-13%, 4%) scale(1.09) rotate(-6deg); }
  64% { transform: translate(6%, -2%) scale(0.97) rotate(3deg); }
  81% { transform: translate(-2%, 0.8%) scale(1.018) rotate(-0.8deg); }
  100% { opacity: 1; transform: translate(0) scale(1) rotate(0); }
}

@keyframes orbit-arrival-ribbon-unfurl {
  0% { opacity: 0; transform: perspective(34rem) rotateY(-88deg) scaleX(0.06) scaleY(0.78); }
  34% { opacity: 1; transform: perspective(34rem) rotateY(16deg) scaleX(1.14) scaleY(0.92); }
  55% { transform: perspective(34rem) rotateY(-7deg) scaleX(0.95) scaleY(1.04); }
  74% { transform: perspective(34rem) rotateY(2.4deg) scaleX(1.025) scaleY(0.99); }
  100% { opacity: 1; transform: perspective(34rem) rotateY(0) scale(1); }
}

@keyframes orbit-arrival-wormhole-ripple {
  0% { opacity: 0; transform: perspective(32rem) translateY(23%) rotateX(82deg) rotateZ(22deg) scale(0.12); }
  30% { opacity: 1; transform: perspective(32rem) translateY(-4%) rotateX(-17deg) rotateZ(-6deg) scale(1.16); }
  51% { transform: perspective(32rem) translateY(2%) rotateX(8deg) rotateZ(2.5deg) scale(0.94); }
  70% { transform: perspective(32rem) translateY(-0.7%) rotateX(-3deg) rotateZ(-0.8deg) scale(1.035); }
  86% { transform: perspective(32rem) rotateX(1deg) rotateZ(0.2deg) scale(0.99); }
  100% { opacity: 1; transform: perspective(32rem) translateY(0) rotateX(0) rotateZ(0) scale(1); }
}

@keyframes orbit-arrival-comet-rays {
  0% { opacity: 0; transform: translate(38%, -32%) rotate(-24deg) scale(0.32); }
  24%, 60% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(-12%, 9%) rotate(36deg) scale(1.2); }
}

@keyframes orbit-arrival-pinball-burst {
  0% { opacity: 0; transform: scale(0.25) rotate(-12deg); }
  24%, 66% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.55) rotate(32deg); }
}

@keyframes orbit-arrival-ribbon-rays {
  0% { opacity: 0; transform: translateX(-38%) skewX(-18deg) scaleX(0.45); }
  28%, 64% { opacity: 0.82; }
  100% { opacity: 0; transform: translateX(32%) skewX(12deg) scaleX(1.18); }
}

@keyframes orbit-arrival-wormhole-rays {
  0% { opacity: 0; transform: perspective(28rem) rotateX(72deg) rotateZ(-30deg) scale(0.24); }
  24%, 61% { opacity: 0.9; }
  100% { opacity: 0; transform: perspective(28rem) rotateX(4deg) rotateZ(48deg) scale(1.34); }
}

@keyframes orbit-vortex-catch {
  0% { opacity: 0.5; stroke-width: 1.6; }
  35% { opacity: 1; stroke-width: 7.5; }
  100% { opacity: 0.62; stroke-width: 2.2; }
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(0.3rem); }
  to { opacity: 1; transform: translateY(0); }
}

.game-heading,
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-block: 1rem 1.15rem;
}

.eyebrow {
  margin: 0 0 0.38rem;
  color: #566966;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

h1,
h2,
p {
  margin-block-start: 0;
}

h1 {
  margin-block-end: 0;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

h2 {
  letter-spacing: -0.035em;
}

.score-block {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.score-block span,
.journey-summary span,
.result-stats span {
  color: #596b68;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
}

.score-block strong {
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

.game-card {
  position: relative;
  padding: 1rem 1rem 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.game-card::before {
  position: absolute;
  width: 9rem;
  aspect-ratio: 1;
  inset: -5rem -4rem auto auto;
  border-radius: 50%;
  background: rgba(201, 255, 99, 0.18);
  content: "";
}

.game-card-topline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2rem;
  padding-inline: 0.2rem;
}

.heart-row {
  display: flex;
  gap: 0.24rem;
}

.heart-pressure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.heart-countdown {
  display: inline-grid;
  min-width: 2.45rem;
  min-height: 1.55rem;
  place-items: center;
  padding-inline: 0.42rem;
  border: 1px solid color-mix(in oklab, var(--coral) 45%, transparent);
  border-radius: 99px;
  background: color-mix(in oklab, var(--coral) 16%, transparent);
  color: #9f3828;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.03em;
}

.heart-countdown.is-paused {
  border-color: var(--line);
  background: var(--paper-deep);
  color: var(--ink-soft);
}

.heart-countdown.is-hit {
  animation: heart-timer-hit 520ms ease both;
}

.heart {
  width: 1.1rem;
  color: var(--coral);
  fill: currentColor;
  transition: transform 220ms ease, opacity 220ms ease;
}

.heart.is-lost {
  opacity: 0.18;
  transform: scale(0.72);
}

@keyframes heart-timer-hit {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.16); background: var(--coral); color: var(--ink); }
}

.level-progress {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.progress-track {
  appearance: none;
  width: 3.2rem;
  height: 0.3rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: var(--paper-deep);
}

.progress-track::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--paper-deep);
}

.progress-track::-webkit-progress-value {
  border-radius: inherit;
  background: var(--ink);
  transition: width 300ms ease;
}

.progress-track::-moz-progress-bar {
  border-radius: inherit;
  background: var(--ink);
}

.board-wrap {
  position: relative;
  contain: layout style paint;
  width: 100%;
  aspect-ratio: 0.93;
  margin-block: 0.75rem 0.55rem;
  overflow: hidden;
  border-radius: 1.35rem;
  background:
    radial-gradient(circle, rgba(19, 42, 51, 0.13) 1.1px, transparent 1.2px) 0 0 / var(--dot-size, 14.285%) var(--dot-size-y, 12.5%),
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.9), transparent 58%),
    linear-gradient(145deg, #f7f5ef, #e9e6dd);
  box-shadow:
    inset 0 0 0 1px rgba(19, 42, 51, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1.2rem 2.8rem rgba(19, 42, 51, 0.035);
}

.board {
  --arrow-hue: 195;

  position: absolute;
  inset: 5%;
}

.board[data-arrow-palette="1"] { --arrow-hue: 216; }
.board[data-arrow-palette="2"] { --arrow-hue: 252; }
.board[data-arrow-palette="3"] { --arrow-hue: 18; }
.board[data-arrow-palette="4"] { --arrow-hue: 176; }
.board[data-arrow-palette="5"] { --arrow-hue: 226; }
.board[data-arrow-palette="6"] { --arrow-hue: 150; }
.board[data-arrow-palette="7"] { --arrow-hue: 278; }
.board[data-arrow-palette="8"] { --arrow-hue: 322; }
.board[data-arrow-palette="9"] { --arrow-hue: 204; }
.board[data-arrow-palette="10"] { --arrow-hue: 348; }
.board[data-arrow-palette="11"] { --arrow-hue: 82; }
.board[data-arrow-palette="12"] { --arrow-hue: 42; }
.board[data-arrow-palette="13"] { --arrow-hue: 164; }
.board[data-arrow-palette="14"] { --arrow-hue: 232; }
.board[data-arrow-palette="15"] { --arrow-hue: 290; }
.board[data-arrow-palette="16"] { --arrow-hue: 6; }
.board[data-arrow-palette="17"] { --arrow-hue: 188; }
.board[data-arrow-palette="18"] { --arrow-hue: 264; }
.board[data-arrow-palette="19"] { --arrow-hue: 132; }
.board[data-arrow-palette="20"] { --arrow-hue: 304; }
.board[data-arrow-palette="21"] { --arrow-hue: 30; }
.board[data-arrow-palette="22"] { --arrow-hue: 212; }
.board[data-arrow-palette="23"] { --arrow-hue: 336; }
.board[data-arrow-palette="24"] { --arrow-hue: 104; }
.board[data-arrow-palette="25"] { --arrow-hue: 58; }

.arrow-piece {
  --arrow-hue-shift: 0;
  --arrow-piece-hue: calc(var(--arrow-hue) + var(--arrow-hue-shift));
  --arrow-fill: hsl(var(--arrow-piece-hue) 96% 57%);
  --arrow-outline: hsl(var(--arrow-piece-hue) 88% 32%);
  --arrow-shell: hsl(var(--arrow-piece-hue) 100% 88%);
  --arrow-depth: hsl(var(--arrow-piece-hue) 76% 18%);
  --arrow-gloss: rgba(255, 255, 255, 0.88);
  --arrow-rust: #79391f;
  --arrow-rust-hot: #f4933f;

  position: absolute;
  display: grid;
  width: calc(100% / var(--grid-cols));
  height: calc(100% / var(--grid-rows));
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
}

.arrow-piece:nth-child(6n + 2) { --arrow-hue-shift: 52; }
.arrow-piece:nth-child(6n + 3) { --arrow-hue-shift: 118; }
.arrow-piece:nth-child(6n + 4) { --arrow-hue-shift: 184; }
.arrow-piece:nth-child(6n + 5) { --arrow-hue-shift: 238; }
.arrow-piece:nth-child(6n) { --arrow-hue-shift: 304; }

.arrow-piece::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(2.8rem, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65);
  transition: opacity 160ms ease, transform 160ms ease;
  content: "";
}

.arrow-piece:hover::before,
.arrow-piece:focus-visible::before,
.arrow-piece.is-hint::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.arrow-piece.is-hint::before {
  background: var(--lime);
  animation: hint-pulse 1s ease infinite;
}

.arrow-shape {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0.16rem 0.05rem rgba(0, 8, 18, 0.56))
    drop-shadow(0 0.3rem 0.34rem rgba(0, 8, 18, 0.3));
  scale: 1;
  transform-origin: center;
  transition: filter 150ms ease, scale 150ms cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
}

.arrow-hit-path,
.arrow-depth,
.arrow-shell,
.arrow-outline,
.arrow-tail,
.arrow-body-scar,
.arrow-gloss,
.arrow-rail-rivets,
.arrow-head-depth,
.arrow-head-shell,
.arrow-head-outline,
.arrow-head,
.arrow-head-gloss {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
}

.arrow-hit-path {
  stroke: transparent;
  stroke-width: 1rem;
  pointer-events: stroke;
}

/* A single battered road-sign beam replaces the segmented snake silhouette. */
.arrow-depth,
.arrow-shell,
.arrow-outline,
.arrow-tail {
  stroke-dasharray: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.arrow-depth,
.arrow-head-depth {
  stroke: var(--arrow-depth);
  transform: translate(0.035px, 0.065px);
}

.arrow-depth {
  stroke-width: 0.78rem;
}

.arrow-head-depth {
  fill: var(--arrow-depth);
  stroke-linejoin: miter;
  stroke-miterlimit: 3.5;
  stroke-width: 0.56rem;
}

.arrow-shell,
.arrow-head-shell {
  stroke: var(--arrow-shell);
}

.arrow-shell {
  stroke-width: 0.7rem;
}

.arrow-head-shell {
  fill: var(--arrow-shell);
  stroke-linejoin: miter;
  stroke-miterlimit: 3.5;
  stroke-width: 0.44rem;
}

.arrow-outline,
.arrow-head-outline {
  stroke: var(--arrow-outline);
}

.arrow-outline {
  stroke-width: 0.58rem;
}

.arrow-head-outline {
  fill: var(--arrow-outline);
  stroke-linejoin: miter;
  stroke-miterlimit: 3.5;
  stroke-width: 0.32rem;
}

.arrow-tail {
  stroke: var(--arrow-fill);
  stroke-width: 0.43rem;
}

.arrow-head {
  fill: var(--arrow-fill);
  stroke: var(--arrow-fill);
  stroke-linejoin: miter;
  stroke-miterlimit: 3.5;
  stroke-width: 0.18rem;
}

.arrow-body-scar {
  fill: none;
  stroke: var(--arrow-depth);
  stroke-dasharray: 0.12rem 0.74rem 0.04rem 1.12rem;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: 0.075rem;
  opacity: 0.72;
}

.arrow-gloss,
.arrow-head-gloss {
  stroke: var(--arrow-gloss);
  opacity: 0.78;
}

.arrow-gloss {
  stroke-dasharray: 0.46rem 4.6rem;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 0.095rem;
  opacity: 0.68;
}

.arrow-rail-rivets {
  fill: none;
  stroke: var(--arrow-shell);
  stroke-dasharray: 0 0.46rem;
  stroke-linecap: round;
  stroke-width: 0.09rem;
  opacity: 0.92;
}

.arrow-head-gloss {
  fill: rgba(255, 255, 255, 0.2);
  stroke-width: 0.085rem;
  opacity: 0.62;
}

.arrow-head-scrap-patch,
.arrow-head-scrap-seam,
.arrow-head-rivet {
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
}

.arrow-head-scrap-patch {
  fill: var(--arrow-rust-hot);
  fill-opacity: 0.96;
  stroke: var(--arrow-rust);
  stroke-linejoin: bevel;
  stroke-width: 0.055rem;
}

.arrow-head-scrap-seam {
  fill: none;
  stroke: var(--arrow-rust);
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-width: 0.07rem;
  opacity: 0.94;
}

.arrow-head-rivet {
  fill: #374652;
  stroke: #f5e2ba;
  stroke-width: 0.035rem;
}

.arrow-piece:is(:hover, :focus-visible) .arrow-shape,
.arrow-piece.is-hint .arrow-shape {
  filter:
    brightness(1.08)
    saturate(1.12)
    drop-shadow(0 0.13rem 0.04rem rgba(0, 8, 18, 0.56))
    drop-shadow(0 0.36rem 0.42rem rgba(0, 8, 18, 0.34));
  scale: 1.12;
}

.arrow-piece:active .arrow-shape {
  filter:
    brightness(1.04)
    saturate(1.08)
    drop-shadow(0 0.05rem 0 rgba(0, 8, 18, 0.58));
  scale: 0.9;
}

.arrow-piece.is-blocked {
  --arrow-fill: #ff4263;
  --arrow-outline: #a3153a;
  --arrow-shell: #ffd1d9;
  --arrow-depth: #5c102c;

  animation: blocked-shake 380ms ease;
}

.arrow-piece.is-queued {
  --arrow-fill: #c9ff4f;
  --arrow-outline: #4f8729;
  --arrow-shell: #f3ffc9;
  --arrow-depth: #274e26;

  pointer-events: none;
}

.arrow-piece.is-queued .arrow-hit-path,
.arrow-piece.is-exiting .arrow-hit-path {
  pointer-events: none;
}

.arrow-piece.is-queued::before {
  background: rgba(130, 181, 255, 0.35);
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.82);
}

.arrow-piece.is-exiting {
  pointer-events: none;
}

@media (forced-colors: active) {
  .arrow-piece {
    --arrow-fill: Highlight;
    --arrow-outline: CanvasText;
    --arrow-shell: Canvas;
    --arrow-depth: CanvasText;
    --arrow-gloss: HighlightText;
  }

  .arrow-rail-rivets {
    stroke: CanvasText;
  }

  .arrow-shape {
    filter: none;
  }
}

/* Catastrophic World Integrity failure: staged flash, shockwaves, and physical debris. */
.orbit-world-failure {
  isolation: isolate;
  contain: layout style paint;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(18, 5, 32, 0.24) 42%, rgba(1, 5, 15, 0.94) 84%),
    rgba(1, 5, 15, 0.72);
}

.orbit-stage.is-world-lost {
  animation: orbit-catastrophe-impact 920ms ease-out both;
}

.orbit-stage.is-world-lost .orbit-world-failure {
  animation: orbit-catastrophe-veil 3.2s ease-out both;
}

.orbit-world-explosion {
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}

.orbit-explosion-canvas,
.orbit-explosion-vignette,
.orbit-explosion-flash,
.orbit-explosion-starburst,
.orbit-explosion-corona,
.orbit-explosion-shockwave,
.orbit-explosion-plasma {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-explosion-canvas {
  z-index: 7;
  width: 100%;
  height: 100%;
}

.orbit-explosion-vignette {
  z-index: 10;
  background:
    radial-gradient(circle, transparent 0 25%, rgba(255, 87, 89, 0.08) 48%, rgba(3, 2, 14, 0.78) 100%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2.5rem, rgba(255, 127, 93, 0.035) 2.6rem 2.68rem);
  opacity: 0;
}

.orbit-stage.is-world-lost .orbit-explosion-vignette {
  animation: orbit-catastrophe-vignette 2.9s ease-out 120ms both;
}

.orbit-explosion-flash {
  z-index: 9;
  background: radial-gradient(circle, white 0 8%, #fff49c 18%, rgba(255, 103, 76, 0.92) 36%, rgba(164, 77, 255, 0.38) 58%, transparent 76%);
  mix-blend-mode: screen;
  opacity: 0;
}

.orbit-stage.is-world-lost .orbit-explosion-flash {
  animation: orbit-catastrophe-flash 1.25s ease-out 250ms both;
}

.orbit-explosion-starburst {
  z-index: 2;
  width: 28rem;
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  background: repeating-conic-gradient(from 4deg, rgba(255, 245, 171, 0.76) 0 0.7deg, transparent 1.2deg 9deg);
  filter: blur(0.06rem) drop-shadow(0 0 0.5rem #ff835c);
  mask-image: radial-gradient(circle, black, transparent 72%);
  opacity: 0;
  translate: -50% -50%;
}

.orbit-stage.is-world-lost .orbit-explosion-starburst {
  animation: orbit-catastrophe-starburst 1.8s cubic-bezier(.14, .72, .18, 1) 290ms both;
}

.orbit-explosion-corona {
  z-index: 4;
  width: 10rem;
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  border: 0.5rem solid rgba(255, 230, 119, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(255, 200, 88, 0.45) 36%, rgba(255, 80, 119, 0.2) 58%, transparent 72%);
  box-shadow: 0 0 1.6rem #fff6b0, 0 0 4.8rem #ff6a69, 0 0 8rem rgba(128, 83, 255, 0.8);
  opacity: 0;
  translate: -50% -50%;
}

.orbit-stage.is-world-lost .orbit-explosion-corona {
  animation: orbit-catastrophe-corona 1.7s cubic-bezier(.12, .72, .18, 1) 260ms both;
}

.orbit-explosion-core {
  z-index: 6;
  width: 6.4rem;
  background: radial-gradient(circle at 36% 30%, white 0 10%, #fff8ae 23%, #ffb154 39%, #ff526f 58%, #9d48ff 72%, transparent 74%);
  box-shadow: 0 0 2.4rem white, 0 0 6rem #ff735e, 0 0 10rem #7f50ff;
}

.orbit-stage.is-world-lost .orbit-explosion-core {
  animation: orbit-catastrophe-core 1.75s cubic-bezier(.16, .78, .18, 1) 220ms both;
}

.orbit-explosion-ring {
  z-index: 5;
  border-width: 0.24rem;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 1.3rem #75f8ff, 0 0 2.8rem rgba(255, 99, 201, 0.74), inset 0 0 1.2rem #fff4a5;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-one {
  animation: orbit-catastrophe-ring 1.18s cubic-bezier(.08, .74, .18, 1) 390ms both;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-two {
  animation: orbit-catastrophe-ring 1.42s cubic-bezier(.08, .74, .18, 1) 520ms both;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-three {
  animation: orbit-catastrophe-ring 1.65s cubic-bezier(.08, .74, .18, 1) 650ms both;
}

.orbit-explosion-shockwave {
  z-index: 3;
  width: 8rem;
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  border: 0.16rem solid rgba(149, 246, 255, 0.86);
  border-radius: 50%;
  box-shadow: 0 0 1rem rgba(124, 246, 255, 0.76), inset 0 0 1rem rgba(255, 98, 205, 0.58);
  opacity: 0;
  translate: -50% -50%;
}

.orbit-stage.is-world-lost .orbit-explosion-shockwave.is-one {
  animation: orbit-catastrophe-shockwave 1.65s ease-out 430ms both;
}

.orbit-stage.is-world-lost .orbit-explosion-shockwave.is-two {
  animation: orbit-catastrophe-shockwave 1.9s ease-out 650ms both;
}

.orbit-explosion-plasma {
  z-index: 6;
  width: 9rem;
  height: 3.6rem;
  inset: 50% auto auto 50%;
  border-block-start: 0.32rem solid #fff5a8;
  border-radius: 50%;
  filter: drop-shadow(0 0 0.45rem #ff5e8f) drop-shadow(0 0 0.8rem #8a62ff);
  opacity: 0;
  translate: -50% -50%;
}

.orbit-explosion-plasma.is-one { rotate: 18deg; }
.orbit-explosion-plasma.is-two { rotate: 138deg; }
.orbit-explosion-plasma.is-three { rotate: 258deg; }

.orbit-stage.is-world-lost .orbit-explosion-plasma {
  animation: orbit-catastrophe-plasma 1.3s cubic-bezier(.1, .72, .22, 1) 310ms both;
}

.orbit-stage.is-world-lost .orbit-explosion-plasma.is-two { animation-delay: 390ms; }
.orbit-stage.is-world-lost .orbit-explosion-plasma.is-three { animation-delay: 470ms; }

.orbit-explosion-chunks {
  z-index: 8;
}

.orbit-explosion-chunks i {
  clip-path: polygon(7% 24%, 58% 0, 100% 38%, 76% 100%, 25% 83%, 0 57%);
  border-radius: 18% 42% 24% 38%;
  transform-origin: center;
}

.orbit-explosion-chunks i:nth-child(13) { --chunk-x: 13rem; --chunk-y: -2rem; --chunk-rotate: 410deg; --chunk-color: #ffca68; }
.orbit-explosion-chunks i:nth-child(14) { --chunk-x: 11rem; --chunk-y: 10rem; --chunk-rotate: -390deg; --chunk-color: #6df8e3; }
.orbit-explosion-chunks i:nth-child(15) { --chunk-x: 1rem; --chunk-y: 13rem; --chunk-rotate: 440deg; --chunk-color: #ff70bd; }
.orbit-explosion-chunks i:nth-child(16) { --chunk-x: -9rem; --chunk-y: 11rem; --chunk-rotate: -420deg; --chunk-color: #8d7dff; }
.orbit-explosion-chunks i:nth-child(17) { --chunk-x: -14rem; --chunk-y: 3rem; --chunk-rotate: 380deg; --chunk-color: #cfff63; }
.orbit-explosion-chunks i:nth-child(18) { --chunk-x: -12rem; --chunk-y: -9rem; --chunk-rotate: -460deg; --chunk-color: #ff835c; }
.orbit-explosion-chunks i:nth-child(19) { --chunk-x: 1rem; --chunk-y: -14rem; --chunk-rotate: 400deg; --chunk-color: #7cf6ff; }
.orbit-explosion-chunks i:nth-child(20) { --chunk-x: 9rem; --chunk-y: -11rem; --chunk-rotate: -430deg; --chunk-color: #d484ff; }

.orbit-stage.is-world-lost .orbit-explosion-chunks i {
  animation: orbit-catastrophe-chunk 2.05s cubic-bezier(.12, .68, .18, 1) calc(350ms + var(--chunk-delay, 0ms)) both;
}

.orbit-stage.is-world-lost #orbit-sphere {
  animation: orbit-catastrophe-world-rupture 1.72s cubic-bezier(.22, .7, .2, 1) both;
  transform-origin: center;
}

.orbit-failure-card {
  z-index: 12;
  border-color: rgba(255, 238, 211, 0.86);
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 181, 92, 0.42), transparent 46%),
    linear-gradient(155deg, rgba(95, 34, 74, 0.98), rgba(45, 25, 81, 0.99) 58%, rgba(15, 34, 59, 0.99));
  box-shadow:
    0 0 0 0.08rem rgba(255, 109, 110, 0.35),
    0 0.5rem 0 rgba(30, 14, 54, 0.82),
    0 1.5rem 3rem rgba(0, 3, 16, 0.72),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.38);
}

.orbit-stage.is-world-lost .orbit-failure-card {
  animation: orbit-catastrophe-card-in 720ms cubic-bezier(.18, 1.32, .3, 1) 2.15s both;
}

@keyframes orbit-catastrophe-impact {
  0%, 21% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-0.42rem, 0.18rem, 0); }
  31% { transform: translate3d(0.38rem, -0.25rem, 0); }
  38% { transform: translate3d(-0.28rem, -0.12rem, 0); }
  46% { transform: translate3d(0.22rem, 0.18rem, 0); }
  57% { transform: translate3d(-0.12rem, 0.05rem, 0); }
  72% { transform: translate3d(0.07rem, -0.04rem, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes orbit-catastrophe-veil {
  0% { background-color: rgba(1, 5, 15, 0); }
  18% { background-color: rgba(255, 91, 80, 0.12); }
  100% { background-color: rgba(1, 5, 15, 0.82); }
}

@keyframes orbit-catastrophe-vignette {
  0% { opacity: 0; scale: 0.72; }
  22% { opacity: 0.86; }
  100% { opacity: 0.62; scale: 1.18; }
}

@keyframes orbit-catastrophe-flash {
  0% { opacity: 0; scale: 0.08; }
  18% { opacity: 1; }
  34% { opacity: 0.96; }
  100% { opacity: 0; scale: 2.2; }
}

@keyframes orbit-catastrophe-starburst {
  0% { opacity: 0; transform: scale(0.12) rotate(-12deg); }
  24% { opacity: 0.88; }
  100% { opacity: 0; transform: scale(1.5) rotate(16deg); }
}

@keyframes orbit-catastrophe-corona {
  0% { opacity: 0; transform: scale(0.08); }
  24% { opacity: 1; }
  62% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(3.9); }
}

@keyframes orbit-catastrophe-core {
  0% { opacity: 0; transform: scale(0.06); }
  14% { opacity: 1; transform: scale(0.35); }
  36% { opacity: 1; transform: scale(1.15); }
  68% { opacity: 0.94; }
  100% { opacity: 0; transform: scale(5.8); }
}

@keyframes orbit-catastrophe-ring {
  0% { opacity: 0; transform: scale(0.18); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(6.2); }
}

@keyframes orbit-catastrophe-shockwave {
  0% { opacity: 0; transform: scale(0.12); }
  16% { opacity: 0.74; }
  100% { opacity: 0; transform: scale(7.5); }
}

@keyframes orbit-catastrophe-plasma {
  0% { opacity: 0; transform: scale(0.14); }
  26% { opacity: 1; }
  100% { opacity: 0; transform: scale(4.2); }
}

@keyframes orbit-catastrophe-chunk {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.15) rotate(0); }
  16% { opacity: 1; }
  72% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--chunk-x)), calc(-50% + var(--chunk-y))) scale(0.78) rotate(var(--chunk-rotate)); }
}

@keyframes orbit-catastrophe-world-rupture {
  0% { filter: brightness(1); opacity: 1; transform: scale(1); }
  12% { filter: brightness(1.4) saturate(1.25); transform: scale(1.035, 0.965) rotate(-0.6deg); }
  22% { filter: brightness(2.4) saturate(1.5); transform: scale(0.96, 1.05) rotate(0.8deg); }
  31% { filter: brightness(5.5) saturate(0.45); transform: scale(1.1); }
  39% { clip-path: circle(49%); filter: brightness(8) saturate(0.2); opacity: 1; transform: scale(1.18); }
  58% { clip-path: circle(44%); filter: brightness(5) blur(0.08rem); opacity: 0.7; transform: scale(1.48) rotate(3deg); }
  100% { clip-path: circle(22%); filter: brightness(2) blur(0.32rem); opacity: 0; transform: scale(2.55) rotate(11deg); }
}

@keyframes orbit-catastrophe-card-in {
  0% { opacity: 0; transform: translateY(2.4rem) scale(0.64) rotate(-4deg); }
  70% { opacity: 1; transform: translateY(-0.24rem) scale(1.055) rotate(0.8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* Games and Rewards now share the Vortex orbital-glass material system. */
.games-modal,
.flow-hub-modal {
  --destination-bg: #061521;
  --destination-surface: #0a2230;
  --destination-surface-raised: #103242;
  --destination-border: rgba(137, 226, 235, 0.28);
  --destination-cyan: #7cecf2;
  --destination-violet: #a995ff;
  --destination-action: #cfff63;
  --destination-text: #effeff;
  --destination-muted: #a8c8ce;
  color-scheme: dark;
}

.games-modal::backdrop,
.flow-hub-modal::backdrop {
  background:
    radial-gradient(circle at 16% 12%, rgba(67, 196, 218, 0.18), transparent 18rem),
    radial-gradient(circle at 88% 82%, rgba(130, 101, 255, 0.16), transparent 20rem),
    rgba(1, 7, 16, 0.86);
  backdrop-filter: blur(10px) saturate(0.9);
}

.games-card,
.flow-hub-card {
  border: 0.1rem solid rgba(155, 233, 239, 0.34);
  background:
    radial-gradient(circle at 8% 0, rgba(72, 202, 219, 0.13), transparent 11rem),
    radial-gradient(circle at 96% 34%, rgba(137, 104, 255, 0.11), transparent 14rem),
    linear-gradient(155deg, rgba(10, 34, 48, 0.99), rgba(4, 18, 30, 0.995));
  color: var(--destination-text);
  box-shadow:
    0 0 0 0.04rem rgba(124, 236, 242, 0.09),
    0 1.8rem 4.5rem rgba(0, 3, 14, 0.68),
    inset 0 0.06rem 0 rgba(226, 254, 255, 0.14);
}

.games-card .modal-close,
.flow-hub-card .modal-close {
  border: 0.08rem solid rgba(151, 229, 235, 0.34);
  background: rgba(9, 35, 49, 0.94);
  color: #dffcff;
  box-shadow: 0 0.16rem 0 rgba(0, 10, 20, 0.72), inset 0 0.05rem 0 rgba(255, 255, 255, 0.12);
}

.games-card .modal-close:is(:hover, :focus-visible),
.flow-hub-card .modal-close:is(:hover, :focus-visible) {
  border-color: var(--destination-action);
  outline: 0.14rem solid var(--destination-action);
  outline-offset: 0.12rem;
}

.games-hero,
.cleanup-control-hero {
  border: 0.08rem solid rgba(142, 229, 237, 0.28);
  background:
    radial-gradient(circle at 50% 52%, rgba(124, 236, 242, 0.18), transparent 25%),
    radial-gradient(circle at 18% 8%, rgba(207, 255, 99, 0.11), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(151, 118, 255, 0.18), transparent 32%),
    linear-gradient(145deg, #103c4d, #101d42 62%, #241c4d);
  box-shadow: 0 0.22rem 0 rgba(2, 13, 27, 0.78), 0 0.75rem 1.4rem rgba(0, 8, 20, 0.34), inset 0 0.08rem 0 rgba(255, 255, 255, 0.12);
  filter: none;
}

.games-hero-spark,
.cleanup-spark {
  color: var(--destination-cyan);
  opacity: 0.58;
}

.games-hero-chip,
.cleanup-hero-chip,
.games-card > .eyebrow,
.flow-hub-card > .eyebrow {
  border: 0.06rem solid rgba(134, 229, 237, 0.34);
  background: rgba(8, 35, 49, 0.86);
  color: var(--destination-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
  font-weight: 850;
}

.games-card h2,
.flow-hub-card h2 {
  color: var(--destination-text);
  text-shadow: none;
}

.games-card > .modal-copy,
.flow-hub-card > .modal-copy {
  color: var(--destination-muted);
  font-weight: 650;
}

.game-choice,
.game-choice:last-child {
  --choice-surface: rgba(12, 45, 58, 0.96);
  --choice-border: rgba(124, 236, 242, 0.38);
  --choice-accent: var(--destination-cyan);

  border: 0.08rem solid var(--choice-border);
  background:
    radial-gradient(circle at 90% 0, rgba(124, 236, 242, 0.08), transparent 42%),
    var(--choice-surface);
  color: var(--destination-text);
  box-shadow: 0 0.16rem 0 rgba(0, 11, 22, 0.74), 0 0.55rem 1rem rgba(0, 8, 20, 0.2), inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

.game-choice:last-child {
  --choice-surface: rgba(30, 30, 66, 0.96);
  --choice-border: rgba(169, 149, 255, 0.38);
  --choice-accent: var(--destination-violet);
  background:
    radial-gradient(circle at 90% 0, rgba(169, 149, 255, 0.1), transparent 42%),
    var(--choice-surface);
}

.game-choice::before {
  background: var(--choice-accent);
}

.game-choice:is(:hover, :focus-visible) {
  border-color: var(--destination-action);
  background-color: rgba(17, 55, 67, 0.98);
  outline: 0.16rem solid var(--destination-action);
  outline-offset: 0.12rem;
}

.game-choice.is-active {
  border-color: rgba(207, 255, 99, 0.66);
  box-shadow: 0 0 0 0.12rem rgba(207, 255, 99, 0.11), 0 0.18rem 0 rgba(0, 12, 22, 0.82), 0 0.8rem 1.2rem rgba(0, 8, 20, 0.28);
}

.game-choice-current {
  background: var(--destination-action);
  color: #173c32;
}

.game-choice-art {
  border-color: rgba(164, 232, 238, 0.28);
  box-shadow: 0 0.12rem 0 rgba(0, 11, 22, 0.8), inset 0 0.06rem 0 rgba(255, 255, 255, 0.12);
  filter: saturate(0.92);
}

.game-choice-copy small { color: var(--choice-accent); }
.game-choice-copy strong { color: var(--destination-text); }
.game-choice-copy > span { color: var(--destination-muted); }

.game-choice-action {
  background: rgba(6, 25, 37, 0.86);
  color: var(--destination-cyan);
}

.game-choice.is-active .game-choice-action {
  background: var(--destination-action);
  color: #173c32;
}

.flow-hub-grid .flow-event-card,
.flow-hub-grid .flow-meta-card {
  border: 0.07rem solid var(--destination-border);
  background: rgba(10, 36, 49, 0.92);
  color: var(--destination-text);
  box-shadow: 0 0.14rem 0 rgba(0, 11, 22, 0.72), inset 0 0.05rem 0 rgba(255, 255, 255, 0.07);
}

.flow-hub-grid .flow-event-card {
  border-color: color-mix(in srgb, var(--event-color) 42%, rgba(124, 236, 242, 0.28));
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--event-color) 17%, transparent), transparent 44%),
    linear-gradient(145deg, rgba(11, 42, 55, 0.98), rgba(6, 25, 39, 0.98));
}

.flow-hub-grid .flow-event-copy .flow-card-label,
.flow-hub-grid .flow-event-copy small,
.flow-hub-grid .flow-event-clock small,
.flow-hub-grid .flow-meta-card :is(.flow-card-label, small),
.flow-hub-grid :is(.flow-rank-line, .flow-daily-line) span {
  color: var(--destination-muted);
}

.flow-hub-grid .flow-event-copy strong,
.flow-hub-grid .flow-event-clock time,
.flow-hub-grid :is(.flow-rank-line, .flow-daily-line) strong,
.flow-hub-grid .flow-rank-line b {
  color: var(--destination-text);
  text-shadow: none;
}

.flow-hub-grid .flow-rank-card {
  background: linear-gradient(145deg, rgba(13, 49, 60, 0.98), rgba(8, 31, 44, 0.98));
}

.flow-hub-grid .flow-daily-card {
  background: linear-gradient(145deg, rgba(33, 47, 53, 0.98), rgba(14, 35, 43, 0.98));
}

.flow-collection-button {
  color: var(--destination-cyan);
}

.flow-collection-button span {
  color: var(--destination-muted);
}

.daily-world-card,
.season-route-card {
  border: 0.07rem solid var(--destination-border);
  background:
    radial-gradient(circle at 100% 0, rgba(137, 104, 255, 0.1), transparent 48%),
    rgba(8, 29, 42, 0.94);
  color: var(--destination-text);
  box-shadow: 0 0.14rem 0 rgba(0, 10, 22, 0.76), inset 0 0.05rem 0 rgba(255, 255, 255, 0.06);
}

.daily-world-orbit {
  border: 0.07rem solid rgba(124, 236, 242, 0.42);
  background: linear-gradient(145deg, #174f5c, #18364d 58%, #2d285a);
  color: var(--destination-cyan);
  box-shadow: 0 0.2rem 0 rgba(0, 12, 24, 0.78), inset 0 0.07rem 0 rgba(255, 255, 255, 0.1);
}

.daily-world-card :is(h3, p),
.season-route-card :is(h3, p) {
  color: var(--destination-text);
}

.daily-world-card p,
.season-route-card p,
.daily-world-card small,
.season-route-card small {
  color: var(--destination-muted);
}

#daily-world-play,
.flow-hub-return {
  border: 0.07rem solid rgba(220, 255, 155, 0.62);
  background: var(--destination-action);
  color: #173c32;
  box-shadow: 0 0.16rem 0 #668b37, 0 0.45rem 0.8rem rgba(0, 11, 19, 0.3), inset 0 0.05rem 0 rgba(255, 255, 255, 0.34);
}

#daily-world-share {
  border-color: rgba(124, 236, 242, 0.35);
  background: rgba(12, 43, 56, 0.96);
  color: var(--destination-cyan);
}

.daily-personal-best {
  background: rgba(17, 52, 64, 0.9);
  color: #c9e7ea;
}

.daily-leaderboard li {
  background: rgba(11, 39, 51, 0.92);
  color: #d9f5f6;
}

.daily-leaderboard li.is-player {
  background: rgba(63, 84, 50, 0.78);
  color: #efffd0;
}

.daily-leaderboard li > small {
  color: var(--destination-muted);
}

.season-route-heading > span {
  border: 0.06rem solid rgba(124, 236, 242, 0.28);
  background: rgba(15, 49, 64, 0.94);
  color: var(--destination-action);
}

.season-route-heading > strong {
  background: rgba(19, 54, 66, 0.94);
  color: #d8f0f1;
}

.cosmetic-item {
  border-color: rgba(142, 211, 218, 0.22);
  background: rgba(12, 39, 51, 0.94);
  color: #e5f9fa;
}

.cosmetic-item small {
  color: var(--destination-muted);
}

.cosmetic-item.is-equipped {
  background: color-mix(in srgb, var(--cosmetic-color) 14%, #0b2936);
}

.flow-hub-card :is(button, .flow-event-card):focus-visible {
  outline: 0.16rem solid var(--destination-action);
  outline-offset: 0.12rem;
}

.games-modal[open] .games-hero,
.flow-hub-modal[open] .cleanup-control-hero {
  animation: orbit-destination-enter 360ms cubic-bezier(.2, .82, .24, 1) both;
}

.games-modal[open] .game-choice,
.flow-hub-modal[open] .flow-hub-grid > * {
  animation: orbit-destination-enter 320ms cubic-bezier(.2, .82, .24, 1) both;
}

@keyframes orbit-destination-enter {
  from { opacity: 0; transform: translateY(0.55rem) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-stage.is-world-lost,
  .orbit-stage.is-world-lost .orbit-world-failure,
  .orbit-stage.is-world-lost :is(
    .orbit-explosion-vignette,
    .orbit-explosion-flash,
    .orbit-explosion-starburst,
    .orbit-explosion-corona,
    .orbit-explosion-core,
    .orbit-explosion-ring,
    .orbit-explosion-shockwave,
    .orbit-explosion-plasma,
    .orbit-explosion-chunks i
  ) {
    animation: none;
  }

  .orbit-stage.is-world-lost :is(
    .orbit-explosion-vignette,
    .orbit-explosion-flash,
    .orbit-explosion-starburst,
    .orbit-explosion-corona,
    .orbit-explosion-core,
    .orbit-explosion-ring,
    .orbit-explosion-shockwave,
    .orbit-explosion-plasma,
    .orbit-explosion-chunks i
  ) {
    opacity: 0;
  }

  .orbit-stage.is-world-lost #orbit-sphere {
    animation: orbit-world-rupture-reduced 220ms ease-out both;
  }

  .orbit-stage.is-world-lost .orbit-failure-card {
    animation: orbit-failure-card-in 180ms ease-out 180ms both;
  }

  .games-modal[open] :is(.games-hero, .game-choice),
  .flow-hub-modal[open] :is(.cleanup-control-hero, .flow-hub-grid > *) {
    animation: none;
  }
}

@media (forced-colors: active) {
  .games-card,
  .flow-hub-card,
  .games-card :is(.game-choice, .games-hero),
  .flow-hub-card :is(.cleanup-control-hero, .flow-event-card, .flow-meta-card, .daily-world-card, .season-route-card, .cosmetic-item) {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Profile destination: one restrained deep-flow glass system with Games,
   Rewards, and the updated Map, instead of the former candy trophy room. */
html[data-view="profile"] {
  --profile-bg: #061521;
  --profile-surface: #0a2230;
  --profile-surface-raised: #103242;
  --profile-border: rgba(137, 226, 235, 0.28);
  --profile-border-strong: rgba(151, 239, 246, 0.5);
  --profile-cyan: #7cecf2;
  --profile-violet: #a995ff;
  --profile-coral: #ff9189;
  --profile-action: #cfff63;
  --profile-text: #effeff;
  --profile-muted: #a8c8ce;

  color-scheme: dark;
  background: var(--profile-bg);
}

html[data-view="profile"] body {
  background:
    radial-gradient(circle at 50% 8%, rgba(124, 236, 242, 0.14), transparent 25rem),
    var(--profile-bg);
}

html[data-view="profile"] .app-shell {
  background:
    radial-gradient(circle at 14% 16%, rgba(124, 236, 242, 0.12) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 82% 28%, rgba(169, 149, 255, 0.1) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 72% 74%, rgba(207, 255, 99, 0.07) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #103449 0%, #091f2e 42%, var(--profile-bg) 100%);
}

html[data-view="profile"] .topbar {
  border-block-end-color: rgba(137, 226, 235, 0.2);
  background: rgba(6, 27, 40, 0.9);
  color: var(--profile-text);
  box-shadow: 0 0.45rem 1rem rgba(0, 9, 21, 0.24);
  backdrop-filter: blur(1rem) saturate(1.06);
}

html[data-view="profile"] .brand-mark {
  border-color: rgba(137, 226, 235, 0.32);
  background: #0d2b3a;
  color: var(--profile-cyan);
  box-shadow: 0 0.15rem 0 rgba(0, 10, 22, 0.65), inset 0 0.06rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="profile"] :is(.streak-chip, .avatar-button) {
  border-color: var(--profile-border);
  background: rgba(9, 33, 47, 0.94);
  color: var(--profile-text);
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="profile"] .view-profile {
  min-height: calc(100dvh - 8.5rem);
  padding-block-start: 0.75rem;
  background: none;
  color: var(--profile-text);
}

html[data-view="profile"] .view-profile .profile-player-card {
  grid-template-columns: 5.6rem minmax(0, 1fr);
  grid-template-areas:
    "avatar copy"
    "avatar action"
    "resources resources";
  min-height: 13.8rem;
  gap: 0.2rem 0.92rem;
  padding: 1.05rem 0.95rem 0.9rem;
  border: 0.08rem solid var(--profile-border-strong);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 13% 8%, rgba(124, 236, 242, 0.17), transparent 8rem),
    radial-gradient(circle at 88% 108%, rgba(169, 149, 255, 0.16), transparent 10rem),
    linear-gradient(145deg, rgba(15, 55, 71, 0.98), rgba(8, 29, 45, 0.99) 64%, rgba(21, 28, 58, 0.99));
  color: var(--profile-text);
  box-shadow: 0 0.58rem 1.35rem rgba(0, 9, 22, 0.36), inset 0 0.08rem 0 rgba(221, 253, 255, 0.15);
}

html[data-view="profile"] .view-profile .profile-player-card::before {
  width: 13rem;
  inset: -8rem -4rem auto auto;
  border: 0.08rem solid rgba(124, 236, 242, 0.11);
  box-shadow: 0 0 0 0.55rem rgba(169, 149, 255, 0.04);
}

html[data-view="profile"] .view-profile .profile-player-card::after {
  width: 12rem;
  inset: auto auto -8rem -4rem;
  border: 0.08rem solid rgba(169, 149, 255, 0.1);
}

html[data-view="profile"] .profile-card-rays {
  background: repeating-conic-gradient(rgba(124, 236, 242, 0.08) 0 7deg, transparent 7deg 22deg);
  opacity: 0.68;
}

html[data-view="profile"] .profile-card-spark {
  color: var(--profile-cyan);
  filter: drop-shadow(0 0 0.4rem rgba(124, 236, 242, 0.45));
}

html[data-view="profile"] .profile-card-spark.is-two {
  color: var(--profile-violet);
  filter: drop-shadow(0 0 0.4rem rgba(169, 149, 255, 0.4));
}

html[data-view="profile"] .profile-captain-ribbon {
  inset: 0.72rem -1.9rem auto auto;
  border-block: 0.06rem solid rgba(194, 255, 116, 0.34);
  background: rgba(26, 60, 55, 0.92);
  color: var(--profile-action);
  box-shadow: 0 0.12rem 0 rgba(0, 11, 22, 0.5), inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="profile"] .view-profile .profile-player-card .profile-avatar {
  width: 5.6rem;
  border: 0.12rem solid rgba(158, 243, 249, 0.58);
  background:
    radial-gradient(circle at 34% 23%, rgba(255, 255, 255, 0.86) 0 0.18rem, transparent 0.23rem),
    linear-gradient(145deg, #245c6b, #314d79 58%, #55417b);
  color: var(--profile-action);
  box-shadow: 0 0.3rem 0 rgba(4, 23, 42, 0.74), 0 0.75rem 1.2rem rgba(0, 9, 22, 0.34), inset 0 0.1rem 0 rgba(225, 253, 255, 0.2);
  font-size: 1.65rem;
}

html[data-view="profile"] .view-profile .profile-player-copy .eyebrow {
  width: fit-content;
  margin-block-end: 0.22rem;
  padding: 0.22rem 0.42rem;
  border: 0.06rem solid rgba(148, 240, 247, 0.3);
  border-radius: 999px;
  background: rgba(4, 28, 41, 0.68);
  color: #c9fbff;
}

html[data-view="profile"] .view-profile .profile-player-copy h1 {
  color: var(--profile-text);
  text-shadow: 0 0.12rem 0 rgba(0, 12, 28, 0.72), 0 0 0.8rem rgba(124, 236, 242, 0.12);
}

html[data-view="profile"] .view-profile .profile-player-copy > p:last-child {
  color: var(--profile-muted);
}

html[data-view="profile"] .profile-edit-button {
  min-height: 2.45rem;
  border: 0.07rem solid rgba(220, 255, 155, 0.74);
  background: var(--profile-action);
  color: #173b31;
  box-shadow: 0 0.14rem 0 #648e3d, 0 0 0.65rem rgba(207, 255, 99, 0.1);
}

html[data-view="profile"] .profile-hero-resources {
  gap: 0.45rem;
  margin-block-start: 0.85rem;
  padding: 0.6rem 0 0;
  border-block-start: 0.07rem solid rgba(137, 226, 235, 0.2);
}

html[data-view="profile"] .profile-hero-resources > span {
  display: grid;
  min-height: 3.35rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 0 0.34rem;
  padding: 0.42rem;
  border: 0.07rem solid var(--profile-border);
  border-radius: 0.82rem;
  background: rgba(8, 33, 46, 0.74);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="profile"] .profile-hero-resources i {
  display: grid;
  width: 1.75rem;
  grid-row: 1 / -1;
  margin: 0;
  border: 0.06rem solid rgba(153, 240, 247, 0.35);
  background: #123b4b;
  color: var(--profile-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="profile"] .profile-hero-resources > span:nth-child(2) i {
  border-color: rgba(207, 255, 99, 0.34);
  background: #233e35;
  color: var(--profile-action);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.09);
}

html[data-view="profile"] .profile-hero-resources > span:nth-child(3) i {
  border-color: rgba(255, 156, 147, 0.35);
  background: #442f3c;
  color: var(--profile-coral);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.09);
}

html[data-view="profile"] .profile-hero-resources b {
  color: var(--profile-text);
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
}

html[data-view="profile"] .profile-hero-resources small {
  color: var(--profile-muted);
  font-size: clamp(0.48rem, 2vw, 0.55rem);
}

html[data-view="profile"] .view-profile .profile-rank-card {
  margin-block-start: 0.85rem;
  padding: 0.78rem;
  border: 0.07rem solid var(--profile-border);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 8% 0, rgba(207, 255, 99, 0.09), transparent 5rem),
    linear-gradient(145deg, rgba(15, 52, 63, 0.97), rgba(8, 29, 43, 0.99));
  color: var(--profile-text);
  box-shadow: 0 0.4rem 0.9rem rgba(0, 9, 22, 0.27), inset 0 0.06rem 0 rgba(220, 253, 255, 0.11);
}

html[data-view="profile"] .view-profile .profile-rank-medal {
  width: 3.4rem;
  border: 0.07rem solid rgba(205, 193, 255, 0.45);
  background: linear-gradient(145deg, #3b486c, #493c75);
  color: var(--profile-violet);
  box-shadow: 0 0.18rem 0 rgba(3, 15, 31, 0.68), inset 0 0.06rem 0 rgba(255, 255, 255, 0.12);
}

html[data-view="profile"] .profile-rank-card small,
html[data-view="profile"] .profile-rank-step {
  color: var(--profile-muted);
}

html[data-view="profile"] .view-profile .profile-rank-card > div strong,
html[data-view="profile"] .profile-rank-sparks b {
  color: var(--profile-text);
}

html[data-view="profile"] .profile-rank-sparks {
  border-inline-start-color: var(--profile-border);
}

html[data-view="profile"] .profile-rank-card progress {
  border: 0.05rem solid rgba(151, 226, 233, 0.15);
  background: rgba(0, 14, 25, 0.5);
  accent-color: var(--profile-action);
}

html[data-view="profile"] .profile-rank-card progress::-webkit-progress-bar {
  background: rgba(0, 14, 25, 0.5);
}

html[data-view="profile"] .profile-rank-card progress::-webkit-progress-value,
html[data-view="profile"] .profile-rank-card progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--profile-cyan), var(--profile-action));
}

html[data-view="profile"] .view-profile .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-block-start: 0.8rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html[data-view="profile"] .view-profile .stat-grid::after {
  display: none;
}

html[data-view="profile"] .view-profile .stat-grid article {
  display: grid;
  min-height: 5.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 0.05rem 0.62rem;
  padding: 0.68rem;
  border: 0.07rem solid var(--profile-border);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(15, 48, 62, 0.97), rgba(8, 28, 42, 0.99));
  box-shadow: 0 0.34rem 0.75rem rgba(0, 9, 22, 0.24), inset 0 0.05rem 0 rgba(220, 253, 255, 0.1);
  text-align: start;
}

html[data-view="profile"] .view-profile .stat-grid .stat-icon {
  width: 2.45rem;
  grid-row: 1 / -1;
  margin: 0;
  border: 0.06rem solid rgba(151, 239, 246, 0.34);
  background: #123b4b;
  color: var(--profile-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="profile"] .view-profile .stat-grid article:nth-child(2) .stat-icon {
  border-color: rgba(207, 255, 99, 0.34);
  background: #233e35;
  color: var(--profile-action);
}

html[data-view="profile"] .view-profile .stat-grid article:nth-child(3) .stat-icon {
  border-color: rgba(255, 156, 147, 0.34);
  background: #442f3c;
  color: var(--profile-coral);
}

html[data-view="profile"] .view-profile .stat-grid article:nth-child(4) .stat-icon {
  border-color: rgba(199, 184, 255, 0.34);
  background: #2d3158;
  color: var(--profile-violet);
}

html[data-view="profile"] .view-profile .stat-grid strong {
  margin: 0;
  color: var(--profile-text);
  text-shadow: none;
}

html[data-view="profile"] .view-profile .stat-grid p {
  margin: 0;
  color: var(--profile-muted);
}

html[data-view="profile"] .view-profile .profile-clubhouse {
  margin-block-start: 0.85rem;
  padding: 0.78rem;
  border: 0.07rem solid var(--profile-border);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(13, 44, 58, 0.98), rgba(7, 25, 38, 0.99));
  color: var(--profile-text);
  box-shadow: 0 0.45rem 1rem rgba(0, 9, 22, 0.28), inset 0 0.06rem 0 rgba(220, 253, 255, 0.1);
}

html[data-view="profile"] .view-profile .profile-section-title {
  padding: 0.08rem 0.08rem 0.68rem;
  border-block-end: 0.07rem solid rgba(137, 226, 235, 0.16);
}

html[data-view="profile"] .view-profile .profile-section-title > span {
  width: 2.45rem;
  border: 0.06rem solid rgba(198, 184, 255, 0.4);
  background: #2f3158;
  color: var(--profile-violet);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="profile"] .profile-section-title small {
  color: var(--profile-muted);
}

html[data-view="profile"] .view-profile .profile-section-title h2 {
  color: var(--profile-text);
  font-size: clamp(0.92rem, 3.9vw, 1.04rem);
}

html[data-view="profile"] .view-profile .profile-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-block-start: 0.65rem;
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-row,
html[data-view="profile"] .profile-account-actions .setting-row {
  min-height: 4.6rem;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.58rem;
  border: 0.07rem solid rgba(137, 226, 235, 0.2);
  border-radius: 0.9rem;
  background: rgba(10, 36, 49, 0.92);
  color: var(--profile-text);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.07);
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-row:first-child {
  border-block-start: 0.07rem solid rgba(137, 226, 235, 0.2);
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-row:is(:hover, :focus-visible),
html[data-view="profile"] .profile-account-actions .setting-row:is(:hover, :focus-visible) {
  border-color: rgba(207, 255, 99, 0.54);
  background: rgba(14, 46, 57, 0.98);
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-icon,
html[data-view="profile"] .profile-account-actions .setting-icon {
  width: 2.55rem;
  border: 0.06rem solid rgba(151, 239, 246, 0.32);
  background: #123b4b;
  color: var(--profile-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.09);
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-row:nth-child(2) .setting-icon {
  border-color: rgba(207, 255, 99, 0.32);
  background: #233e35;
  color: var(--profile-action);
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-row:nth-child(3) .setting-icon {
  border-color: rgba(199, 184, 255, 0.34);
  background: #2d3158;
  color: var(--profile-violet);
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-row:nth-child(4) .setting-icon {
  border-color: rgba(255, 156, 147, 0.32);
  background: #442f3c;
  color: var(--profile-coral);
}

html[data-view="profile"] .view-profile :is(.profile-action-grid, .profile-account-actions) .setting-row strong {
  color: var(--profile-text);
}

html[data-view="profile"] .view-profile :is(.profile-action-grid, .profile-account-actions) .setting-row small {
  color: var(--profile-muted);
}

html[data-view="profile"] .view-profile :is(.profile-action-grid, .profile-account-actions) .chevron {
  color: var(--profile-cyan);
}

html[data-view="profile"] .profile-action-grid .switch {
  border: 0.06rem solid rgba(207, 255, 99, 0.36);
  background: #27483d;
}

html[data-view="profile"] .profile-action-grid .switch span {
  background: var(--profile-action);
  box-shadow: 0 0 0.35rem rgba(207, 255, 99, 0.24);
}

html[data-view="profile"] .profile-account-actions {
  margin-block-start: 0.6rem;
  padding: 0;
}

html[data-view="profile"] .profile-account-actions .setting-row {
  min-height: 3.7rem;
  border-color: rgba(255, 145, 137, 0.22);
}

html[data-view="profile"] .profile-account-actions .setting-icon {
  border-color: rgba(255, 156, 147, 0.32);
  background: #442f3c;
  color: var(--profile-coral);
}

html[data-view="profile"] .bottom-nav {
  border-block-start: 0.07rem solid rgba(137, 226, 235, 0.2);
  background: rgba(6, 25, 37, 0.96);
  box-shadow: 0 -0.45rem 1.2rem rgba(0, 8, 20, 0.3), inset 0 0.06rem 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(1rem) saturate(1.06);
}

html[data-view="profile"] .nav-item {
  border: 0.06rem solid transparent;
  background: transparent;
  color: var(--profile-muted);
  box-shadow: none;
}

html[data-view="profile"] .nav-item.is-active {
  border-color: rgba(207, 255, 99, 0.44);
  background: rgba(35, 65, 54, 0.88);
  color: var(--profile-action);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
  transform: none;
}

/* Achievements destination: restrained deep-flow glass, not a prize-candy room. */
html[data-view="achievements"] {
  --vault-bg: #061521;
  --vault-surface: #0b2533;
  --vault-surface-raised: #103442;
  --vault-border: rgba(137, 226, 235, 0.26);
  --vault-border-strong: rgba(151, 239, 246, 0.46);
  --vault-cyan: #7cecf2;
  --vault-violet: #b3a5ff;
  --vault-action: #cfff63;
  --vault-text: #effeff;
  --vault-muted: #a8c8ce;

  color-scheme: dark;
  background: var(--vault-bg);
}

html[data-view="achievements"] body {
  background: radial-gradient(circle at 50% 8%, rgba(124, 236, 242, 0.14), transparent 25rem), var(--vault-bg);
}

html[data-view="achievements"] .app-shell {
  background:
    radial-gradient(circle at 14% 16%, rgba(124, 236, 242, 0.12) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 82% 28%, rgba(169, 149, 255, 0.1) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 72% 74%, rgba(207, 255, 99, 0.07) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #103449 0%, #091f2e 42%, var(--vault-bg) 100%);
}

html[data-view="achievements"] .topbar {
  border-block-end: 0.07rem solid rgba(137, 226, 235, 0.2);
  background: rgba(6, 27, 40, 0.9);
  color: var(--vault-text);
  box-shadow: 0 0.45rem 1rem rgba(0, 9, 21, 0.24);
  backdrop-filter: blur(1rem) saturate(1.06);
}

html[data-view="achievements"] .brand-mark {
  border-color: rgba(137, 226, 235, 0.32);
  background: #0d2b3a;
  color: var(--vault-cyan);
  box-shadow: 0 0.15rem 0 rgba(0, 10, 22, 0.65), inset 0 0.06rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="achievements"] :is(.streak-chip, .avatar-button) {
  border-color: var(--vault-border);
  background: rgba(9, 33, 47, 0.94);
  color: var(--vault-text);
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="achievements"] .view-achievements {
  min-height: calc(100dvh - 8.5rem);
  padding-block-start: 0.7rem;
  background: none;
  color: var(--vault-text);
}

.achievements-back-profile {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.48rem;
  margin: 0 0 0.72rem;
  padding: 0.44rem 0.75rem;
  border: 0.07rem solid var(--vault-border);
  border-radius: 999px;
  background: rgba(8, 32, 46, 0.84);
  color: var(--vault-text);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
  font: 700 0.72rem/1 var(--sans);
  cursor: pointer;
}

.achievements-back-profile > span:first-child {
  color: var(--vault-cyan);
  font-size: 1rem;
}

.achievements-back-profile:is(:hover, :focus-visible) {
  border-color: var(--vault-border-strong);
  background: rgba(15, 51, 65, 0.96);
}

.achievements-back-profile:focus-visible,
html[data-view="achievements"] .award-filter button:focus-visible {
  outline: 0.16rem solid var(--vault-action);
  outline-offset: 0.12rem;
}

html[data-view="achievements"] .awards-page-heading {
  min-height: 4.8rem;
  margin-block-end: 0.8rem;
  padding-inline: 0;
}

html[data-view="achievements"] .page-kicker-chip {
  border-color: var(--vault-border);
  background: rgba(8, 36, 51, 0.82);
  color: var(--vault-cyan);
  box-shadow: none;
}

html[data-view="achievements"] .collection-page-heading h1 {
  color: var(--vault-text);
  font-size: clamp(1.75rem, 8vw, 2.2rem);
  text-shadow: none;
}

html[data-view="achievements"] .collection-page-subtitle {
  max-width: 21rem;
  color: var(--vault-muted);
}

html[data-view="achievements"] .achievement-count {
  min-width: 5.25rem;
  padding: 0.52rem 0.62rem;
  border: 0.07rem solid var(--vault-border);
  border-radius: 0.9rem;
  background: rgba(8, 33, 47, 0.92);
  color: var(--vault-muted);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="achievements"] .achievement-count > small {
  color: var(--vault-muted);
}

html[data-view="achievements"] .achievement-count > span {
  color: var(--vault-muted);
}

html[data-view="achievements"] .achievement-count strong {
  color: var(--vault-action);
}

html[data-view="achievements"] .achievement-count progress,
html[data-view="achievements"] .achievement-count progress::-webkit-progress-bar {
  background: rgba(0, 12, 24, 0.7);
}

html[data-view="achievements"] .achievement-count progress::-webkit-progress-value,
html[data-view="achievements"] .achievement-count progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--vault-cyan), var(--vault-action));
}

html[data-view="achievements"] .view-achievements .featured-achievement {
  min-height: 8.7rem;
  gap: 1rem;
  padding: 1.1rem;
  border: 0.07rem solid var(--vault-border-strong);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 10% 20%, rgba(124, 236, 242, 0.14), transparent 7rem),
    linear-gradient(145deg, rgba(15, 55, 68, 0.97), rgba(16, 28, 53, 0.98));
  box-shadow: 0 0.7rem 1.5rem rgba(0, 9, 22, 0.28), inset 0 0.06rem 0 rgba(255, 255, 255, 0.09);
}

html[data-view="achievements"] .view-achievements .featured-achievement::after {
  width: 9rem;
  inset: -5.2rem -3.4rem auto auto;
  border: 0.08rem solid rgba(179, 165, 255, 0.24);
  box-shadow: 0 0 0 1.2rem rgba(124, 236, 242, 0.025);
}

html[data-view="achievements"] :is(.featured-award-rays, .featured-award-spark) {
  display: none;
}

html[data-view="achievements"] .view-achievements .featured-orbit {
  display: grid;
  width: 4.75rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.07rem solid rgba(124, 236, 242, 0.34);
  border-radius: 50%;
  background: rgba(6, 25, 39, 0.82);
  filter: none;
  box-shadow: inset 0 0 1.2rem rgba(124, 236, 242, 0.08), 0 0 1rem rgba(124, 236, 242, 0.08);
}

html[data-view="achievements"] .view-achievements .featured-orbit::before {
  width: 3.9rem;
  border: 0.06rem solid rgba(179, 165, 255, 0.34);
  border-radius: 50%;
  background: none;
  box-shadow: none;
  rotate: 0deg;
}

html[data-view="achievements"] .view-achievements .featured-orbit::after {
  width: 0.48rem;
  height: 0.48rem;
  inset: 0.48rem 0.48rem auto auto;
  border-radius: 50%;
  background: var(--vault-action);
  filter: none;
  box-shadow: 0 0 0.55rem var(--vault-action);
  translate: 0;
}

html[data-view="achievements"] .view-achievements .featured-orbit span {
  width: 2.8rem;
  border: 0.06rem solid rgba(151, 239, 246, 0.48);
  background: #123b4b;
  color: var(--vault-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
  font-size: 1.25rem;
}

html[data-view="achievements"] .view-achievements .featured-orbit i {
  display: none;
}

html[data-view="achievements"] .view-achievements .featured-achievement p {
  margin-block-end: 0.3rem;
  padding: 0;
  background: none;
  color: var(--vault-action);
}

html[data-view="achievements"] .view-achievements .featured-achievement h2 {
  margin-block-end: 0.3rem;
  color: var(--vault-text);
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  text-shadow: none;
}

html[data-view="achievements"] .view-achievements .featured-achievement-copy > span {
  color: var(--vault-muted);
}

html[data-view="achievements"] .featured-achievement-copy > b {
  margin-block-start: 0.62rem;
  border: 0.06rem solid rgba(207, 255, 99, 0.32);
  background: rgba(35, 65, 54, 0.68);
  color: var(--vault-action);
  box-shadow: none;
}

html[data-view="achievements"] .awards-shelf-heading {
  margin-block-start: 1rem;
  color: var(--vault-text);
}

html[data-view="achievements"] .awards-shelf-heading > span {
  width: 2.55rem;
  border: 0.07rem solid var(--vault-border);
  border-radius: 0.8rem;
  background: var(--vault-surface-raised);
  color: var(--vault-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.09);
}

html[data-view="achievements"] .awards-shelf-heading small {
  color: var(--vault-muted);
}

html[data-view="achievements"] .awards-shelf-heading h2 {
  color: var(--vault-text);
  text-shadow: none;
}

html[data-view="achievements"] .award-filter {
  gap: 0.4rem;
  padding: 0.3rem;
  border: 0.07rem solid var(--vault-border);
  border-radius: 0.95rem;
  background: rgba(5, 23, 35, 0.7);
}

html[data-view="achievements"] .award-filter button {
  min-height: 2.55rem;
  padding: 0.42rem 0.5rem;
  border: 0.06rem solid transparent;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--vault-muted);
  box-shadow: none;
  font-size: clamp(0.64rem, 2.7vw, 0.73rem);
}

html[data-view="achievements"] .award-filter button:is(:hover, :focus-visible) {
  border-color: var(--vault-border);
  background: rgba(15, 50, 63, 0.72);
  filter: none;
  translate: 0;
}

html[data-view="achievements"] .award-filter button.is-active {
  border-color: rgba(207, 255, 99, 0.38);
  background: rgba(35, 65, 54, 0.78);
  color: var(--vault-action);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="achievements"] .award-filter button strong {
  background: rgba(124, 236, 242, 0.1);
  color: currentColor;
}

html[data-view="achievements"] .view-achievements .achievement-grid {
  gap: 0.65rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html[data-view="achievements"] .view-achievements .achievement-card {
  min-height: 10.5rem;
  align-items: flex-start;
  padding: 0.9rem 0.8rem 0.82rem;
  border: 0.07rem solid color-mix(in srgb, var(--award-color) 30%, var(--vault-border));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--award-color) 10%, transparent), transparent 5rem),
    linear-gradient(145deg, rgba(14, 47, 61, 0.96), rgba(7, 27, 40, 0.98));
  box-shadow: 0 0.42rem 0.9rem rgba(0, 9, 22, 0.22), inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
  text-align: start;
}

html[data-view="achievements"] .view-achievements .achievement-card::before {
  width: 5rem;
  inset: -3.7rem -2.5rem auto auto;
  border: 0.06rem solid color-mix(in srgb, var(--award-color) 24%, transparent);
}

html[data-view="achievements"] .view-achievements .achievement-card.is-locked {
  filter: saturate(0.45);
  opacity: 0.82;
}

html[data-view="achievements"] .view-achievements .achievement-card.is-unlocked {
  animation: none;
}

html[data-view="achievements"] .achievement-ribbon {
  inset: 0.62rem 0.62rem auto auto;
  border: 0.05rem solid color-mix(in srgb, var(--award-color) 36%, var(--vault-border));
  background: rgba(5, 24, 37, 0.88);
  color: var(--vault-muted);
  box-shadow: none;
}

html[data-view="achievements"] .view-achievements .achievement-badge {
  width: 3.25rem;
  margin: 0.25rem 0 0.8rem;
  border: 0.06rem solid color-mix(in srgb, var(--badge) 38%, var(--vault-border));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--badge) 18%, #102d3b);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1), 0 0 0.8rem color-mix(in srgb, var(--badge) 10%, transparent);
  rotate: 0deg;
}

html[data-view="achievements"] .view-achievements .achievement-badge span {
  color: var(--vault-text);
  font-size: 1.1rem;
  filter: none;
}

html[data-view="achievements"] .view-achievements .achievement-badge i,
html[data-view="achievements"] .achievement-card-spark {
  display: none;
}

html[data-view="achievements"] .view-achievements .achievement-card h2 {
  color: var(--vault-text);
}

html[data-view="achievements"] .view-achievements .achievement-card p {
  color: var(--vault-muted);
}

html[data-view="achievements"] .award-filter-empty {
  color: var(--vault-muted);
}

html[data-view="achievements"] .award-filter-empty > span {
  border-color: var(--vault-border);
  background: var(--vault-surface-raised);
  color: var(--vault-cyan);
  box-shadow: none;
  rotate: 0deg;
}

html[data-view="achievements"] .bottom-nav {
  border-block-start: 0.07rem solid rgba(137, 226, 235, 0.2);
  background: rgba(6, 25, 37, 0.96);
  box-shadow: 0 -0.45rem 1.2rem rgba(0, 8, 20, 0.3), inset 0 0.06rem 0 rgba(255, 255, 255, 0.06);
}

html[data-view="achievements"] .nav-item {
  border: 0.06rem solid transparent;
  background: transparent;
  color: var(--vault-muted);
  box-shadow: none;
  font-size: clamp(0.57rem, 2.4vw, 0.66rem);
}

html[data-view="achievements"] .nav-item.is-active {
  border-color: rgba(207, 255, 99, 0.44);
  background: rgba(35, 65, 54, 0.88);
  color: var(--vault-action);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
  transform: none;
}

@media (max-width: 21.25rem) {
  html[data-view="achievements"] .view-achievements .achievement-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .achievements-back-profile,
  html[data-view="achievements"] .award-filter button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .achievements-back-profile,
  html[data-view="achievements"] :is(.featured-achievement, .award-filter, .achievement-card) {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* World Lost uses the same restrained orbital-glass language as the
   destination and player pages, with danger reserved for the breach state. */
html[data-play-mode="orbit"] .orbit-failure-card {
  --failure-action: #cfff63;
  --failure-coral: #ff9c93;
  --failure-cyan: #7cecf2;
  --failure-muted: #a8c8ce;
  --failure-text: #effeff;

  position: relative;
  z-index: 12;
  display: grid;
  width: min(20.5rem, calc(100% - 1.25rem));
  place-items: stretch;
  gap: 0;
  padding: 0.9rem;
  overflow: hidden;
  border: 0.08rem solid rgba(255, 156, 147, 0.5);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 4% 0, rgba(255, 113, 110, 0.15), transparent 10rem),
    radial-gradient(circle at 100% 35%, rgba(137, 104, 255, 0.11), transparent 12rem),
    linear-gradient(155deg, rgba(11, 38, 51, 0.99), rgba(4, 18, 30, 0.995));
  color: var(--failure-text);
  box-shadow:
    0 0 0 0.04rem rgba(255, 156, 147, 0.11),
    0 1.2rem 3rem rgba(0, 3, 14, 0.72),
    inset 0 0.06rem 0 rgba(226, 254, 255, 0.13);
  opacity: 0;
  text-align: start;
  transform: translateY(1.8rem) scale(0.72) rotate(-3deg);
}

.orbit-failure-card::before {
  position: absolute;
  height: 0.18rem;
  inset: 0 0 auto;
  background: linear-gradient(90deg, var(--failure-coral), #a995ff 58%, var(--failure-cyan));
  box-shadow: 0 0 0.7rem rgba(255, 130, 130, 0.34);
  content: "";
}

html[data-play-mode="orbit"] .orbit-stage.is-world-lost .orbit-failure-card {
  animation: orbit-catastrophe-card-in 620ms cubic-bezier(.18, 1.28, .3, 1) 2.15s both;
}

.orbit-failure-heading {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding-block: 0.1rem 0.68rem;
  border-block-end: 0.07rem solid rgba(137, 226, 235, 0.17);
}

.orbit-failure-symbol {
  display: grid;
  width: 2.35rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 0.07rem solid rgba(255, 156, 147, 0.46);
  border-radius: 0.78rem;
  background: #442f3c;
  color: var(--failure-coral);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
  font: 900 1rem/1 var(--mono);
}

.orbit-failure-card small,
.orbit-failure-heading small {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.orbit-failure-heading small,
.orbit-failure-heading strong {
  display: block;
}

.orbit-failure-heading small {
  width: fit-content;
  padding: 0.12rem 0.36rem;
  border: 0.05rem solid rgba(255, 156, 147, 0.3);
  border-radius: 999px;
  background: rgba(68, 47, 60, 0.72);
  color: var(--failure-coral);
  font: 800 0.48rem/1.2 var(--mono);
  letter-spacing: 0.13em;
}

.orbit-failure-heading strong {
  margin-block-start: 0.12rem;
  color: var(--failure-text);
  font-size: 0.82rem;
  line-height: 1.15;
}

.orbit-failure-card > h2 {
  margin: 0.78rem 0 0.16rem;
  color: var(--failure-text);
  font-size: clamp(1.55rem, 7vw, 1.95rem);
  letter-spacing: -0.045em;
  line-height: 1;
  text-shadow: none;
}

.orbit-failure-card > p {
  margin: 0;
  color: var(--failure-muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.4;
}

.orbit-failure-actions {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 0.82rem;
}

.orbit-failure-card .orbit-failure-actions button {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0;
  padding: 0.62rem 0.78rem;
  border: 0.08rem solid rgba(220, 255, 155, 0.62);
  border-radius: 0.82rem;
  background: var(--failure-action);
  color: #173c32;
  box-shadow:
    0 0.16rem 0 #668b37,
    0 0.45rem 0.8rem rgba(0, 11, 19, 0.3),
    inset 0 0.05rem 0 rgba(255, 255, 255, 0.34);
  font: 850 0.74rem/1.15 var(--sans);
  text-align: start;
  cursor: pointer;
}

.orbit-failure-card .orbit-failure-actions button b {
  display: grid;
  min-width: 2rem;
  min-height: 1.7rem;
  place-items: center;
  margin: 0;
  border-radius: 0.52rem;
  background: rgba(23, 60, 50, 0.13);
  color: inherit;
  font: 900 0.78rem/1 var(--mono);
}

.orbit-failure-card .orbit-failure-actions .orbit-rescue-button {
  border-color: rgba(124, 236, 242, 0.36);
  background: rgba(12, 43, 56, 0.96);
  color: #dffcff;
  box-shadow: 0 0.16rem 0 rgba(0, 11, 22, 0.78), inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

.orbit-failure-card .orbit-failure-actions .orbit-rescue-button b {
  background: rgba(124, 236, 242, 0.1);
  color: var(--failure-cyan);
}

.orbit-failure-card .orbit-rescue-button[hidden] {
  display: none;
}

.orbit-failure-card .orbit-failure-actions button:is(:hover, :focus-visible) {
  border-color: var(--failure-action);
  filter: brightness(1.06);
  outline: 0.16rem solid var(--failure-action);
  outline-offset: 0.12rem;
  translate: 0 -0.05rem;
}

.orbit-failure-card .orbit-failure-actions button:active {
  translate: 0 0.06rem;
}

.orbit-failure-card .orbit-rescue-note {
  display: block;
  margin-block-start: 0.65rem;
  padding-inline: 0;
  padding-block-start: 0.58rem;
  border-block-start: 0.07rem solid rgba(137, 226, 235, 0.14);
  border-radius: 0;
  background: transparent;
  color: var(--failure-muted);
  box-shadow: none;
  font: 650 0.5rem/1.4 var(--sans);
  letter-spacing: 0;
  text-align: start;
}

@media (max-width: 23rem) {
  html[data-play-mode="orbit"] .orbit-failure-card {
    width: calc(100% - 1rem);
    padding: 0.74rem;
    border-radius: 1rem;
  }

  .orbit-failure-card > h2 {
    margin-block-start: 0.65rem;
  }

  .orbit-failure-actions {
    margin-block-start: 0.68rem;
  }

  .orbit-failure-card .orbit-failure-actions button {
    min-height: 2.75rem;
  }
}

@media (max-width: 41.99rem) {
  html[data-view="play"][data-play-mode="orbit"] .orbit-stage.is-world-lost {
    z-index: 70;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-play-mode="orbit"] .orbit-stage.is-world-lost .orbit-failure-card {
    animation: orbit-failure-card-in 180ms ease-out 180ms both;
  }
}

@media (forced-colors: active) {
  html[data-play-mode="orbit"] .orbit-failure-card,
  .orbit-failure-symbol,
  .orbit-failure-card .orbit-failure-actions button {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Independent audio controls: clear state without relying on switch color. */
html[data-view="profile"] .view-profile .profile-action-grid .audio-setting {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html[data-view="profile"] .view-profile .profile-action-grid .setting-row:nth-child(3) {
  grid-column: 1 / -1;
}

html[data-view="profile"] .view-profile .profile-action-grid .audio-setting.is-beds .setting-icon {
  border-color: rgba(199, 184, 255, 0.34);
  background: #2d3158;
  color: var(--profile-violet);
}

html[data-view="profile"] .view-profile .profile-action-grid .audio-setting.is-effects .setting-icon {
  border-color: rgba(255, 156, 147, 0.34);
  background: #442f3c;
  color: var(--profile-coral);
}

html[data-view="profile"] .audio-toggle-visual {
  display: grid;
  justify-items: end;
  gap: 0.18rem;
}

html[data-view="profile"] .audio-state {
  min-width: 2.2rem;
  color: var(--profile-action);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}

html[data-view="profile"] .audio-state::before {
  content: "ON";
}

html[data-view="profile"] .audio-setting[aria-pressed="false"] .audio-state {
  color: var(--profile-muted);
}

html[data-view="profile"] .audio-setting[aria-pressed="false"] .audio-state::before {
  content: "OFF";
}

html[data-view="profile"] .audio-setting[aria-pressed="false"] .switch {
  border-color: rgba(137, 226, 235, 0.18);
  background: #263943;
}

html[data-view="profile"] .audio-setting[aria-pressed="false"] .switch span {
  background: #d7e2e4;
  box-shadow: none;
}

@media (forced-colors: active) {
  html[data-view="profile"] .audio-state {
    color: ButtonText;
  }
}

html[data-view="profile"] :is(.profile-avatar, .profile-edit-button, .setting-row, .nav-item):focus-visible {
  outline: 0.16rem solid var(--profile-action);
  outline-offset: 0.14rem;
}

@media (max-width: 23rem) {
  html[data-view="profile"] .view-profile .profile-player-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  html[data-view="profile"] .view-profile .profile-player-card .profile-avatar {
    width: 4.5rem;
  }

  html[data-view="profile"] .profile-hero-resources {
    gap: 0.28rem;
  }

  html[data-view="profile"] .view-profile .profile-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-view="profile"] :is(.profile-card-rays, .profile-card-spark, .profile-rank-medal) {
    animation: none;
  }
}

@media (forced-colors: active) {
  html[data-view="profile"] :is(
    .profile-player-card,
    .profile-avatar,
    .profile-edit-button,
    .profile-hero-resources > span,
    .profile-rank-card,
    .stat-grid article,
    .profile-clubhouse,
    .setting-row,
    .bottom-nav,
    .nav-item
  ) {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Classic material pass: match the Vortex destination system without losing
   Classic's violet/coral identity or the maze's high-contrast play surface. */
html[data-play-mode="classic"] {
  --classic-glass-deep: #091724;
  --classic-glass: #11263a;
  --classic-glass-raised: #192f4b;
  --classic-glass-line: rgba(185, 166, 255, 0.3);
  --classic-glass-line-strong: rgba(199, 185, 255, 0.56);
  --classic-energy-violet: #ad96ff;
  --classic-energy-coral: #ff9189;
  --classic-energy-cyan: #7cecf2;
  --classic-action: #cfff63;
  --classic-text: #f7f5ff;
  --classic-text-muted: #bebbd4;
}

/* The Classic level/score hero now belongs to the same deep-flow glass world
   as the Vortex hero, while staying compact enough to protect maze space. */
html[data-play-mode="classic"] .view-play .classic-heading {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(calc(100% - 1rem), 24rem);
  max-width: none;
  min-height: 4.15rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin: 0.08rem auto 0.2rem;
  padding: 0.58rem 0.66rem 0.58rem 0.78rem;
  overflow: hidden;
  border: 0.08rem solid var(--classic-glass-line-strong);
  border-radius: 1.18rem;
  background:
    radial-gradient(circle at 10% 8%, rgba(173, 150, 255, 0.2), transparent 36%),
    radial-gradient(circle at 86% 115%, rgba(255, 145, 137, 0.17), transparent 43%),
    linear-gradient(145deg, rgba(24, 48, 75, 0.98), rgba(10, 27, 44, 0.99) 62%, rgba(32, 27, 63, 0.99));
  box-shadow:
    0 0.45rem 1.15rem rgba(0, 8, 22, 0.34),
    inset 0 0.07rem 0 rgba(239, 235, 255, 0.2),
    inset 0 -0.08rem 0 rgba(0, 8, 22, 0.28);
  backdrop-filter: blur(0.7rem) saturate(1.06);
}

html[data-play-mode="classic"] .view-play .classic-heading::before {
  position: absolute;
  z-index: -1;
  width: 8.5rem;
  aspect-ratio: 1;
  inset: -5.9rem -1.9rem auto auto;
  border: 0.08rem solid rgba(255, 145, 137, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 0.48rem rgba(173, 150, 255, 0.055);
  content: "";
}

html[data-play-mode="classic"] .view-play .classic-heading::after {
  position: absolute;
  z-index: -1;
  height: 38%;
  inset: 0 0.34rem auto;
  border-radius: 0.92rem 0.92rem 55% 42%;
  background: linear-gradient(180deg, rgba(236, 232, 255, 0.1), transparent);
  content: "";
  pointer-events: none;
}

html[data-play-mode="classic"] .view-play .classic-heading > div:first-child {
  min-width: 0;
}

html[data-play-mode="classic"] .view-play .classic-heading .eyebrow {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 0.18rem;
  padding: 0.19rem 0.42rem;
  border: 0.06rem solid rgba(201, 188, 255, 0.34);
  border-radius: 999px;
  background: rgba(13, 25, 47, 0.66);
  color: #d4caff;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
  letter-spacing: 0.08em;
}

html[data-play-mode="classic"] .view-play .classic-heading h1 {
  margin: 0;
  color: var(--classic-text);
  font-size: clamp(1.08rem, 4.7vw, 1.32rem);
  letter-spacing: -0.035em;
  text-shadow: 0 0.12rem 0 rgba(0, 10, 28, 0.72), 0 0 0.75rem rgba(173, 150, 255, 0.15);
}

html[data-play-mode="classic"] .view-play .classic-heading .score-block {
  position: relative;
  z-index: 1;
  min-width: 5.25rem;
  align-items: flex-start;
  padding: 0.4rem 0.54rem;
  border: 0.07rem solid rgba(255, 156, 147, 0.42);
  border-radius: 0.82rem;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 145, 137, 0.15), transparent 2.2rem),
    linear-gradient(145deg, rgba(53, 40, 70, 0.96), rgba(17, 29, 50, 0.98));
  box-shadow: 0 0.24rem 0.65rem rgba(0, 8, 22, 0.26), inset 0 0.06rem 0 rgba(255, 238, 238, 0.13);
}

html[data-play-mode="classic"] .view-play .classic-heading .score-block span {
  color: #e7b9bd;
  font-size: clamp(0.5rem, 2.2vw, 0.57rem);
}

html[data-play-mode="classic"] .view-play .classic-heading .score-block strong {
  margin-block-start: 0.08rem;
  color: var(--classic-action);
  font-size: clamp(0.86rem, 3.7vw, 1rem);
  text-shadow: 0 0 0.55rem rgba(207, 255, 99, 0.2);
}

/* Classic Map shell: the same quiet, legible night-glass hierarchy as Vortex. */
html[data-view="journey"][data-play-mode="classic"] {
  color-scheme: dark;
  background: #07131f;
}

html[data-view="journey"][data-play-mode="classic"] body {
  background:
    radial-gradient(circle at 50% 12%, rgba(173, 150, 255, 0.15), transparent 24rem),
    #07131f;
}

html[data-view="journey"][data-play-mode="classic"] .app-shell {
  background:
    radial-gradient(circle at 14% 16%, rgba(173, 150, 255, 0.13) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 82% 28%, rgba(255, 145, 137, 0.1) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 73% 72%, rgba(207, 255, 99, 0.08) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #182f4b 0%, #101f35 42%, #07131f 100%);
}

html[data-view="journey"][data-play-mode="classic"] .topbar {
  border-block-end-color: rgba(191, 175, 255, 0.2);
  background: rgba(10, 23, 39, 0.88);
  box-shadow: 0 0.45rem 1rem rgba(0, 8, 22, 0.24);
  backdrop-filter: blur(1rem) saturate(1.06);
}

html[data-view="journey"][data-play-mode="classic"] .brand-mark {
  color: #f5f1ff;
}

html[data-view="journey"][data-play-mode="classic"] .journey-back-game {
  grid-template-columns: auto minmax(0, 1fr);
  border: 0.08rem solid var(--classic-glass-line-strong);
  background:
    radial-gradient(circle at 15% 5%, rgba(173, 150, 255, 0.15), transparent 30%),
    linear-gradient(145deg, rgba(28, 53, 79, 0.97), rgba(12, 28, 46, 0.99));
  color: var(--classic-text);
  box-shadow: 0 0.45rem 1.05rem rgba(0, 8, 22, 0.34), inset 0 0.07rem 0 rgba(239, 235, 255, 0.15);
}

html[data-view="journey"][data-play-mode="classic"] .journey-back-game::after {
  background: var(--classic-energy-coral);
  filter: drop-shadow(0 0 0.3rem rgba(255, 145, 137, 0.55));
  opacity: 0.68;
}

html[data-view="journey"][data-play-mode="classic"] .journey-back-icon {
  border: 0.08rem solid rgba(210, 198, 255, 0.54);
  background: linear-gradient(145deg, #403d78, #513e76 62%, #693d64);
  color: white;
  box-shadow: 0 0.18rem 0 rgba(8, 15, 36, 0.72), inset 0 0.07rem 0 rgba(244, 239, 255, 0.23);
}

html[data-view="journey"][data-play-mode="classic"] :is(.journey-back-copy small, .journey-back-resume > span) {
  color: var(--classic-text-muted);
}

html[data-view="journey"][data-play-mode="classic"] .journey-back-copy strong {
  color: var(--classic-text);
}

html[data-view="journey"][data-play-mode="classic"] .journey-back-resume b {
  border: 0.07rem solid rgba(216, 255, 142, 0.74);
  background: var(--classic-action);
  color: #173b31;
  box-shadow: 0 0.14rem 0 #648e3d, 0 0 0.7rem rgba(207, 255, 99, 0.12);
}

.view-journey[data-map-mode="classic"] .journey-page-heading {
  border: 0.08rem solid var(--classic-glass-line-strong);
  background:
    radial-gradient(circle at 10% 7%, rgba(173, 150, 255, 0.19), transparent 34%),
    radial-gradient(circle at 91% 22%, rgba(255, 145, 137, 0.16), transparent 35%),
    linear-gradient(145deg, rgba(30, 54, 82, 0.98), rgba(13, 30, 49, 0.99) 62%, rgba(31, 27, 61, 0.99));
  color: var(--classic-text);
  box-shadow: 0 0.55rem 1.3rem rgba(0, 8, 22, 0.36), inset 0 0.08rem 0 rgba(239, 235, 255, 0.16);
}

.view-journey[data-map-mode="classic"] .journey-page-heading::before {
  height: 34%;
  background: linear-gradient(180deg, rgba(239, 235, 255, 0.1), transparent);
}

.view-journey[data-map-mode="classic"] .journey-page-heading::after {
  border-width: 0.1rem;
  border-color: rgba(173, 150, 255, 0.13);
}

.view-journey[data-map-mode="classic"] .journey-page-heading .page-kicker-chip {
  border: 0.07rem solid rgba(205, 193, 255, 0.42);
  background: rgba(16, 27, 51, 0.68);
  color: #ded6ff;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.11);
}

.view-journey[data-map-mode="classic"] .journey-page-heading h1 {
  color: var(--classic-text);
  text-shadow: 0 0.12rem 0 rgba(0, 10, 28, 0.75), 0 0 0.8rem rgba(173, 150, 255, 0.14);
}

.view-journey[data-map-mode="classic"] .journey-page-heading .collection-page-subtitle {
  color: #cbc7dc;
}

.view-journey[data-map-mode="classic"] .journey-page-heading .completion-ring {
  border: 0.08rem solid rgba(218, 208, 255, 0.47);
  background: conic-gradient(var(--classic-action) var(--percent), rgba(149, 132, 185, 0.2) 0);
  color: var(--classic-text);
  box-shadow: 0 0 0.9rem rgba(173, 150, 255, 0.13), inset 0 0.06rem 0 rgba(255, 255, 255, 0.13);
}

.view-journey[data-map-mode="classic"] .journey-page-heading .completion-ring::before {
  background: linear-gradient(145deg, #263552, #141f36);
  box-shadow: inset 0 0.06rem 0 rgba(239, 235, 255, 0.15);
}

.view-journey[data-map-mode="classic"] .journey-page-heading .completion-ring small {
  color: var(--classic-text-muted);
}

.view-journey[data-map-mode="classic"] .journey-hero {
  border: 0.08rem solid var(--classic-glass-line-strong);
  background:
    radial-gradient(circle at 84% 20%, rgba(173, 150, 255, 0.17), transparent 7rem),
    radial-gradient(circle at 74% 105%, rgba(255, 145, 137, 0.14), transparent 8rem),
    linear-gradient(145deg, rgba(30, 53, 80, 0.98), rgba(12, 28, 47, 0.99));
  box-shadow: 0 0.55rem 1.25rem rgba(0, 8, 22, 0.34), inset 0 0.08rem 0 rgba(239, 235, 255, 0.15);
}

.view-journey[data-map-mode="classic"] .journey-hero::before,
.view-journey[data-map-mode="classic"] .journey-hero::after {
  border-width: 0.08rem;
  border-color: rgba(193, 178, 255, 0.14);
}

.view-journey[data-map-mode="classic"] .journey-hero-rays {
  background: repeating-conic-gradient(from 12deg, rgba(173, 150, 255, 0.1) 0 8deg, transparent 8deg 23deg);
  opacity: 0.72;
}

.view-journey[data-map-mode="classic"] .journey-hero-copy {
  text-shadow: 0 0.12rem 0 rgba(0, 10, 28, 0.7);
}

.view-journey[data-map-mode="classic"] .journey-hero-eyebrow {
  border: 0.06rem solid rgba(205, 193, 255, 0.32);
  background: rgba(15, 25, 48, 0.7);
  color: #ded7ff;
  white-space: nowrap;
}

.view-journey[data-map-mode="classic"] .journey-hero-eyebrow > span {
  background: var(--classic-action);
  box-shadow: 0 0 0 0.18rem rgba(207, 255, 99, 0.1), 0 0 0.45rem rgba(207, 255, 99, 0.28);
}

.view-journey[data-map-mode="classic"] .journey-hero-copy > small {
  color: var(--classic-text-muted);
}

.view-journey[data-map-mode="classic"] .journey-hero-orbit {
  filter: drop-shadow(0 0.45rem 0.65rem rgba(0, 8, 24, 0.46));
}

.view-journey[data-map-mode="classic"] .journey-hero-orbit > span {
  border: 0.09rem solid rgba(218, 208, 255, 0.68);
  background: linear-gradient(145deg, #403f78, #4d3d74 60%, #6a3e64);
  color: #faf8ff;
  box-shadow: 0 0 0 0.3rem rgba(173, 150, 255, 0.085), inset 0 0.08rem 0 rgba(244, 239, 255, 0.19);
}

.view-journey[data-map-mode="classic"] .journey-hero-orbit svg {
  stroke: rgba(203, 189, 255, 0.58);
}

.view-journey[data-map-mode="classic"] .journey-token-face {
  border: 0.07rem solid rgba(255, 174, 166, 0.68);
  background: #422f4e;
  color: #ffaaa2;
  box-shadow: 0 0 0.5rem rgba(255, 145, 137, 0.16), inset 0 0.05rem 0 rgba(255, 255, 255, 0.13);
}

.view-journey[data-map-mode="classic"] .journey-hero-action {
  border: 0.07rem solid rgba(219, 255, 151, 0.78);
  background: var(--classic-action);
  color: #173b31;
  box-shadow: 0 0.14rem 0 #648e3d, 0 0 0.7rem rgba(207, 255, 99, 0.12);
}

.view-journey[data-map-mode="classic"] .journey-summary > div {
  border: 0.07rem solid rgba(190, 174, 255, 0.28);
  background: linear-gradient(145deg, rgba(33, 52, 78, 0.96), rgba(12, 28, 45, 0.99));
  color: var(--classic-text);
  box-shadow: 0 0.4rem 0.9rem rgba(0, 8, 22, 0.26), inset 0 0.06rem 0 rgba(239, 235, 255, 0.12);
}

.view-journey[data-map-mode="classic"] .journey-summary > div:nth-child(2) {
  border-color: rgba(255, 157, 149, 0.3);
  background: linear-gradient(145deg, rgba(58, 42, 62, 0.96), rgba(21, 27, 44, 0.99));
}

.view-journey[data-map-mode="classic"] .journey-summary > div:nth-child(3) {
  border-color: rgba(124, 236, 242, 0.3);
  background: linear-gradient(145deg, rgba(24, 56, 70, 0.97), rgba(10, 28, 43, 0.99));
}

.view-journey[data-map-mode="classic"] .journey-summary i {
  border: 0.06rem solid rgba(197, 182, 255, 0.36);
  background: rgba(29, 35, 64, 0.74);
  color: var(--classic-energy-violet);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.11);
}

.view-journey[data-map-mode="classic"] .journey-summary > div:nth-child(2) i {
  border-color: rgba(255, 165, 157, 0.38);
  background: rgba(62, 38, 54, 0.75);
  color: var(--classic-energy-coral);
}

.view-journey[data-map-mode="classic"] .journey-summary > div:nth-child(3) i {
  border-color: rgba(124, 236, 242, 0.38);
  background: rgba(17, 47, 59, 0.75);
  color: var(--classic-energy-cyan);
}

.view-journey[data-map-mode="classic"] .journey-summary span {
  color: var(--classic-text-muted);
}

.view-journey[data-map-mode="classic"] .journey-summary strong {
  color: var(--classic-text);
  text-shadow: none;
}

.view-journey[data-map-mode="classic"] .collection-section-heading {
  border: 0.07rem solid rgba(190, 174, 255, 0.27);
  background: linear-gradient(145deg, rgba(32, 50, 76, 0.96), rgba(12, 27, 44, 0.99));
  color: var(--classic-text);
  box-shadow: 0 0.4rem 0.9rem rgba(0, 8, 22, 0.25), inset 0 0.06rem 0 rgba(239, 235, 255, 0.11);
}

.view-journey[data-map-mode="classic"] .collection-section-heading > span:first-child {
  border: 0.06rem solid rgba(201, 187, 255, 0.4);
  background: rgba(31, 35, 66, 0.82);
  color: var(--classic-energy-violet);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.11);
}

.view-journey[data-map-mode="classic"] .collection-section-heading :is(small, h2) {
  color: var(--classic-text);
}

.view-journey[data-map-mode="classic"] .collection-section-heading small {
  color: var(--classic-text-muted);
}

.view-journey[data-map-mode="classic"] .chapter-block {
  border: 0.07rem solid hsl(var(--chapter-hue) 48% 73% / 0.22);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 100% 0%, hsl(var(--chapter-hue) 65% 60% / 0.09), transparent 9rem),
    linear-gradient(155deg, rgba(27, 45, 68, 0.98), rgba(9, 24, 39, 0.99));
  color: var(--classic-text);
  box-shadow: 0 0.5rem 1.1rem rgba(0, 8, 22, 0.28), inset 0 0.06rem 0 rgba(239, 235, 255, 0.095);
}

.view-journey[data-map-mode="classic"] .chapter-block::before {
  width: 0.24rem;
  height: auto;
  inset: 1rem auto 1rem 0;
  border: 0;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(hsl(var(--chapter-hue) 70% 68%), hsl(var(--chapter-hue) 54% 45%));
  box-shadow: 0 0 0.5rem hsl(var(--chapter-hue) 66% 58% / 0.3);
  rotate: 0deg;
}

.view-journey[data-map-mode="classic"] .chapter-block::after {
  width: 8rem;
  inset: -5.6rem -3rem auto auto;
  border: 0.08rem solid hsl(var(--chapter-hue) 65% 78% / 0.1);
}

.view-journey[data-map-mode="classic"] .chapter-block.is-active {
  border-color: rgba(173, 150, 255, 0.52);
  box-shadow: 0 0 0 0.08rem rgba(173, 150, 255, 0.08), 0 0.55rem 1.2rem rgba(0, 8, 22, 0.32);
}

.view-journey[data-map-mode="classic"] .chapter-block.is-complete {
  border-color: rgba(207, 255, 99, 0.4);
}

.view-journey[data-map-mode="classic"] .chapter-block.is-locked {
  filter: saturate(0.44);
  opacity: 0.7;
}

.view-journey[data-map-mode="classic"] .chapter-number {
  border: 0.07rem solid hsl(var(--chapter-hue) 54% 70% / 0.4);
  background: hsl(var(--chapter-hue) 38% 25% / 0.58);
  color: #f5f2ff;
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.11);
  rotate: 0deg;
}

.view-journey[data-map-mode="classic"] .chapter-number span {
  color: #c4bfd4;
}

.view-journey[data-map-mode="classic"] .chapter-title p,
.view-journey[data-map-mode="classic"] .chapter-stars span {
  color: hsl(var(--chapter-hue) 50% 80% / 0.78);
}

.view-journey[data-map-mode="classic"] .chapter-title h2,
.view-journey[data-map-mode="classic"] .chapter-stars strong {
  color: var(--classic-text);
  text-shadow: none;
}

.view-journey[data-map-mode="classic"] .chapter-progress {
  border: 0.06rem solid rgba(191, 176, 244, 0.16);
  background: rgba(2, 12, 24, 0.46);
  box-shadow: inset 0 0.06rem 0.12rem rgba(0, 6, 16, 0.5);
  accent-color: var(--classic-energy-violet);
}

.view-journey[data-map-mode="classic"] .chapter-progress::-webkit-progress-bar {
  background: rgba(2, 12, 24, 0.46);
}

.view-journey[data-map-mode="classic"] .chapter-progress::-webkit-progress-value,
.view-journey[data-map-mode="classic"] .chapter-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--classic-energy-violet), var(--classic-action));
}

.view-journey[data-map-mode="classic"] .level-button {
  border: 0.07rem solid hsl(var(--chapter-hue) 42% 72% / 0.3);
  background: linear-gradient(145deg, rgba(34, 52, 77, 0.98), rgba(11, 27, 42, 0.99));
  color: #f4f1ff;
  box-shadow: 0 0.3rem 0.65rem rgba(0, 8, 22, 0.32), inset 0 0.05rem 0 rgba(239, 235, 255, 0.1);
}

.view-journey[data-map-mode="classic"] .level-button::after {
  border-color: rgba(193, 179, 243, 0.28);
}

.view-journey[data-map-mode="classic"] .level-button.is-current {
  border-color: rgba(207, 255, 99, 0.72);
  background: linear-gradient(145deg, #3d4066, #263551);
  color: white;
  box-shadow: 0 0 0 0.14rem rgba(207, 255, 99, 0.1), 0 0 0.85rem rgba(173, 150, 255, 0.2), inset 0 0.06rem 0 rgba(245, 242, 255, 0.15);
}

.view-journey[data-map-mode="classic"] .level-button.is-complete:not(.is-current) {
  border-color: rgba(207, 255, 99, 0.4);
  background: linear-gradient(145deg, #304b45, #162f38);
}

.view-journey[data-map-mode="classic"] .level-button.is-locked {
  border-color: rgba(139, 143, 164, 0.2);
  background: linear-gradient(145deg, #172638, #0b1827);
  color: #777d8f;
  box-shadow: inset 0 0.05rem 0 rgba(239, 235, 255, 0.05);
}

.view-journey[data-map-mode="classic"] .level-token-icon {
  border: 0.06rem solid rgba(202, 188, 255, 0.4);
  background: #2b3158;
  color: var(--classic-energy-violet);
  box-shadow: 0 0 0.42rem rgba(173, 150, 255, 0.12), inset 0 0.05rem 0 rgba(255, 255, 255, 0.11);
}

.view-journey[data-map-mode="classic"] .level-button.is-current .level-token-icon {
  border-color: rgba(220, 255, 155, 0.75);
  background: #263e38;
  color: var(--classic-action);
  box-shadow: 0 0 0.48rem rgba(207, 255, 99, 0.19), inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

.view-journey[data-map-mode="classic"] .level-badge {
  border: 0.05rem solid hsl(var(--chapter-hue) 50% 76% / 0.34);
  background: #151f35;
  color: #eeeaff;
  box-shadow: 0 0.1rem 0 rgba(0, 8, 22, 0.52);
}

.view-journey[data-map-mode="classic"] .level-button.is-current .level-badge {
  border-color: rgba(218, 255, 150, 0.7);
  background: var(--classic-action);
  color: #173b31;
}

.view-journey[data-map-mode="classic"] .level-stars {
  color: #aaa6bd;
  text-shadow: none;
}

.view-journey[data-map-mode="classic"] :is(.journey-hero, .level-button):focus-visible,
html[data-play-mode="classic"] .view-play .classic-heading :is(button, a):focus-visible {
  outline: 0.18rem solid var(--classic-action);
  outline-offset: 0.18rem;
}

@media (max-width: 23rem) {
  html[data-play-mode="classic"] .view-play .classic-heading {
    width: calc(100% - 0.6rem);
    gap: 0.42rem;
    padding-inline: 0.58rem;
  }

  html[data-play-mode="classic"] .view-play .classic-heading .score-block {
    min-width: 4.65rem;
    padding-inline: 0.42rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-journey[data-map-mode="classic"] :is(.journey-hero-rays, .journey-hero-spark, .journey-hero-orbit svg, .level-button.is-current) {
    animation: none;
  }
}

@media (forced-colors: active) {
  html[data-play-mode="classic"] .view-play :is(.classic-heading, .classic-heading .score-block),
  html[data-view="journey"][data-play-mode="classic"] :is(.journey-back-game, .journey-back-icon),
  .view-journey[data-map-mode="classic"] :is(.journey-page-heading, .completion-ring, .journey-hero, .journey-summary > div, .collection-section-heading, .chapter-block, .level-button) {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* The collector sheet grows upward from the destination dock, away from captured junk. */
.orbit-junk-spotlight {
  --spotlight-color: #7cecf2;
  --spotlight-deep: #237b91;

  position: absolute;
  z-index: 8;
  display: block;
  width: min(calc(100% - 0.4rem), 21rem);
  height: 8rem;
  height: clamp(8rem, 20dvh, 9.5rem);
  inset: auto auto 0.15rem 50%;
  opacity: 0;
  pointer-events: none;
  translate: -50% 0;
}

.orbit-junk-spotlight[data-recycler="violet"] {
  --spotlight-color: #c49aff;
  --spotlight-deep: #6740a8;
}

.orbit-junk-spotlight.is-visible {
  opacity: 1;
}

.orbit-junk-spotlight-card {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: clamp(5.25rem, 24vw, 6.25rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.14rem 0.7rem;
  padding: 0.68rem 0.78rem;
  overflow: hidden;
  border: 0.08rem solid color-mix(in srgb, var(--spotlight-color) 52%, white);
  border-radius: 0.88rem;
  background:
    radial-gradient(circle at 11% 50%, color-mix(in srgb, var(--spotlight-color) 24%, transparent), transparent 28%),
    linear-gradient(155deg, rgba(15, 53, 67, 0.97), rgba(7, 24, 40, 0.985) 68%, rgba(27, 22, 62, 0.98));
  color: #effeff;
  box-shadow:
    0 0 0 0.12rem color-mix(in srgb, var(--spotlight-color) 12%, transparent),
    0 0.2rem 0 rgba(0, 10, 22, 0.78),
    0 0.58rem 1.25rem rgba(0, 4, 18, 0.52),
    inset 0 0.07rem 0 rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: translateY(0.45rem) scale(0.86);
  will-change: transform, opacity;
}

.orbit-junk-spotlight svg {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(5.25rem, 24vw, 6.25rem);
  aspect-ratio: 1;
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
  overflow: visible;
  filter: drop-shadow(0 0.22rem 0.26rem rgba(0, 9, 22, 0.48)) drop-shadow(0 0 0.32rem color-mix(in srgb, var(--spotlight-color) 42%, transparent));
}

.orbit-junk-spotlight .orbit-oddity.is-aqua .orbit-oddity-body {
  fill: url(#orbit-spotlight-aqua);
}

.orbit-junk-spotlight .orbit-oddity.is-violet .orbit-oddity-body {
  fill: url(#orbit-spotlight-violet);
}

.orbit-junk-spotlight .orbit-oddity-metal {
  fill: url(#orbit-spotlight-metal);
}

.orbit-junk-spotlight .orbit-oddity-glass {
  fill: url(#orbit-spotlight-glass);
}

.orbit-junk-spotlight strong {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  color: #f4ffff;
  font-size: clamp(0.92rem, 4vw, 1.08rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-align: start;
  text-wrap: balance;
}

.orbit-junk-spotlight-route {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  gap: 0.24rem;
  overflow: hidden;
  color: #b7d5da;
  font: 780 0.48rem/1.1 var(--mono);
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.orbit-junk-spotlight-route > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orbit-junk-spotlight-route i {
  width: 0.5rem;
  aspect-ratio: 1;
  border: 0.05rem solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: #69edf0;
  box-shadow: 0 0 0.48rem #69edf0;
}

.orbit-junk-spotlight-route i[data-recycler="violet"] {
  background: #c58aff;
  box-shadow: 0 0 0.48rem #c58aff;
}

.orbit-junk-spotlight-stamp {
  position: relative;
  z-index: 4;
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  margin-block-start: 0.14rem;
  padding: 0.28rem 0.42rem;
  border: 0.09rem solid var(--spotlight-color);
  border-radius: 0.3rem;
  background: rgba(4, 22, 34, 0.88);
  color: var(--spotlight-color);
  font: 900 0.52rem/1.05 var(--mono);
  letter-spacing: 0.05em;
  opacity: 0;
  rotate: -3deg;
  white-space: nowrap;
}

.orbit-junk-spotlight.is-visible .orbit-junk-spotlight-card {
  animation: orbit-junk-spotlight-card 880ms cubic-bezier(.18, .9, .24, 1) both;
}

.orbit-junk-spotlight.is-visible svg {
  animation: orbit-junk-spotlight-art 880ms cubic-bezier(.16, .86, .24, 1) both;
}

.orbit-junk-spotlight.is-visible .orbit-junk-spotlight-stamp {
  animation: orbit-junk-spotlight-stamp 880ms cubic-bezier(.18, 1.3, .3, 1) both;
}

@media (max-width: 22rem) {
  .orbit-junk-spotlight-card {
    grid-template-columns: 4.8rem minmax(0, 1fr);
    column-gap: 0.48rem;
    padding-inline: 0.58rem;
  }

  .orbit-junk-spotlight svg {
    width: 4.8rem;
  }

  .orbit-junk-spotlight-stamp {
    padding-inline: 0.34rem;
    font-size: 0.46rem;
  }
}

@keyframes orbit-junk-spotlight-card {
  0% { opacity: 0; transform: translateY(0.45rem) scale(0.86); }
  16% { opacity: 1; transform: translateY(-0.08rem) scale(1.025); }
  24%, 72% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(-0.32rem) scale(0.98); }
}

@keyframes orbit-junk-spotlight-art {
  0% { opacity: 0; transform: scale(0.46) rotate(-18deg); }
  22% { opacity: 1; transform: scale(1.06) rotate(3deg); }
  32%, 76% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(0.92) rotate(4deg); }
}

@keyframes orbit-junk-spotlight-stamp {
  0%, 30% { opacity: 0; transform: scale(1.7); }
  42%, 74% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-junk-spotlight.is-visible .orbit-junk-spotlight-card,
  .orbit-junk-spotlight.is-visible svg,
  .orbit-junk-spotlight.is-visible .orbit-junk-spotlight-stamp {
    animation: orbit-junk-spotlight-reduced 650ms ease-out both;
  }
}

@keyframes orbit-junk-spotlight-reduced {
  0%, 100% { opacity: 0; }
  12%, 78% { opacity: 1; }
}

@media (forced-colors: active) {
  .orbit-junk-spotlight-card {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Publication-review launch pass: progressive disclosure, FTUE, Daily World, and late-game clarity. */
html[data-meta-tier="0"] .play-resources,
html[data-meta-tier="0"] [data-meta-tier="3"],
html[data-meta-tier="1"] [data-meta-tier="3"],
html[data-meta-tier="2"] [data-meta-tier="3"] {
  display: none !important;
}

html[data-meta-tier="0"] .play-hud {
  grid-template-columns: 3.15rem;
  justify-content: start;
}

.orbit-heading {
  pointer-events: none;
}

.orbit-world-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  margin: 0.28rem 0 0;
  color: rgba(229, 247, 255, 0.72);
  font-size: clamp(0.58rem, 2.3vw, 0.72rem);
  font-weight: 720;
}

.orbit-world-name > span:first-child {
  color: #caff70;
  font-family: var(--mono);
  font-weight: 900;
  letter-spacing: 0.1em;
}

.orbit-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 13.5rem) auto;
  grid-template-areas:
    "sector integrity radar"
    "progress progress progress";
  align-items: center;
  gap: 0.58rem;
  min-height: 3.4rem;
}

.orbit-sector-mechanic {
  grid-area: sector;
  display: grid;
  min-width: 0;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.46rem;
}

.orbit-sector-mechanic > span:first-child {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.08rem solid rgba(184, 251, 255, 0.36);
  border-radius: 0.7rem;
  background: rgba(94, 214, 225, 0.14);
  color: #bffcff;
  font-size: 1rem;
  font-weight: 900;
}

.orbit-sector-mechanic small,
.orbit-sector-mechanic strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orbit-sector-mechanic small {
  color: rgba(221, 245, 250, 0.56);
  font-family: var(--mono);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
}

.orbit-sector-mechanic strong {
  color: #f4ffff;
  font-size: 0.62rem;
  line-height: 1.3;
}

.orbit-progress {
  grid-area: progress;
  width: 100%;
  min-width: 3.4rem;
  height: 0.42rem;
}

.orbit-radar-button {
  grid-area: radar;
  position: relative;
  display: grid;
  min-width: 4rem;
  min-height: 2.8rem;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: 0.28rem;
  padding: 0.34rem 0.52rem;
  border: 0.08rem solid rgba(182, 244, 255, 0.3);
  border-radius: 0.75rem;
  background: rgba(3, 22, 34, 0.72);
  color: #dcfaff;
  box-shadow: inset 0 0.08rem rgba(255, 255, 255, 0.13);
  cursor: pointer;
}

.orbit-radar-button > span {
  font-size: 1.2rem;
}

.orbit-radar-button strong {
  min-width: 1.25rem;
  color: #c9ff63;
  font-family: var(--mono);
  font-size: clamp(1rem, 4vw, 1.22rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.orbit-radar-button.has-hidden-junk {
  border-color: rgba(201, 255, 99, 0.68);
  box-shadow: 0 0 0.8rem rgba(178, 255, 91, 0.18), inset 0 0.08rem rgba(255, 255, 255, 0.13);
}

.orbit-radar-button:focus-visible {
  outline-color: #c9ff63;
}

.orbit-world-character {
  position: absolute;
  z-index: 8;
  inset: auto auto 6.5% 5.5%;
  display: flex;
  max-width: 48%;
  align-items: end;
  gap: 0.34rem;
  pointer-events: none;
}

.orbit-world-face {
  position: relative;
  display: block;
  width: clamp(2.2rem, 9vw, 2.9rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 0.12rem solid rgba(237, 255, 255, 0.78);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 23%, #eaffba 0 7%, #7de1d0 30%, #258ba0 72%, #113e58);
  box-shadow: 0 0.22rem 0 #0e4e66, 0 0.55rem 1.3rem rgba(0, 9, 17, 0.42);
}

.orbit-world-face i {
  position: absolute;
  inset: 38% auto auto 27%;
  width: 0.26rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0a2b3b;
  box-shadow: 1rem 0 #0a2b3b;
}

.orbit-world-face b {
  position: absolute;
  inset: 56% auto auto 35%;
  width: 30%;
  height: 16%;
  border-block-end: 0.14rem solid #0a2b3b;
  border-radius: 50%;
}

.orbit-world-speech {
  margin-block-end: 0.15rem;
  padding: 0.46rem 0.58rem;
  border: 0.08rem solid rgba(216, 251, 255, 0.24);
  border-radius: 0.72rem 0.72rem 0.72rem 0.12rem;
  background: rgba(3, 20, 31, 0.8);
  color: #f1fdff;
  font-size: clamp(0.48rem, 1.9vw, 0.58rem);
  font-weight: 720;
  line-height: 1.35;
  text-wrap: pretty;
  backdrop-filter: blur(0.4rem);
}

.orbit-world-character[data-mood="worried"] .orbit-world-face,
.orbit-world-character[data-mood="lost"] .orbit-world-face {
  filter: saturate(0.65) hue-rotate(-22deg);
}

.orbit-world-character[data-mood="worried"] .orbit-world-face b,
.orbit-world-character[data-mood="lost"] .orbit-world-face b {
  inset-block-start: 65%;
  border-block: 0.14rem solid #0a2b3b;
  border-block-end: 0;
}

.orbit-world-character[data-mood="celebrate"] .orbit-world-face {
  animation: luma-celebrate 700ms cubic-bezier(.2, .85, .22, 1.25) both;
}

@keyframes luma-celebrate {
  0%, 100% { rotate: 0deg; scale: 1; }
  35% { rotate: -9deg; scale: 1.12; }
  67% { rotate: 7deg; scale: 1.04; }
}

.orbit-ftue[hidden] {
  display: none;
}

.orbit-ftue {
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}

.orbit-ftue::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 52%, transparent 0 32%, rgba(0, 9, 19, 0.25) 72%);
  content: "";
}

.orbit-ftue-card {
  position: absolute;
  inset: 1rem 50% auto auto;
  width: min(86%, 20rem);
  padding: 0.78rem 0.9rem;
  border: 0.1rem solid rgba(201, 255, 99, 0.68);
  border-radius: 0.9rem;
  background: rgba(4, 25, 38, 0.94);
  color: #f4ffff;
  box-shadow: 0 0.65rem 1.8rem rgba(0, 4, 12, 0.42), inset 0 0.08rem rgba(255, 255, 255, 0.16);
  translate: 50% 0;
}

.orbit-ftue[data-step="capture"] .orbit-ftue-card {
  inset-block-start: auto;
  inset-block-end: 4.9rem;
}

.view-play .orbit-ftue:not([data-step="capture"]) .orbit-ftue-card {
  inset-block-start: 5.15rem;
}

.orbit-ftue-card :is(small, strong, span) {
  display: block;
}

.orbit-ftue-card small {
  color: #c9ff63;
  font-family: var(--mono);
  font-size: 0.52rem;
  line-height: 1.25;
  letter-spacing: 0.09em;
}

.orbit-ftue-card strong {
  margin-block: 0.2rem 0.16rem;
  font-size: 0.9rem;
  line-height: 1.2;
}

.orbit-ftue-card span {
  color: #e7fbff;
  font-size: 0.76rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.orbit-arrow-hit.is-ftue-target::before,
.orbit-arrow-hit.is-cluster-focus::before {
  opacity: 0.88;
  scale: 1.28;
}

.orbit-stage.is-ftue-active .orbit-arrow-hit:not(.is-ftue-target) {
  pointer-events: none;
}

.orbit-arrow-hit.is-ftue-target {
  z-index: 12;
}

.orbit-arrow-hit.is-ftue-target::before {
  border-color: #c9ff63;
  background: rgba(201, 255, 99, 0.2);
  box-shadow: 0 0 0 0.18rem rgba(201, 255, 99, 0.2), 0 0 1.4rem rgba(201, 255, 99, 0.68);
}

.orbit-arrow-hit.is-cluster-focus::before {
  border-color: #7ff5ff;
  box-shadow: 0 0 1rem rgba(127, 245, 255, 0.56);
}

.orbit-stage.has-dragged .orbit-drag-label,
.orbit-stage.is-ftue-active .orbit-world-character {
  opacity: 0;
}

.orbit-mechanic-marker circle {
  fill: rgba(5, 28, 42, 0.74);
  stroke: rgba(224, 252, 255, 0.72);
  stroke-width: 1.4;
}

.orbit-mechanic-marker path {
  fill: none;
  stroke: #e9ffff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.orbit-mechanic-marker.is-frozen circle {
  fill: rgba(102, 221, 255, 0.28);
  stroke: #b8f7ff;
}

.orbit-mechanic-marker.is-windowed circle {
  stroke: #ffc766;
  stroke-dasharray: 5 3;
}

.orbit-mechanic-marker.is-windowed.is-window-open circle {
  fill: rgba(201, 255, 99, 0.26);
  stroke: #c9ff63;
}

.orbit-mechanic-marker.is-portal-locked circle {
  fill: rgba(161, 119, 255, 0.25);
  stroke: #d5c2ff;
}

.orbit-arrow-hit.is-frozen::before {
  border-color: #a9f2ff;
}

.orbit-arrow-hit.is-portal-locked::before {
  border-color: #d3bfff;
}

.orbit-vortex-capacity {
  fill: white;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(7, 25, 38, 0.85);
  stroke-width: 2px;
  text-anchor: middle;
}

.orbit-whirlpool.is-cooling {
  filter: grayscale(0.4) brightness(0.78);
}

.orbit-whirlpool.is-cooling .orbit-vortex-pool-rim {
  stroke-dasharray: 3 4;
}

.orbit-whirlpool.is-moving .orbit-vortex-aura {
  stroke-dasharray: 5 4;
}

.daily-exit-button {
  width: 100%;
  min-height: 2.75rem;
  margin-block: 0.2rem 0.55rem;
  border: 0.08rem solid rgba(181, 240, 247, 0.3);
  border-radius: 0.8rem;
  background: rgba(5, 28, 42, 0.72);
  color: #effcff;
  font-size: 0.62rem;
  font-weight: 820;
  cursor: pointer;
}

.orbit-rescue-button {
  width: 100%;
  min-height: 2.65rem;
  margin-block-start: 0.45rem;
  border: 0.08rem solid rgba(183, 245, 255, 0.52);
  border-radius: 0.75rem;
  background: rgba(16, 56, 76, 0.92);
  color: white;
  font-size: 0.58rem;
  font-weight: 850;
  cursor: pointer;
}

.orbit-rescue-button b {
  color: #c9ff63;
}

.orbit-rescue-note {
  display: block;
  margin-block-start: 0.35rem;
  color: rgba(230, 246, 250, 0.64);
  font-size: 0.45rem;
  line-height: 1.35;
}

.daily-world-card,
.season-route-card {
  position: relative;
  display: grid;
  gap: 0.72rem;
  margin-block-start: 0.85rem;
  padding: 1rem;
  overflow: hidden;
  border: 0.08rem solid #b7cbd4;
  border-radius: 1rem;
  background: #f7fbfc;
  color: #173b4e;
  box-shadow: 0 0.16rem 0 #91a8b4, 0 0.45rem 0.9rem rgba(18, 48, 64, 0.1);
}

.daily-world-card {
  grid-template-columns: auto minmax(0, 1fr);
}

.daily-world-orbit {
  display: grid;
  width: 3.35rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #c9ff63, #57d7c5 56%, #397bbd);
  color: #123b4f;
  box-shadow: inset 0 0.12rem white, 0 0.2rem 0 #377e91;
  font-size: 1.5rem;
  font-weight: 900;
}

.daily-world-card :is(h3, p),
.season-route-card :is(h3, p) {
  margin: 0;
}

.daily-world-card small,
.season-route-card small {
  color: #50707e;
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.07em;
}

.daily-world-card h3,
.season-route-card h3 {
  font-size: 1.1rem;
}

.daily-world-card p,
.season-route-card p {
  margin-block-start: 0.2rem;
  color: #516b78;
  font-size: 0.62rem;
  line-height: 1.45;
}

#daily-world-play {
  min-height: 2.8rem;
  grid-column: 1 / -1;
  border: 0;
  border-radius: 0.78rem;
  background: #214d65;
  color: white;
  box-shadow: 0 0.15rem 0 #102d3e;
  font-size: 0.66rem;
  font-weight: 850;
  cursor: pointer;
}

#daily-world-share {
  min-height: 2.45rem;
  grid-column: 1 / -1;
  border: 0.08rem solid #8faab5;
  border-radius: 0.72rem;
  background: white;
  color: #214d65;
  font-size: 0.58rem;
  font-weight: 820;
  cursor: pointer;
}

#daily-world-share[hidden] {
  display: none;
}

.daily-personal-best {
  grid-column: 1 / -1;
  padding: 0.5rem 0.62rem;
  border-radius: 0.66rem;
  background: #e5f1f3;
  color: #274c5e;
  font-size: 0.55rem;
  font-weight: 780;
}

.daily-leaderboard {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.daily-leaderboard li {
  display: grid;
  min-height: 2rem;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.38rem;
  padding: 0.3rem 0.44rem;
  border-radius: 0.55rem;
  background: white;
  color: #315261;
  font-size: 0.53rem;
}

.daily-leaderboard li.is-player {
  background: #efffcf;
  color: #254d3c;
}

.daily-leaderboard li > span {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-leaderboard li > time {
  font-family: var(--mono);
  font-weight: 900;
}

.daily-leaderboard li > small {
  color: #69818c;
  letter-spacing: 0;
}

.season-route-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}

.season-route-heading > span {
  display: grid;
  width: 2.5rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.72rem;
  background: #243f58;
  color: #c9ff63;
  font-size: 1.1rem;
}

.season-route-heading > strong {
  padding: 0.35rem 0.48rem;
  border-radius: 99px;
  background: #e4eef1;
  color: #284d5e;
  font-family: var(--mono);
  font-size: 0.48rem;
}

.season-route-card > progress {
  width: 100%;
  height: 0.58rem;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  accent-color: #57c7a9;
}

.cosmetic-shop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.cosmetic-item {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem;
  border: 0.08rem solid #c2d0d6;
  border-radius: 0.75rem;
  background: white;
  color: #234656;
  cursor: pointer;
}

.cosmetic-item > span {
  display: grid;
  width: 2.15rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cosmetic-color) 28%, white);
  color: var(--cosmetic-color);
  font-size: 1rem;
}

.cosmetic-item strong {
  font-size: 0.54rem;
}

.cosmetic-item small {
  color: #597481;
  font-size: 0.4rem;
  letter-spacing: 0.03em;
}

.cosmetic-item.is-equipped {
  border-color: var(--cosmetic-color);
  background: color-mix(in srgb, var(--cosmetic-color) 7%, white);
  box-shadow: inset 0 0 0 0.08rem color-mix(in srgb, var(--cosmetic-color) 24%, transparent);
}

.cosmetic-item.is-claimable {
  border-color: #65a95d;
  background: #f1ffdc;
  box-shadow: 0 0 0 0.1rem rgba(118, 188, 92, 0.17), 0 0.3rem 0.65rem rgba(62, 112, 71, 0.12);
}

.cosmetic-item[aria-disabled="true"] {
  opacity: 0.58;
}

.world-face-card-wrap {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.world-face-card-wrap .world-face-card {
  width: 100%;
}

.world-face-recycle {
  min-height: 2.15rem;
  border: 0.08rem solid #c3d2d8;
  border-radius: 0.62rem;
  background: #f4f8f9;
  color: #385966;
  font-size: 0.46rem;
  font-weight: 800;
  cursor: pointer;
}

.world-face-recycle strong {
  color: #3c7b42;
}

html[data-world-theme="sunset"] #orbit-sphere {
  filter: hue-rotate(112deg) saturate(1.12) brightness(1.04);
}

html[data-world-theme="midnight"] #orbit-sphere {
  filter: hue-rotate(235deg) saturate(0.82) brightness(0.82);
}

html[data-junk-theme="mint"] .orbit-oddity-cargo {
  filter: hue-rotate(-28deg) saturate(0.85) brightness(1.14);
}

html[data-junk-theme="candy"] .orbit-oddity-cargo {
  filter: hue-rotate(96deg) saturate(1.22) brightness(1.06);
}

.toast {
  inset: auto 50% calc(max(5.1rem, env(safe-area-inset-bottom) + 4.5rem)) auto;
  transform: translate(50%, 130%);
}

.toast.is-visible {
  transform: translate(50%, 0);
}

@media (max-width: 23rem) {
  .orbit-topline {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "sector radar"
      "integrity integrity"
      "progress progress";
    gap: 0.4rem;
  }

  .orbit-progress {
    position: absolute;
    inset: auto 0 -0.35rem;
    width: 100%;
  }

  .orbit-sector-mechanic {
    grid-template-columns: 1.7rem minmax(0, 1fr);
  }

  .orbit-sector-mechanic > span:first-child {
    width: 1.7rem;
    border-radius: 0.55rem;
  }

  .orbit-radar-button {
    min-width: 3rem;
  }

  .orbit-echo-voice {
    inset-block-start: 7.35rem;
    width: 88%;
  }

  .orbit-world-character {
    max-width: 56%;
  }

  .orbit-world-speech {
    padding: 0.36rem 0.43rem;
    font-size: 0.46rem;
  }

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

  .daily-leaderboard li {
    grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  }

  .daily-leaderboard li > small {
    display: none;
  }

  .classic-game-panel.is-dense-board .game-heading {
    margin-block: 0.4rem 0.48rem;
  }

  .classic-game-panel.is-dense-board .game-heading h1 {
    font-size: 1.45rem;
  }

  .classic-game-panel.is-dense-board .game-card {
    padding: 0.72rem 0.7rem 0.82rem;
  }

  .classic-game-panel.is-dense-board .board-wrap {
    width: min(100%, calc(100svh - 17.5rem));
    min-width: 15rem;
    margin-inline: auto;
    margin-block: 0.48rem;
  }

  .classic-game-panel.is-dense-board .game-controls {
    gap: 0.34rem;
  }
}

@media (max-height: 40rem) {
  .orbit-world-character {
    inset-block-end: 4.2%;
  }

  .orbit-world-speech {
    display: none;
  }

  .orbit-ftue-card {
    padding: 0.62rem 0.72rem;
  }

  .orbit-ftue[data-step="capture"] .orbit-ftue-card {
    inset-block-end: 3.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-world-character[data-mood="celebrate"] .orbit-world-face,
  .orbit-arrow-hit.is-ftue-target::before,
  .orbit-arrow-hit.is-cluster-focus::before,
  .orbit-echo-depth-rings,
  .orbit-echo-figure,
  .orbit-echo-nodes circle,
  .orbit-echo-core {
    animation: none !important;
  }

  #orbit-echo-layer,
  .orbit-echo-voice {
    transition: none;
  }
}

@media (forced-colors: active) {
  .orbit-sector-mechanic,
  .orbit-radar-button,
  .orbit-ftue-card,
  .daily-world-card,
  .season-route-card,
  .cosmetic-item,
  .daily-exit-button,
  .orbit-rescue-button {
    border: 0.12rem solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Vortex mission banner: high-contrast, toy-like, and score-first. */
html[data-play-mode="orbit"] .view-play .orbit-heading {
  --orbit-pop-ease: cubic-bezier(0.18, 1.42, 0.34, 1);

  position: relative;
  isolation: isolate;
  display: grid;
  width: min(calc(100% - 1rem), 34rem);
  max-width: none;
  min-height: 4.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.38rem, 2vw, 0.8rem);
  margin: 0.08rem auto 0.22rem;
  padding: 0.48rem 0.55rem 0.56rem 0.78rem;
  overflow: hidden;
  border: 0.13rem solid rgba(255, 255, 255, 0.94);
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 8% 8%, rgba(179, 255, 244, 0.72), transparent 32%),
    radial-gradient(circle at 79% 115%, rgba(166, 96, 255, 0.72), transparent 45%),
    linear-gradient(145deg, #29d9e3 0%, #2582e9 50%, #674bd5 100%);
  box-shadow:
    0 0.34rem 0 #244e9c,
    0 0.78rem 1.25rem rgba(0, 11, 39, 0.34),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.88),
    inset 0 -0.14rem 0 rgba(26, 32, 111, 0.26);
  backdrop-filter: none;
  animation: orbit-hero-drop 520ms var(--orbit-pop-ease) both;
}

html[data-play-mode="orbit"] .view-play .orbit-heading::before {
  position: absolute;
  z-index: -1;
  height: 46%;
  inset: 0.12rem 0.34rem auto;
  border-radius: 1rem 1rem 55% 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.03));
  content: "";
  pointer-events: none;
}

html[data-play-mode="orbit"] .view-play .orbit-heading::after {
  position: absolute;
  z-index: -1;
  width: 5rem;
  aspect-ratio: 1;
  inset: -2.2rem auto auto 42%;
  border: 0.45rem solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 0.6rem rgba(255, 255, 255, 0.055);
  content: "";
}

.orbit-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

html[data-play-mode="orbit"] .view-play .orbit-heading .eyebrow {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.26rem;
  margin: 0 0 0.17rem;
  padding: 0.16rem 0.42rem;
  overflow: hidden;
  border: 0.07rem solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: linear-gradient(145deg, #f4ffba, #cfff5d 62%, #91d83d);
  color: #1b4a49;
  box-shadow: 0 0.12rem 0 #579755, inset 0 0.06rem 0 white;
  font-size: clamp(0.48rem, 2.1vw, 0.64rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-play-mode="orbit"] .view-play .orbit-heading .eyebrow span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

html[data-play-mode="orbit"] .view-play .orbit-heading .eyebrow span:first-child {
  font-size: 0.78rem;
}

html[data-play-mode="orbit"] .view-play .orbit-heading h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  color: white;
  font-size: clamp(1.08rem, 4.7vw, 1.55rem);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-overflow: ellipsis;
  text-shadow: 0 0.12rem 0 #243e92, 0 0.34rem 0.7rem rgba(10, 32, 98, 0.44);
  white-space: nowrap;
}

.orbit-hero-orbit {
  position: absolute;
  z-index: 0;
  width: 6.5rem;
  aspect-ratio: 1;
  inset: -1.3rem auto auto -1.5rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  rotate: -18deg;
  transform: scaleY(0.42);
  box-shadow: 0 0 0 0.17rem rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.orbit-hero-spark {
  position: absolute;
  z-index: 1;
  color: #fff485;
  font-size: 0.72rem;
  line-height: 1;
  text-shadow: 0 0 0.42rem white;
  pointer-events: none;
}

.orbit-hero-spark.is-one {
  inset: 0.38rem auto auto 46%;
  rotate: 12deg;
}

.orbit-hero-spark.is-two {
  inset: auto auto 0.3rem 34%;
  color: #bafff0;
  font-size: 0.48rem;
  rotate: 35deg;
}

html[data-play-mode="orbit"] .view-play .orbit-recycled-score {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: clamp(7.5rem, 31vw, 9.6rem);
  min-height: 3.18rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.32rem 0.48rem 0.36rem 0.36rem;
  overflow: visible;
  border: 0.12rem solid white;
  border-radius: 1.04rem;
  background:
    radial-gradient(circle at 18% 9%, rgba(255, 255, 255, 0.86), transparent 0.42rem),
    linear-gradient(145deg, #fff79a 0%, #d9ff57 50%, #80df4a 100%);
  color: #153f51;
  box-shadow:
    0 0.23rem 0 #318a59,
    0 0.5rem 0.8rem rgba(14, 22, 82, 0.3),
    inset 0 0.09rem 0 white;
}

.orbit-recycled-icon {
  display: grid;
  width: 2.05rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 0.1rem solid white;
  border-radius: 0.72rem;
  background: linear-gradient(145deg, #55e7ec, #327ce0 58%, #6a3fc2);
  color: white !important;
  box-shadow: 0 0.17rem 0 #224f9f, inset 0 0.08rem 0 rgba(255, 255, 255, 0.84);
  font-family: var(--sans) !important;
  font-size: 1.32rem !important;
  font-weight: 950;
  letter-spacing: 0 !important;
  line-height: 1;
  text-shadow: 0 0.1rem 0 #294a9c;
  rotate: -5deg;
}

.orbit-recycled-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

html[data-play-mode="orbit"] .view-play .orbit-recycled-label {
  color: #245a4b;
  font-size: clamp(0.43rem, 1.8vw, 0.56rem);
  font-weight: 950;
  letter-spacing: 0.09em;
  line-height: 1;
}

html[data-play-mode="orbit"] .view-play .orbit-recycled-copy strong {
  display: flex;
  align-items: baseline;
  color: #143c54;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-shadow: 0 0.06rem 0 rgba(255, 255, 255, 0.82);
}

html[data-play-mode="orbit"] .view-play #orbit-captured {
  color: #153a72;
  font-size: clamp(1.55rem, 7vw, 2.08rem);
  font-weight: 950;
  letter-spacing: -0.08em;
}

html[data-play-mode="orbit"] .view-play :is(.orbit-score-divider, #orbit-total) {
  color: #34765f;
  font-size: clamp(0.68rem, 2.8vw, 0.88rem);
  font-weight: 950;
  letter-spacing: -0.03em;
}

.orbit-score-divider {
  margin-inline: 0.08rem 0.05rem;
  opacity: 0.72;
}

.orbit-score-flare {
  position: absolute;
  width: 0.38rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0.5rem #fff681;
  opacity: 0;
  pointer-events: none;
}

.orbit-score-flare.is-one { inset: -0.22rem 1rem auto auto; }
.orbit-score-flare.is-two { inset: auto 42% -0.28rem auto; background: #94fff2; }
.orbit-score-flare.is-three { inset: 45% auto auto -0.3rem; background: #fff56d; }

.orbit-recycled-score.is-counting #orbit-captured {
  animation: orbit-score-pop 520ms var(--orbit-pop-ease) both;
}

.orbit-recycled-score.is-counting .orbit-recycled-icon {
  animation: orbit-recycle-spin 560ms var(--orbit-pop-ease) both;
}

.orbit-recycled-score.is-counting .orbit-score-flare {
  animation: orbit-score-flare 620ms ease-out both;
}

.orbit-recycled-score.is-counting .orbit-score-flare.is-two { animation-delay: 45ms; }
.orbit-recycled-score.is-counting .orbit-score-flare.is-three { animation-delay: 90ms; }

@supports (animation-timing-function: linear(0, 1)) {
  html[data-play-mode="orbit"] .view-play .orbit-heading {
    --orbit-pop-ease: linear(0, 0.47 5%, 0.86 10%, 1.12 17%, 1.21 23%, 1.18 30%, 1.05 45%, 0.98 61%, 1.01 78%, 1);
  }
}

@keyframes orbit-hero-drop {
  from { opacity: 0; transform: translateY(-0.8rem) scale(0.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes orbit-score-pop {
  0% { filter: brightness(1); transform: scale(0.72) rotate(-7deg); }
  38% { filter: brightness(1.3); transform: scale(1.22) rotate(3deg); }
  100% { filter: brightness(1); transform: scale(1) rotate(0); }
}

@keyframes orbit-recycle-spin {
  0% { transform: scale(0.82) rotate(-28deg); }
  65% { transform: scale(1.12) rotate(18deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes orbit-score-flare {
  0% { opacity: 0; transform: scale(0.2); }
  38% { opacity: 1; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(0.5) translateY(-0.65rem); }
}

@media (max-width: 23rem), (max-height: 40rem) {
  html[data-play-mode="orbit"] .view-play .orbit-heading {
    min-height: 3.75rem;
    gap: 0.28rem;
    padding: 0.38rem 0.42rem 0.43rem 0.62rem;
    border-radius: 1.12rem;
  }

  html[data-play-mode="orbit"] .view-play .orbit-heading h1 {
    font-size: clamp(0.92rem, 4.5vw, 1.12rem);
  }

  html[data-play-mode="orbit"] .view-play .orbit-recycled-score {
    min-width: 7.15rem;
    min-height: 2.82rem;
    gap: 0.32rem;
    padding: 0.27rem 0.35rem 0.3rem 0.3rem;
  }

  .orbit-recycled-icon {
    width: 1.78rem;
    font-size: 1.12rem !important;
  }

  html[data-play-mode="orbit"] .view-play #orbit-captured {
    font-size: 1.48rem;
  }
}

@media (max-height: 40rem) {
  html[data-play-mode="orbit"] .view-play .orbit-heading {
    min-height: 3rem;
    padding: 0.24rem 0.34rem 0.27rem 0.52rem;
  }

  html[data-play-mode="orbit"] .view-play .orbit-heading .eyebrow {
    margin-block-end: 0.1rem;
    padding: 0.11rem 0.34rem;
    font-size: 0.41rem;
  }

  html[data-play-mode="orbit"] .view-play .orbit-heading h1 {
    font-size: 0.88rem;
  }

  html[data-play-mode="orbit"] .view-play .orbit-recycled-score {
    min-width: 6.85rem;
    min-height: 2.26rem;
    padding: 0.17rem 0.3rem 0.2rem 0.25rem;
    border-radius: 0.84rem;
  }

  .orbit-recycled-icon {
    width: 1.52rem;
    border-radius: 0.55rem;
    font-size: 0.98rem !important;
  }

  html[data-play-mode="orbit"] .view-play #orbit-captured {
    font-size: 1.28rem;
  }

  html[data-play-mode="orbit"] .view-play .orbit-recycled-label {
    font-size: 0.38rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-play-mode="orbit"] .view-play .orbit-heading,
  .orbit-recycled-score.is-counting :is(#orbit-captured, .orbit-recycled-icon, .orbit-score-flare) {
    animation: none;
  }
}

@media (forced-colors: active) {
  html[data-play-mode="orbit"] .view-play .orbit-heading,
  html[data-play-mode="orbit"] .view-play .orbit-recycled-score,
  .orbit-recycled-icon {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText !important;
    box-shadow: none;
  }
}

@keyframes hint-pulse {
  50% { box-shadow: 0 0 0 0.55rem rgba(201, 255, 99, 0); transform: scale(1.1); }
}

@keyframes blocked-shake {
  20% { transform: translate(calc(-50% - 0.35rem), -50%); }
  40% { transform: translate(calc(-50% + 0.35rem), -50%); }
  60% { transform: translate(calc(-50% - 0.2rem), -50%); }
  80% { transform: translate(calc(-50% + 0.2rem), -50%); }
}

.board-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
}

.board-message.is-visible {
  animation: message-pop 800ms ease both;
}

@keyframes message-pop {
  0%, 100% { opacity: 0; transform: scale(0.9); }
  18%, 70% { opacity: 1; transform: scale(1); }
}

.game-tip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.65rem;
  padding: 0.65rem 0.8rem;
  border-radius: 1rem;
  background: #f2f0e9;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.35;
}

.tip-icon {
  display: grid;
  width: 1.6rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--lime);
  color: var(--ink);
}

.game-controls {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 0.7rem;
  margin-block-start: 1rem;
}

.control-button {
  display: flex;
  min-height: 3.3rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}

.control-button svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.control-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.control-button kbd {
  display: none;
  padding: 0.1rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.25rem;
  font-family: var(--mono);
  font-size: 0.56rem;
}

.bottom-nav {
  position: fixed;
  z-index: 30;
  inset: auto 0 0;
  display: grid;
  width: min(100%, 32rem);
  grid-template-columns: repeat(4, 1fr);
  margin-inline: auto;
  padding: 0.55rem 0.65rem max(0.7rem, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
  background: color-mix(in srgb, #fbf9f4 92%, transparent);
  backdrop-filter: blur(22px);
}

.nav-item {
  position: relative;
  display: flex;
  min-height: 3.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: #596b68;
  font-size: 0.61rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-item svg {
  width: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nav-item.is-active {
  color: var(--ink);
}

.nav-item.is-active::before {
  position: absolute;
  inset: -0.56rem 27% auto;
  height: 0.18rem;
  border-radius: 99px;
  background: var(--ink);
  content: "";
}

.section-heading {
  align-items: center;
  margin-block-end: 1.5rem;
}

.completion-ring {
  --percent: 0deg;
  position: relative;
  display: grid;
  width: 3.8rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--lime-dark) var(--percent), var(--paper-deep) 0);
  box-shadow: inset 0 0 0 1px rgba(19, 42, 51, 0.04), 0 10px 24px rgba(19, 42, 51, 0.08);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.completion-ring::before {
  position: absolute;
  width: 2.85rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  content: "";
}

.completion-ring strong {
  position: relative;
}

.journey-hero {
  --chapter-hue: 195;
  position: relative;
  display: grid;
  width: 100%;
  min-height: 10.2rem;
  grid-template-columns: minmax(0, 1fr) 5.4rem;
  align-items: center;
  gap: 0.8rem;
  margin-block-end: 0.8rem;
  padding: 1.25rem 1.2rem 3.25rem;
  overflow: hidden;
  border: 0;
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 82% 18%, hsl(var(--chapter-hue) 82% 67% / 0.35), transparent 9rem),
    linear-gradient(135deg, #10272f, #1e4149);
  color: white;
  box-shadow: 0 20px 45px rgba(19, 42, 51, 0.2);
  text-align: start;
  cursor: pointer;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.journey-hero::before,
.journey-hero::after {
  position: absolute;
  aspect-ratio: 1;
  border: 1px solid hsl(var(--chapter-hue) 80% 80% / 0.18);
  border-radius: 50%;
  content: "";
}

.journey-hero::before {
  width: 12rem;
  inset: -6rem -3rem auto auto;
}

.journey-hero::after {
  width: 7rem;
  inset: auto 1rem -5rem auto;
}

.journey-hero:hover {
  box-shadow: 0 24px 52px rgba(19, 42, 51, 0.26);
  transform: translateY(-0.12rem);
}

.journey-hero-copy,
.journey-hero-orbit,
.journey-hero-action {
  position: relative;
  z-index: 1;
}

.journey-hero-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.journey-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-end: 0.65rem;
  color: hsl(var(--chapter-hue) 90% 80%);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.journey-hero-eyebrow > span {
  width: 0.45rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0.28rem rgba(201, 255, 99, 0.12);
}

.journey-hero-copy > strong {
  font-size: clamp(1.45rem, 7vw, 2rem);
  letter-spacing: -0.045em;
}

.journey-hero-copy > small {
  max-width: 15rem;
  margin-block-start: 0.3rem;
  overflow: hidden;
  color: #b8cacb;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-hero-orbit {
  display: grid;
  width: 5.25rem;
  aspect-ratio: 1;
  place-items: center;
}

.journey-hero-orbit > span {
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: hsl(var(--chapter-hue) 78% 72%);
  color: var(--ink);
  box-shadow: 0 0 0 0.45rem hsl(var(--chapter-hue) 60% 80% / 0.12);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
}

.journey-hero-orbit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  fill: none;
  stroke: hsl(var(--chapter-hue) 80% 82% / 0.52);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.journey-hero-action {
  position: absolute;
  inset: auto auto 1.05rem 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--lime);
  font-size: 0.68rem;
  font-weight: 800;
}

.journey-hero-action > span {
  font-size: 1rem;
  transition: transform 180ms ease;
}

.journey-hero:hover .journey-hero-action > span {
  transform: translateX(0.2rem);
}

.journey-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-block-end: 1.35rem;
}

.journey-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.8rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 18px rgba(19, 42, 51, 0.04);
}

.journey-summary > div + div {
  border-inline-start: 1px solid var(--line);
}

.journey-summary strong {
  font-family: var(--mono);
  font-size: 0.78rem;
}

.chapter-block {
  --chapter-hue: 195;
  position: relative;
  margin-block-end: 1rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid hsl(var(--chapter-hue) 28% 50% / 0.18);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 100% 0%, hsl(var(--chapter-hue) 75% 72% / 0.16), transparent 8rem),
    rgba(255, 255, 255, 0.58);
  box-shadow: 0 12px 28px rgba(19, 42, 51, 0.055);
}

.chapter-block::before {
  position: absolute;
  width: 0.24rem;
  inset: 1rem auto 1rem 0;
  border-radius: 0 99px 99px 0;
  background: hsl(var(--chapter-hue) 62% 54%);
  content: "";
}

.chapter-block.is-active {
  border-color: hsl(var(--chapter-hue) 56% 42% / 0.48);
  box-shadow: 0 16px 34px hsl(var(--chapter-hue) 35% 30% / 0.13);
}

.chapter-block.is-complete::before {
  background: var(--lime-dark);
}

.chapter-block:nth-child(n + 4) {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 15rem;
}

.chapter-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.7rem;
}

.chapter-number {
  display: flex;
  width: 3rem;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--chapter-hue) 50% 42% / 0.22);
  border-radius: 0.95rem;
  background: hsl(var(--chapter-hue) 70% 88% / 0.58);
}

.chapter-number span,
.chapter-title p,
.chapter-stars span {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.06em;
}

.chapter-number strong {
  margin-block-start: 0.1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.chapter-title {
  min-width: 0;
}

.chapter-title p {
  margin-block-end: 0.18rem;
  overflow: hidden;
  color: hsl(var(--chapter-hue) 44% 35%);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.chapter-title h2 {
  margin: 0;
  overflow: hidden;
  font-size: 0.9rem;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-stars {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chapter-stars strong {
  font-family: var(--mono);
  font-size: 0.82rem;
}

.chapter-progress {
  display: block;
  width: 100%;
  height: 0.35rem;
  margin-block-end: 0.85rem;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: hsl(var(--chapter-hue) 18% 50% / 0.12);
  accent-color: hsl(var(--chapter-hue) 60% 48%);
}

.chapter-progress::-webkit-progress-bar {
  border-radius: 99px;
  background: hsl(var(--chapter-hue) 18% 50% / 0.12);
}

.chapter-progress::-webkit-progress-value {
  border-radius: 99px;
  background: hsl(var(--chapter-hue) 60% 48%);
}

.chapter-progress::-moz-progress-bar {
  border-radius: 99px;
  background: hsl(var(--chapter-hue) 60% 48%);
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}

.level-button {
  position: relative;
  display: flex;
  aspect-ratio: 0.92;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding-block-start: 0.55rem;
  border: 1px solid hsl(var(--chapter-hue) 25% 45% / 0.17);
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 7px 15px rgba(19, 42, 51, 0.045);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.level-button:hover:not(:disabled) {
  border-color: hsl(var(--chapter-hue) 48% 42% / 0.5);
  box-shadow: 0 10px 20px hsl(var(--chapter-hue) 30% 35% / 0.12);
  transform: translateY(-0.1rem);
}

.level-button strong {
  font-family: var(--mono);
  font-size: 0.85rem;
}

.level-stars {
  min-height: 0.75rem;
  color: var(--gold);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.level-badge {
  position: absolute;
  inset: 0.42rem auto auto 50%;
  min-height: 0;
  padding: 0.12rem 0.3rem;
  border-radius: 99px;
  background: hsl(var(--chapter-hue) 45% 90%);
  color: hsl(var(--chapter-hue) 45% 28%);
  font-family: var(--mono);
  font-size: 0.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  transform: translateX(-50%);
}

.level-button.is-complete {
  background: hsl(var(--chapter-hue) 60% 94% / 0.88);
}

.level-button.is-current {
  border-color: hsl(var(--chapter-hue) 55% 38%);
  background:
    radial-gradient(circle at 80% 20%, white, transparent 3.5rem),
    hsl(var(--chapter-hue) 74% 75%);
  color: var(--ink);
  box-shadow: 0 12px 24px hsl(var(--chapter-hue) 40% 30% / 0.2);
}

.level-button.is-current .level-badge {
  background: var(--ink);
  color: var(--lime);
}

.level-button.is-locked {
  border-style: dashed;
  background: hsl(var(--chapter-hue) 10% 94% / 0.58);
  color: #8c9693;
  cursor: not-allowed;
}

.level-button:disabled {
  opacity: 1;
}

.achievement-count {
  display: flex;
  align-items: baseline;
  color: var(--ink-soft);
}

.achievement-count strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.6rem;
}

.achievement-count span {
  font-family: var(--mono);
  font-size: 0.72rem;
}

.featured-achievement {
  position: relative;
  display: flex;
  min-height: 8rem;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1rem;
  padding: 1.2rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow);
}

.featured-achievement::after {
  position: absolute;
  width: 8rem;
  aspect-ratio: 1;
  inset: -3rem -2rem auto auto;
  border: 1px solid rgba(201, 255, 99, 0.25);
  border-radius: 50%;
  content: "";
}

.featured-orbit {
  display: grid;
  width: 4.2rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(201, 255, 99, 0.4);
  border-radius: 50%;
}

.featured-orbit span {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-size: 1.3rem;
}

.featured-achievement p {
  margin-block-end: 0.3rem;
  color: var(--lime);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.featured-achievement h2 {
  margin-block-end: 0.25rem;
  font-size: 1.1rem;
}

.featured-achievement > div:last-child > span {
  color: #b8c1bf;
  font-size: 0.68rem;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.achievement-card {
  min-height: 10.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.55);
}

.achievement-card:nth-child(n + 7) {
  content-visibility: auto;
  contain-intrinsic-size: auto 10.2rem;
}

.achievement-card.is-locked {
  filter: grayscale(1);
  opacity: 0.55;
}

.achievement-badge {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  margin-block-end: 1rem;
  place-items: center;
  border-radius: 0.9rem;
  background: var(--badge, var(--lime));
  font-size: 1.05rem;
}

.achievement-card h2 {
  margin-block-end: 0.35rem;
  font-size: 0.82rem;
}

.achievement-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.65rem;
  line-height: 1.45;
}

.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 1.2rem 1.35rem;
  text-align: center;
}

.profile-avatar {
  display: grid;
  width: 4.8rem;
  aspect-ratio: 1;
  margin-block-end: 0.9rem;
  place-items: center;
  border: 0.45rem solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 14px 34px rgba(51, 86, 112, 0.17);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
}

.profile-hero h1 {
  margin-block-end: 0.55rem;
}

.profile-hero > p:not(.eyebrow) {
  max-width: 19rem;
  margin-block-end: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.55;
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 0.95rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.button-dark {
  background: var(--ink);
  color: white;
}

.button-passkey {
  border: 0.1rem solid #9cecf0;
  background: linear-gradient(180deg, #e7fdff, #bceef3);
  color: #153b55;
  box-shadow: 0 0.2rem 0 #78bdc8, inset 0 1px 0 white;
}

.button-lime {
  background: var(--lime);
  color: var(--ink);
}

.button-soft {
  background: var(--paper-deep);
  color: var(--ink);
}

.button-danger {
  background: var(--coral);
  color: #341711;
}

.button-full {
  width: 100%;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.stat-grid article {
  min-height: 8.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.56);
}

.stat-grid strong {
  display: block;
  margin-block-start: 0.75rem;
  font-family: var(--mono);
  font-size: 1.25rem;
}

.stat-grid p {
  margin: 0.18rem 0 0;
  color: var(--ink-soft);
  font-size: 0.66rem;
}

.stat-icon {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.65rem;
  font-size: 0.8rem;
}

.stat-icon-coral { background: rgba(255, 119, 95, 0.25); }
.stat-icon-lime { background: rgba(201, 255, 99, 0.55); }
.stat-icon-blue { background: rgba(130, 181, 255, 0.38); }
.stat-icon-gold { background: rgba(243, 199, 85, 0.32); }

.settings-card {
  margin-block-start: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, 0.56);
}

.settings-card h2 {
  margin: 0.25rem 0 0.65rem;
  font-size: 0.8rem;
}

.setting-row {
  display: grid;
  width: 100%;
  min-height: 4rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.setting-row[hidden],
.form-field[hidden] {
  display: none;
}

.setting-row + .setting-row {
  border-block-start: 1px solid var(--line);
}

.setting-icon {
  display: grid;
  width: 2.3rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.8rem;
  background: var(--paper-deep);
}

.setting-row strong,
.setting-row small {
  display: block;
}

.setting-row strong {
  font-size: 0.72rem;
}

.setting-row small {
  margin-block-start: 0.18rem;
  color: var(--ink-soft);
  font-size: 0.59rem;
}

.switch {
  width: 2.7rem;
  height: 1.55rem;
  padding: 0.18rem;
  border-radius: 99px;
  background: var(--ink);
  transition: background 180ms ease;
}

.switch span {
  display: block;
  width: 1.18rem;
  aspect-ratio: 1;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--lime);
  transition: transform 180ms ease;
}

.setting-row[aria-pressed="false"] .switch {
  background: #c9c9c3;
}

.setting-row[aria-pressed="false"] .switch span {
  margin-inline-start: 0;
  background: white;
}

.chevron {
  color: var(--ink-soft);
  font-size: 1.4rem;
}

.modal {
  --modal-accent: var(--lime);
  --modal-accent-soft: #efffcf;
  --modal-deep: #153b46;

  width: min(calc(100% - 1.25rem), 31rem);
  max-height: calc(100dvh - 1.25rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 2.2rem;
  background: transparent;
  color: var(--ink);
}

.account-modal {
  --modal-accent: #79e9f0;
  --modal-accent-soft: #dffbff;
  --modal-deep: #153b55;
}

.passkey-modal {
  --modal-accent: #c9ff63;
  --modal-accent-soft: #efffcf;
  --modal-deep: #173f43;
}

.result-modal {
  --modal-accent: var(--lime);
  --modal-accent-soft: #f0ffd3;
  --modal-deep: #183f38;
}

.confirm-modal {
  --modal-accent: #ff917d;
  --modal-accent-soft: #ffe5de;
  --modal-deep: #58313b;
}

.collection-modal {
  --modal-accent: #ab9cff;
  --modal-accent-soft: #eeeaff;
  --modal-deep: #252d62;
  width: min(calc(100% - 1.25rem), 34rem);
}

.modal::backdrop {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--modal-accent) 18%, transparent), transparent 19rem),
    rgba(7, 20, 27, 0.7);
  backdrop-filter: blur(10px) saturate(1.18);
}

.modal[open] {
  animation: modal-in 230ms ease both;
}

@supports (transition-behavior: allow-discrete) and (overlay: auto) {
  .modal {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
    transition:
      opacity 230ms ease,
      transform 230ms ease,
      display 230ms allow-discrete,
      overlay 230ms allow-discrete;
    transition-behavior: allow-discrete;
  }

  .modal[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: none;
  }

  @starting-style {
    .modal[open] {
      opacity: 0;
      transform: translateY(1rem) scale(0.98);
    }
  }

  .modal::backdrop {
    background: rgba(7, 20, 27, 0);
    transition:
      background 230ms ease,
      backdrop-filter 230ms ease,
      display 230ms allow-discrete,
      overlay 230ms allow-discrete;
  }

  .modal[open]::backdrop {
    background:
      radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--modal-accent) 18%, transparent), transparent 19rem),
      rgba(7, 20, 27, 0.7);
  }

  @starting-style {
    .modal[open]::backdrop {
      background: rgba(7, 20, 27, 0);
    }
  }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(1rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-card {
  position: relative;
  isolation: isolate;
  max-height: calc(100dvh - 1.25rem);
  padding: 0.62rem 1.35rem 1.35rem;
  overflow-y: auto;
  border: 0.18rem solid rgba(255, 255, 255, 0.96);
  border-radius: 2.2rem;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.88), transparent 30%),
    repeating-linear-gradient(115deg, transparent 0 18px, rgba(19, 42, 51, 0.018) 18px 19px),
    var(--card);
  box-shadow:
    0 0 0 0.22rem color-mix(in srgb, var(--modal-accent) 54%, var(--modal-deep)),
    0 0.72rem 0 -0.28rem color-mix(in srgb, var(--modal-deep) 82%, black),
    0 2.2rem 5rem rgba(0, 0, 0, 0.38),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.9);
  scrollbar-color: color-mix(in srgb, var(--modal-accent) 60%, var(--modal-deep)) transparent;
  scrollbar-width: thin;
}

.modal-card::after {
  position: absolute;
  z-index: 5;
  inset: 0.34rem;
  border: 1px solid color-mix(in srgb, var(--modal-accent) 24%, transparent);
  border-radius: 1.65rem;
  content: "";
  pointer-events: none;
}

.modal-card .button {
  border: 0.12rem solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 0.3rem 0 color-mix(in srgb, currentColor 34%, var(--modal-deep)),
    0 0.7rem 1.15rem color-mix(in srgb, var(--modal-deep) 18%, transparent),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.68);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.modal-card .button:not(:disabled):hover {
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-0.1rem) scale(1.01);
}

.modal-card .button:not(:disabled):active {
  box-shadow:
    0 0.08rem 0 color-mix(in srgb, currentColor 34%, var(--modal-deep)),
    0 0.2rem 0.45rem color-mix(in srgb, var(--modal-deep) 15%, transparent),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.48);
  transform: translateY(0.18rem) scale(0.985);
}

.modal-card .button:disabled {
  filter: grayscale(0.45);
  opacity: 0.62;
  cursor: wait;
}

.modal-close {
  position: absolute;
  z-index: 9;
  inset: 1rem 1rem auto auto;
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.16rem solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: color-mix(in srgb, var(--modal-deep) 88%, black);
  color: white;
  box-shadow:
    0 0.28rem 0 color-mix(in srgb, var(--modal-deep) 72%, black),
    0 0.55rem 1rem rgba(0, 0, 0, 0.2),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.28);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.modal-close:hover {
  transform: translateY(-0.08rem) rotate(4deg);
}

.modal-close:active {
  box-shadow:
    0 0.08rem 0 color-mix(in srgb, var(--modal-deep) 72%, black),
    0 0.2rem 0.5rem rgba(0, 0, 0, 0.16);
  transform: translateY(0.16rem) scale(0.96);
}

.modal-hero {
  position: relative;
  display: grid;
  height: 8.2rem;
  margin: 0 -0.72rem 1.3rem;
  place-items: center;
  overflow: hidden;
  border: 0.12rem solid rgba(255, 255, 255, 0.62);
  border-radius: 1.55rem 1.55rem 1.15rem 1.15rem;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--modal-accent) 62%, white) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--modal-accent) 42%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--modal-deep) 76%, #fff), var(--modal-deep));
  box-shadow:
    inset 0 -1.2rem 2.4rem rgba(0, 0, 0, 0.2),
    inset 0 0.15rem 0 rgba(255, 255, 255, 0.34),
    0 0.7rem 1.4rem color-mix(in srgb, var(--modal-deep) 22%, transparent);
}

.modal-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 37%, rgba(255, 255, 255, 0.16) 38% 44%, transparent 45% 100%),
    repeating-radial-gradient(circle at 50% 105%, transparent 0 1.1rem, rgba(255, 255, 255, 0.075) 1.15rem 1.22rem);
  content: "";
}

.modal-hero::after {
  position: absolute;
  inset: auto -10% -68% -10%;
  height: 80%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--modal-accent) 24%, var(--modal-deep));
  box-shadow: 0 -0.18rem 0 rgba(255, 255, 255, 0.18);
  content: "";
}

.modal-hero-orbit {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: 7.2rem;
  aspect-ratio: 1.8;
  border: 0.14rem solid color-mix(in srgb, var(--modal-accent) 66%, white);
  border-radius: 50%;
  opacity: 0.68;
  transform: translate(-50%, -50%) rotate(-13deg);
  animation: modal-orbit-spin 9s linear infinite;
}

.modal-hero-orbit::before,
.modal-hero-orbit::after {
  position: absolute;
  top: 50%;
  width: 0.66rem;
  aspect-ratio: 1;
  border: 0.12rem solid white;
  border-radius: 50%;
  background: var(--modal-accent);
  box-shadow: 0 0 0.7rem var(--modal-accent);
  content: "";
  transform: translateY(-50%);
}

.modal-hero-orbit::before { left: -0.3rem; }
.modal-hero-orbit::after { right: -0.3rem; }

.modal-hero-orbit i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8.8rem;
  height: 0.1rem;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translate(-50%, -50%) rotate(34deg);
}

.modal-hero-orbit i + i {
  transform: translate(-50%, -50%) rotate(146deg);
}

.modal-spark {
  position: absolute;
  z-index: 2;
  color: white;
  filter: drop-shadow(0 0 0.35rem var(--modal-accent));
  font-family: var(--mono);
  font-size: 0.8rem;
  animation: modal-spark-twinkle 1.8s ease-in-out infinite alternate;
}

.modal-spark.is-one { inset: 1rem auto auto 16%; }
.modal-spark.is-two { inset: 2.25rem 14% auto auto; animation-delay: -0.7s; }
.modal-spark.is-three { inset: auto auto 1.5rem 25%; animation-delay: -1.1s; }

.modal-hero-chip {
  position: absolute;
  z-index: 4;
  inset: auto auto 0.54rem 50%;
  min-width: 8.5rem;
  padding: 0.38rem 0.72rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.88);
  border-radius: 99px;
  background: var(--modal-accent);
  color: color-mix(in srgb, var(--modal-deep) 88%, black);
  box-shadow:
    0 0.25rem 0 color-mix(in srgb, var(--modal-accent) 54%, var(--modal-deep)),
    0 0.6rem 1rem rgba(0, 0, 0, 0.22),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.62);
  font-family: var(--mono);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  transform: translateX(-50%);
}

.modal-hero .modal-brand-mark,
.modal-hero .celebration-mark,
.modal-hero .confirm-icon,
.collection-planet {
  position: relative;
  z-index: 3;
  display: grid;
  width: 4.5rem;
  aspect-ratio: 1;
  margin: 0;
  place-items: center;
  border: 0.3rem solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, white 0 6%, transparent 7%),
    linear-gradient(145deg, color-mix(in srgb, var(--modal-accent) 80%, white), var(--modal-accent) 55%, color-mix(in srgb, var(--modal-deep) 72%, black));
  color: var(--modal-deep);
  box-shadow:
    0 0 0 0.42rem color-mix(in srgb, var(--modal-accent) 19%, transparent),
    0 0.62rem 0 color-mix(in srgb, var(--modal-accent) 48%, var(--modal-deep)),
    0 1rem 1.8rem rgba(0, 0, 0, 0.28),
    inset -0.35rem -0.5rem 0.75rem rgba(0, 0, 0, 0.2);
  animation: modal-icon-bob 2.4s ease-in-out infinite alternate;
}

.modal-hero .modal-brand-mark svg {
  width: 2.15rem;
  stroke: currentColor;
}

.modal-card > .eyebrow {
  display: table;
  margin-inline: auto;
  padding: 0.28rem 0.55rem;
  border-radius: 99px;
  background: var(--modal-accent-soft);
  color: color-mix(in srgb, var(--modal-deep) 78%, var(--modal-accent));
  letter-spacing: 0.12em;
  text-align: center;
}

.modal-card h2 {
  margin-block: 0.62rem 0.55rem;
  font-size: clamp(1.68rem, 7vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-align: center;
  text-wrap: balance;
}

.modal-copy {
  max-width: 24rem;
  margin-block-end: 1rem;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}

@keyframes modal-orbit-spin {
  to { transform: translate(-50%, -50%) rotate(347deg); }
}

@keyframes modal-icon-bob {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-0.24rem) rotate(1deg); }
}

@keyframes modal-spark-twinkle {
  from { opacity: 0.42; transform: scale(0.72) rotate(-8deg); }
  to { opacity: 1; transform: scale(1.1) rotate(8deg); }
}

.account-hero {
  background:
    radial-gradient(circle at 50% 38%, #f4ffff 0 6%, transparent 7%),
    radial-gradient(circle at 50% 45%, rgba(121, 233, 240, 0.44), transparent 38%),
    linear-gradient(145deg, #235e78, #132f4b 72%);
}

.passkey-hero {
  background:
    radial-gradient(circle at 50% 38%, #fbffe9 0 6%, transparent 7%),
    radial-gradient(circle at 50% 45%, rgba(201, 255, 99, 0.4), transparent 38%),
    linear-gradient(145deg, #2e6a62, #153a3f 72%);
}

.passkey-hero .modal-brand-mark {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 800;
}

.result-hero {
  background:
    radial-gradient(circle at 50% 38%, #fff 0 6%, transparent 7%),
    radial-gradient(circle at 50% 45%, rgba(201, 255, 99, 0.46), transparent 38%),
    linear-gradient(145deg, #286e5e, #153a36 72%);
}

.confirm-hero {
  background:
    repeating-linear-gradient(135deg, transparent 0 1.2rem, rgba(255, 255, 255, 0.045) 1.2rem 2.4rem),
    radial-gradient(circle at 50% 45%, rgba(255, 145, 125, 0.46), transparent 38%),
    linear-gradient(145deg, #754050, #422835 72%);
}

.collection-hero {
  background:
    radial-gradient(circle at 50% 38%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 50% 45%, rgba(171, 156, 255, 0.48), transparent 38%),
    linear-gradient(145deg, #3c4689, #202852 72%);
}

.collection-planet {
  font-family: var(--mono);
  font-size: 1.55rem;
}

.collection-planet span {
  filter: drop-shadow(0 0.15rem 0 rgba(255, 255, 255, 0.35));
  transform: rotate(-14deg);
}

.confirm-hero .confirm-icon {
  font-size: 1.65rem;
}

.result-hero .celebration-mark {
  font-size: 1.7rem;
}

.collection-card {
  background:
    radial-gradient(circle at 85% 0, rgba(130, 181, 255, 0.24), transparent 30%),
    radial-gradient(circle at 10% 35%, rgba(201, 255, 99, 0.17), transparent 30%),
    repeating-linear-gradient(115deg, transparent 0 18px, rgba(68, 59, 132, 0.025) 18px 19px),
    var(--card);
}

.collection-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block: 1rem 0.38rem;
  font-size: 0.62rem;
}

.collection-progress-copy span {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.52rem;
}

.collection-progress {
  height: 0.62rem;
  overflow: hidden;
  border: 0.1rem solid rgba(255, 255, 255, 0.9);
  border-radius: 99px;
  background: rgba(19, 42, 51, 0.1);
  box-shadow:
    0 0 0 1px rgba(19, 42, 51, 0.1),
    inset 0 1px 2px rgba(19, 42, 51, 0.15);
}

.collection-progress::-webkit-progress-value,
.collection-progress::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #78e9eb, #b89cff, #cfff63);
}

.world-faces-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-block-start: 1rem;
}

.world-face-card {
  --face-color: #82b5ff;

  position: relative;
  display: grid;
  min-height: 7.3rem;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem;
  overflow: hidden;
  border: 0.12rem solid color-mix(in srgb, var(--face-color) 34%, rgba(19, 42, 51, 0.1));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--face-color) 24%, transparent), transparent 48%),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 0.28rem 0 color-mix(in srgb, var(--face-color) 24%, rgba(19, 42, 51, 0.16)),
    0 0.65rem 1rem rgba(31, 40, 62, 0.08),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.95);
  text-align: start;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.world-face-card:not(:disabled):hover {
  transform: translateY(-0.12rem) rotate(-0.5deg);
}

.world-face-card:not(:disabled):active {
  box-shadow:
    0 0.08rem 0 color-mix(in srgb, var(--face-color) 24%, rgba(19, 42, 51, 0.16)),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.95);
  transform: translateY(0.12rem) scale(0.985);
}

.world-face-card.is-locked {
  filter: grayscale(0.8);
  opacity: 0.55;
  cursor: default;
}

.world-face-card.is-equipped {
  border-color: var(--face-color);
  box-shadow:
    0 0 0 0.16rem color-mix(in srgb, var(--face-color) 25%, transparent),
    0 0.32rem 0 color-mix(in srgb, var(--face-color) 55%, #26344c),
    0 0.85rem 1.5rem color-mix(in srgb, var(--face-color) 24%, transparent);
}

.world-face-icon {
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 27%, white 0 6%, transparent 7%),
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--face-color) 75%, white), var(--face-color) 54%, #102731 100%);
  color: white;
  font-size: 1.2rem;
  box-shadow:
    inset -0.35rem -0.5rem 0.8rem rgba(4, 16, 29, 0.25),
    0 0.55rem 1.2rem color-mix(in srgb, var(--face-color) 28%, transparent);
}

.world-face-card strong,
.world-face-card small,
.world-face-card em {
  display: block;
}

.world-face-card strong {
  font-size: 0.63rem;
  line-height: 1.15;
}

.world-face-card small {
  margin-block-start: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.48rem;
}

.world-face-card em {
  margin-block-start: 0.36rem;
  color: color-mix(in srgb, var(--face-color) 70%, #263c45);
  font-family: var(--mono);
  font-size: 0.45rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.world-face-quantity {
  position: absolute;
  inset: 0.45rem 0.5rem auto auto;
  min-width: 1.45rem;
  padding: 0.12rem 0.28rem;
  border-radius: 99px;
  background: var(--ink);
  color: white;
  font-family: var(--mono);
  font-size: 0.45rem;
  text-align: center;
}

.collection-hint {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  font-size: 0.54rem;
  line-height: 1.45;
  text-align: center;
}

.account-benefits {
  margin-block-end: 1rem;
  padding: 0;
}

.account-benefits li {
  display: inline-block;
  margin: 0 0.25rem 0.35rem 0;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(19, 42, 51, 0.08);
  border-radius: 99px;
  background: linear-gradient(180deg, #efffcf, #dff5b9);
  box-shadow:
    0 0.18rem 0 rgba(119, 156, 55, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-size: 0.57rem;
  font-weight: 700;
}

.account-benefits li:nth-child(2) {
  background: linear-gradient(180deg, #dffbff, #c5edf7);
  box-shadow: 0 0.18rem 0 rgba(61, 133, 156, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.account-benefits li:nth-child(3) {
  background: linear-gradient(180deg, #eeeaff, #dcd4ff);
  box-shadow: 0 0.18rem 0 rgba(92, 76, 165, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.form-field {
  margin-block-end: 0.8rem;
}

.form-field label {
  display: block;
  margin-block-end: 0.35rem;
  font-size: 0.68rem;
  font-weight: 750;
}

.form-field input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.75rem 0.85rem;
  border: 0.12rem solid rgba(19, 42, 51, 0.16);
  border-radius: 0.95rem;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.78), transparent 42%),
    #f3f6f4;
  color: var(--ink);
  font-size: 1rem;
  box-shadow:
    inset 0 0.18rem 0.4rem rgba(19, 42, 51, 0.07),
    0 0.15rem 0 rgba(255, 255, 255, 0.9);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.form-field input:focus {
  border-color: color-mix(in srgb, var(--modal-accent) 72%, var(--modal-deep));
  background-color: white;
  box-shadow:
    0 0 0 0.22rem color-mix(in srgb, var(--modal-accent) 22%, transparent),
    inset 0 0.12rem 0.3rem rgba(19, 42, 51, 0.04);
}

.form-field input::placeholder {
  color: #929b98;
  font-size: 0.72rem;
}

.form-field input:user-invalid {
  border-color: var(--coral);
}

.form-field small {
  display: block;
  margin-block-start: 0.28rem;
  color: var(--ink-soft);
  font-size: 0.58rem;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-inline-end: 4rem;
}

.password-wrap button {
  position: absolute;
  inset: 0 0.45rem 0 auto;
  min-width: 3.3rem;
  border: 0;
  background: transparent;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
}

.form-error {
  min-height: 1rem;
  margin-block-end: 0.35rem;
  color: #a73726;
  font-size: 0.64rem;
}

.account-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.account-divider::before,
.account-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(19, 42, 51, 0.13);
  content: "";
}

.account-divider[hidden] {
  display: none;
}

.passkey-list {
  display: grid;
  gap: 0.62rem;
  margin-block: 0.8rem;
}

.passkey-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed rgba(19, 42, 51, 0.2);
  border-radius: 1rem;
  color: var(--ink-soft);
  font-size: 0.65rem;
  line-height: 1.5;
  text-align: center;
}

.passkey-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.68rem;
  padding: 0.75rem;
  border: 1px solid rgba(19, 42, 51, 0.11);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0.22rem 0 rgba(19, 42, 51, 0.08), inset 0 1px 0 white;
}

.passkey-item-icon {
  display: grid;
  width: 2.45rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.8rem;
  background: #e9fbc8;
  color: #29554b;
  font-family: var(--mono);
  font-weight: 800;
}

.passkey-item-copy strong,
.passkey-item-copy small {
  display: block;
}

.passkey-item-copy strong {
  font-size: 0.7rem;
}

.passkey-item-copy input {
  width: 100%;
  padding: 0.52rem 0.58rem;
  border: 0.12rem solid #79cbd0;
  border-radius: 0.65rem;
  background: white;
  color: var(--ink);
  font: 700 0.66rem var(--font);
  outline: none;
}

.passkey-item-copy input:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(121, 203, 208, 0.25);
}

.passkey-item-copy small {
  margin-block-start: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.54rem;
  line-height: 1.4;
}

.passkey-item-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 0.45rem;
}

.passkey-item-actions button {
  min-height: 2.25rem;
  flex: 1;
  border: 1px solid rgba(19, 42, 51, 0.12);
  border-radius: 0.72rem;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 0.58rem;
  font-weight: 750;
  cursor: pointer;
}

.passkey-item-actions .passkey-delete {
  background: #ffe5de;
  color: #7b2d23;
}

.passkey-item-actions .passkey-confirm-delete {
  background: #ff917d;
  color: #341711;
}

.passkey-item.is-confirming-delete {
  border-color: rgba(255, 111, 87, 0.52);
  background: #fff6f2;
}

.passkey-status {
  min-height: 1.1rem;
  margin-block: 0.25rem 0.55rem;
  text-align: center;
}

.passkey-status[data-tone="success"] {
  color: #286448;
}

.passkey-promotion-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.2rem 0 0.9rem;
  padding: 0;
  list-style: none;
}

.passkey-promotion-benefits li {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 0.62rem 0.35rem;
  border: 0.1rem solid rgba(47, 101, 87, 0.14);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 50% 0, rgba(201, 255, 99, 0.34), transparent 54%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 0.2rem 0 rgba(44, 91, 80, 0.12), inset 0 1px 0 white;
  text-align: center;
}

.passkey-promotion-benefits li > span {
  display: grid;
  width: 1.8rem;
  aspect-ratio: 1;
  margin-block-end: 0.3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: #204b43;
  box-shadow: 0 0.15rem 0 #7ea540;
  font-size: 0.72rem;
  font-weight: 800;
}

.passkey-promotion-benefits strong,
.passkey-promotion-benefits small {
  display: block;
}

.passkey-promotion-benefits strong {
  font-size: 0.61rem;
}

.passkey-promotion-benefits small {
  margin-block-start: 0.16rem;
  color: var(--ink-soft);
  font-size: 0.46rem;
  line-height: 1.3;
}

.passkey-promotion-skip {
  display: block;
  margin: 0.72rem auto 0;
}

.privacy-note {
  margin: 0.75rem 0 0;
  color: #7b8986;
  font-size: 0.55rem;
  line-height: 1.45;
  text-align: center;
}

.account-mode-toggle {
  display: block;
  margin-inline: auto;
}

.result-card,
.confirm-card {
  text-align: center;
}

.celebration-mark,
.confirm-icon {
  display: grid;
  width: 4.6rem;
  aspect-ratio: 1;
  margin: 0.3rem auto 1.1rem;
  place-items: center;
  border: 1px solid rgba(19, 42, 51, 0.08);
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0.65rem rgba(201, 255, 99, 0.22);
  font-size: 1.6rem;
}

.result-stars {
  display: flex;
  justify-content: center;
  gap: 0.38rem;
  margin-block: 1rem 1.15rem;
  color: var(--gold);
  font-size: 1.28rem;
  letter-spacing: 0;
}

.result-stars > span {
  display: grid;
  width: 2.45rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.12rem solid #fff4bd;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff2a9, #f3bd42 62%, #b77821);
  color: white;
  box-shadow:
    0 0.26rem 0 #b77d26,
    0 0.55rem 0.85rem rgba(128, 83, 24, 0.2),
    inset 0 0.13rem 0 rgba(255, 255, 255, 0.72);
  text-shadow: 0 0.1rem 0 #9e681b;
  transform: rotate(-5deg);
}

.result-stars > span:nth-child(2) { transform: translateY(-0.2rem); }
.result-stars > span:nth-child(3) { transform: rotate(5deg); }

.result-stars > .star-off {
  border-color: #ece8de;
  background: linear-gradient(145deg, #f3f0ea, #d8d5cc);
  box-shadow: 0 0.2rem 0 #bab7ae, inset 0 0.13rem 0 rgba(255, 255, 255, 0.72);
  color: #c3c0b8;
  text-shadow: none;
}

.result-stars .star-off {
  color: #c3c0b8;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.48rem;
  margin-block: 0.8rem 1.2rem;
}

.result-stats div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.3rem;
  border: 1px solid rgba(19, 42, 51, 0.08);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 20% 0, color-mix(in srgb, var(--modal-accent) 32%, transparent), transparent 50%),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0.22rem 0 rgba(19, 42, 51, 0.09),
    inset 0 1px 0 white;
}

.result-stats div + div {
  border-inline-start: 1px solid rgba(19, 42, 51, 0.08);
}

.result-stats strong {
  font-family: var(--mono);
  font-size: 0.8rem;
}

.result-countdown {
  min-width: 2.5rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  opacity: 0.68;
  text-align: end;
}

.text-button {
  min-height: 2.6rem;
  margin-block-start: 0.45rem;
  padding-inline: 1rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.confirm-card p {
  max-width: 21rem;
  margin: 0 auto 1.2rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.55;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid rgba(19, 42, 51, 0.08);
  border-radius: 1.1rem;
  background: rgba(19, 42, 51, 0.045);
  box-shadow: inset 0 0.14rem 0.35rem rgba(19, 42, 51, 0.05);
}

.achievement-splash {
  --award-color: var(--lime);

  width: 100dvw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 1.5rem;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in oklab, var(--award-color) 22%, transparent), transparent 38%),
    rgba(10, 28, 34, 0.72);
  color: white;
}

.achievement-splash[open] {
  display: grid;
  place-items: center;
  animation: achievement-splash-screen 2400ms ease both;
}

.achievement-splash::backdrop {
  background: rgba(10, 28, 34, 0.5);
  backdrop-filter: blur(6px);
  animation: achievement-splash-screen 2400ms ease both;
}

.achievement-splash-card {
  position: relative;
  z-index: 2;
  width: min(100%, 24rem);
  padding: 2rem 1.5rem 1.55rem;
  border: 1px solid color-mix(in oklab, var(--award-color) 38%, transparent);
  border-radius: 2rem;
  background: var(--ink);
  background: linear-gradient(145deg, color-mix(in oklab, var(--award-color) 18%, var(--ink)), var(--ink) 48%);
  box-shadow:
    0 2rem 6rem rgba(0, 0, 0, 0.42),
    0 0 0 0.55rem color-mix(in oklab, var(--award-color) 13%, transparent);
  text-align: center;
  animation: achievement-splash-card 2400ms cubic-bezier(.2, .85, .25, 1) both;
}

.achievement-splash-card > p {
  margin: 0 0 1rem;
  color: var(--award-color);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.achievement-splash-icon {
  display: grid;
  width: 6.2rem;
  aspect-ratio: 1;
  margin: 0 auto 1.2rem;
  place-items: center;
  border: 0.45rem solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: var(--award-color);
  color: var(--ink);
  box-shadow:
    0 0 0 0.65rem color-mix(in oklab, var(--award-color) 22%, transparent),
    0 1.1rem 2.2rem rgba(0, 0, 0, 0.3);
  font-family: var(--mono);
  font-size: 1.65rem;
  font-weight: 800;
  animation: achievement-splash-icon 2400ms ease both;
}

.achievement-splash-card h2 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  line-height: 1.05;
  text-wrap: balance;
}

.achievement-splash-card > span {
  display: block;
  max-width: 18rem;
  margin: 0.65rem auto 1.2rem;
  color: #c0cac7;
  font-size: 0.75rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.achievement-splash-card > small {
  display: inline-flex;
  min-height: 1.9rem;
  align-items: center;
  padding-inline: 0.75rem;
  border-radius: 99px;
  background: color-mix(in oklab, var(--award-color) 16%, transparent);
  color: var(--award-color);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
}

.achievement-splash-rays,
.achievement-splash-particles {
  position: fixed;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: min(38rem, 135vmin);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

.achievement-splash-rays {
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 4deg,
    color-mix(in oklab, var(--award-color) 18%, transparent) 0 7deg,
    transparent 7deg 22deg
  );
  mask-image: radial-gradient(circle, transparent 0 25%, black 62%, transparent 74%);
  animation: achievement-splash-rays 2400ms ease-out both;
}

.achievement-splash-particles span {
  --particle-angle: 0deg;

  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.7rem;
  height: 1.35rem;
  border-radius: 99px;
  background: var(--award-color);
  transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(-3.6rem) scale(0.25);
  animation: achievement-splash-particle 1600ms cubic-bezier(.15, .75, .25, 1) 180ms both;
}

.achievement-splash-particles span:nth-child(2n) {
  width: 0.45rem;
  background: var(--blue);
}

.achievement-splash-particles span:nth-child(3n) {
  height: 0.7rem;
  background: var(--coral);
}

.achievement-splash-particles span:nth-child(1) { --particle-angle: 0deg; }
.achievement-splash-particles span:nth-child(2) { --particle-angle: 30deg; }
.achievement-splash-particles span:nth-child(3) { --particle-angle: 60deg; }
.achievement-splash-particles span:nth-child(4) { --particle-angle: 90deg; }
.achievement-splash-particles span:nth-child(5) { --particle-angle: 120deg; }
.achievement-splash-particles span:nth-child(6) { --particle-angle: 150deg; }
.achievement-splash-particles span:nth-child(7) { --particle-angle: 180deg; }
.achievement-splash-particles span:nth-child(8) { --particle-angle: 210deg; }
.achievement-splash-particles span:nth-child(9) { --particle-angle: 240deg; }
.achievement-splash-particles span:nth-child(10) { --particle-angle: 270deg; }
.achievement-splash-particles span:nth-child(11) { --particle-angle: 300deg; }
.achievement-splash-particles span:nth-child(12) { --particle-angle: 330deg; }

@keyframes achievement-splash-screen {
  0%, 100% { opacity: 0; }
  10%, 82% { opacity: 1; }
}

@keyframes achievement-splash-card {
  0% { opacity: 0; transform: translateY(1.8rem) scale(0.72) rotate(-5deg); }
  14% { opacity: 1; transform: translateY(0) scale(1.06) rotate(1deg); }
  22%, 80% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(-0.8rem) scale(1.04); }
}

@keyframes achievement-splash-icon {
  0% { transform: scale(0.4) rotate(-30deg); }
  18% { transform: scale(1.14) rotate(7deg); }
  27%, 82% { transform: scale(1) rotate(0); }
  100% { transform: scale(0.92); }
}

@keyframes achievement-splash-rays {
  0% { opacity: 0; transform: scale(0.45) rotate(-20deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.18) rotate(26deg); }
}

@keyframes achievement-splash-particle {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(-3.6rem) scale(0.25); }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(-12.5rem) scale(1); }
}

.toast {
  position: fixed;
  z-index: 100;
  inset: max(1rem, env(safe-area-inset-top)) 50% auto auto;
  display: flex;
  width: min(calc(100% - 2rem), 25rem);
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem;
  border-radius: 1rem;
  background: var(--ink);
  color: white;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, -130%);
  transition: opacity 200ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(50%, 0);
}

.toast-icon {
  display: grid;
  width: 2.3rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--lime);
  color: var(--ink);
}

.toast strong,
.toast small {
  display: block;
}

.toast strong {
  font-size: 0.68rem;
}

.toast small {
  margin-block-start: 0.14rem;
  color: #bbc5c2;
  font-size: 0.6rem;
}

.play-mode-panel > .orbit-liveops {
  display: none;
}

.flow-hub-launch {
  --event-color: #cfff63;

  position: relative;
  display: grid;
  width: 100%;
  min-height: 3.2rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.62rem;
  margin-block: 0.3rem 0.5rem;
  padding: 0.48rem 0.62rem;
  overflow: hidden;
  border: 0.1rem solid color-mix(in srgb, var(--event-color) 38%, rgba(255, 255, 255, 0.42));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--event-color) 35%, transparent), transparent 24%),
    linear-gradient(112deg, #102b38, #15233c 62%, color-mix(in srgb, var(--event-color) 24%, #16213a));
  color: white;
  box-shadow:
    0 0.42rem 1rem rgba(15, 34, 48, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-align: start;
  cursor: pointer;
}

.flow-hub-launch::after {
  position: absolute;
  inset: -45% auto -45% -20%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  content: "";
  transform: skewX(-18deg);
  animation: flow-hub-shimmer 3.8s ease-in-out infinite;
}

.flow-hub-launch-icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 2.15rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.12rem solid rgba(255, 255, 255, 0.74);
  border-radius: 0.72rem;
  background: linear-gradient(145deg, white, var(--event-color));
  color: #102731;
  box-shadow: 0 0 1rem color-mix(in srgb, var(--event-color) 52%, transparent);
  font-weight: 900;
}

.flow-hub-launch-copy,
.flow-hub-launch-clock {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.flow-hub-launch-copy small,
.flow-hub-launch-copy strong,
.flow-hub-launch-clock small,
.flow-hub-launch-clock time {
  display: block;
}

.flow-hub-launch-copy small,
.flow-hub-launch-clock small {
  color: color-mix(in srgb, var(--event-color) 76%, white);
  font-family: var(--mono);
  font-size: 0.43rem;
  letter-spacing: 0.1em;
}

.flow-hub-launch-copy strong {
  margin-block-start: 0.06rem;
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-hub-launch-clock {
  text-align: end;
}

.flow-hub-launch-clock time {
  color: var(--event-color);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.flow-hub-launch-clock small {
  margin-block-start: 0.08rem;
}

.flow-hub-launch > i {
  position: absolute;
  z-index: 3;
  width: 0.32rem;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: white;
  filter: drop-shadow(0 0 0.3rem var(--event-color));
  pointer-events: none;
  animation: flow-hub-spark 1.9s ease-in-out infinite alternate;
}

.flow-hub-launch > i:nth-of-type(1) { inset: 0.32rem auto auto 16%; }
.flow-hub-launch > i:nth-of-type(2) { inset: auto 29% 0.28rem auto; animation-delay: -0.55s; }
.flow-hub-launch > i:nth-of-type(3) { inset: 0.28rem 12% auto auto; animation-delay: -1.05s; }
.flow-hub-launch > i:nth-of-type(4) { inset: auto auto 0.32rem 43%; animation-delay: -1.45s; }

.orbit-help-modal {
  --modal-accent: #74eff2;
  --modal-accent-soft: #dffcff;
  --modal-deep: #152b55;

  width: min(calc(100% - 1.25rem), 25.5rem);
}

.orbit-help-card {
  padding-block-end: 1.2rem;
  background:
    radial-gradient(circle at 8% 50%, rgba(116, 239, 242, 0.22), transparent 28%),
    radial-gradient(circle at 92% 67%, rgba(255, 133, 213, 0.18), transparent 29%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), transparent 32%),
    var(--card);
}

.orbit-help-card > .modal-copy {
  max-width: 21.5rem;
  margin-block-end: 0.9rem;
  font-size: 0.82rem;
}

.orbit-touch-help {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .orbit-touch-help {
    display: inline;
  }
}

.orbit-help-hero {
  position: relative;
  height: 9rem;
  margin: 0 -0.72rem 1.05rem;
  overflow: hidden;
  border: 0.12rem solid rgba(255, 255, 255, 0.72);
  border-radius: 1.55rem 1.55rem 1.15rem 1.15rem;
  background:
    radial-gradient(circle at 23% 28%, rgba(112, 238, 245, 0.31), transparent 26%),
    radial-gradient(circle at 77% 65%, rgba(255, 126, 207, 0.24), transparent 30%),
    radial-gradient(circle at 55% 120%, #3c3a79, transparent 54%),
    linear-gradient(145deg, #173f59, #111c3f 58%, #36244e);
  box-shadow:
    inset 0 -1.35rem 2.6rem rgba(3, 7, 28, 0.45),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.32),
    0 0.65rem 1.35rem rgba(24, 42, 82, 0.22);
}

.orbit-help-hero::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 9% 19%, white 0 0.07rem, transparent 0.1rem),
    radial-gradient(circle at 23% 76%, #d6ff83 0 0.06rem, transparent 0.09rem),
    radial-gradient(circle at 44% 16%, white 0 0.055rem, transparent 0.085rem),
    radial-gradient(circle at 71% 19%, #7df5ff 0 0.07rem, transparent 0.1rem),
    radial-gradient(circle at 89% 71%, white 0 0.065rem, transparent 0.095rem),
    radial-gradient(circle at 60% 83%, #ff91da 0 0.055rem, transparent 0.085rem);
  content: "";
  opacity: 0.82;
}

.orbit-help-chip {
  position: absolute;
  z-index: 9;
  inset: auto auto 0.52rem 50%;
  min-width: 11rem;
  padding: 0.36rem 0.72rem;
  border: 0.11rem solid rgba(255, 255, 255, 0.9);
  border-radius: 99px;
  background: linear-gradient(180deg, #efffa2, #bce848);
  color: #17323c;
  box-shadow:
    0 0.24rem 0 #6e942e,
    0 0.7rem 1.15rem rgba(0, 0, 0, 0.28),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-align: center;
  transform: translateX(-50%);
}

.orbit-help-orbit {
  position: absolute;
  z-index: 1;
  inset: 44% auto auto 56%;
  width: 15rem;
  aspect-ratio: 2.7;
  border: 0.1rem solid rgba(145, 243, 255, 0.32);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
}

.orbit-help-orbit.is-tight {
  width: 10rem;
  border-color: rgba(255, 150, 222, 0.24);
  transform: translate(-50%, -50%) rotate(23deg);
}

.orbit-help-globe {
  position: absolute;
  z-index: 4;
  inset: 0.72rem auto auto 50%;
  width: 6.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0.22rem solid rgba(219, 255, 255, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.94) 0 5%, transparent 6%),
    radial-gradient(circle at 66% 72%, rgba(43, 61, 150, 0.24), transparent 36%),
    linear-gradient(145deg, #78fbef, #2dc8dc 51%, #2964bd);
  box-shadow:
    0 0 0 0.42rem rgba(105, 236, 243, 0.12),
    0 0 1.55rem rgba(98, 236, 245, 0.58),
    inset -0.68rem -0.8rem 1.15rem rgba(10, 40, 117, 0.38),
    inset 0.25rem 0.28rem 0.5rem rgba(255, 255, 255, 0.42);
  transform: translateX(-50%);
  animation: orbit-help-globe-bob 3.2s ease-in-out infinite alternate;
}

.orbit-help-land {
  position: absolute;
  background: linear-gradient(145deg, #e7ff89, #70df8e 60%, #32af8c);
  box-shadow: inset -0.2rem -0.2rem 0.25rem rgba(11, 104, 84, 0.24);
  transform: rotate(-14deg);
}

.orbit-help-land.is-one {
  inset: 1.18rem auto auto 0.7rem;
  width: 2.5rem;
  height: 1.65rem;
  border-radius: 62% 38% 48% 52% / 45% 52% 48% 55%;
}

.orbit-help-land.is-two {
  inset: 3.6rem 0.55rem auto auto;
  width: 2.1rem;
  height: 1.35rem;
  border-radius: 45% 55% 62% 38% / 58% 40% 60% 42%;
  transform: rotate(18deg);
}

.orbit-help-vortex {
  position: absolute;
  z-index: 3;
  inset: 1.45rem 0.72rem auto auto;
  width: 1.55rem;
  aspect-ratio: 1;
  border: 0.12rem solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background:
    radial-gradient(circle, #091632 0 17%, transparent 19%),
    repeating-conic-gradient(from 20deg, #ff87d6 0 16deg, #9d73ff 18deg 34deg, #68f2f3 36deg 48deg);
  box-shadow: 0 0 0.65rem #ff7fd3, inset 0 0 0.35rem rgba(255, 255, 255, 0.72);
  animation: orbit-help-vortex-spin 1.25s linear infinite;
}

.orbit-help-junk {
  position: absolute;
  z-index: 6;
  inset: 2.05rem auto auto 12%;
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.14rem solid rgba(255, 255, 255, 0.88);
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at 29% 21%, white 0 7%, transparent 8%),
    linear-gradient(145deg, #fff0a7, #ffb455 53%, #e56566);
  color: #35254a;
  box-shadow:
    0 0.34rem 0 #9a4e54,
    0 0 1rem rgba(255, 170, 93, 0.5),
    inset -0.35rem -0.48rem 0.65rem rgba(110, 38, 71, 0.25);
  animation: orbit-help-junk-fly 2.45s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}

.orbit-help-junk::before,
.orbit-help-junk::after {
  position: absolute;
  top: 50%;
  width: 0.95rem;
  height: 1.6rem;
  border: 0.09rem solid rgba(255, 255, 255, 0.82);
  background: repeating-linear-gradient(90deg, #344d9e 0 0.22rem, #75eaf2 0.23rem 0.31rem);
  content: "";
  transform: translateY(-50%);
}

.orbit-help-junk::before { right: 94%; border-radius: 0.2rem 0 0 0.2rem; }
.orbit-help-junk::after { left: 94%; border-radius: 0 0.2rem 0.2rem 0; }

.orbit-help-junk i {
  position: absolute;
  inset: -0.45rem auto auto 50%;
  width: 1.2rem;
  height: 0.52rem;
  border: 0.08rem solid white;
  border-radius: 50% 50% 0.18rem 0.18rem;
  background: #cfff63;
  transform: translateX(-50%);
}

.orbit-help-junk b {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: -0.08em;
}

.orbit-help-route {
  position: absolute;
  z-index: 5;
  inset: 3.65rem auto auto 23%;
  width: 4.4rem;
  border-block-start: 0.18rem dotted rgba(235, 255, 156, 0.9);
  filter: drop-shadow(0 0 0.28rem #cfff63);
  transform: rotate(-7deg);
  transform-origin: left center;
  animation: orbit-help-route-pulse 1.15s ease-in-out infinite alternate;
}

.orbit-help-route::after {
  position: absolute;
  inset: -0.38rem -0.1rem auto auto;
  color: #e9ff9f;
  content: "›";
  font-size: 1.1rem;
  font-weight: 900;
}

.orbit-help-spark {
  position: absolute;
  z-index: 7;
  color: white;
  filter: drop-shadow(0 0 0.35rem #7df5ff);
  font-family: var(--mono);
  font-size: 0.75rem;
  animation: orbit-help-spark-pop 1.65s ease-in-out infinite alternate;
}

.orbit-help-spark.is-one { inset: 0.9rem auto auto 12%; }
.orbit-help-spark.is-two { inset: 1.35rem 10% auto auto; color: #d7ff82; animation-delay: -0.5s; }
.orbit-help-spark.is-three { inset: auto 21% 1.2rem auto; color: #ff91da; animation-delay: -1s; }
.orbit-help-spark.is-four { inset: auto auto 1.45rem 17%; animation-delay: -1.35s; }

.orbit-help-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.orbit-help-steps li {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0.62rem 0.2rem 0.55rem;
  place-items: center;
  border: 0.1rem solid color-mix(in srgb, var(--modal-accent) 42%, white);
  border-radius: 1rem;
  background: linear-gradient(145deg, white, color-mix(in srgb, var(--modal-accent-soft) 74%, white));
  box-shadow:
    0 0.22rem 0 color-mix(in srgb, var(--modal-accent) 34%, #aac4c9),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.96);
}

.orbit-help-steps li > span {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #78eff3, #7b8df2);
  color: white;
  box-shadow: inset 0 0.12rem 0 rgba(255, 255, 255, 0.62), 0 0.28rem 0.5rem rgba(63, 100, 170, 0.22);
  font-size: 1rem;
  font-weight: 900;
}

.orbit-help-steps li:nth-child(2) > span { background: linear-gradient(145deg, #ffe87e, #ff9d67); }
.orbit-help-steps li:nth-child(3) > span { background: linear-gradient(145deg, #ff8ed7, #8b77ef); }

.orbit-help-steps small {
  position: absolute;
  inset: 0.34rem auto auto 0.38rem;
  display: grid;
  width: 1.05rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--modal-deep);
  color: white;
  font-family: var(--mono);
  font-size: 0.45rem;
  font-weight: 900;
}

.orbit-help-steps strong {
  margin-block-start: 0.33rem;
  overflow: hidden;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orbit-help-integrity {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.62rem;
  margin: 0 0 1rem;
  padding: 0.58rem 0.68rem;
  border: 0.1rem solid rgba(255, 174, 69, 0.58);
  border-radius: 1rem;
  background: linear-gradient(145deg, #fff9db, #fff0b0);
  color: #493b28;
  box-shadow: 0 0.2rem 0 #d2a84d, inset 0 0.08rem 0 rgba(255, 255, 255, 0.92);
}

.orbit-help-integrity-icon {
  display: grid;
  width: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.09rem solid rgba(255, 255, 255, 0.86);
  border-radius: 0.78rem;
  background: linear-gradient(145deg, #ffcf5a, #ff8f67);
  color: white;
  box-shadow: 0 0.2rem 0 #c96853, inset 0 0.08rem 0 rgba(255, 255, 255, 0.62);
  font-size: 1.15rem;
  font-weight: 900;
}

.orbit-help-integrity-copy {
  display: grid;
  min-width: 0;
  gap: 0.13rem;
}

.orbit-help-integrity-copy strong {
  color: #342b20;
  font-size: 0.72rem;
  line-height: 1;
}

.orbit-help-integrity-copy > span {
  color: #66543a;
  font-size: 0.63rem;
  font-weight: 680;
  line-height: 1.32;
}

@media (max-height: 38rem) {
  .orbit-help-hero {
    display: none;
  }

  .orbit-help-card > .modal-copy {
    margin-block-end: 0.62rem;
    font-size: 0.76rem;
  }

  .orbit-help-steps,
  .orbit-help-integrity {
    margin-block-end: 0.68rem;
  }
}

.orbit-help-start {
  position: relative;
  overflow: hidden;
  font-size: 0.86rem;
  box-shadow:
    0 0.32rem 0 #799c2f,
    0 0.75rem 1.2rem rgba(111, 153, 45, 0.26),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.75);
}

.orbit-help-start::after {
  position: absolute;
  inset: -45% auto -45% -28%;
  width: 22%;
  background: rgba(255, 255, 255, 0.48);
  content: "";
  transform: skewX(-18deg);
  animation: orbit-help-button-shine 2.8s ease-in-out infinite;
}

@keyframes orbit-help-globe-bob {
  from { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  to { transform: translateX(-50%) translateY(0.18rem) rotate(4deg); }
}

@keyframes orbit-help-vortex-spin {
  to { transform: rotate(1turn); }
}

@keyframes orbit-help-junk-fly {
  from { transform: translate(-0.15rem, 0.13rem) rotate(-8deg) scale(0.96); }
  to { transform: translate(0.36rem, -0.12rem) rotate(7deg) scale(1.04); }
}

@keyframes orbit-help-route-pulse {
  from { opacity: 0.48; transform: rotate(-7deg) scaleX(0.9); }
  to { opacity: 1; transform: rotate(-7deg) scaleX(1.04); }
}

@keyframes orbit-help-spark-pop {
  from { opacity: 0.42; transform: scale(0.72) rotate(-8deg); }
  to { opacity: 1; transform: scale(1.16) rotate(8deg); }
}

@keyframes orbit-help-button-shine {
  0%, 38% { left: -28%; }
  64%, 100% { left: 116%; }
}

.games-modal {
  --modal-accent: #70edf1;
  --modal-accent-soft: #defcff;
  --modal-deep: #142f50;
}

.games-card {
  background:
    radial-gradient(circle at 92% 2%, rgba(202, 255, 95, 0.24), transparent 28%),
    radial-gradient(circle at 4% 42%, rgba(120, 229, 244, 0.2), transparent 30%),
    repeating-linear-gradient(118deg, transparent 0 19px, rgba(19, 42, 51, 0.018) 19px 20px),
    var(--card);
}

.games-card > .modal-copy {
  margin-block-end: 0.75rem;
}

.games-hero {
  position: relative;
  height: 8.3rem;
  margin: 0 -0.72rem 1.05rem;
  overflow: hidden;
  border: 0.12rem solid rgba(255, 255, 255, 0.68);
  border-radius: 1.55rem 1.55rem 1.15rem 1.15rem;
  background:
    radial-gradient(circle at 30% 36%, rgba(105, 238, 243, 0.3), transparent 28%),
    radial-gradient(circle at 74% 60%, rgba(255, 133, 213, 0.22), transparent 30%),
    linear-gradient(145deg, #173f55, #101c3d 62%, #422952);
  box-shadow:
    inset 0 -1.2rem 2.6rem rgba(2, 9, 28, 0.4),
    0 0.65rem 1.25rem rgba(28, 42, 79, 0.2);
}

.games-hero::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 24%, white 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 84% 22%, #cfff63 0 0.07rem, transparent 0.09rem),
    radial-gradient(circle at 67% 78%, #83eff7 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 40% 68%, white 0 0.06rem, transparent 0.08rem);
  content: "";
  opacity: 0.75;
}

.games-hero-chip {
  position: absolute;
  z-index: 7;
  inset: auto auto 0.55rem 50%;
  min-width: 9.4rem;
  padding: 0.34rem 0.7rem;
  border: 0.11rem solid rgba(255, 255, 255, 0.88);
  border-radius: 99px;
  background: linear-gradient(180deg, #efffa8, #bdef4d);
  color: #17323b;
  box-shadow: 0 0.24rem 0 #719b2d, 0 0.65rem 1.1rem rgba(0, 0, 0, 0.25);
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  transform: translateX(-50%);
}

.games-hero-orbit {
  position: absolute;
  z-index: 1;
  inset: 43% auto auto 50%;
  width: 14rem;
  aspect-ratio: 2.6;
  border: 0.1rem solid rgba(172, 249, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.games-hero-orbit.is-two {
  width: 9.4rem;
  transform: translate(-50%, -50%) rotate(24deg);
}

.games-hero-junk,
.games-hero-arrow {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0.45rem 0.45rem rgba(1, 10, 30, 0.38));
}

.games-hero-junk {
  width: 3.65rem;
  aspect-ratio: 1;
  border: 0.15rem solid rgba(255, 255, 255, 0.82);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 30% 22%, white 0 7%, transparent 8%),
    linear-gradient(145deg, #dffff4, #57dfdd 52%, #1684a5);
  box-shadow: inset -0.35rem -0.5rem 0.7rem rgba(4, 42, 75, 0.24), 0 0 1rem rgba(102, 237, 241, 0.45);
  color: #132a48;
  animation: games-junk-float 2.8s ease-in-out infinite alternate;
}

.games-hero-junk b {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: -0.07em;
}

.games-hero-junk.is-satellite {
  inset: 1.4rem auto auto 22%;
}

.games-hero-junk.is-satellite::before,
.games-hero-junk.is-satellite::after {
  position: absolute;
  top: 50%;
  width: 1.25rem;
  height: 2rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.72);
  background: repeating-linear-gradient(90deg, #2866aa 0 0.28rem, #72dce8 0.3rem 0.36rem);
  content: "";
  transform: translateY(-50%);
}

.games-hero-junk.is-satellite::before { right: 94%; }
.games-hero-junk.is-satellite::after { left: 94%; }

.games-hero-junk.is-satellite i {
  position: absolute;
  inset: -0.7rem auto auto 50%;
  width: 1.7rem;
  height: 0.72rem;
  border: 0.1rem solid white;
  border-radius: 50% 50% 0.3rem 0.3rem;
  background: #cfff63;
  transform: translateX(-50%);
}

.games-hero-junk.is-rocket {
  inset: 2rem 20% auto auto;
  width: 3rem;
  border-radius: 50% 50% 0.85rem 0.85rem;
  background:
    radial-gradient(circle at 28% 20%, white 0 7%, transparent 8%),
    linear-gradient(145deg, #ffe4f5, #ff8ed9 48%, #7556dc);
  box-shadow: inset -0.3rem -0.5rem 0.7rem rgba(54, 30, 111, 0.28), 0 0 1rem rgba(255, 142, 217, 0.45);
  animation-delay: -1.2s;
  transform: rotate(18deg);
}

.games-hero-junk.is-rocket i {
  position: absolute;
  inset: auto 16% -0.72rem;
  height: 1rem;
  background: linear-gradient(180deg, #fff06c, #ff8b6d 60%, transparent);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 50% 58%, 30% 100%);
}

.games-hero-arrow {
  inset: 45% auto auto 50%;
  width: 3.2rem;
  aspect-ratio: 1;
  border: 0.14rem solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: #cfff63;
  color: #17323b;
  box-shadow: 0 0 1.2rem rgba(207, 255, 99, 0.62);
  font-size: 1.35rem;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.games-hero-spark {
  position: absolute;
  z-index: 5;
  color: white;
  filter: drop-shadow(0 0 0.42rem #cfff63);
  animation: cleanup-spark-pop 1.7s ease-in-out infinite alternate;
}

.games-hero-spark.is-one { inset: 0.8rem auto auto 47%; }
.games-hero-spark.is-two { inset: 2.7rem 8% auto auto; animation-delay: -0.6s; color: #ff9edd; }
.games-hero-spark.is-three { inset: auto auto 1.5rem 9%; animation-delay: -1.15s; color: #82f0ff; }

.game-library {
  display: grid;
  gap: 0.72rem;
  margin-block: 0.85rem 0.2rem;
}

.game-choice {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 7.15rem;
  grid-template-columns: 5.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  overflow: hidden;
  border: 0.14rem solid rgba(255, 255, 255, 0.52);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 90% 15%, rgba(207, 255, 99, 0.2), transparent 30%),
    linear-gradient(145deg, #173f55, #102639);
  color: white;
  box-shadow:
    0 0.35rem 0 #0a2736,
    0 0.8rem 1.35rem rgba(16, 36, 48, 0.18),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.22);
  text-align: start;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.game-choice:last-child {
  background:
    radial-gradient(circle at 90% 15%, rgba(255, 142, 217, 0.18), transparent 30%),
    linear-gradient(145deg, #29305d, #161d3f);
  box-shadow:
    0 0.35rem 0 #111838,
    0 0.8rem 1.35rem rgba(25, 28, 66, 0.18),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.22);
}

.game-choice:is(:hover, :focus-visible) {
  border-color: #cfff63;
  box-shadow:
    0 0.35rem 0 #597a2a,
    0 0 0 0.2rem rgba(207, 255, 99, 0.18),
    0 0.9rem 1.5rem rgba(16, 36, 48, 0.22);
  transform: translateY(-0.08rem);
}

.game-choice-current {
  position: absolute;
  inset: 0.55rem 0.58rem auto auto;
  display: none;
  padding: 0.18rem 0.38rem;
  border-radius: 99px;
  background: #cfff63;
  color: #15333b;
  font-family: var(--mono);
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.game-choice.is-active .game-choice-current {
  display: block;
}

.game-choice-art {
  position: relative;
  display: grid;
  width: 5.1rem;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 0.12rem solid rgba(255, 255, 255, 0.34);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 0.12rem 0 rgba(255, 255, 255, 0.22);
}

.game-choice-globe {
  position: absolute;
  width: 3.65rem;
  aspect-ratio: 1;
  border: 0.1rem solid rgba(229, 255, 255, 0.64);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.22) 49% 51%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 255, 255, 0.18) 49% 51%, transparent 53%),
    radial-gradient(circle at 32% 26%, #a7fff4, #35b8d2 48%, #176083);
  box-shadow: 0 0 0.9rem rgba(101, 233, 239, 0.56);
}

.game-choice-vortex {
  position: absolute;
  inset: 1rem auto auto 0.65rem;
  color: #d4ff68;
  font-size: 1.4rem;
  font-style: normal;
  text-shadow: 0 0 0.5rem #cfff63;
}

.game-choice-satellite {
  position: absolute;
  inset: auto 0.55rem 0.75rem auto;
  display: grid;
  width: 1.5rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.08rem solid white;
  border-radius: 0.4rem;
  background: #ff8ed9;
  color: #241d4c;
  font-size: 0.55rem;
  font-style: normal;
  transform: rotate(12deg);
}

.game-choice-art-classic {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  padding: 0.7rem;
  background:
    radial-gradient(circle, rgba(224, 247, 246, 0.28) 0 0.08rem, transparent 0.1rem) 0 0 / 0.7rem 0.7rem,
    linear-gradient(145deg, #f9f8f2, #d9e2e1);
}

.game-choice-art-classic i {
  color: #143b4b;
  filter: drop-shadow(0 0.12rem 0 #69d8e2);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 900;
}

.game-choice-art-classic i:last-child {
  grid-column: 1 / -1;
}

.game-choice-copy {
  min-width: 0;
}

.game-choice-copy small,
.game-choice-copy strong,
.game-choice-copy > span {
  display: block;
}

.game-choice-copy small {
  color: #cfff63;
  font-family: var(--mono);
  font-size: 0.49rem;
  letter-spacing: 0.08em;
}

.game-choice-copy strong {
  margin-block: 0.15rem 0.18rem;
  font-size: 1.12rem;
  letter-spacing: -0.035em;
}

.game-choice-copy > span {
  color: rgba(235, 252, 255, 0.72);
  font-size: 0.6rem;
  line-height: 1.35;
}

.game-choice-action {
  align-self: end;
  color: #cfff63;
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@keyframes games-junk-float {
  to { translate: 0.22rem -0.32rem; rotate: 6deg; scale: 1.04; }
}

.flow-hub-modal {
  --modal-accent: #cfff63;
  --modal-accent-soft: #efffd2;
  --modal-deep: #173d52;
}

.flow-hub-card {
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 136, 213, 0.22), transparent 28%),
    radial-gradient(circle at 5% 40%, rgba(98, 232, 238, 0.2), transparent 32%),
    repeating-linear-gradient(118deg, transparent 0 19px, rgba(19, 42, 51, 0.018) 19px 20px),
    var(--card);
}

.cleanup-control-hero {
  position: relative;
  height: 9rem;
  margin: 0 -0.72rem 1.15rem;
  overflow: hidden;
  border: 0.12rem solid rgba(255, 255, 255, 0.68);
  border-radius: 1.55rem 1.55rem 1.15rem 1.15rem;
  background:
    radial-gradient(circle at 50% 51%, rgba(197, 255, 93, 0.3), transparent 18%),
    radial-gradient(circle at 23% 24%, rgba(104, 236, 244, 0.3), transparent 28%),
    linear-gradient(145deg, #173f55, #151f43 62%, #51305d);
  box-shadow:
    inset 0 -1rem 2.4rem rgba(2, 10, 28, 0.36),
    0 0.65rem 1.25rem rgba(28, 42, 79, 0.2);
}

.cleanup-control-hero::before,
.cleanup-control-hero::after {
  position: absolute;
  inset: 50% auto auto 50%;
  aspect-ratio: 1.9;
  border: 0.1rem solid rgba(174, 248, 255, 0.28);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%) rotate(-12deg);
}

.cleanup-control-hero::before { width: 13.5rem; }
.cleanup-control-hero::after { width: 9.4rem; transform: translate(-50%, -50%) rotate(22deg); }

.cleanup-hero-chip {
  position: absolute;
  z-index: 6;
  inset: auto auto 0.58rem 50%;
  min-width: 9.8rem;
  padding: 0.34rem 0.72rem;
  border: 0.11rem solid rgba(255, 255, 255, 0.86);
  border-radius: 99px;
  background: linear-gradient(180deg, #ecff9c, #b9ef49);
  color: #17323b;
  box-shadow: 0 0.24rem 0 #719b2d, 0 0.65rem 1.1rem rgba(0, 0, 0, 0.26);
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  transform: translateX(-50%);
}

.cleanup-recycler {
  position: absolute;
  z-index: 4;
  inset: 47% auto auto 50%;
  display: grid;
  width: 4.9rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.28rem solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  background: conic-gradient(from 30deg, #cfff63, #63e8ee, #a88cff, #ff8ed9, #cfff63);
  box-shadow: 0 0 0 0.48rem rgba(201, 255, 99, 0.12), 0 0 1.7rem rgba(111, 237, 239, 0.6);
  transform: translate(-50%, -50%);
  animation: cleanup-recycler-float 2.1s ease-in-out infinite alternate;
}

.cleanup-recycler::before {
  position: absolute;
  inset: 0.62rem;
  border-radius: 50%;
  background: #102b3f;
  box-shadow: inset 0 0 0 0.12rem rgba(255, 255, 255, 0.32);
  content: "";
}

.cleanup-recycler span {
  position: relative;
  z-index: 1;
  color: #eaffff;
  font-size: 1.75rem;
  text-shadow: 0 0 0.75rem #cfff63;
}

.cleanup-junk {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 1.65rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.1rem solid rgba(255, 255, 255, 0.78);
  border-radius: 0.55rem;
  background: linear-gradient(145deg, #ecffff, #6ae3ed 48%, #356bba);
  color: #132a4a;
  box-shadow: 0 0.22rem 0 #28537b, 0 0 0.75rem rgba(99, 232, 238, 0.65);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 900;
  animation: cleanup-junk-drift 2.8s ease-in-out infinite alternate;
}

.cleanup-junk.is-satellite { inset: 1.35rem auto auto 17%; transform: rotate(-12deg); }
.cleanup-junk.is-crystal { inset: 1.1rem 18% auto auto; background: linear-gradient(145deg, #fff, #ff8ed9 48%, #7959d5); animation-delay: -0.7s; }
.cleanup-junk.is-capsule { inset: auto auto 1.65rem 10%; border-radius: 99px; animation-delay: -1.35s; }
.cleanup-junk.is-bot { inset: auto 10% 1.75rem auto; background: linear-gradient(145deg, #fff8a9, #cfff63 48%, #4da78b); animation-delay: -2s; }

.cleanup-spark {
  position: absolute;
  z-index: 5;
  color: white;
  filter: drop-shadow(0 0 0.42rem #cfff63);
  font-family: var(--mono);
  animation: cleanup-spark-pop 1.7s ease-in-out infinite alternate;
}

.cleanup-spark.is-one { inset: 0.8rem auto auto 38%; }
.cleanup-spark.is-two { inset: 1.4rem 35% auto auto; animation-delay: -0.3s; }
.cleanup-spark.is-three { inset: auto auto 1.5rem 34%; animation-delay: -0.65s; color: #ff9edd; }
.cleanup-spark.is-four { inset: 3.2rem auto auto 8%; animation-delay: -0.95s; }
.cleanup-spark.is-five { inset: 3rem 8% auto auto; animation-delay: -1.2s; color: #82f0ff; }
.cleanup-spark.is-six { inset: auto 30% 1rem auto; animation-delay: -1.5s; }

.flow-hub-card > .modal-copy {
  margin-block-end: 0.3rem;
}

.flow-hub-grid {
  margin-block: 0.85rem 1rem;
}

.flow-hub-grid .flow-event-card,
.flow-hub-grid .flow-meta-card {
  box-shadow:
    0 0.38rem 0 color-mix(in srgb, var(--event-color, #82b5ff) 16%, rgba(19, 42, 51, 0.13)),
    0 0.85rem 1.4rem rgba(31, 49, 49, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.flow-hub-return {
  margin-block-start: 0.2rem;
}

.orbit-reward-icon {
  position: relative;
}

.orbit-reward-icon::before,
.orbit-reward-icon::after {
  position: absolute;
  color: white;
  content: "✦";
  filter: drop-shadow(0 0 0.4rem var(--reward-color));
  opacity: 0;
}

.orbit-reward-icon::before { inset: -0.65rem auto auto -0.55rem; }
.orbit-reward-icon::after { inset: auto -0.7rem -0.55rem auto; }

.orbit-reward-burst.is-visible .orbit-reward-icon::before,
.orbit-reward-burst.is-visible .orbit-reward-icon::after {
  animation: cleanup-spark-pop 410ms ease-out 2 alternate;
}

.orbit-reward-burst i {
  width: 0.55rem;
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 0.32rem var(--reward-color));
}

.orbit-reward-burst i:nth-of-type(n + 7) {
  width: 0.36rem;
}

@keyframes flow-hub-shimmer {
  0%, 62% { translate: 0; opacity: 0; }
  72% { opacity: 1; }
  92%, 100% { translate: 460% 0; opacity: 0; }
}

@keyframes flow-hub-spark {
  from { opacity: 0.28; scale: 0.55; rotate: -18deg; }
  to { opacity: 1; scale: 1.2; rotate: 18deg; }
}

@keyframes cleanup-recycler-float {
  to { translate: 0 -0.28rem; rotate: 5deg; scale: 1.04; }
}

@keyframes cleanup-junk-drift {
  to { translate: 0.3rem -0.45rem; rotate: 14deg; scale: 1.06; }
}

@keyframes cleanup-spark-pop {
  from { opacity: 0.22; scale: 0.45; rotate: -12deg; }
  to { opacity: 1; scale: 1.18; rotate: 12deg; }
}

@media (max-width: 41.99rem) {
  .topbar {
    min-height: 3.8rem;
    padding: max(0.55rem, env(safe-area-inset-top)) 0.9rem 0.4rem;
  }

  .brand {
    min-height: 44px;
    gap: 0.5rem;
    font-size: 0.76rem;
  }

  .brand-mark {
    width: 2rem;
    border-radius: 0.68rem;
  }

  .brand-mark svg {
    width: 1.4rem;
  }

  .topbar-actions {
    gap: 0.42rem;
  }

  .streak-chip,
  .header-logout-button {
    min-height: 2.35rem;
    height: 2.35rem;
    padding-inline: 0.62rem;
  }

  .avatar-button {
    width: 2.35rem;
  }

  .view {
    padding: 0.15rem 0.9rem 6.75rem;
  }

  .games-modal {
    width: min(calc(100% - 0.5rem), 31.5rem);
    max-height: calc(100dvh - 0.5rem);
    margin: auto auto 0;
  }

  .games-card {
    max-height: calc(100dvh - 0.5rem);
    padding: 0.45rem 0.9rem max(1rem, env(safe-area-inset-bottom));
    border-radius: 2rem 2rem 0.45rem 0.45rem;
  }

  .games-card::after {
    border-radius: 1.55rem 1.55rem 0.32rem 0.32rem;
  }

  .games-hero {
    height: 7rem;
    margin: 0 -0.32rem 0.8rem;
  }

  .games-hero-junk {
    width: 3.15rem;
  }

  .games-hero-junk.is-satellite { left: 23%; }
  .games-hero-junk.is-rocket { right: 21%; width: 2.65rem; }

  .games-hero-arrow {
    width: 2.8rem;
    font-size: 1.15rem;
  }

  .games-card > .eyebrow {
    margin-block-end: 0.2rem;
    padding: 0.22rem 0.46rem;
    font-size: 0.46rem;
  }

  .games-card h2 {
    margin-block: 0.42rem 0.25rem;
    font-size: 1.55rem;
  }

  .games-card > .modal-copy {
    margin-block-end: 0.55rem;
    font-size: 0.68rem;
  }

  .game-library {
    gap: 0.62rem;
    margin-block-start: 0.55rem;
  }

  .game-choice {
    min-height: 6.25rem;
    grid-template-columns: 4.35rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.65rem;
    border-radius: 1.25rem;
  }

  .game-choice-art {
    width: 4.35rem;
    border-radius: 1rem;
  }

  .game-choice-globe {
    width: 3.2rem;
  }

  .game-choice-copy strong {
    font-size: 1rem;
  }

  .game-choice-action {
    position: absolute;
    inset: auto 0.72rem 0.65rem auto;
  }

  .flow-hub-launch {
    min-height: 2.9rem;
    margin-block: 0.18rem 0.42rem;
    padding: 0.38rem 0.5rem;
    border-radius: 0.9rem;
  }

  .flow-hub-launch-icon {
    width: 1.85rem;
    border-radius: 0.62rem;
    font-size: 0.76rem;
  }

  .orbit-liveops {
    grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(0, 0.85fr));
    gap: 0.35rem;
    margin-block: 0.3rem 0.55rem;
  }

  .flow-event-card {
    grid-column: auto;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.38rem;
    min-height: 4rem;
    padding: 0.48rem;
    border-radius: 0.9rem;
  }

  .flow-event-card::after {
    width: 4rem;
    border-width: 0.58rem;
  }

  .flow-event-icon {
    width: 1.85rem;
    border-width: 0.08rem;
    border-radius: 0.62rem;
    font-size: 0.78rem;
  }

  .flow-event-copy {
    padding-inline-end: 1.65rem;
  }

  .flow-event-copy .flow-card-label,
  .flow-event-copy small,
  .flow-event-clock small {
    display: none;
  }

  .flow-event-copy strong {
    margin: 0;
    overflow: hidden;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flow-event-copy progress {
    height: 0.22rem;
    margin-block-start: 0.34rem;
  }

  .flow-event-clock {
    position: absolute;
    z-index: 2;
    inset: 0.45rem 0.48rem auto auto;
  }

  .flow-event-clock time {
    font-size: 0.5rem;
  }

  .flow-meta-card {
    min-height: 4rem;
    padding: 0.48rem;
    border-radius: 0.9rem;
  }

  .flow-meta-card .flow-card-label {
    font-size: 0.39rem;
    letter-spacing: 0.06em;
  }

  .flow-rank-line,
  .flow-daily-line {
    display: block;
    margin-block: 0.12rem 0.22rem;
    line-height: 1;
  }

  .flow-rank-line strong,
  .flow-daily-line strong {
    font-size: 0.9rem;
  }

  .flow-rank-line span,
  .flow-daily-line span {
    display: block;
    margin-block-start: 0.1rem;
    overflow: hidden;
    font-size: 0.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flow-meta-card progress {
    height: 0.2rem;
  }

  .flow-collection-button {
    margin-block-start: 0.22rem;
    overflow: hidden;
    font-size: 0.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flow-daily-card > small {
    display: none;
  }

  .flow-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-block: 0.75rem 0.9rem;
  }

  .flow-hub-grid .flow-event-card {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    min-height: 5rem;
    padding: 0.72rem;
    border-radius: 1.1rem;
  }

  .flow-hub-grid .flow-event-icon {
    width: 2.8rem;
    border-width: 0.12rem;
    border-radius: 0.95rem;
    font-size: 1.1rem;
  }

  .flow-hub-grid .flow-event-copy {
    padding-inline-end: 0;
  }

  .flow-hub-grid .flow-event-copy .flow-card-label,
  .flow-hub-grid .flow-event-copy small,
  .flow-hub-grid .flow-event-clock small {
    display: block;
  }

  .flow-hub-grid .flow-event-copy .flow-card-label {
    font-size: 0.48rem;
  }

  .flow-hub-grid .flow-event-copy strong {
    margin-block-start: 0.12rem;
    font-size: 0.78rem;
  }

  .flow-hub-grid .flow-event-copy small {
    margin-block-start: 0.08rem;
    font-size: 0.54rem;
  }

  .flow-hub-grid .flow-event-copy progress {
    height: 0.3rem;
    margin-block-start: 0.42rem;
  }

  .flow-hub-grid .flow-event-clock {
    position: relative;
    inset: auto;
  }

  .flow-hub-grid .flow-event-clock time {
    font-size: 0.77rem;
  }

  .flow-hub-grid .flow-event-clock small {
    margin-block-start: 0.3rem;
    font-size: 0.48rem;
  }

  .flow-hub-grid .flow-meta-card {
    min-height: 5.4rem;
    padding: 0.7rem;
    border-radius: 1.1rem;
  }

  .flow-hub-grid .flow-meta-card .flow-card-label {
    font-size: 0.48rem;
    letter-spacing: 0.1em;
  }

  .flow-hub-grid :is(.flow-rank-line, .flow-daily-line) {
    display: flex;
    margin-block: 0.25rem 0.38rem;
    line-height: normal;
  }

  .flow-hub-grid :is(.flow-rank-line, .flow-daily-line) strong {
    font-size: 1.22rem;
  }

  .flow-hub-grid :is(.flow-rank-line, .flow-daily-line) span {
    display: inline;
    margin: 0;
    font-size: 0.5rem;
  }

  .flow-hub-grid .flow-meta-card progress {
    height: 0.3rem;
  }

  .flow-hub-grid .flow-collection-button {
    margin-block-start: 0.45rem;
    font-size: 0.52rem;
  }

  .flow-hub-grid .flow-daily-card > small {
    display: block;
    margin-block-start: 0.42rem;
    font-size: 0.48rem;
  }

  .cleanup-control-hero {
    height: 7.7rem;
  }

  .cleanup-recycler {
    width: 4.2rem;
  }

  .game-heading,
  .section-heading {
    margin-block: 0.35rem 0.65rem;
  }

  .game-heading .eyebrow,
  .section-heading .eyebrow {
    margin-block-end: 0.16rem;
    font-size: 0.48rem;
  }

  .game-heading h1,
  .section-heading h1,
  .orbit-heading h1 {
    font-size: 1.42rem;
    line-height: 1.05;
  }

  .score-block span {
    font-size: 0.48rem;
  }

  .score-block strong {
    font-size: 0.84rem;
  }

  .completion-ring {
    width: 2.8rem;
    font-size: 0.54rem;
  }

  .completion-ring::before {
    width: 2.12rem;
  }

  .journey-hero {
    min-height: 6.25rem;
    grid-template-columns: minmax(0, 1fr) 3.6rem;
    gap: 0.55rem;
    margin-block-end: 0.55rem;
    padding: 0.72rem 0.82rem 2.15rem;
    border-radius: 1.2rem;
  }

  .journey-hero-eyebrow {
    margin-block-end: 0.35rem;
    font-size: 0.46rem;
  }

  .journey-hero-copy > strong {
    font-size: 1.18rem;
  }

  .journey-hero-copy > small {
    margin-block-start: 0.16rem;
    font-size: 0.56rem;
  }

  .journey-hero-orbit {
    width: 3.5rem;
  }

  .journey-hero-orbit > span {
    width: 2.2rem;
    font-size: 0.56rem;
  }

  .journey-hero-action {
    inset: auto auto 0.58rem 0.82rem;
    font-size: 0.58rem;
  }

  .journey-summary {
    gap: 0.35rem;
    margin-block-end: 0.85rem;
  }

  .journey-summary > div {
    gap: 0.12rem;
    padding: 0.5rem 0.2rem;
    border-radius: 0.78rem;
  }

  .achievement-count strong {
    font-size: 1.2rem;
  }

  .achievement-count span {
    font-size: 0.58rem;
  }

  .featured-achievement {
    min-height: 5.6rem;
    gap: 0.7rem;
    margin-block-end: 0.7rem;
    padding: 0.75rem;
    border-radius: 1.2rem;
  }

  .featured-orbit {
    width: 3.15rem;
  }

  .featured-orbit span {
    width: 2.1rem;
    font-size: 0.95rem;
  }

  .featured-achievement p {
    margin-block-end: 0.15rem;
    font-size: 0.48rem;
  }

  .featured-achievement h2 {
    margin-block-end: 0.12rem;
    font-size: 0.94rem;
  }

  .featured-achievement > div:last-child > span {
    display: block;
    overflow: hidden;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-hero {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    grid-template-areas:
      "avatar eyebrow"
      "avatar title"
      "avatar subtitle"
      "avatar action";
    column-gap: 0.75rem;
    padding-block: 0.35rem 0.85rem;
    text-align: start;
  }

  .profile-avatar {
    grid-area: avatar;
    width: 3.45rem;
    margin: 0;
    border-width: 0.32rem;
    font-size: 1rem;
  }

  .profile-hero .eyebrow {
    grid-area: eyebrow;
    margin-block-end: 0.05rem;
    font-size: 0.45rem;
  }

  .profile-hero h1 {
    grid-area: title;
    margin-block-end: 0.1rem;
    font-size: 1.3rem;
  }

  .profile-hero > p:not(.eyebrow) {
    grid-area: subtitle;
    max-width: none;
    margin-block-end: 0.35rem;
    overflow: hidden;
    font-size: 0.6rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-hero .button {
    grid-area: action;
    width: fit-content;
    min-height: 2.6rem;
    padding: 0.48rem 0.78rem;
    font-size: 0.64rem;
  }
}

@media (min-width: 42rem) and (pointer: fine) {
  body {
    padding-block: 1.25rem;
  }

  .app-shell {
    min-height: calc(100dvh - 2.5rem);
    border-radius: 2rem;
  }

  .bottom-nav {
    inset-block-end: 1.25rem;
    border-radius: 0 0 2rem 2rem;
  }

  .control-button kbd {
    display: inline;
  }
}

@media (max-height: 46rem) {
  .topbar {
    min-height: 4.2rem;
  }

  .game-heading {
    margin-block: 0.35rem 0.7rem;
  }

  .board-wrap {
    aspect-ratio: 1.08;
    margin-block: 0.45rem;
  }

  .game-card {
    padding-block: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .view,
  .arrow-piece.is-hint,
  .arrow-piece.is-blocked,
  .orbit-route-preview,
  .orbit-touch-guide-path,
  .orbit-hover-route,
  .orbit-oddity-group.is-blocked-feedback .orbit-route-status-ring,
  .orbit-oddity-group.is-blocked-feedback .orbit-route-status-mark,
  .orbit-blocker-wisp > *,
  .orbit-rocket-glow,
  .orbit-rocket-plume,
  .orbit-rocket-flame,
  .orbit-rocket-core,
  .orbit-rocket-bloom,
  .orbit-rocket-sparks,
  .orbit-oddity,
  .orbit-surface-art,
  .orbit-vortex-arm,
  .orbit-whirlpool.is-preview-target .orbit-vortex-pool-rim,
  .orbit-whirlpool.is-preview-target .orbit-whirlpool-core-rim,
  .orbit-whirlpool.is-catching,
  .orbit-whirlpool.is-overcharged .orbit-vortex-aura,
  .orbit-whirlpool.is-catching .orbit-whirlpool-core-rim,
  .orbit-whirlpool.is-catching .orbit-vortex-pool-rim,
  .orbit-reward-burst.is-visible,
  .orbit-reward-burst.is-visible i,
  .orbit-reward-burst.is-visible .orbit-reward-icon::before,
  .orbit-reward-burst.is-visible .orbit-reward-icon::after,
  .orbit-stage.is-level-arriving #orbit-sphere,
  .orbit-stage.is-level-arriving .orbit-hit-layer,
  .orbit-stage.is-level-arriving .orbit-level-arrival,
  .orbit-stage.is-level-arriving .orbit-level-arrival::before,
  .orbit-stage.is-level-arriving .orbit-level-arrival::after,
  .orbit-stage.is-level-arriving .orbit-arrival-ring,
  .orbit-stage.is-level-arriving .orbit-arrival-badge,
  .orbit-stage.is-level-arriving .orbit-arrival-badge::before,
  .orbit-stage.is-level-arriving .orbit-arrival-particles i,
  .classic-surge-meter.is-surging::after,
  .flow-hub-launch::after,
  .flow-hub-launch > i,
  .cleanup-recycler,
  .cleanup-junk,
  .cleanup-spark,
  .games-hero-junk,
  .games-hero-spark,
  .orbit-help-globe,
  .orbit-help-vortex,
  .orbit-help-junk,
  .orbit-help-route,
  .orbit-help-spark,
  .orbit-help-start::after,
  .modal-hero-orbit,
  .modal-spark,
  .modal-hero .modal-brand-mark,
  .modal-hero .celebration-mark,
  .modal-hero .confirm-icon,
  .collection-planet,
  .heart-countdown.is-hit,
  .modal[open] {
    animation: none !important;
  }

  .orbit-stage.is-level-arriving :is(#orbit-sphere, .orbit-hit-layer) {
    opacity: 1;
    transform: none;
  }

  .orbit-stage.is-level-arriving .orbit-level-arrival {
    opacity: 1;
  }

  .orbit-stage.is-level-arriving .orbit-arrival-ring,
  .orbit-stage.is-level-arriving .orbit-arrival-particles,
  .orbit-stage.is-level-arriving .orbit-level-arrival::before,
  .orbit-stage.is-level-arriving .orbit-level-arrival::after {
    display: none;
  }

  .orbit-surface-art-world {
    opacity: 0.12;
  }

  .orbit-surface-art-eye,
  .orbit-surface-art-cosmos {
    display: none;
  }

  .orbit-stage[data-world-face-surface] .orbit-surface-art-world {
    display: none;
    opacity: 0;
  }

  .orbit-stage[data-world-face-surface="world"] .orbit-surface-art-world,
  .orbit-stage[data-world-face-surface="eye"] .orbit-surface-art-eye,
  .orbit-stage[data-world-face-surface="cosmos"] .orbit-surface-art-cosmos {
    display: block;
    opacity: 0.12;
  }

  .modal {
    transform: none;
    transition-duration: 100ms;
  }

  .modal[open] {
    transform: none;
  }

  .orbit-reward-burst.is-visible {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1);
  }

  .achievement-splash[open],
  .achievement-splash::backdrop,
  .achievement-splash-card,
  .achievement-splash-icon {
    animation: achievement-splash-reduced 1600ms ease both;
  }

  .achievement-splash-rays,
  .achievement-splash-particles {
    display: none;
  }

  .board-message.is-visible {
    animation: message-pop-reduced 420ms ease both;
  }

  .board-message.orbit-message.is-visible {
    animation: orbit-message-pop-reduced 1000ms ease both;
  }

  .board-message.orbit-message.is-visible :is(.orbit-message-icon, .orbit-message-sparkles i) {
    animation: none;
  }

  .skip-link,
  .heart,
  .switch,
  .switch span,
  .toast,
  .modal,
  .modal-close,
  .world-face-card,
  .classic-surge-meter,
  .classic-surge-pips i,
  .orbit-arrow-hit::before,
  .arrow-piece::before,
  .arrow-shape {
    transition: none !important;
  }

  .progress-track::-webkit-progress-value {
    transition: none !important;
  }
}

@keyframes message-pop-reduced {
  0%, 100% { opacity: 0; }
  10%, 78% { opacity: 1; }
}

@keyframes orbit-message-pop-reduced {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  12%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes achievement-splash-reduced {
  0%, 100% { opacity: 0; }
  10%, 82% { opacity: 1; }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(19, 42, 51, 0.28);
  }

  .achievement-splash-card {
    border-width: 0.18rem;
  }
}

@media (forced-colors: active) {
  .achievement-splash-card,
  .achievement-splash-icon {
    border: 0.18rem solid Highlight;
  }

  .achievement-splash-rays,
  .achievement-splash-particles {
    display: none;
  }
}

/* Classic collection pages: bright, tactile 2.5D mobile-game treatment. */
html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) {
  background: #061a2b;
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) body {
  background:
    radial-gradient(circle at 50% -10%, rgba(139, 226, 255, 0.55), transparent 30rem),
    #061a2b;
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .app-shell {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.34) 0 0.1rem, transparent 0.14rem),
    radial-gradient(circle at 88% 17%, rgba(255, 246, 167, 0.46) 0 0.12rem, transparent 0.17rem),
    radial-gradient(circle at 74% 32%, rgba(255, 255, 255, 0.24) 0 0.07rem, transparent 0.11rem),
    linear-gradient(180deg, #2aa8dc 0%, #2786d5 32%, #2764bd 74%, #344da1 100%);
  box-shadow: 0 0 5rem rgba(0, 15, 36, 0.42);
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .topbar {
  border-block-end: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(8, 40, 76, 0.78), rgba(8, 44, 88, 0.34));
  color: white;
  backdrop-filter: blur(1.15rem);
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .brand-mark {
  border-color: rgba(255, 255, 255, 0.74);
  background: linear-gradient(145deg, #eaff9f, #93e951);
  color: #16412f;
  box-shadow: 0 0.18rem 0 #3d8a49, 0 0.35rem 0.75rem rgba(7, 31, 54, 0.24), inset 0 0.1rem 0 white;
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) :is(.streak-chip, .avatar-button) {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(5, 32, 67, 0.48);
  color: white;
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.22);
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .bottom-nav {
  gap: 0.28rem;
  padding: 0.52rem 0.6rem max(0.66rem, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 1.3rem 1.3rem 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(231, 245, 255, 0.97));
  box-shadow: 0 -0.3rem 1.4rem rgba(4, 32, 75, 0.24), inset 0 0.1rem 0 white;
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .nav-item {
  min-height: 3.45rem;
  border: 0.08rem solid transparent;
  border-radius: 1rem;
  color: #496071;
  font-size: 0.68rem;
  font-weight: 850;
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .nav-item svg {
  width: 1.45rem;
  filter: drop-shadow(0 0.08rem 0 rgba(36, 66, 82, 0.16));
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .nav-item.is-active {
  border-color: #80b83e;
  background: linear-gradient(145deg, #efffa9, #b5ef59);
  color: #173d35;
  box-shadow: 0 0.18rem 0 #5d9437, 0 0.35rem 0.7rem rgba(36, 82, 65, 0.2), inset 0 0.1rem 0 white;
  transform: translateY(-0.12rem);
}

html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) .nav-item.is-active::before {
  display: none;
}

.view-journey,
.view-achievements,
.view-profile {
  padding-block-start: 0.75rem;
}

.collection-page-heading {
  min-height: 5.25rem;
  align-items: center;
  margin: 0 0 0.9rem;
  padding-inline: 0.18rem;
  color: white;
}

.collection-page-heading > div:first-child {
  min-width: 0;
}

.page-kicker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin: 0 0 0.3rem;
  padding: 0.28rem 0.55rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(7, 44, 92, 0.44);
  color: #f3ffaf;
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.2);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.collection-page-heading h1 {
  color: white;
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  text-shadow: 0 0.14rem 0 rgba(7, 41, 83, 0.45);
}

.collection-page-subtitle {
  margin: 0.34rem 0 0;
  color: rgba(239, 250, 255, 0.82);
  font-size: clamp(0.68rem, 2.8vw, 0.78rem);
  font-weight: 650;
}

.collection-section-heading {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  margin: 1.05rem 0 0.72rem;
  color: white;
}

.collection-section-heading > span {
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.1rem solid rgba(255, 255, 255, 0.64);
  border-radius: 0.88rem;
  background: linear-gradient(145deg, #fff4ae, #ffc75b);
  box-shadow: 0 0.18rem 0 #b06b29, 0 0.45rem 0.8rem rgba(5, 40, 83, 0.22), inset 0 0.1rem 0 white;
  font-size: 1.15rem;
}

.collection-section-heading small {
  display: block;
  margin-block-end: 0.08rem;
  color: #d9f4ff;
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.collection-section-heading h2 {
  margin: 0;
  color: white;
  font-size: 1.05rem;
  text-shadow: 0 0.1rem 0 rgba(9, 44, 86, 0.45);
}

/* Journey */
.collection-page-heading .completion-ring {
  width: 4.25rem;
  border: 0.15rem solid rgba(255, 255, 255, 0.66);
  background: conic-gradient(#caff61 var(--percent), rgba(6, 44, 92, 0.5) 0);
  color: white;
  box-shadow: 0 0.24rem 0 #1d5c8f, 0 0.55rem 1rem rgba(4, 33, 71, 0.25), inset 0 0.1rem 0 rgba(255, 255, 255, 0.4);
}

.collection-page-heading .completion-ring::before {
  width: 3.18rem;
  background: linear-gradient(145deg, #274e9a, #17366f);
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.25);
}

.collection-page-heading .completion-ring strong,
.collection-page-heading .completion-ring small {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.collection-page-heading .completion-ring strong {
  font-size: 0.76rem;
}

.collection-page-heading .completion-ring small {
  margin-block-start: 0.06rem;
  color: #d9f5ff;
  font-size: 0.42rem;
  letter-spacing: 0.08em;
}

.view-journey .journey-hero {
  min-height: 10.75rem;
  grid-template-columns: minmax(0, 1fr) 6.4rem;
  margin-block-end: 0.85rem;
  padding: 1.25rem 1.2rem 3.3rem;
  border: 0.14rem solid rgba(255, 255, 255, 0.75);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.56), transparent 5.5rem),
    linear-gradient(145deg, hsl(var(--chapter-hue) 86% 69%), hsl(calc(var(--chapter-hue) + 24) 80% 54%) 62%, #5741aa);
  box-shadow: 0 0.42rem 0 hsl(var(--chapter-hue) 58% 37%), 0 1rem 2rem rgba(6, 34, 78, 0.3), inset 0 0.13rem 0 rgba(255, 255, 255, 0.72);
  isolation: isolate;
}

.view-journey .journey-hero::before {
  width: 13rem;
  inset: -7.5rem -3.5rem auto auto;
  border: 1.8rem solid rgba(255, 255, 255, 0.1);
}

.view-journey .journey-hero::after {
  width: 10rem;
  inset: auto auto -8.5rem -2rem;
  border: 1.4rem solid rgba(255, 255, 255, 0.09);
}

.journey-hero-rays {
  position: absolute;
  z-index: -1;
  width: 11rem;
  aspect-ratio: 1;
  inset: -2.1rem -2rem auto auto;
  border-radius: 50%;
  background: repeating-conic-gradient(from 12deg, rgba(255, 255, 255, 0.19) 0 9deg, transparent 9deg 22deg);
  mask: radial-gradient(circle, transparent 0 20%, black 22% 70%, transparent 72%);
  animation: collection-rays-turn 18s linear infinite;
}

.view-journey .journey-hero-copy {
  text-shadow: 0 0.12rem 0 rgba(38, 30, 96, 0.32);
}

.view-journey .journey-hero-eyebrow {
  width: fit-content;
  margin-block-end: 0.5rem;
  padding: 0.28rem 0.52rem;
  border-radius: 999px;
  background: rgba(34, 29, 94, 0.42);
  color: white;
  font-size: 0.58rem;
  font-weight: 800;
}

.view-journey .journey-hero-eyebrow > span {
  background: #edff83;
  box-shadow: 0 0 0 0.22rem rgba(240, 255, 141, 0.18), 0 0 0.55rem #e7ff73;
}

.view-journey .journey-hero-copy > strong {
  color: white;
  font-size: clamp(1.75rem, 8vw, 2.35rem);
}

.view-journey .journey-hero-copy > small {
  margin-block-start: 0.38rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.68rem, 2.8vw, 0.78rem);
  font-weight: 650;
}

.view-journey .journey-hero-orbit {
  width: 6.25rem;
  filter: drop-shadow(0 0.55rem 0.7rem rgba(31, 27, 90, 0.28));
}

.view-journey .journey-hero-orbit > span {
  width: 4.2rem;
  border: 0.16rem solid white;
  background: linear-gradient(145deg, #fffac2, #ffd15c 58%, #ef8b36);
  color: #56351b;
  box-shadow: 0 0.25rem 0 #a65a29, 0 0 0 0.42rem rgba(255, 255, 255, 0.18), inset 0 0.14rem 0 white;
  font-size: 0.9rem;
}

.view-journey .journey-hero-orbit svg {
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 2;
  animation: journey-route-float 2.4s ease-in-out infinite alternate;
}

.journey-token-face {
  position: absolute;
  display: grid;
  width: 1.75rem;
  aspect-ratio: 1;
  inset: 0.05rem 0.18rem auto auto;
  place-items: center;
  border: 0.1rem solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #d9ff9b, #87dc4c);
  color: #28532f;
  box-shadow: 0 0.14rem 0 #4f913c;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 900;
}

.view-journey .journey-hero-action {
  inset: auto auto 0.9rem 1.15rem;
  min-height: 2.05rem;
  padding: 0.34rem 0.72rem;
  border: 0.08rem solid #79a933;
  border-radius: 999px;
  background: linear-gradient(145deg, #edff9d, #b8ee58);
  color: #1d4934;
  box-shadow: 0 0.16rem 0 #588a32, inset 0 0.08rem 0 white;
  font-size: 0.7rem;
  font-weight: 900;
  text-shadow: none;
}

.journey-hero-spark,
.featured-award-spark {
  position: absolute;
  color: white;
  filter: drop-shadow(0 0 0.45rem rgba(255, 248, 161, 0.9));
  animation: collection-spark-pop 1.4s ease-in-out infinite alternate;
}

.journey-hero-spark.is-one { inset: 0.75rem 42% auto auto; }
.journey-hero-spark.is-two { inset: auto 1.15rem 0.85rem auto; animation-delay: -0.7s; }

.view-journey .journey-summary {
  gap: 0.52rem;
  margin-block-end: 0;
}

.view-journey .journey-summary > div {
  position: relative;
  display: grid;
  min-height: 4.35rem;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0.02rem 0.42rem;
  padding: 0.68rem 0.48rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.68);
  border-radius: 1.05rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(225, 242, 255, 0.9));
  color: #173b64;
  box-shadow: 0 0.22rem 0 rgba(24, 77, 124, 0.45), 0 0.5rem 0.9rem rgba(4, 40, 82, 0.18), inset 0 0.08rem 0 white;
  text-align: start;
}

.view-journey .journey-summary i {
  display: grid;
  width: 1.75rem;
  aspect-ratio: 1;
  grid-row: 1 / -1;
  place-items: center;
  border-radius: 0.58rem;
  background: linear-gradient(145deg, #fff3a4, #ffc24f);
  color: #80501e;
  box-shadow: 0 0.13rem 0 #a96627, inset 0 0.07rem 0 white;
  font-size: 0.78rem;
  font-style: normal;
}

.view-journey .journey-summary span {
  color: #587086;
  font-size: 0.5rem;
  font-weight: 800;
}

.view-journey .journey-summary strong {
  color: #173b64;
  font-size: clamp(0.68rem, 2.8vw, 0.82rem);
}

.view-journey .chapter-block {
  padding: 1rem;
  border: 0.13rem solid rgba(255, 255, 255, 0.84);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 100% 0%, hsl(var(--chapter-hue) 92% 75% / 0.42), transparent 8rem),
    linear-gradient(155deg, #fffefa, hsl(var(--chapter-hue) 68% 94%));
  box-shadow: 0 0.34rem 0 hsl(var(--chapter-hue) 42% 47%), 0 0.9rem 1.4rem rgba(5, 36, 78, 0.24), inset 0 0.11rem 0 white;
}

.view-journey .chapter-block::before {
  width: 0.34rem;
  inset: 1.1rem auto 1.1rem 0;
  background: linear-gradient(hsl(var(--chapter-hue) 90% 66%), hsl(var(--chapter-hue) 70% 42%));
  box-shadow: 0 0 0.55rem hsl(var(--chapter-hue) 70% 55% / 0.5);
}

.view-journey .chapter-block.is-locked {
  filter: saturate(0.56);
  opacity: 0.82;
}

.view-journey .chapter-number {
  width: 3.35rem;
  border: 0.11rem solid hsl(var(--chapter-hue) 46% 42%);
  border-radius: 1.05rem;
  background: linear-gradient(145deg, hsl(var(--chapter-hue) 95% 92%), hsl(var(--chapter-hue) 82% 69%));
  color: hsl(var(--chapter-hue) 65% 25%);
  box-shadow: 0 0.18rem 0 hsl(var(--chapter-hue) 44% 43%), inset 0 0.09rem 0 white;
}

.view-journey .chapter-number span,
.view-journey .chapter-title p,
.view-journey .chapter-stars span {
  font-size: 0.52rem;
  font-weight: 800;
}

.view-journey .chapter-number strong {
  font-size: 0.92rem;
}

.view-journey .chapter-title h2 {
  font-size: 1.05rem;
}

.view-journey .chapter-stars strong {
  color: hsl(var(--chapter-hue) 66% 32%);
  font-size: 0.96rem;
}

.view-journey .chapter-progress {
  height: 0.5rem;
  border: 0.08rem solid rgba(20, 58, 73, 0.08);
  box-shadow: inset 0 0.08rem 0.14rem rgba(24, 57, 70, 0.18);
}

.view-journey .level-grid {
  gap: 0.58rem;
}

.view-journey .level-button {
  aspect-ratio: 0.94;
  border: 0.11rem solid hsl(var(--chapter-hue) 44% 48% / 0.52);
  border-radius: 1.1rem;
  background: linear-gradient(145deg, white, hsl(var(--chapter-hue) 52% 92%));
  box-shadow: 0 0.2rem 0 hsl(var(--chapter-hue) 32% 54% / 0.7), 0 0.35rem 0.65rem rgba(28, 62, 76, 0.12), inset 0 0.08rem 0 white;
}

.view-journey .level-button strong {
  font-size: 0.94rem;
}

.view-journey .level-button.is-current {
  border-color: hsl(var(--chapter-hue) 58% 35%);
  background: linear-gradient(145deg, #fffbc1, hsl(var(--chapter-hue) 92% 68%));
  box-shadow: 0 0.24rem 0 hsl(var(--chapter-hue) 50% 36%), 0 0 0 0.2rem hsl(var(--chapter-hue) 74% 74% / 0.28), 0 0.48rem 0.8rem hsl(var(--chapter-hue) 42% 30% / 0.24), inset 0 0.1rem 0 white;
  animation: current-level-breathe 1.7s ease-in-out infinite alternate;
}

.view-journey .level-button.is-complete:not(.is-current) {
  background: linear-gradient(145deg, #f2ffc3, #bde96c);
}

.view-journey .level-button.is-locked {
  border-style: solid;
  background: linear-gradient(145deg, #eef1f3, #cfd7dc);
  box-shadow: 0 0.18rem 0 #98a7af, inset 0 0.08rem 0 white;
}

.view-journey .level-badge {
  inset-block-start: 0.35rem;
  padding: 0.16rem 0.34rem;
  font-size: 0.44rem;
}

.view-journey .level-stars {
  font-size: 0.64rem;
  text-shadow: 0 0.08rem 0 rgba(129, 79, 22, 0.24);
}

/* Awards */
.achievement-count {
  display: grid;
  min-width: 5rem;
  padding: 0.52rem 0.58rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.62);
  border-radius: 1.05rem;
  background: rgba(5, 39, 83, 0.45);
  color: white;
  box-shadow: 0 0.2rem 0 rgba(8, 41, 78, 0.48), inset 0 0.08rem 0 rgba(255, 255, 255, 0.23);
  text-align: center;
}

.achievement-count > small {
  color: #dff6ff;
  font-family: var(--mono);
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.achievement-count > span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
}

.achievement-count strong {
  color: #eaff83;
  font-size: 1.2rem;
}

.achievement-count progress {
  appearance: none;
  width: 100%;
  height: 0.3rem;
  margin-block-start: 0.25rem;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: rgba(0, 17, 47, 0.4);
}

.achievement-count progress::-webkit-progress-bar { background: rgba(0, 17, 47, 0.4); }
.achievement-count progress::-webkit-progress-value,
.achievement-count progress::-moz-progress-bar { background: linear-gradient(90deg, #b7ef55, #efff98); }

.view-achievements .featured-achievement {
  min-height: 10.3rem;
  gap: 1.1rem;
  margin-block-end: 0;
  padding: 1.25rem;
  border: 0.14rem solid rgba(255, 255, 255, 0.78);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 13% 18%, rgba(255, 255, 255, 0.2), transparent 7rem),
    linear-gradient(145deg, #9b5dea, #6d48d7 55%, #3b319e);
  box-shadow: 0 0.42rem 0 #493091, 0 1rem 2rem rgba(5, 31, 74, 0.3), inset 0 0.13rem 0 rgba(255, 255, 255, 0.6);
  isolation: isolate;
}

.view-achievements .featured-achievement::after {
  width: 11rem;
  inset: -5.5rem -3.5rem auto auto;
  border: 1.5rem solid rgba(255, 255, 255, 0.08);
}

.featured-award-rays {
  position: absolute;
  z-index: -1;
  width: 12rem;
  aspect-ratio: 1;
  inset: 50% auto auto -3.25rem;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 238, 137, 0.24) 0 9deg, transparent 9deg 21deg);
  mask: radial-gradient(circle, transparent 0 19%, black 21% 72%, transparent 74%);
  translate: 0 -50%;
  animation: collection-rays-turn 20s linear infinite reverse;
}

.featured-award-spark.is-one { inset: 0.85rem 1.2rem auto auto; }
.featured-award-spark.is-two { inset: auto 40% 0.8rem auto; animation-delay: -0.6s; }

.view-achievements .featured-orbit {
  position: relative;
  width: 5.6rem;
  border: 0;
  filter: drop-shadow(0 0.65rem 0.65rem rgba(41, 23, 100, 0.35));
}

.view-achievements .featured-orbit::before,
.view-achievements .featured-orbit::after {
  position: absolute;
  z-index: -1;
  content: "";
}

.view-achievements .featured-orbit::before {
  width: 5.4rem;
  aspect-ratio: 1;
  border: 0.12rem solid rgba(255, 255, 255, 0.72);
  border-radius: 1.6rem;
  background: linear-gradient(145deg, #fffbd1, #ffcc55 58%, #e78132);
  box-shadow: 0 0.32rem 0 #9f5127, inset 0 0.13rem 0 white;
  rotate: 45deg;
}

.view-achievements .featured-orbit::after {
  width: 3.9rem;
  height: 0.8rem;
  inset: auto auto -0.26rem 50%;
  border-radius: 50%;
  background: rgba(33, 19, 84, 0.32);
  filter: blur(0.22rem);
  translate: -50% 0;
}

.view-achievements .featured-orbit span {
  z-index: 2;
  width: 3.45rem;
  border: 0.12rem solid white;
  background: linear-gradient(145deg, #efffb1, #aee955);
  box-shadow: 0 0.2rem 0 #5a9635, inset 0 0.1rem 0 white;
  font-size: 1.5rem;
}

.view-achievements .featured-orbit i {
  position: absolute;
  z-index: 3;
  width: 1.25rem;
  aspect-ratio: 1;
  inset: 0.35rem 0.18rem auto auto;
  border: 0.08rem solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8aa, #ffc248);
  box-shadow: 0 0.12rem 0 #a96827;
}

.featured-achievement-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.view-achievements .featured-achievement p {
  width: fit-content;
  margin-block-end: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(33, 21, 92, 0.42);
  color: #f0ff9d;
  font-size: 0.56rem;
  font-weight: 850;
}

.view-achievements .featured-achievement h2 {
  margin-block-end: 0.35rem;
  color: white;
  font-size: clamp(1.25rem, 5.5vw, 1.65rem);
  text-shadow: 0 0.13rem 0 rgba(41, 24, 98, 0.45);
}

.view-achievements .featured-achievement-copy > span {
  display: block;
  color: rgba(248, 245, 255, 0.84);
  font-size: 0.72rem;
  font-weight: 620;
  line-height: 1.35;
}

.featured-achievement-copy > b {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-start: 0.7rem;
  padding: 0.32rem 0.58rem;
  border: 0.08rem solid #bd7a28;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff8aa, #ffc44f);
  color: #633d1b;
  box-shadow: 0 0.14rem 0 #99571f, inset 0 0.08rem 0 white;
  font-family: var(--mono);
  font-size: 0.52rem;
}

.view-achievements .achievement-grid {
  gap: 0.75rem;
}

.view-achievements .achievement-card {
  position: relative;
  display: flex;
  min-height: 11.8rem;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.78rem 0.82rem;
  overflow: hidden;
  border: 0.12rem solid rgba(255, 255, 255, 0.84);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 50% 5%, color-mix(in srgb, var(--award-color) 38%, white), transparent 5.6rem),
    linear-gradient(155deg, #fffef9, color-mix(in srgb, var(--award-color) 17%, #edf4fb));
  box-shadow: 0 0.3rem 0 color-mix(in srgb, var(--award-color) 58%, #647786), 0 0.75rem 1.1rem rgba(4, 35, 75, 0.22), inset 0 0.1rem 0 white;
  text-align: center;
}

.view-achievements .achievement-card::before {
  position: absolute;
  width: 8rem;
  aspect-ratio: 1;
  inset: -5.8rem -4rem auto auto;
  border: 0.9rem solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  content: "";
}

.view-achievements .achievement-card.is-locked {
  filter: saturate(0.22);
  opacity: 0.78;
}

.view-achievements .achievement-card.is-unlocked {
  animation: award-card-settle 520ms cubic-bezier(.18, .88, .22, 1) both;
}

.achievement-ribbon {
  position: absolute;
  z-index: 3;
  inset: 0.55rem 0.55rem auto auto;
  padding: 0.22rem 0.42rem;
  border: 0.07rem solid color-mix(in srgb, var(--award-color) 55%, #56636e);
  border-radius: 999px;
  background: color-mix(in srgb, var(--award-color) 42%, white);
  color: #263d49;
  box-shadow: 0 0.1rem 0 color-mix(in srgb, var(--award-color) 55%, #77838b), inset 0 0.06rem 0 white;
  font-family: var(--mono);
  font-size: 0.43rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.view-achievements .achievement-badge {
  position: relative;
  display: grid;
  width: 4.35rem;
  margin: 0.52rem 0 0.8rem;
  border: 0.13rem solid white;
  border-radius: 1.35rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--badge) 35%, white), var(--badge));
  box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--badge) 58%, #4c5962), 0 0.45rem 0.85rem color-mix(in srgb, var(--badge) 28%, transparent), inset 0 0.12rem 0 rgba(255, 255, 255, 0.78);
  rotate: -3deg;
}

.view-achievements .achievement-badge span {
  position: relative;
  z-index: 2;
  font-size: 1.45rem;
  filter: drop-shadow(0 0.12rem 0 rgba(65, 60, 54, 0.22));
}

.view-achievements .achievement-badge i {
  position: absolute;
  width: 1.05rem;
  aspect-ratio: 1;
  inset: -0.35rem -0.28rem auto auto;
  border: 0.08rem solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff4a4, #ffc24d);
  box-shadow: 0 0.1rem 0 #a96c2b;
}

.achievement-card-copy {
  position: relative;
  z-index: 2;
}

.view-achievements .achievement-card h2 {
  margin-block-end: 0.38rem;
  color: #17384d;
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  line-height: 1.15;
}

.view-achievements .achievement-card p {
  color: #526976;
  font-size: clamp(0.62rem, 2.5vw, 0.7rem);
  font-weight: 600;
  line-height: 1.35;
}

.achievement-card-spark {
  position: absolute;
  inset: auto 0.55rem 0.45rem auto;
  color: color-mix(in srgb, var(--award-color) 76%, #80521b);
  font-size: 0.8rem;
}

/* Me */
.view-profile {
  padding-block-start: 0.75rem;
  background: none;
}

.view-profile .profile-player-card {
  grid-template-columns: 5.9rem minmax(0, 1fr);
  grid-template-areas:
    "avatar copy"
    "avatar action"
    "resources resources";
  min-height: 14.25rem;
  gap: 0.2rem 0.95rem;
  padding: 1.2rem 1rem 1rem;
  border: 0.15rem solid rgba(255, 255, 255, 0.84);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 16% 9%, rgba(255, 255, 255, 0.48), transparent 8rem),
    linear-gradient(145deg, #58d7ef, #4a95eb 52%, #7861db);
  box-shadow: 0 0.45rem 0 #3b5f9c, 0 1.15rem 2rem rgba(4, 31, 75, 0.3), inset 0 0.14rem 0 rgba(255, 255, 255, 0.72);
  isolation: isolate;
}

.view-profile .profile-player-card::before {
  position: absolute;
  z-index: -1;
  width: 15rem;
  aspect-ratio: 1;
  inset: -8rem -4rem auto auto;
  border: 2rem solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  content: "";
}

.view-profile .profile-player-card::after {
  inset: auto auto -8rem -5rem;
  width: 16rem;
  border-width: 1.8rem;
}

.profile-card-rays {
  position: absolute;
  z-index: -1;
  width: 10rem;
  aspect-ratio: 1;
  inset: -1.7rem auto auto -2rem;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.18) 0 8deg, transparent 8deg 20deg);
  mask: radial-gradient(circle, transparent 0 18%, black 20% 70%, transparent 72%);
  animation: collection-rays-turn 21s linear infinite;
}

.profile-captain-ribbon {
  position: absolute;
  z-index: 4;
  inset: 0.72rem -1.8rem auto auto;
  width: 7rem;
  padding: 0.3rem;
  border-block: 0.08rem solid rgba(255, 255, 255, 0.76);
  background: linear-gradient(180deg, #fff48f, #ffc64f);
  color: #634018;
  box-shadow: 0 0.14rem 0 #a56325, inset 0 0.07rem 0 white;
  font-family: var(--mono);
  font-size: 0.49rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  rotate: 35deg;
}

.view-profile .profile-player-card .profile-avatar {
  width: 5.9rem;
  border-width: 0.42rem;
  background:
    radial-gradient(circle at 34% 23%, white 0 0.28rem, transparent 0.34rem),
    linear-gradient(145deg, #f1ffc1, #b9ef5f 55%, #65ba62);
  box-shadow: 0 0.32rem 0 #397e58, 0 0.75rem 1.2rem rgba(24, 51, 89, 0.3), inset 0 0.14rem 0 white;
  font-size: 1.7rem;
  transition: scale 180ms ease, rotate 180ms ease;
}

.view-profile .profile-player-card .profile-avatar:is(:hover, :focus-visible) {
  scale: 1.04;
  rotate: -2deg;
}

.view-profile .profile-player-copy .eyebrow {
  width: fit-content;
  margin-block-end: 0.25rem;
  padding: 0.24rem 0.44rem;
  border-radius: 999px;
  background: rgba(24, 53, 126, 0.35);
  color: #efffb1;
  font-size: 0.53rem;
  font-weight: 850;
}

.view-profile .profile-player-copy h1 {
  font-size: clamp(1.45rem, 6.5vw, 2rem);
}

.view-profile .profile-player-copy > p:last-child {
  font-size: 0.65rem;
}

.view-profile .profile-edit-button {
  min-block-size: 2.45rem;
  padding-inline: 0.82rem;
  font-size: 0.64rem;
}

.profile-hero-resources {
  position: relative;
  z-index: 2;
  display: grid;
  grid-area: resources;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-block-start: 0.85rem;
}

.profile-hero-resources > span {
  display: grid;
  min-width: 0;
  min-height: 3.2rem;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0 0.34rem;
  padding: 0.48rem;
  border: 0.09rem solid rgba(255, 255, 255, 0.54);
  border-radius: 0.95rem;
  background: rgba(18, 45, 108, 0.38);
  color: white;
  box-shadow: 0 0.16rem 0 rgba(20, 45, 99, 0.45), inset 0 0.08rem 0 rgba(255, 255, 255, 0.18);
}

.profile-hero-resources i {
  display: grid;
  width: 1.65rem;
  aspect-ratio: 1;
  grid-row: 1 / -1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff5ae, #ffc64b);
  color: #784718;
  box-shadow: 0 0.12rem 0 #a96627, inset 0 0.07rem 0 white;
  font-size: 0.72rem;
  font-style: normal;
}

.profile-hero-resources > span:nth-child(2) i {
  background: linear-gradient(145deg, #ecffac, #a9e84f);
  color: #315b2c;
  box-shadow: 0 0.12rem 0 #5d9638, inset 0 0.07rem 0 white;
}

.profile-hero-resources > span:nth-child(3) i {
  background: linear-gradient(145deg, #ffd2cd, #ff7a67);
  color: #7a2e27;
  box-shadow: 0 0.12rem 0 #ad463b, inset 0 0.07rem 0 white;
}

.profile-hero-resources b {
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-overflow: ellipsis;
}

.profile-hero-resources small {
  color: rgba(239, 250, 255, 0.72);
  font-family: var(--mono);
  font-size: 0.43rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.view-profile .profile-rank-card {
  margin-block-start: 1rem;
  padding: 0.9rem;
  border: 0.13rem solid rgba(255, 255, 255, 0.86);
  border-radius: 1.45rem;
  background: linear-gradient(155deg, #fffef5, #ecf8d5);
  box-shadow: 0 0.32rem 0 #78a25b, 0 0.75rem 1.1rem rgba(4, 35, 75, 0.2), inset 0 0.1rem 0 white;
}

.view-profile .profile-rank-medal {
  width: 3.7rem;
  font-size: 1.4rem;
  animation: profile-medal-float 1.8s ease-in-out infinite alternate;
}

.view-profile .profile-rank-card small {
  font-size: 0.53rem;
}

.view-profile .profile-rank-card > div strong {
  font-size: 1.5rem;
}

.view-profile .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-block-start: 0.9rem;
}

.view-profile .stat-grid article {
  display: grid;
  min-height: 6.2rem;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0.08rem 0.7rem;
  padding: 0.78rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.86);
  border-radius: 1.2rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(228, 244, 255, 0.94));
  box-shadow: 0 0.26rem 0 rgba(47, 97, 135, 0.52), 0 0.6rem 0.95rem rgba(4, 35, 75, 0.18), inset 0 0.09rem 0 white;
  text-align: start;
}

.view-profile .stat-grid .stat-icon {
  width: 2.75rem;
  grid-row: 1 / -1;
  margin: 0;
  border: 0.09rem solid white;
  box-shadow: 0 0.16rem 0 rgba(55, 87, 101, 0.42), inset 0 0.09rem 0 rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.view-profile .stat-grid strong {
  margin: 0;
  color: #173c59;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
}

.view-profile .stat-grid p {
  margin: 0;
  color: #587080;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
}

.view-profile .profile-clubhouse {
  margin-block-start: 0.95rem;
  padding: 0.85rem;
  border: 0.13rem solid rgba(255, 255, 255, 0.84);
  border-radius: 1.65rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(225, 241, 252, 0.94));
  box-shadow: 0 0.34rem 0 rgba(48, 91, 131, 0.54), 0 0.9rem 1.35rem rgba(4, 35, 75, 0.2), inset 0 0.1rem 0 white;
}

.view-profile .profile-section-title {
  padding: 0.08rem 0.1rem 0.72rem;
}

.view-profile .profile-section-title > span {
  width: 2.55rem;
  border: 0.09rem solid white;
  border-radius: 0.82rem;
  box-shadow: 0 0.16rem 0 #6b54ad, inset 0 0.08rem 0 white;
  font-size: 1rem;
}

.profile-section-title small {
  display: block;
  margin-block-end: 0.08rem;
  color: #6e758c;
  font-family: var(--mono);
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.view-profile .profile-section-title h2 {
  color: #233f58;
  font-size: 0.92rem;
}

.view-profile .profile-action-grid {
  gap: 0.62rem;
}

.view-profile .profile-action-grid .setting-row {
  min-height: 5.75rem;
  padding: 0.68rem;
  border: 0.1rem solid rgba(40, 80, 103, 0.13);
  border-radius: 1.1rem;
  box-shadow: 0 0.2rem 0 rgba(65, 91, 99, 0.28), 0 0.4rem 0.65rem rgba(35, 62, 78, 0.1), inset 0 0.08rem 0 white;
}

.view-profile .profile-action-grid .setting-icon {
  width: 2.85rem;
  border: 0.08rem solid white;
  font-size: 1.12rem;
}

.view-profile .profile-action-grid .setting-row strong {
  font-size: 0.72rem;
}

.view-profile .profile-action-grid .setting-row small {
  font-size: 0.54rem;
}

.view-profile .profile-account-actions .setting-row {
  min-height: 3.8rem;
  font-size: 0.68rem;
}

@keyframes collection-rays-turn {
  to { rotate: 360deg; }
}

@keyframes collection-spark-pop {
  from { opacity: 0.38; scale: 0.62; rotate: -15deg; }
  to { opacity: 1; scale: 1.22; rotate: 14deg; }
}

@keyframes journey-route-float {
  to { translate: 0 -0.18rem; rotate: 3deg; }
}

@keyframes current-level-breathe {
  to { translate: 0 -0.12rem; filter: brightness(1.05); }
}

@keyframes award-card-settle {
  from { opacity: 0; translate: 0 0.45rem; scale: 0.96; }
}

@keyframes profile-medal-float {
  to { translate: 0 -0.15rem; rotate: 4deg; }
}

@media (max-width: 23rem) {
  .collection-page-heading {
    min-height: 4.7rem;
  }

  .collection-page-heading h1 {
    font-size: 1.62rem;
  }

  .collection-page-subtitle {
    font-size: 0.65rem;
  }

  .collection-page-heading .completion-ring {
    width: 3.75rem;
  }

  .collection-page-heading .completion-ring::before {
    width: 2.76rem;
  }

  .view-journey .journey-hero {
    min-height: 9.2rem;
    grid-template-columns: minmax(0, 1fr) 5rem;
    padding: 1rem 0.9rem 2.9rem;
  }

  .view-journey .journey-hero-orbit {
    width: 4.9rem;
  }

  .view-journey .journey-hero-orbit > span {
    width: 3.45rem;
  }

  .view-journey .journey-summary {
    gap: 0.38rem;
  }

  .view-journey .journey-summary > div {
    display: flex;
    min-height: 4rem;
    gap: 0.08rem;
    padding: 0.48rem 0.24rem;
    text-align: center;
  }

  .view-journey .journey-summary i {
    width: 1.48rem;
  }

  .view-journey .level-grid {
    gap: 0.42rem;
  }

  .view-journey .chapter-block {
    padding: 0.82rem;
  }

  .view-achievements .featured-achievement {
    min-height: 9rem;
    gap: 0.75rem;
    padding: 1rem 0.85rem;
  }

  .view-achievements .featured-orbit {
    width: 4.45rem;
  }

  .view-achievements .featured-orbit::before {
    width: 4.3rem;
  }

  .view-achievements .featured-orbit span {
    width: 2.85rem;
  }

  .view-achievements .achievement-card {
    min-height: 11.2rem;
    padding-inline: 0.62rem;
  }

  .view-profile .profile-player-card {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    min-height: 13.4rem;
  }

  .view-profile .profile-player-card .profile-avatar {
    width: 4.6rem;
  }

  .profile-hero-resources {
    gap: 0.35rem;
  }

  .profile-hero-resources > span {
    display: flex;
    min-height: 2.9rem;
    flex-direction: column;
    align-items: center;
    gap: 0.04rem;
    padding: 0.34rem 0.16rem;
  }

  .profile-hero-resources i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-hero-rays,
  .journey-hero-spark,
  .view-journey .journey-hero-orbit svg,
  .view-journey .level-button.is-current,
  .featured-award-rays,
  .featured-award-spark,
  .view-achievements .achievement-card.is-unlocked,
  .profile-card-rays,
  .view-profile .profile-rank-medal {
    animation: none;
  }
}

@media (forced-colors: active) {
  .collection-page-heading .completion-ring,
  .view-journey :is(.journey-hero, .journey-summary > div, .chapter-block, .level-button),
  .view-achievements :is(.featured-achievement, .achievement-card),
  .view-profile :is(.profile-player-card, .profile-rank-card, .stat-grid article, .profile-clubhouse) {
    border: 0.14rem solid CanvasText;
  }
}

/* Board-first mobile game shell */
html[data-view="play"] {
  background: #061721;
}

html[data-view="play"] body {
  background:
    radial-gradient(circle at 50% 18%, rgba(67, 219, 218, 0.2), transparent 20rem),
    #061721;
}

html[data-view="play"] .app-shell {
  min-height: 100dvh;
  overflow: clip;
  background:
    radial-gradient(circle at 16% 18%, rgba(122, 235, 255, 0.12) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 79% 31%, rgba(255, 205, 107, 0.14) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 72% 76%, rgba(197, 255, 99, 0.1) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #10394d 0%, #071c2b 46%, #07131f 100%);
  box-shadow: 0 0 5rem rgba(0, 10, 18, 0.42);
}

html[data-view="play"] :is(.topbar, .bottom-nav) {
  display: none;
}

html[data-view="play"] main,
.view-play {
  min-height: 100dvh;
}

.view-play {
  position: relative;
  padding: 0 0 max(0.55rem, env(safe-area-inset-bottom));
  overflow: clip;
  color: white;
}

.play-hud {
  position: relative;
  z-index: 18;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 4.4rem;
  padding: max(0.55rem, env(safe-area-inset-top)) 0.65rem 0.35rem;
  background: linear-gradient(180deg, rgba(2, 14, 24, 0.68), transparent);
}

.play-avatar {
  position: relative;
  display: grid;
  min-inline-size: 3.15rem;
  min-block-size: 3.15rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.16rem solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, white 0 0.16rem, transparent 0.2rem),
    linear-gradient(145deg, #9bdaff, #6793ff 62%, #7359d9);
  color: #10263b;
  box-shadow:
    0 0.22rem 0 #344b88,
    0 0.55rem 1.2rem rgba(0, 8, 20, 0.42),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.8);
  font-weight: 900;
  cursor: pointer;
}

.play-avatar i {
  position: absolute;
  inset: auto -0.05rem -0.04rem auto;
  width: 0.85rem;
  aspect-ratio: 1;
  border: 0.13rem solid #16334b;
  border-radius: 50%;
  background: #c9ff63;
  box-shadow: 0 0 0.55rem rgba(201, 255, 99, 0.72);
}

.play-resources {
  display: grid;
  min-inline-size: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.34rem;
}

[data-classic-streak-indicator][hidden] {
  display: none;
}

html[data-play-mode="orbit"] .play-resources {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.play-resource-pill {
  display: grid;
  min-inline-size: 0;
  min-block-size: 2.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.32rem;
  padding: 0.28rem 0.42rem 0.28rem 0.3rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.27);
  border-radius: 999px;
  background: rgba(5, 21, 34, 0.76);
  box-shadow:
    0 0.2rem 0.7rem rgba(0, 8, 18, 0.34),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.17);
}

.play-resource-pill > i {
  display: grid;
  width: 1.7rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffbd0, #ffd158 58%, #ed922f);
  color: #6a3b11;
  box-shadow: inset 0 0.1rem 0 white, 0 0.18rem 0 #a95a25;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.play-resource-pill.is-sparks > i {
  background: linear-gradient(145deg, #efffc6, #b9ff5c 58%, #69c949);
  color: #254d27;
  box-shadow: inset 0 0.1rem 0 white, 0 0.18rem 0 #438735;
}

.play-resource-pill.is-streak > i {
  background: linear-gradient(145deg, #ffe1d7, #ff8269 58%, #da4a47);
  color: #672528;
  box-shadow: inset 0 0.1rem 0 white, 0 0.18rem 0 #953637;
}

.play-resource-pill :is(span, small, strong) {
  display: block;
  min-inline-size: 0;
}

.play-resource-pill small {
  color: rgba(231, 248, 255, 0.58);
  font-family: var(--mono);
  font-size: 0.38rem;
  letter-spacing: 0.06em;
}

.play-resource-pill strong {
  overflow: hidden;
  color: white;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.play-quick-actions {
  position: absolute;
  z-index: 17;
  inset: 10rem 0.5rem auto auto;
  display: grid;
  gap: 0.45rem;
}

.play-quick-actions button {
  position: relative;
  display: grid;
  min-inline-size: 3.45rem;
  min-block-size: 3.65rem;
  place-items: center;
  padding: 0.27rem 0.25rem 0.35rem;
  border: 0.09rem solid rgba(255, 255, 255, 0.38);
  border-radius: 1rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(210, 242, 249, 0.9));
  color: #173549;
  box-shadow:
    0 0.22rem 0 #6a91a0,
    0 0.55rem 1rem rgba(0, 7, 18, 0.34),
    inset 0 0.1rem 0 white;
  cursor: pointer;
}

.play-quick-actions button > span {
  display: grid;
  width: 1.75rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.58rem;
  background: linear-gradient(145deg, #c0eeff, #75b8ff);
  font-size: 0.92rem;
  font-weight: 900;
}

.play-quick-actions button > span.is-event {
  background: linear-gradient(145deg, white, var(--event-color, #c9ff63));
  box-shadow: 0 0 0.72rem color-mix(in srgb, var(--event-color, #c9ff63) 42%, transparent);
}

.play-quick-actions small {
  font-size: 0.48rem;
  font-weight: 900;
  line-height: 1;
}

.play-quick-actions time {
  position: absolute;
  inset: -0.28rem -0.2rem auto auto;
  padding: 0.13rem 0.25rem;
  border: 0.07rem solid rgba(255, 255, 255, 0.7);
  border-radius: 99px;
  background: #ef5366;
  color: white;
  font-family: var(--mono);
  font-size: 0.38rem;
  box-shadow: 0 0.12rem 0 #9e2e45;
}

.view-play .play-mode-panel {
  position: relative;
  z-index: 2;
  min-height: calc(100dvh - 4.4rem);
}

.view-play .game-heading {
  position: relative;
  z-index: 8;
  width: fit-content;
  max-width: calc(100% - 8.5rem);
  min-height: 2.45rem;
  align-items: center;
  gap: 0.65rem;
  margin: 0.05rem auto 0.15rem;
  padding: 0.3rem 0.62rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(3, 17, 29, 0.68);
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(0.8rem);
}

.view-play .game-heading > div:first-child {
  min-inline-size: 0;
}

.view-play .game-heading .eyebrow {
  margin: 0;
  overflow: hidden;
  color: rgba(218, 243, 250, 0.62);
  font-size: 0.38rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-play .game-heading h1,
.view-play .orbit-heading h1 {
  margin-block-start: 0.04rem;
  overflow: hidden;
  color: white;
  font-size: 0.7rem;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-play .score-block {
  flex: 0 0 auto;
  padding-inline-start: 0.55rem;
  border-inline-start: 0.07rem solid rgba(255, 255, 255, 0.16);
}

.view-play .score-block span {
  color: rgba(218, 243, 250, 0.55);
  font-size: 0.35rem;
}

.view-play .score-block strong {
  color: #c9ff63;
  font-size: 0.62rem;
}

.view-play .game-card,
.view-play .game-card.orbit-card {
  margin: 0;
  padding: 0 0.42rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: white;
  box-shadow: none;
}

.view-play .game-card::before {
  display: none;
}

.view-play .game-card-topline {
  position: absolute;
  z-index: 9;
  inset: 0.55rem 0.95rem auto;
  min-height: 2.5rem;
  padding: 0;
  pointer-events: none;
}

.view-play .game-card-topline > * {
  pointer-events: auto;
}

.view-play .heart-pressure,
.view-play .level-progress {
  padding: 0.36rem 0.48rem;
  border: 0.07rem solid rgba(255, 255, 255, 0.18);
  border-radius: 0.8rem;
  background: rgba(3, 17, 29, 0.7);
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(0.7rem);
}

.view-play .orbit-remaining-display {
  display: block;
  min-inline-size: 3.6rem;
  text-align: center;
}

.view-play .orbit-remaining-copy {
  display: block;
}

.view-play .orbit-remaining-copy strong {
  display: block;
  font-size: 1.65rem;
  line-height: 0.9;
}

.view-play .orbit-remaining-copy span {
  display: block;
  width: auto;
  margin-block-start: 0.15rem;
  font-size: 0.38rem;
}

.view-play .progress-track {
  display: none;
}

.view-play .orbit-stage {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 49%, rgba(50, 207, 215, 0.24), transparent 42%),
    radial-gradient(circle at 50% 115%, rgba(201, 255, 99, 0.1), transparent 36%);
  box-shadow: none;
}

.view-play .game-tip {
  position: absolute;
  z-index: 10;
  inset: auto 1.15rem 0.55rem;
  min-height: 2.2rem;
  padding: 0.42rem 0.62rem;
  overflow: clip;
  border: 0.07rem solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(3, 17, 29, 0.74);
  color: rgba(239, 253, 255, 0.82);
  box-shadow: 0 0.3rem 0.85rem rgba(0, 9, 18, 0.26);
  font-size: 0.57rem;
  backdrop-filter: blur(0.75rem);
}

.view-play .game-tip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-play .tip-icon {
  width: 1.35rem;
  border-radius: 50%;
  font-size: 0.58rem;
}

.view-play .orbit-cascade-panel {
  position: absolute;
  z-index: 13;
  inset: auto auto calc(max(0.55rem, env(safe-area-inset-bottom)) + 4.7rem) 50%;
  width: fit-content;
  max-width: calc(100% - 1rem);
  min-height: 2.7rem;
  grid-template-columns: auto;
  gap: 0.45rem;
  margin: 0;
  padding: 0.3rem 0.38rem 0.3rem 0.55rem;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(5, 23, 36, 0.82);
  box-shadow: 0 0.3rem 0.9rem rgba(0, 8, 18, 0.3), inset 0 0.08rem 0 rgba(255, 255, 255, 0.14);
  color: white;
  backdrop-filter: blur(0.8rem);
  transform: translateX(-50%);
}

.view-play .orbit-cascade-copy {
  display: none;
}

.view-play .orbit-cascade-status span {
  color: rgba(222, 245, 251, 0.55);
  font-size: 0.35rem;
}

.view-play .orbit-cascade-status strong {
  color: #c9ff63;
  font-size: 0.82rem;
}

.view-play .orbit-cascade-status > small {
  color: rgba(228, 247, 251, 0.7);
  font-size: 0.48rem;
}

.view-play .orbit-cascade-options {
  background: rgba(255, 255, 255, 0.1);
}

.view-play .orbit-cascade-options button {
  min-inline-size: 2rem;
  min-block-size: 1.9rem;
  color: rgba(237, 250, 255, 0.75);
}

.view-play .orbit-cascade-options button.is-active {
  background: linear-gradient(145deg, #eaffaa, #a7ec4d);
  color: #173524;
  box-shadow: 0 0.15rem 0 #598835, inset 0 0.08rem 0 white;
}

.view-play .classic-cascade-panel {
  grid-template-columns: auto auto auto;
}

.view-play .classic-surge-meter {
  min-inline-size: 4.6rem;
  padding: 0.3rem 0.42rem;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(239, 252, 255, 0.76);
}

.view-play .game-controls {
  position: absolute;
  z-index: 14;
  inset: auto 0.5rem max(0.55rem, env(safe-area-inset-bottom));
  width: min(calc(100% - 1rem), 24rem);
  gap: 0.38rem;
  margin: 0 auto;
  padding: 0.4rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.2);
  border-radius: 1.35rem;
  background: rgba(4, 19, 31, 0.88);
  box-shadow: 0 0.45rem 1.2rem rgba(0, 6, 16, 0.38), inset 0 0.08rem 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1rem);
}

.view-play .control-button {
  min-height: 3.2rem;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.38rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06));
  color: white;
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.16);
  font-size: 0.52rem;
}

.view-play .control-button svg {
  width: 1.2rem;
  color: #9befff;
}

.view-play .control-primary {
  border-color: #99cf3e;
  background: linear-gradient(145deg, #eaff9d, #a8ed50 56%, #74bd42);
  color: #153822;
  box-shadow: 0 0.2rem 0 #4c822f, inset 0 0.1rem 0 white;
}

.view-play .control-primary svg {
  color: currentColor;
}

.view-play .board-wrap {
  width: 100%;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 50% 45%, rgba(201, 255, 99, 0.16), transparent 40%),
    linear-gradient(155deg, #173d4b, #0a2230);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 8, 18, 0.3), inset 0 0 2rem rgba(2, 16, 27, 0.55);
}

.view-play .heart-countdown {
  border-color: rgba(255, 132, 109, 0.55);
  background: rgba(255, 104, 90, 0.16);
  color: #ffc2b4;
}

.view-play .level-progress {
  color: rgba(239, 252, 255, 0.8);
  font-size: 0.52rem;
}

/* Keep the Vortex HUD readable on a phone without shrinking the globe. */
html[data-play-mode="orbit"] .play-resource-pill small {
  font-size: 0.62rem;
  line-height: 1.05;
}

html[data-play-mode="orbit"] .play-resource-pill strong {
  font-size: 0.85rem;
}

html[data-play-mode="orbit"] .game-heading .eyebrow {
  font-size: 0.62rem;
}

html[data-play-mode="orbit"] .orbit-heading h1 {
  font-size: 1.05rem;
}

html[data-play-mode="orbit"] .score-block span {
  font-size: 0.6rem;
}

html[data-play-mode="orbit"] .score-block strong {
  font-size: 0.85rem;
}

html[data-play-mode="orbit"] .orbit-remaining-copy strong {
  font-size: 1.9rem;
}

html[data-play-mode="orbit"] .orbit-remaining-copy span {
  font-size: 0.7rem;
  line-height: 1.05;
}

html[data-play-mode="orbit"] .orbit-tip {
  min-height: 2.55rem;
  font-size: 0.76rem;
}

html[data-play-mode="orbit"] .orbit-tip .tip-icon {
  font-size: 0.72rem;
}

html[data-play-mode="orbit"] .orbit-cascade-status span {
  font-size: 0.62rem;
}

html[data-play-mode="orbit"] .orbit-cascade-status strong {
  font-size: 0.98rem;
}

html[data-play-mode="orbit"] .orbit-cascade-status > small {
  font-size: 0.58rem;
}

html[data-play-mode="orbit"] .orbit-cascade-options button {
  font-size: 0.75rem;
}

html[data-play-mode="orbit"] .play-quick-actions small {
  font-size: 0.68rem;
}

html[data-play-mode="orbit"] .play-quick-actions time {
  font-size: 0.56rem;
}

html[data-play-mode="orbit"] .orbit-drag-label {
  font-size: 0.68rem;
}

html[data-play-mode="classic"][data-view="play"] .app-shell {
  overflow-x: clip;
  overflow-y: auto;
}

html[data-play-mode="classic"] .view-play {
  overflow: visible;
}

.classic-quick-actions,
.orbit-quick-actions {
  display: none;
}

html[data-play-mode="classic"] .classic-quick-actions,
html[data-play-mode="orbit"] .orbit-card > .orbit-quick-actions {
  position: relative;
  z-index: 10;
  inset: auto;
  display: grid;
  width: min(calc(100% - 1rem), 20rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.38rem;
  margin: 0.45rem auto max(0.7rem, env(safe-area-inset-bottom));
}

html[data-play-mode="classic"] .play-quick-actions button,
html[data-play-mode="orbit"] .orbit-card > .play-quick-actions button {
  display: flex;
  min-inline-size: 0;
  min-block-size: 2.55rem;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.3rem 0.38rem;
  border-radius: 0.82rem;
}

html[data-play-mode="classic"] .play-quick-actions button > span,
html[data-play-mode="orbit"] .orbit-card > .play-quick-actions button > span {
  width: 1.38rem;
  flex: 0 0 auto;
  border-radius: 0.45rem;
  font-size: 0.68rem;
}

html[data-play-mode="classic"] .play-quick-actions small,
html[data-play-mode="orbit"] .orbit-card > .play-quick-actions small {
  font-size: 0.46rem;
}

html[data-play-mode="classic"] .classic-game-panel .game-card-topline {
  position: relative;
  order: 1;
  inset: auto;
  min-height: 2.35rem;
  margin: 0.42rem 0.45rem 0;
  pointer-events: auto;
}

html[data-play-mode="classic"] .classic-game-panel .game-card {
  display: flex;
  flex-direction: column;
}

html[data-play-mode="classic"] .classic-game-panel .board-wrap {
  order: 0;
}

html[data-play-mode="classic"] .classic-game-panel :is(.heart-pressure, .level-progress) {
  padding: 0.3rem 0.42rem;
  background: rgba(3, 17, 29, 0.86);
}

html[data-play-mode="classic"] .classic-game-panel #game-tip {
  display: none;
}

html[data-play-mode="classic"] .classic-cascade-panel,
html[data-play-mode="classic"] .classic-game-panel .game-controls {
  position: relative;
  inset: auto;
  transform: none;
}

html[data-play-mode="classic"] .classic-cascade-panel {
  width: min(calc(100% - 1rem), 20rem);
  margin: 0.4rem auto 0;
}

html[data-play-mode="classic"] .classic-game-panel .game-controls {
  margin: 0.4rem auto max(0.65rem, env(safe-area-inset-bottom));
}

/* Readable Classic HUD with the remaining-arrow count as the primary status. */
html[data-play-mode="classic"] .play-resource-pill small {
  font-size: clamp(0.56rem, 2.5vw, 0.64rem);
  line-height: 1.05;
}

html[data-play-mode="classic"] .play-resource-pill strong {
  font-size: clamp(0.78rem, 3.2vw, 0.88rem);
}

html[data-play-mode="classic"] .game-heading .eyebrow {
  font-size: clamp(0.56rem, 2.5vw, 0.64rem);
}

html[data-play-mode="classic"] .game-heading h1 {
  font-size: clamp(0.96rem, 4vw, 1.12rem);
}

html[data-play-mode="classic"] .score-block span {
  font-size: clamp(0.52rem, 2.3vw, 0.6rem);
}

html[data-play-mode="classic"] .score-block strong {
  font-size: clamp(0.78rem, 3.2vw, 0.88rem);
}

html[data-play-mode="classic"] .classic-game-panel .heart {
  width: 1.28rem;
}

html[data-play-mode="classic"] .classic-game-panel .heart-countdown {
  min-inline-size: 2.9rem;
  min-block-size: 1.85rem;
  font-size: clamp(0.66rem, 2.8vw, 0.76rem);
}

html[data-play-mode="classic"] .classic-game-panel .classic-remaining-display {
  display: grid;
  min-inline-size: 7.9rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number label"
    "track track";
  align-items: center;
  gap: 0.14rem 0.5rem;
  padding: 0.42rem 0.62rem 0.38rem;
  border-color: rgba(201, 255, 99, 0.62);
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(35, 75, 63, 0.96), rgba(4, 27, 38, 0.96));
  box-shadow:
    0 0.22rem 0 rgba(66, 117, 55, 0.8),
    0 0.5rem 1rem rgba(0, 8, 18, 0.28),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.22);
  line-height: 1;
}

html[data-play-mode="classic"] .classic-remaining-display strong {
  grid-area: number;
  color: #d9ff78;
  font-family: var(--mono);
  font-size: clamp(1.65rem, 7vw, 2.05rem);
  font-variant-numeric: tabular-nums;
  line-height: 0.86;
  text-shadow: 0 0 0.7rem rgba(201, 255, 99, 0.48);
}

html[data-play-mode="classic"] .classic-remaining-display span {
  grid-area: label;
  max-inline-size: 3.5rem;
  color: rgba(244, 255, 232, 0.9);
  font-family: var(--mono);
  font-size: clamp(0.64rem, 2.8vw, 0.74rem);
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.02;
  text-transform: uppercase;
}

html[data-play-mode="classic"] .classic-remaining-display .progress-track {
  display: block;
  width: 100%;
  height: 0.24rem;
  grid-area: track;
  margin-block-start: 0.12rem;
  background: rgba(255, 255, 255, 0.12);
}

html[data-play-mode="classic"] .classic-remaining-display .progress-track::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.12);
}

html[data-play-mode="classic"] .classic-remaining-display .progress-track::-webkit-progress-value {
  background: linear-gradient(90deg, #8be951, #e5ff7c);
}

html[data-play-mode="classic"] .classic-remaining-display .progress-track::-moz-progress-bar {
  background: linear-gradient(90deg, #8be951, #e5ff7c);
}

html[data-play-mode="classic"] .play-quick-actions small {
  font-size: clamp(0.6rem, 2.6vw, 0.68rem);
}

html[data-play-mode="classic"] .play-quick-actions time {
  font-size: 0.52rem;
}

html[data-play-mode="classic"] .classic-cascade-panel .orbit-cascade-status span {
  font-size: clamp(0.56rem, 2.4vw, 0.64rem);
}

html[data-play-mode="classic"] .classic-cascade-panel .orbit-cascade-status strong {
  font-size: clamp(0.96rem, 4vw, 1.08rem);
}

html[data-play-mode="classic"] .classic-cascade-panel .orbit-cascade-options button {
  font-size: clamp(0.68rem, 2.8vw, 0.76rem);
}

html[data-play-mode="classic"] .classic-surge-meter {
  font-size: clamp(0.54rem, 2.35vw, 0.62rem);
}

html[data-play-mode="classic"] .classic-game-panel .control-button {
  font-size: clamp(0.66rem, 2.8vw, 0.74rem);
}

/* Glossy collectible-style player profile */
.view-profile {
  min-height: calc(100dvh - 8.5rem);
  padding-block-start: 0.5rem;
  background:
    radial-gradient(circle at 8% 1%, rgba(130, 181, 255, 0.24), transparent 13rem),
    radial-gradient(circle at 96% 22%, rgba(201, 255, 99, 0.2), transparent 14rem);
}

.profile-player-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "avatar copy"
    "avatar action";
  align-items: center;
  gap: 0.15rem 0.9rem;
  min-height: 9rem;
  padding: 1rem;
  overflow: clip;
  border: 0.12rem solid rgba(255, 255, 255, 0.78);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.52), transparent 22%),
    linear-gradient(145deg, #75dff4, #5c99ec 55%, #8a67dc);
  color: white;
  box-shadow:
    0 0.42rem 0 #4368a4,
    0 1.2rem 2.2rem rgba(45, 75, 112, 0.25),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.72);
}

.profile-player-card::after {
  position: absolute;
  inset: auto -4rem -6rem auto;
  width: 13rem;
  aspect-ratio: 1;
  border: 1.35rem solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.profile-card-spark {
  position: absolute;
  z-index: 1;
  color: #efffa9;
  filter: drop-shadow(0 0 0.45rem rgba(220, 255, 122, 0.8));
  animation: profile-spark 1.3s ease-in-out infinite alternate;
}

.profile-card-spark.is-one { inset: 0.8rem 1rem auto auto; }
.profile-card-spark.is-two { inset: auto auto 1rem 0.85rem; animation-delay: -0.6s; }

.profile-player-card .profile-avatar {
  z-index: 2;
  grid-area: avatar;
  width: 5.5rem;
  margin: 0;
  border: 0.38rem solid rgba(255, 255, 255, 0.9);
  background:
    radial-gradient(circle at 35% 24%, white 0 0.22rem, transparent 0.27rem),
    linear-gradient(145deg, #efffc1, #b8ef62 58%, #63b56a);
  color: #214733;
  box-shadow: 0 0.3rem 0 #3c8061, 0 0.65rem 1.2rem rgba(26, 59, 77, 0.28), inset 0 0.12rem 0 white;
  font-size: 1.5rem;
}

.profile-player-copy {
  z-index: 2;
  grid-area: copy;
  min-inline-size: 0;
}

.profile-player-copy .eyebrow {
  margin-block-end: 0.18rem;
  color: rgba(238, 255, 255, 0.72);
  font-size: 0.5rem;
}

.profile-player-copy h1 {
  overflow: hidden;
  color: white;
  font-size: clamp(1.45rem, 7vw, 2rem);
  text-overflow: ellipsis;
  text-shadow: 0 0.12rem 0 rgba(29, 68, 101, 0.45);
  white-space: nowrap;
}

.profile-player-copy > p:last-child {
  margin: 0.28rem 0 0;
  overflow: hidden;
  color: rgba(240, 253, 255, 0.78);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-edit-button {
  z-index: 2;
  grid-area: action;
  width: fit-content;
  min-block-size: 2.25rem;
  margin-block-start: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 0.08rem solid #b77928;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff5a4, #ffd05c 60%, #f39b3e);
  color: #5f3817;
  box-shadow: 0 0.16rem 0 #a56125, inset 0 0.08rem 0 white;
  font-size: 0.58rem;
  font-weight: 900;
  cursor: pointer;
}

.profile-rank-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-block-start: 0.9rem;
  padding: 0.75rem;
  border: 0.1rem solid rgba(19, 42, 51, 0.11);
  border-radius: 1.35rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(243, 249, 231, 0.78));
  box-shadow: 0 0.28rem 0 rgba(80, 110, 91, 0.16), inset 0 0.08rem 0 white;
}

.profile-rank-medal {
  display: grid;
  width: 3.25rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.12rem solid #d58e2f;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffbd0, #ffd257 58%, #ed932f);
  color: #7a4318;
  box-shadow: 0 0.22rem 0 #a86125, inset 0 0.12rem 0 white;
  font-size: 1.2rem;
}

.profile-rank-card > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 0.38rem;
  min-inline-size: 0;
}

.profile-rank-card small {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.profile-rank-card > div strong {
  font-family: var(--mono);
  font-size: 1.35rem;
}

.profile-rank-card progress {
  width: 100%;
  height: 0.48rem;
  grid-column: 1 / -1;
  margin-block-start: 0.28rem;
  overflow: clip;
  border: 0;
  border-radius: 99px;
  accent-color: #98d846;
}

.profile-rank-card progress::-webkit-progress-bar { background: #dfe6d6; }
.profile-rank-card progress::-webkit-progress-value,
.profile-rank-card progress::-moz-progress-bar { background: linear-gradient(90deg, #a4e34c, #e7ff80); }

.profile-rank-sparks {
  min-inline-size: 4.2rem;
  padding-inline-start: 0.7rem;
  border-inline-start: 0.08rem solid var(--line);
  text-align: center;
}

.profile-rank-sparks b,
.profile-rank-sparks small {
  display: block;
}

.profile-rank-sparks b {
  font-family: var(--mono);
  font-size: 0.9rem;
}

.view-profile .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-block-start: 0.85rem;
}

.view-profile .stat-grid article {
  min-height: 5.6rem;
  padding: 0.58rem 0.35rem;
  border: 0.09rem solid rgba(19, 42, 51, 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0.2rem 0 rgba(73, 97, 92, 0.12), inset 0 0.08rem 0 white;
  text-align: center;
}

.view-profile .stat-grid .stat-icon {
  width: 1.9rem;
  margin-inline: auto;
  border-radius: 50%;
  box-shadow: inset 0 0.08rem 0 rgba(255, 255, 255, 0.72);
}

.view-profile .stat-grid strong {
  margin-block-start: 0.48rem;
  font-size: 0.82rem;
}

.view-profile .stat-grid p {
  margin-block-start: 0.12rem;
  font-size: 0.48rem;
  line-height: 1.15;
}

.profile-clubhouse {
  margin-block-start: 0.9rem;
  padding: 0.75rem;
  border-width: 0.1rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 0.28rem 0 rgba(73, 97, 92, 0.14), inset 0 0.08rem 0 white;
}

.profile-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.12rem 0.15rem 0.62rem;
}

.profile-section-title > span {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.65rem;
  background: linear-gradient(145deg, #d8cfff, #9e83f3);
  color: #362865;
  box-shadow: 0 0.15rem 0 #725cb2, inset 0 0.08rem 0 white;
}

.profile-section-title h2 {
  margin: 0;
  font-size: 0.78rem;
}

.profile-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.profile-action-grid .setting-row {
  position: relative;
  min-height: 4.8rem;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.58rem;
  border: 0.08rem solid rgba(19, 42, 51, 0.09);
  border-radius: 1rem;
  background: linear-gradient(155deg, white, #edf5f3);
  box-shadow: 0 0.16rem 0 rgba(65, 91, 88, 0.14), inset 0 0.08rem 0 white;
}

.profile-action-grid .setting-row + .setting-row {
  border-block-start-width: 0.08rem;
}

.profile-action-grid .setting-icon {
  width: 2.5rem;
  border-radius: 0.82rem;
  background: linear-gradient(145deg, #ddf5ff, #95d5ff);
  box-shadow: 0 0.14rem 0 #70a5c5, inset 0 0.08rem 0 white;
  font-size: 1rem;
}

.profile-action-grid .setting-row:nth-child(1) .setting-icon {
  background: linear-gradient(145deg, #ecffbb, #abec57);
  box-shadow: 0 0.14rem 0 #74a93c, inset 0 0.08rem 0 white;
}

.profile-action-grid .setting-row:nth-child(2) .setting-icon {
  background: linear-gradient(145deg, #fff0ad, #ffc858);
  box-shadow: 0 0.14rem 0 #b77a2f, inset 0 0.08rem 0 white;
}

.profile-action-grid .setting-row:nth-child(4) .setting-icon {
  background: linear-gradient(145deg, #ffd8e9, #ff8fbd);
  box-shadow: 0 0.14rem 0 #b65783, inset 0 0.08rem 0 white;
}

.profile-action-grid .setting-row strong {
  font-size: 0.62rem;
}

.profile-action-grid .setting-row small {
  max-width: 7rem;
  overflow: hidden;
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-action-grid .chevron {
  position: absolute;
  inset: auto 0.45rem 0.25rem auto;
  font-size: 1rem;
}

.profile-action-grid .switch {
  position: absolute;
  inset: auto 0.5rem 0.5rem auto;
  width: 2.2rem;
  height: 1.28rem;
  padding: 0.15rem;
}

.profile-action-grid .switch span {
  width: 0.98rem;
}

.profile-account-actions {
  margin-block-start: 0.55rem;
  padding-inline: 0.25rem;
}

.profile-account-actions .setting-row {
  min-height: 3.45rem;
  padding-block: 0.4rem;
}

@keyframes profile-spark {
  to { opacity: 0.45; scale: 0.68; rotate: 18deg; }
}

@media (max-width: 23rem) {
  .play-resource-pill {
    grid-template-columns: 1fr;
    place-items: center;
    padding-inline: 0.2rem;
  }

  .play-resource-pill > i {
    display: none;
  }

  .play-resource-pill span {
    text-align: center;
  }

  .play-quick-actions button {
    min-inline-size: 3.05rem;
  }

  .view-profile .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-player-card {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .profile-player-card .profile-avatar {
    width: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card-spark {
    animation: none;
  }
}

@media (forced-colors: active) {
  .play-resource-pill,
  .play-quick-actions button,
  .view-play :is(.game-heading, .game-controls, .orbit-cascade-panel),
  .profile-player-card,
  .profile-rank-card,
  .view-profile .stat-grid article,
  .profile-action-grid .setting-row {
    border: 0.12rem solid CanvasText;
  }
}

/* Keep the final Me-page stat treatment ahead of legacy compact overrides. */
html[data-view="profile"] .view-profile .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-block-start: 0.9rem;
}

html[data-view="profile"] .view-profile .stat-grid article {
  display: grid;
  min-height: 6.2rem;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0.08rem 0.7rem;
  padding: 0.78rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.86);
  border-radius: 1.2rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(228, 244, 255, 0.94));
  box-shadow: 0 0.26rem 0 rgba(47, 97, 135, 0.52), 0 0.6rem 0.95rem rgba(4, 35, 75, 0.18), inset 0 0.09rem 0 white;
  text-align: start;
}

html[data-view="profile"] .view-profile .stat-grid .stat-icon {
  width: 2.75rem;
  grid-row: 1 / -1;
  margin: 0;
  border: 0.09rem solid white;
  box-shadow: 0 0.16rem 0 rgba(55, 87, 101, 0.42), inset 0 0.09rem 0 rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

html[data-view="profile"] .view-profile .stat-grid strong {
  margin: 0;
  color: #173c59;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
}

html[data-view="profile"] .view-profile .stat-grid p {
  margin: 0;
  color: #587080;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Scenic collection screens: game objects and places, not dashboard tiles. */
html:is([data-view="journey"], [data-view="achievements"], [data-view="profile"]) main {
  view-transition-name: collection-stage;
}

::view-transition-group(collection-stage) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

html[data-view-direction="forward"]::view-transition-old(collection-stage),
html:active-view-transition-type(forward)::view-transition-old(collection-stage) {
  animation-name: collection-slide-out-left;
}

html[data-view-direction="forward"]::view-transition-new(collection-stage),
html:active-view-transition-type(forward)::view-transition-new(collection-stage) {
  animation-name: collection-slide-in-right;
}

html[data-view-direction="backward"]::view-transition-old(collection-stage),
html:active-view-transition-type(backward)::view-transition-old(collection-stage) {
  animation-name: collection-slide-out-right;
}

html[data-view-direction="backward"]::view-transition-new(collection-stage),
html:active-view-transition-type(backward)::view-transition-new(collection-stage) {
  animation-name: collection-slide-in-left;
}

@keyframes collection-slide-out-left {
  to { opacity: 0; transform: translateX(-12%); }
}

@keyframes collection-slide-in-right {
  from { opacity: 0; transform: translateX(12%); }
}

@keyframes collection-slide-out-right {
  to { opacity: 0; transform: translateX(12%); }
}

@keyframes collection-slide-in-left {
  from { opacity: 0; transform: translateX(-12%); }
}

.collection-page-subtitle,
.view-journey .journey-hero-copy > small,
.view-achievements .featured-achievement-copy > span,
.view-profile .profile-player-copy > p:last-child {
  font-size: clamp(0.76rem, 3.15vw, 0.86rem);
  line-height: 1.35;
}

.page-kicker-chip,
.view-journey .journey-hero-eyebrow,
.view-achievements .featured-achievement p,
.profile-section-title small,
.view-profile .profile-player-copy .eyebrow {
  font-size: clamp(0.62rem, 2.55vw, 0.7rem);
}

/* Journey becomes a toy-like route map. */
.view-journey .journey-summary {
  position: relative;
  z-index: 3;
  gap: 0;
  margin: -0.45rem 0 1rem;
  padding: 0.55rem 0.25rem 0;
  border: 0;
  background: none;
}

.view-journey .journey-summary::before {
  position: absolute;
  z-index: -1;
  height: 0.38rem;
  inset: 1.75rem 10% auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd45c, #c8f765, #84e8ff);
  box-shadow: 0 0.12rem 0 rgba(23, 72, 104, 0.42), 0 0 0.6rem rgba(190, 244, 119, 0.38);
  content: "";
}

.view-journey .journey-summary > div {
  display: flex;
  min-height: 4.65rem;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.view-journey .journey-summary > div + div {
  border: 0;
}

.view-journey .journey-summary i {
  z-index: 1;
  width: 2.55rem;
  margin-block-end: 0.22rem;
  border: 0.12rem solid white;
  border-radius: 50%;
  box-shadow: 0 0.2rem 0 #9b6428, 0 0.45rem 0.8rem rgba(9, 45, 82, 0.2), inset 0 0.1rem 0 white;
  font-size: 1rem;
}

.view-journey .journey-summary > div:nth-child(2) i {
  background: linear-gradient(145deg, #f1ffae, #a9e958);
  color: #34592c;
  box-shadow: 0 0.2rem 0 #66983a, 0 0.45rem 0.8rem rgba(9, 45, 82, 0.2), inset 0 0.1rem 0 white;
}

.view-journey .journey-summary > div:nth-child(3) i {
  background: linear-gradient(145deg, #d5f7ff, #76d7f1);
  color: #285678;
  box-shadow: 0 0.2rem 0 #4789a5, 0 0.45rem 0.8rem rgba(9, 45, 82, 0.2), inset 0 0.1rem 0 white;
}

.view-journey .journey-summary span {
  color: rgba(237, 250, 255, 0.78);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
}

.view-journey .journey-summary strong {
  color: white;
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  text-shadow: 0 0.1rem 0 rgba(9, 43, 80, 0.5);
}

.view-journey .chapter-block {
  padding: 1.1rem 0.9rem 1.25rem;
  overflow: hidden;
  border: 0.15rem solid rgba(255, 255, 255, 0.78);
  border-radius: 2.4rem 2.4rem 2.8rem 2.1rem;
  background:
    radial-gradient(ellipse at 18% 101%, hsl(var(--chapter-hue) 80% 39%) 0 24%, transparent 24.5%),
    radial-gradient(ellipse at 92% 105%, hsl(calc(var(--chapter-hue) + 32) 76% 44%) 0 35%, transparent 35.5%),
    linear-gradient(180deg, hsl(var(--chapter-hue) 78% 73%), hsl(var(--chapter-hue) 68% 54%));
  box-shadow: 0 0.42rem 0 hsl(var(--chapter-hue) 44% 35%), 0 1rem 1.5rem rgba(5, 36, 78, 0.25), inset 0 0.12rem 0 rgba(255, 255, 255, 0.72);
}

.view-journey .chapter-block::before {
  width: 11rem;
  height: 4.2rem;
  inset: auto auto -2.6rem -2rem;
  border: 0;
  border-radius: 50%;
  background: hsl(calc(var(--chapter-hue) + 74) 64% 58% / 0.7);
  box-shadow: none;
  rotate: -5deg;
}

.view-journey .chapter-block::after {
  position: absolute;
  width: 10rem;
  aspect-ratio: 1;
  inset: -7.5rem -4rem auto auto;
  border: 1.25rem solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.view-journey .chapter-header,
.view-journey .chapter-progress,
.view-journey .level-grid {
  position: relative;
  z-index: 2;
}

.view-journey .chapter-number {
  border-color: white;
  background: linear-gradient(145deg, #fff7ba, #ffc958);
  color: #654019;
  box-shadow: 0 0.2rem 0 #a26629, inset 0 0.1rem 0 white;
  rotate: -3deg;
}

.view-journey .chapter-number span,
.view-journey .chapter-title p,
.view-journey .chapter-stars span {
  color: hsl(var(--chapter-hue) 62% 22%);
  font-size: clamp(0.58rem, 2.35vw, 0.66rem);
}

.view-journey .chapter-number span {
  color: #805324;
}

.view-journey .chapter-title h2,
.view-journey .chapter-stars strong {
  color: hsl(var(--chapter-hue) 66% 19%);
  text-shadow: 0 0.08rem 0 rgba(255, 255, 255, 0.38);
}

.view-journey .chapter-progress {
  height: 0.62rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.42);
  background: rgba(15, 56, 98, 0.25);
}

.view-journey .level-grid {
  gap: 0.82rem 0.72rem;
  padding: 0.7rem 0.3rem 0.2rem;
  overflow: visible;
}

.view-journey .level-button {
  z-index: 1;
  aspect-ratio: 1;
  gap: 0.04rem;
  padding: 0.78rem 0.2rem 0.15rem;
  border: 0.14rem solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: linear-gradient(145deg, #f9fdff, #cfe8ef);
  box-shadow: 0 0.24rem 0 hsl(var(--chapter-hue) 34% 38%), 0 0.45rem 0.65rem hsl(var(--chapter-hue) 50% 26% / 0.24), inset 0 0.1rem 0 white;
}

.view-journey .level-button::after {
  position: absolute;
  z-index: -2;
  width: 0.92rem;
  inset: 50% auto auto calc(100% + 0.02rem);
  border-block-start: 0.22rem dotted rgba(255, 255, 255, 0.72);
  content: "";
}

.view-journey .level-button:nth-child(4n)::after {
  width: 0;
  height: 1rem;
  inset: calc(100% + 0.05rem) auto auto 50%;
  border-block-start: 0;
  border-inline-start: 0.22rem dotted rgba(255, 255, 255, 0.72);
}

.view-journey .level-button:last-child::after {
  display: none;
}

.level-token-icon {
  position: absolute;
  display: grid;
  width: 1.35rem;
  aspect-ratio: 1;
  inset: -0.32rem auto auto 50%;
  place-items: center;
  border: 0.08rem solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #def7ff, #82d6ec);
  color: #28536c;
  box-shadow: 0 0.12rem 0 #508ba1, inset 0 0.07rem 0 white;
  font-size: 0.56rem;
  translate: -50% 0;
}

.view-journey .level-button.is-current .level-token-icon {
  background: linear-gradient(145deg, #f3ffaf, #a7e74f);
  color: #2d592f;
  box-shadow: 0 0.12rem 0 #61973b, 0 0 0.55rem #dfff77, inset 0 0.07rem 0 white;
}

.view-journey .level-button strong {
  font-size: clamp(0.9rem, 3.7vw, 1.02rem);
}

.view-journey .level-badge {
  inset-block-start: auto;
  inset-block-end: -0.28rem;
  padding: 0.2rem 0.42rem;
  border: 0.07rem solid white;
  font-size: 0.52rem;
  box-shadow: 0 0.1rem 0 hsl(var(--chapter-hue) 44% 37%);
}

/* Awards reads as an album: physical tabs and sticker slots. */
.award-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.48rem;
  margin: -0.12rem 0 0.82rem;
  padding-inline: 0.25rem;
}

.award-filter button {
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.48rem 0.58rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.68);
  border-radius: 0.9rem 0.9rem 0.45rem 0.45rem;
  background: linear-gradient(155deg, #e8f6ff, #bcd9e8);
  color: #345266;
  box-shadow: 0 0.18rem 0 #7392a3, inset 0 0.08rem 0 white;
  font-size: clamp(0.68rem, 2.8vw, 0.76rem);
  font-weight: 850;
  cursor: pointer;
  transition: translate 160ms ease, filter 160ms ease;
}

.award-filter button:is(:hover, :focus-visible) {
  filter: brightness(1.05);
  translate: 0 -0.08rem;
}

.award-filter button.is-active {
  border-color: white;
  background: linear-gradient(145deg, #f1ffad, #afe952);
  color: #24452f;
  box-shadow: 0 0.2rem 0 #64943d, 0 0.4rem 0.7rem rgba(29, 72, 55, 0.2), inset 0 0.09rem 0 white;
}

.award-filter button strong {
  display: grid;
  min-width: 1.45rem;
  min-height: 1.45rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(27, 67, 82, 0.14);
  font-family: var(--mono);
  font-size: 0.64rem;
}

.view-achievements .achievement-grid {
  padding: 0.85rem;
  border: 0.14rem solid rgba(255, 255, 255, 0.72);
  border-radius: 1.9rem;
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(49, 71, 98, 0.12) 49.5% 50.5%, transparent 50.6%),
    linear-gradient(145deg, #fff5d8, #f0dfbb);
  box-shadow: 0 0.4rem 0 #9b8059, 0 0.9rem 1.4rem rgba(4, 35, 75, 0.2), inset 0 0.12rem 0 white;
}

.view-achievements .achievement-card {
  min-height: 12rem;
  border-color: rgba(112, 86, 48, 0.18);
  background:
    radial-gradient(circle at 50% 7%, color-mix(in srgb, var(--award-color) 42%, white), transparent 5.6rem),
    rgba(255, 252, 239, 0.72);
  box-shadow: inset 0 0 0 0.08rem rgba(255, 255, 255, 0.46), 0 0.16rem 0 rgba(109, 86, 53, 0.28);
  animation-delay: calc(min(var(--award-index), 5) * 55ms);
}

.view-achievements .achievement-card h2 {
  font-size: clamp(0.88rem, 3.55vw, 1rem);
}

.view-achievements .achievement-card p {
  font-size: clamp(0.7rem, 2.85vw, 0.78rem);
}

.achievement-ribbon {
  font-size: 0.56rem;
}

.award-filter-empty {
  grid-column: 1 / -1;
  padding: 2.5rem 1rem;
  color: #405968;
  text-align: center;
}

.award-filter-empty > span {
  display: grid;
  width: 4rem;
  aspect-ratio: 1;
  margin: 0 auto 0.8rem;
  place-items: center;
  border: 0.14rem solid white;
  border-radius: 1.3rem;
  background: linear-gradient(145deg, #f1ffad, #afe951);
  box-shadow: 0 0.24rem 0 #64943d, inset 0 0.1rem 0 white;
  font-size: 1.4rem;
  rotate: -5deg;
}

.award-filter-empty h2 {
  margin-block-end: 0.35rem;
  font-size: 1.1rem;
}

.award-filter-empty p {
  margin: 0 auto;
  max-width: 16rem;
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Me is a player scene. Stats sit on one trophy shelf; settings stay utilitarian. */
.view-profile .profile-player-card {
  min-height: 13.8rem;
}

.profile-hero-resources {
  gap: 0;
  margin-block-start: 1rem;
  padding: 0.55rem 0.15rem 0;
  border-block-start: 0.08rem solid rgba(255, 255, 255, 0.28);
}

.profile-hero-resources > span {
  display: flex;
  min-height: 3.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.profile-hero-resources i {
  width: 2rem;
  grid-row: auto;
  margin-block-end: 0.16rem;
  border: 0.09rem solid white;
  font-size: 0.82rem;
}

.profile-hero-resources b {
  font-size: 0.9rem;
}

.profile-hero-resources small {
  color: rgba(244, 252, 255, 0.82);
  font-size: 0.56rem;
}

.view-profile .profile-player-copy > p:last-child {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.view-profile .profile-rank-card {
  border-radius: 999px;
  background: linear-gradient(155deg, #fff8bf, #d8f48e);
  box-shadow: 0 0.3rem 0 #78953c, 0 0.75rem 1rem rgba(4, 35, 75, 0.2), inset 0 0.11rem 0 white;
}

.profile-rank-step {
  grid-column: 1 / -1;
  margin-block-start: 0.22rem;
  color: #5b6b4d;
  font-size: clamp(0.64rem, 2.6vw, 0.72rem);
  font-weight: 700;
}

html[data-view="profile"] .view-profile .stat-grid {
  position: relative;
  gap: 0;
  padding: 1rem 0.35rem 1.15rem;
  border: 0.14rem solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem 2rem 1.2rem 1.2rem;
  background:
    radial-gradient(circle at 50% -50%, rgba(255, 255, 255, 0.66), transparent 65%),
    linear-gradient(145deg, #9c70ed, #6152c8);
  box-shadow: 0 0.38rem 0 #413995, 0 0.85rem 1.25rem rgba(4, 35, 75, 0.22), inset 0 0.1rem 0 rgba(255, 255, 255, 0.62);
}

html[data-view="profile"] .view-profile .stat-grid::after {
  position: absolute;
  height: 0.48rem;
  inset: auto 6% 0.58rem;
  border-radius: 999px;
  background: linear-gradient(#fff2a8, #f4ac42);
  box-shadow: 0 0.15rem 0 #9a5b27, inset 0 0.07rem 0 white;
  content: "";
}

html[data-view="profile"] .view-profile .stat-grid article {
  display: flex;
  min-height: 5.35rem;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

html[data-view="profile"] .view-profile .stat-grid .stat-icon {
  width: 2.75rem;
  grid-row: auto;
  margin: 0 0 0.35rem;
  border: 0.11rem solid white;
  border-radius: 50%;
  box-shadow: 0 0.2rem 0 rgba(49, 45, 103, 0.52), 0 0.4rem 0.6rem rgba(29, 28, 82, 0.25), inset 0 0.09rem 0 rgba(255, 255, 255, 0.8);
}

html[data-view="profile"] .view-profile .stat-grid strong {
  color: white;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  text-shadow: 0 0.1rem 0 rgba(40, 34, 105, 0.5);
}

html[data-view="profile"] .view-profile .stat-grid p {
  color: rgba(249, 247, 255, 0.86);
  font-size: clamp(0.66rem, 2.7vw, 0.74rem);
}

.view-profile .profile-clubhouse {
  padding: 0.9rem;
  border-radius: 1.8rem;
}

.view-profile .profile-action-grid {
  display: block;
}

.view-profile .profile-action-grid .setting-row {
  min-height: 4.25rem;
  padding: 0.62rem 0.35rem;
  border: 0;
  border-block-start: 0.08rem solid rgba(40, 80, 103, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.view-profile .profile-action-grid .setting-row:first-child {
  border-block-start: 0;
}

.view-profile .profile-action-grid .setting-row strong {
  font-size: clamp(0.76rem, 3.1vw, 0.86rem);
}

.view-profile .profile-action-grid .setting-row small {
  max-width: none;
  font-size: clamp(0.66rem, 2.7vw, 0.74rem);
}

@media (max-width: 23rem) {
  .view-journey .level-grid {
    gap: 0.72rem 0.55rem;
    padding-inline: 0.12rem;
  }

  .view-journey .level-button {
    padding-block-start: 0.72rem;
  }

  .award-filter button {
    justify-content: center;
    padding-inline: 0.3rem;
  }

  .award-filter button strong {
    display: none;
  }

  .view-achievements .achievement-grid {
    gap: 0.58rem;
    padding: 0.62rem;
  }

  .profile-hero-resources i {
    display: grid;
    width: 1.75rem;
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(collection-stage),
  ::view-transition-old(collection-stage),
  ::view-transition-new(collection-stage) {
    animation: none !important;
  }

  .award-filter button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .award-filter button,
  .view-achievements .achievement-grid,
  .view-journey .level-button,
  html[data-view="profile"] .view-profile .stat-grid {
    border: 0.14rem solid CanvasText;
  }
}

html[data-play-mode="orbit"] .orbit-card .orbit-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 13.5rem) auto;
  grid-template-areas: "sector integrity radar";
  align-items: center;
  gap: 0.38rem;
}

html[data-play-mode="orbit"] .orbit-card .orbit-remaining-display {
  justify-self: end;
}

html[data-play-mode="classic"] .classic-game-panel .game-card-topline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.38rem;
}

html[data-play-mode="classic"] .classic-game-panel .heart-pressure {
  justify-self: start;
}

html[data-play-mode="classic"] .classic-game-panel .classic-remaining-display {
  justify-self: end;
}

html[data-play-mode="orbit"] .orbit-card > .play-quick-actions button {
  min-height: 3.15rem;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0.18rem 0 rgba(71, 103, 111, 0.36), inset 0 0.08rem 0 white;
}

html[data-play-mode="orbit"] .orbit-card > .play-quick-actions small {
  font-size: clamp(0.68rem, 2.85vw, 0.76rem);
}

@media (max-width: 23rem) {
  html[data-play-mode="classic"] .classic-game-panel .game-card-topline {
    gap: 0.25rem;
    margin-inline: 0.18rem;
  }

  html[data-play-mode="classic"] .classic-game-panel .classic-remaining-display {
    min-inline-size: 7.25rem;
  }

  html[data-play-mode="classic"] .classic-game-panel .heart {
    width: 1.1rem;
  }

  html[data-play-mode="classic"] .classic-game-panel .heart-countdown {
    min-inline-size: 2.55rem;
    padding-inline: 0.28rem;
  }
}

/* Zero-heart recovery becomes a staged scrap storm instead of an instant board reset. */
.classic-heart-refill {
  --refill-aqua: #63f5ff;
  --refill-lime: #d7ff58;
  --refill-pink: #ff72c9;
  --refill-violet: #8f72ff;

  position: absolute;
  z-index: 31;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 0.12rem solid rgba(255, 255, 255, 0.58);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 48%, rgba(215, 255, 88, 0.38), transparent 25%),
    radial-gradient(circle at 12% 14%, rgba(99, 245, 255, 0.36), transparent 34%),
    radial-gradient(circle at 90% 88%, rgba(255, 114, 201, 0.32), transparent 32%),
    linear-gradient(145deg, rgba(24, 24, 79, 0.97), rgba(2, 35, 55, 0.98));
  box-shadow:
    inset 0 0.16rem 0 rgba(255, 255, 255, 0.34),
    inset 0 -2rem 4rem rgba(0, 4, 20, 0.46);
  color: white;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.classic-heart-refill::before,
.classic-heart-refill::after {
  position: absolute;
  content: "";
}

.classic-heart-refill::before {
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 4deg,
    rgba(255, 255, 255, 0.14) 0 4deg,
    transparent 4deg 15deg
  );
  mask-image: radial-gradient(circle, transparent 0 16%, black 40%, transparent 71%);
}

.classic-heart-refill::after {
  width: 6.5rem;
  aspect-ratio: 1;
  border: 0.18rem solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: radial-gradient(circle, white 0 4%, var(--refill-lime) 5% 17%, rgba(99, 245, 255, 0.26) 18% 54%, transparent 55%);
  box-shadow:
    0 0 1.2rem var(--refill-aqua),
    0 0 3.5rem rgba(215, 255, 88, 0.64),
    inset 0 0 1.1rem rgba(255, 255, 255, 0.72);
}

.classic-heart-refill.is-active {
  visibility: visible;
  animation: classic-refill-cover-in 820ms cubic-bezier(0.16, 0.84, 0.25, 1) both;
}

.classic-heart-refill.is-active.is-arriving {
  animation: classic-refill-cover-out 1900ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

.classic-refill-rays {
  position: absolute;
  width: 21rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    transparent 0 10deg,
    rgba(99, 245, 255, 0.28) 10deg 14deg,
    transparent 14deg 29deg,
    rgba(255, 114, 201, 0.2) 29deg 33deg
  );
  mask-image: radial-gradient(circle, transparent 0 22%, black 35%, transparent 72%);
}

.classic-heart-refill.is-active .classic-refill-rays {
  animation: classic-refill-rays 5s linear infinite;
}

.classic-refill-ring {
  position: absolute;
  z-index: 2;
  width: 10rem;
  aspect-ratio: 1;
  border: 0.22rem solid var(--refill-aqua);
  border-radius: 50%;
  box-shadow: 0 0 1rem var(--refill-aqua), inset 0 0 0.8rem rgba(255, 255, 255, 0.3);
  opacity: 0;
}

.classic-refill-ring.is-inner {
  width: 7.5rem;
  border-color: var(--refill-lime);
  box-shadow: 0 0 1rem var(--refill-lime), inset 0 0 0.8rem rgba(255, 255, 255, 0.3);
}

.classic-heart-refill.is-active .classic-refill-ring {
  animation: classic-refill-ring 900ms cubic-bezier(0.12, 0.78, 0.22, 1) 120ms both;
}

.classic-heart-refill.is-active .classic-refill-ring.is-inner {
  animation-delay: 220ms;
}

.classic-refill-core {
  position: relative;
  z-index: 5;
  display: flex;
  width: min(82%, 18rem);
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 0.18rem 0.42rem rgba(0, 0, 0, 0.56);
  transform: scale(0.3) rotate(-8deg);
  opacity: 0;
}

.classic-heart-refill.is-active .classic-refill-core {
  animation: classic-refill-core-in 760ms cubic-bezier(0.16, 1.26, 0.28, 1) 90ms both;
}

.classic-heart-refill.is-active.is-arriving .classic-refill-core {
  animation: classic-refill-core-out 620ms cubic-bezier(0.3, 0, 0.7, 0.2) both;
}

.classic-refill-hearts {
  display: flex;
  gap: 0.38rem;
  margin-block-end: 0.35rem;
}

.classic-refill-hearts b {
  display: grid;
  width: 2.15rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.14rem solid white;
  border-radius: 0.7rem;
  background: linear-gradient(145deg, #ffb2dc, var(--refill-pink) 55%, #c82e83);
  box-shadow:
    0 0.28rem 0 #791d62,
    0 0.72rem 1rem rgba(0, 0, 0, 0.35),
    inset 0 0.13rem 0 rgba(255, 255, 255, 0.76);
  color: white;
  font-size: 1.25rem;
  line-height: 1;
}

.classic-heart-refill.is-active .classic-refill-hearts b {
  animation: classic-refill-heart-charge 540ms cubic-bezier(0.16, 1.35, 0.28, 1) both;
}

.classic-refill-hearts b:nth-child(2) { animation-delay: 110ms !important; }
.classic-refill-hearts b:nth-child(3) { animation-delay: 220ms !important; }

.classic-refill-core small {
  padding: 0.25rem 0.62rem;
  border: 0.1rem solid var(--refill-lime);
  border-radius: 999px;
  background: rgba(1, 18, 36, 0.72);
  color: var(--refill-lime);
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.classic-refill-core strong {
  margin-block-start: 0.38rem;
  color: white;
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 0.95;
  -webkit-text-stroke: 0.035rem rgba(9, 32, 55, 0.8);
}

.classic-refill-core > span:last-child {
  margin-block-start: 0.32rem;
  color: #dffcff;
  font-size: clamp(0.68rem, 3vw, 0.8rem);
  font-weight: 850;
}

.classic-refill-sparks {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
}

.classic-refill-sparks i {
  --spark-x: 8rem;
  --spark-y: -6rem;
  --spark-turn: 220deg;

  position: absolute;
  width: 0.62rem;
  height: 0.9rem;
  border: 0.1rem solid white;
  border-radius: 0.18rem 0.5rem;
  background: var(--refill-lime);
  box-shadow: 0 0 0.65rem currentColor;
  opacity: 0;
}

.classic-heart-refill.is-active .classic-refill-sparks i {
  animation: classic-refill-spark 940ms cubic-bezier(0.12, 0.7, 0.2, 1) 260ms both;
}

.classic-heart-refill.is-active.is-arriving .classic-refill-sparks i {
  animation-name: classic-refill-spark-arrival;
  animation-delay: 0ms;
}

.classic-refill-sparks i:nth-child(2n) { background: var(--refill-aqua); }
.classic-refill-sparks i:nth-child(3n) { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--refill-pink); }
.classic-refill-sparks i:nth-child(4n) { background: #ffd65f; }
.classic-refill-sparks i:nth-child(1)  { --spark-x: -9rem; --spark-y: -7rem; --spark-turn: -260deg; }
.classic-refill-sparks i:nth-child(2)  { --spark-x: -4rem; --spark-y: -10rem; --spark-turn: 320deg; }
.classic-refill-sparks i:nth-child(3)  { --spark-x: 2rem; --spark-y: -10rem; --spark-turn: -230deg; }
.classic-refill-sparks i:nth-child(4)  { --spark-x: 8rem; --spark-y: -7rem; --spark-turn: 280deg; }
.classic-refill-sparks i:nth-child(5)  { --spark-x: 10rem; --spark-y: -1rem; --spark-turn: -320deg; }
.classic-refill-sparks i:nth-child(6)  { --spark-x: 9rem; --spark-y: 6rem; --spark-turn: 250deg; }
.classic-refill-sparks i:nth-child(7)  { --spark-x: 4rem; --spark-y: 10rem; --spark-turn: -250deg; }
.classic-refill-sparks i:nth-child(8)  { --spark-x: -2rem; --spark-y: 10rem; --spark-turn: 300deg; }
.classic-refill-sparks i:nth-child(9)  { --spark-x: -8rem; --spark-y: 7rem; --spark-turn: -280deg; }
.classic-refill-sparks i:nth-child(10) { --spark-x: -10rem; --spark-y: 1rem; --spark-turn: 240deg; }
.classic-refill-sparks i:nth-child(11) { --spark-x: -8rem; --spark-y: -3rem; --spark-turn: -300deg; }
.classic-refill-sparks i:nth-child(12) { --spark-x: 7rem; --spark-y: 3rem; --spark-turn: 270deg; }

.arrow-piece:is(.is-refill-exiting, .is-refill-entering) {
  pointer-events: none;
  will-change: transform, opacity;
}

.arrow-piece.is-refill-exiting {
  animation: classic-refill-piece-out var(--refill-piece-duration) cubic-bezier(0.55, 0, 0.84, 0.3) var(--refill-delay) both;
}

.arrow-piece.is-refill-entering {
  animation: classic-refill-piece-in var(--refill-piece-duration) cubic-bezier(0.12, 0.84, 0.22, 1.18) var(--refill-delay) both;
}

.arrow-piece.is-refill-entering .arrow-shape {
  animation: classic-refill-piece-glow var(--refill-piece-duration) ease-out var(--refill-delay) both;
  will-change: filter;
}

.classic-game-panel.is-heart-refilling-out .board-wrap {
  animation: classic-refill-board-out 820ms cubic-bezier(0.32, 0, 0.68, 1) both;
}

.classic-game-panel.is-heart-refilling-in .board-wrap {
  animation: classic-refill-board-in 2300ms cubic-bezier(0.16, 0.88, 0.22, 1) both;
}

@keyframes classic-refill-cover-in {
  0% { opacity: 0; transform: scale(0.96); }
  35%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes classic-refill-cover-out {
  0%, 22% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.05); }
}

@keyframes classic-refill-rays {
  to { transform: rotate(1turn); }
}

@keyframes classic-refill-ring {
  0% { opacity: 0; transform: scale(0.15); }
  52% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.85); }
}

@keyframes classic-refill-core-in {
  0% { opacity: 0; transform: translateY(1.5rem) scale(0.3) rotate(-8deg); }
  62% { opacity: 1; transform: translateY(-0.15rem) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes classic-refill-core-out {
  0%, 25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.8) rotate(5deg); }
}

@keyframes classic-refill-heart-charge {
  0% { opacity: 0; transform: translateY(-2rem) rotate(-18deg) scale(0.2); }
  66% { opacity: 1; transform: translateY(0.12rem) rotate(4deg) scale(1.18); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes classic-refill-spark {
  0%, 18% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.2); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-turn)) scale(0.75); }
}

@keyframes classic-refill-spark-arrival {
  0% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-turn)) scale(0.35); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 0) rotate(0) scale(1.2); }
}

@keyframes classic-refill-piece-out {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0) scale(1); }
  20% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(-4deg) scale(1.16); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--refill-x), var(--refill-y)) rotate(var(--refill-turn)) scale(0.25); }
}

@keyframes classic-refill-piece-in {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--refill-x), var(--refill-y)) rotate(0) scale(0.9); }
  10% { opacity: 1; }
  70% { opacity: 1; transform: translate(-50%, -50%) translate(var(--refill-mid-x), var(--refill-mid-y)) rotate(0) scale(1.05); }
  86% { transform: translate(-50%, -50%) translate(var(--refill-settle-x), var(--refill-settle-y)) rotate(0) scale(0.98); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0) scale(1); }
}

@keyframes classic-refill-piece-glow {
  0%, 18% {
    filter:
      brightness(1.8)
      saturate(1.35)
      drop-shadow(0 0 0.5rem rgba(215, 255, 88, 0.92))
      drop-shadow(0 0 0.95rem rgba(99, 245, 255, 0.65));
  }
  100% {
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0.16rem 0.05rem rgba(0, 8, 18, 0.56))
      drop-shadow(0 0.3rem 0.34rem rgba(0, 8, 18, 0.3));
  }
}

@keyframes classic-refill-board-out {
  0%, 72% { transform: translate(0, 0) rotate(0); }
  79% { transform: translate(-0.2rem, 0.08rem) rotate(-0.5deg); }
  86% { transform: translate(0.18rem, -0.06rem) rotate(0.45deg); }
  93% { transform: translate(-0.08rem, 0.03rem) rotate(-0.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes classic-refill-board-in {
  0% { transform: scale(0.97); }
  48% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .classic-heart-refill.is-active {
    animation: classic-refill-cover-in-reduced 160ms ease both;
  }

  .classic-heart-refill.is-active.is-arriving {
    animation: classic-refill-cover-out-reduced 420ms ease both;
  }

  .classic-refill-rays,
  .classic-refill-ring,
  .classic-refill-sparks {
    display: none;
  }

  .classic-heart-refill.is-active .classic-refill-core,
  .classic-heart-refill.is-active.is-arriving .classic-refill-core,
  .classic-heart-refill.is-active .classic-refill-hearts b {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .arrow-piece.is-refill-exiting {
    animation-name: classic-refill-piece-out-reduced;
  }

  .arrow-piece.is-refill-entering {
    animation-name: classic-refill-piece-in-reduced;
  }

  .arrow-piece.is-refill-entering .arrow-shape {
    animation: none;
  }

  .classic-game-panel:is(.is-heart-refilling-out, .is-heart-refilling-in) .board-wrap {
    animation: none;
  }
}

@keyframes classic-refill-cover-in-reduced {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes classic-refill-cover-out-reduced {
  0%, 25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes classic-refill-piece-out-reduced {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes classic-refill-piece-in-reduced {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (forced-colors: active) {
  .classic-heart-refill {
    border: 0.16rem solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .classic-refill-hearts b,
  .classic-refill-core small {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* A short, board-sized victory runway keeps level changes playful without adding permanent UI. */
.classic-level-transition {
  --classic-transition-duration: 1760ms;
  --transition-accent: #d8ff66;
  --transition-accent-two: #6af2ff;
  --transition-deep: #15294c;

  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 0.1rem solid rgba(255, 255, 255, 0.38);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--transition-accent) 28%, transparent), transparent 36%),
    radial-gradient(circle at 10% 92%, color-mix(in srgb, var(--transition-accent-two) 24%, transparent), transparent 34%),
    linear-gradient(155deg, color-mix(in srgb, var(--transition-deep) 82%, #425995), #081726 72%);
  box-shadow: inset 0 0.14rem 0 rgba(255, 255, 255, 0.26), inset 0 -2rem 4rem rgba(0, 5, 18, 0.36);
  color: white;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.classic-level-transition::before,
.classic-level-transition::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.classic-level-transition::before {
  width: 122%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -8deg,
    rgba(255, 255, 255, 0.13) 0 5deg,
    transparent 5deg 17deg
  );
  mask-image: radial-gradient(circle, transparent 0 18%, black 56%, transparent 78%);
}

.classic-level-transition::after {
  width: 70%;
  height: 0.42rem;
  inset: 51% auto auto 15%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--transition-accent-two), white, var(--transition-accent), transparent);
  box-shadow: 0 0 1.25rem var(--transition-accent-two);
  opacity: 0.5;
}

.classic-level-transition.is-active {
  visibility: visible;
  animation: classic-transition-cover var(--classic-transition-duration) ease both;
}

.classic-transition-glow {
  position: absolute;
  z-index: 0;
  width: 15rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--transition-accent);
  filter: blur(4.2rem);
  opacity: 0.22;
}

.classic-transition-rays {
  position: absolute;
  z-index: 1;
  width: 22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    transparent 0 13deg,
    rgba(255, 255, 255, 0.18) 13deg 17deg,
    transparent 17deg 38deg
  );
  mask-image: radial-gradient(circle, transparent 0 20%, black 54%, transparent 72%);
}

.classic-level-transition.is-active .classic-transition-rays {
  animation: classic-transition-rays 8s linear infinite;
}

.classic-transition-ring {
  position: absolute;
  z-index: 2;
  width: 10.8rem;
  aspect-ratio: 1;
  border: 0.16rem solid color-mix(in srgb, var(--transition-accent-two) 72%, white);
  border-radius: 50%;
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--transition-accent-two) 42%, transparent), inset 0 0 1rem rgba(255, 255, 255, 0.1);
  opacity: 0;
}

.classic-transition-ring.is-inner {
  width: 7.4rem;
  border-color: color-mix(in srgb, var(--transition-accent) 82%, white);
}

.classic-level-transition.is-active .classic-transition-ring {
  animation: classic-transition-ring var(--classic-transition-duration) cubic-bezier(.16, .8, .25, 1) both;
}

.classic-level-transition.is-active .classic-transition-ring.is-inner {
  animation-delay: 80ms;
}

.classic-transition-route {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(58%, 13rem);
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, -50%);
}

.classic-transition-route::before {
  position: absolute;
  height: 0.18rem;
  inset: calc(50% - 0.09rem) 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--transition-accent), white, var(--transition-accent-two));
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--transition-accent-two) 65%, transparent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

.classic-level-transition.is-active .classic-transition-route::before {
  animation: classic-transition-route var(--classic-transition-duration) cubic-bezier(.2, .8, .2, 1) both;
}

.classic-transition-route i {
  position: relative;
  z-index: 1;
  width: 0.44rem;
  aspect-ratio: 1;
  border: 0.1rem solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--transition-accent);
  box-shadow: 0 0 0.6rem var(--transition-accent);
  opacity: 0;
}

.classic-level-transition.is-active .classic-transition-route i {
  animation: classic-transition-route-dot var(--classic-transition-duration) ease both;
}

.classic-transition-route i:nth-child(2) { animation-delay: 40ms; }
.classic-transition-route i:nth-child(3) { animation-delay: 80ms; }
.classic-transition-route i:nth-child(4) { animation-delay: 120ms; }
.classic-transition-route i:nth-child(5) { animation-delay: 160ms; }

.classic-transition-levels {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(72%, 17rem);
  grid-template-columns: 4.8rem 1fr 4.8rem;
  align-items: center;
  transform: translate(-50%, -50%);
}

.classic-transition-token {
  position: relative;
  display: grid;
  width: 4.8rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.22rem solid rgba(255, 255, 255, 0.92);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 30% 19%, white 0 4%, transparent 5%),
    linear-gradient(145deg, #fff8b5, var(--transition-accent) 50%, color-mix(in srgb, var(--transition-accent) 68%, #3a7a45));
  color: #17372d;
  box-shadow:
    0 0.4rem 0 color-mix(in srgb, var(--transition-accent) 52%, #314838),
    0 0.85rem 1.6rem rgba(0, 0, 0, 0.34),
    inset 0 0.16rem 0 rgba(255, 255, 255, 0.86);
  text-shadow: 0 0.08rem 0 white;
}

.classic-transition-token::after {
  position: absolute;
  height: 40%;
  inset: 0.25rem 0.4rem auto;
  border-radius: 0.8rem 0.8rem 50% 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.52), transparent);
  content: "";
}

.classic-transition-token small {
  position: absolute;
  z-index: 2;
  top: 0.72rem;
  font-family: var(--mono);
  font-size: 0.43rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.classic-transition-token strong {
  position: relative;
  z-index: 2;
  padding-block-start: 0.7rem;
  font-family: var(--mono);
  font-size: 1.65rem;
  font-weight: 950;
  line-height: 1;
}

.classic-transition-token.is-from {
  justify-self: start;
}

.classic-level-transition.is-active .classic-transition-token.is-from {
  animation: classic-token-cleared var(--classic-transition-duration) cubic-bezier(.2, .8, .2, 1) both;
}

.classic-transition-token.is-to {
  justify-self: end;
  background:
    radial-gradient(circle at 30% 19%, white 0 4%, transparent 5%),
    linear-gradient(145deg, #dcfbff, var(--transition-accent-two) 50%, color-mix(in srgb, var(--transition-accent-two) 64%, #276f8a));
  box-shadow:
    0 0.4rem 0 color-mix(in srgb, var(--transition-accent-two) 54%, #2f5366),
    0 0.85rem 1.6rem rgba(0, 0, 0, 0.34),
    inset 0 0.16rem 0 rgba(255, 255, 255, 0.86);
}

.classic-level-transition.is-active .classic-transition-token.is-to {
  animation: classic-token-next var(--classic-transition-duration) cubic-bezier(.2, .85, .25, 1) both;
}

.classic-transition-flight {
  position: relative;
  z-index: 9;
  display: grid;
  width: 3.25rem;
  aspect-ratio: 1;
  justify-self: center;
  place-items: center;
  border: 0.17rem solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: linear-gradient(145deg, white, #ffd95b 56%, #e4952f);
  color: #5e3b24;
  box-shadow: 0 0.26rem 0 #9d612b, 0 0.55rem 1.2rem rgba(0, 0, 0, 0.34), inset 0 0.12rem 0 white;
}

.classic-level-transition.is-active .classic-transition-flight {
  animation: classic-flight-star-road var(--classic-transition-duration) cubic-bezier(.18, .75, .18, 1) both;
}

.classic-transition-flight b {
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
  line-height: 1;
}

.classic-transition-flight i {
  position: absolute;
  width: 5rem;
  height: 0.8rem;
  right: 72%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--transition-accent), white);
  filter: blur(0.2rem);
  opacity: 0.7;
}

.classic-transition-copy {
  position: absolute;
  z-index: 9;
  top: calc(50% + 5.3rem);
  left: 50%;
  display: flex;
  width: max-content;
  max-width: 86%;
  flex-direction: column;
  align-items: center;
  color: white;
  text-align: center;
  text-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.42);
  transform: translate(-50%, 1rem) scale(0.9);
  opacity: 0;
}

.classic-level-transition.is-arriving .classic-transition-copy {
  animation: classic-transition-copy-in 690ms cubic-bezier(.16, .9, .22, 1.2) both;
}

.classic-transition-copy small {
  display: inline-flex;
  margin-block-end: 0.22rem;
  padding: 0.22rem 0.55rem;
  border: 0.1rem solid color-mix(in srgb, var(--transition-accent) 76%, white);
  border-radius: 99px;
  background: rgba(3, 17, 30, 0.62);
  color: color-mix(in srgb, var(--transition-accent) 78%, white);
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 950;
  letter-spacing: 0.11em;
}

.classic-transition-copy strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(1.35rem, 7vw, 2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classic-transition-copy > span {
  margin-block-start: 0.24rem;
  color: rgba(236, 251, 255, 0.78);
  font-size: clamp(0.66rem, 3vw, 0.78rem);
  font-weight: 800;
}

.classic-transition-particles {
  position: absolute;
  z-index: 11;
  inset: 50% auto auto 50%;
}

.classic-transition-particles i {
  --tx: 8rem;
  --ty: -5rem;
  --turn: 180deg;

  position: absolute;
  width: 0.54rem;
  height: 0.78rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.78);
  border-radius: 0.2rem 0.45rem 0.2rem 0.45rem;
  background: var(--transition-accent);
  box-shadow: 0 0 0.5rem currentColor;
  opacity: 0;
}

.classic-level-transition.is-active .classic-transition-particles i {
  animation: classic-transition-particle var(--classic-transition-duration) cubic-bezier(.12, .7, .2, 1) both;
}

.classic-transition-particles i:nth-child(2n) { background: var(--transition-accent-two); }
.classic-transition-particles i:nth-child(3n) { width: 0.42rem; aspect-ratio: 1; height: auto; border-radius: 50%; background: #ff8ccf; }
.classic-transition-particles i:nth-child(4n) { background: #ffd95d; }
.classic-transition-particles i:nth-child(1)  { --tx: -9rem; --ty: -6rem; --turn: -240deg; }
.classic-transition-particles i:nth-child(2)  { --tx: -6rem; --ty: -9rem; --turn: 310deg; animation-delay: 45ms; }
.classic-transition-particles i:nth-child(3)  { --tx: -2rem; --ty: -10rem; --turn: -190deg; animation-delay: 80ms; }
.classic-transition-particles i:nth-child(4)  { --tx: 3rem; --ty: -9rem; --turn: 270deg; animation-delay: 20ms; }
.classic-transition-particles i:nth-child(5)  { --tx: 8rem; --ty: -7rem; --turn: -310deg; animation-delay: 90ms; }
.classic-transition-particles i:nth-child(6)  { --tx: 10rem; --ty: -2rem; --turn: 220deg; animation-delay: 55ms; }
.classic-transition-particles i:nth-child(7)  { --tx: 10rem; --ty: 4rem; --turn: -240deg; animation-delay: 110ms; }
.classic-transition-particles i:nth-child(8)  { --tx: 7rem; --ty: 8rem; --turn: 300deg; animation-delay: 30ms; }
.classic-transition-particles i:nth-child(9)  { --tx: 2rem; --ty: 10rem; --turn: -200deg; animation-delay: 80ms; }
.classic-transition-particles i:nth-child(10) { --tx: -3rem; --ty: 9rem; --turn: 260deg; animation-delay: 120ms; }
.classic-transition-particles i:nth-child(11) { --tx: -8rem; --ty: 7rem; --turn: -320deg; animation-delay: 45ms; }
.classic-transition-particles i:nth-child(12) { --tx: -10rem; --ty: 2rem; --turn: 230deg; animation-delay: 95ms; }
.classic-transition-particles i:nth-child(13) { --tx: -8rem; --ty: -3rem; --turn: -280deg; animation-delay: 130ms; }
.classic-transition-particles i:nth-child(14) { --tx: 6rem; --ty: -4rem; --turn: 250deg; animation-delay: 70ms; }
.classic-transition-particles i:nth-child(15) { --tx: 6rem; --ty: 5rem; --turn: -220deg; animation-delay: 140ms; }
.classic-transition-particles i:nth-child(16) { --tx: -5rem; --ty: 5rem; --turn: 290deg; animation-delay: 15ms; }

/* Five shuffled treatments change the energy without changing the level-change timing. */
.classic-level-transition[data-treatment="prize-pop"] {
  --transition-accent: #ffd55f;
  --transition-accent-two: #ff8fd6;
  --transition-deep: #64345f;
}

.classic-level-transition[data-treatment="prize-pop"] .classic-transition-flight {
  animation-name: classic-flight-prize-pop;
}

.classic-level-transition[data-treatment="ribbon-rush"] {
  --transition-accent: #72f0cf;
  --transition-accent-two: #8fb2ff;
  --transition-deep: #263c74;
}

.classic-level-transition[data-treatment="ribbon-rush"] .classic-transition-flight {
  animation-name: classic-flight-ribbon-rush;
}

.classic-level-transition[data-treatment="portal-hop"] {
  --transition-accent: #cc92ff;
  --transition-accent-two: #6cf5ff;
  --transition-deep: #3a286e;
}

.classic-level-transition[data-treatment="portal-hop"] .classic-transition-flight {
  animation-name: classic-flight-portal-hop;
}

.classic-level-transition[data-treatment="tile-flip"] {
  --transition-accent: #a9f05d;
  --transition-accent-two: #ffb05e;
  --transition-deep: #305152;
}

.classic-level-transition[data-treatment="tile-flip"] .classic-transition-flight {
  animation-name: classic-flight-tile-flip;
}

.classic-game-panel.is-level-transitioning .board {
  animation: classic-board-out 760ms cubic-bezier(.35, 0, .8, .3) both;
}

.classic-game-panel.is-level-transitioning.is-level-arriving .board {
  animation: classic-board-in 720ms cubic-bezier(.14, .9, .22, 1.08) both;
}

.classic-game-panel.is-level-transitioning .game-heading {
  animation: classic-heading-out 560ms ease both;
}

.classic-game-panel.is-level-transitioning.is-level-arriving .game-heading {
  animation: classic-heading-in 600ms cubic-bezier(.16, .9, .22, 1.12) both;
}

@keyframes classic-transition-cover {
  0% { opacity: 0; transform: scale(0.98); }
  7%, 89% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.018); }
}

@keyframes classic-transition-rays {
  to { transform: rotate(1turn); }
}

@keyframes classic-transition-ring {
  0%, 12% { opacity: 0; transform: scale(0.28); }
  31% { opacity: 0.82; transform: scale(1); }
  52% { opacity: 0.28; transform: scale(1.35); }
  53%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes classic-transition-route {
  0%, 12% { transform: scaleX(0); opacity: 0; }
  30%, 71% { transform: scaleX(1); opacity: 1; }
  88%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes classic-transition-route-dot {
  0%, 15% { opacity: 0; transform: scale(0.2); }
  28%, 72% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes classic-token-cleared {
  0% { opacity: 0; transform: translateX(-3.8rem) rotate(-15deg) scale(0.65); }
  16%, 38% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
  55%, 100% { opacity: 0; transform: translateX(4.2rem) rotate(18deg) scale(0.3); }
}

@keyframes classic-token-next {
  0%, 43% { opacity: 0; transform: translateX(3.5rem) rotate(14deg) scale(0.25); }
  64% { opacity: 1; transform: translateX(-0.25rem) rotate(-3deg) scale(1.13); }
  75%, 91% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translateX(0) scale(1.08); }
}

@keyframes classic-flight-star-road {
  0%, 12% { opacity: 0; transform: translateX(-4.6rem) translateY(1.2rem) rotate(-18deg) scale(0.45); }
  25% { opacity: 1; transform: translateX(-2.8rem) translateY(-0.65rem) rotate(-5deg) scale(1.08); }
  49% { opacity: 1; transform: translateX(0) translateY(0.45rem) rotate(6deg) scale(1); }
  67% { opacity: 1; transform: translateX(3rem) translateY(-0.4rem) rotate(-3deg) scale(1.1); }
  78%, 100% { opacity: 0; transform: translateX(5rem) translateY(0) rotate(8deg) scale(0.4); }
}

@keyframes classic-flight-prize-pop {
  0%, 14% { opacity: 0; transform: translateY(-6rem) scale(0.45); }
  29% { opacity: 1; transform: translateY(0.5rem) scale(1.25, 0.82); }
  41% { transform: translateY(-1.1rem) scale(0.9, 1.12); }
  57% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(-0.4rem) scale(1.08); }
  83%, 100% { opacity: 0; transform: translateY(4rem) scale(0.35); }
}

@keyframes classic-flight-ribbon-rush {
  0%, 10% { opacity: 0; transform: translateX(-7rem) translateY(1.6rem) rotate(-38deg) scale(0.5); }
  29% { opacity: 1; transform: translateX(-2.8rem) translateY(-1rem) rotate(24deg) scale(1.12); }
  50% { opacity: 1; transform: translateX(0) translateY(0.8rem) rotate(-16deg) scale(0.96); }
  70% { opacity: 1; transform: translateX(3.2rem) translateY(-0.7rem) rotate(18deg) scale(1.08); }
  82%, 100% { opacity: 0; transform: translateX(7rem) translateY(0.6rem) rotate(34deg) scale(0.45); }
}

@keyframes classic-flight-portal-hop {
  0%, 15% { opacity: 0; transform: scale(0.08) rotate(-220deg); }
  31% { opacity: 1; transform: scale(1.22) rotate(8deg); }
  45% { transform: scale(0.88) rotate(-4deg); }
  58% { opacity: 1; transform: scale(1.04) rotate(0); }
  75% { opacity: 1; transform: scale(1.3) rotate(140deg); }
  84%, 100% { opacity: 0; transform: scale(0.06) rotate(360deg); }
}

@keyframes classic-flight-tile-flip {
  0%, 11% { opacity: 0; transform: translateX(-5rem) rotateY(-90deg) rotateZ(-10deg) scale(0.7); }
  28% { opacity: 1; transform: translateX(-2.6rem) rotateY(0) rotateZ(5deg) scale(1.08); }
  50% { transform: translateX(0) rotateY(180deg) rotateZ(-4deg) scale(0.98); }
  70% { opacity: 1; transform: translateX(2.8rem) rotateY(360deg) rotateZ(5deg) scale(1.08); }
  82%, 100% { opacity: 0; transform: translateX(5rem) rotateY(450deg) scale(0.42); }
}

@keyframes classic-transition-copy-in {
  0% { opacity: 0; transform: translate(-50%, 1.2rem) scale(0.86); }
  62% { opacity: 1; transform: translate(-50%, -0.12rem) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes classic-transition-particle {
  0%, 35% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.25); }
  43% { opacity: 1; }
  76% { opacity: 0.9; transform: translate(var(--tx), var(--ty)) rotate(var(--turn)) scale(1); }
  92%, 100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 2rem)) rotate(var(--turn)) scale(0.55); }
}

@keyframes classic-board-out {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(-1.2rem) scale(0.76) rotate(-2deg); }
}

@keyframes classic-board-in {
  0% { opacity: 0; transform: translateY(1.8rem) scale(0.76) rotate(2deg); }
  66% { opacity: 1; transform: translateY(-0.18rem) scale(1.025) rotate(-0.4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes classic-heading-out {
  to { opacity: 0; transform: translateY(-0.4rem) scale(0.92); }
}

@keyframes classic-heading-in {
  from { opacity: 0; transform: translateY(0.6rem) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 23rem) {
  .classic-transition-levels {
    width: 82%;
    grid-template-columns: 4.2rem 1fr 4.2rem;
  }

  .classic-transition-token {
    width: 4.2rem;
    border-radius: 1.15rem;
  }

  .classic-transition-token strong {
    font-size: 1.42rem;
  }

  .classic-transition-copy {
    top: calc(50% + 4.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .classic-level-transition.is-active {
    animation: classic-transition-cover-reduced var(--classic-transition-duration) ease both;
  }

  .classic-transition-rays,
  .classic-transition-ring,
  .classic-transition-route,
  .classic-transition-levels,
  .classic-transition-particles {
    display: none;
  }

  .classic-game-panel.is-level-transitioning .board,
  .classic-game-panel.is-level-transitioning.is-level-arriving .board {
    animation: none;
  }

  .classic-level-transition .classic-transition-copy,
  .classic-level-transition.is-arriving .classic-transition-copy {
    opacity: 1;
    transform: translate(-50%, 0);
    animation: none;
  }
}

@keyframes classic-transition-cover-reduced {
  0%, 100% { opacity: 0; }
  18%, 82% { opacity: 1; }
}

@media (forced-colors: active) {
  .classic-level-transition {
    border: 0.16rem solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .classic-transition-token,
  .classic-transition-flight,
  .classic-transition-copy small {
    border: 0.14rem solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* Classic clear streaks are automatic; Chain Bursts are earned, stored power-ups. */
html[data-play-mode="classic"] .classic-controls-sheet .classic-cascade-panel {
  grid-template-areas:
    "copy status"
    "surge surge"
    "power power";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.72rem;
  padding: 0.82rem;
}

.classic-cascade-panel .orbit-cascade-status {
  min-inline-size: 5.6rem;
  padding: 0.48rem 0.58rem;
  border: 0.1rem solid rgba(110, 82, 139, 0.12);
  border-radius: 0.9rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.86), rgba(236, 230, 255, 0.72));
  box-shadow: 0 0.18rem 0 rgba(91, 72, 116, 0.18), inset 0 0.08rem 0 white;
}

.classic-cascade-panel .orbit-cascade-status strong {
  color: #68408e;
  font-size: clamp(1.25rem, 5.4vw, 1.55rem);
  line-height: 1;
}

.classic-cascade-panel .orbit-cascade-status > small {
  display: block;
  margin-block-start: 0.22rem;
  color: #77647f;
  font-size: clamp(0.52rem, 2.25vw, 0.6rem);
  font-weight: 800;
  white-space: nowrap;
}

html[data-play-mode="classic"] .classic-controls-sheet .classic-surge-meter {
  grid-template-columns: auto minmax(5rem, 1fr) auto;
  gap: 0.58rem;
  min-height: 2.65rem;
  padding: 0.5rem 0.62rem;
  border: 0.1rem solid rgba(204, 145, 43, 0.18);
  background:
    linear-gradient(90deg, rgba(255, 205, 92, 0.34) var(--classic-charge), transparent var(--classic-charge)),
    rgba(255, 255, 255, 0.6);
  color: #6f5430;
}

.classic-surge-meter > small {
  color: #806f6f;
  font-family: var(--sans);
  font-size: clamp(0.54rem, 2.25vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0;
  text-align: end;
}

.classic-chain-power {
  position: relative;
  display: grid;
  min-height: 4.15rem;
  grid-area: power;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  padding: 0.58rem 0.72rem;
  overflow: hidden;
  border: 0.14rem solid rgba(255, 255, 255, 0.9);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.76), transparent 28%),
    linear-gradient(145deg, #fff0a0, #ffc94f 56%, #ed8d37);
  color: #573518;
  box-shadow:
    0 0.25rem 0 #9d5b27,
    0 0.58rem 1rem rgba(72, 49, 29, 0.2),
    inset 0 0.11rem 0 white;
  text-align: start;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.classic-chain-power::after {
  position: absolute;
  width: 28%;
  inset: -70% auto -70% -38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  content: "";
  transform: skewX(-18deg);
}

.classic-chain-power.is-ready::after {
  animation: classic-chain-shine 2.8s ease-in-out infinite;
}

.classic-chain-power:is(:hover, :focus-visible):not(:disabled) {
  filter: brightness(1.06) saturate(1.08);
  transform: translateY(-0.08rem);
}

.classic-chain-power:active:not(:disabled) {
  box-shadow: 0 0.08rem 0 #9d5b27, inset 0 0.11rem 0 white;
  transform: translateY(0.14rem) scale(0.99);
}

.classic-chain-power:disabled {
  border-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(145deg, #f1eee4, #dcd8cd);
  color: #827a6f;
  box-shadow: 0 0.18rem 0 #aaa398, inset 0 0.1rem 0 white;
  cursor: not-allowed;
  filter: saturate(0.42);
}

.classic-chain-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.12rem solid rgba(255, 255, 255, 0.92);
  border-radius: 0.95rem;
  background: linear-gradient(145deg, #7af1ec, #7e99ed 62%, #684fc1);
  color: white;
  box-shadow: 0 0.2rem 0 #4d478b, 0 0.42rem 0.8rem rgba(71, 69, 137, 0.22), inset 0 0.1rem 0 white;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: -0.18em;
  text-shadow: 0 0.09rem 0 #4e478e;
  transform: rotate(-4deg);
}

.classic-chain-power.is-ready .classic-chain-icon {
  animation: classic-chain-ready 1.8s ease-in-out infinite;
}

.classic-chain-power > span:nth-child(2) {
  position: relative;
  z-index: 1;
  min-inline-size: 0;
}

.classic-chain-power > span:nth-child(2) > * {
  display: block;
}

.classic-chain-power > span:nth-child(2) small {
  margin-block-end: 0.12rem;
  font-family: var(--mono);
  font-size: clamp(0.58rem, 2.5vw, 0.66rem);
  font-weight: 950;
  letter-spacing: 0.08em;
}

.classic-chain-power > span:nth-child(2) strong {
  font-size: clamp(0.72rem, 3.1vw, 0.84rem);
  line-height: 1.15;
}

.classic-chain-power > b {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 2.75rem;
  min-height: 2.2rem;
  place-items: center;
  border: 0.11rem solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: #573860;
  color: #fff7b4;
  box-shadow: 0 0.17rem 0 #332039, inset 0 0.08rem 0 rgba(255, 255, 255, 0.25);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.classic-chain-power:disabled > b {
  background: #79736c;
  color: white;
  box-shadow: 0 0.14rem 0 #59534d, inset 0 0.08rem 0 rgba(255, 255, 255, 0.2);
}

@keyframes classic-chain-shine {
  0%, 62% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  68% { opacity: 0.85; }
  88%, 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}

@keyframes classic-chain-ready {
  0%, 100% { transform: rotate(-4deg) translateY(0) scale(1); }
  50% { transform: rotate(3deg) translateY(-0.12rem) scale(1.04); }
}

@media (max-width: 23rem) {
  html[data-play-mode="classic"] .classic-controls-sheet .classic-cascade-panel {
    grid-template-areas:
      "copy status"
      "surge surge"
      "power power";
    gap: 0.58rem;
    padding: 0.68rem;
  }

  html[data-play-mode="classic"] .classic-controls-sheet .classic-surge-meter {
    grid-template-columns: auto minmax(3.5rem, 1fr);
  }

  .classic-surge-meter > small {
    grid-column: 1 / -1;
    text-align: start;
  }

  .classic-chain-power {
    gap: 0.48rem;
    padding-inline: 0.52rem;
  }

  .classic-chain-icon {
    width: 2.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classic-chain-power,
  .classic-chain-power::after,
  .classic-chain-power.is-ready .classic-chain-icon {
    animation: none !important;
    transition: none;
  }
}

@media (forced-colors: active) {
  .classic-chain-power,
  .classic-cascade-panel .orbit-cascade-status,
  html[data-play-mode="classic"] .classic-controls-sheet .classic-surge-meter {
    border: 0.14rem solid CanvasText;
  }
}

/* Classic level rewards: a short, tactile celebration instead of a generic result box. */
.result-modal {
  --modal-accent: #d9ff69;
  --modal-accent-soft: #f4ffd5;
  --modal-deep: #244c58;
  --result-auto-duration: 2200ms;

  width: min(calc(100% - 1rem), 27.5rem);
}

.result-modal::backdrop {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 215, 87, 0.18), transparent 15rem),
    radial-gradient(circle at 50% 58%, rgba(121, 235, 229, 0.16), transparent 21rem),
    rgba(4, 14, 25, 0.82);
  backdrop-filter: blur(12px) saturate(1.25);
}

.result-card {
  padding: 0.56rem 1.05rem 1rem;
  overflow-x: hidden;
  border-width: 0.2rem;
  border-radius: 2.35rem;
  background:
    radial-gradient(circle at 8% 34%, rgba(255, 211, 82, 0.22), transparent 10rem),
    radial-gradient(circle at 94% 58%, rgba(123, 230, 239, 0.2), transparent 12rem),
    linear-gradient(155deg, #fffdf2, #edf8f5 56%, #e9e5ff);
  box-shadow:
    0 0 0 0.25rem #73ded4,
    0 0.72rem 0 -0.22rem #274d5c,
    0 2.5rem 6rem rgba(0, 0, 0, 0.48),
    inset 0 0.13rem 0 white;
}

.result-card::before {
  position: absolute;
  z-index: 0;
  width: 12rem;
  aspect-ratio: 1;
  inset: 8.5rem auto auto -6.5rem;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 207, 82, 0.12) 0 9deg, transparent 9deg 22deg);
  content: "";
  mask-image: radial-gradient(circle, transparent 0 22%, black 24% 70%, transparent 72%);
}

.result-card > :not(.result-confetti) {
  position: relative;
  z-index: 6;
}

.result-card .result-hero {
  height: 10.25rem;
  margin: 0 -0.56rem 0.75rem;
  overflow: hidden;
  border: 0.14rem solid rgba(255, 255, 255, 0.72);
  border-radius: 1.7rem 1.7rem 1.25rem 1.25rem;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 226, 97, 0.58), transparent 23%),
    radial-gradient(circle at 50% 50%, rgba(106, 240, 229, 0.42), transparent 48%),
    linear-gradient(145deg, #5751a1, #234d65 52%, #173640);
  box-shadow:
    inset 0 -1.5rem 3rem rgba(3, 12, 27, 0.3),
    inset 0 0.14rem 0 rgba(255, 255, 255, 0.4),
    0 0.55rem 1.1rem rgba(23, 55, 70, 0.2);
}

.result-card .result-hero::before {
  inset: -50%;
  background: repeating-conic-gradient(
    from 4deg,
    rgba(255, 255, 255, 0.13) 0 6deg,
    transparent 6deg 19deg
  );
  mask-image: radial-gradient(circle, transparent 0 7%, black 9% 35%, transparent 62%);
}

.result-card .result-hero::after {
  height: 56%;
  inset: auto -10% -34%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(217, 255, 105, 0.34), rgba(27, 73, 78, 0.92));
  box-shadow: 0 -0.16rem 0 rgba(255, 255, 255, 0.2), 0 -1rem 2.2rem rgba(217, 255, 105, 0.12);
}

.result-hero-rays {
  position: absolute;
  z-index: 1;
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    transparent 0 14deg,
    rgba(255, 255, 255, 0.2) 14deg 18deg,
    transparent 18deg 35deg
  );
  mask-image: radial-gradient(circle, transparent 0 18%, black 20% 56%, transparent 74%);
}

.result-modal[open] .result-hero-rays {
  animation: result-rays-turn 12s linear infinite;
}

.result-hero-ring {
  position: absolute;
  z-index: 2;
  width: 7.7rem;
  aspect-ratio: 1;
  border: 0.13rem solid rgba(125, 245, 236, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 1rem rgba(116, 241, 232, 0.35), inset 0 0 1rem rgba(116, 241, 232, 0.12);
}

.result-hero-ring.is-two {
  width: 9.1rem;
  border-color: rgba(255, 222, 91, 0.5);
}

.result-modal[open] .result-hero-ring {
  animation: result-ring-pulse 1.6s cubic-bezier(.18, .8, .25, 1) both;
}

.result-modal[open] .result-hero-ring.is-two {
  animation-delay: 120ms;
}

.result-hero-spark {
  position: absolute;
  z-index: 5;
  color: #fff8a5;
  filter: drop-shadow(0 0 0.42rem #ffe26a);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.result-hero-spark.is-one { inset: 1.3rem auto auto 16%; }
.result-hero-spark.is-two { inset: 2rem 14% auto auto; color: #8ff7ed; }
.result-hero-spark.is-three { inset: auto auto 1.5rem 23%; }

.result-modal[open] .result-hero-spark {
  animation: result-spark-pop 1.45s ease-in-out infinite alternate;
}

.result-modal[open] .result-hero-spark.is-two { animation-delay: -0.55s; }
.result-modal[open] .result-hero-spark.is-three { animation-delay: -0.9s; }

.result-level-medallion {
  position: relative;
  z-index: 4;
  display: grid;
  width: 6.25rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.34rem solid rgba(255, 255, 255, 0.95);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 30% 19%, white 0 5%, transparent 6%),
    linear-gradient(145deg, #fff5a2, #ffd34f 52%, #ef9136 82%);
  color: #52341d;
  box-shadow:
    0 0 0 0.48rem rgba(255, 222, 89, 0.2),
    0 0.48rem 0 #a15a2b,
    0 0.9rem 1.8rem rgba(4, 14, 28, 0.38),
    inset 0 0.16rem 0 white,
    inset -0.45rem -0.7rem 1rem rgba(151, 68, 25, 0.18);
  text-shadow: 0 0.1rem 0 rgba(255, 255, 255, 0.6);
  transform: rotate(-3deg);
}

.result-level-medallion::before {
  position: absolute;
  width: calc(100% - 0.58rem);
  aspect-ratio: 1;
  border: 0.1rem solid rgba(118, 65, 27, 0.2);
  border-radius: 1.35rem;
  content: "";
}

.result-level-medallion small {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.51rem;
  font-weight: 950;
  letter-spacing: 0.15em;
}

.result-level-medallion strong {
  position: relative;
  z-index: 2;
  padding-block-start: 0.4rem;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}

.result-level-medallion > span {
  position: absolute;
  z-index: 3;
  inset: auto -0.48rem -0.38rem auto;
  display: grid;
  width: 2.05rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.14rem solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #a4f2ed, #6d9ce5);
  color: white;
  box-shadow: 0 0.18rem 0 #445d9d, 0 0.4rem 0.65rem rgba(30, 46, 97, 0.3), inset 0 0.08rem 0 white;
  font-size: 0.86rem;
  text-shadow: 0 0.09rem 0 #445d9d;
}

.result-modal[open] .result-level-medallion {
  animation: result-medallion-land 720ms cubic-bezier(.18, .9, .22, 1.16) both;
}

.result-card .result-hero .modal-hero-chip {
  min-width: 9.4rem;
  padding-block: 0.4rem;
  background: linear-gradient(145deg, #efffa4, #b4ee55);
  color: #23442f;
  box-shadow: 0 0.24rem 0 #608f38, 0 0.55rem 0.9rem rgba(2, 17, 28, 0.28), inset 0 0.1rem 0 white;
  font-size: 0.52rem;
}

.result-heading-copy {
  text-align: center;
}

.result-heading-copy .eyebrow {
  display: inline-flex;
  margin: 0;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: #ecf8dc;
  color: #4d7450;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.result-heading-copy h2 {
  margin: 0.5rem 0 0.22rem;
  color: #223f49;
  font-size: clamp(1.55rem, 7.2vw, 2.05rem);
  line-height: 1;
}

.result-heading-copy > p:last-child {
  margin: 0;
  color: #71817f;
  font-size: clamp(0.65rem, 2.8vw, 0.74rem);
  font-weight: 750;
  line-height: 1.35;
  text-wrap: balance;
}

.result-card .result-stars {
  gap: 0.46rem;
  margin: 0.72rem 0 0.78rem;
}

.result-card .result-stars > span {
  --result-star-rotate: 0deg;
  --result-star-y: 0rem;

  width: 3rem;
  border-width: 0.16rem;
  background:
    radial-gradient(circle at 31% 20%, white 0 5%, transparent 6%),
    linear-gradient(145deg, #fff4a1, #ffc948 58%, #d98127);
  box-shadow:
    0 0.3rem 0 #a86322,
    0 0.6rem 1rem rgba(123, 77, 24, 0.22),
    inset 0 0.14rem 0 rgba(255, 255, 255, 0.8);
  font-size: 1.42rem;
  transform: translateY(var(--result-star-y)) rotate(var(--result-star-rotate));
}

.result-card .result-stars > span:nth-child(1) { --result-star-rotate: -7deg; }
.result-card .result-stars > span:nth-child(2) { --result-star-y: -0.28rem; }
.result-card .result-stars > span:nth-child(3) { --result-star-rotate: 7deg; }

.result-modal[open] .result-stars > span {
  animation: result-star-land 560ms cubic-bezier(.16, .9, .25, 1.2) both;
}

.result-modal[open] .result-stars > span:nth-child(1) { animation-delay: 180ms; }
.result-modal[open] .result-stars > span:nth-child(2) { animation-delay: 290ms; }
.result-modal[open] .result-stars > span:nth-child(3) { animation-delay: 400ms; }

.result-score-prize {
  display: grid;
  min-height: 4rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.52rem 0.68rem;
  border: 0.14rem solid white;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(145deg, #f6ffb3, #c8f45f 60%, #8fd54b);
  color: #24482d;
  box-shadow: 0 0.25rem 0 #5f9639, 0 0.52rem 0.9rem rgba(62, 108, 55, 0.2), inset 0 0.11rem 0 white;
  text-align: start;
}

.result-score-coin {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.14rem solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff19b, #ffc34a 58%, #df7f2c);
  color: white;
  box-shadow: 0 0.2rem 0 #995422, 0 0.4rem 0.75rem rgba(82, 52, 25, 0.22), inset 0 0.1rem 0 white;
  font-size: 1rem;
  text-shadow: 0 0.09rem 0 #a35b24;
}

.result-score-prize > span:nth-child(2) > * {
  display: block;
}

.result-score-prize small {
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.result-score-prize strong {
  margin-block-start: 0.05rem;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 5.2vw, 1.5rem);
  line-height: 1;
}

.result-score-prize > b {
  padding: 0.28rem 0.48rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: #4c4679;
  color: #fff6a3;
  box-shadow: 0 0.14rem 0 #302b51, inset 0 0.07rem 0 rgba(255, 255, 255, 0.22);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.result-modal[open] .result-score-prize {
  animation: result-prize-land 600ms 470ms cubic-bezier(.16, .9, .22, 1.1) both;
}

.result-card .result-stats {
  gap: 0.42rem;
  margin: 0.62rem 0 0.72rem;
}

.result-card .result-stats div {
  min-width: 0;
  padding: 0.58rem 0.24rem;
  border: 0.1rem solid rgba(75, 79, 119, 0.1);
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0.16rem 0 rgba(71, 81, 100, 0.13), inset 0 0.08rem 0 white;
}

.result-card .result-stats span {
  color: #798381;
  font-size: clamp(0.43rem, 1.9vw, 0.5rem);
}

.result-card .result-stats strong {
  overflow: hidden;
  color: #3e4b61;
  font-size: clamp(0.68rem, 2.8vw, 0.8rem);
  text-overflow: ellipsis;
}

.result-next-button {
  position: relative;
  display: grid;
  min-height: 3.5rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.56rem;
  overflow: hidden;
  border: 0.15rem solid rgba(255, 255, 255, 0.94);
  border-radius: 1.12rem;
  background: linear-gradient(145deg, #eeffa2, #b8ee58 58%, #7fc541);
  color: #1d472d;
  box-shadow: 0 0.25rem 0 #518333, 0 0.55rem 0.9rem rgba(51, 96, 48, 0.22), inset 0 0.11rem 0 white;
  font-size: clamp(0.78rem, 3.3vw, 0.9rem);
  font-weight: 950;
  text-align: start;
  text-transform: none;
}

.result-next-button::before {
  position: absolute;
  z-index: 0;
  height: 0.24rem;
  inset: auto 0 0;
  background: rgba(31, 72, 46, 0.16);
  content: "";
}

.result-modal[open] .result-next-button::before {
  animation: result-auto-progress var(--result-auto-duration) linear both;
}

.result-next-button::after {
  position: absolute;
  z-index: 0;
  width: 26%;
  inset: -70% auto -70% -40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.76), transparent);
  content: "";
  transform: skewX(-18deg);
}

.result-modal[open] .result-next-button::after {
  animation: result-button-shine 1.85s 540ms ease-in-out both;
}

.result-next-button > * {
  position: relative;
  z-index: 1;
}

.result-next-button .result-countdown {
  min-width: 2.7rem;
  padding: 0.25rem 0.4rem;
  border: 0.09rem solid rgba(39, 77, 48, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  color: #4f6c4d;
  font-size: 0.58rem;
  text-align: center;
}

.result-action-arrow {
  display: grid;
  width: 2.05rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.11rem solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: #355d43;
  color: white;
  box-shadow: 0 0.14rem 0 #1f402c, inset 0 0.08rem 0 rgba(255, 255, 255, 0.2);
  font-size: 0.86rem;
}

.result-replay-button {
  min-height: 2.25rem;
  margin-block-start: 0.25rem;
  color: #6f7c7a;
  font-size: 0.64rem;
}

.result-confetti {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.result-confetti i {
  --result-confetti-x: 0rem;
  --result-confetti-rotate: 280deg;
  --result-confetti-delay: 0ms;

  position: absolute;
  width: 0.46rem;
  height: 0.72rem;
  top: 6.7rem;
  left: 50%;
  border-radius: 0.18rem 0.42rem;
  background: #ffd458;
  box-shadow: 0 0 0.35rem currentColor;
  opacity: 0;
}

.result-confetti i:nth-child(2n) { background: #77eee5; }
.result-confetti i:nth-child(3n) { width: 0.4rem; aspect-ratio: 1; height: auto; border-radius: 50%; background: #ff8acb; }
.result-confetti i:nth-child(4n) { background: #b8ef5d; }
.result-confetti i:nth-child(1)  { --result-confetti-x: -10rem; --result-confetti-rotate: -310deg; --result-confetti-delay: 20ms; }
.result-confetti i:nth-child(2)  { --result-confetti-x: -8.4rem; --result-confetti-rotate: 250deg; --result-confetti-delay: 120ms; }
.result-confetti i:nth-child(3)  { --result-confetti-x: -7rem; --result-confetti-rotate: -230deg; --result-confetti-delay: 55ms; }
.result-confetti i:nth-child(4)  { --result-confetti-x: -5.5rem; --result-confetti-rotate: 330deg; --result-confetti-delay: 160ms; }
.result-confetti i:nth-child(5)  { --result-confetti-x: -3.8rem; --result-confetti-rotate: -270deg; --result-confetti-delay: 80ms; }
.result-confetti i:nth-child(6)  { --result-confetti-x: -2rem; --result-confetti-rotate: 220deg; --result-confetti-delay: 190ms; }
.result-confetti i:nth-child(7)  { --result-confetti-x: -0.8rem; --result-confetti-rotate: -300deg; --result-confetti-delay: 35ms; }
.result-confetti i:nth-child(8)  { --result-confetti-x: 1.2rem; --result-confetti-rotate: 260deg; --result-confetti-delay: 135ms; }
.result-confetti i:nth-child(9)  { --result-confetti-x: 2.8rem; --result-confetti-rotate: -240deg; --result-confetti-delay: 70ms; }
.result-confetti i:nth-child(10) { --result-confetti-x: 4.3rem; --result-confetti-rotate: 320deg; --result-confetti-delay: 210ms; }
.result-confetti i:nth-child(11) { --result-confetti-x: 5.8rem; --result-confetti-rotate: -290deg; --result-confetti-delay: 45ms; }
.result-confetti i:nth-child(12) { --result-confetti-x: 7.1rem; --result-confetti-rotate: 240deg; --result-confetti-delay: 145ms; }
.result-confetti i:nth-child(13) { --result-confetti-x: 8.2rem; --result-confetti-rotate: -260deg; --result-confetti-delay: 95ms; }
.result-confetti i:nth-child(14) { --result-confetti-x: 9.1rem; --result-confetti-rotate: 300deg; --result-confetti-delay: 225ms; }
.result-confetti i:nth-child(15) { --result-confetti-x: -6.2rem; --result-confetti-rotate: -220deg; --result-confetti-delay: 245ms; }
.result-confetti i:nth-child(16) { --result-confetti-x: 6.5rem; --result-confetti-rotate: 270deg; --result-confetti-delay: 260ms; }

.result-modal[open] .result-confetti i {
  animation: result-confetti-fall 1.45s var(--result-confetti-delay) cubic-bezier(.12, .68, .24, 1) both;
}

@keyframes result-rays-turn {
  to { transform: rotate(1turn); }
}

@keyframes result-ring-pulse {
  0% { opacity: 0; transform: scale(0.35); }
  48% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.34); }
}

@keyframes result-spark-pop {
  from { opacity: 0.45; transform: scale(0.7) rotate(-9deg); }
  to { opacity: 1; transform: scale(1.14) rotate(8deg); }
}

@keyframes result-medallion-land {
  0% { opacity: 0; transform: translateY(-4.5rem) rotate(-18deg) scale(0.38); }
  62% { opacity: 1; transform: translateY(0.3rem) rotate(5deg) scale(1.14, 0.9); }
  80% { transform: translateY(-0.18rem) rotate(-4deg) scale(0.96, 1.06); }
  100% { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
}

@keyframes result-star-land {
  0% { opacity: 0; transform: translateY(calc(var(--result-star-y) - 1.6rem)) rotate(calc(var(--result-star-rotate) - 45deg)) scale(0.2); }
  66% { opacity: 1; transform: translateY(calc(var(--result-star-y) + 0.1rem)) rotate(calc(var(--result-star-rotate) + 5deg)) scale(1.18); }
  100% { opacity: 1; transform: translateY(var(--result-star-y)) rotate(var(--result-star-rotate)) scale(1); }
}

@keyframes result-prize-land {
  0% { opacity: 0; transform: translateY(1rem) scale(0.88); }
  72% { opacity: 1; transform: translateY(-0.1rem) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-button-shine {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  20% { opacity: 0.85; }
  78%, 100% { opacity: 0; transform: translateX(570%) skewX(-18deg); }
}

@keyframes result-auto-progress {
  from { transform: scaleX(1); transform-origin: left; }
  to { transform: scaleX(0); transform-origin: left; }
}

@keyframes result-confetti-fall {
  0% { opacity: 0; transform: translate(0, -1.2rem) rotate(0) scale(0.3); }
  18% { opacity: 1; }
  78% { opacity: 0.95; transform: translate(var(--result-confetti-x), 14rem) rotate(var(--result-confetti-rotate)) scale(1); }
  100% { opacity: 0; transform: translate(var(--result-confetti-x), 21rem) rotate(var(--result-confetti-rotate)) scale(0.7); }
}

@media (max-height: 46rem) {
  .result-card .result-hero {
    height: 8.6rem;
  }

  .result-level-medallion {
    width: 5.35rem;
  }

  .result-level-medallion strong {
    font-size: 1.65rem;
  }

  .result-heading-copy h2 {
    margin-block-start: 0.4rem;
  }

  .result-card .result-stars {
    margin-block: 0.58rem 0.62rem;
  }

  .result-card .result-stars > span {
    width: 2.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-modal[open] .result-hero-rays,
  .result-modal[open] .result-hero-ring,
  .result-modal[open] .result-hero-spark,
  .result-modal[open] .result-level-medallion,
  .result-modal[open] .result-stars > span,
  .result-modal[open] .result-score-prize,
  .result-modal[open] .result-next-button::before,
  .result-modal[open] .result-next-button::after,
  .result-modal[open] .result-confetti i {
    animation: none !important;
  }

  .result-hero-ring,
  .result-confetti {
    display: none;
  }
}

@media (forced-colors: active) {
  .result-card,
  .result-level-medallion,
  .result-score-prize,
  .result-card .result-stats div,
  .result-next-button {
    border: 0.16rem solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* Fill tall mobile screens and keep the play destinations at the safe-area edge. */
@media (max-width: 41.99rem) {
  html[data-view="play"],
  html[data-view="play"] body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  html[data-view="play"] :is(.app-shell, main, .view-play) {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  html[data-view="play"] .view-play {
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .view-play .play-hud,
  .view-play .game-heading {
    flex: 0 0 auto;
  }

  .view-play .play-mode-panel:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .view-play .play-mode-panel:not([hidden]) > .game-card {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  html[data-play-mode="orbit"] .orbit-card > .orbit-quick-actions,
  html[data-play-mode="classic"] .classic-game-panel > .classic-quick-actions {
    margin-block-start: auto;
    margin-block-end: 0;
  }

  html[data-view="play"][data-play-mode="classic"] .classic-game-panel > .classic-quick-actions {
    position: fixed;
    z-index: 18;
    inset: auto 0 max(0.45rem, env(safe-area-inset-bottom));
    margin: 0 auto;
  }
}

/* World Integrity turns the Vortex timer into part of the planet itself. */
.orbit-integrity-hud {
  --integrity-color: #81f6d3;

  position: relative;
  z-index: 28;
  grid-area: integrity;
  width: 100%;
  min-width: 0;
  inset: auto;
  margin: 0;
  padding: 0.32rem 0.48rem 0.38rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.66);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 20% 0, color-mix(in srgb, var(--integrity-color) 26%, transparent), transparent 56%),
    rgba(2, 14, 27, 0.86);
  color: white;
  box-shadow:
    0 0.18rem 0 rgba(0, 6, 18, 0.55),
    0 0 1rem color-mix(in srgb, var(--integrity-color) 20%, transparent),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.24);
  font-family: var(--mono);
  pointer-events: none;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.orbit-integrity-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.orbit-integrity-copy small {
  overflow: hidden;
  color: color-mix(in srgb, var(--integrity-color) 72%, white);
  font-size: clamp(0.43rem, 1.8vw, 0.56rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orbit-integrity-copy strong {
  color: white;
  font-size: clamp(0.72rem, 3vw, 0.92rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow: 0 0 0.55rem var(--integrity-color);
}

.orbit-integrity-hud progress {
  display: block;
  width: 100%;
  height: 0.28rem;
  margin-block: 0.24rem 0.25rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--integrity-color);
  appearance: none;
}

.orbit-integrity-hud progress::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.14);
}

.orbit-integrity-hud progress::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--integrity-color) 64%, white), var(--integrity-color));
  box-shadow: 0 0 0.55rem var(--integrity-color);
  transition: width 100ms linear;
}

.orbit-integrity-hud progress::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--integrity-color) 64%, white), var(--integrity-color));
  box-shadow: 0 0 0.55rem var(--integrity-color);
}

.orbit-stabilizer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: rgba(224, 245, 255, 0.62);
  font-size: clamp(0.39rem, 1.65vw, 0.5rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
}

.orbit-stabilizer-status i {
  display: grid;
  width: 1rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.58rem;
  font-style: normal;
}

.orbit-stabilizer-status.is-ready {
  color: #fff38a;
  text-shadow: 0 0 0.55rem #ffc84f;
  animation: orbit-stabilizer-ready 780ms ease-in-out infinite alternate;
}

.orbit-stabilizer-status.is-ready i {
  background: linear-gradient(145deg, #fffbd0, #ffd253 60%, #f58a31);
  color: #6b3512;
  box-shadow: 0 0 0.65rem rgba(255, 213, 79, 0.82), inset 0 0.08rem 0 white;
}

.orbit-stabilizer-status.is-spent {
  color: rgba(205, 221, 231, 0.4);
  text-decoration: line-through;
}

.orbit-integrity-hud[data-state="ready"] .orbit-integrity-copy small::after {
  content: " · READY";
}

.orbit-integrity-hud[data-state="paused"] .orbit-integrity-copy small::after {
  content: " · PAUSED";
}

.orbit-integrity-hud:is([data-state="warning"], [data-state="critical"]) {
  --integrity-color: #ffae45;
}

.orbit-integrity-hud[data-state="critical"] {
  --integrity-color: #ff4d69;

  animation: orbit-integrity-hud-critical 470ms ease-in-out infinite alternate;
}

.orbit-integrity-cracks {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.orbit-integrity-cracks path {
  fill: none;
  stroke: #ffcf63;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.18rem #ff533d) drop-shadow(0 0 0.45rem rgba(255, 72, 76, 0.8));
  vector-effect: non-scaling-stroke;
}

.orbit-stage.is-integrity-warning .orbit-integrity-cracks {
  opacity: 0.55;
}

.orbit-stage.is-integrity-critical .orbit-integrity-cracks {
  opacity: 1;
  animation: orbit-cracks-pulse 420ms ease-in-out infinite alternate;
}

.orbit-stage.is-integrity-critical {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 70, 85, 0.25), transparent 48%),
    radial-gradient(circle at 50% 115%, rgba(255, 176, 70, 0.16), transparent 38%);
}

.orbit-stage.is-integrity-critical #orbit-sphere {
  animation: orbit-world-danger 520ms ease-in-out infinite alternate;
}

.orbit-stage.is-stabilizer-firing::after {
  position: absolute;
  z-index: 42;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 251, 182, 0.96), rgba(106, 250, 226, 0.56) 28%, transparent 66%);
  content: "";
  pointer-events: none;
  animation: orbit-stabilizer-flash 900ms cubic-bezier(.16, .8, .28, 1) both;
}

.orbit-world-failure {
  position: absolute;
  z-index: 60;
  display: grid;
  inset: 0;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle, transparent 20%, rgba(2, 6, 20, 0.2) 52%, rgba(2, 6, 20, 0.88));
  opacity: 0;
  pointer-events: none;
}

.orbit-stage.is-world-lost .orbit-world-failure {
  opacity: 1;
  pointer-events: auto;
}

.orbit-world-explosion,
.orbit-explosion-core,
.orbit-explosion-ring,
.orbit-explosion-chunks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-explosion-core {
  width: 5rem;
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, white, #fff17a 24%, #ff6d55 52%, #af3cff 72%, transparent 74%);
  box-shadow: 0 0 2rem #fff, 0 0 5rem #ff6d55, 0 0 8rem #864cff;
  opacity: 0;
  translate: -50% -50%;
}

.orbit-stage.is-world-lost .orbit-explosion-core {
  animation: orbit-explosion-core 1.25s cubic-bezier(.18, .8, .2, 1) 260ms both;
}

.orbit-explosion-ring {
  width: 7rem;
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  border: 0.42rem solid white;
  border-radius: 50%;
  box-shadow: 0 0 1.4rem #75f8ff, inset 0 0 1.4rem #ff79c9;
  opacity: 0;
  translate: -50% -50%;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-one {
  animation: orbit-explosion-ring 950ms cubic-bezier(.12, .7, .25, 1) 420ms both;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-two {
  animation: orbit-explosion-ring 1.1s cubic-bezier(.12, .7, .25, 1) 560ms both;
}

.orbit-explosion-chunks i {
  --chunk-x: 8rem;
  --chunk-y: -5rem;
  --chunk-rotate: 220deg;
  --chunk-color: #56dfe7;

  position: absolute;
  width: clamp(0.75rem, 4vw, 1.35rem);
  aspect-ratio: 1.25;
  inset: 50% auto auto 50%;
  border: 0.12rem solid rgba(255, 255, 255, 0.85);
  border-radius: 38% 55% 42% 48%;
  background: linear-gradient(145deg, white, var(--chunk-color) 28%, #31427e 78%);
  box-shadow: 0 0.18rem 0 rgba(12, 18, 58, 0.72), 0 0 0.8rem var(--chunk-color), inset 0 0.08rem 0 white;
  opacity: 0;
}

.orbit-explosion-chunks i:nth-child(1) { --chunk-x: -10rem; --chunk-y: -7rem; --chunk-rotate: -280deg; --chunk-color: #65f4d3; }
.orbit-explosion-chunks i:nth-child(2) { --chunk-x: -4rem; --chunk-y: -11rem; --chunk-rotate: 330deg; --chunk-color: #ffe465; }
.orbit-explosion-chunks i:nth-child(3) { --chunk-x: 4rem; --chunk-y: -10rem; --chunk-rotate: -310deg; --chunk-color: #ff82d6; }
.orbit-explosion-chunks i:nth-child(4) { --chunk-x: 10rem; --chunk-y: -6rem; --chunk-rotate: 270deg; --chunk-color: #76edff; }
.orbit-explosion-chunks i:nth-child(5) { --chunk-x: 12rem; --chunk-y: 1rem; --chunk-rotate: -240deg; --chunk-color: #a58cff; }
.orbit-explosion-chunks i:nth-child(6) { --chunk-x: 9rem; --chunk-y: 8rem; --chunk-rotate: 300deg; --chunk-color: #cfff63; }
.orbit-explosion-chunks i:nth-child(7) { --chunk-x: 3rem; --chunk-y: 11rem; --chunk-rotate: -330deg; --chunk-color: #ff9f5a; }
.orbit-explosion-chunks i:nth-child(8) { --chunk-x: -4rem; --chunk-y: 10rem; --chunk-rotate: 290deg; --chunk-color: #7cf6ff; }
.orbit-explosion-chunks i:nth-child(9) { --chunk-x: -10rem; --chunk-y: 7rem; --chunk-rotate: -260deg; --chunk-color: #ff78b9; }
.orbit-explosion-chunks i:nth-child(10) { --chunk-x: -12rem; --chunk-y: 1rem; --chunk-rotate: 310deg; --chunk-color: #ffe965; }
.orbit-explosion-chunks i:nth-child(11) { --chunk-x: 7rem; --chunk-y: 4rem; --chunk-rotate: -350deg; --chunk-color: #74f3d7; }
.orbit-explosion-chunks i:nth-child(12) { --chunk-x: -7rem; --chunk-y: -2rem; --chunk-rotate: 340deg; --chunk-color: #b696ff; }

.orbit-stage.is-world-lost .orbit-explosion-chunks i {
  animation: orbit-explosion-chunk 1.45s cubic-bezier(.13, .7, .2, 1) calc(350ms + var(--chunk-delay, 0ms)) both;
}

.orbit-explosion-chunks i:nth-child(3n + 1) { --chunk-delay: 40ms; }
.orbit-explosion-chunks i:nth-child(3n + 2) { --chunk-delay: 100ms; }

.orbit-failure-card {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(18rem, calc(100% - 3rem));
  place-items: center;
  padding: 1.05rem 1rem 1.1rem;
  border: 0.14rem solid rgba(255, 255, 255, 0.9);
  border-radius: 1.65rem;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 237, 120, 0.7), transparent 52%),
    linear-gradient(155deg, #ff6f77, #ae4ed0 62%, #563d9c);
  color: white;
  box-shadow:
    0 0.42rem 0 #48246f,
    0 1.2rem 2.2rem rgba(0, 4, 18, 0.56),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.72);
  opacity: 0;
  text-align: center;
  transform: translateY(1.8rem) scale(0.72) rotate(-3deg);
}

.orbit-stage.is-world-lost .orbit-failure-card {
  animation: orbit-failure-card-in 660ms cubic-bezier(.18, 1.45, .35, 1) 1.2s both;
}

.orbit-failure-card small {
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(64, 24, 92, 0.48);
  color: #fff59d;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.orbit-failure-card > strong {
  margin-block: 0.35rem 0.2rem;
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-shadow: 0 0.16rem 0 #662f7d, 0 0 1.2rem rgba(255, 243, 133, 0.7);
}

.orbit-failure-card > span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 800;
}

.orbit-failure-card button {
  min-height: 3.1rem;
  margin-block-start: 0.72rem;
  padding: 0.62rem 1rem;
  border: 0.12rem solid white;
  border-radius: 1rem;
  background: linear-gradient(145deg, #f4ffb5, #c9ff58 58%, #76cb43);
  color: #20462b;
  box-shadow: 0 0.24rem 0 #4f8f36, 0 0.6rem 1rem rgba(26, 24, 75, 0.34), inset 0 0.1rem 0 white;
  font: 900 0.82rem/1 var(--sans);
  cursor: pointer;
}

.orbit-failure-card button:is(:hover, :focus-visible) {
  filter: brightness(1.08) saturate(1.08);
  translate: 0 -0.08rem;
}

.orbit-failure-card button:active {
  translate: 0 0.12rem;
}

.orbit-failure-card button b {
  margin-inline-start: 0.35rem;
  font-size: 1.1rem;
}

.orbit-stage.is-world-lost #orbit-sphere {
  animation: orbit-world-rupture 1.3s cubic-bezier(.28, .7, .24, 1) both;
}

.orbit-stage.is-world-lost :is(.orbit-hit-layer, .orbit-integrity-cracks, .orbit-drag-label) {
  opacity: 0;
  pointer-events: none;
}

@keyframes orbit-stabilizer-ready {
  to { filter: brightness(1.22); scale: 1.025; }
}

@keyframes orbit-integrity-hud-critical {
  to { border-color: #ffb2bd; box-shadow: 0 0.18rem 0 #54152d, 0 0 1.4rem rgba(255, 54, 91, 0.72), inset 0 0.08rem 0 white; }
}

@keyframes orbit-cracks-pulse {
  to { filter: brightness(1.55); opacity: 0.68; }
}

@keyframes orbit-world-danger {
  to { filter: saturate(1.2) brightness(1.12) drop-shadow(0 0 0.7rem rgba(255, 74, 77, 0.65)); transform: scale(1.012); }
}

@keyframes orbit-stabilizer-flash {
  0% { opacity: 0; transform: scale(0.25); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes orbit-world-rupture {
  0% { filter: brightness(1); opacity: 1; transform: scale(1); }
  18% { filter: brightness(1.5) saturate(1.35); transform: scale(1.045, 0.93) rotate(-1deg); }
  34% { filter: brightness(3.4) saturate(0.4); transform: scale(0.88, 1.1) rotate(1.5deg); }
  46% { filter: brightness(6); opacity: 1; transform: scale(1.16); }
  100% { filter: brightness(8) blur(0.2rem); opacity: 0; transform: scale(2.15) rotate(7deg); }
}

@keyframes orbit-explosion-core {
  0% { opacity: 0; transform: scale(0.12); }
  22% { opacity: 1; }
  72% { opacity: 0.98; }
  100% { opacity: 0; transform: scale(5.4); }
}

@keyframes orbit-explosion-ring {
  0% { opacity: 0; transform: scale(0.2); }
  22% { opacity: 1; }
  100% { border-width: 0.06rem; opacity: 0; transform: scale(4.6); }
}

@keyframes orbit-explosion-chunk {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--chunk-x)), calc(-50% + var(--chunk-y))) scale(1.18) rotate(var(--chunk-rotate)); }
}

@keyframes orbit-failure-card-in {
  0% { opacity: 0; transform: translateY(1.8rem) scale(0.72) rotate(-3deg); }
  72% { opacity: 1; transform: translateY(-0.18rem) scale(1.045) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* The physical play surface, not its surrounding HUD, owns the screen center. */
@media (max-width: 41.99rem) {
  html[data-view="play"][data-play-mode="orbit"] .orbit-stage,
  html[data-view="play"][data-play-mode="classic"] .classic-game-panel .board-wrap {
    position: fixed;
    z-index: 4;
    width: 100%;
    inset: 50dvh 0 auto;
    margin: 0 auto;
    translate: 0 -50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-stage.is-junk-direction-cue .orbit-junk-direction-cue {
    animation: none;
    opacity: 0.3;
    scale: 1;
  }

  .orbit-stabilizer-status.is-ready,
  .orbit-integrity-hud[data-state="critical"],
  .orbit-stage.is-integrity-critical .orbit-integrity-cracks,
  .orbit-stage.is-integrity-critical #orbit-sphere {
    animation: none;
  }

  .orbit-stage.is-world-lost #orbit-sphere {
    animation: orbit-world-rupture-reduced 220ms ease-out both;
  }

  .orbit-stage.is-world-lost .orbit-explosion-core,
  .orbit-stage.is-world-lost .orbit-explosion-ring,
  .orbit-stage.is-world-lost .orbit-explosion-chunks i {
    animation: none;
    opacity: 0;
  }

  .orbit-stage.is-world-lost .orbit-failure-card {
    animation: orbit-failure-card-in 180ms ease-out 180ms both;
  }
}

@keyframes orbit-world-rupture-reduced {
  to { filter: brightness(2); opacity: 0.12; }
}

@media (forced-colors: active) {
  .orbit-stage.is-junk-direction-cue .orbit-junk-direction-cue {
    border-color: Highlight;
    outline: 0.14rem solid Highlight;
    outline-offset: 0.12rem;
  }

  .orbit-integrity-hud,
  .orbit-failure-card,
  .orbit-failure-card button {
    border: 0.14rem solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Juicy destination dock shared by Classic and Vortex. */
html[data-view="play"] .classic-quick-actions,
html[data-view="play"] .orbit-card > .orbit-quick-actions {
  --dock-spring: cubic-bezier(0.18, 1.35, 0.3, 1);

  position: relative;
  isolation: isolate;
  width: min(calc(100% - 0.75rem), 22rem);
  min-height: 4.55rem;
  gap: 0.42rem;
  margin-block-end: max(0.45rem, env(safe-area-inset-bottom));
  padding: 0.42rem 0.45rem 0.5rem;
  overflow: visible;
  border: 0.16rem solid rgba(255, 255, 255, 0.96);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 50% -40%, rgba(255, 255, 255, 0.95), transparent 58%),
    linear-gradient(165deg, #eefeff 0%, #cce9f0 68%, #9bc5d3 100%);
  box-shadow:
    0 0.34rem 0 #527f94,
    0 0.78rem 1.3rem rgba(0, 10, 35, 0.38),
    inset 0 0.11rem 0 white,
    inset 0 -0.14rem 0 rgba(64, 107, 131, 0.18);
  animation: destination-dock-in 520ms var(--dock-spring) both;
}

html[data-view="play"] .classic-quick-actions::before,
html[data-view="play"] .orbit-card > .orbit-quick-actions::before {
  position: absolute;
  z-index: -1;
  height: 48%;
  inset: 0.12rem 0.36rem auto;
  border-radius: 1.16rem 1.16rem 60% 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.04));
  content: "";
  pointer-events: none;
}

html[data-view="play"] .classic-quick-actions::after,
html[data-view="play"] .orbit-card > .orbit-quick-actions::after {
  position: absolute;
  z-index: 5;
  width: 0.74rem;
  aspect-ratio: 1;
  inset: -0.46rem 0.65rem auto auto;
  background: #fff88c;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  content: "";
  filter: drop-shadow(0 0 0.38rem white);
  pointer-events: none;
  rotate: 12deg;
  animation: destination-spark 1.6s ease-in-out infinite alternate;
}

html[data-view="play"] .classic-quick-actions button,
html[data-view="play"] .orbit-card > .orbit-quick-actions button {
  --destination-light: #b9f8ff;
  --destination-main: #50c8ef;
  --destination-deep: #2672bd;
  --destination-ink: #153d64;

  position: relative;
  isolation: isolate;
  display: flex;
  min-inline-size: 0;
  min-block-size: 3.55rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  padding: 0.3rem 0.24rem 0.35rem;
  overflow: visible;
  border: 0.13rem solid white;
  border-radius: 1.08rem;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.9), transparent 0.35rem),
    linear-gradient(155deg, var(--destination-light), var(--destination-main) 58%, var(--destination-deep));
  color: var(--destination-ink);
  box-shadow:
    0 0.28rem 0 var(--destination-deep),
    0 0.46rem 0.72rem rgba(28, 57, 99, 0.24),
    inset 0 0.09rem 0 rgba(255, 255, 255, 0.92),
    inset 0 -0.12rem 0 rgba(25, 61, 109, 0.14);
  cursor: pointer;
  transition:
    translate 220ms var(--dock-spring),
    scale 220ms var(--dock-spring),
    filter 180ms ease,
    box-shadow 180ms ease;
}

html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2) {
  --destination-light: #fff5a8;
  --destination-main: #d9ff55;
  --destination-deep: #6ebc3f;
  --destination-ink: #31542f;

  min-block-size: 4rem;
  translate: 0 -0.32rem;
  box-shadow:
    0 0.31rem 0 var(--destination-deep),
    0 0.55rem 0.9rem rgba(74, 104, 36, 0.3),
    0 0 0 0.13rem rgba(221, 255, 88, 0.25),
    inset 0 0.09rem 0 white;
}

html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(3) {
  --destination-light: #f0ceff;
  --destination-main: #ac82f4;
  --destination-deep: #6448c6;
  --destination-ink: #342365;
}

html[data-view="play"] .classic-quick-actions button::before,
html[data-view="play"] .orbit-card > .orbit-quick-actions button::before {
  position: absolute;
  z-index: -1;
  height: 42%;
  inset: 0.08rem 0.22rem auto;
  border-radius: 0.82rem 0.82rem 55% 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0));
  content: "";
  pointer-events: none;
}

html[data-view="play"] .classic-quick-actions button::after,
html[data-view="play"] .orbit-card > .orbit-quick-actions button::after {
  position: absolute;
  width: 0.3rem;
  aspect-ratio: 1;
  inset: 0.28rem 0.34rem auto auto;
  background: rgba(255, 255, 255, 0.92);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  content: "";
  pointer-events: none;
  text-shadow: 0 0 0.32rem white;
}

html[data-view="play"] .classic-quick-actions button > span,
html[data-view="play"] .orbit-card > .orbit-quick-actions button > span {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 0.1rem solid rgba(255, 255, 255, 0.92);
  border-radius: 0.68rem;
  background:
    radial-gradient(circle at 28% 20%, white 0 0.12rem, transparent 0.16rem),
    linear-gradient(145deg, color-mix(in srgb, var(--destination-light) 70%, white), var(--destination-main));
  color: var(--destination-ink);
  box-shadow:
    0 0.17rem 0 color-mix(in srgb, var(--destination-deep) 82%, #233958),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.95);
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0.05rem 0 rgba(255, 255, 255, 0.64);
  rotate: -3deg;
}

html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2) > span {
  width: 2.18rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, white 0 0.13rem, transparent 0.17rem),
    conic-gradient(from -25deg, #fff087, #e5ff62, #78e59d, #65d8ee, #fff087);
  color: #315630;
  animation: destination-reward-icon 2.1s ease-in-out infinite alternate;
}

html[data-view="play"] .classic-quick-actions button small,
html[data-view="play"] .orbit-card > .orbit-quick-actions button small {
  color: inherit;
  font-family: var(--sans);
  font-size: clamp(0.58rem, 2.5vw, 0.68rem);
  font-weight: 950;
  letter-spacing: -0.015em;
  line-height: 1;
  text-shadow: 0 0.05rem 0 rgba(255, 255, 255, 0.7);
}

html[data-view="play"] .classic-quick-actions time,
html[data-view="play"] .orbit-card > .orbit-quick-actions time {
  inset: -0.4rem -0.28rem auto auto;
  min-width: 2.45rem;
  padding: 0.2rem 0.3rem;
  border: 0.1rem solid white;
  background: linear-gradient(145deg, #ff7c74, #ee3c68 62%, #a92761);
  color: white;
  box-shadow: 0 0.17rem 0 #8c274d, 0 0.34rem 0.55rem rgba(74, 25, 63, 0.3), inset 0 0.07rem 0 rgba(255, 255, 255, 0.75);
  font-size: clamp(0.46rem, 2vw, 0.56rem);
  font-weight: 950;
  line-height: 1;
  animation: destination-clock-pulse 1.8s ease-in-out infinite alternate;
}

html[data-view="play"] .classic-quick-actions button:is(:hover, :focus-visible),
html[data-view="play"] .orbit-card > .orbit-quick-actions button:is(:hover, :focus-visible) {
  filter: brightness(1.08) saturate(1.08);
  outline: 0.16rem solid rgba(255, 255, 255, 0.9);
  outline-offset: 0.12rem;
  scale: 1.035;
  translate: 0 -0.16rem;
}

html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2):is(:hover, :focus-visible) {
  translate: 0 -0.48rem;
}

html[data-view="play"] .classic-quick-actions button:active,
html[data-view="play"] .orbit-card > .orbit-quick-actions button:active {
  filter: brightness(0.98);
  scale: 0.96;
  translate: 0 0.08rem;
  box-shadow: 0 0.09rem 0 var(--destination-deep), inset 0 0.08rem 0 rgba(255, 255, 255, 0.8);
}

html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2):active {
  translate: 0 -0.12rem;
}

/* Games and Rewards repeat the dock's candy-color language. */
.games-modal {
  --modal-accent: #64e7f0;
  --modal-accent-soft: #dffcff;
  --modal-deep: #2457a0;
}

.games-modal::backdrop,
.flow-hub-modal::backdrop {
  background:
    radial-gradient(circle at 16% 18%, rgba(104, 240, 247, 0.34), transparent 15rem),
    radial-gradient(circle at 87% 72%, rgba(200, 103, 255, 0.3), transparent 18rem),
    radial-gradient(circle at 50% 48%, rgba(225, 255, 96, 0.18), transparent 22rem),
    rgba(4, 12, 38, 0.78);
  backdrop-filter: blur(12px) saturate(1.25);
}

.games-card,
.flow-hub-card {
  border-width: 0.23rem;
  background:
    radial-gradient(circle at 7% 2%, rgba(103, 234, 246, 0.35), transparent 10rem),
    radial-gradient(circle at 96% 36%, rgba(194, 112, 255, 0.24), transparent 13rem),
    radial-gradient(circle at 50% 104%, rgba(221, 255, 91, 0.3), transparent 12rem),
    linear-gradient(155deg, #fffdf4, #edfaff 52%, #f4efff);
  box-shadow:
    0 0 0 0.28rem color-mix(in srgb, var(--modal-accent) 70%, var(--modal-deep)),
    0 0.82rem 0 -0.32rem color-mix(in srgb, var(--modal-deep) 84%, black),
    0 2.4rem 5rem rgba(0, 2, 25, 0.5),
    inset 0 0.13rem 0 white;
}

.games-card .modal-close,
.flow-hub-card .modal-close {
  border-color: white;
  background:
    radial-gradient(circle at 32% 23%, white 0 0.12rem, transparent 0.16rem),
    linear-gradient(145deg, #ff9a73, #ff5373 58%, #a62f69);
  box-shadow: 0 0.3rem 0 #8d315e, 0 0.58rem 0.9rem rgba(74, 24, 76, 0.28), inset 0 0.1rem 0 rgba(255, 255, 255, 0.8);
}

.games-hero,
.cleanup-control-hero {
  border-width: 0.18rem;
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0.4rem 0 #35499c,
    0 0.92rem 1.55rem rgba(28, 35, 101, 0.32),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.62),
    inset 0 -0.3rem 0 rgba(25, 24, 96, 0.2);
}

.games-hero {
  background:
    radial-gradient(circle at 22% 20%, rgba(213, 255, 102, 0.78), transparent 22%),
    radial-gradient(circle at 84% 28%, rgba(255, 119, 214, 0.72), transparent 25%),
    radial-gradient(circle at 50% 48%, rgba(120, 245, 255, 0.48), transparent 36%),
    linear-gradient(145deg, #277dde, #584dc7 60%, #a345bc);
}

.cleanup-control-hero {
  background:
    radial-gradient(circle at 50% 51%, rgba(222, 255, 91, 0.48), transparent 20%),
    radial-gradient(circle at 15% 18%, rgba(112, 246, 249, 0.48), transparent 30%),
    radial-gradient(circle at 88% 26%, rgba(255, 112, 211, 0.36), transparent 28%),
    linear-gradient(145deg, #126ca0, #413ba6 58%, #843c98);
}

.games-hero-chip,
.cleanup-hero-chip {
  border-width: 0.13rem;
  background: linear-gradient(145deg, #fff9ad, #dbff5e 58%, #89d347);
  box-shadow: 0 0.27rem 0 #588f3a, 0 0.62rem 0.9rem rgba(24, 31, 87, 0.3), inset 0 0.1rem 0 white;
  color: #25492e;
}

.games-card > .eyebrow,
.flow-hub-card > .eyebrow {
  border: 0.09rem solid white;
  background: linear-gradient(145deg, #fff4a0, #d9ff61);
  color: #3d5d35;
  box-shadow: 0 0.17rem 0 #75a746, inset 0 0.07rem 0 white;
  font-weight: 950;
}

.games-card h2,
.flow-hub-card h2 {
  color: #263f78;
  font-weight: 950;
  text-shadow: 0 0.1rem 0 white, 0 0.22rem 0.4rem rgba(89, 70, 161, 0.18);
}

.games-card > .modal-copy,
.flow-hub-card > .modal-copy {
  color: #526985;
  font-weight: 750;
}

.game-choice {
  --choice-light: #88f4f3;
  --choice-main: #3c9de1;
  --choice-deep: #2453a0;

  border-width: 0.17rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.5), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(221, 255, 95, 0.48), transparent 32%),
    linear-gradient(145deg, var(--choice-light), var(--choice-main) 48%, var(--choice-deep));
  box-shadow:
    0 0.42rem 0 var(--choice-deep),
    0 0.9rem 1.45rem rgba(34, 65, 127, 0.26),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.86);
  transition:
    translate 220ms cubic-bezier(0.18, 1.35, 0.3, 1),
    scale 220ms cubic-bezier(0.18, 1.35, 0.3, 1),
    filter 180ms ease,
    box-shadow 180ms ease;
}

.game-choice:last-child {
  --choice-light: #e5b1ff;
  --choice-main: #9b6ee4;
  --choice-deep: #543baf;

  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.48), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(255, 220, 104, 0.42), transparent 32%),
    linear-gradient(145deg, var(--choice-light), var(--choice-main) 48%, var(--choice-deep));
  box-shadow:
    0 0.42rem 0 var(--choice-deep),
    0 0.9rem 1.45rem rgba(63, 42, 133, 0.26),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.84);
}

.game-choice::before {
  position: absolute;
  height: 42%;
  inset: 0.12rem 0.35rem auto;
  border-radius: 1rem 1rem 50% 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent);
  content: "";
  pointer-events: none;
}

.game-choice:is(:hover, :focus-visible) {
  border-color: white;
  filter: brightness(1.07) saturate(1.08);
  outline: 0.18rem solid #ddff62;
  outline-offset: 0.13rem;
  scale: 1.018;
  translate: 0 -0.13rem;
  transform: none;
}

.game-choice:active {
  filter: brightness(0.98);
  scale: 0.97;
  translate: 0 0.13rem;
}

.game-choice.is-active {
  border-color: #f3ffb5;
  box-shadow:
    0 0.42rem 0 var(--choice-deep),
    0 0 0 0.2rem rgba(222, 255, 95, 0.38),
    0 0.9rem 1.45rem rgba(45, 58, 132, 0.3),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.9);
}

.game-choice-current {
  border: 0.08rem solid white;
  background: linear-gradient(145deg, #fff7a0, #d9ff62);
  color: #315237;
  box-shadow: 0 0.16rem 0 #6da044, inset 0 0.06rem 0 white;
}

.game-choice-art {
  border-width: 0.16rem;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.28rem 0 rgba(28, 45, 111, 0.48), inset 0 0.1rem 0 white;
}

.game-choice-copy small {
  color: #f3ff9f;
  font-weight: 950;
  text-shadow: 0 0.08rem 0 rgba(35, 55, 100, 0.48);
}

.game-choice-copy strong {
  font-weight: 950;
  text-shadow: 0 0.1rem 0 rgba(36, 52, 111, 0.45);
}

.game-choice-copy > span {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 750;
}

.game-choice-action {
  padding: 0.22rem 0.42rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: rgba(30, 43, 105, 0.38);
  color: #f3ff9f;
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.2);
}

.flow-hub-grid .flow-event-card,
.flow-hub-grid .flow-meta-card {
  border-width: 0.13rem;
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0.31rem 0 color-mix(in srgb, var(--event-color, #7f9fe8) 42%, #526383),
    0 0.72rem 1.1rem rgba(46, 59, 117, 0.18),
    inset 0 0.09rem 0 white;
}

.flow-hub-grid .flow-event-card {
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--event-color, #dfff61) 50%, transparent), transparent 42%),
    linear-gradient(145deg, #fffdf0, #e7fbff);
  color: #29445f;
}

.flow-hub-grid .flow-event-copy .flow-card-label,
.flow-hub-grid .flow-event-copy small,
.flow-hub-grid .flow-event-clock small {
  color: #5a6d79;
}

.flow-hub-grid .flow-event-copy strong,
.flow-hub-grid .flow-event-clock time {
  color: #2d4777;
  text-shadow: 0 0.06rem 0 white;
}

.flow-hub-grid .flow-rank-card {
  background: linear-gradient(145deg, #e6fbff, #bcecf1);
}

.flow-hub-grid .flow-daily-card {
  background: linear-gradient(145deg, #fff5bd, #e3ff93);
}

.flow-hub-return {
  min-height: 3.35rem;
  border: 0.13rem solid white;
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 20% 15%, white 0 0.14rem, transparent 0.18rem),
    linear-gradient(145deg, #f9ffb7, #d4ff55 56%, #78ca42);
  color: #284d31;
  box-shadow: 0 0.28rem 0 #55963a, 0 0.58rem 0.9rem rgba(57, 82, 62, 0.2), inset 0 0.1rem 0 white;
  font-weight: 950;
}

.games-modal[open] .games-hero,
.flow-hub-modal[open] .cleanup-control-hero {
  animation: destination-hero-pop 560ms cubic-bezier(0.18, 1.35, 0.3, 1) both;
}

.games-modal[open] .game-choice,
.flow-hub-modal[open] .flow-hub-grid > * {
  animation: destination-card-rise 520ms cubic-bezier(0.18, 1.35, 0.3, 1) both;
}

.games-modal[open] .game-choice:nth-child(2),
.flow-hub-modal[open] .flow-hub-grid > :nth-child(2) {
  animation-delay: 70ms;
}

.flow-hub-modal[open] .flow-hub-grid > :nth-child(3) {
  animation-delay: 120ms;
}

/* The Map destination reads like the expanded violet dock card. */
html[data-view="journey"] .view-journey {
  position: relative;
  isolation: isolate;
  /* The generic view entrance leaves a transform on the view, which prevents
     descendants from sticking to the physical viewport while scrolling. */
  animation: none;
}

/* `overflow-x: hidden` creates a non-scrolling overflow ancestor on some
   mobile engines and defeats sticky descendants. Clip without creating that
   scroll container while the long Map view is active. */
html[data-view="journey"],
html[data-view="journey"] body {
  overflow-x: clip;
}

html[data-view="journey"] body {
  overflow-y: visible;
}

html[data-view="journey"] .journey-back-game {
  position: sticky;
  z-index: 24;
  top: max(0.5rem, env(safe-area-inset-top));
  display: grid;
  width: 100%;
  min-height: 4.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.68rem;
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.62rem;
  border: 0.18rem solid white;
  border-radius: 1.32rem;
  background:
    radial-gradient(circle at 18% 6%, rgba(255, 255, 255, 0.76), transparent 25%),
    linear-gradient(145deg, #dfffff, #8deeee 48%, #d8ff5c 100%);
  color: #173f4e;
  box-shadow:
    0 0.34rem 0 #3d9692,
    0 0.75rem 1.25rem rgba(7, 39, 83, 0.3),
    inset 0 0.1rem 0 white;
  text-align: left;
  cursor: pointer;
  animation: destination-card-rise 520ms cubic-bezier(0.18, 1.35, 0.3, 1) both;
  transition: filter 150ms ease, transform 150ms cubic-bezier(0.18, 1.35, 0.3, 1);
}

html[data-view="journey"] .journey-back-game::after {
  position: absolute;
  width: 0.48rem;
  aspect-ratio: 1;
  inset: 0.4rem 0.5rem auto auto;
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  background: white;
  filter: drop-shadow(0 0 0.35rem #fff48e);
  content: "";
}

html[data-view="journey"] .journey-back-game:is(:hover, :focus-visible) {
  filter: brightness(1.06) saturate(1.08);
  transform: translateY(-0.1rem) scale(1.012);
}

html[data-view="journey"] .journey-back-game:focus-visible {
  outline: 0.18rem solid #fff36b;
  outline-offset: 0.2rem;
}

html[data-view="journey"] .journey-back-game:active {
  box-shadow: 0 0.13rem 0 #3d9692, 0 0.35rem 0.65rem rgba(7, 39, 83, 0.24), inset 0 0.1rem 0 white;
  transform: translateY(0.18rem) scale(0.985);
}

.journey-back-icon {
  display: grid;
  width: 2.75rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0.13rem solid white;
  border-radius: 0.9rem;
  background: linear-gradient(145deg, #79dfff, #5579e8 62%, #6745bb);
  color: white;
  box-shadow: 0 0.22rem 0 #36549e, 0 0.45rem 0.65rem rgba(42, 69, 136, 0.25), inset 0 0.1rem 0 rgba(255, 255, 255, 0.76);
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  transition: transform 150ms cubic-bezier(0.18, 1.35, 0.3, 1);
}

.journey-back-game:is(:hover, :focus-visible) .journey-back-icon {
  transform: translateX(-0.12rem) rotate(-5deg) scale(1.05);
}

.journey-back-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.journey-back-copy small {
  color: #366a72;
  font-family: var(--mono);
  font-size: clamp(0.48rem, 2.2vw, 0.56rem);
  font-weight: 950;
  letter-spacing: 0.11em;
  line-height: 1;
}

.journey-back-copy strong {
  margin-block-start: 0.18rem;
  overflow: hidden;
  color: #173f4e;
  font-size: clamp(0.88rem, 4vw, 1.05rem);
  font-weight: 950;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-back-resume {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.16rem;
}

.journey-back-resume[hidden] {
  display: none;
}

.journey-back-resume > span {
  color: #36606d;
  font-family: var(--mono);
  font-size: clamp(0.45rem, 2vw, 0.52rem);
  font-weight: 800;
  white-space: nowrap;
}

.journey-back-resume b {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding-inline: 0.55rem;
  border: 0.1rem solid white;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff6a3, #d7ff55);
  color: #345126;
  box-shadow: 0 0.15rem 0 #6c9c3c, inset 0 0.07rem 0 white;
  font-family: var(--mono);
  font-size: 0.53rem;
  font-weight: 950;
  letter-spacing: 0.05em;
}

html[data-view="journey"] .journey-page-heading {
  position: relative;
  isolation: isolate;
  min-height: 7.6rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  overflow: hidden;
  border: 0.19rem solid white;
  border-radius: 1.65rem;
  background:
    radial-gradient(circle at 10% 5%, rgba(216, 255, 100, 0.58), transparent 29%),
    radial-gradient(circle at 88% 15%, rgba(255, 145, 225, 0.48), transparent 31%),
    linear-gradient(145deg, #4c9ae9, #7353d4 58%, #a34abe);
  color: white;
  box-shadow:
    0 0.42rem 0 #4c3c9b,
    0 1rem 1.8rem rgba(45, 47, 123, 0.26),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.78);
  animation: destination-hero-pop 560ms cubic-bezier(0.18, 1.35, 0.3, 1) both;
}

html[data-view="journey"] .journey-page-heading::before {
  position: absolute;
  z-index: -1;
  height: 45%;
  inset: 0.12rem 0.4rem auto;
  border-radius: 1.2rem 1.2rem 58% 44%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
  content: "";
}

html[data-view="journey"] .journey-page-heading::after {
  position: absolute;
  z-index: -1;
  width: 8rem;
  aspect-ratio: 1;
  inset: -3.5rem 22% auto auto;
  border: 0.7rem solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  content: "";
}

html[data-view="journey"] .journey-page-heading .page-kicker-chip {
  width: fit-content;
  border: 0.09rem solid white;
  background: linear-gradient(145deg, #fff5a2, #d8ff5e);
  color: #31523d;
  box-shadow: 0 0.17rem 0 #638f43, inset 0 0.07rem 0 white;
}

html[data-view="journey"] .journey-page-heading h1 {
  color: white;
  font-weight: 950;
  text-shadow: 0 0.13rem 0 #453e99, 0 0.38rem 0.7rem rgba(40, 38, 114, 0.36);
}

html[data-view="journey"] .journey-page-heading .collection-page-subtitle {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 750;
}

html[data-view="journey"] .journey-page-heading .completion-ring {
  border: 0.18rem solid white;
  background:
    radial-gradient(circle at 32% 24%, white 0 0.18rem, transparent 0.22rem),
    linear-gradient(145deg, #fff6a1, #d9ff59 58%, #70c64a);
  color: #345331;
  box-shadow: 0 0.3rem 0 #518f40, 0 0.68rem 1rem rgba(40, 45, 103, 0.3), inset 0 0.11rem 0 white;
}

html[data-view="journey"] .journey-hero {
  border-width: 0.19rem;
  border-color: white;
  box-shadow:
    0 0.4rem 0 color-mix(in srgb, hsl(var(--chapter-hue) 68% 42%) 78%, #3c3e91),
    0 0.95rem 1.55rem rgba(54, 54, 128, 0.24),
    inset 0 0.12rem 0 rgba(255, 255, 255, 0.84);
}

html[data-view="journey"] .journey-summary {
  gap: 0.58rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-view="journey"] .journey-summary > div {
  overflow: hidden;
  border: 0.13rem solid white;
  border-radius: 1.08rem;
  background: linear-gradient(145deg, #bff7ff, #62caed);
  box-shadow: 0 0.27rem 0 #3980ad, 0 0.58rem 0.9rem rgba(47, 69, 117, 0.18), inset 0 0.08rem 0 white;
}

html[data-view="journey"] .journey-summary > div:nth-child(2) {
  background: linear-gradient(145deg, #fff5a9, #d9ff62);
  box-shadow: 0 0.27rem 0 #76a944, 0 0.58rem 0.9rem rgba(62, 82, 61, 0.18), inset 0 0.08rem 0 white;
}

html[data-view="journey"] .journey-summary > div:nth-child(3) {
  background: linear-gradient(145deg, #efcaff, #ad82ee);
  box-shadow: 0 0.27rem 0 #7054b5, 0 0.58rem 0.9rem rgba(67, 50, 123, 0.18), inset 0 0.08rem 0 white;
}

html[data-view="journey"] .journey-summary :is(span, strong) {
  color: #283f61;
}

html[data-view="journey"] .collection-section-heading {
  padding: 0.55rem 0.68rem;
  border: 0.12rem solid white;
  border-radius: 1.15rem;
  background: linear-gradient(145deg, #fffdf3, #e5f8ff);
  box-shadow: 0 0.25rem 0 #a8bdc9, 0 0.5rem 0.9rem rgba(55, 75, 108, 0.14), inset 0 0.08rem 0 white;
  color: #29465e;
}

html[data-view="journey"] .collection-section-heading :is(small, h2) {
  color: #29465e;
  text-shadow: none;
}

html[data-view="journey"] .chapter-block {
  border-width: 0.14rem;
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0.3rem 0 color-mix(in srgb, hsl(var(--chapter-hue) 55% 46%) 45%, #9daeb6),
    0 0.68rem 1.15rem rgba(51, 73, 100, 0.15),
    inset 0 0.09rem 0 white;
}

@supports (animation-timing-function: linear(0, 1)) {
  html[data-view="play"] .classic-quick-actions,
  html[data-view="play"] .orbit-card > .orbit-quick-actions {
    --dock-spring: linear(0, 0.48 5%, 0.85 10%, 1.12 18%, 1.2 25%, 1.14 33%, 1.03 47%, 0.98 61%, 1.01 78%, 1);
  }
}

@keyframes destination-dock-in {
  from { opacity: 0; transform: translateY(1rem) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes destination-spark {
  from { opacity: 0.38; transform: scale(0.62) rotate(-12deg); }
  to { opacity: 1; transform: scale(1.18) rotate(10deg); }
}

@keyframes destination-reward-icon {
  from { filter: brightness(1); transform: rotate(-4deg) scale(0.96); }
  to { filter: brightness(1.13); transform: rotate(4deg) scale(1.06); }
}

@keyframes destination-clock-pulse {
  to { filter: brightness(1.12); transform: scale(1.055); }
}

@keyframes destination-hero-pop {
  from { opacity: 0; transform: translateY(-0.7rem) scale(0.92) rotate(-1.5deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes destination-card-rise {
  from { opacity: 0; transform: translateY(0.7rem) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Readable destination UI: retain playful accents without candy-color noise. */
html[data-view="play"] .classic-quick-actions,
html[data-view="play"] .orbit-card > .orbit-quick-actions {
  min-height: 4.15rem;
  gap: 0.38rem;
  padding: 0.4rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.82);
  border-radius: 1.25rem;
  background: rgba(235, 244, 249, 0.96);
  box-shadow:
    0 0.22rem 0 #617d8d,
    0 0.62rem 1.1rem rgba(0, 10, 35, 0.26),
    inset 0 1px 0 white;
  animation-duration: 340ms;
}

html[data-view="play"] .classic-quick-actions::before,
html[data-view="play"] .orbit-card > .orbit-quick-actions::before,
html[data-view="play"] .classic-quick-actions::after,
html[data-view="play"] .orbit-card > .orbit-quick-actions::after {
  display: none;
}

html[data-view="play"] .classic-quick-actions button,
html[data-view="play"] .orbit-card > .orbit-quick-actions button {
  --destination-surface: #f8fbfd;
  --destination-border: #a5c3d0;
  --destination-icon: #d8f1f4;
  --destination-ink: #173d53;

  min-block-size: 3.35rem;
  gap: 0.12rem;
  padding: 0.28rem 0.22rem 0.32rem;
  border: 0.08rem solid var(--destination-border);
  border-radius: 0.9rem;
  background: var(--destination-surface);
  color: var(--destination-ink);
  box-shadow:
    0 0.12rem 0 color-mix(in srgb, var(--destination-border) 72%, #506779),
    0 0.2rem 0.42rem rgba(25, 49, 68, 0.1),
    inset 0 1px 0 white;
  transition: translate 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2) {
  --destination-surface: #fbfcef;
  --destination-border: #afbd72;
  --destination-icon: #e8efbd;
  --destination-ink: #33461f;

  min-block-size: 3.35rem;
  translate: none;
  box-shadow:
    0 0.12rem 0 #84944f,
    0 0.2rem 0.42rem rgba(55, 72, 28, 0.1),
    inset 0 1px 0 white;
}

html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(3) {
  --destination-surface: #faf9fd;
  --destination-border: #b5abd4;
  --destination-icon: #e5e0f3;
  --destination-ink: #3e3565;
}

html[data-view="play"] .classic-quick-actions button::before,
html[data-view="play"] .orbit-card > .orbit-quick-actions button::before,
html[data-view="play"] .classic-quick-actions button::after,
html[data-view="play"] .orbit-card > .orbit-quick-actions button::after {
  display: none;
}

html[data-view="play"] .classic-quick-actions button > span,
html[data-view="play"] .orbit-card > .orbit-quick-actions button > span,
html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2) > span {
  width: 2.25rem;
  border: 0;
  border-radius: 0.58rem;
  background: var(--destination-icon);
  color: var(--destination-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destination-border) 70%, transparent);
  font-size: 0.84rem;
  text-shadow: none;
  rotate: none;
  animation: none;
}

html[data-view="play"] .classic-quick-actions button > span svg,
html[data-view="play"] .orbit-card > .orbit-quick-actions button > span svg {
  width: 1.45rem;
  height: 1.45rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html[data-view="play"] .classic-quick-actions button > span svg circle,
html[data-view="play"] .orbit-card > .orbit-quick-actions button > span svg circle {
  fill: currentColor;
}

html[data-view="play"] .classic-quick-actions button small,
html[data-view="play"] .orbit-card > .orbit-quick-actions button small {
  color: inherit;
  font-size: clamp(0.66rem, 2.7vw, 0.73rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
  text-shadow: none;
}

html[data-view="play"] .classic-quick-actions time,
html[data-view="play"] .orbit-card > .orbit-quick-actions time {
  inset: -0.32rem -0.18rem auto auto;
  min-width: 2.3rem;
  padding: 0.18rem 0.28rem;
  border: 0.08rem solid #fff;
  background: #a63c54;
  box-shadow: 0 0.12rem 0 #69283b;
  font-size: clamp(0.48rem, 2vw, 0.55rem);
  animation: none;
}

html[data-view="play"] .classic-quick-actions button:is(:hover, :focus-visible),
html[data-view="play"] .orbit-card > .orbit-quick-actions button:is(:hover, :focus-visible),
html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2):is(:hover, :focus-visible) {
  background: #fff;
  filter: none;
  outline: 0.18rem solid #153f58;
  outline-offset: 0.1rem;
  scale: none;
  translate: 0 -0.08rem;
}

html[data-view="play"] .classic-quick-actions button:active,
html[data-view="play"] .orbit-card > .orbit-quick-actions button:active,
html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2):active {
  filter: none;
  scale: 0.98;
  translate: 0 0.06rem;
  box-shadow: inset 0 0.1rem 0.2rem rgba(25, 49, 68, 0.08);
}

.games-modal::backdrop,
.flow-hub-modal::backdrop {
  background: rgba(7, 19, 39, 0.78);
  backdrop-filter: blur(8px);
}

.games-card,
.flow-hub-card {
  border-width: 0.12rem;
  border-color: #b9cad5;
  background: #f7fafc;
  box-shadow:
    0 0.24rem 0 #526c7d,
    0 1.5rem 3.5rem rgba(0, 5, 25, 0.46),
    inset 0 1px 0 white;
}

.games-card .modal-close,
.flow-hub-card .modal-close {
  border: 0.08rem solid #bdcbd4;
  background: #f4f6f8;
  color: #274458;
  box-shadow: 0 0.12rem 0 #8ca0ad;
}

.games-hero,
.cleanup-control-hero {
  border-width: 0.1rem;
  border-color: #90a9bb;
  box-shadow: 0 0.18rem 0 #526d86, 0 0.55rem 1rem rgba(25, 42, 72, 0.18);
  filter: saturate(0.62);
}

.games-hero-spark,
.cleanup-spark {
  opacity: 0.42;
}

.games-hero-chip,
.cleanup-hero-chip,
.games-card > .eyebrow,
.flow-hub-card > .eyebrow {
  border: 0.06rem solid #a5b9c5;
  background: #e8eef2;
  color: #294559;
  box-shadow: none;
  font-weight: 850;
}

.games-card h2,
.flow-hub-card h2 {
  color: #19384e;
  font-weight: 900;
  text-shadow: none;
}

.games-card > .modal-copy,
.flow-hub-card > .modal-copy {
  color: #4a6373;
  font-weight: 650;
  line-height: 1.45;
}

.game-choice,
.game-choice:last-child {
  --choice-surface: #eef7f9;
  --choice-border: #76aebe;
  --choice-accent: #277a94;

  border-width: 0.1rem;
  border-color: var(--choice-border);
  background: var(--choice-surface);
  color: #193a4d;
  box-shadow: 0 0.14rem 0 color-mix(in srgb, var(--choice-border) 70%, #486273), 0 0.4rem 0.7rem rgba(27, 52, 70, 0.12);
  transition: translate 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.game-choice:last-child {
  --choice-surface: #f2eff8;
  --choice-border: #9a89bd;
  --choice-accent: #68539a;
}

.game-choice::before {
  width: 0.3rem;
  height: auto;
  inset: 0.45rem auto 0.45rem 0.28rem;
  border-radius: 99px;
  background: var(--choice-accent);
}

.game-choice:is(:hover, :focus-visible) {
  border-color: var(--choice-accent);
  background: #fff;
  filter: none;
  outline: 0.18rem solid #153f58;
  outline-offset: 0.12rem;
  scale: none;
  translate: 0 -0.08rem;
}

.game-choice:active {
  filter: none;
  scale: 0.99;
  translate: 0 0.05rem;
}

.game-choice.is-active {
  border-color: var(--choice-accent);
  box-shadow:
    0 0 0 0.13rem color-mix(in srgb, var(--choice-accent) 22%, transparent),
    0 0.16rem 0 color-mix(in srgb, var(--choice-accent) 76%, #354b5b),
    0 0.45rem 0.8rem rgba(27, 52, 70, 0.14);
}

.game-choice-current {
  border: 0;
  background: var(--choice-accent);
  color: white;
  box-shadow: none;
}

.game-choice-art {
  border-width: 0.1rem;
  border-color: color-mix(in srgb, var(--choice-border) 70%, white);
  box-shadow: 0 0.12rem 0 color-mix(in srgb, var(--choice-border) 65%, #536979);
  filter: saturate(0.75);
}

.game-choice-copy small {
  color: var(--choice-accent);
  font-weight: 850;
  text-shadow: none;
}

.game-choice-copy strong {
  color: #19384e;
  font-weight: 900;
  text-shadow: none;
}

.game-choice-copy > span {
  color: #536a78;
  font-weight: 650;
}

.game-choice-action {
  border: 0;
  background: #29485c;
  color: white;
  box-shadow: none;
}

.flow-hub-grid .flow-event-card,
.flow-hub-grid .flow-meta-card {
  border-width: 0.08rem;
  border-color: #b7c8d1;
  background: #fff;
  color: #213f52;
  box-shadow: 0 0.12rem 0 #8da2ae, 0 0.28rem 0.55rem rgba(29, 53, 68, 0.09);
}

.flow-hub-grid .flow-event-card {
  background: #f6fafb;
}

.flow-hub-grid .flow-event-copy .flow-card-label,
.flow-hub-grid .flow-event-copy small,
.flow-hub-grid .flow-event-clock small {
  color: #526b78;
}

.flow-hub-grid .flow-event-copy strong,
.flow-hub-grid .flow-event-clock time {
  color: #193b50;
  text-shadow: none;
}

.flow-hub-grid .flow-rank-card {
  background: #eef6f7;
}

.flow-hub-grid .flow-daily-card {
  background: #f7f6eb;
}

.flow-hub-return {
  min-height: 3.2rem;
  border: 0.08rem solid #183c52;
  border-radius: 0.85rem;
  background: #214d65;
  color: white;
  box-shadow: 0 0.15rem 0 #102d3e, 0 0.38rem 0.65rem rgba(20, 45, 61, 0.18);
  font-weight: 850;
}

@media (max-height: 40rem) {
  html[data-view="journey"] .journey-back-game {
    min-height: 3.65rem;
    margin-block-end: 0.7rem;
    padding: 0.42rem 0.5rem;
  }

  .journey-back-icon {
    width: 2.3rem;
    border-radius: 0.72rem;
    font-size: 1.1rem;
  }

  html[data-view="play"] .classic-quick-actions,
  html[data-view="play"] .orbit-card > .orbit-quick-actions {
    min-height: 3.65rem;
    padding: 0.32rem 0.38rem 0.36rem;
    border-radius: 1.3rem;
  }

  html[data-view="play"] .classic-quick-actions button,
  html[data-view="play"] .orbit-card > .orbit-quick-actions button {
    min-block-size: 2.92rem;
    flex-direction: row;
    gap: 0.28rem;
    padding: 0.25rem 0.22rem;
  }

  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2) {
    min-block-size: 3.22rem;
    translate: 0 -0.22rem;
  }

  html[data-view="play"] .classic-quick-actions button > span,
  html[data-view="play"] .orbit-card > .orbit-quick-actions button > span {
    width: 2rem;
    border-radius: 0.58rem;
    font-size: 0.7rem;
  }

  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button:nth-child(2) > span {
    width: 2rem;
  }

  html[data-view="play"] .classic-quick-actions button small,
  html[data-view="play"] .orbit-card > .orbit-quick-actions button small {
    font-size: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions),
  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions)::after,
  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button,
  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button > span,
  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) time,
  :is(.games-modal, .flow-hub-modal)[open] :is(.games-hero, .cleanup-control-hero, .game-choice, .flow-hub-grid > *),
  html[data-view="journey"] :is(.journey-page-heading, .journey-back-game, .journey-back-icon) {
    animation: none;
    transition-duration: 0.1s;
  }
}

@media (forced-colors: active) {
  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions),
  html[data-view="play"] :is(.classic-quick-actions, .orbit-quick-actions) button,
  .games-card,
  .flow-hub-card,
  .game-choice,
  .flow-hub-grid :is(.flow-event-card, .flow-meta-card),
  html[data-view="journey"] :is(.journey-back-game, .journey-back-icon, .journey-back-resume b, .journey-page-heading, .journey-hero, .journey-summary > div, .collection-section-heading, .chapter-block) {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Review-pass cascade guards. */
html[data-play-mode="orbit"] .orbit-card .orbit-topline {
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 13.5rem) auto;
  grid-template-areas: "sector integrity radar";
  gap: 0.58rem;
}

.toast {
  inset: auto 50% calc(max(5.1rem, env(safe-area-inset-bottom) + 4.5rem)) auto;
  transform: translate(50%, 130%);
}

.toast.is-visible {
  transform: translate(50%, 0);
}

@media (max-width: 23rem) {
  html[data-play-mode="orbit"] .orbit-card .orbit-topline {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "sector radar"
      "integrity integrity";
    gap: 0.4rem;
  }
}

/* Orbital material pass: Vortex gameplay and Map share one visual language. */
html[data-play-mode="orbit"] {
  --orbit-glass-deep: #081d2b;
  --orbit-glass: #0c2c3c;
  --orbit-glass-raised: #123b4c;
  --orbit-glass-line: rgba(138, 238, 247, 0.34);
  --orbit-glass-line-strong: rgba(157, 247, 255, 0.58);
  --orbit-energy-cyan: #7cecf2;
  --orbit-energy-violet: #a995ff;
  --orbit-action: #cfff63;
  --orbit-text: #f2fdff;
  --orbit-text-muted: #a8cbd3;
}

/* The sphere hero stays score-first, but now reads as orbital glass instead
   of a separate candy banner. */
html[data-play-mode="orbit"] .view-play .orbit-heading {
  border: 0.08rem solid var(--orbit-glass-line-strong);
  background:
    radial-gradient(circle at 12% 10%, rgba(124, 236, 242, 0.2), transparent 34%),
    radial-gradient(circle at 82% 115%, rgba(169, 149, 255, 0.2), transparent 43%),
    linear-gradient(145deg, rgba(13, 53, 70, 0.97), rgba(9, 31, 49, 0.98) 58%, rgba(20, 30, 65, 0.98));
  box-shadow:
    0 0.45rem 1.15rem rgba(0, 10, 24, 0.32),
    inset 0 0.07rem 0 rgba(220, 253, 255, 0.22),
    inset 0 -0.08rem 0 rgba(0, 10, 24, 0.24);
  backdrop-filter: blur(0.7rem) saturate(1.08);
}

html[data-play-mode="orbit"] .view-play .orbit-heading::before {
  height: 38%;
  background: linear-gradient(180deg, rgba(211, 252, 255, 0.13), transparent);
}

html[data-play-mode="orbit"] .view-play .orbit-heading::after {
  border-width: 0.09rem;
  border-color: rgba(124, 236, 242, 0.16);
  box-shadow: 0 0 0 0.42rem rgba(169, 149, 255, 0.055);
}

html[data-play-mode="orbit"] .view-play .orbit-heading .eyebrow {
  border-color: rgba(149, 244, 249, 0.42);
  background: rgba(5, 31, 43, 0.68);
  color: #c9fbff;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.12);
}

html[data-play-mode="orbit"] .view-play .orbit-heading h1 {
  color: var(--orbit-text);
  text-shadow: 0 0.12rem 0 rgba(0, 18, 33, 0.72), 0 0 0.8rem rgba(95, 226, 237, 0.16);
}

html[data-play-mode="orbit"] .view-play .orbit-world-name {
  color: var(--orbit-text-muted);
}

html[data-play-mode="orbit"] .view-play .orbit-world-name > span:first-child {
  color: var(--orbit-energy-cyan);
}

html[data-play-mode="orbit"] .view-play .orbit-recycled-score {
  border: 0.08rem solid rgba(194, 255, 116, 0.55);
  background:
    radial-gradient(circle at 16% 8%, rgba(207, 255, 99, 0.14), transparent 1.8rem),
    linear-gradient(145deg, rgba(19, 61, 66, 0.97), rgba(9, 37, 49, 0.98));
  color: var(--orbit-text);
  box-shadow:
    0 0.38rem 0.9rem rgba(0, 12, 25, 0.3),
    0 0 1rem rgba(164, 244, 112, 0.08),
    inset 0 0.07rem 0 rgba(235, 255, 236, 0.18);
}

html[data-play-mode="orbit"] .view-play .orbit-recycled-icon {
  border-color: rgba(154, 243, 248, 0.48);
  border-radius: 0.62rem;
  background: linear-gradient(145deg, #18576a, #193f64 62%, #3e3675);
  box-shadow: 0 0.16rem 0 rgba(4, 21, 42, 0.72), inset 0 0.06rem 0 rgba(220, 252, 255, 0.24);
  color: #dffeff !important;
  text-shadow: 0 0 0.5rem rgba(124, 236, 242, 0.64);
  rotate: 0deg;
}

html[data-play-mode="orbit"] .view-play .orbit-recycled-label {
  color: #a8d9dc;
}

html[data-play-mode="orbit"] .view-play .orbit-recycled-copy strong {
  color: var(--orbit-text);
  text-shadow: none;
}

html[data-play-mode="orbit"] .view-play #orbit-captured {
  color: var(--orbit-action);
  text-shadow: 0 0 0.7rem rgba(207, 255, 99, 0.22);
}

html[data-play-mode="orbit"] .view-play :is(.orbit-score-divider, #orbit-total) {
  color: #b9dfe2;
}

.orbit-score-flare {
  box-shadow: 0 0 0.5rem var(--orbit-energy-cyan);
}

/* Vortex Map shell: the same night-sky foundation as the sphere screen. */
html[data-view="journey"][data-play-mode="orbit"] {
  color-scheme: dark;
  background: #061721;
}

html[data-view="journey"][data-play-mode="orbit"] body {
  background:
    radial-gradient(circle at 50% 12%, rgba(79, 210, 221, 0.16), transparent 24rem),
    #061721;
}

html[data-view="journey"][data-play-mode="orbit"] .app-shell {
  background:
    radial-gradient(circle at 14% 16%, rgba(122, 235, 255, 0.13) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 82% 28%, rgba(169, 149, 255, 0.11) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 73% 72%, rgba(207, 255, 99, 0.09) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #0d3448 0%, #081e2d 40%, #061721 100%);
}

html[data-view="journey"][data-play-mode="orbit"] .topbar {
  border-block-end-color: rgba(137, 232, 240, 0.2);
  background: rgba(6, 28, 41, 0.88);
  box-shadow: 0 0.45rem 1rem rgba(0, 10, 22, 0.22);
  backdrop-filter: blur(1rem) saturate(1.08);
}

html[data-view="journey"][data-play-mode="orbit"] .brand-mark {
  color: #eafcff;
}

html[data-view="journey"][data-play-mode="orbit"] .journey-back-game {
  border: 0.08rem solid var(--orbit-glass-line-strong);
  background:
    radial-gradient(circle at 15% 5%, rgba(124, 236, 242, 0.15), transparent 30%),
    linear-gradient(145deg, rgba(15, 56, 72, 0.97), rgba(8, 31, 46, 0.98));
  color: var(--orbit-text);
  box-shadow: 0 0.45rem 1.05rem rgba(0, 10, 24, 0.32), inset 0 0.07rem 0 rgba(223, 254, 255, 0.16);
}

html[data-view="journey"][data-play-mode="orbit"] .journey-back-game::after {
  background: var(--orbit-energy-cyan);
  filter: drop-shadow(0 0 0.3rem rgba(124, 236, 242, 0.62));
  opacity: 0.68;
}

html[data-view="journey"][data-play-mode="orbit"] .journey-back-icon {
  border: 0.08rem solid rgba(148, 242, 248, 0.54);
  background: linear-gradient(145deg, #17576b, #203f69 62%, #403773);
  color: white;
  box-shadow: 0 0.18rem 0 rgba(4, 20, 40, 0.72), inset 0 0.07rem 0 rgba(224, 253, 255, 0.24);
}

html[data-view="journey"][data-play-mode="orbit"] :is(.journey-back-copy small, .journey-back-resume > span) {
  color: var(--orbit-text-muted);
}

html[data-view="journey"][data-play-mode="orbit"] .journey-back-copy strong {
  color: var(--orbit-text);
}

html[data-view="journey"][data-play-mode="orbit"] .journey-back-resume b {
  border: 0.07rem solid rgba(216, 255, 142, 0.74);
  background: var(--orbit-action);
  color: #173b31;
  box-shadow: 0 0.14rem 0 #648e3d, 0 0 0.7rem rgba(207, 255, 99, 0.12);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading {
  border: 0.08rem solid var(--orbit-glass-line-strong);
  background:
    radial-gradient(circle at 10% 7%, rgba(124, 236, 242, 0.18), transparent 34%),
    radial-gradient(circle at 91% 22%, rgba(169, 149, 255, 0.18), transparent 35%),
    linear-gradient(145deg, rgba(14, 55, 71, 0.98), rgba(9, 31, 49, 0.99) 62%, rgba(20, 29, 62, 0.99));
  color: var(--orbit-text);
  box-shadow: 0 0.55rem 1.3rem rgba(0, 10, 24, 0.34), inset 0 0.08rem 0 rgba(221, 253, 255, 0.16);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading::before {
  height: 34%;
  background: linear-gradient(180deg, rgba(218, 253, 255, 0.11), transparent);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading::after {
  border-width: 0.1rem;
  border-color: rgba(124, 236, 242, 0.13);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading .page-kicker-chip {
  border: 0.07rem solid rgba(149, 243, 249, 0.44);
  background: rgba(6, 33, 46, 0.68);
  color: #c9fbff;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.12);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading h1 {
  color: var(--orbit-text);
  text-shadow: 0 0.12rem 0 rgba(0, 15, 28, 0.75), 0 0 0.8rem rgba(98, 229, 238, 0.14);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading .collection-page-subtitle {
  color: #bfdde2;
}

.view-journey[data-map-mode="orbit"] .journey-page-heading .completion-ring {
  border: 0.08rem solid rgba(188, 252, 255, 0.48);
  background: conic-gradient(var(--orbit-action) var(--percent), rgba(117, 180, 189, 0.2) 0);
  color: var(--orbit-text);
  box-shadow: 0 0 0.9rem rgba(124, 236, 242, 0.13), inset 0 0.06rem 0 rgba(255, 255, 255, 0.14);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading .completion-ring::before {
  background: linear-gradient(145deg, #123c4d, #0a2436);
  box-shadow: inset 0 0.06rem 0 rgba(212, 251, 255, 0.16);
}

.view-journey[data-map-mode="orbit"] .journey-page-heading .completion-ring small {
  color: var(--orbit-text-muted);
}

.view-journey[data-map-mode="orbit"] .journey-hero {
  border: 0.08rem solid var(--orbit-glass-line-strong);
  background:
    radial-gradient(circle at 84% 20%, rgba(124, 236, 242, 0.16), transparent 7rem),
    radial-gradient(circle at 74% 105%, rgba(169, 149, 255, 0.16), transparent 8rem),
    linear-gradient(145deg, rgba(14, 54, 70, 0.98), rgba(8, 30, 47, 0.99));
  box-shadow: 0 0.55rem 1.25rem rgba(0, 10, 24, 0.34), inset 0 0.08rem 0 rgba(221, 253, 255, 0.16);
}

.view-journey[data-map-mode="orbit"] .journey-hero::before,
.view-journey[data-map-mode="orbit"] .journey-hero::after {
  border-width: 0.08rem;
  border-color: rgba(135, 234, 242, 0.14);
}

.view-journey[data-map-mode="orbit"] .journey-hero-rays {
  background: repeating-conic-gradient(from 12deg, rgba(124, 236, 242, 0.1) 0 8deg, transparent 8deg 23deg);
  opacity: 0.72;
}

.view-journey[data-map-mode="orbit"] .journey-hero-copy {
  text-shadow: 0 0.12rem 0 rgba(0, 15, 28, 0.7);
}

.view-journey[data-map-mode="orbit"] .journey-hero-eyebrow {
  border: 0.06rem solid rgba(151, 243, 248, 0.32);
  background: rgba(4, 28, 41, 0.7);
  color: #c8f9fd;
  white-space: nowrap;
}

.view-journey[data-map-mode="orbit"] .journey-hero-eyebrow > span {
  background: var(--orbit-action);
  box-shadow: 0 0 0 0.18rem rgba(207, 255, 99, 0.11), 0 0 0.45rem rgba(207, 255, 99, 0.3);
}

.view-journey[data-map-mode="orbit"] .journey-hero-copy > small {
  color: var(--orbit-text-muted);
}

.view-journey[data-map-mode="orbit"] .journey-hero-orbit {
  filter: drop-shadow(0 0.45rem 0.65rem rgba(0, 15, 30, 0.45));
}

.view-journey[data-map-mode="orbit"] .journey-hero-orbit > span {
  border: 0.09rem solid rgba(190, 250, 255, 0.7);
  background: linear-gradient(145deg, #1b596c, #1b4568 60%, #463d7a);
  color: #effeff;
  box-shadow: 0 0 0 0.3rem rgba(124, 236, 242, 0.09), inset 0 0.08rem 0 rgba(230, 254, 255, 0.2);
}

.view-journey[data-map-mode="orbit"] .journey-hero-orbit svg {
  stroke: rgba(147, 240, 247, 0.58);
}

.view-journey[data-map-mode="orbit"] .journey-token-face {
  border: 0.07rem solid rgba(213, 255, 143, 0.74);
  background: #183e43;
  color: var(--orbit-action);
  box-shadow: 0 0 0.5rem rgba(207, 255, 99, 0.18), inset 0 0.05rem 0 rgba(255, 255, 255, 0.14);
}

.view-journey[data-map-mode="orbit"] .journey-hero-action {
  border: 0.07rem solid rgba(219, 255, 151, 0.78);
  background: var(--orbit-action);
  color: #173b31;
  box-shadow: 0 0.14rem 0 #648e3d, 0 0 0.7rem rgba(207, 255, 99, 0.13);
}

.view-journey[data-map-mode="orbit"] .journey-summary > div {
  border: 0.07rem solid rgba(137, 231, 239, 0.28);
  background: linear-gradient(145deg, rgba(17, 55, 70, 0.96), rgba(8, 30, 44, 0.98));
  color: var(--orbit-text);
  box-shadow: 0 0.4rem 0.9rem rgba(0, 11, 24, 0.25), inset 0 0.06rem 0 rgba(220, 253, 255, 0.13);
}

.view-journey[data-map-mode="orbit"] .journey-summary > div:nth-child(2) {
  border-color: rgba(207, 255, 99, 0.32);
  background: linear-gradient(145deg, rgba(31, 66, 58, 0.96), rgba(9, 34, 39, 0.98));
  box-shadow: 0 0.4rem 0.9rem rgba(0, 11, 24, 0.25), inset 0 0.06rem 0 rgba(232, 255, 220, 0.12);
}

.view-journey[data-map-mode="orbit"] .journey-summary > div:nth-child(3) {
  border-color: rgba(169, 149, 255, 0.35);
  background: linear-gradient(145deg, rgba(39, 47, 79, 0.97), rgba(12, 27, 49, 0.98));
  box-shadow: 0 0.4rem 0.9rem rgba(0, 11, 24, 0.25), inset 0 0.06rem 0 rgba(235, 227, 255, 0.12);
}

.view-journey[data-map-mode="orbit"] .journey-summary i {
  border: 0.06rem solid rgba(141, 235, 243, 0.36);
  background: rgba(8, 35, 48, 0.72);
  color: var(--orbit-energy-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.12);
}

.view-journey[data-map-mode="orbit"] .journey-summary > div:nth-child(2) i {
  border-color: rgba(207, 255, 99, 0.38);
  background: rgba(26, 55, 46, 0.75);
  color: var(--orbit-action);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

.view-journey[data-map-mode="orbit"] .journey-summary > div:nth-child(3) i {
  border-color: rgba(169, 149, 255, 0.4);
  background: rgba(35, 38, 68, 0.74);
  color: #c7baff;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

.view-journey[data-map-mode="orbit"] .journey-summary span {
  color: var(--orbit-text-muted);
}

.view-journey[data-map-mode="orbit"] .journey-summary strong {
  color: var(--orbit-text);
  text-shadow: none;
}

.view-journey[data-map-mode="orbit"] .collection-section-heading {
  border: 0.07rem solid rgba(137, 231, 239, 0.28);
  background: linear-gradient(145deg, rgba(17, 52, 67, 0.96), rgba(8, 29, 43, 0.98));
  color: var(--orbit-text);
  box-shadow: 0 0.4rem 0.9rem rgba(0, 11, 24, 0.24), inset 0 0.06rem 0 rgba(220, 253, 255, 0.12);
}

.view-journey[data-map-mode="orbit"] .collection-section-heading > span:first-child {
  border: 0.06rem solid rgba(140, 235, 243, 0.42);
  background: rgba(9, 39, 53, 0.82);
  color: var(--orbit-energy-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.12);
}

.view-journey[data-map-mode="orbit"] .collection-section-heading :is(small, h2) {
  color: var(--orbit-text);
}

.view-journey[data-map-mode="orbit"] .collection-section-heading small {
  color: var(--orbit-text-muted);
}

.view-journey[data-map-mode="orbit"] .chapter-block {
  border: 0.07rem solid hsl(var(--chapter-hue) 52% 72% / 0.22);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 100% 0%, hsl(var(--chapter-hue) 70% 60% / 0.1), transparent 9rem),
    linear-gradient(155deg, rgba(14, 46, 61, 0.97), rgba(7, 26, 39, 0.99));
  color: var(--orbit-text);
  box-shadow: 0 0.5rem 1.1rem rgba(0, 10, 22, 0.26), inset 0 0.06rem 0 rgba(221, 253, 255, 0.1);
}

.view-journey[data-map-mode="orbit"] .chapter-block::before {
  width: 0.24rem;
  height: auto;
  inset: 1rem auto 1rem 0;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(hsl(var(--chapter-hue) 75% 68%), hsl(var(--chapter-hue) 58% 45%));
  box-shadow: 0 0 0.5rem hsl(var(--chapter-hue) 70% 58% / 0.32);
  rotate: 0deg;
}

.view-journey[data-map-mode="orbit"] .chapter-block::after {
  width: 8rem;
  inset: -5.6rem -3rem auto auto;
  border: 0.08rem solid hsl(var(--chapter-hue) 70% 78% / 0.1);
}

.view-journey[data-map-mode="orbit"] .chapter-block.is-active {
  border-color: rgba(124, 236, 242, 0.52);
  box-shadow: 0 0 0 0.08rem rgba(124, 236, 242, 0.08), 0 0.55rem 1.2rem rgba(0, 10, 22, 0.3);
}

.view-journey[data-map-mode="orbit"] .chapter-block.is-complete {
  border-color: rgba(207, 255, 99, 0.42);
}

.view-journey[data-map-mode="orbit"] .chapter-block.is-locked {
  filter: saturate(0.48);
  opacity: 0.7;
}

.view-journey[data-map-mode="orbit"] .chapter-number {
  border: 0.07rem solid hsl(var(--chapter-hue) 58% 70% / 0.42);
  background: hsl(var(--chapter-hue) 42% 25% / 0.58);
  color: #e9fbff;
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.12);
  rotate: 0deg;
}

.view-journey[data-map-mode="orbit"] .chapter-number span {
  color: #b8d5da;
}

.view-journey[data-map-mode="orbit"] .chapter-title p,
.view-journey[data-map-mode="orbit"] .chapter-stars span {
  color: hsl(var(--chapter-hue) 58% 78% / 0.78);
}

.view-journey[data-map-mode="orbit"] .chapter-title h2,
.view-journey[data-map-mode="orbit"] .chapter-stars strong {
  color: var(--orbit-text);
  text-shadow: none;
}

.view-journey[data-map-mode="orbit"] .chapter-progress {
  border: 0.06rem solid rgba(145, 225, 232, 0.16);
  background: rgba(0, 14, 25, 0.46);
  box-shadow: inset 0 0.06rem 0.12rem rgba(0, 7, 16, 0.5);
  accent-color: var(--orbit-energy-cyan);
}

.view-journey[data-map-mode="orbit"] .chapter-progress::-webkit-progress-bar {
  background: rgba(0, 14, 25, 0.46);
}

.view-journey[data-map-mode="orbit"] .chapter-progress::-webkit-progress-value,
.view-journey[data-map-mode="orbit"] .chapter-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--orbit-energy-cyan), var(--orbit-action));
}

.view-journey[data-map-mode="orbit"] .level-button {
  border: 0.07rem solid hsl(var(--chapter-hue) 45% 72% / 0.3);
  background: linear-gradient(145deg, rgba(20, 57, 70, 0.98), rgba(8, 29, 42, 0.99));
  color: #e9fbff;
  box-shadow: 0 0.3rem 0.65rem rgba(0, 10, 22, 0.3), inset 0 0.05rem 0 rgba(222, 253, 255, 0.11);
}

.view-journey[data-map-mode="orbit"] .level-button::after {
  border-color: rgba(139, 222, 230, 0.28);
}

.view-journey[data-map-mode="orbit"] .level-button.is-current {
  border-color: rgba(207, 255, 99, 0.72);
  background: linear-gradient(145deg, #1b5967, #12394a);
  color: white;
  box-shadow: 0 0 0 0.14rem rgba(207, 255, 99, 0.1), 0 0 0.85rem rgba(124, 236, 242, 0.2), inset 0 0.06rem 0 rgba(239, 255, 240, 0.16);
}

.view-journey[data-map-mode="orbit"] .level-button.is-complete:not(.is-current) {
  border-color: rgba(207, 255, 99, 0.42);
  background: linear-gradient(145deg, #254d42, #102f35);
}

.view-journey[data-map-mode="orbit"] .level-button.is-locked {
  border-color: rgba(130, 169, 178, 0.2);
  background: linear-gradient(145deg, #102936, #091b27);
  color: #79939a;
  box-shadow: inset 0 0.05rem 0 rgba(219, 250, 255, 0.06);
}

.view-journey[data-map-mode="orbit"] .level-token-icon {
  border: 0.06rem solid rgba(151, 239, 246, 0.42);
  background: #123c4b;
  color: var(--orbit-energy-cyan);
  box-shadow: 0 0 0.42rem rgba(124, 236, 242, 0.12), inset 0 0.05rem 0 rgba(255, 255, 255, 0.12);
}

.view-journey[data-map-mode="orbit"] .level-button.is-current .level-token-icon {
  border-color: rgba(220, 255, 155, 0.76);
  background: #213e35;
  color: var(--orbit-action);
  box-shadow: 0 0 0.48rem rgba(207, 255, 99, 0.2), inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

.view-journey[data-map-mode="orbit"] .level-badge {
  border: 0.05rem solid hsl(var(--chapter-hue) 54% 76% / 0.36);
  background: #0b2635;
  color: #d9f7fa;
  box-shadow: 0 0.1rem 0 rgba(0, 11, 22, 0.5);
}

.view-journey[data-map-mode="orbit"] .level-button.is-current .level-badge {
  border-color: rgba(218, 255, 150, 0.7);
  background: var(--orbit-action);
  color: #173b31;
}

.view-journey[data-map-mode="orbit"] .level-stars {
  color: #a8cbd3;
  text-shadow: none;
}

.view-journey[data-map-mode="orbit"] :is(.journey-hero, .level-button):focus-visible {
  outline: 0.18rem solid var(--orbit-action);
  outline-offset: 0.18rem;
}

@media (prefers-reduced-motion: reduce) {
  html[data-play-mode="orbit"] .view-play .orbit-heading,
  html[data-play-mode="orbit"] .view-play .orbit-recycled-score.is-counting :is(#orbit-captured, .orbit-recycled-icon, .orbit-score-flare),
  .view-journey[data-map-mode="orbit"] :is(.journey-hero-rays, .journey-hero-spark, .journey-hero-orbit svg, .level-button.is-current) {
    animation: none;
  }
}

@media (forced-colors: active) {
  html[data-play-mode="orbit"] .view-play :is(.orbit-heading, .orbit-recycled-score),
  html[data-view="journey"][data-play-mode="orbit"] :is(.journey-back-game, .journey-back-icon),
  .view-journey[data-map-mode="orbit"] :is(.journey-page-heading, .completion-ring, .journey-hero, .journey-summary > div, .collection-section-heading, .chapter-block, .level-button) {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Final cascade layer for the orbital catastrophe and destination dialogs. */
.orbit-world-failure {
  isolation: isolate;
  contain: layout style paint;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(18, 5, 32, 0.24) 42%, rgba(1, 5, 15, 0.94) 84%),
    rgba(1, 5, 15, 0.72);
}

.orbit-stage.is-world-lost {
  animation: orbit-catastrophe-impact 920ms ease-out both;
}

.orbit-stage.is-world-lost .orbit-world-failure {
  animation: orbit-catastrophe-veil 3.2s ease-out both;
}

.orbit-explosion-core {
  z-index: 6;
  width: 6.4rem;
  background: radial-gradient(circle at 36% 30%, white 0 10%, #fff8ae 23%, #ffb154 39%, #ff526f 58%, #9d48ff 72%, transparent 74%);
  box-shadow: 0 0 2.4rem white, 0 0 6rem #ff735e, 0 0 10rem #7f50ff;
}

.orbit-stage.is-world-lost .orbit-explosion-core {
  animation: orbit-catastrophe-core 1.75s cubic-bezier(.16, .78, .18, 1) 220ms both;
}

.orbit-explosion-ring {
  z-index: 5;
  border-width: 0.24rem;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 1.3rem #75f8ff, 0 0 2.8rem rgba(255, 99, 201, 0.74), inset 0 0 1.2rem #fff4a5;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-one {
  animation: orbit-catastrophe-ring 1.18s cubic-bezier(.08, .74, .18, 1) 390ms both;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-two {
  animation: orbit-catastrophe-ring 1.42s cubic-bezier(.08, .74, .18, 1) 520ms both;
}

.orbit-stage.is-world-lost .orbit-explosion-ring.is-three {
  animation: orbit-catastrophe-ring 1.65s cubic-bezier(.08, .74, .18, 1) 650ms both;
}

.orbit-explosion-chunks {
  z-index: 8;
}

.orbit-explosion-chunks i {
  clip-path: polygon(7% 24%, 58% 0, 100% 38%, 76% 100%, 25% 83%, 0 57%);
  border-radius: 18% 42% 24% 38%;
}

.orbit-stage.is-world-lost .orbit-explosion-chunks i {
  animation: orbit-catastrophe-chunk 2.05s cubic-bezier(.12, .68, .18, 1) calc(350ms + var(--chunk-delay, 0ms)) both;
}

.orbit-stage.is-world-lost #orbit-sphere {
  animation: orbit-catastrophe-world-rupture 1.72s cubic-bezier(.22, .7, .2, 1) both;
  transform-origin: center;
}

.orbit-failure-card {
  z-index: 12;
  border-color: rgba(255, 238, 211, 0.86);
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 181, 92, 0.42), transparent 46%),
    linear-gradient(155deg, rgba(95, 34, 74, 0.98), rgba(45, 25, 81, 0.99) 58%, rgba(15, 34, 59, 0.99));
  box-shadow:
    0 0 0 0.08rem rgba(255, 109, 110, 0.35),
    0 0.5rem 0 rgba(30, 14, 54, 0.82),
    0 1.5rem 3rem rgba(0, 3, 16, 0.72),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.38);
}

.orbit-stage.is-world-lost .orbit-failure-card {
  animation: orbit-catastrophe-card-in 720ms cubic-bezier(.18, 1.32, .3, 1) 2.15s both;
}

.orbit-failure-card .orbit-rescue-button {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  margin-block-start: 0.48rem;
  border-color: rgba(141, 230, 238, 0.48);
  background: rgba(12, 48, 65, 0.94);
  color: #e9fcff;
  box-shadow: 0 0.16rem 0 rgba(0, 12, 25, 0.82), inset 0 0.06rem 0 rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
}

.orbit-failure-card .orbit-rescue-button b {
  margin-inline-start: 0;
  color: #cfff63;
  font-size: 0.75rem;
}

.games-modal,
.flow-hub-modal {
  --destination-bg: #061521;
  --destination-surface: #0a2230;
  --destination-surface-raised: #103242;
  --destination-border: rgba(137, 226, 235, 0.28);
  --destination-cyan: #7cecf2;
  --destination-violet: #a995ff;
  --destination-action: #cfff63;
  --destination-text: #effeff;
  --destination-muted: #a8c8ce;
  color-scheme: dark;
}

.games-modal::backdrop,
.flow-hub-modal::backdrop {
  background:
    radial-gradient(circle at 16% 12%, rgba(67, 196, 218, 0.18), transparent 18rem),
    radial-gradient(circle at 88% 82%, rgba(130, 101, 255, 0.16), transparent 20rem),
    rgba(1, 7, 16, 0.86);
  backdrop-filter: blur(10px) saturate(0.9);
}

.games-card,
.flow-hub-card {
  border: 0.1rem solid rgba(155, 233, 239, 0.34);
  background:
    radial-gradient(circle at 8% 0, rgba(72, 202, 219, 0.13), transparent 11rem),
    radial-gradient(circle at 96% 34%, rgba(137, 104, 255, 0.11), transparent 14rem),
    linear-gradient(155deg, rgba(10, 34, 48, 0.99), rgba(4, 18, 30, 0.995));
  color: var(--destination-text);
  box-shadow: 0 0 0 0.04rem rgba(124, 236, 242, 0.09), 0 1.8rem 4.5rem rgba(0, 3, 14, 0.68), inset 0 0.06rem 0 rgba(226, 254, 255, 0.14);
}

.games-card .modal-close,
.flow-hub-card .modal-close {
  border: 0.08rem solid rgba(151, 229, 235, 0.34);
  background: rgba(9, 35, 49, 0.94);
  color: #dffcff;
  box-shadow: 0 0.16rem 0 rgba(0, 10, 20, 0.72), inset 0 0.05rem 0 rgba(255, 255, 255, 0.12);
}

.games-hero,
.cleanup-control-hero {
  border: 0.08rem solid rgba(142, 229, 237, 0.28);
  background:
    radial-gradient(circle at 50% 52%, rgba(124, 236, 242, 0.18), transparent 25%),
    radial-gradient(circle at 18% 8%, rgba(207, 255, 99, 0.11), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(151, 118, 255, 0.18), transparent 32%),
    linear-gradient(145deg, #103c4d, #101d42 62%, #241c4d);
  box-shadow: 0 0.22rem 0 rgba(2, 13, 27, 0.78), 0 0.75rem 1.4rem rgba(0, 8, 20, 0.34), inset 0 0.08rem 0 rgba(255, 255, 255, 0.12);
  filter: none;
}

.games-hero-chip,
.cleanup-hero-chip,
.games-card > .eyebrow,
.flow-hub-card > .eyebrow {
  border: 0.06rem solid rgba(134, 229, 237, 0.34);
  background: rgba(8, 35, 49, 0.86);
  color: var(--destination-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

.games-card h2,
.flow-hub-card h2 {
  color: var(--destination-text);
  text-shadow: none;
}

.games-card > .modal-copy,
.flow-hub-card > .modal-copy {
  color: var(--destination-muted);
}

.game-choice,
.game-choice:last-child {
  --choice-surface: rgba(12, 45, 58, 0.96);
  --choice-border: rgba(124, 236, 242, 0.38);
  --choice-accent: var(--destination-cyan);
  border: 0.08rem solid var(--choice-border);
  background: radial-gradient(circle at 90% 0, rgba(124, 236, 242, 0.08), transparent 42%), var(--choice-surface);
  color: var(--destination-text);
  box-shadow: 0 0.16rem 0 rgba(0, 11, 22, 0.74), 0 0.55rem 1rem rgba(0, 8, 20, 0.2), inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

.game-choice:last-child {
  --choice-surface: rgba(30, 30, 66, 0.96);
  --choice-border: rgba(169, 149, 255, 0.38);
  --choice-accent: var(--destination-violet);
  background: radial-gradient(circle at 90% 0, rgba(169, 149, 255, 0.1), transparent 42%), var(--choice-surface);
}

.game-choice:is(:hover, :focus-visible) {
  border-color: var(--destination-action);
  background-color: rgba(17, 55, 67, 0.98);
  outline-color: var(--destination-action);
}

.game-choice.is-active {
  border-color: rgba(207, 255, 99, 0.66);
  box-shadow: 0 0 0 0.12rem rgba(207, 255, 99, 0.11), 0 0.18rem 0 rgba(0, 12, 22, 0.82), 0 0.8rem 1.2rem rgba(0, 8, 20, 0.28);
}

.game-choice-current {
  background: var(--destination-action);
  color: #173c32;
}

.game-choice-art {
  border-color: rgba(164, 232, 238, 0.28);
  box-shadow: 0 0.12rem 0 rgba(0, 11, 22, 0.8), inset 0 0.06rem 0 rgba(255, 255, 255, 0.12);
  filter: saturate(0.92);
}

.game-choice-copy small { color: var(--choice-accent); }
.game-choice-copy strong { color: var(--destination-text); }
.game-choice-copy > span { color: var(--destination-muted); }
.game-choice-action { background: rgba(6, 25, 37, 0.86); color: var(--destination-cyan); }
.game-choice.is-active .game-choice-action { background: var(--destination-action); color: #173c32; }

.flow-hub-grid .flow-event-card,
.flow-hub-grid .flow-meta-card {
  border: 0.07rem solid var(--destination-border);
  background: rgba(10, 36, 49, 0.92);
  color: var(--destination-text);
  box-shadow: 0 0.14rem 0 rgba(0, 11, 22, 0.72), inset 0 0.05rem 0 rgba(255, 255, 255, 0.07);
}

.flow-hub-grid .flow-event-card {
  border-color: color-mix(in srgb, var(--event-color) 42%, rgba(124, 236, 242, 0.28));
  background: radial-gradient(circle at 92% 0, color-mix(in srgb, var(--event-color) 17%, transparent), transparent 44%), linear-gradient(145deg, rgba(11, 42, 55, 0.98), rgba(6, 25, 39, 0.98));
}

.flow-hub-grid .flow-event-copy .flow-card-label,
.flow-hub-grid .flow-event-copy small,
.flow-hub-grid .flow-event-clock small,
.flow-hub-grid .flow-meta-card :is(.flow-card-label, small),
.flow-hub-grid :is(.flow-rank-line, .flow-daily-line) span {
  color: var(--destination-muted);
}

.flow-hub-grid .flow-event-copy strong,
.flow-hub-grid .flow-event-clock time,
.flow-hub-grid :is(.flow-rank-line, .flow-daily-line) strong,
.flow-hub-grid .flow-rank-line b {
  color: var(--destination-text);
  text-shadow: none;
}

.flow-hub-grid .flow-rank-card { background: linear-gradient(145deg, rgba(13, 49, 60, 0.98), rgba(8, 31, 44, 0.98)); }
.flow-hub-grid .flow-daily-card { background: linear-gradient(145deg, rgba(33, 47, 53, 0.98), rgba(14, 35, 43, 0.98)); }
.flow-collection-button { color: var(--destination-cyan); }
.flow-collection-button span { color: var(--destination-muted); }

.daily-world-card,
.season-route-card {
  border-color: var(--destination-border);
  background: radial-gradient(circle at 100% 0, rgba(137, 104, 255, 0.1), transparent 48%), rgba(8, 29, 42, 0.94);
  color: var(--destination-text);
  box-shadow: 0 0.14rem 0 rgba(0, 10, 22, 0.76), inset 0 0.05rem 0 rgba(255, 255, 255, 0.06);
}

.daily-world-orbit {
  border: 0.07rem solid rgba(124, 236, 242, 0.42);
  background: linear-gradient(145deg, #174f5c, #18364d 58%, #2d285a);
  color: var(--destination-cyan);
  box-shadow: 0 0.2rem 0 rgba(0, 12, 24, 0.78), inset 0 0.07rem 0 rgba(255, 255, 255, 0.1);
}

.daily-world-card :is(h3, p),
.season-route-card :is(h3, p) { color: var(--destination-text); }
.daily-world-card :is(p, small),
.season-route-card :is(p, small) { color: var(--destination-muted); }

#daily-world-play,
.flow-hub-return {
  border-color: rgba(220, 255, 155, 0.62);
  background: var(--destination-action);
  color: #173c32;
  box-shadow: 0 0.16rem 0 #668b37, 0 0.45rem 0.8rem rgba(0, 11, 19, 0.3), inset 0 0.05rem 0 rgba(255, 255, 255, 0.34);
}

#daily-world-share { border-color: rgba(124, 236, 242, 0.35); background: rgba(12, 43, 56, 0.96); color: var(--destination-cyan); }
.daily-personal-best { background: rgba(17, 52, 64, 0.9); color: #c9e7ea; }
.daily-leaderboard li { background: rgba(11, 39, 51, 0.92); color: #d9f5f6; }
.daily-leaderboard li.is-player { background: rgba(63, 84, 50, 0.78); color: #efffd0; }
.daily-leaderboard li > small { color: var(--destination-muted); }
.season-route-heading > span { background: rgba(15, 49, 64, 0.94); color: var(--destination-action); }
.season-route-heading > strong { background: rgba(19, 54, 66, 0.94); color: #d8f0f1; }
.cosmetic-item { border-color: rgba(142, 211, 218, 0.22); background: rgba(12, 39, 51, 0.94); color: #e5f9fa; }
.cosmetic-item small { color: var(--destination-muted); }

/* Rewards descriptions stay comfortably readable on compact screens. */
.flow-hub-modal {
  --destination-muted: #c9e2e5;
}

.flow-hub-card > .modal-copy {
  font-size: clamp(0.8rem, 0.76rem + 0.18vw, 0.88rem);
  line-height: 1.55;
}

.flow-hub-grid .flow-card-label,
.daily-world-card small,
.season-route-card small {
  font-size: clamp(0.62rem, 0.59rem + 0.14vw, 0.68rem);
  font-weight: 750;
  line-height: 1.35;
}

.flow-hub-grid .flow-event-copy small {
  overflow: visible;
  font-size: clamp(0.7rem, 0.66rem + 0.18vw, 0.76rem);
  line-height: 1.4;
  text-overflow: clip;
  text-wrap: pretty;
  white-space: normal;
}

.flow-hub-grid .flow-event-clock small,
.flow-hub-grid :is(.flow-rank-line, .flow-daily-line) span,
.flow-hub-grid .flow-daily-card > small,
.flow-hub-grid .flow-collection-button {
  font-size: clamp(0.68rem, 0.64rem + 0.16vw, 0.74rem);
  line-height: 1.4;
}

.daily-world-card p,
.season-route-card p {
  font-size: clamp(0.74rem, 0.7rem + 0.18vw, 0.8rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.daily-world-card .daily-world-intro {
  align-self: center;
  min-width: 0;
}

.daily-world-card .daily-world-intro h3 {
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
}

.daily-world-card .daily-world-intro p {
  margin-block-start: 0.32rem;
  color: #e5f7f8;
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.88rem);
  font-weight: 650;
  line-height: 1.45;
}

.daily-world-rules {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.52rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: daily-world-rule;
}

.daily-world-rules li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.08rem 0.65rem;
  padding: 0.68rem 0.72rem;
  border: 0.06rem solid rgba(124, 236, 242, 0.22);
  border-radius: 0.76rem;
  background: rgba(13, 49, 63, 0.76);
  counter-increment: daily-world-rule;
}

.daily-world-rules li::before {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  grid-row: 1 / span 2;
  place-items: center;
  border: 0.06rem solid rgba(124, 236, 242, 0.36);
  border-radius: 0.62rem;
  background: rgba(20, 73, 86, 0.9);
  color: var(--destination-cyan);
  content: counter(daily-world-rule);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 900;
}

.daily-world-rules strong,
.daily-world-rules span {
  display: block;
  min-width: 0;
}

.daily-world-rules strong {
  color: var(--destination-text);
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.88rem);
  line-height: 1.3;
}

.daily-world-rules span {
  color: var(--destination-muted);
  font-size: clamp(0.74rem, 0.69rem + 0.2vw, 0.82rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.daily-personal-best,
.daily-leaderboard li {
  font-size: clamp(0.68rem, 0.64rem + 0.16vw, 0.74rem);
  line-height: 1.4;
}

.daily-leaderboard li > small,
.cosmetic-item small {
  font-size: clamp(0.64rem, 0.6rem + 0.16vw, 0.7rem);
  line-height: 1.35;
}

.daily-leaderboard li > span:only-child {
  grid-column: 1 / -1;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.cosmetic-item {
  min-height: 6.5rem;
}

.cosmetic-item strong {
  font-size: clamp(0.7rem, 0.66rem + 0.18vw, 0.76rem);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.flow-hub-card .cosmetic-item.is-equipped {
  background: color-mix(in srgb, var(--cosmetic-color) 14%, #0b2936);
  color: #effeff;
}

.flow-hub-card .cosmetic-item[aria-disabled="true"] {
  opacity: 0.82;
}

.games-card .modal-close:is(:hover, :focus-visible),
.flow-hub-card :is(.modal-close, button, .flow-event-card):focus-visible {
  outline: 0.16rem solid var(--destination-action);
  outline-offset: 0.12rem;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-stage.is-world-lost,
  .orbit-stage.is-world-lost .orbit-world-failure,
  .orbit-stage.is-world-lost :is(
    .orbit-explosion-vignette,
    .orbit-explosion-flash,
    .orbit-explosion-starburst,
    .orbit-explosion-corona,
    .orbit-explosion-core,
    .orbit-explosion-ring,
    .orbit-explosion-shockwave,
    .orbit-explosion-plasma,
    .orbit-explosion-chunks i
  ) {
    animation: none;
  }

  .orbit-stage.is-world-lost :is(
    .orbit-explosion-vignette,
    .orbit-explosion-flash,
    .orbit-explosion-starburst,
    .orbit-explosion-corona,
    .orbit-explosion-core,
    .orbit-explosion-ring,
    .orbit-explosion-shockwave,
    .orbit-explosion-plasma,
    .orbit-explosion-chunks i
  ) {
    opacity: 0;
  }

  .orbit-stage.is-world-lost #orbit-sphere { animation: orbit-world-rupture-reduced 220ms ease-out both; }
  .orbit-stage.is-world-lost .orbit-failure-card { animation: orbit-failure-card-in 180ms ease-out 180ms both; }
}

@media (forced-colors: active) {
  .games-card,
  .flow-hub-card,
  .games-card :is(.game-choice, .games-hero),
  .flow-hub-card :is(.cleanup-control-hero, .flow-event-card, .flow-meta-card, .daily-world-card, .season-route-card, .cosmetic-item) {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Final precedence guard for destinations introduced after the legacy
   collection-page cascade. */
/* Classic completion: a clear mission debrief, without prize-candy styling. */
.result-modal {
  --modal-accent: #ad96ff;
  --modal-accent-soft: #243350;
  --modal-deep: #0a1929;

  width: min(calc(100% - 1rem), 27.5rem);
  color: #effcff;
}

.result-modal::backdrop,
.result-modal[open]::backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(173, 150, 255, 0.12), transparent 18rem),
    rgba(2, 10, 18, 0.84);
  backdrop-filter: blur(0.75rem) saturate(1.05);
}

.result-modal .result-card {
  padding: 0.62rem 1rem 1rem;
  overflow-x: hidden;
  border: 0.07rem solid rgba(191, 175, 255, 0.42);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 12% 12%, rgba(124, 236, 242, 0.08), transparent 10rem),
    radial-gradient(circle at 88% 82%, rgba(255, 145, 137, 0.06), transparent 11rem),
    linear-gradient(155deg, #122840, #0b192a 58%, #08131f);
  color: #effcff;
  box-shadow:
    0 1.6rem 4.5rem rgba(0, 0, 0, 0.5),
    inset 0 0.06rem 0 rgba(255, 255, 255, 0.08);
}

.result-modal .result-card::before {
  display: none;
}

.result-modal .result-card::after {
  inset: 0.34rem;
  border-color: rgba(124, 236, 242, 0.1);
  border-radius: 1.16rem;
}

.result-modal .result-card .result-hero {
  height: 7.35rem;
  margin: 0 -0.38rem 0.9rem;
  border: 0.06rem solid rgba(124, 236, 242, 0.25);
  border-radius: 1.08rem;
  background:
    linear-gradient(rgba(124, 236, 242, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 236, 242, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, rgba(173, 150, 255, 0.18), transparent 5rem),
    linear-gradient(145deg, #153b4c, #152743 58%, #0a192a);
  background-size: 1.35rem 1.35rem, 1.35rem 1.35rem, auto, auto;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

.result-modal .result-card .result-hero::before {
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 0 2.8rem, rgba(124, 236, 242, 0.1) 2.84rem 2.9rem, transparent 2.94rem);
  mask-image: none;
}

.result-modal .result-card .result-hero::after {
  width: 8.5rem;
  height: 8.5rem;
  inset: -5.8rem -2.2rem auto auto;
  border: 0.06rem solid rgba(173, 150, 255, 0.18);
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 1rem rgba(124, 236, 242, 0.02);
}

.result-modal :is(.result-confetti, .result-hero-rays, .result-hero-ring, .result-hero-spark) {
  display: none;
}

.result-modal .result-level-medallion {
  width: 4.8rem;
  border: 0.06rem solid rgba(191, 175, 255, 0.48);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(34, 54, 87, 0.98), rgba(14, 31, 51, 0.99));
  color: #effcff;
  box-shadow:
    0 0 1rem rgba(173, 150, 255, 0.12),
    inset 0 0.06rem 0 rgba(255, 255, 255, 0.1);
  text-shadow: none;
  transform: none;
}

.result-modal .result-level-medallion::before {
  width: calc(100% - 0.7rem);
  border: 0.05rem solid rgba(124, 236, 242, 0.16);
  border-radius: 0.72rem;
}

.result-modal .result-level-medallion small {
  top: 0.65rem;
  color: #9ec8d0;
  font-size: 0.48rem;
}

.result-modal .result-level-medallion strong {
  padding-block-start: 0.3rem;
  color: #c9bcff;
  font-size: 1.65rem;
}

.result-modal .result-level-medallion > span {
  width: 1.55rem;
  inset: auto -0.25rem -0.25rem auto;
  border: 0.05rem solid rgba(207, 255, 99, 0.42);
  background: #223f35;
  color: #cfff63;
  box-shadow: 0 0 0.6rem rgba(207, 255, 99, 0.1);
  font-size: 0.65rem;
  text-shadow: none;
}

.result-modal[open] .result-level-medallion {
  animation: result-debrief-enter 280ms cubic-bezier(.2, .78, .24, 1) both;
}

.result-modal .result-card .result-hero .modal-hero-chip {
  min-width: 8.8rem;
  padding-block: 0.32rem;
  border: 0.05rem solid rgba(124, 236, 242, 0.3);
  background: rgba(7, 27, 42, 0.9);
  color: #8eeef1;
  box-shadow: none;
  font-size: 0.48rem;
}

.result-modal .result-heading-copy {
  text-align: start;
}

.result-modal .result-heading-copy .eyebrow {
  padding: 0;
  background: none;
  color: #a99bff;
  font-size: 0.54rem;
}

.result-modal .result-heading-copy h2 {
  margin: 0.34rem 0 0.25rem;
  color: #effcff;
  font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  line-height: 1.08;
}

.result-modal .result-heading-copy > p:last-child {
  color: #a8c5cc;
  font-weight: 600;
  text-align: start;
}

.result-modal .result-card .result-stars {
  justify-content: flex-start;
  gap: 0.42rem;
  margin: 0.65rem 0 0.75rem;
}

.result-modal .result-card .result-stars > span {
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: #f0cf6b;
  box-shadow: none;
  font-size: 1.35rem;
  transform: none;
}

.result-modal .result-card .result-stars > .star-off {
  color: #426071;
  opacity: 1;
}

.result-modal[open] .result-stars > span {
  animation: result-debrief-enter 240ms ease both;
}

.result-modal .result-score-prize {
  min-height: 3.9rem;
  gap: 0.68rem;
  padding: 0.52rem 0.65rem;
  border: 0.06rem solid rgba(207, 255, 99, 0.28);
  border-radius: 0.9rem;
  background: linear-gradient(145deg, rgba(35, 65, 54, 0.82), rgba(14, 40, 42, 0.9));
  color: #effcff;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
}

.result-modal .result-score-coin {
  width: 2.45rem;
  border: 0.05rem solid rgba(207, 255, 99, 0.36);
  border-radius: 0.72rem;
  background: #254738;
  color: #cfff63;
  box-shadow: none;
  text-shadow: none;
}

.result-modal .result-score-prize small {
  color: #9fc4b1;
}

.result-modal .result-score-prize strong {
  color: #eaffb7;
}

.result-modal .result-score-prize > b {
  border: 0.05rem solid rgba(173, 150, 255, 0.3);
  background: rgba(35, 37, 70, 0.72);
  color: #c9bcff;
  box-shadow: none;
}

.result-modal[open] .result-score-prize {
  animation: result-debrief-enter 260ms 80ms ease both;
}

.result-modal .result-card .result-stats {
  gap: 0.4rem;
  margin: 0.6rem 0 0.72rem;
}

.result-modal .result-card .result-stats div {
  padding: 0.56rem 0.25rem;
  border: 0.05rem solid rgba(137, 197, 210, 0.18);
  border-radius: 0.7rem;
  background: rgba(8, 29, 43, 0.74);
  box-shadow: none;
}

.result-modal .result-card .result-stats span {
  color: #7fa7b0;
}

.result-modal .result-card .result-stats strong {
  color: #d9eef1;
}

.result-modal .result-next-button {
  min-height: 3.25rem;
  border: 0.06rem solid rgba(207, 255, 99, 0.38);
  border-radius: 0.9rem;
  background: rgba(35, 65, 54, 0.9);
  color: #dfff91;
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
  font-weight: 850;
}

.result-modal .result-next-button::before {
  height: 0.16rem;
  background: rgba(207, 255, 99, 0.4);
}

.result-modal .result-next-button::after {
  display: none;
}

.result-modal .result-next-button .result-countdown {
  border: 0.05rem solid rgba(207, 255, 99, 0.18);
  background: rgba(6, 27, 31, 0.46);
  color: #a8c9ad;
}

.result-modal .result-action-arrow {
  border: 0.05rem solid rgba(207, 255, 99, 0.28);
  background: #132f2a;
  color: #cfff63;
  box-shadow: none;
}

.result-modal .result-replay-button {
  color: #91b2ba;
}

.result-modal .result-next-button:focus-visible,
.result-modal .result-replay-button:focus-visible {
  outline: 0.16rem solid #7cecf2;
  outline-offset: 0.12rem;
}

@keyframes result-debrief-enter {
  from { opacity: 0; transform: translateY(0.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-height: 46rem) {
  .result-modal .result-card .result-hero {
    height: 6.4rem;
  }

  .result-modal .result-level-medallion {
    width: 4.15rem;
  }

  .result-modal .result-level-medallion strong {
    font-size: 1.42rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-modal[open] :is(.result-level-medallion, .result-stars > span, .result-score-prize) {
    animation: none;
  }
}

html[data-view="achievements"] {
  color-scheme: dark;
  background: var(--vault-bg);
}

html[data-view="achievements"] body {
  background: radial-gradient(circle at 50% 8%, rgba(124, 236, 242, 0.14), transparent 25rem), var(--vault-bg);
}

html[data-view="achievements"] .app-shell {
  background:
    radial-gradient(circle at 14% 16%, rgba(124, 236, 242, 0.12) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 82% 28%, rgba(169, 149, 255, 0.1) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 72% 74%, rgba(207, 255, 99, 0.07) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #103449 0%, #091f2e 42%, var(--vault-bg) 100%);
}

html[data-view="achievements"] .topbar {
  border-block-end-color: rgba(137, 226, 235, 0.2);
  background: rgba(6, 27, 40, 0.9);
  color: var(--vault-text);
  box-shadow: 0 0.45rem 1rem rgba(0, 9, 21, 0.24);
}

html[data-view="achievements"] .brand-mark {
  border-color: rgba(137, 226, 235, 0.32);
  background: #0d2b3a;
  color: var(--vault-cyan);
  box-shadow: 0 0.15rem 0 rgba(0, 10, 22, 0.65), inset 0 0.06rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="achievements"] :is(.streak-chip, .avatar-button) {
  border-color: var(--vault-border);
  background: rgba(9, 33, 47, 0.94);
  color: var(--vault-text);
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="achievements"] .bottom-nav {
  border-block-start: 0.07rem solid rgba(137, 226, 235, 0.2);
  background: rgba(6, 25, 37, 0.96);
  box-shadow: 0 -0.45rem 1.2rem rgba(0, 8, 20, 0.3), inset 0 0.06rem 0 rgba(255, 255, 255, 0.06);
}

html[data-view="achievements"] .nav-item {
  border: 0.06rem solid transparent;
  background: transparent;
  color: var(--vault-muted);
  box-shadow: none;
}

html[data-view="achievements"] .nav-item.is-active {
  border-color: rgba(207, 255, 99, 0.44);
  background: rgba(35, 65, 54, 0.88);
  color: var(--vault-action);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
  transform: none;
}

html[data-view="journey"][data-play-mode="classic"] {
  color-scheme: dark;
  background: #07131f;
}

html[data-view="journey"][data-play-mode="classic"] body {
  background: radial-gradient(circle at 50% 12%, rgba(173, 150, 255, 0.15), transparent 24rem), #07131f;
}

html[data-view="journey"][data-play-mode="classic"] .app-shell {
  background:
    radial-gradient(circle at 14% 16%, rgba(173, 150, 255, 0.13) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 82% 28%, rgba(255, 145, 137, 0.1) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 73% 72%, rgba(207, 255, 99, 0.08) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #182f4b 0%, #101f35 42%, #07131f 100%);
}

html[data-view="journey"][data-play-mode="classic"] .topbar {
  border-block-end-color: rgba(191, 175, 255, 0.2);
  background: rgba(10, 23, 39, 0.88);
  color: var(--classic-text);
  box-shadow: 0 0.45rem 1rem rgba(0, 8, 22, 0.24);
}

.view-journey[data-map-mode="classic"] .journey-summary::before {
  background: linear-gradient(90deg, rgba(173, 150, 255, 0.58), rgba(255, 145, 137, 0.5), rgba(124, 236, 242, 0.5));
  box-shadow: 0 0 0.45rem rgba(173, 150, 255, 0.14);
}

html[data-view="profile"] {
  color-scheme: dark;
  background: var(--profile-bg);
}

html[data-view="profile"] body {
  background: radial-gradient(circle at 50% 8%, rgba(124, 236, 242, 0.14), transparent 25rem), var(--profile-bg);
}

html[data-view="profile"] .app-shell {
  background:
    radial-gradient(circle at 14% 16%, rgba(124, 236, 242, 0.12) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 82% 28%, rgba(169, 149, 255, 0.1) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 72% 74%, rgba(207, 255, 99, 0.07) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, #103449 0%, #091f2e 42%, var(--profile-bg) 100%);
}

html[data-view="profile"] .topbar {
  border-block-end-color: rgba(137, 226, 235, 0.2);
  background: rgba(6, 27, 40, 0.9);
  color: var(--profile-text);
  box-shadow: 0 0.45rem 1rem rgba(0, 9, 21, 0.24);
}

html[data-view="profile"] .brand-mark {
  border-color: rgba(137, 226, 235, 0.32);
  background: #0d2b3a;
  color: var(--profile-cyan);
  box-shadow: 0 0.15rem 0 rgba(0, 10, 22, 0.65), inset 0 0.06rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="profile"] :is(.streak-chip, .avatar-button) {
  border-color: var(--profile-border);
  background: rgba(9, 33, 47, 0.94);
  color: var(--profile-text);
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.08);
}

html[data-view="profile"] #view-profile .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-block-start: 0.8rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html[data-view="profile"] #view-profile .stat-grid::after {
  display: none;
}

html[data-view="profile"] #view-profile .stat-grid article {
  display: grid;
  min-height: 5.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 0.05rem 0.62rem;
  padding: 0.68rem;
  border: 0.07rem solid var(--profile-border);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(15, 48, 62, 0.97), rgba(8, 28, 42, 0.99));
  box-shadow: 0 0.34rem 0.75rem rgba(0, 9, 22, 0.24), inset 0 0.05rem 0 rgba(220, 253, 255, 0.1);
  text-align: start;
}

html[data-view="profile"] #view-profile .stat-grid .stat-icon {
  width: 2.45rem;
  grid-row: 1 / -1;
  margin: 0;
  border: 0.06rem solid rgba(151, 239, 246, 0.34);
  background: #123b4b;
  color: var(--profile-cyan);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.1);
}

html[data-view="profile"] #view-profile .stat-grid article:nth-child(2) .stat-icon {
  border-color: rgba(207, 255, 99, 0.34);
  background: #233e35;
  color: var(--profile-action);
}

html[data-view="profile"] #view-profile .stat-grid article:nth-child(3) .stat-icon {
  border-color: rgba(255, 156, 147, 0.34);
  background: #442f3c;
  color: var(--profile-coral);
}

html[data-view="profile"] #view-profile .stat-grid article:nth-child(4) .stat-icon {
  border-color: rgba(199, 184, 255, 0.34);
  background: #2d3158;
  color: var(--profile-violet);
}

html[data-view="profile"] #view-profile .stat-grid strong {
  margin: 0;
  color: var(--profile-text);
  text-shadow: none;
}

html[data-view="profile"] #view-profile .stat-grid p {
  margin: 0;
  color: var(--profile-muted);
}

html[data-view="profile"] .bottom-nav {
  border-block-start: 0.07rem solid rgba(137, 226, 235, 0.2);
  background: rgba(6, 25, 37, 0.96);
  box-shadow: 0 -0.45rem 1.2rem rgba(0, 8, 20, 0.3), inset 0 0.06rem 0 rgba(255, 255, 255, 0.06);
}

html[data-view="profile"] .nav-item {
  border: 0.06rem solid transparent;
  background: transparent;
  color: var(--profile-muted);
  box-shadow: none;
}

html[data-view="profile"] .nav-item.is-active {
  border-color: rgba(207, 255, 99, 0.44);
  background: rgba(35, 65, 54, 0.88);
  color: var(--profile-action);
  box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
  transform: none;
}