:root {
  --bg: #07070b;
  --fg: rgba(255, 255, 255, 0.92);
  --fg-dim: rgba(255, 255, 255, 0.35);
  --accent: #00e5ff;
  --circuit-metal: #f49647;
  --circuit-glow: #00e5ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

#game {
  position: absolute;
  inset: 0;
  display: block;
}

/* the in-game score is drawn on the canvas so it scales with the live coil */

#best-hud {
  z-index: 2;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 3vmin);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 13px 8px;
  border: 1px solid rgba(132, 224, 255, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(8, 16, 29, 0.62), rgba(12, 7, 24, 0.5));
  box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.025), 0 8px 26px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.stat-block {
  display: grid;
  grid-template-columns: 16px auto auto;
  align-items: baseline;
  gap: 7px;
}

.stat-icon {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: none;
  stroke: rgba(151, 230, 255, 0.72);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.25));
}

.coil-icon {
  stroke: rgba(255, 210, 118, 0.76);
  filter: drop-shadow(0 0 5px rgba(255, 172, 68, 0.24));
}

.coil-icon circle {
  fill: rgba(255, 235, 170, 0.82);
  stroke: none;
}

.stat-divider {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(transparent, rgba(150, 226, 255, 0.22), transparent);
}

.stat-block span {
  color: rgba(199, 235, 255, 0.62);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.13em;
}

.stat-block strong {
  color: rgba(241, 250, 255, 0.96);
  font-size: 18px;
  font-weight: 520;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.26);
}

#best-hud.new-best #best-hud-value {
  color: #aef7ff;
  animation: best-pop 0.56s cubic-bezier(0.2, 1.5, 0.4, 1);
}

#best-hud.coil-filled #coils-hud-value {
  color: #fff4b0;
  animation: coil-count-pop 0.82s cubic-bezier(0.18, 1.45, 0.3, 1);
}

#global-rank {
  z-index: 2;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(54px, 9vmin, 70px));
  left: 50%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transform: translateX(-50%);
  padding: 5px 10px 4px;
  border: 1px solid rgba(132, 224, 255, 0.13);
  border-radius: 999px;
  background: rgba(5, 10, 20, 0.5);
  color: rgba(177, 216, 229, 0.35);
  font: 700 7px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.16em;
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#global-rank strong {
  color: rgba(218, 239, 247, 0.58);
  font-size: 9px;
  letter-spacing: 0.08em;
}

#global-rank.ranked {
  border-color: color-mix(in srgb, var(--circuit-glow) 26%, transparent);
  color: color-mix(in srgb, var(--circuit-glow) 48%, rgba(177, 216, 229, 0.35));
}

#global-rank.ranked strong { color: #e8fbff; }

#mute {
  z-index: 2;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 3vmin);
  right: calc(env(safe-area-inset-right, 0px) + 3vmin);
  padding: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  touch-action: manipulation;
}

.panel-launch,
.system-tab,
#system-close,
#reveal-continue,
.circuit-select,
.system-action {
  appearance: none;
  border: 0;
  color: rgba(210, 234, 246, 0.54);
  background: transparent;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-weight: 720;
  letter-spacing: 0.12em;
  cursor: pointer;
  touch-action: manipulation;
}

body.playing #menu-actions {
  opacity: 0;
  pointer-events: none;
}

#mute:active {
  color: rgba(255, 255, 255, 0.7);
}

#mute:focus-visible,
#creator-credit a:focus-visible {
  outline: 2px solid rgba(121, 234, 255, 0.88);
  outline-offset: 3px;
  border-radius: 4px;
}

#mute .slash {
  display: none;
}

#mute.muted .slash {
  display: block;
}

#mute.muted .waves {
  display: none;
}

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

#overlay-inner {
  text-align: center;
  padding: 0 8vmin;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

#overlay-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.8vmin, 14px);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
  font-size: clamp(21px, 6.2vmin, 48px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.13em;
  margin-left: 0.13em; /* optically re-center letter-spaced text */
  white-space: nowrap;
  color: #eafaff;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.16), 0 0 28px rgba(0, 153, 255, 0.1);
}

#overlay-title > span:not(.title-node) {
  background: linear-gradient(180deg, #ffffff 12%, #cfefff 66%, #79cce7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#overlay-title .title-node {
  position: relative;
  padding: 0.42em 0.46em 0.34em 0.56em;
  border: 1px solid rgba(111, 230, 255, 0.52);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(14, 54, 68, 0.78), rgba(11, 22, 39, 0.88));
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.1), 0 0 14px rgba(0, 229, 255, 0.12);
  color: rgba(188, 243, 255, 0.86);
  font-size: 0.34em;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0.16em;
  transform: translateY(-0.06em);
}

#overlay-title .title-node::before,
#overlay-title .title-node::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(5px, 1.2vmin, 10px);
  height: 1px;
  background: rgba(105, 229, 255, 0.58);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.42);
}

#overlay-title .title-node::before {
  right: 100%;
}

#overlay-title .title-node::after {
  left: 100%;
}

#overlay-score {
  font-size: 20vmin;
  font-weight: 100;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#overlay-score:empty {
  display: none;
}

#overlay-status {
  min-height: 1.3em;
  margin-top: 1vmin;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
  font-size: clamp(9px, 2.25vmin, 14px);
  font-weight: 640;
  letter-spacing: 0.16em;
  color: rgba(152, 224, 243, 0.68);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.14);
  text-transform: uppercase;
}

#overlay.menu #overlay-status::before,
#overlay.menu #overlay-status::after {
  content: "";
  display: inline-block;
  width: clamp(14px, 4vmin, 30px);
  height: 1px;
  margin: 0 clamp(6px, 1.8vmin, 13px) 0.28em;
  background: linear-gradient(90deg, transparent, rgba(81, 211, 239, 0.42));
}

#overlay.menu #overlay-status::after {
  background: linear-gradient(90deg, rgba(81, 211, 239, 0.42), transparent);
}

#overlay-status:empty {
  display: none;
}

#overlay-best {
  margin-top: 1.5vmin;
  font-size: 4vmin;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
  text-transform: lowercase;
}

#overlay-best:empty {
  display: none;
}

#overlay-best.new-best {
  color: var(--accent);
}

#menu-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2.2vmin;
}

.panel-launch {
  padding: 9px 11px;
  border: 1px solid rgba(128, 215, 239, 0.13);
  border-radius: 3px;
  background: rgba(4, 10, 18, 0.58);
  color: rgba(192, 228, 242, 0.55);
  font-size: 8px;
}

.panel-launch:active,
.panel-launch:focus-visible,
.system-tab:focus-visible,
.circuit-select:focus-visible,
.system-action:focus-visible {
  border-color: color-mix(in srgb, var(--circuit-glow) 58%, transparent);
  color: #f1fcff;
  outline: none;
}

#overlay-hint {
  margin-top: 7vmin;
  font-size: 4vmin;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  animation: pulse-hint 1.6s ease-in-out infinite;
}

#tutorial {
  z-index: 4;
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(82px, 15vmin, 126px));
  width: min(86vw, 390px);
  padding: 13px 16px 14px;
  transform: translate(-50%, 10px);
  border: 1px solid rgba(109, 231, 255, 0.52);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(5, 18, 29, 0.94), rgba(10, 8, 24, 0.94));
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.14), 0 14px 38px rgba(0, 0, 0, 0.46);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#tutorial.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

#tutorial strong,
#tutorial span {
  display: block;
}

#tutorial strong {
  color: #eafbff;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
  font-size: clamp(11px, 2.8vmin, 14px);
  letter-spacing: 0.16em;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.42);
}

#tutorial span {
  margin-top: 6px;
  color: rgba(204, 235, 246, 0.68);
  font-size: clamp(10px, 2.45vmin, 13px);
  line-height: 1.35;
}

#creator-credit {
  z-index: 3;
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 3vmin);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3vmin);
  display: flex;
  align-items: center;
  gap: 0.48em;
  max-width: calc(100vw - 6vmin);
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(6, 8, 16, 0.56);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(220, 235, 248, 0.36);
  font-size: clamp(7px, 1.65vmin, 9px);
  line-height: 1;
  letter-spacing: 0.13em;
  white-space: nowrap;
  touch-action: manipulation;
}

#creator-credit .credit-label {
  color: rgba(203, 222, 238, 0.27);
  font-weight: 650;
}

#creator-credit .credit-divider {
  color: rgba(255, 255, 255, 0.2);
}

#creator-credit a {
  color: rgba(222, 240, 252, 0.57);
  font-weight: 620;
  text-decoration: none;
  transition: color 0.16s ease, text-shadow 0.16s ease;
}

#creator-credit a:hover,
#creator-credit a:active {
  color: rgba(177, 246, 255, 0.94);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

/* On the title screen the physical coil is the hero. The copy frames it
   instead of sitting on top of the copper and hiding the mechanic demo. */
#overlay.menu {
  display: block;
}

#overlay.menu #overlay-inner {
  position: absolute;
  inset: 0;
  padding: 0 5vmin;
}

#overlay.menu #overlay-title,
#overlay.menu #overlay-status,
#overlay.menu #overlay-best,
#overlay.menu #overlay-hint {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0;
}

#overlay.menu #overlay-title {
  top: calc(50% - clamp(178px, 45vmin, 205px));
}

#overlay.menu #overlay-status {
  top: calc(50% - clamp(137px, 35vmin, 160px));
  white-space: nowrap;
}

#overlay.menu #overlay-hint {
  top: calc(50% + clamp(112px, 27vmin, 136px));
}

#overlay.menu #overlay-best {
  top: calc(50% + clamp(142px, 35vmin, 174px));
}

#overlay.menu #menu-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#overlay.menu #menu-actions {
  top: calc(50% + clamp(201px, 48vmin, 230px));
  width: min(94vw, 520px);
}

/* A failed run gets its own instrument readout. Nothing is allowed to float
   through the physical coil: score lives above it, career status below it. */
#overlay.result {
  display: block;
}

#overlay.result #overlay-inner {
  position: absolute;
  inset: 0;
  padding: 0;
}

#overlay.result #overlay-score,
#overlay.result #overlay-status,
#overlay.result #overlay-best,
#overlay.result #overlay-hint,
#overlay.result #menu-actions {
  position: absolute;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

#overlay.result #overlay-score {
  top: calc(env(safe-area-inset-top, 0px) + clamp(142px, 17vh, 220px));
  width: 100%;
  color: #f5fbff;
  font-size: clamp(68px, 18vmin, 150px);
  font-weight: 170;
  line-height: 0.9;
}

#overlay.result #overlay-status {
  top: calc(env(safe-area-inset-top, 0px) + clamp(225px, 27vh, 315px));
  width: min(78vw, 430px);
  padding: 8px 12px 7px;
  border-top: 1px solid rgba(111, 218, 239, 0.2);
  border-bottom: 1px solid rgba(111, 218, 239, 0.08);
  background: rgba(3, 8, 15, 0.78);
  color: rgba(164, 226, 239, 0.72);
  font-size: clamp(8px, 2.1vmin, 11px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#overlay.result #overlay-best {
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(212px, 25vh, 285px));
  width: min(82vw, 390px);
  color: rgba(222, 232, 238, 0.5);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: clamp(8px, 2.25vmin, 11px);
  font-weight: 620;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

#overlay.result #overlay-hint {
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(77px, 10vh, 100px));
  width: 100%;
  color: rgba(211, 231, 238, 0.5);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: clamp(9px, 2.6vmin, 13px);
  font-weight: 620;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#overlay.result #menu-actions {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: min(94vw, 520px);
}

#overlay.result .panel-launch {
  background: rgba(3, 9, 16, 0.9);
}

/* Full-screen instrument bay: a continuous etched board rather than a stack
   of generic cards. Gameplay remains visible as a dim physical backdrop. */
#system-panel {
  z-index: 8;
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 34px) max(20px, env(safe-area-inset-left, 0px));
  background:
    linear-gradient(rgba(6, 12, 19, 0.92), rgba(3, 7, 12, 0.97)),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(102, 213, 238, 0.025) 48px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  touch-action: pan-y;
}

#system-panel.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.system-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: min(100%, 760px);
  margin: 0 auto;
  padding-bottom: 17px;
  border-bottom: 1px solid color-mix(in srgb, var(--circuit-metal) 28%, transparent);
}

.system-kicker,
.panel-kicker {
  color: rgba(156, 215, 232, 0.4);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
}

#system-title {
  margin-top: 5px;
  color: #eefaff;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: clamp(22px, 6vw, 42px);
  font-weight: 560;
  letter-spacing: 0.1em;
}

#system-close {
  padding: 8px 0 8px 12px;
  color: rgba(202, 232, 242, 0.55);
  font-size: 9px;
}

#system-tabs {
  display: flex;
  gap: 18px;
  width: min(100%, 760px);
  margin: 16px auto 0;
  overflow-x: auto;
}

.system-tab {
  flex: 0 0 auto;
  padding: 7px 0 9px;
  border-bottom: 1px solid transparent;
  font-size: 9px;
}

.system-tab.active {
  border-color: var(--circuit-glow);
  color: #effcff;
}

#system-content {
  width: min(100%, 760px);
  margin: 28px auto 0;
}

.panel-intro {
  max-width: 590px;
  color: rgba(205, 230, 239, 0.58);
  font-size: 13px;
  line-height: 1.55;
}

.circuit-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 4px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--circuit-glow) 18%, transparent);
  background: color-mix(in srgb, var(--circuit-glow) 4%, rgba(3, 8, 13, 0.72));
  color: rgba(215, 237, 244, 0.52);
  font: 650 9px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.13em;
}

.circuit-rule strong {
  color: color-mix(in srgb, var(--circuit-glow) 58%, white);
  font-weight: 780;
}

.circuit-rule span { text-align: right; }

.power-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid rgba(131, 205, 224, 0.12);
}

.circuit-node {
  position: relative;
  min-height: 208px;
  padding: 29px 12px 18px;
  border-right: 1px solid rgba(131, 205, 224, 0.09);
}

.circuit-node:first-child { border-left: 1px solid rgba(131, 205, 224, 0.09); }

.circuit-node::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 12px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(175, 226, 239, 0.3);
  border-radius: 50%;
  background: #061019;
}

.circuit-node.unlocked::before,
.circuit-node.selected::before {
  background: var(--node-color, var(--circuit-glow));
  box-shadow: 0 0 12px var(--node-color, var(--circuit-glow));
}

.circuit-swatch {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--node-color, #7995a0) 55%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 25%, color-mix(in srgb, var(--node-color, #7995a0) 18%, transparent) 27% 31%, transparent 33% 46%, color-mix(in srgb, var(--node-color, #7995a0) 35%, transparent) 48% 52%, transparent 54%),
    #071019;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
  filter: grayscale(1) brightness(0.55);
}

.circuit-node.unlocked .circuit-swatch { filter: none; box-shadow: 0 0 15px color-mix(in srgb, var(--node-color) 22%, transparent); }
.circuit-node h3 { color: rgba(234, 247, 251, 0.82); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; }
.circuit-node p { min-height: 36px; margin-top: 8px; color: rgba(188, 215, 225, 0.4); font-size: 10px; line-height: 1.4; }

.circuit-select,
.system-action {
  margin-top: 15px;
  padding: 8px 9px;
  border: 1px solid rgba(138, 210, 228, 0.16);
  border-radius: 2px;
  font-size: 8px;
}

.circuit-node.selected .circuit-select {
  border-color: color-mix(in srgb, var(--node-color) 45%, transparent);
  color: #f1fbff;
}

.circuit-select:disabled { cursor: default; opacity: 0.42; }

#delete-profile.delete-confirm {
  border-color: rgba(255, 180, 72, 0.72);
  color: #ffe0a6;
  box-shadow: 0 0 18px rgba(255, 145, 45, 0.16), inset 0 0 14px rgba(255, 145, 45, 0.06);
}

#delete-profile.delete-running {
  border-color: rgba(92, 222, 245, 0.46);
  color: rgba(211, 249, 255, 0.72);
  cursor: wait;
}

#delete-profile.delete-error {
  border-color: rgba(255, 103, 81, 0.55);
  color: #ffc2b7;
}

#delete-profile.delete-success {
  border-color: rgba(100, 255, 187, 0.62);
  color: #caffdf;
  box-shadow: 0 0 18px rgba(70, 255, 170, 0.14);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
  border-top: 1px solid rgba(134, 211, 230, 0.14);
  border-left: 1px solid rgba(134, 211, 230, 0.09);
}

.profile-stat {
  min-height: 100px;
  padding: 17px;
  border-right: 1px solid rgba(134, 211, 230, 0.09);
  border-bottom: 1px solid rgba(134, 211, 230, 0.09);
}

.profile-stat span { display: block; color: rgba(165, 210, 225, 0.42); font-size: 8px; letter-spacing: 0.12em; }
.profile-stat strong { display: block; margin-top: 9px; color: #effaff; font-size: 25px; font-weight: 430; }

.badge-line { display: flex; gap: 11px; margin-top: 26px; }
.mastery-badge { flex: 1; padding: 14px; border: 1px solid rgba(133, 206, 225, 0.1); color: rgba(190, 216, 226, 0.28); font-size: 9px; letter-spacing: 0.1em; }
.mastery-badge.earned { border-color: color-mix(in srgb, var(--circuit-metal) 38%, transparent); color: color-mix(in srgb, var(--circuit-metal) 72%, white); }

.leaderboard-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 12px;
  color: rgba(178, 218, 231, 0.42);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.handle-link {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--circuit-glow) 58%, white);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.handle-link span { margin-left: 4px; color: rgba(176, 215, 226, 0.3); font-size: 7px; }
.table-handle { color: inherit; text-align: left; }

.handle-editor {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--circuit-glow) 20%, transparent);
  background: rgba(4, 10, 18, 0.72);
}

.handle-editor[hidden] { display: none; }
.handle-editor label { display: block; margin-bottom: 9px; color: rgba(179, 218, 231, 0.48); font: 700 8px ui-monospace, monospace; letter-spacing: 0.14em; }
.handle-editor div { display: flex; gap: 8px; }
.handle-editor input {
  min-width: 0;
  flex: 1;
  padding: 10px 11px;
  border: 1px solid rgba(132, 214, 235, 0.22);
  border-radius: 0;
  outline: none;
  background: rgba(2, 7, 13, 0.88);
  color: #f0fcff;
  font: 500 13px ui-monospace, monospace;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.handle-editor input:focus { border-color: color-mix(in srgb, var(--circuit-glow) 55%, transparent); box-shadow: 0 0 15px color-mix(in srgb, var(--circuit-glow) 12%, transparent); }
.handle-editor button { padding: 0 13px; border: 1px solid color-mix(in srgb, var(--circuit-glow) 35%, transparent); background: rgba(5, 14, 24, 0.9); color: #eafaff; font: 720 8px ui-monospace, monospace; letter-spacing: 0.11em; }
.handle-editor button:disabled { opacity: 0.35; }
.handle-editor p { margin-top: 8px; color: rgba(174, 210, 221, 0.35); font: 8px/1.45 ui-monospace, monospace; letter-spacing: 0.06em; }

.leaderboard-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.leaderboard-table th,
.leaderboard-table td { padding: 12px 9px; border-bottom: 1px solid rgba(133, 205, 224, 0.09); text-align: left; font-size: 11px; }
.leaderboard-table th { color: rgba(158, 207, 221, 0.35); font-size: 8px; letter-spacing: 0.12em; }
.leaderboard-table td:first-child { color: rgba(174, 216, 228, 0.4); }
.leaderboard-table td:last-child,
.leaderboard-table th:last-child { text-align: right; }
.leaderboard-table tr.is-me td { color: #effcff; background: color-mix(in srgb, var(--circuit-glow) 7%, transparent); }
.empty-state { padding: 42px 0; border-top: 1px solid rgba(133, 205, 224, 0.1); color: rgba(184, 218, 228, 0.45); font-size: 12px; line-height: 1.6; }

.studio-footer {
  display: grid;
  justify-items: center;
  margin-top: 42px;
  padding: 28px 14px 8px;
  border-top: 1px solid rgba(126, 191, 208, 0.1);
  color: rgba(185, 216, 226, 0.38);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  text-align: center;
}

.studio-footer > span {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.studio-footer > strong {
  margin-top: 7px;
  color: color-mix(in srgb, var(--circuit-metal) 68%, #f3fbff);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.16em;
}

.studio-footer > small {
  margin-top: 6px;
  color: rgba(185, 216, 226, 0.28);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.studio-footer nav {
  display: flex;
  gap: 22px;
  margin-top: 18px;
}

.studio-footer nav a {
  padding: 6px 0;
  color: color-mix(in srgb, var(--circuit-glow) 46%, #d7e9ef);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
}

.studio-footer .studio-credit-link {
  color: inherit;
  text-decoration: none;
}

.studio-footer .studio-credit-link:active,
.studio-footer nav a:active { color: #fff; }

#unlock-reveal {
  z-index: 10;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vmin;
  background: radial-gradient(circle, color-mix(in srgb, var(--circuit-glow) 15%, #07101a) 0, rgba(3, 7, 12, 0.98) 58%);
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transition: opacity 0.3s ease, visibility 0.3s;
}

#unlock-reveal.visible { opacity: 1; visibility: visible; }
#reveal-kicker { color: color-mix(in srgb, var(--circuit-glow) 68%, white); font: 750 10px ui-monospace, monospace; letter-spacing: 0.2em; }
#reveal-symbol { width: min(46vw, 190px); aspect-ratio: 1; margin: 32px 0; border: 1px solid color-mix(in srgb, var(--circuit-metal) 48%, transparent); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 13%, color-mix(in srgb, var(--circuit-metal) 30%, transparent) 14% 16%, transparent 17% 25%); box-shadow: 0 0 60px color-mix(in srgb, var(--circuit-glow) 22%, transparent); }
#reveal-name { color: #f4fcff; font: 520 clamp(25px, 8vw, 54px) ui-monospace, monospace; letter-spacing: 0.09em; }
#reveal-copy { max-width: 450px; margin-top: 13px; color: rgba(203, 229, 238, 0.55); font-size: 13px; line-height: 1.5; }
#reveal-continue { margin-top: 34px; padding: 12px 15px; border: 1px solid color-mix(in srgb, var(--circuit-glow) 40%, transparent); color: #edfbff; font-size: 9px; }

@media (max-width: 620px) {
  .power-line { grid-template-columns: repeat(2, 1fr); }
  .circuit-node:nth-child(3) { border-left: 1px solid rgba(131, 205, 224, 0.09); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .badge-line { flex-direction: column; }
}

@media (max-height: 670px) {
  #creator-credit { display: none; }
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@keyframes best-pop {
  0% { transform: scale(0.76); filter: brightness(1.8); }
  55% { transform: scale(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes coil-count-pop {
  0% { transform: scale(0.72); filter: brightness(2.2); }
  35% { transform: scale(1.48); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 440px) {
  #best-hud {
    gap: 9px;
    padding-inline: 11px;
  }

  .stat-block {
    grid-template-columns: 14px auto auto;
    gap: 5px;
  }

  .stat-icon {
    width: 14px;
    height: 14px;
  }

  .stat-block span {
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  #creator-credit {
    gap: 0.4em;
    padding: 8px 9px;
    letter-spacing: 0.09em;
  }

  #overlay.menu #overlay-status {
    font-size: 8px;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #overlay,
  #overlay-hint,
  #tutorial,
  #best-hud.new-best #best-hud-value,
  #best-hud.coil-filled #coils-hud-value {
    transition: none;
    animation: none;
  }
}

/* Career Circuit v3 ------------------------------------------------------ */
:root {
  --void: #03070b;
  --board: #07131b;
  --trace: #17313b;
  --frost: #eaf8fc;
  --muted: #76909a;
}

#best-hud {
  display: grid;
  grid-template-columns: minmax(108px, 1fr) 1px minmax(108px, 1fr);
  gap: 10px;
  width: min(74vw, 306px);
  padding: 8px 11px;
  border-radius: 12px;
}

.stat-block {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stat-icon-box {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: inherit;
}

.stat-icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.stat-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.stat-copy small {
  overflow: hidden;
  color: rgba(199, 235, 255, 0.58);
  font-size: 7.5px;
  font-weight: 720;
  letter-spacing: 0.1em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-copy strong {
  color: rgba(241, 250, 255, 0.98);
  font-size: 18px;
  font-weight: 540;
  line-height: 1;
}

.coil-icon circle {
  fill: none;
  stroke: currentColor;
}

.coil-icon circle:nth-child(3) {
  fill: currentColor;
  stroke: none;
}

#career-bus {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  width: min(84vw, 370px);
  padding: 10px 13px 9px;
  border-top: 1px solid color-mix(in srgb, var(--circuit-metal) 48%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--circuit-metal) 16%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--circuit-metal) 7%, transparent), transparent);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  text-align: left;
}

.career-bus-label {
  color: color-mix(in srgb, var(--circuit-metal) 78%, white);
  font-size: 8px;
  font-weight: 780;
  letter-spacing: 0.17em;
}

#career-coils-value {
  margin-left: 7px;
  color: var(--frost);
  font-size: 21px;
  font-weight: 560;
  line-height: 1;
}

#career-rank {
  justify-self: end;
  color: color-mix(in srgb, var(--circuit-glow) 58%, var(--frost));
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.1em;
}

#career-next,
#career-sync {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: rgba(205, 226, 237, 0.4);
  font-size: 7.5px;
  letter-spacing: 0.11em;
}

#career-sync {
  justify-self: end;
  grid-row: 2;
  color: color-mix(in srgb, var(--circuit-glow) 52%, rgba(205, 226, 237, 0.4));
}

#overlay.menu #career-bus,
#overlay.menu #menu-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#overlay.menu #career-bus { top: calc(50% + clamp(142px, 34vmin, 166px)); }
#overlay.menu #menu-actions {
  top: calc(50% + clamp(220px, 52vmin, 250px));
  width: min(94vw, 520px);
}

#overlay.menu #overlay-best { display: none; }
#overlay.menu #overlay-hint { top: calc(50% + clamp(105px, 25vmin, 126px)); }

#overlay.result #career-bus {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(116px, 15vh, 158px));
  width: min(84vw, 390px);
  margin: 0;
  transform: translateX(-50%);
  background: rgba(3, 8, 14, 0.9);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.circuit-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--circuit-metal) 18%, transparent);
}

.career-name {
  color: var(--frost);
  font: 560 clamp(18px, 5vw, 30px) -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: 0.015em;
}

.career-rank-block { text-align: right; }
.career-rank-block span,
.career-coils-label {
  display: block;
  color: rgba(166, 204, 217, 0.44);
  font: 730 8px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.14em;
}
.career-rank-block strong {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--circuit-glow) 58%, var(--frost));
  font: 680 clamp(12px, 3.4vw, 17px) ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.08em;
}

.career-meter { margin: 24px 0 0; }
.career-meter-copy {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(178, 214, 226, 0.46);
  font: 700 8px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.12em;
}
.career-meter-copy strong { color: var(--frost); font-size: 12px; }
.career-meter-track {
  height: 2px;
  margin-top: 11px;
  background: rgba(119, 176, 192, 0.11);
}
.career-meter-fill {
  display: block;
  width: var(--career-fill, 0%);
  height: 100%;
  background: var(--circuit-glow);
  box-shadow: 0 0 13px color-mix(in srgb, var(--circuit-glow) 58%, transparent);
}

.career-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0 34px;
  border-block: 1px solid rgba(126, 190, 207, 0.09);
}
.career-stat { padding: 14px 12px; border-right: 1px solid rgba(126, 190, 207, 0.08); }
.career-stat:last-child { border-right: 0; }
.career-stat span {
  display: block;
  color: rgba(165, 204, 217, 0.42);
  font: 700 7px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.1em;
}
.career-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--frost);
  font: 460 clamp(17px, 4.6vw, 25px) -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.circuit-rail {
  position: relative;
  margin-left: 8px;
  padding-left: 28px;
}
.circuit-rail::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 18px;
  left: 5px;
  width: 1px;
  background: linear-gradient(var(--circuit-glow), rgba(114, 169, 185, 0.12) 65%);
}
.circuit-step {
  --node-color: var(--circuit-glow);
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(124, 188, 205, 0.08);
}
.circuit-step::before {
  content: "";
  position: absolute;
  left: -28px;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(151, 199, 211, 0.27);
  border-radius: 50%;
  background: var(--void);
}
.circuit-step.unlocked::before {
  border-color: var(--node-color);
  background: var(--node-color);
  box-shadow: 0 0 13px var(--node-color);
}
.circuit-preview {
  position: relative;
  width: 64px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--node-color) 34%, transparent);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 12%, color-mix(in srgb, var(--node-color) 24%, transparent) 13% 16%, transparent 17% 27%),
    radial-gradient(circle, color-mix(in srgb, var(--node-color) 12%, #071019), #03070b 70%);
  filter: grayscale(1) brightness(0.48);
}
.circuit-step.unlocked .circuit-preview {
  filter: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.75), 0 0 18px color-mix(in srgb, var(--node-color) 14%, transparent);
}
.circuit-copy h3 {
  color: rgba(235, 248, 252, 0.9);
  font: 660 12px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.08em;
}
.circuit-copy p {
  margin-top: 6px;
  color: rgba(174, 207, 217, 0.42);
  font-size: 10px;
}
.circuit-step .circuit-select { margin: 0; white-space: nowrap; }
.circuit-step.locked .circuit-copy h3 { color: rgba(197, 221, 228, 0.35); }

.leaderboard-list { border-top: 1px solid rgba(126, 191, 208, 0.12); }
.leaderboard-head,
.leaderboard-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.leaderboard-head {
  padding: 10px 8px;
  color: rgba(159, 202, 214, 0.36);
  font: 720 7px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.12em;
}
.leaderboard-row {
  --entry-rank-metal: #f49647;
  --entry-rank-glow: #00e5ff;
  position: relative;
  min-height: 62px;
  padding: 10px 8px;
  border-top: 1px solid rgba(126, 191, 208, 0.07);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--entry-rank-metal) 8%, transparent), transparent 36%);
  box-shadow: inset 1px 0 color-mix(in srgb, var(--entry-rank-metal) 30%, transparent);
}
.leaderboard-row.is-me {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--entry-rank-metal) 15%, transparent), color-mix(in srgb, var(--entry-rank-glow) 5%, transparent) 58%, transparent);
  box-shadow:
    inset 2px 0 color-mix(in srgb, var(--entry-rank-metal) 68%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--entry-rank-glow) 5%, transparent);
}
.leaderboard-position {
  color: rgba(172, 210, 220, 0.45);
  font: 620 11px ui-monospace, "SFMono-Regular", monospace;
}
.leaderboard-identity strong,
.leaderboard-identity span,
.leaderboard-totals strong,
.leaderboard-totals span { display: block; }
.leaderboard-identity strong { color: var(--frost); font-size: 12px; font-weight: 570; }
.leaderboard-identity span,
.leaderboard-totals span {
  margin-top: 4px;
  color: rgba(166, 204, 216, 0.42);
  font: 700 7px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.09em;
}
.leaderboard-identity .leaderboard-career-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--entry-rank-metal);
  font-size: 8px;
  letter-spacing: 0.13em;
  background: linear-gradient(
    105deg,
    var(--entry-rank-metal) 0%,
    color-mix(in srgb, var(--entry-rank-metal) 52%, #fff) 34%,
    var(--entry-rank-glow) 50%,
    color-mix(in srgb, var(--entry-rank-metal) 68%, #fff) 66%,
    var(--entry-rank-metal) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 7px color-mix(in srgb, var(--entry-rank-glow) 42%, transparent),
    0 0 15px color-mix(in srgb, var(--entry-rank-metal) 20%, transparent);
  filter: saturate(1.18) brightness(1.08);
}
.leaderboard-career-rank::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--entry-rank-metal) 78%, #fff);
  background: var(--entry-rank-glow);
  box-shadow:
    0 0 5px var(--entry-rank-glow),
    0 0 9px color-mix(in srgb, var(--entry-rank-metal) 60%, transparent);
  transform: rotate(45deg);
}
.leaderboard-row.is-me .leaderboard-career-rank,
.leaderboard-row.global-podium .leaderboard-career-rank {
  animation: leaderboard-rank-sheen 4.8s ease-in-out infinite;
}
.leaderboard-row.global-top-ten .leaderboard-career-rank { filter: saturate(1.28) brightness(1.16); }
.leaderboard-totals { text-align: right; font-variant-numeric: tabular-nums; }
.leaderboard-totals strong { color: var(--frost); font: 570 13px ui-monospace, "SFMono-Regular", monospace; }

.network-note {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0 12px;
  color: rgba(171, 208, 220, 0.42);
  font: 700 8px ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.09em;
}

@media (max-width: 560px) {
  .career-stats { grid-template-columns: repeat(2, 1fr); }
  .career-stat:nth-child(2) { border-right: 0; }
  .career-stat:nth-child(-n + 2) { border-bottom: 1px solid rgba(126, 190, 207, 0.08); }
  .circuit-step { grid-template-columns: 54px minmax(0, 1fr); gap: 13px; }
  .circuit-preview { width: 52px; }
  .circuit-step .circuit-select { grid-column: 2; justify-self: start; }
  .circuit-overview { grid-template-columns: 1fr; gap: 8px; }
  .career-rank-block { text-align: left; }
}

@media (max-width: 390px) {
  #best-hud { width: min(76vw, 282px); gap: 7px; padding-inline: 9px; }
  .stat-block { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
  .stat-icon-box { width: 18px; height: 18px; }
  .stat-icon { width: 17px; height: 17px; }
  .stat-copy small { font-size: 6.8px; }
  .stat-copy strong { font-size: 16px; }
}

@media (max-height: 670px) {
  #overlay.menu #career-bus { top: calc(50% + 121px); }
  #overlay.menu #menu-actions { top: calc(50% + 201px); }
}

/* Energized instrument polish v30 -------------------------------------- */
.stat-icon { color: #73eaff; stroke: currentColor; }

.stat-icon-box {
  position: relative;
  border: 1px solid rgba(120, 224, 255, 0.15);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 170, 211, 0.12), rgba(4, 13, 19, 0.08) 68%);
}

.stat-icon-box::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: radial-gradient(circle, currentColor, transparent 68%);
  opacity: 0.08;
  filter: blur(4px);
}

.best-stat .stat-icon-box { color: #62eaff; border-color: rgba(79, 221, 255, 0.24); }
.best-icon path:first-child { color: #5de9ff; }
.best-icon path:nth-child(2) { color: #277d9b; }
.best-icon circle { fill: #ffe56b; stroke: none; filter: drop-shadow(0 0 3px #ffd65a); }
.best-stat .stat-copy strong { color: #dffaff; text-shadow: 0 0 12px rgba(77, 226, 255, 0.28); }

.coil-stat .stat-icon-box {
  color: #ff9b42;
  border-color: rgba(255, 158, 67, 0.26);
  background: radial-gradient(circle, rgba(255, 172, 73, 0.13), rgba(4, 13, 19, 0.08) 68%);
}
.coil-icon circle:nth-child(1) { fill: none; stroke: #ff9744; }
.coil-icon circle:nth-child(2) { fill: none; stroke: #ffd06b; }
.coil-icon circle:nth-child(3) { fill: #6cf1ff; stroke: none; filter: drop-shadow(0 0 4px #40e7ff); }
.coil-icon path { color: #ffb252; }
.coil-stat .stat-copy strong { color: #ffe0a5; text-shadow: 0 0 12px rgba(255, 156, 61, 0.3); }
.stat-divider { background: linear-gradient(transparent, rgba(83, 230, 255, 0.35) 36%, rgba(255, 169, 77, 0.32) 64%, transparent); }

#global-rank {
  --rank-career-accent: #f49647;
  --rank-career-hot: #00e5ff;
  --rank-prestige-accent: var(--rank-career-accent);
  --rank-prestige-hot: var(--rank-career-hot);
  --rank-accent: color-mix(in srgb, var(--rank-career-accent) 68%, var(--rank-prestige-accent));
  --rank-hot: color-mix(in srgb, var(--rank-career-hot) 68%, var(--rank-prestige-hot));
  top: calc(env(safe-area-inset-top, 0px) + 3vmin + 54px);
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 4px 10px 4px 6px;
  border-color: color-mix(in srgb, var(--rank-accent) 20%, transparent);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--rank-accent) 10%, rgba(4, 10, 16, 0.72)), rgba(4, 10, 16, 0.58)),
    rgba(4, 10, 16, 0.7);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--rank-accent) 4%, transparent);
  color: color-mix(in srgb, var(--rank-hot) 58%, rgba(177, 216, 229, 0.35));
  transition: border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.global-rank-sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--rank-accent);
}

.global-rank-sigil::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rank-accent), transparent 68%);
  opacity: 0.12;
  filter: blur(3px);
}

.global-rank-sigil svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.15; }
.global-rank-sigil .rank-spark { fill: var(--rank-hot); stroke: none; transform-origin: center; }
.global-rank-copy { display: grid; gap: 1px; }
.global-rank-copy > span { font-size: 6px; letter-spacing: 0.18em; }
#global-rank strong { color: color-mix(in srgb, var(--rank-hot) 76%, #e8fbff); font-size: 10px; line-height: 1; }

#global-rank.global-tier-open { --rank-prestige-accent: var(--rank-career-accent); --rank-prestige-hot: var(--rank-career-hot); }
#global-rank.global-tier-top-100 { --rank-prestige-accent: #a7c9ce; --rank-prestige-hot: #f0fbfc; }
#global-rank.global-tier-top-50 { --rank-prestige-accent: #68d7dc; --rank-prestige-hot: #dfffff; }
#global-rank.global-tier-top-30 { --rank-prestige-accent: #78d9ad; --rank-prestige-hot: #ddfbe9; }
#global-rank.global-tier-top-10 { --rank-prestige-accent: #d7b45c; --rank-prestige-hot: #fff0b7; }
#global-rank.global-tier-top-3 { --rank-prestige-accent: #e7d59c; --rank-prestige-hot: #fff9df; }
#global-rank.global-tier-number-one { --rank-prestige-accent: #f2d477; --rank-prestige-hot: #fffbe8; }

#global-rank.ranked {
  border-color: color-mix(in srgb, var(--rank-accent) 48%, transparent);
  box-shadow:
    inset 0 0 16px color-mix(in srgb, var(--rank-accent) 9%, transparent),
    0 0 18px color-mix(in srgb, var(--rank-accent) 10%, transparent);
}

#global-rank.global-tier-top-10.ranked,
#global-rank.global-tier-top-3.ranked,
#global-rank.global-tier-number-one.ranked {
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--rank-accent) 13%, transparent),
    0 0 24px color-mix(in srgb, var(--rank-accent) 18%, transparent);
}

#global-rank.global-tier-number-one.ranked {
  background:
    linear-gradient(110deg, rgba(242, 212, 119, 0.16), rgba(15, 25, 30, 0.88) 47%, rgba(255, 251, 232, 0.1)),
    rgba(4, 10, 16, 0.82);
  border-color: rgba(242, 212, 119, 0.72);
  box-shadow:
    inset 0 0 18px rgba(242, 212, 119, 0.13),
    0 0 0 1px rgba(255, 251, 232, 0.08),
    0 0 26px rgba(242, 212, 119, 0.2);
}

#global-rank.ranked .rank-spark { animation: rank-spark 2.4s ease-in-out infinite; }
#global-rank.offline { filter: saturate(0.35); opacity: 0.72; }

#overlay.result.podium #overlay-score {
  color: #fff4b0;
  text-shadow: 0 0 18px rgba(255, 214, 90, 0.7), 0 0 54px rgba(84, 232, 255, 0.24) !important;
}

#overlay.result.podium #overlay-status {
  border-color: rgba(255, 214, 90, 0.48);
  background: linear-gradient(90deg, rgba(255, 214, 90, 0.03), rgba(255, 214, 90, 0.12), rgba(84, 232, 255, 0.07));
  color: #fff4b0;
  font-size: clamp(13px, 3.5vmin, 20px);
  font-weight: 820;
  letter-spacing: 0.23em;
  text-shadow: 0 0 14px rgba(255, 214, 90, 0.56);
  animation: podium-arrive 0.72s cubic-bezier(0.14, 1.35, 0.3, 1), podium-live 2.2s ease-in-out 0.72s infinite;
}

#overlay.result.podium #overlay-best { color: rgba(215, 249, 255, 0.82); text-shadow: 0 0 12px rgba(84, 232, 255, 0.25); }

#overlay.result.world-number-one #overlay-score {
  color: #fff8d9 !important;
  text-shadow: 0 0 18px rgba(242, 212, 119, 0.76), 0 0 58px rgba(104, 215, 220, 0.28) !important;
}

#overlay.result.world-number-one #overlay-status {
  border-color: rgba(242, 212, 119, 0.62);
  background: linear-gradient(90deg, rgba(242, 212, 119, 0.05), rgba(255, 251, 232, 0.14), rgba(104, 215, 220, 0.08));
  color: #fffbe8;
  font-size: clamp(11px, 3.2vmin, 18px);
  text-shadow: 0 0 12px rgba(242, 212, 119, 0.8), 0 0 22px rgba(104, 215, 220, 0.32);
  animation: podium-arrive 0.72s cubic-bezier(0.14, 1.35, 0.3, 1), number-one-live 1.8s ease-in-out 0.72s infinite;
}

#overlay.result.world-number-one #overlay-best { color: #fff1b1; text-shadow: 0 0 14px rgba(255, 214, 90, 0.34); }

.circuit-preview {
  --preview-metal: var(--node-metal, var(--circuit-metal));
  --preview-glow: var(--node-color, var(--circuit-glow));
  --preview-board: #07131b;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--node-color) 15%, transparent), transparent 48%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--node-color) 7%, transparent) 0 2deg, transparent 2deg 24deg),
    #030a0f;
  transition: transform 0.28s ease, filter 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.circuit-preview::before,
.circuit-preview::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.circuit-preview::before { inset: 5px; border: 1px solid color-mix(in srgb, var(--node-color) 18%, transparent); }
.circuit-preview::after { inset: 11px; border: 1px dashed color-mix(in srgb, var(--node-color) 15%, transparent); }

.circuit-coil-preview,
.reveal-coil-preview {
  width: 94%;
  height: 94%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coil-board-disc {
  fill: var(--preview-board);
  stroke: color-mix(in srgb, var(--preview-metal) 34%, #172832);
  stroke-width: 2.8;
}
.coil-board-ring,
.coil-board-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--preview-glow) 15%, transparent);
  stroke-width: 0.65;
}
.coil-board-ring-inner { opacity: 0.58; stroke-dasharray: 2 3; }
.coil-board-axis { opacity: 0.42; }
.coil-style-etch {
  fill: none;
  stroke: var(--preview-glow);
  stroke-width: 1.2;
  opacity: 0.13;
}
.coil-style-etch .glyph-core { fill: var(--preview-glow); stroke: none; }
.coil-style-etch .glyph-fill { fill: var(--preview-glow); fill-opacity: 0.18; }
.coil-metal-stop { stop-color: var(--preview-metal); }
.coil-metal-stop-dark { stop-color: color-mix(in srgb, var(--preview-metal) 48%, #020508); }
.coil-metal-stop-hot { stop-color: color-mix(in srgb, var(--preview-metal) 46%, white); }
.coil-trench,
.coil-metal,
.coil-highlight,
.coil-live { fill: none; }
.coil-trench { stroke: rgba(0, 0, 0, 0.88); stroke-width: 6.6; }
.coil-metal { stroke-width: 4.15; filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--preview-metal) 36%, transparent)); }
.coil-highlight { stroke: rgba(255, 255, 255, 0.27); stroke-width: 0.72; }
.coil-live {
  stroke: var(--preview-glow);
  stroke-width: 2.15;
  stroke-dasharray: 8 2;
  filter: drop-shadow(0 0 3px var(--preview-glow));
}
.coil-charge-core {
  fill: color-mix(in srgb, var(--preview-glow) 76%, white);
  stroke: color-mix(in srgb, var(--preview-metal) 64%, white);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 4px var(--preview-glow));
}
.coil-charge-head {
  fill: #f7ffff;
  stroke: var(--preview-glow);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 4px var(--preview-glow));
}
.coil-contact-bed { fill: #03070b; stroke: var(--preview-metal); stroke-width: 1.4; }
.coil-contact-metal { fill: var(--preview-metal); stroke: none; }
.coil-contact-gap { fill: #f4ffff; stroke: none; filter: drop-shadow(0 0 2px var(--preview-glow)); }

.circuit-preview[data-pattern="cryo"] { --preview-board: #0a202b; background-color: #06151c; }
.circuit-preview[data-pattern="plasma"] { --preview-board: #1a0c24; background-color: #10081a; }
.circuit-preview[data-pattern="reactor"] { --preview-board: #211706; background-color: #161006; }
.circuit-preview[data-pattern="carbon"] { --preview-board: #11161c; background-color: #0d1115; }
.circuit-preview[data-pattern="grid"] { --preview-board: #071d16; background-color: #05150e; }
.circuit-preview[data-pattern="titanium"] { --preview-board: #10172b; background-color: #090e1a; }
.circuit-preview[data-pattern="solar"] { --preview-board: #260e12; background-color: #17080b; }
.circuit-preview[data-pattern="blackice"] { --preview-board: #081426; background-color: #070d18; }
.circuit-preview[data-pattern="aurora"] { --preview-board: #10202a; background: radial-gradient(circle, rgba(104, 255, 218, 0.13), transparent 52%), linear-gradient(135deg, #13091c, #061821); }

.circuit-step.selected {
  margin-inline: -10px;
  padding-inline: 10px;
  border-bottom-color: color-mix(in srgb, var(--node-color) 22%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--node-color) 9%, transparent), transparent 72%);
}
.circuit-step.selected .circuit-preview {
  transform: scale(1.055);
  border-color: color-mix(in srgb, var(--node-color) 76%, white 8%);
  box-shadow:
    inset 0 0 21px rgba(0, 0, 0, 0.72),
    0 0 11px color-mix(in srgb, var(--node-color) 36%, transparent),
    0 0 30px color-mix(in srgb, var(--node-color) 16%, transparent);
}
.circuit-step.selected .circuit-copy h3 { color: #f4fdff; text-shadow: 0 0 11px color-mix(in srgb, var(--node-color) 30%, transparent); }

.circuit-step .circuit-select {
  position: relative;
  min-width: 62px;
  border-color: rgba(138, 210, 228, 0.17);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.circuit-step .circuit-select[aria-pressed="true"] {
  padding-left: 19px;
  border-color: color-mix(in srgb, var(--node-color) 68%, transparent);
  background: color-mix(in srgb, var(--node-color) 8%, transparent);
  color: color-mix(in srgb, var(--node-color) 62%, white);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--node-color) 8%, transparent), 0 0 15px color-mix(in srgb, var(--node-color) 17%, transparent);
}
.circuit-step .circuit-select[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--node-color);
  box-shadow: 0 0 8px var(--node-color);
  transform: translateY(-50%);
  animation: route-live 1.6s ease-in-out infinite;
}
.circuit-select.route-confirmed { animation: route-confirm 0.55s cubic-bezier(0.2, 1.5, 0.4, 1); }

#unlock-reveal {
  --reveal-metal: var(--circuit-metal);
  --reveal-glow: var(--circuit-glow);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reveal-glow) 17%, transparent), transparent 34%),
    radial-gradient(circle, color-mix(in srgb, var(--reveal-glow) 8%, #07101a) 0, rgba(3, 7, 12, 0.985) 62%);
}

#unlock-reveal::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: -35%;
  background: repeating-conic-gradient(from 0deg, transparent 0 13deg, color-mix(in srgb, var(--reveal-glow) 6%, transparent) 13deg 14deg, transparent 14deg 30deg);
  opacity: 0;
}
#unlock-reveal.reveal-live::before { animation: reveal-field 10s linear infinite, reveal-field-in 0.7s ease-out forwards; }
#unlock-reveal > * { position: relative; z-index: 1; }

#reveal-kicker {
  color: color-mix(in srgb, var(--reveal-glow) 72%, white);
  text-shadow: 0 0 14px color-mix(in srgb, var(--reveal-glow) 34%, transparent);
}

#reveal-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: min(58vw, 235px);
  aspect-ratio: 1;
  margin: clamp(23px, 4.3vh, 36px) 0 clamp(22px, 3.6vh, 32px);
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.reveal-seal {
  z-index: 2;
  position: relative;
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--reveal-metal) 72%, white 8%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--reveal-glow) 19%, transparent), transparent 48%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--reveal-metal) 12%, transparent) 0 2deg, transparent 2deg 20deg),
    #061016;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.76),
    inset 0 0 8px color-mix(in srgb, var(--reveal-glow) 15%, transparent),
    0 0 0 7px rgba(3, 8, 12, 0.86),
    0 0 0 8px color-mix(in srgb, var(--reveal-glow) 24%, transparent),
    0 0 42px color-mix(in srgb, var(--reveal-glow) 30%, transparent);
  opacity: 0;
  transform: scale(0.58) rotate(-18deg);
}

.reveal-seal::before,
.reveal-seal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.reveal-seal::before { inset: 8px; border: 1px dashed color-mix(in srgb, var(--reveal-glow) 28%, transparent); }
.reveal-seal::after { inset: 19px; border: 1px solid color-mix(in srgb, var(--reveal-metal) 18%, transparent); }

.reveal-coil-preview {
  z-index: 1;
  position: relative;
  width: 94%;
  height: 94%;
  --preview-metal: var(--reveal-metal);
  --preview-glow: var(--reveal-glow);
  --preview-board: color-mix(in srgb, var(--reveal-glow) 8%, #061016);
  opacity: 0;
  transform: scale(0.72);
}

.reveal-orbit {
  z-index: 1;
  position: absolute;
  inset: 4%;
  border: 1px solid color-mix(in srgb, var(--reveal-glow) 30%, transparent);
  border-radius: 50%;
  opacity: 0;
}
.reveal-orbit::before,
.reveal-orbit::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--reveal-glow);
  box-shadow: 0 0 12px var(--reveal-glow);
}
.reveal-orbit::before { top: 14%; left: 12%; }
.reveal-orbit::after { right: 8%; bottom: 19%; }
.reveal-orbit-two { inset: 12%; border-style: dashed; transform: rotate(35deg); }

.reveal-particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.reveal-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--particle-size);
  height: calc(var(--particle-size) * 2.8);
  border-radius: 999px;
  background: color-mix(in srgb, var(--reveal-glow) 72%, white);
  box-shadow: 0 0 8px var(--reveal-glow);
  opacity: 0;
}

#unlock-reveal.reveal-live .reveal-seal { animation: reveal-seal 1.05s cubic-bezier(0.14, 1.3, 0.28, 1) 0.08s forwards; }
#unlock-reveal.reveal-live .reveal-coil-preview { animation: reveal-glyph 0.72s cubic-bezier(0.2, 1.35, 0.36, 1) 0.48s forwards; }
#unlock-reveal.reveal-live .reveal-coil-preview .coil-live { animation: coil-current 0.95s linear 1.05s infinite; }
#unlock-reveal.reveal-live .reveal-coil-preview .coil-charge-head { animation: coil-head-live 1.25s ease-in-out 1.05s infinite; }
#unlock-reveal.reveal-live .reveal-orbit-one { animation: reveal-orbit 4.8s linear 0.25s infinite, reveal-orbit-in 0.7s ease-out 0.25s forwards; }
#unlock-reveal.reveal-live .reveal-orbit-two { animation: reveal-orbit-reverse 6.2s linear 0.25s infinite, reveal-orbit-in 0.7s ease-out 0.25s forwards; }
#unlock-reveal.reveal-live .reveal-particle { animation: reveal-particle 0.92s cubic-bezier(0.12, 0.72, 0.2, 1) calc(0.31s + var(--particle-delay)) forwards; }
#unlock-reveal.reveal-live #reveal-kicker { animation: reveal-copy-in 0.55s ease-out both; }
#unlock-reveal.reveal-live #reveal-name { animation: reveal-copy-in 0.6s ease-out 0.65s both; }
#unlock-reveal.reveal-live #reveal-copy { animation: reveal-copy-in 0.6s ease-out 0.78s both; }
#unlock-reveal.reveal-live #reveal-continue { animation: reveal-copy-in 0.6s ease-out 0.92s both, route-live-button 2.2s ease-in-out 1.5s infinite; }

#reveal-name {
  color: #f4fcff;
  text-shadow: 0 0 22px color-mix(in srgb, var(--reveal-glow) 22%, transparent);
}
#reveal-copy { max-width: 390px; color: rgba(203, 229, 238, 0.62); }
#reveal-continue {
  border-color: color-mix(in srgb, var(--reveal-glow) 58%, transparent);
  background: color-mix(in srgb, var(--reveal-glow) 6%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--reveal-glow) 10%, transparent);
}

@keyframes rank-spark {
  0%, 100% { transform: scale(0.72) rotate(0); opacity: 0.62; }
  46% { transform: scale(1.18) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 5px var(--rank-accent)); }
}
@keyframes podium-arrive { 0% { opacity: 0; transform: translateX(-50%) scale(0.65); filter: brightness(2.2); } 70% { transform: translateX(-50%) scale(1.1); } 100% { opacity: 1; transform: translateX(-50%) scale(1); filter: brightness(1); } }
@keyframes podium-live { 0%, 100% { box-shadow: 0 0 12px rgba(255, 214, 90, 0.06); } 50% { box-shadow: 0 0 25px rgba(255, 214, 90, 0.2); } }
@keyframes number-one-live { 0%, 100% { box-shadow: -10px 0 24px rgba(242, 212, 119, 0.1), 10px 0 24px rgba(104, 215, 220, 0.08); } 50% { box-shadow: -15px 0 30px rgba(242, 212, 119, 0.24), 15px 0 30px rgba(104, 215, 220, 0.2); } }
@keyframes route-live { 0%, 100% { opacity: 0.58; transform: translateY(-50%) scale(0.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.18); } }
@keyframes route-confirm { 0% { transform: scale(0.88); filter: brightness(1.8); } 58% { transform: scale(1.1); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes route-live-button { 0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--reveal-glow) 9%, transparent); } 50% { box-shadow: 0 0 27px color-mix(in srgb, var(--reveal-glow) 25%, transparent); } }
@keyframes reveal-field { to { transform: rotate(360deg); } }
@keyframes reveal-field-in { to { opacity: 1; } }
@keyframes reveal-seal { 0% { opacity: 0; transform: scale(0.58) rotate(-18deg); filter: brightness(2.3); } 68% { opacity: 1; transform: scale(1.07) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); } }
@keyframes reveal-glyph { 0% { opacity: 0; transform: scale(0.72); filter: brightness(3); } 65% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes coil-current { to { stroke-dashoffset: -20; } }
@keyframes coil-head-live { 0%, 100% { opacity: 0.72; transform: scale(0.82); transform-origin: center; } 50% { opacity: 1; transform: scale(1.3); transform-origin: center; } }
@keyframes reveal-orbit { to { transform: rotate(360deg); } }
@keyframes reveal-orbit-reverse { from { transform: rotate(35deg); } to { transform: rotate(-325deg); } }
@keyframes reveal-orbit-in { to { opacity: 0.62; } }
@keyframes reveal-particle {
  0% { opacity: 0; transform: rotate(var(--particle-angle)) translateY(-42px) scaleY(0.2); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--particle-angle)) translateY(var(--particle-travel)) scaleY(1); }
}
@keyframes reveal-copy-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes leaderboard-rank-sheen {
  0%, 72%, 100% { background-position: 100% 50%; }
  84% { background-position: 0% 50%; }
}

@media (max-height: 720px) {
  #reveal-symbol { width: min(45vw, 182px); margin-block: 19px; }
  #reveal-name { font-size: clamp(23px, 7vw, 38px); }
  #reveal-copy { margin-top: 9px; }
  #reveal-continue { margin-top: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  #global-rank.ranked .rank-spark,
  .leaderboard-career-rank,
  #overlay.result.podium #overlay-status,
  .circuit-step .circuit-select[aria-pressed="true"]::before,
  .circuit-select.route-confirmed,
  #unlock-reveal.reveal-live::before,
  #unlock-reveal.reveal-live .reveal-seal,
  #unlock-reveal.reveal-live .reveal-coil-preview,
  #unlock-reveal.reveal-live .reveal-coil-preview .coil-live,
  #unlock-reveal.reveal-live .reveal-coil-preview .coil-charge-head,
  #unlock-reveal.reveal-live .reveal-orbit,
  #unlock-reveal.reveal-live .reveal-particle,
  #unlock-reveal.reveal-live #reveal-kicker,
  #unlock-reveal.reveal-live #reveal-name,
  #unlock-reveal.reveal-live #reveal-copy,
  #unlock-reveal.reveal-live #reveal-continue { animation: none; }
  #unlock-reveal::before { opacity: 0.5; }
  .reveal-seal,
  .reveal-coil-preview,
  .reveal-orbit { opacity: 1; transform: none; }
  .reveal-particle { display: none; }
}