:root {
  --ink: #070807;
  --iron-0: #080907;
  --iron-1: #11130f;
  --iron-2: #20231d;
  --iron-3: #35382f;
  --brass-0: #3a240b;
  --brass-1: #74501d;
  --brass-2: #b98a3e;
  --brass-3: #e7c87d;
  --ivory: #f1e4bd;
  --signal-red: #e14332;
  --signal-green: #70d18d;
  --steel-blue: #92aab5;
  --action-enamel: #59b9b2;
  --action-bright: #d4fff5;
  --action-dark: #103a3b;
  --mechanism-keylight: drop-shadow(0 0 8px rgba(255, 215, 124, 0.42)) drop-shadow(0 7px 10px rgba(0, 0, 0, 0.72));
  --mechanism-shadow: 0 7px 12px rgba(0, 0, 0, 0.76), 0 0 13px rgba(232, 176, 70, 0.24);
  --ambient-dust-opacity: 0.32;
  --ambient-steam-opacity: 0.28;
  --ambient-glint-opacity: 0.34;
  --ambient-gauge-opacity: 1;
  --ambient-grain-opacity: 0.18;
  --ambient-vignette-opacity: 0.34;
  --ambient-needle-duration: 2200ms;
  --steam-level: 0;
  --weight-w: 54px;
  --weight-h: 62px;
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #0A0806;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(83, 54, 19, 0.24), transparent 58%),
    linear-gradient(180deg, #0A0806 0%, #080604 52%, #040302 100%);
  color-scheme: dark;
}

body {
  display: grid;
  place-items: center;
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
  color: var(--ivory);
}

button {
  font: inherit;
}

.lockGame {
  --tilt: -13deg;
  --left-drop: 12px;
  --right-drop: -12px;
  --sun-swing: -26deg;
  --bubble: 78%;
  position: relative;
  isolation: isolate;
  width: min(100vw, 487px);
  height: min(100vh, 844px);
  height: min(100svh, 844px);
  min-height: 568px;
  overflow: clip;
  touch-action: none;
  user-select: none;
  background: #070806;
  box-shadow:
    0 0 0 1px #4b3518,
    0 18px 34px rgba(47, 31, 12, 0.52),
    0 34px 90px rgba(0, 0, 0, 0.78);
}

.lockGame.is-coach-resolving {
  visibility: hidden;
}

.safeBackdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.15), rgba(5, 6, 5, 0.7)),
    var(--backdrop, url("/chronometric-safe-reference.webp")) 50% 42% / cover;
  filter: saturate(0.72) contrast(1.12) brightness(0.58);
  transform: scale(1.04);
}

.safeBackdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 45%, transparent 0 32%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 18% 82%, rgba(0, 0, 0, 0.55));
}

.backdropAtmosphere,
.backdropSparks {
  position: absolute;
  inset: 0;
}

.backdropAtmosphere {
  opacity: 0.34;
  background: linear-gradient(118deg, transparent 20%, rgba(231, 200, 125, 0.16) 48%, transparent 63%);
  animation: atmosphereDrift 8s ease-in-out infinite alternate;
}

.backdropSparks i {
  --x: calc(8% + var(--spark-index) * 9%);
  position: absolute;
  left: var(--x);
  bottom: -6px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  background: #ffe09a;
  box-shadow: 0 0 8px #d3862e;
  animation: sparkRise calc(4s + var(--spark-index) * 170ms) linear infinite;
  animation-delay: calc(var(--spark-index) * -420ms);
}

.gameFrame {
  position: absolute;
  top: 5.1%;
  left: 10.8%;
  z-index: 2;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  gap: 4px;
  width: 88.2%;
  height: 100%;
  padding: 7px;
  transform: scale(0.888);
  transform-origin: 0 0;
}

.cabinetFrame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.cabinetFrameImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.78));
}

.gameHeader,
.statusRail,
.safePanel {
  border: 1px solid #6b4a1d;
  border-radius: 6px;
}

.gameHeader {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 3px 7px 3px 11px;
  border-color: rgba(133, 91, 34, 0.82);
  background:
    linear-gradient(90deg, rgba(182, 136, 55, 0.08), transparent 16% 84%, rgba(182, 136, 55, 0.08)),
    linear-gradient(180deg, #25251e 0%, #12130f 58%, #080906 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 174, 0.08), inset 0 -1px 0 #000, 0 4px 12px #000;
}

.gameTitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-left: 2px;
}

.gameTitle h1,
.statusRail p,
.trainReadout span,
.panTotal span,
.panTotal strong {
  margin: 0;
  letter-spacing: 0;
}

.gameTitle h1 {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #fff2c9;
  line-height: 1;
  text-shadow: 0 2px 7px #000;
  white-space: nowrap;
}

.gameTitle h1 span {
  color: #c69d57;
  font-size: clamp(0.34rem, 1.7vw, 0.43rem);
  font-weight: 600;
  text-transform: uppercase;
}

.gameTitle h1 i {
  color: #8e6c37;
  font-size: clamp(0.44rem, 2vw, 0.54rem);
  font-style: normal;
}

.gameTitle h1 strong {
  color: #fff2c9;
  font-size: clamp(0.68rem, 3.15vw, 0.84rem);
  font-weight: 500;
}

.headerControls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pauseToggle {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(164, 116, 45, 0.88);
  border-radius: 4px;
  color: #e6ce93;
  background: linear-gradient(180deg, rgba(34, 32, 25, 0.97), rgba(8, 9, 7, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 235, 171, 0.14), 0 3px 6px #000;
}

.pauseToggle:disabled {
  opacity: 0.38;
}

.pauseToggle strong {
  font-size: 0.68rem;
  letter-spacing: 0;
}

.ringCounter {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #aa7932;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(227, 190, 108, 0.76) 0 2deg, transparent 2deg 12deg),
    radial-gradient(circle, #654319 0 34%, #15140f 36% 65%, #8e6427 67% 71%, #090a08 73%);
  box-shadow: inset 0 0 12px #000, 0 0 12px rgba(225, 183, 88, 0.17);
}

.ringCounter strong {
  color: #edcf82;
  font-size: 0.7rem;
  font-weight: 500;
  transform: translateY(-2px);
}

.ringCounter span {
  position: absolute;
  margin-top: 14px;
  color: #c8b17d;
  font-size: 0.42rem;
}

.statusRail {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 6px 4px 18px;
  background: rgba(9, 10, 8, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 239, 180, 0.09);
}

.statusRailTop {
  display: none;
}

.statusRailBottom {
  z-index: 9;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.statusRail p {
  overflow: hidden;
  color: #eadbb2;
  font-size: 0.76rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusLamp {
  width: 9px;
  height: 9px;
  border: 1px solid #8d5f2a;
  border-radius: 50%;
  background: #b34131;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32), 0 0 7px rgba(201, 62, 45, 0.5);
}

.statusRail > .statusLamp {
  position: absolute;
  top: 50%;
  left: 6px;
  display: block;
  transform: translateY(-50%);
}

.statusLamp.is-ready {
  border-color: #b7e9c5;
  background: var(--signal-green);
  box-shadow: 0 0 12px rgba(112, 209, 141, 0.86);
}

.statusLamp.is-warning {
  background: #e0a33f;
}

.statusLamp.is-danger {
  background: #ff4e38;
  box-shadow: 0 0 16px rgba(255, 58, 37, 0.94);
}

.statusLamp.is-action {
  border-color: var(--action-bright);
  background: var(--action-enamel);
  box-shadow: 0 0 14px rgba(89, 185, 178, 0.96);
  animation: actionLamp 850ms ease-in-out infinite alternate;
}

.is-first-play-guided .statusRail.is-primary-action > .statusLamp,
.is-first-play-rescue .statusRail.is-primary-action > .statusLamp {
  display: none;
}

.statusRail.is-primary-action {
  overflow: visible;
  padding: 5px 6px;
  border: 2px solid #9b6928;
  border-radius: 5px;
  border-color: #b78536 #604019 #241608;
  background:
    linear-gradient(180deg, rgba(255, 226, 151, 0.18), transparent 38%, rgba(0, 0, 0, 0.48)),
    linear-gradient(90deg, #2f1b09, #9c6c2a 8%, #0a1c1b 13% 87%, #8c5e22 92%, #211306),
    var(--tex-brushed);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 179, 0.42),
    inset 0 -2px 0 rgba(4, 14, 14, 0.92),
    0 0 0 1px rgba(30, 12, 3, 0.95),
    0 0 16px rgba(58, 171, 163, 0.32);
}

.statusRail.is-primary-action > .statusLamp {
  display: none;
}

.statusRail.is-primary-action::after {
  position: absolute;
  right: 17px;
  bottom: -10px;
  width: 20px;
  height: 12px;
  content: "";
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(90deg, #236f6b, var(--action-bright), #236f6b);
  filter: drop-shadow(0 3px 3px #000);
  animation: actionNudge 850ms ease-in-out infinite alternate;
}

.statusRailBottom.is-primary-action::after {
  display: none;
}

.statusRail .primaryActionCopy {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  height: 100%;
  min-height: 0;
  place-items: center;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  border: 1px solid rgba(139, 255, 238, 0.42);
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(81, 235, 207, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(31, 83, 73, 0.72), rgba(6, 24, 24, 0.96)),
    linear-gradient(90deg, rgba(5, 14, 13, 0.72), rgba(26, 94, 82, 0.7), rgba(5, 14, 13, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(220, 255, 248, 0.2),
    inset 0 0 0 1px rgba(5, 12, 12, 0.82),
    inset 0 -3px 8px rgba(0, 0, 0, 0.72);
}

.statusRail .primaryActionCopy::after {
  position: absolute;
  inset: -0.1rem;
  z-index: 0;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(180, 255, 242, 0.68);
  border-radius: inherit;
  opacity: 0;
  box-shadow:
    0 0 0.42rem rgba(98, 235, 200, 0.74),
    0 0 1.1rem rgba(98, 235, 200, 0.54);
}

.primaryActionCopy strong,
.primaryActionCopy small {
  display: block;
  letter-spacing: 0;
  text-transform: uppercase;
}

.primaryActionCopy strong {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  transform: translateY(-0.04em);
  color: #f1bf4d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 7.6cqw, 1.64rem);
  font-weight: 800;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 246, 203, 0.55),
    0 -1px 0 rgba(72, 38, 6, 0.72),
    0 0 0.5rem rgba(255, 195, 76, 0.34),
    0 2px 3px #000;
}

.primaryActionCopy small {
  display: none;
}

.primaryActionCopy .goalVerb,
.primaryActionCopy .goalUnit {
  color: #e6b742;
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 0 rgba(255, 246, 203, 0.44),
    0 -1px 0 rgba(72, 38, 6, 0.7),
    0 0 0.34rem rgba(255, 196, 79, 0.3),
    0 2px 3px #000;
}

.primaryActionCopy .goalAmount {
  color: #f6c75d;
  font-size: 1.36em;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(255, 247, 207, 0.62),
    0 -1px 0 rgba(90, 44, 5, 0.8),
    0 0 0.62rem rgba(255, 198, 79, 0.54),
    0 2px 3px #000;
}

.primaryActionCopy .goalBalanced {
  color: #91ffdf;
  font-size: 0.88em;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 0.58rem rgba(98, 235, 200, 0.76),
    0 2px 3px #000;
}

.safePanel {
  position: relative;
  z-index: 5;
  min-height: 0;
  overflow: hidden;
  perspective: 1100px;
  background: #030403;
  box-shadow: inset 0 0 0 2px #19130a, inset 0 0 40px #000, 0 10px 30px #000;
}

.vaultInterior {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, #fffdec 0 7%, #ffd96f 20%, #a66420 43%, #130d06 77%),
    #120b04;
}

.vaultAperture {
  position: absolute;
  inset: 9%;
  border: 18px solid #181914;
  border-radius: 42% 42% 10% 10%;
  box-shadow: inset 0 0 60px #fff1a3, 0 0 35px #000;
}

.vaultRays {
  position: absolute;
  inset: -30%;
  opacity: 0.62;
  background: repeating-conic-gradient(from 4deg at 50% 46%, rgba(255, 245, 188, 0.38) 0 2deg, transparent 2deg 12deg);
  animation: rotateClock 24s linear infinite;
}

.vaultMotes i {
  position: absolute;
  left: calc(9% + var(--mote-index) * 4.6%);
  bottom: 6%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff0b4;
  opacity: 0;
  animation: vaultMoteRise calc(3.4s + var(--mote-index) * 90ms) linear infinite;
  animation-delay: calc(var(--mote-index) * -230ms);
}

.mechanismFace {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 29px minmax(0, 1fr) 184px 48px 10px;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
  transform-origin: 0 50%;
  background:
    linear-gradient(110deg, rgba(255, 236, 172, 0.055), transparent 22% 72%, rgba(255, 226, 147, 0.065)),
    radial-gradient(circle at 50% 34%, #2a2d25 0, #171c15 48%, #080b08 86%),
    var(--tex-brushed);
  box-shadow:
    inset 0 0 0 2px #61431a,
    inset 0 0 0 5px #0b0c09,
    inset 0 0 42px rgba(0, 0, 0, 0.92),
    inset 0 36px 76px rgba(218, 164, 65, 0.035);
}

.mechanismFace::before,
.mechanismFace::after {
  position: absolute;
  z-index: 8;
  width: 11px;
  height: 100%;
  content: "";
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, #bb8a3f 0 12px, #38230a 12px 18px, #14130e 18px 28px),
    #70501e;
  box-shadow: inset 2px 0 2px #d4ae61, inset -3px 0 3px #0a0804;
}

.mechanismFace::before {
  left: 0;
}

.mechanismFace::after {
  right: 0;
}

canvas.mechanismScene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.3;
  pointer-events: none;
  filter: saturate(0.82) contrast(1.1);
}

.faceGrain {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0.12;
  pointer-events: none;
  background: var(--tex-grain);
  mix-blend-mode: overlay;
}

.ambientFX,
.ambientDust,
.ambientWisps,
.ambientGlints,
.ambientFilm {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambientFX {
  z-index: 68;
  overflow: hidden;
  contain: paint;
}

.ambientDust i {
  --dust-x: calc(5% + var(--ambient-index) * 4.2%);
  --dust-y: calc(7% + var(--ambient-index) * 3.7%);
  position: absolute;
  left: var(--dust-x);
  top: var(--dust-y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(244, 219, 155, 0.76);
  box-shadow: 0 0 5px rgba(244, 219, 155, 0.34);
  animation: ambientDustDrift calc(16s + var(--ambient-index) * 320ms) linear infinite;
  animation-delay: calc(var(--ambient-index) * -710ms);
}

.ambientWisps i {
  position: absolute;
  left: calc(53% + var(--ambient-index) * 4.5%);
  top: calc(38% + var(--ambient-index) * 4.4%);
  width: calc(22px + var(--ambient-index) * 2px);
  height: calc(52px + var(--ambient-index) * 6px);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 45% 86%, rgba(205, 221, 207, 0.2), transparent 58%),
    radial-gradient(ellipse at 58% 35%, rgba(197, 214, 207, 0.12), transparent 66%);
  filter: blur(8px);
  transform-origin: 50% 100%;
  animation: ambientSteamWisp calc(8.6s + var(--ambient-index) * 1.15s) ease-in-out infinite;
  animation-delay: calc(var(--ambient-index) * -2.4s);
}

.ambientGlints i {
  position: absolute;
  left: 17%;
  width: 41%;
  height: 9px;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 178, 0.74), transparent);
  mix-blend-mode: screen;
  filter: blur(2px);
  --ambient-glint-rotate: -12deg;
  transform: rotate(var(--ambient-glint-rotate)) translateX(-45%);
  animation: ambientBrassGlint 9.5s ease-in-out infinite;
}

.ambientGlints i:nth-child(1) {
  top: 34%;
}

.ambientGlints i:nth-child(2) {
  top: 47%;
  left: 25%;
  width: 45%;
  --ambient-glint-rotate: -13deg;
  animation-delay: -3.6s;
}

.ambientGlints i:nth-child(3) {
  top: 65%;
  left: 18%;
  width: 55%;
  --ambient-glint-rotate: 0deg;
  animation-delay: -7.1s;
}

.ambientFilm {
  opacity: var(--ambient-grain-opacity);
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 48%, rgba(0, 0, 0, var(--ambient-vignette-opacity)) 100%),
    repeating-radial-gradient(circle at 17% 23%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  animation: ambientFilmCrawl 1.8s steps(2, end) infinite;
}

.lockGame[data-ambient-dust="false"] .ambientDust,
.lockGame[data-ambient-steam="false"] .ambientWisps,
.lockGame[data-ambient-glint="false"] .ambientGlints,
.lockGame[data-ambient-grain="false"] .ambientFilm {
  display: none;
}

.lockGame[data-ambient-gauge="true"] .chronometerGauge output,
.lockGame[data-ambient-gauge="true"] .countdownGauge strong {
  animation: ambientGaugeFlicker 5.8s ease-in-out infinite;
}

.lockGame[data-ambient-gauge="true"] .countdownGauge strong {
  animation-delay: -2.1s;
}

.lockGame[data-ambient-gauge="false"] .chronometerGauge output,
.lockGame[data-ambient-gauge="false"] .countdownGauge strong,
.lockGame[data-ambient-needle="false"] .sunIndex {
  animation: none;
}

.faceFasteners {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.faceFasteners i {
  position: absolute;
  z-index: 9;
  width: 8px;
  height: 8px;
  border: 1px solid #2c1b08;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #e3be71 0 12%, #6c4819 38%, #17120a 70%);
  box-shadow: 0 1px 2px #000;
}

.faceFasteners i:nth-child(1) { left: 6px; top: 6px; }
.faceFasteners i:nth-child(2) { right: 6px; top: 6px; }
.faceFasteners i:nth-child(3) { left: 6px; bottom: 6px; }
.faceFasteners i:nth-child(4) { right: 6px; bottom: 6px; }

.balanceChamber,
.lowerMechanism,
.boltTrain {
  position: relative;
  z-index: 4;
}

.gaugeRow {
  display: grid;
  grid-template-columns: 1fr 118px 1fr;
  align-items: center;
}

.targetDrum {
  position: relative;
  display: grid;
  width: 82px;
  height: 88px;
  grid-template-rows: 18px 1fr 20px;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  border: 2px solid #7b5721;
  border-radius: 41px 41px 7px 7px;
  color: #e5c978;
  background:
    repeating-conic-gradient(from -4deg, rgba(201, 157, 67, 0.18) 0 2deg, transparent 2deg 18deg),
    radial-gradient(circle at 50% 46%, #24251d 0 48%, #0c0e0b 50% 66%, #6c4b1b 68% 72%, #11120e 74%);
  box-shadow: inset 0 0 14px #000, 0 5px 13px #000;
}

.targetDrum::after {
  position: absolute;
  inset: 8px;
  content: "";
  border: 1px solid rgba(220, 181, 91, 0.48);
  border-radius: 34px 34px 4px 4px;
  pointer-events: none;
}

.targetDrum small,
.targetDrum span,
.targetDrum strong {
  position: relative;
  z-index: 2;
  letter-spacing: 0;
}

.targetDrum small,
.targetDrum span {
  color: #a99461;
  font-size: 0.43rem;
  text-transform: uppercase;
}

.targetDrum strong {
  color: #fff0b7;
  font-size: 1.72rem;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 2px 5px #000;
}

.sunGauge {
  position: relative;
  display: grid;
  width: 140px;
  height: 126px;
  place-items: center;
  justify-self: center;
}

.chronometerGauge {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  grid-template-rows: 17px 1fr 13px 16px;
  place-items: center;
  justify-self: start;
  overflow: hidden;
  border: 2px solid #815b24;
  border-radius: 7px 7px 18px 18px;
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(231, 199, 121, 0.08) 14%, transparent 17% 83%, rgba(231, 199, 121, 0.08) 86%, transparent 87%),
    linear-gradient(180deg, #28261e, #090b08 66%);
  box-shadow: inset 0 0 13px #000, 0 5px 13px #000;
}

.chronometerGauge::before,
.chronometerGauge::after {
  position: absolute;
  top: 31px;
  width: 8px;
  height: 20px;
  content: "";
  border: 1px solid #70501f;
  background: repeating-linear-gradient(180deg, #b9873a 0 2px, #211708 2px 4px);
  box-shadow: inset 0 0 3px #000;
}

.chronometerGauge::before { left: 4px; }
.chronometerGauge::after { right: 4px; }

.chronometerGauge small,
.chronometerGauge output,
.chronometerGauge em,
.chronometerGauge span {
  position: relative;
  z-index: 2;
  letter-spacing: 0;
}

.chronometerGauge small,
.chronometerGauge em,
.chronometerGauge span {
  text-transform: uppercase;
}

.chronometerGauge small {
  color: #bba46e;
  font-size: 0.39rem;
}

.chronometerGauge output {
  display: grid;
  width: 66px;
  height: 34px;
  place-items: center;
  border: 1px solid #68491c;
  border-radius: 3px;
  color: #ffe5a0;
  font-size: 1.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background:
    linear-gradient(180deg, transparent 47%, rgba(220, 179, 88, 0.28) 48% 51%, transparent 52%),
    #080906;
  box-shadow: inset 0 0 10px #000, 0 1px 0 rgba(228, 191, 103, 0.22);
  text-shadow: 0 0 9px rgba(232, 186, 81, 0.42);
}

.chronometerGauge em {
  margin-top: -4px;
  color: #837650;
  font-size: 0.34rem;
  font-style: normal;
}

.chronometerGauge span {
  width: 100%;
  align-self: stretch;
  padding-top: 3px;
  border-top: 1px solid #3e2e15;
  color: #c9a85f;
  font-size: 0.4rem;
  text-align: center;
  background: #11120e;
}

.is-chronometer-running .chronometerGauge {
  border-color: #d2a14c;
  box-shadow: inset 0 0 13px #000, 0 5px 13px #000, 0 0 15px rgba(211, 160, 70, 0.28);
}

.is-chronometer-running .chronometerGauge output {
  color: #fff1bc;
  text-shadow: 0 0 11px rgba(255, 205, 100, 0.72);
}

.is-level .chronometerGauge span,
.is-won .chronometerGauge span {
  color: #baf0c7;
}

.sunGauge::before {
  position: absolute;
  inset: 3px;
  content: "";
  border: 2px solid #8b6227;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -2deg, #bd8f3e 0 2deg, transparent 2deg 10deg),
    radial-gradient(circle, #201b12 0 61%, #080906 62% 70%, #7b5721 72% 75%, #0b0c09 78%);
  box-shadow: inset 0 0 18px #000, 0 5px 14px #000;
}

.sunGauge .dial {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  transform: rotate(var(--sun-swing));
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.sunDial::before {
  position: absolute;
  inset: 15px;
  content: "";
  border: 1px solid #d6ad58;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#d6ad58 0 3deg, transparent 3deg 14deg),
    radial-gradient(circle, #bf8b34 0 18%, #1b170f 20% 45%, #916421 47% 52%, #0d0e0b 54%);
  box-shadow: 0 0 9px #000;
}

.sunIndex {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -2px;
  width: 7px;
  height: 50px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: trueZeroIdleSway var(--ambient-needle-duration) ease-in-out infinite alternate;
  will-change: transform;
  clip-path: polygon(50% 0, 100% 18%, 72% 100%, 28% 100%, 0 18%);
  background: linear-gradient(90deg, #6c1b15, #ff6650 48%, #671812);
  box-shadow: 0 0 9px rgba(234, 67, 48, 0.72);
}

.dialRing,
.dialCore {
  position: absolute;
  border-radius: 50%;
}

.dialRingOuter { inset: 4px; border: 1px solid rgba(224, 190, 111, 0.45); }
.dialRingInner { inset: 33px; border: 1px solid #8d6325; }
.dialCore {
  inset: 44px;
  z-index: 4;
  background: radial-gradient(circle at 34% 28%, #fff0bd, #b77e2c 45%, #3e270c 72%);
  box-shadow: 0 2px 5px #000;
}

.zeroTell {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 18px;
  height: 13px;
  transform: translateX(-50%);
  border: 1px solid #f0d28b;
  border-radius: 2px 2px 5px 5px;
  background: #17150f;
  box-shadow: 0 0 7px #000;
}

.zeroTell::after {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 8px;
  content: "";
  transform: translateX(-50%);
  background: #f3e2b4;
}

.sunGauge > small {
  position: absolute;
  z-index: 5;
  bottom: 0;
  padding: 1px 5px;
  color: #c9b27d;
  font-size: 0.46rem;
  letter-spacing: 0;
  text-transform: uppercase;
  background: #12120e;
}

.countdownGauge {
  position: relative;
  display: grid;
  width: 78px;
  height: 88px;
  place-items: center;
  justify-self: center;
  border: 2px solid #815b24;
  border-radius: 39px 39px 8px 8px;
  background:
    radial-gradient(circle at 50% 42%, #151814 0 46%, transparent 48%),
    conic-gradient(from 0deg, #d44732 calc(var(--steam-level) * 1%), #5a461f 0);
  box-shadow: inset 0 0 13px #000, 0 5px 13px #000;
}

.countdownGauge::before {
  position: absolute;
  inset: 7px;
  content: "";
  border: 1px solid #aa7d35;
  border-radius: 32px 32px 5px 5px;
  background: radial-gradient(circle at 50% 38%, #272b24, #0b0d0a 72%);
}

.countdownGauge strong,
.countdownGauge em,
.countdownGauge small {
  position: relative;
  z-index: 2;
  letter-spacing: 0;
}

.countdownGauge strong {
  margin-top: 3px;
  color: #f2d78f;
  font-size: 1.55rem;
  font-style: normal;
  line-height: 1;
}

.countdownGauge em {
  margin-top: -12px;
  color: #9e8e69;
  font-size: 0.42rem;
  font-style: normal;
  text-transform: uppercase;
}

.countdownGauge small {
  margin-top: -11px;
  color: #c8aa65;
  font-size: 0.44rem;
  text-transform: uppercase;
}

.countdownRing {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  box-shadow: 0 0 calc(var(--steam-level) * 0.12px) rgba(225, 57, 38, 0.72);
}

.counterweightTrain {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid #7b5723;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(56, 45, 25, 0.94), rgba(15, 15, 11, 0.96)),
    var(--tex-brushed);
  box-shadow: inset 0 1px 0 rgba(255, 232, 169, 0.16), 0 3px 8px #000;
}

.trainReadout {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 5px;
  height: 58px;
  padding: 5px 7px;
  border: 1px solid #765523;
  border-radius: 3px;
  background: rgba(10, 12, 9, 0.88);
  box-shadow: inset 0 0 8px #000, 0 2px 4px #000;
}

.trainReadout span,
.trainReadout strong {
  letter-spacing: 0;
  text-transform: uppercase;
}

.trainReadout span {
  color: #a8925c;
  font-size: 0.43rem;
  line-height: 1.1;
}

.trainReadout strong {
  color: #f2d585;
  font-size: 0.66rem;
  font-weight: 500;
  white-space: nowrap;
}

.transportRail {
  position: absolute;
  z-index: 3;
  top: 108px;
  right: 47px;
  left: 108px;
  height: 52px;
  border: 2px solid #956a28;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255, 226, 142, 0.14), transparent 16% 84%, rgba(255, 226, 142, 0.12)),
    linear-gradient(180deg, rgba(242, 202, 96, 0.18), transparent 28% 72%, rgba(0, 0, 0, 0.58)),
    #11110c;
  box-shadow:
    inset 0 0 10px #000,
    inset 0 1px 0 rgba(255, 228, 156, 0.28),
    var(--mechanism-shadow);
  filter: var(--mechanism-keylight);
}

.railChain {
  position: absolute;
  top: 50%;
  right: 8px;
  left: 8px;
  height: 9px;
  transform: translateY(-50%);
  border-top: 1px solid #d1a34f;
  border-bottom: 1px solid #4a310f;
  background:
    linear-gradient(180deg, rgba(255, 232, 157, 0.34), transparent 48%),
    repeating-linear-gradient(90deg, #d3a34e 0 7px, #2b1c09 7px 12px);
  box-shadow: 0 2px 4px #000, 0 0 8px rgba(232, 178, 73, 0.28);
}

.liftHead,
.gateHousing {
  position: absolute;
  z-index: 2;
  top: 5px;
  width: 40px;
  height: 38px;
  border: 1px solid #a1732d;
  border-radius: 4px;
  background: linear-gradient(145deg, #302619, #0b0c09);
  box-shadow: inset 0 0 7px #000, var(--mechanism-shadow);
}

.liftHead { left: 5px; }
.gateHousing { right: 5px; }

.liftHead i,
.gateHousing i {
  position: absolute;
  inset: 7px;
  border: 2px solid #9e722c;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#d2a24a 0 5deg, transparent 5deg 20deg),
    radial-gradient(circle, #f1ca78 0 12%, #15150f 14% 44%, #815b22 46% 54%, transparent 56%);
  filter: var(--mechanism-keylight);
}

.weighCradle {
  position: absolute;
  z-index: 4;
  top: -5px;
  left: 50%;
  display: grid;
  width: 64px;
  height: 58px;
  place-items: center;
  transform: translateX(-50%);
  border: 2px solid #936b2b;
  border-radius: 5px;
  background: linear-gradient(180deg, #302b1e, #0a0b09);
  box-shadow: inset 0 0 9px #000, 0 4px 7px #000;
}

.weighCradle::before,
.weighCradle::after {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 9px;
  content: "";
  border: 1px solid #7c5923;
  background: linear-gradient(90deg, #261808, #c09345 48%, #261808);
}

.weighCradle::before { left: 4px; }
.weighCradle::after { right: 4px; }

.weighCradle i {
  width: 32px;
  height: 32px;
  border: 1px dashed rgba(224, 188, 101, 0.48);
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(190, 143, 53, 0.24) 0 5deg, transparent 5deg 20deg);
}

.weighCradle b {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 20px;
  height: 8px;
  transform: translateX(-50%);
  border: 1px solid #9f762f;
  border-radius: 4px 4px 0 0;
  background: #17150f;
}

.routeDiverter {
  position: absolute;
  z-index: 5;
  top: 96px;
  right: 27px;
  width: 22px;
  height: 82px;
  border: 1px solid #765321;
  border-radius: 10px;
  background: linear-gradient(90deg, #17150f, #76501d 48%, #12130f);
  box-shadow: inset 0 0 6px #000, 0 2px 5px #000;
}

.routeDiverter i {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 14px;
  height: 23px;
  transform: translateX(-50%) rotate(-24deg);
  transform-origin: 50% 80%;
  border: 1px solid #3a260c;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(90deg, #4f3410, #e0b564 48%, #40290d);
  box-shadow: 0 2px 4px #000;
  transition: transform 180ms ease;
}

.routeDiverter small {
  position: absolute;
  right: 22px;
  color: #9d8654;
  font-size: 0.34rem;
  letter-spacing: 0;
}

.routeDiverter small:nth-of-type(1) { top: 4px; }
.routeDiverter small:nth-of-type(2) { bottom: 4px; }

.is-routing-rejected .routeDiverter i { transform: translateX(-50%) rotate(27deg); }
.is-routing-accepted .routeDiverter i { transform: translateX(-50%) rotate(-30deg); }
.is-routing-return .routeDiverter i { transform: translateX(-50%) rotate(8deg); }

.is-routing .weighCradle::before,
.is-routing .weighCradle::after { animation: validatorClamp 460ms cubic-bezier(0.18, 0.82, 0.24, 1) 2 alternate; }
.is-routing .weighCradle i { animation: scannerIris 230ms steps(2, end) infinite alternate; }
.is-routing .liftHead i,
.is-routing .gateHousing i { animation: routingGearForward 460ms linear infinite; }
.is-routing .railChain { animation: railAdvance 360ms linear infinite; }

.driveAssembly {
  position: absolute;
  z-index: 1;
  inset: 8px 8px 8px 105px;
  overflow: hidden;
  opacity: 0.74;
  pointer-events: none;
}

.driveRack {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: -30px;
  height: 10px;
  transform: translateX(var(--drive-shift));
  background:
    repeating-linear-gradient(90deg, #d5a74e 0 7px, #291b09 7px 11px),
    linear-gradient(180deg, #f0cf82, #81591e 45%, #4c310d);
  box-shadow: inset 0 1px 1px #ffe5a0, var(--mechanism-shadow);
  filter: var(--mechanism-keylight);
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.driveGear {
  position: absolute;
  border: 2px solid #d09b3b;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#d6a84d 0 4deg, transparent 4deg 16deg),
    radial-gradient(circle, #e5bb68 0 12%, #18160f 14% 38%, #8b6326 40% 48%, transparent 50%);
  filter: var(--mechanism-keylight);
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.driveGearLarge {
  left: 5px;
  bottom: -5px;
  width: 54px;
  height: 54px;
  transform: rotate(var(--drive-turn));
}

.driveGearSmall {
  left: 48px;
  top: -2px;
  width: 39px;
  height: 39px;
  transform: rotate(var(--drive-turn-reverse));
}

.drivePiston {
  position: absolute;
  top: -4px;
  right: 4px;
  width: 12px;
  height: 46px;
  transform: translateY(var(--piston-stroke));
  border: 1px solid #896224;
  border-radius: 6px;
  background: linear-gradient(90deg, #3b270d, #c69748 45%, #39240b);
  box-shadow: inset 1px 0 1px #ebc979, 0 2px 4px #000;
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.balanceChamber {
  z-index: 5;
  min-height: 0;
  border: 1px solid #5f4822;
  border-radius: 5px;
  overflow: visible;
  background:
    linear-gradient(rgba(229, 205, 139, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 205, 139, 0.075) 1px, transparent 1px),
    radial-gradient(circle at 50% 28%, #30342b 0, #1c2119 58%, #10140f 100%);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.86), inset 0 0 0 1px rgba(194, 160, 79, 0.1);
}

.instrumentHeroShelf {
  position: relative;
  z-index: 6;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}

.chamberInstruments {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 20px;
  left: 20px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 66px;
  align-items: start;
  height: 126px;
  pointer-events: none;
}

.chamberInstruments .sunGauge {
  justify-self: center;
}

.chamberInstruments .chronometerGauge {
  justify-self: start;
  opacity: 0.68;
  transform: scale(0.84);
  transform-origin: left top;
  filter: saturate(0.72) brightness(0.78);
}

.chamberInstruments .countdownGauge {
  justify-self: end;
  opacity: 0.68;
  transform: scale(0.84);
  transform-origin: right top;
  filter: saturate(0.72) brightness(0.78);
}

.routeEngine {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.steamManifold {
  position: absolute;
  inset: 170px 20px auto;
  height: 20px;
  border: 2px solid #624518;
  border-radius: 10px;
  background: linear-gradient(180deg, #a27835, #32210c 70%);
  box-shadow: inset 0 1px 2px #e2bd6e, 0 4px 8px #000;
}

.steamManifold i {
  position: absolute;
  top: 4px;
  width: 9px;
  height: 9px;
  border: 1px solid #312008;
  border-radius: 50%;
  background: #c39a52;
}

.steamManifold i:nth-child(1) { left: 18%; }
.steamManifold i:nth-child(2) { left: 49%; }
.steamManifold i:nth-child(3) { right: 18%; }

.upright {
  position: absolute;
  top: 178px;
  bottom: 13px;
  width: 9px;
  border: 1px solid #76521d;
  border-radius: 6px;
  background: linear-gradient(90deg, #3f290d, #c89c4e 43%, #3b250b);
  box-shadow: inset 1px 0 1px #e1bd71, 2px 3px 6px #000;
}

.leftRail { left: 9px; }
.rightRail { right: 9px; }

.loadShaft,
.returnLift {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.loadShaft {
  top: 108px;
  right: 45px;
  width: 25px;
  height: 170px;
  border: 2px solid #72501e;
  border-top: 0;
  border-radius: 0 0 13px 13px;
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(218, 174, 79, 0.24) 10px 13px),
    linear-gradient(90deg, #0b0c09, #3d321b 45% 55%, #090a08);
  box-shadow: inset 0 0 7px #000, 0 3px 7px #000;
}

.loadShaft::before {
  position: absolute;
  right: -2px;
  bottom: -20px;
  width: 72px;
  height: 27px;
  content: "";
  transform: skewY(18deg);
  border: 2px solid #72501e;
  border-top: 0;
  background: linear-gradient(180deg, #322918, #0b0c09);
  box-shadow: inset 0 -4px 6px #000, 0 3px 5px #000;
}

.returnLift {
  top: 108px;
  bottom: -50px;
  left: 108px;
  width: 22px;
  border: 2px solid #65451b;
  border-top: 0;
  border-bottom: 0;
  background:
    repeating-linear-gradient(180deg, #251b0d 0 9px, #90682b 9px 12px),
    #16140e;
  box-shadow: inset 0 0 5px #000, 0 3px 6px #000;
  opacity: 0.86;
}

.loadShaft span,
.returnLift span {
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(218, 183, 104, 0.13);
}

.loadShaft i,
.returnLift i {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 4px;
  opacity: 0;
  background: #f5cf78;
  box-shadow: 0 0 10px #e8a941;
}

.is-routing-accepted .loadShaft,
.is-routing-return .loadShaft {
  border-color: #d2a44e;
  box-shadow: inset 0 0 12px #000, 0 0 14px rgba(218, 164, 67, 0.45);
}

.is-routing-accepted .loadShaft i { animation: chuteIndicatorDown 600ms linear infinite; }
.is-routing-return .loadShaft i { animation: chuteIndicatorUp 600ms linear infinite; }
.is-routing-rejected .returnLift,
.is-routing-accepted .returnLift,
.is-routing-return .returnLift {
  border-color: #c99a43;
  box-shadow: inset 0 0 8px #000, 0 0 13px rgba(208, 151, 59, 0.45);
}
.is-routing-accepted .returnLift i,
.is-routing-rejected .returnLift i { animation: chuteIndicatorUp 600ms linear infinite; }
.is-routing-return .returnLift i { animation: chuteIndicatorDown 600ms linear infinite; }

.driveTransmission {
  position: absolute;
  z-index: 6;
  top: 180px;
  right: 13px;
  width: 28px;
  height: 132px;
  border: 1px solid #5d4219;
  border-radius: 13px;
  background: linear-gradient(90deg, #15150f, #413117 48%, #11120e);
  box-shadow: inset 0 0 8px #000, 0 3px 7px #000;
}

.driveTransmission::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 50%;
  width: 5px;
  content: "";
  transform: translateX(-50%) translateY(var(--piston-stroke));
  background: repeating-linear-gradient(180deg, #c1974d 0 7px, #32230e 7px 12px);
  box-shadow: 0 0 3px #000;
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.driveTransmission i {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) rotate(var(--drive-turn));
  border: 1px solid #a97a30;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#b78939 0 6deg, transparent 6deg 22deg),
    radial-gradient(circle, #d2a653 0 12%, #1a170f 14% 44%, #6b4917 46% 54%, transparent 56%);
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.driveTransmission i:nth-child(1) { top: 5px; }
.driveTransmission i:nth-child(2) { top: 52px; transform: translateX(-50%) rotate(var(--drive-turn-reverse)); }
.driveTransmission i:nth-child(3) { bottom: 5px; }

.beam {
  position: absolute;
  z-index: 4;
  top: 216px;
  left: 50%;
  width: calc(100% - 62px);
  height: 32px;
  transform: translateX(-50%) rotate(var(--tilt));
  transform-origin: 50% 50%;
  background: transparent;
  filter: var(--mechanism-keylight);
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.beam::before,
.beam::after {
  position: absolute;
  top: 2px;
  width: 31px;
  height: 28px;
  content: "";
  z-index: 2;
  border: 1px solid #a9782f;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%, #f0b85c 0 5%, #2a1b09 7% 17%, transparent 19%),
    radial-gradient(circle at 16% 18%, #d4a24d 0 4%, transparent 5%),
    radial-gradient(circle at 84% 18%, #d4a24d 0 4%, transparent 5%),
    radial-gradient(circle at 16% 82%, #d4a24d 0 4%, transparent 5%),
    radial-gradient(circle at 84% 82%, #d4a24d 0 4%, transparent 5%),
    linear-gradient(145deg, #916726, #1a140c 48%, #050605);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 151, 0.48),
    inset 0 -4px 5px rgba(0, 0, 0, 0.7),
    0 0 0 2px #10100c,
    0 0 10px rgba(235, 177, 73, 0.22);
}

.beam::before { left: 0; }
.beam::after { right: 0; }

.beam span {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 7px, rgba(8, 9, 7, 0.96) 7px 25px, transparent 25px 100%),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(186, 127, 42, 0.34) 30px 31px, transparent 31px 62px);
}

.beam span::before,
.beam span::after {
  position: absolute;
  left: 25px;
  right: 25px;
  height: 5px;
  content: "";
  border: 1px solid #9f732b;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(16, 11, 5, 0.82) 28px 31px),
    linear-gradient(180deg, #f4cf7a 0, #b98532 42%, #251807 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 186, 0.58),
    inset 0 -2px 2px rgba(0, 0, 0, 0.56),
    0 2px 2px rgba(0, 0, 0, 0.76),
    0 0 9px rgba(236, 180, 75, 0.2);
}

.beam span::before { top: 6px; }
.beam span::after { bottom: 6px; }

.pivot {
  position: absolute;
  z-index: 7;
  top: 210px;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border: 2px solid #bd8831;
  border-radius: 50%;
  background: radial-gradient(circle at 37% 30%, #f0d18d 0 8%, #ad7b2d 10% 35%, #33210b 37% 60%, #966a28 62% 68%, #14120c 70%);
  box-shadow: 0 6px 12px #000, 0 0 0 3px #0b0c09, 0 0 14px rgba(241, 187, 78, 0.32);
}

.panWrap {
  position: absolute;
  z-index: 4;
  top: 230px;
  height: 215px;
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.panWrapLeft { left: 18px; width: 132px; }
.panWrapRight { right: 18px; width: 184px; }

.chain {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 2px;
  height: 37px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #e0b15a 0 4px, #2b210f 4px 8px);
  box-shadow: 0 0 2px #000, 0 0 7px rgba(233, 180, 78, 0.22);
}

.chain::before,
.chain::after {
  position: absolute;
  top: 13px;
  width: 61px;
  height: 2px;
  content: "";
  background: repeating-linear-gradient(90deg, #d8a850 0 4px, #251c0d 4px 8px);
  box-shadow: 0 0 6px rgba(233, 180, 78, 0.2);
  transform-origin: right center;
}

.chain::before { right: 0; transform: rotate(-31deg); }
.chain::after { left: 0; transform-origin: left center; transform: rotate(31deg); }

.pan {
  position: absolute;
  top: 34px;
  left: 0;
  width: 100%;
  height: 166px;
  border: 2px solid #8c672a;
  border-radius: 5px 5px 24px 24px;
  background:
    linear-gradient(135deg, rgba(255, 241, 190, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(48, 46, 36, 0.98), rgba(13, 15, 12, 0.99));
  box-shadow: inset 0 2px 0 rgba(236, 207, 139, 0.2), inset 0 -8px 18px #000, 0 8px 13px #000;
}

.pan::after {
  position: absolute;
  right: 9px;
  bottom: 7px;
  left: 9px;
  height: 3px;
  content: "";
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #c59c53, transparent);
  opacity: 0.45;
}

.pan-live::before {
  position: absolute;
  z-index: 8;
  top: -13px;
  right: 22px;
  width: 34px;
  height: 20px;
  content: "";
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
  border-top: 2px solid #a77a31;
  background: linear-gradient(90deg, #241708, #c09345 48%, #261808);
  box-shadow: 0 3px 5px #000;
}

.pan-live {
  border-color: #4c8f8a;
  background:
    linear-gradient(135deg, rgba(190, 255, 246, 0.1), transparent 34%),
    linear-gradient(180deg, #263c39, #0c1716 76%);
  box-shadow:
    inset 0 2px 0 rgba(211, 255, 248, 0.2),
    inset 0 -8px 18px #000,
    0 8px 13px #000,
    0 0 12px rgba(59, 150, 143, 0.2);
}

.pan-live .panTotal {
  right: 52px;
  border: 1px solid rgba(122, 214, 204, 0.72);
  background: #17322f;
  box-shadow:
    inset 0 0 5px #000,
    0 0 6px rgba(82, 204, 193, 0.18);
}

.pan-live .panTotal span {
  color: #d8c58f;
  font-weight: 700;
}

.pan-live .panTotal strong {
  color: #fff0bc;
  text-shadow: 0 0 7px rgba(255, 223, 143, 0.42);
}

.panTotal {
  position: absolute;
  top: 4px;
  right: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  padding: 0 7px;
  border-radius: 3px;
  background: #1d1d17;
  box-shadow: inset 0 0 5px #000;
}

.panTotal span {
  color: #b6a270;
  font-size: 0.48rem;
  text-transform: uppercase;
}

.panTotal strong {
  color: #fff0bc;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 7px rgba(255, 223, 143, 0.28);
}

.pan-target {
  filter: saturate(0.72) brightness(0.86);
  background:
    repeating-linear-gradient(45deg, rgba(185, 139, 59, 0.08) 0 5px, transparent 5px 11px),
    linear-gradient(180deg, #292a22, #10110e);
}

.pan-target::before {
  position: absolute;
  inset: 29px 12px 12px;
  content: "";
  border: 1px solid #55441f;
  background:
    radial-gradient(circle at 12px 12px, #b48941 0 2px, #30200c 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 12px) 12px, #b48941 0 2px, #30200c 3px 5px, transparent 6px),
    linear-gradient(145deg, #28271f, #11130f);
  box-shadow: inset 0 0 18px #000;
}

.targetSeal {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 50%;
  width: 78px;
  padding: 7px 0;
  transform: translateX(-50%) rotate(-3deg);
  border: 1px solid #a77b31;
  color: #d5bd7d;
  font-size: 0.62rem;
  text-align: center;
  text-transform: uppercase;
  background: #1d1b14;
  box-shadow: 0 3px 7px #000;
}

.panDrive {
  position: absolute;
  inset: 27px 8px 7px;
  overflow: hidden;
  border: 1px solid #58451e;
  background: linear-gradient(145deg, #26271f, #0d0f0c);
  box-shadow: inset 0 0 16px #000;
}

.panDrive span {
  position: absolute;
  right: -16px;
  bottom: -18px;
  width: 92px;
  height: 92px;
  transform: rotate(var(--drive-turn-reverse));
  border: 2px solid #99702a;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#b88737 0 4deg, transparent 4deg 16deg),
    radial-gradient(circle, #d2a44d 0 10%, #171710 12% 36%, #76511a 38% 48%, transparent 50%);
  opacity: 0.52;
  filter: drop-shadow(0 3px 3px #000);
  transition: transform 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.panDrive i {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: calc(28px + var(--piston-stroke));
  border: 1px solid #806027;
  border-radius: 4px;
  background: linear-gradient(90deg, #33220c, #c99b47, #3b270d);
  transition: height 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.liveMagazine {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 7px;
  display: grid;
  grid-template-columns: repeat(2, var(--weight-w));
  grid-template-rows: repeat(2, var(--weight-h));
  gap: 3px 5px;
  width: calc(var(--weight-w) * 2 + 5px);
  height: calc(var(--weight-h) * 2 + 3px);
  transform: none;
}

.liveMagazine::before {
  position: absolute;
  z-index: -1;
  inset: -4px;
  content: "";
  border: 1px solid #795823;
  border-radius: 5px;
  background: rgba(8, 9, 7, 0.82);
  box-shadow: inset 0 0 11px #000, 0 2px 5px #000;
}

.liveMagazine .weightDock {
  background:
    radial-gradient(circle at 50% 45%, #090a08 0 34%, transparent 36%),
    linear-gradient(145deg, #25261e, #0b0c09);
}

.fixedWeight {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 6px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 1px;
  width: 56px;
  height: 36px;
  place-items: center;
  transform: translateX(-50%);
  border: 2px solid #6d4c1d;
  border-radius: 4px 4px 9px 9px;
  color: #f2d995;
  background: linear-gradient(160deg, #987039, #2f210e 68%);
  box-shadow: inset 0 2px 1px rgba(255, 235, 180, 0.35), 0 7px 9px #000;
}

.pan-live .fixedWeight {
  top: 31px;
  bottom: auto;
  left: 22px;
  width: 32px;
  height: calc(var(--weight-h) * 2 + 3px);
  transform: none;
  border-color: #8c672a;
  border-radius: 4px 4px 9px 9px;
  color: #fff0bc;
  background: linear-gradient(160deg, #aa7e3f, #35240f 68%);
  box-shadow:
    inset 0 2px 1px rgba(255, 235, 180, 0.42),
    0 7px 9px #000,
    0 0 7px rgba(207, 157, 68, 0.18);
}

.pan-live .fixedWeight strong {
  font-size: 1.2rem;
  font-weight: 700;
  writing-mode: horizontal-tb;
}

.pan-live .fixedWeight::before {
  top: -6px;
  width: 13px;
}

.fixedWeight::before {
  position: absolute;
  top: -7px;
  width: 15px;
  height: 8px;
  content: "";
  border: 2px solid #75521e;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.fixedWeight strong {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 4px #000;
}

.fixedWeightUnit {
  color: #f0dda3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.38rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px #000;
}

.lockBadge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #15120b;
  box-shadow: inset 0 0 0 1px #bd934c;
}

.trueZero {
  position: absolute;
  right: 42px;
  bottom: 7px;
  left: 42px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.trueZeroTrack {
  position: relative;
  height: 12px;
  border: 1px solid #73531f;
  border-radius: 7px;
  background: linear-gradient(180deg, #12140f, #29291f);
  box-shadow: inset 0 2px 4px #000;
}

.trueZeroBand {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 48%;
  width: 4%;
  border-radius: 4px;
  background: rgba(112, 209, 141, 0.62);
  box-shadow: 0 0 8px rgba(112, 209, 141, 0.5);
}

.trueZeroBubble {
  position: absolute;
  top: 2px;
  left: var(--bubble);
  width: 7px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #d9e7c6;
  box-shadow: 0 0 6px #fff;
  transition: left 520ms cubic-bezier(0.18, 0.86, 0.24, 1.18);
}

.trueZero small {
  color: #9d8a5d;
  font-size: 0.46rem;
  text-transform: uppercase;
}

.lowerMechanism {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid #2f6662;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(18, 20, 16, 0.98), rgba(7, 8, 7, 0.99)),
    var(--tex-brushed);
  box-shadow: inset 0 8px 15px #000, 0 -2px 8px #000, 0 0 12px rgba(49, 136, 130, 0.18);
}

.lowerMechanism::before {
  position: absolute;
  z-index: 4;
  top: 5px;
  left: 20px;
  width: 112px;
  height: 20px;
  content: "";
  pointer-events: none;
  border: 2px solid #9d712a;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background:
    linear-gradient(180deg, rgba(255, 231, 157, 0.18), transparent 42%),
    repeating-linear-gradient(90deg, rgba(217, 166, 73, 0.72) 0 8px, transparent 8px 13px),
    linear-gradient(180deg, #4a3212, #0a0b09 70%);
  box-shadow: inset 0 0 9px #000, var(--mechanism-shadow);
  filter: var(--mechanism-keylight);
}

.lowerMechanism::after {
  position: absolute;
  z-index: 5;
  top: 7px;
  left: 82px;
  width: 16px;
  height: 16px;
  content: "";
  pointer-events: none;
  border: 1px solid #d09b3b;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#d8a64c 0 5deg, transparent 5deg 20deg),
    radial-gradient(circle, #f0c872 0 11%, #15150f 13% 42%, #805b22 44% 52%, transparent 54%);
  box-shadow: var(--mechanism-shadow);
  filter: var(--mechanism-keylight);
}

.collectorRail {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 20px;
  left: 108px;
  height: 20px;
  border: 2px solid #9d712a;
  border-radius: 12px 5px 5px 12px;
  background:
    linear-gradient(180deg, rgba(255, 231, 157, 0.18), transparent 42%),
    repeating-linear-gradient(90deg, rgba(217, 166, 73, 0.72) 0 8px, transparent 8px 13px),
    linear-gradient(180deg, #4a3212, #0a0b09 70%);
  box-shadow: inset 0 0 9px #000, var(--mechanism-shadow);
  filter: var(--mechanism-keylight);
}

.collectorRail::before,
.collectorRail::after,
.collectorRail i {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  content: "";
  transform: translateY(-50%);
  border: 1px solid #d09b3b;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#d8a64c 0 5deg, transparent 5deg 20deg),
    radial-gradient(circle, #f0c872 0 11%, #15150f 13% 42%, #805b22 44% 52%, transparent 54%);
  box-shadow: var(--mechanism-shadow);
  filter: var(--mechanism-keylight);
}

.collectorRail::before { left: 7px; }
.collectorRail::after { right: 7px; }
.collectorRail i:nth-child(1) { left: 35%; }
.collectorRail i:nth-child(2) { right: 25%; }

.is-routing .collectorRail {
  border-color: #b88738;
  box-shadow: inset 0 0 12px #000, 0 0 12px rgba(215, 163, 63, 0.38);
}

.is-routing .collectorRail::before,
.is-routing .collectorRail::after,
.is-routing .collectorRail i {
  animation: collectorRoll 460ms linear infinite;
}

.rack {
  --rack-gap: 4px;
  --rack-dock-w: 74px;
  --rack-dock-h: 86px;
  --rack-weight-w: 66px;
  --rack-weight-h: 78px;
  position: relative;
  top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rack-gap);
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--rack-dock-h) + 62px);
  padding: 50px 4px 7px;
  border: 2px solid #3e8b82;
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(88, 238, 215, 0.16), transparent 64%),
    linear-gradient(180deg, #1a4b45, #081110 74%);
  box-shadow:
    inset 0 3px 7px #000,
    inset 0 0 0 1px rgba(159, 255, 243, 0.16),
    0 0 0 1px rgba(18, 8, 2, 0.9),
    0 0 16px rgba(69, 211, 199, 0.28),
    0 4px 10px #000;
}

.rack::before {
  position: absolute;
  z-index: 7;
  top: 10px;
  left: 50%;
  display: grid;
  min-width: 128px;
  height: 19px;
  place-items: center;
  padding: 0 18px;
  content: "COUNTERWEIGHTS";
  transform: translateX(-50%);
  border: 1px solid #a87730;
  border-radius: 4px;
  color: #d7eee7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
  background:
    linear-gradient(180deg, rgba(255, 230, 161, 0.12), transparent 44%),
    linear-gradient(90deg, #4b2b0d, #0d2b27 20% 80%, #4b2b0d);
  box-shadow:
    inset 0 0 0 1px rgba(10, 6, 3, 0.72),
    0 2px 5px #000;
}

.rack::after {
  position: absolute;
  z-index: 1;
  top: 33px;
  right: 12px;
  left: 12px;
  height: 5px;
  content: "";
  pointer-events: none;
  border: 1px solid #6f4c1b;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 226, 151, 0.18), transparent 42%),
    repeating-linear-gradient(90deg, rgba(217, 166, 73, 0.72) 0 8px, transparent 8px 13px),
    linear-gradient(180deg, #4a3212, #0a0b09 70%);
  box-shadow:
    inset 0 0 7px #000,
    0 2px 4px #000;
}

.is-teaching .rack::before {
  content: "COUNTERWEIGHTS";
  color: #d7fff7;
  font-size: 0.62rem;
  text-shadow: 0 0 8px rgba(105, 221, 210, 0.62);
}

.weightDock {
  position: relative;
  width: var(--weight-w);
  height: var(--weight-h);
  border: 1px solid #315a57;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 45%, #0b0c09 0 34%, transparent 36%),
    linear-gradient(145deg, #20221b, #0a0b09);
  box-shadow: inset 0 2px 5px #000, inset 0 0 0 2px rgba(100, 201, 192, 0.07);
}

.weightDock::after {
  position: absolute;
  inset: 6px;
  content: "";
  border: 1px dashed rgba(183, 146, 72, 0.25);
  border-radius: 50%;
  pointer-events: none;
}

.weightDock.is-occupied::after {
  opacity: 0;
}

.weight {
  --weight-accent: #e1bc6e;
  position: relative;
  z-index: 2;
  display: grid;
  width: var(--weight-w);
  height: var(--weight-h);
  grid-template-rows: 1fr 24px;
  place-items: center;
  padding: 4px 3px 3px;
  border: 1px solid color-mix(in srgb, var(--weight-accent) 68%, #1b1207);
  border-radius: 5px;
  color: var(--weight-accent);
  cursor: pointer;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 250, 220, 0.46) 0 4%, transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--weight-accent) 52%, #333126), #171710 64%, #090a08);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 218, 0.58),
    inset 0 -3px 5px rgba(0, 0, 0, 0.8),
    0 4px 0 color-mix(in srgb, var(--weight-accent) 23%, #120b04),
    0 7px 9px #000;
  transform: translateY(-2px);
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.weight::before {
  position: absolute;
  inset: 4px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--weight-accent) 42%, transparent);
  border-radius: 3px;
  pointer-events: none;
}

.weight::after {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 17px;
  height: 7px;
  content: "";
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--weight-accent) 55%, #160e06);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #18160f;
}

.weight small {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--weight-accent) 55%, #171008);
  border-radius: 50%;
  color: #0d0f0c;
  font-size: 0.92rem;
  line-height: 1;
  background: radial-gradient(circle at 35% 28%, #fff6d9, var(--weight-accent) 45%, #4c3515 78%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.55), 0 2px 4px #000;
}

.weight > .massWindow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--weight-accent) 55%, #181108);
  border-radius: 3px;
  color: #fff8de;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1;
  background: #13140f;
  box-shadow: inset 0 0 5px #000, 0 0 5px rgba(255, 224, 145, 0.16);
  text-shadow: 0 2px 3px #000;
}

.weight .massWindow {
  overflow: hidden;
  gap: 0.04rem;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.weight .massNumber,
.weight .massUnit {
  display: block;
  line-height: 1;
}

.weight .massNumber {
  flex: 0 0 auto;
  font-size: 0.94em;
  line-height: 0.78;
}

.weight .massUnit {
  flex: 0 0 auto;
  margin-top: 0;
  color: #cbbf98;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.26em;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px #000;
}

.rack .weightDock {
  z-index: 6;
  display: grid;
  width: min(100%, var(--rack-dock-w));
  min-width: 0;
  height: var(--rack-dock-h);
  justify-self: center;
  place-items: center;
  overflow: visible;
  border-color: rgba(90, 221, 209, 0.55);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(103, 241, 223, 0.22), transparent 68%),
    linear-gradient(180deg, rgba(35, 86, 78, 0.9), rgba(7, 15, 14, 0.98) 68%);
  box-shadow:
    inset 0 2px 6px #000,
    inset 0 0 0 1px rgba(159, 255, 243, 0.16),
    0 0 7px rgba(100, 239, 225, 0.32),
    0 1px 0 rgba(155, 238, 227, 0.08);
}

.rack .weightDock.is-occupied::before {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -30px;
  width: 60px;
  height: 36px;
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #236f6b, var(--action-bright), #236f6b);
  filter: drop-shadow(0 -3px 3px #000);
}

.is-awakened:not(.is-won) .rack .weightDock.is-occupied::before {
  opacity: 1;
  animation: rackActionArrow 850ms ease-in-out infinite alternate;
}

.is-awakened:not(.is-won) .rack .weightDock:nth-child(2).is-occupied::before { animation-delay: 70ms; }
.is-awakened:not(.is-won) .rack .weightDock:nth-child(3).is-occupied::before { animation-delay: 140ms; }
.is-awakened:not(.is-won) .rack .weightDock:nth-child(4).is-occupied::before { animation-delay: 210ms; }

.lockGame.is-first-play-guided.is-awakened:not(.is-won) .rack .weightDock.is-occupied::before,
.lockGame.is-first-play-rescue.is-awakened:not(.is-won) .rack .weightDock.is-occupied::before,
.lockGame.is-followup-ward .rack .weightDock.is-occupied::before {
  display: none;
  opacity: 0;
  animation: none;
}

.rack .weight:not(.is-flight-source):not(.is-in-flight) {
  width: var(--rack-weight-w);
  height: var(--rack-weight-h);
  grid-template-rows: 1fr 29px;
  padding: 6px 5px 5px;
}

.rack .weight:not(.is-flight-source):not(.is-in-flight) small,
.rack .weight:not(.is-flight-source):not(.is-in-flight) .massWindow {
  width: 37px;
  height: 37px;
  font-size: 1.08rem;
}

.rack .weight:not(.is-flight-source):not(.is-in-flight) .massWindow {
  width: 56px;
  height: 27px;
  font-size: 1.32rem;
}

.rack .weight.is-symbol-hidden:not(.is-flight-source):not(.is-in-flight) {
  grid-template-rows: 1fr;
  padding: 7px 6px;
  border-color: #9f762e;
  background:
    radial-gradient(circle at 31% 16%, rgba(255, 247, 210, 0.24) 0 5%, transparent 18%),
    linear-gradient(145deg, #4a3515 0%, #191a14 20%, #090a08 70%, #432a0d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 198, 0.48),
    inset 0 -3px 5px rgba(0, 0, 0, 0.86),
    0 3px 0 #2b1a08,
    0 0 8px rgba(80, 221, 207, 0.34),
    0 6px 9px #000;
}

.rack .weight.is-symbol-hidden:not(.is-flight-source):not(.is-in-flight)::after {
  display: block;
  top: -7px;
  width: 17px;
  height: 8px;
}

.rack .weight.is-symbol-hidden:not(.is-flight-source):not(.is-in-flight) .massWindow {
  width: calc(var(--rack-weight-w) - 12px);
  height: calc(var(--rack-weight-h) - 14px);
  gap: 0.3rem;
  border: 1px solid rgba(229, 189, 105, 0.7);
  border-radius: 6px;
  color: #fff4d8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.26rem;
  font-weight: 800;
  line-height: 0.92;
  padding: 0.2rem 0 0.34rem;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 242, 204, 0.12), transparent 54%),
    linear-gradient(180deg, #1c1c15, #070807 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 153, 0.08),
    inset 0 0 8px #000,
    0 0 5px rgba(255, 218, 137, 0.14);
  text-shadow:
    0 1px 0 rgba(255, 244, 205, 0.34),
    0 2px 3px #000;
}

.rack .weight.is-symbol-hidden:not(.is-flight-source):not(.is-in-flight) .massNumber {
  font-size: 0.8em;
  line-height: 0.78;
}

.rack .weight.is-symbol-hidden:not(.is-flight-source):not(.is-in-flight) .massUnit {
  color: #f1dc9b;
  font-size: 0.22em;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.weight-steel {
  --weight-accent: var(--steel-blue) !important;
  background: radial-gradient(circle at 34% 20%, #eefcff 0 4%, transparent 18%), linear-gradient(145deg, #8799a0, #252c2d 62%, #0b0d0d);
}

.weight-iron {
  background: radial-gradient(circle at 34% 20%, #c8c4b8 0 3%, transparent 16%), linear-gradient(145deg, #6c6b62, #292923 58%, #0b0c0a);
}

.weight-ivory {
  background: radial-gradient(circle at 34% 20%, #fffef2 0 5%, transparent 18%), linear-gradient(145deg, #efe2bd, #88795a 62%, #28231a);
}

.weight-brass {
  background: radial-gradient(circle at 34% 20%, #fff2bd 0 5%, transparent 18%), linear-gradient(145deg, #d8a94d, #624416 62%, #1c1307);
}

.weight:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 250, 218, 0.36), inset 0 -2px 4px #000, 0 1px 0 #241507, 0 3px 5px #000;
}

.weight:disabled {
  cursor: default;
}

.weight.is-recent:not(.is-flight-source) {
  animation: weightLand 480ms cubic-bezier(0.16, 0.9, 0.24, 1);
}

.weight.is-flight-source {
  opacity: 0;
}

.flightLayer {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.sealedTrayFlightOccluder {
  z-index: 95;
  top: 274px;
  margin-left: 8px;
  transform: translateY(var(--left-drop));
  transition: none;
  pointer-events: none;
}

.sealedTrayFlightOccluder .fixedWeight {
  pointer-events: none;
}

.weight.is-in-flight {
  position: absolute;
  left: var(--flight-left);
  top: var(--flight-top);
  z-index: 90;
  margin: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  pointer-events: none;
  will-change: transform;
}

.weight.is-in-flight.is-flying {
  animation: weightRoute 1200ms linear forwards;
  animation-delay: var(--flight-delay);
}

.weight.is-in-flight.route-rejected.is-flying {
  animation-name: rejectedWeightRoute;
}

.routeEditorContactMarker {
  position: absolute;
  left: var(--flight-left);
  top: var(--flight-top);
  z-index: 98;
  width: var(--contact-marker-w);
  height: var(--contact-marker-h);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  will-change: transform;
}

.routeEditorContactMarker.is-flying {
  animation: weightRoute 1200ms linear forwards;
  animation-delay: var(--flight-delay);
}

.routeEditorContactMarker.route-rejected.is-flying {
  animation-name: rejectedWeightRoute;
}

.routeEditorContactMarker i {
  position: absolute;
  left: var(--contact-x);
  top: var(--contact-y);
  width: 12px;
  height: 12px;
  border: 2px solid #2c1300;
  border-radius: 50%;
  background: #ffb23f;
  box-shadow:
    0 0 0 2px rgba(255, 231, 156, 0.5),
    0 0 16px rgba(255, 158, 35, 0.95);
  transform: translate(-50%, -50%);
}

.routeEditorContactMarker span {
  position: absolute;
  left: var(--contact-x);
  top: calc(var(--contact-y) + 12px);
  color: #ffd98b;
  font: 800 8px var(--font-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  transform: translateX(-50%);
}

.routeEditorLayer {
  position: absolute;
  inset: 0;
  z-index: 140;
  pointer-events: none;
}

.routeEditorPanel {
  position: fixed;
  z-index: 2;
  top: 8px;
  bottom: auto;
  left: 12px;
  right: auto;
  width: min(440px, calc(100vw - 24px));
  max-height: 44vh;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid rgba(117, 243, 234, 0.88);
  border-radius: 6px;
  color: #effffb;
  background: linear-gradient(180deg, rgba(8, 64, 60, 0.94), rgba(3, 25, 24, 0.94));
  box-shadow: inset 0 1px 0 rgba(215, 255, 250, 0.22), 0 0 28px rgba(70, 223, 211, 0.36), 0 10px 24px #000;
  pointer-events: auto;
}

.routeEditorPanel.is-docked-top {
  top: 8px;
  bottom: auto;
}

.routeEditorPanel.is-docked-bottom {
  top: auto;
  bottom: 12px;
}

.routeEditorPanel.is-minimized {
  width: min(210px, calc(100vw - 24px));
  max-height: none;
  top: 8px;
  bottom: auto;
  left: 8px;
  gap: 3px;
  padding: 6px 8px;
  overflow: visible;
}

.routeEditorHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.routeEditorHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.routeEditorPanel strong {
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.routeEditorHeader button {
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(117, 243, 234, 0.7);
  border-radius: 4px;
  color: #ecfffb;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 1px 0 rgba(236, 255, 251, 0.14), 0 2px 5px #000;
  font-family: var(--font-serif);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

.routeEditorPanel span,
.routeEditorPanel code {
  color: rgba(226, 255, 251, 0.82);
  font-size: 0.5rem;
  line-height: 1.1;
}

.routeEditorControls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.routeEditorControls button {
  min-width: 36px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(192, 148, 58, 0.86);
  border-radius: 4px;
  color: #fff4c9;
  background: linear-gradient(180deg, #2d2418, #090807);
  box-shadow: inset 0 1px 0 rgba(255, 236, 176, 0.16), 0 2px 5px #000;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.routeEditorControls button.is-selected {
  border-color: #7af4ea;
  color: #ecfffb;
  box-shadow: inset 0 1px 0 rgba(236, 255, 251, 0.24), 0 0 14px rgba(92, 235, 223, 0.62);
}

.routeEditorNudges button {
  min-width: 0;
  font-size: 0.58rem;
}

.routeEditorStepControls {
  align-items: center;
  gap: 6px;
}

.routeEditorStepControls button {
  flex: 1 1 84px;
}

.routeEditorStepControls strong {
  min-width: 128px;
  padding: 3px 7px;
  border: 1px solid rgba(117, 243, 234, 0.62);
  border-radius: 4px;
  color: #ecfffb;
  background: rgba(0, 0, 0, 0.38);
  font-size: 0.58rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(236, 255, 251, 0.14);
}

.routeEditorCopyControls {
  align-items: center;
}

.routeEditorCopyControls button {
  flex: 0 0 auto;
  border-color: rgba(117, 243, 234, 0.84);
  color: #ecfffb;
}

.routeEditorCopyControls em {
  color: #bcfffa;
  font-size: 0.56rem;
  font-style: normal;
  line-height: 1;
}

.routeEditorSvg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: auto;
}

.routeEditorRails line {
  fill: none;
  stroke: rgba(245, 185, 65, 0.7);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  filter: drop-shadow(0 0 5px rgba(245, 185, 65, 0.58));
}

.routeEditorPath {
  fill: none;
  stroke: rgba(112, 255, 242, 0.86);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(70, 242, 228, 0.68));
  pointer-events: none;
}

.routeEditorPoint circle {
  fill: #dffffa;
  stroke: #062d2a;
  stroke-width: 2;
  cursor: grab;
  filter: drop-shadow(0 0 7px rgba(110, 255, 242, 0.94));
}

.routeEditorPoint text {
  fill: #f5df9f;
  stroke: #000;
  stroke-width: 2;
  paint-order: stroke;
  font: 800 9px var(--font-serif);
  letter-spacing: 0.04em;
  pointer-events: none;
}

.is-routing .driveGearLarge,
.is-routing .driveTransmission i:nth-child(1),
.is-routing .driveTransmission i:nth-child(3) {
  animation: routingGearForward 460ms linear infinite;
}

.is-routing .driveGearSmall,
.is-routing .panDrive span,
.is-routing .driveTransmission i:nth-child(2) {
  animation: routingGearReverse 460ms linear infinite;
}

.is-routing .driveRack { animation: routingRack 360ms ease-in-out infinite alternate; }
.is-routing .drivePiston,
.is-routing .driveTransmission::before { animation: routingPiston 360ms ease-in-out infinite alternate; }

.is-teaching .rack .weight {
  animation: sigilBeacon 1200ms ease-in-out infinite;
}

.is-teaching .rack .weightDock:nth-child(2) .weight { animation-delay: 90ms; }
.is-teaching .rack .weightDock:nth-child(3) .weight { animation-delay: 180ms; }
.is-teaching .rack .weightDock:nth-child(4) .weight { animation-delay: 270ms; }

.is-awakened:not(.is-won) .rack .weight:not(:disabled) {
  outline: 1px solid rgba(104, 215, 205, 0.58);
  outline-offset: 1px;
}

.is-routing-accepted .transportRail,
.is-routing-return .transportRail {
  border-color: var(--action-enamel);
  box-shadow: inset 0 1px 0 rgba(214, 255, 248, 0.18), 0 0 15px rgba(75, 186, 177, 0.4);
}

.is-routing-accepted .loadShaft,
.is-routing-return .returnLift {
  filter: drop-shadow(0 0 7px rgba(82, 204, 193, 0.55));
}

.is-teaching .transportRail {
  animation: trayHunger 1500ms ease-in-out infinite;
}

.is-teaching .rack {
  border-color: #6fe2d7;
  background:
    linear-gradient(180deg, #23514d, #0b1514 74%);
  box-shadow:
    inset 0 3px 8px #000,
    inset 0 0 0 1px rgba(211, 255, 249, 0.2),
    0 0 22px rgba(94, 230, 218, 0.64),
    0 7px 16px #000;
}

.is-tap-coached .lowerMechanism {
  border-color: rgba(116, 255, 242, 0.72);
  box-shadow:
    inset 0 8px 15px #000,
    0 -2px 8px #000,
    0 0 16px rgba(69, 207, 196, 0.46),
    0 0 34px rgba(84, 244, 230, 0.28);
}

.is-tap-coached .rack {
  border-color: #9ffff5;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(101, 255, 241, 0.34), transparent 56%),
    linear-gradient(180deg, #276761, #0b1514 74%);
  box-shadow:
    inset 0 3px 8px #000,
    inset 0 0 0 1px rgba(224, 255, 251, 0.42),
    inset 0 0 20px rgba(91, 245, 231, 0.28),
    0 0 8px rgba(207, 255, 249, 0.88),
    0 0 24px rgba(99, 245, 231, 0.86),
    0 0 48px rgba(69, 221, 211, 0.54),
    0 7px 16px #000;
  animation: rackCoachGlow 1050ms ease-in-out infinite alternate;
}

.is-tap-coached .rack::before {
  color: #d8fff9;
  background: #0b302d;
  text-shadow:
    0 0 5px rgba(202, 255, 249, 0.95),
    0 0 13px rgba(93, 242, 229, 0.9),
    0 2px 4px #000;
}

.is-tap-coached .rack .weightDock {
  border-color: rgba(147, 255, 245, 0.86);
  box-shadow:
    inset 0 2px 6px #000,
    inset 0 0 0 2px rgba(149, 255, 245, 0.24),
    0 0 8px rgba(166, 255, 247, 0.62),
    0 0 18px rgba(89, 234, 221, 0.46);
}

.is-impact .beam {
  animation: beamRecoil 520ms cubic-bezier(0.16, 0.88, 0.24, 1);
}

.impact-0 .driveGearLarge,
.impact-0 .driveTransmission i:nth-child(1),
.impact-0 .driveTransmission i:nth-child(3) {
  animation: gearClackA 620ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.impact-1 .driveGearLarge,
.impact-1 .driveTransmission i:nth-child(1),
.impact-1 .driveTransmission i:nth-child(3) {
  animation: gearClackB 620ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.impact-0 .driveGearSmall,
.impact-0 .panDrive span,
.impact-0 .driveTransmission i:nth-child(2) {
  animation: reverseGearClackA 620ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.impact-1 .driveGearSmall,
.impact-1 .panDrive span,
.impact-1 .driveTransmission i:nth-child(2) {
  animation: reverseGearClackB 620ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.is-impact .driveRack {
  animation: rackClack 620ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.is-impact .drivePiston,
.is-impact .driveTransmission::before {
  animation: pistonClack 620ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.panWrap.is-landing .pan {
  animation: trayRecoil 560ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.boltTrain {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 18px;
}

.boltTrain span {
  width: 18%;
  height: 7px;
  border: 1px solid #4a3517;
  border-radius: 4px;
  background: linear-gradient(180deg, #8d7651, #292924);
  box-shadow: inset 0 1px 1px #d1c196, 0 2px 3px #000;
}

.steamFX,
.ejectionLayer,
.pauseVeil,
.startGate,
.breachFlash,
.winStamp {
  position: absolute;
  inset: 0;
}

.steamFX {
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
}

.steamFX i {
  position: absolute;
  left: calc(4% + var(--steam-index) * 7%);
  bottom: -24px;
  width: 24px;
  height: 42px;
  border-radius: 50%;
  opacity: calc(var(--steam-level) * 0.006);
  background: radial-gradient(ellipse, rgba(222, 227, 217, 0.28), transparent 68%);
  filter: blur(4px);
  animation: steamRise calc(1.8s + var(--steam-index) * 70ms) linear infinite;
  animation-delay: calc(var(--steam-index) * -140ms);
}

.pauseVeil {
  z-index: 30;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: rgba(5, 6, 5, 0.75);
  backdrop-filter: blur(2px);
  transition: opacity 160ms ease;
}

.pauseVeil strong {
  padding: 10px 15px;
  border: 1px solid #846027;
  border-radius: 4px;
  color: #d9c28d;
  font-size: 0.84rem;
  font-weight: 500;
  text-transform: uppercase;
  background: #11120f;
}

.is-paused .pauseVeil {
  opacity: 1;
  pointer-events: auto;
}

.startGate {
  z-index: 32;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.startGate::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(3, 4, 3, 0.34) 54%, rgba(3, 4, 3, 0.7) 100%);
}

.breachLever {
  position: relative;
  display: grid;
  width: min(calc(100% - 46px), 326px);
  height: 108px;
  place-items: center;
  padding: 0 28px;
  overflow: hidden;
  border: 2px solid #d5ad5d;
  border-radius: 4px;
  color: #171006;
  cursor: pointer;
  pointer-events: auto;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 237, 179, 0.38) 10%, transparent 13% 87%, rgba(255, 237, 179, 0.3) 90%, transparent 93%),
    linear-gradient(180deg, #e3bd6e 0, #a9762b 43%, #5a3912 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 246, 205, 0.72),
    inset 0 -9px 14px rgba(31, 18, 4, 0.62),
    0 0 0 4px #241707,
    0 0 0 6px #805b22,
    0 13px 22px #000,
    0 0 28px rgba(225, 174, 70, 0.32);
  transform-origin: 50% 100%;
  animation: breachPlatePulse 1500ms ease-in-out infinite;
}

.breachLever::before {
  position: absolute;
  inset: 8px;
  content: "";
  border: 1px solid rgba(54, 31, 7, 0.72);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(255, 226, 151, 0.16);
}

.breachLever::after {
  position: absolute;
  right: 20px;
  bottom: 13px;
  left: 20px;
  height: 5px;
  content: "";
  border-top: 1px solid #382208;
  border-bottom: 1px solid rgba(255, 226, 147, 0.38);
  background: repeating-linear-gradient(90deg, #2c1b07 0 8px, transparent 8px 14px);
  opacity: 0.78;
}

.breachLever strong {
  position: relative;
  z-index: 2;
  color: #180f04;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 235, 173, 0.7), 0 -1px 0 rgba(56, 31, 5, 0.45);
  text-transform: uppercase;
}

.breachBolts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.breachBolts i {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid #392208;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d28e 0 12%, #885b20 36%, #291906 72%);
  box-shadow: inset 0 1px 1px rgba(255, 239, 186, 0.52), 0 2px 3px rgba(0, 0, 0, 0.72);
}

.breachBolts i:nth-child(1) { top: 10px; left: 10px; }
.breachBolts i:nth-child(2) { top: 10px; right: 10px; }
.breachBolts i:nth-child(3) { bottom: 10px; left: 10px; }
.breachBolts i:nth-child(4) { right: 10px; bottom: 10px; }

.breachKeyline {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 50%;
  width: 54px;
  height: 7px;
  transform: translateX(-50%);
  border-top: 2px solid #3c2408;
  border-bottom: 1px solid rgba(255, 230, 161, 0.5);
}

.breachKeyline i {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: #4b2d0a;
}

.breachLever:not(:disabled):hover {
  filter: brightness(1.12);
}

.breachLever:not(:disabled):active {
  animation: none;
  transform: translateY(4px);
  box-shadow: inset 0 2px 6px rgba(20, 10, 1, 0.64), 0 0 0 4px #241707, 0 0 0 6px #805b22, 0 5px 9px #000;
}

.startGate.is-open {
  pointer-events: none;
}

.startGate.is-open::before {
  animation: startShadeOut 460ms ease-out forwards;
}

.startGate.is-open .breachLever {
  pointer-events: none;
  animation: breachPlateRetract 680ms cubic-bezier(0.2, 0.78, 0.18, 1) forwards;
}

.is-dormant .mechanismFace {
  filter: brightness(0.68) saturate(0.76);
}

.breachFlash {
  z-index: 34;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.breachFlash.is-firing {
  animation: breachWash 680ms cubic-bezier(0.18, 0.88, 0.24, 1) forwards;
}

.breachStamp {
  position: absolute;
  top: 29px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(-50%) scale(0.78);
}

.is-firing .breachStamp {
  animation: breachStampIn 680ms ease-out forwards;
}

.breachStamp strong {
  color: #fff3cd;
  font-size: 1.28rem;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 0 3px 8px #000;
}

.breachStamp small {
  color: #ffb65e;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.ejectionLayer {
  z-index: 36;
  pointer-events: none;
}

.ejectedWeight {
  position: absolute;
  animation: sigilFall 1.35s cubic-bezier(0.17, 0.65, 0.26, 1) forwards;
}

.is-pressure-warning .mechanismFace {
  animation: warningShake 430ms linear infinite;
}

.is-pressure-danger .mechanismFace {
  animation: dangerShake 170ms linear infinite;
}

.is-pressure-warning .countdownGauge {
  border-color: #c47e2e;
}

.is-pressure-danger .countdownGauge {
  border-color: #fa4e38;
  box-shadow: inset 0 0 13px #000, 0 0 22px rgba(232, 58, 40, 0.68);
}

.is-pressure-danger .countdownGauge strong {
  color: #ff7966;
}

.is-cavitation-event .mechanismFace {
  animation: cavitate 1.8s cubic-bezier(0.13, 0.8, 0.18, 1);
}

.is-cavitation-event .sunDial {
  animation: sunCavitation 1.55s cubic-bezier(0.08, 0.84, 0.14, 1);
}

.is-level .sunGauge::before {
  box-shadow: inset 0 0 18px #000, 0 0 20px rgba(112, 209, 141, 0.52);
}

.is-level .zeroTell {
  border-color: #aef0bf;
  box-shadow: 0 0 12px rgba(112, 209, 141, 0.9);
}

.is-level .trueZeroBand {
  background: var(--signal-green);
  box-shadow: 0 0 12px rgba(112, 209, 141, 0.9);
}

.is-level .transportRail {
  border-color: #529d68;
  box-shadow: inset 0 1px 0 rgba(211, 255, 222, 0.16), 0 0 15px rgba(73, 167, 102, 0.3);
}

.is-won .mechanismFace {
  animation: wholeDoorOpen 2100ms cubic-bezier(0.2, 0.72, 0.18, 1) 650ms forwards;
}

.is-won .sunDial {
  animation: cinematicSunUnlock 1200ms cubic-bezier(0.12, 0.8, 0.18, 1) forwards;
}

.is-won .vaultInterior {
  animation: vaultBloom 2800ms ease-out forwards;
}

.winStamp {
  z-index: 45;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255, 249, 214, 0.2), transparent 44%);
  animation: winStampIn 700ms ease-out 1550ms forwards;
}

.winSeal {
  width: 66px;
  height: 66px;
  border: 3px solid #20180b;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#2c210d 0 2deg, transparent 2deg 11deg),
    radial-gradient(circle, #f0cc73 0 13%, #6d4c1d 15% 24%, #dfb75b 26% 31%, transparent 33%);
  box-shadow: 0 5px 11px rgba(0, 0, 0, 0.62);
}

.winStamp strong {
  color: #fff8dc;
  font-size: 1.15rem;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 0 2px 7px #7d531b;
}

.winStamp em {
  color: #4b2d0c;
  font-size: 1.72rem;
  font-style: normal;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff0b6, 0 0 10px rgba(255, 244, 198, 0.72);
}

.winTimeLabel {
  color: #563612;
  font-size: 0.48rem;
  font-weight: 700;
  text-transform: uppercase;
}

.winStamp.is-final-reveal strong {
  max-width: 310px;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
}

.winStamp.is-final-reveal .winSeal {
  width: 78px;
  height: 78px;
  animation: rotateClock 5s linear infinite;
}

.winStamp small {
  color: #7d5b25;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.winAgain {
  min-width: 146px;
  min-height: 43px;
  margin-top: 8px;
  border: 1px solid #fff2bd;
  border-radius: 5px;
  color: #2b1c09;
  background: linear-gradient(180deg, #fff1c0, #cc943b);
  box-shadow: inset 0 1px 0 #fff, 0 6px 0 #694316, 0 10px 16px rgba(0, 0, 0, 0.54);
  pointer-events: auto;
  text-transform: uppercase;
}

@keyframes trueZeroIdleSway {
  from { transform: translateX(-50%) rotate(-1.6deg); }
  to { transform: translateX(-50%) rotate(1.6deg); }
}

@keyframes ambientDustDrift {
  0% {
    opacity: 0;
    transform: translate3d(-10px, 12px, 0);
  }
  18%,
  68% {
    opacity: var(--ambient-dust-opacity);
  }
  100% {
    opacity: 0;
    transform: translate3d(28px, -34px, 0);
  }
}

@keyframes ambientSteamWisp {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.78) rotate(-4deg);
  }
  82% {
    opacity: var(--ambient-steam-opacity);
    transform: translate3d(7px, -18px, 0) scale(1.08) rotate(3deg);
  }
  94% {
    opacity: 0.08;
    transform: translate3d(-9px, -58px, 0) scale(1.52) rotate(9deg);
  }
}

@keyframes ambientBrassGlint {
  0%,
  62%,
  100% {
    opacity: 0;
    transform: rotate(var(--ambient-glint-rotate, -12deg)) translateX(-45%);
  }
  70% {
    opacity: var(--ambient-glint-opacity);
  }
  82% {
    opacity: 0;
    transform: rotate(var(--ambient-glint-rotate, -12deg)) translateX(165%);
  }
}

@keyframes ambientGaugeFlicker {
  0%,
  18%,
  23%,
  49%,
  55%,
  100% {
    opacity: var(--ambient-gauge-opacity);
  }
  20%,
  52% {
    opacity: 0.78;
  }
  21%,
  53% {
    opacity: 0.92;
  }
}

@keyframes ambientFilmCrawl {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(1px, -1px, 0);
  }
}

@keyframes atmosphereDrift {
  to { transform: translate3d(7%, 0, 0); opacity: 0.48; }
}

@keyframes sparkRise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.65; }
  100% { transform: translateY(-78vh) translateX(18px); opacity: 0; }
}

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

@keyframes vaultMoteRise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-440px) translateX(20px); opacity: 0; }
}

@keyframes weightRoute {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); filter: brightness(1.2); }
  10% { transform: translate3d(var(--flight-p1-x), var(--flight-p1-y), 0) rotate(0deg) scale(1); filter: brightness(1.24); }
  22% { transform: translate3d(var(--flight-p2-x), var(--flight-p2-y), 0) rotate(0deg) scale(1); filter: brightness(1.3); }
  36% { transform: translate3d(var(--flight-p3-x), var(--flight-p3-y), 0) rotate(0deg) scale(1); filter: brightness(1.34); }
  50% { transform: translate3d(var(--flight-p4-x), var(--flight-p4-y), 0) rotate(-2deg) scale(1); filter: brightness(1.5); }
  62% { transform: translate3d(var(--flight-p5-x), var(--flight-p5-y), 0) rotate(0deg) scale(1); filter: brightness(1.35); }
  76% { transform: translate3d(var(--flight-p6-x), var(--flight-p6-y), 0) rotate(2deg) scale(1); filter: brightness(1.22); }
  89% { transform: translate3d(var(--flight-p7-x), var(--flight-p7-y), 0) rotate(0deg) scale(1); filter: brightness(1.12); }
  100% { transform: translate3d(var(--flight-x), var(--flight-y), 0) rotate(0deg) scale(1); filter: brightness(1); }
}

@keyframes rejectedWeightRoute {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); filter: brightness(1.2); }
  10% { transform: translate3d(var(--flight-p1-x), var(--flight-p1-y), 0) rotate(0deg) scale(1); filter: brightness(1.24); }
  22% { transform: translate3d(var(--flight-p2-x), var(--flight-p2-y), 0) rotate(0deg) scale(1); filter: brightness(1.3); }
  36% { transform: translate3d(var(--flight-p3-x), var(--flight-p3-y), 0) rotate(0deg) scale(1); filter: brightness(1.34); }
  50% { transform: translate3d(var(--flight-p4-x), var(--flight-p4-y), 0) rotate(4deg) scale(1); filter: sepia(0.35) brightness(1.5); }
  62% { transform: translate3d(var(--flight-p5-x), var(--flight-p5-y), 0) rotate(-2deg) scale(1); filter: sepia(0.42) brightness(1.32); }
  76% { transform: translate3d(var(--flight-p6-x), var(--flight-p6-y), 0) rotate(2deg) scale(1); filter: sepia(0.28) brightness(1.2); }
  89% { transform: translate3d(var(--flight-p7-x), var(--flight-p7-y), 0) rotate(0deg) scale(1); filter: brightness(1.1); }
  100% { transform: translate3d(var(--flight-x), var(--flight-y), 0) rotate(0deg) scale(1); filter: brightness(1); }
}

@keyframes validatorClamp {
  from { filter: brightness(1); }
  to { filter: brightness(1.6); }
}

@keyframes scannerIris {
  from { transform: rotate(0deg) scale(1); filter: brightness(1); }
  to { transform: rotate(24deg) scale(0.82); filter: brightness(1.7); }
}

@keyframes railAdvance {
  to { background-position-x: 24px; }
}

@keyframes collectorRoll {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes routingGearForward {
  to { transform: rotate(calc(var(--drive-turn) + 360deg)); }
}

@keyframes routingGearReverse {
  to { transform: rotate(calc(var(--drive-turn-reverse) - 360deg)); }
}

@keyframes routingRack {
  from { transform: translateX(calc(var(--drive-shift) - 5px)); }
  to { transform: translateX(calc(var(--drive-shift) + 5px)); }
}

@keyframes routingPiston {
  from { transform: translateY(calc(var(--piston-stroke) - 5px)); }
  to { transform: translateY(calc(var(--piston-stroke) + 5px)); }
}

@keyframes chuteIndicatorDown {
  from { top: 2px; opacity: 0; }
  18%, 78% { opacity: 1; }
  to { top: calc(100% - 18px); opacity: 0; }
}

@keyframes chuteIndicatorUp {
  from { top: calc(100% - 18px); opacity: 0; }
  18%, 78% { opacity: 1; }
  to { top: 2px; opacity: 0; }
}

@keyframes rejectIndicator {
  from { top: 2px; opacity: 0; }
  18%, 78% { opacity: 1; }
  to { top: calc(100% - 18px); opacity: 0; }
}

@keyframes weightLand {
  0% { transform: translateY(-10px) scale(1.06); filter: brightness(1.45); }
  48% { transform: translateY(3px) scale(0.98); }
  100% { transform: translateY(-2px) scale(1); filter: brightness(1); }
}

@keyframes sigilBeacon {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 1px 0 rgba(255, 250, 218, 0.58), inset 0 -3px 5px rgba(0, 0, 0, 0.8), 0 4px 0 #153633, 0 7px 9px #000, 0 0 7px rgba(67, 178, 169, 0.32); }
  52% { filter: brightness(1.28); box-shadow: inset 0 1px 0 #edfffb, inset 0 -3px 5px #000, 0 4px 0 #235e59, 0 0 22px rgba(93, 216, 204, 0.86); }
}

@keyframes actionLamp {
  to { filter: brightness(1.35); transform: scale(1.12); }
}

@keyframes actionNudge {
  to { transform: translateY(4px); filter: drop-shadow(0 5px 4px #000) brightness(1.22); }
}

@keyframes rackActionArrow {
  to { transform: translateX(-50%) translateY(4px); filter: drop-shadow(0 -4px 4px #000) brightness(1.22); }
}

@keyframes rackCoachGlow {
  0% { filter: drop-shadow(0 0 7px rgba(107, 250, 237, 0.52)); }
  100% { filter: drop-shadow(0 0 19px rgba(137, 255, 245, 0.98)); }
}

@keyframes trayHunger {
  0%, 100% { border-color: #8c672a; box-shadow: inset 0 2px 0 rgba(236, 207, 139, 0.2), inset 0 -8px 18px #000, 0 8px 13px #000; }
  50% { border-color: #e3b657; box-shadow: inset 0 2px 0 rgba(255, 245, 207, 0.36), inset 0 -8px 18px #000, 0 8px 13px #000, 0 0 18px rgba(226, 178, 75, 0.45); }
}

@keyframes missingPulse {
  50% { color: #fff1bd; box-shadow: inset 0 0 7px #000, 0 0 16px rgba(236, 190, 91, 0.72); }
}

@keyframes beamRecoil {
  0%, 100% { translate: 0 0; }
  30% { translate: 0 5px; }
  62% { translate: 0 -2px; }
}

@keyframes gearClackA {
  0% { transform: rotate(calc(var(--drive-turn) - 18deg)); }
  48% { transform: rotate(calc(var(--drive-turn) + 9deg)); filter: brightness(1.45); }
  72% { transform: rotate(calc(var(--drive-turn) - 3deg)); }
  100% { transform: rotate(var(--drive-turn)); filter: brightness(1); }
}

@keyframes gearClackB {
  0% { transform: rotate(calc(var(--drive-turn) - 18deg)); }
  48% { transform: rotate(calc(var(--drive-turn) + 9deg)); filter: brightness(1.45); }
  72% { transform: rotate(calc(var(--drive-turn) - 3deg)); }
  100% { transform: rotate(var(--drive-turn)); filter: brightness(1); }
}

@keyframes reverseGearClackA {
  0% { transform: rotate(calc(var(--drive-turn-reverse) + 20deg)); }
  48% { transform: rotate(calc(var(--drive-turn-reverse) - 10deg)); filter: brightness(1.4); }
  72% { transform: rotate(calc(var(--drive-turn-reverse) + 3deg)); }
  100% { transform: rotate(var(--drive-turn-reverse)); filter: brightness(1); }
}

@keyframes reverseGearClackB {
  0% { transform: rotate(calc(var(--drive-turn-reverse) + 20deg)); }
  48% { transform: rotate(calc(var(--drive-turn-reverse) - 10deg)); filter: brightness(1.4); }
  72% { transform: rotate(calc(var(--drive-turn-reverse) + 3deg)); }
  100% { transform: rotate(var(--drive-turn-reverse)); filter: brightness(1); }
}

@keyframes rackClack {
  0% { transform: translateX(calc(var(--drive-shift) - 7px)); }
  48% { transform: translateX(calc(var(--drive-shift) + 4px)); }
  100% { transform: translateX(var(--drive-shift)); }
}

@keyframes pistonClack {
  0% { transform: translateY(calc(var(--piston-stroke) - 7px)); }
  48% { transform: translateY(calc(var(--piston-stroke) + 4px)); }
  100% { transform: translateY(var(--piston-stroke)); }
}

@keyframes trayRecoil {
  0%, 100% { translate: 0 0; }
  26% { translate: 0 8px; }
  56% { translate: 0 -3px; }
}

@keyframes steamRise {
  to { transform: translateY(-340px) translateX(17px) scale(1.7); opacity: 0; }
}

@keyframes warningShake {
  0%, 100% { translate: 0 0; }
  25% { translate: -1px 0; }
  75% { translate: 1px 0; }
}

@keyframes dangerShake {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 1px; }
  50% { translate: 2px -1px; }
  75% { translate: -1px -1px; }
}

@keyframes breachPlatePulse {
  0%, 100% { filter: brightness(0.96); }
  50% { filter: brightness(1.1); }
}

@keyframes breachPlateRetract {
  0% { opacity: 1; transform: perspective(520px) rotateX(0deg) translateY(0) scale(1); }
  18% { opacity: 1; transform: perspective(520px) rotateX(5deg) translateY(7px) scale(1.01); filter: brightness(1.4); }
  100% { opacity: 0; transform: perspective(520px) rotateX(-78deg) translateY(88px) scale(0.82); filter: brightness(0.55); }
}

@keyframes startShadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes breachWash {
  0% { opacity: 0.72; box-shadow: inset 0 0 38px 8px #fff1b8, inset 0 0 105px 28px rgba(234, 94, 34, 0.72); background: radial-gradient(circle at 50% 38%, rgba(255, 245, 196, 0.22), transparent 46%); }
  28% { opacity: 0.52; box-shadow: inset 0 0 25px 5px #ffbc63, inset 0 0 82px 20px rgba(205, 60, 26, 0.52); background: radial-gradient(circle at 50% 38%, rgba(255, 220, 148, 0.14), transparent 52%); }
  100% { opacity: 0; background: transparent; }
}

@keyframes breachStampIn {
  0% { opacity: 0; transform: translateX(-50%) scale(0.72); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.04); }
  72% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.05); }
}

@keyframes sigilFall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--fall-x), var(--fall-y), 0) rotate(var(--fall-r)); opacity: 0; }
}

@keyframes cavitate {
  0%, 100% { transform: translate3d(0, 0, 0); filter: none; }
  8% { transform: translate3d(-8px, 3px, 0); filter: brightness(1.7); }
  18% { transform: translate3d(7px, -4px, 0); }
  31% { transform: translate3d(-6px, -2px, 0); }
  46% { transform: translate3d(5px, 4px, 0); }
  64% { transform: translate3d(-3px, 1px, 0); }
}

@keyframes sunCavitation {
  from { transform: rotate(var(--sun-swing)) scale(1); }
  65% { transform: rotate(calc(var(--sun-swing) + 1520deg)) scale(1.14); }
  to { transform: rotate(calc(var(--sun-swing) + 1740deg)) scale(1); }
}

@keyframes cinematicSunUnlock {
  from { transform: rotate(var(--sun-swing)) scale(1); }
  72% { transform: rotate(calc(var(--sun-swing) + 1320deg)) scale(1.16); }
  to { transform: rotate(calc(var(--sun-swing) + 1440deg)) scale(1); }
}

@keyframes vaultBloom {
  from { filter: brightness(0.7); }
  to { filter: brightness(1.5); }
}

@keyframes wholeDoorOpen {
  0% { transform: perspective(1100px) rotateY(0deg); filter: brightness(1); }
  18% { transform: perspective(1100px) rotateY(-3deg); filter: brightness(1.7); }
  100% { transform: perspective(1100px) rotateY(-112deg); filter: brightness(0.62); }
}

@keyframes winStampIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 390px) {
  .gameFrame { padding: 5px; }
  .panWrapLeft { left: 15px; }
  .panWrapRight { right: 15px; }
}

@media (max-height: 680px) {
  :root {
    --weight-w: 44px;
    --weight-h: 50px;
  }

  .weight { grid-template-rows: 1fr 21px; padding: 3px 2px 2px; }
  .weight small { width: 24px; height: 24px; font-size: 0.8rem; }
  .weight > .massWindow { width: 38px; height: 19px; font-size: 0.98rem; }
  .panTotal strong { font-size: 0.9rem; }
  .fixedWeight strong { font-size: 1.15rem; }
  .pan-live .fixedWeight strong { font-size: 1.05rem; }

  .gameFrame { grid-template-rows: 40px minmax(0, 1fr); }
  .gameTitle h1 span { font-size: clamp(0.31rem, 1.55vw, 0.38rem); }
  .gameTitle h1 i { font-size: 0.43rem; }
  .gameTitle h1 strong { font-size: clamp(0.61rem, 2.8vw, 0.74rem); }
  .statusRail p { font-size: 0.68rem; }
  .primaryActionCopy strong { font-size: clamp(1rem, 6.5cqw, 1.32rem); }
  .breachLever { width: min(calc(100% - 42px), 294px); height: 88px; }
  .breachLever strong { font-size: 1.18rem; }
  .breachKeyline { top: 14px; }
  .mechanismFace { grid-template-rows: 27px minmax(0, 1fr) 148px 42px 8px; gap: 4px; padding: 6px; }
  .chamberInstruments { top: 0; right: 14px; left: 14px; grid-template-columns: 62px 1fr 56px; height: 112px; }
  .chronometerGauge { width: 72px; height: 76px; grid-template-rows: 14px 1fr 10px 14px; }
  .chronometerGauge output { width: 56px; height: 30px; font-size: 1.42rem; }
  .chronometerGauge small { font-size: 0.34rem; }
  .chamberInstruments .chronometerGauge { transform: scale(0.74); }
  .sunGauge { width: 124px; height: 112px; }
  .sunGauge .dial { width: 96px; height: 96px; }
  .sunDial::before { inset: 14px; }
  .sunIndex { height: 44px; }
  .dialRingInner { inset: 30px; }
  .dialCore { inset: 40px; }
  .countdownGauge { width: 66px; height: 76px; }
  .countdownGauge strong { font-size: 1.28rem; }
  .chamberInstruments .countdownGauge { transform: scale(0.74); }
  .transportRail { top: 88px; right: 43px; left: 94px; height: 46px; }
  .liftHead, .gateHousing { top: 3px; width: 35px; height: 36px; }
  .weighCradle { top: -5px; width: 56px; height: 52px; }
  .routeDiverter { top: 78px; right: 25px; height: 72px; }
  .steamManifold { inset: 143px 18px auto; }
  .upright { top: 151px; }
  .loadShaft { top: 88px; right: 41px; height: 124px; }
  .returnLift { top: 88px; bottom: -41px; left: 94px; }
  .driveTransmission { top: 151px; height: 116px; }
  .beam { top: 174px; }
  .pivot { top: 160px; }
  .panWrap { top: 180px; height: 190px; }
  .sealedTrayFlightOccluder { top: 222px; }
  .panWrapLeft { left: 16px; width: 114px; }
  .panWrapRight { right: 16px; width: 164px; }
  .pan { height: 150px; }
  .fixedWeight { bottom: 4px; width: 48px; height: 28px; }
  .pan-live .fixedWeight { top: 34px; left: 24px; width: 27px; height: calc(var(--weight-h) * 2 + 3px); }
  .pan-live .panTotal { right: 44px; left: 6px; }
  .liveMagazine { top: 34px; right: 6px; }
  .trueZero { bottom: 4px; }
  .collectorRail { top: 4px; right: 16px; left: 94px; height: 18px; }
  .lowerMechanism::before { top: 4px; left: 16px; width: 96px; height: 18px; }
  .lowerMechanism::after { top: 6px; left: 69px; width: 14px; height: 14px; }
  .collectorRail::before, .collectorRail::after, .collectorRail i { width: 14px; height: 14px; }
  .rack {
    --rack-gap: 6px;
    --rack-dock-w: 62px;
    --rack-dock-h: 72px;
    --rack-weight-w: 56px;
    --rack-weight-h: 66px;
    top: 10px;
    min-height: calc(var(--rack-dock-h) + 56px);
    padding-top: 44px;
  }
  .rack::after {
    top: 29px;
    right: 10px;
    left: 10px;
    width: auto;
    height: 5px;
  }
  .rack::before {
    min-width: 114px;
    top: 8px;
    height: 18px;
    font-size: 0.55rem;
  }
  .rack .weight:not(.is-flight-source):not(.is-in-flight) {
    grid-template-rows: 1fr 26px;
    padding: 5px 4px 4px;
  }
  .rack .weight:not(.is-flight-source):not(.is-in-flight) small {
    width: 31px;
    height: 31px;
    font-size: 0.9rem;
  }
  .rack .weight:not(.is-flight-source):not(.is-in-flight) .massWindow {
    width: 46px;
    height: 23px;
    font-size: 1.1rem;
  }
  .rack .weight.is-symbol-hidden:not(.is-flight-source):not(.is-in-flight) {
    grid-template-rows: 1fr;
    padding: 6px 5px;
  }
  .rack .weight.is-symbol-hidden:not(.is-flight-source):not(.is-in-flight) .massWindow {
    width: calc(var(--rack-weight-w) - 10px);
    height: calc(var(--rack-weight-h) - 12px);
    border-radius: 6px;
    font-size: 1.96rem;
    line-height: 0.92;
    gap: 0.24rem;
    padding: 0.16rem 0 0.28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}
/* First-play guidance ports the proven WUYB teaching pattern without moving gameplay. */
[data-onboarding-board="true"] {
  position: relative;
}

.first-play-board-dim {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: none;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 92%, transparent 0 18%, rgba(0, 0, 0, 0.2) 42%, rgba(0, 0, 0, 0.58) 100%),
    rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 0 4rem rgba(0, 0, 0, 0.62);
}

.lockGame.is-first-play-guided .first-play-board-dim,
.lockGame.is-first-play-rescue .first-play-board-dim {
  display: block;
}

.first-play-guide {
  position: absolute;
  z-index: 80;
  top: 1.1%;
  left: 50%;
  width: min(88%, 660px);
  transform: translateX(-50%);
  display: grid;
  gap: 0.35rem;
  pointer-events: none;
  text-align: center;
  filter: drop-shadow(0 0.18rem 0.2rem rgba(0, 0, 0, 0.85));
}

.first-play-guide-copy {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  color: #fff9e9;
  font-family: Georgia, "Times New Roman", serif;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 #11100c,
    0 0 0.55rem rgba(0, 0, 0, 0.95);
}

.first-play-guide-copy strong {
  font-size: clamp(1.05rem, 4.3cqw, 2rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.first-play-guide-copy span,
.first-play-guide-copy small {
  color: #ffd43b;
  font-size: clamp(0.72rem, 2.7cqw, 1.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
}

.first-play-time {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
}

.first-play-time-label {
  display: grid;
  place-items: center;
  min-width: clamp(3.2rem, 13cqw, 5.4rem);
  padding: 0 0.45rem;
  border: 0.18rem solid #fff8de;
  border-radius: 0.32rem;
  background: #ffd43b;
  color: #15130e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.72rem, 2.8cqw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0.65rem rgba(255, 212, 59, 0.46);
}

.first-play-time-track {
  position: relative;
  min-width: 0;
  height: clamp(1.05rem, 4cqw, 1.85rem);
  overflow: hidden;
  border: 0.18rem solid #fff8e8;
  border-radius: 0.32rem;
  background: #1c0813;
  box-shadow:
    0 0.12rem 0 #090706,
    0 0 0.7rem rgba(96, 236, 202, 0.2);
}

.first-play-time-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--guide-time-left, 100%);
  max-width: 100%;
  background: #61e4c1;
  box-shadow: 0 0 0.75rem rgba(97, 228, 193, 0.62);
  transition:
    width 80ms linear,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.first-play-time-segments {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(20% - 0.18rem),
    rgba(19, 52, 45, 0.82) calc(20% - 0.18rem),
    rgba(19, 52, 45, 0.82) 20%
  );
}

.first-play-time.is-warning .first-play-time-fill {
  background: #ffd43b;
  box-shadow: 0 0 0.75rem rgba(255, 212, 59, 0.68);
}

.first-play-time.is-danger .first-play-time-fill {
  background: #ff5b47;
  box-shadow: 0 0 0.8rem rgba(255, 71, 55, 0.74);
}

.first-play-time.is-paused .first-play-time-fill {
  width: 100%;
  background: #61e4c1;
  opacity: 0.66;
}

.first-play-time.is-paused .first-play-time-label::after {
  content: "";
}

[data-onboarding-rack="true"] {
  position: relative;
}

.first-play-rack-guide {
  position: absolute;
  z-index: 76;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
}

.first-play-rack-slot {
  position: relative;
  min-width: 0;
}

.first-play-rack-slot.is-dimmed::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0.1rem;
  border-radius: 0.22rem;
  background: rgba(3, 7, 8, 0.68);
  box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.72);
}

.first-play-rack-slot.is-correct::after,
.first-play-rack-slot.is-highlighted::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.08rem;
  border: 0.12rem solid #62ebc8;
  border-radius: 0.22rem;
  box-shadow:
    inset 0 0 0.8rem rgba(98, 235, 200, 0.45),
    0 0 0.55rem rgba(98, 235, 200, 0.95),
    0 0 1.1rem rgba(98, 235, 200, 0.72);
  animation: first-play-answer-pulse 950ms ease-in-out infinite alternate;
}

.first-play-rack-slot.is-used {
  opacity: 0.38;
}

.lockGame.is-first-play-attract.is-first-play-guided .lowerMechanism,
.lockGame.is-first-play-attract.is-first-play-rescue .lowerMechanism,
.lockGame.is-first-play-attract.is-first-play-guided .statusRailBottom,
.lockGame.is-first-play-attract.is-first-play-rescue .statusRailBottom,
.lockGame.is-first-play-attract.is-first-play-guided .boltTrain,
.lockGame.is-first-play-attract.is-first-play-rescue .boltTrain,
.lockGame.is-followup-ward-cta .lowerMechanism,
.lockGame.is-followup-ward-cta .statusRailBottom,
.lockGame.is-followup-ward-cta .boltTrain {
  z-index: 72;
}

.lockGame.is-first-play-attract.is-first-play-guided .lowerMechanism,
.lockGame.is-first-play-attract.is-first-play-rescue .lowerMechanism {
  border-color: rgba(74, 112, 105, 0.48);
  background:
    linear-gradient(180deg, rgba(18, 20, 16, 0.98), rgba(7, 8, 7, 0.99)),
    var(--tex-brushed);
  box-shadow:
    inset 0 8px 15px #000,
    0 -2px 8px #000;
}

.lockGame.is-first-play-attract.is-first-play-guided .statusRailBottom.is-primary-action,
.lockGame.is-first-play-attract.is-first-play-rescue .statusRailBottom.is-primary-action {
  border: 0.12rem solid #604019;
  border-radius: 0.3rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 179, 0.18),
    inset 0 -2px 0 rgba(4, 14, 14, 0.92),
    0 0 0 1px rgba(30, 12, 3, 0.95);
}

.lockGame.is-first-play-guided .goalCallout::after,
.lockGame.is-first-play-rescue .goalCallout::after {
  animation: first-play-goal-pulse 520ms ease-in-out infinite alternate;
}

.lockGame.is-first-play-guided:not(.is-first-play-attract) .goalCallout::after,
.lockGame.is-first-play-rescue:not(.is-first-play-attract) .goalCallout::after,
.lockGame.is-first-play-guided:not(.is-first-play-attract) .first-play-cta-arrow,
.lockGame.is-first-play-rescue:not(.is-first-play-attract) .first-play-cta-arrow {
  opacity: 0;
  animation: none;
}

.first-play-arrow,
.first-play-cta-arrow {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(100% - 0.04rem);
  width: 3.45rem;
  height: 2.48rem;
  transform: translateX(-50%);
  opacity: 0.94;
  pointer-events: none;
  filter:
    drop-shadow(0 0 0.18rem rgba(100, 255, 222, 0.98))
    drop-shadow(0 0 0.55rem rgba(84, 238, 204, 0.8));
  animation: first-play-arrow-bob 520ms ease-in-out infinite alternate;
}

.first-play-cta-arrow {
  z-index: 8;
  top: -6.3rem;
  bottom: auto;
  width: clamp(4.1rem, 18cqw, 5.5rem);
  height: clamp(3.45rem, 15cqw, 4.7rem);
  opacity: 1;
}

.lockGame.is-first-play-attract .first-play-cta-arrow,
.lockGame.is-followup-ward-cta .first-play-cta-arrow {
  top: auto;
  bottom: calc(100% + 0.08rem);
  width: clamp(5rem, 20.8cqw, 6.15rem);
  height: clamp(3.9rem, 16.3cqw, 4.85rem);
  transform-origin: 50% 100%;
  animation: first-play-attract-arrow-bob 1250ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.lockGame.is-followup-ward-cta .first-play-cta-arrow {
  bottom: calc(100% - 0.56rem);
}

.first-play-arrow i,
.first-play-arrow b,
.first-play-cta-arrow i,
.first-play-cta-arrow b {
  position: absolute;
  left: 50%;
  display: block;
  content: "";
  background: linear-gradient(90deg, #9dffe9 0%, #65eecf 58%, #35bea2 100%);
  box-shadow:
    inset 0 1px 0 rgba(232, 255, 249, 0.75),
    0 0 0.3rem rgba(103, 255, 222, 0.84),
    0 0 0.72rem rgba(83, 234, 202, 0.52);
}

.first-play-arrow i,
.first-play-cta-arrow i {
  top: 0;
  width: 28%;
  height: 66%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.first-play-arrow b,
.first-play-cta-arrow b {
  bottom: 0;
  width: 72%;
  height: 52%;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.first-play-cta-arrow i {
  width: 24%;
  height: 64%;
}

.first-play-cta-arrow b {
  width: 80%;
  height: 52%;
}

.rack .weight.is-onboarding-answer:not(:disabled),
.rack .weight.is-onboarding-focus:not(:disabled) {
  outline: 0.12rem solid rgba(109, 255, 222, 0.86);
  outline-offset: 0.08rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 218, 0.58),
    inset 0 -3px 5px rgba(0, 0, 0, 0.8),
    0 4px 0 color-mix(in srgb, var(--weight-accent) 23%, #120b04),
    0 0 0.65rem rgba(110, 255, 225, 0.96),
    0 0 1.35rem rgba(82, 231, 202, 0.72);
}

.lockGame.is-first-play-guided .first-play-rack-slot.is-highlighted::after,
.lockGame.is-first-play-rescue .first-play-rack-slot.is-highlighted::after,
.lockGame.is-first-play-guided .first-play-rack-slot.is-correct::after,
.lockGame.is-first-play-rescue .first-play-rack-slot.is-correct::after {
  display: none;
  animation: none;
}

.lockGame.is-first-play-guided .rack .weight.is-onboarding-answer:not(:disabled),
.lockGame.is-first-play-rescue .rack .weight.is-onboarding-answer:not(:disabled),
.lockGame.is-first-play-guided .rack .weight.is-onboarding-focus:not(:disabled),
.lockGame.is-first-play-rescue .rack .weight.is-onboarding-focus:not(:disabled) {
  outline: 1px solid rgba(104, 215, 205, 0.58);
  outline-offset: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 198, 0.48),
    inset 0 -3px 5px rgba(0, 0, 0, 0.86),
    0 3px 0 #2b1a08,
    0 0 8px rgba(80, 221, 207, 0.34),
    0 6px 9px #000;
}

.lockGame.is-first-play-attract .lowerMechanism {
  border-color: rgba(74, 112, 105, 0.48);
  background:
    linear-gradient(180deg, rgba(18, 20, 16, 0.98), rgba(7, 8, 7, 0.99)),
    var(--tex-brushed);
  box-shadow:
    inset 0 8px 15px #000,
    0 -2px 8px #000;
}

.lockGame.is-first-play-attract .rack {
  border-color: rgba(57, 102, 96, 0.46);
  background: linear-gradient(180deg, #0b201e, #050d0c 74%);
  box-shadow:
    inset 0 3px 7px #000,
    0 0 0 1px rgba(18, 8, 2, 0.9),
    0 4px 10px #000;
}

.lockGame.is-first-play-attract .rack::before,
.lockGame.is-first-play-attract .rack::after {
  filter: saturate(0.55) brightness(0.48);
}

.lockGame.is-first-play-attract .rack::before {
  opacity: 1;
  color: rgba(220, 246, 240, 0.88);
  border-color: rgba(168, 119, 48, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 230, 161, 0.05), transparent 44%),
    linear-gradient(90deg, #261a0d, #0a211f 20% 80%, #261a0d);
  box-shadow:
    inset 0 0 0 1px rgba(10, 6, 3, 0.72),
    0 2px 5px #000;
  filter: none;
  text-shadow: 0 1px 2px #000;
}

.lockGame.is-first-play-attract .rack::after {
  opacity: 0.34;
}

.lockGame.is-first-play-attract .rack .weightDock {
  border-color: rgba(49, 90, 87, 0.46);
  background: linear-gradient(180deg, rgba(10, 27, 25, 0.86), rgba(5, 11, 10, 0.98) 68%);
  box-shadow:
    inset 0 2px 6px #000,
    0 1px 0 rgba(155, 238, 227, 0.04);
}

.lockGame.is-first-play-attract .statusRailBottom.is-primary-action {
  border-color: #604019;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 179, 0.18),
    inset 0 -2px 0 rgba(4, 14, 14, 0.92),
    0 0 0 1px rgba(30, 12, 3, 0.95);
}

.lockGame.is-first-play-attract .goalCallout {
  border-color: rgba(88, 138, 128, 0.34);
  background:
    linear-gradient(180deg, rgba(16, 43, 39, 0.6), rgba(4, 16, 16, 0.96)),
    linear-gradient(90deg, rgba(5, 14, 13, 0.72), rgba(14, 49, 44, 0.48), rgba(5, 14, 13, 0.72));
}

.lockGame.is-first-play-attract .primaryActionCopy strong {
  color: rgba(241, 191, 77, 0.78);
  text-shadow:
    0 1px 0 rgba(255, 246, 203, 0.3),
    0 -1px 0 rgba(72, 38, 6, 0.58),
    0 0 0.32rem rgba(255, 195, 76, 0.2),
    0 2px 3px #000;
}

.lockGame.is-first-play-attract .primaryActionCopy .goalVerb,
.lockGame.is-first-play-attract .primaryActionCopy .goalUnit {
  color: rgba(230, 183, 66, 0.68);
}

.lockGame.is-first-play-attract .primaryActionCopy .goalAmount {
  color: rgba(246, 199, 93, 0.82);
  text-shadow:
    0 1px 0 rgba(255, 247, 207, 0.34),
    0 -1px 0 rgba(90, 44, 5, 0.64),
    0 0 0.36rem rgba(255, 198, 79, 0.28),
    0 2px 3px #000;
}

.lockGame.is-first-play-attract .goalCallout::after {
  opacity: 0;
  animation: none;
}

.lockGame.is-first-play-attract .rack .weight {
  animation: none;
}

.lockGame.is-first-play-attract .rack .weight:not(:disabled):not(.is-flight-source):not(.is-in-flight) {
  z-index: 10;
  border-color: rgba(132, 244, 224, 0.96);
  background:
    radial-gradient(circle at 31% 16%, rgba(255, 247, 210, 0.34) 0 5%, transparent 19%),
    linear-gradient(145deg, #635020 0%, #24261d 20%, #0c100e 68%, #523510 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 215, 0.72),
    inset 0 -3px 5px rgba(0, 0, 0, 0.76),
    0 3px 0 #2b1a08,
    0 0 0.46rem rgba(106, 255, 226, 0.82),
    0 0 1rem rgba(75, 230, 203, 0.48),
    0 6px 9px #000;
}

.lockGame.is-first-play-attract .rack .weight:not(:disabled):not(.is-flight-source):not(.is-in-flight) .massWindow {
  border-color: rgba(255, 225, 150, 0.86);
  color: #fff9e8;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255, 244, 207, 0.18), transparent 54%),
    linear-gradient(180deg, #24251c, #090b09 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 177, 0.14),
    inset 0 0 8px #000,
    0 0 0.38rem rgba(91, 240, 212, 0.34);
}

.lockGame.is-first-play-attract .rack .weight:not(:disabled):not(.is-flight-source):not(.is-in-flight) .massNumber {
  color: #fff9e8;
  text-shadow:
    0 1px 0 rgba(255, 244, 205, 0.48),
    0 2px 3px #000;
}

.lockGame.is-first-play-attract .rack .weight:not(:disabled):not(.is-flight-source):not(.is-in-flight) .massUnit {
  color: #fff0bd;
}

.lockGame.is-first-play-attract .rack .weight.is-onboarding-answer:not(:disabled):not(.is-flight-source):not(.is-in-flight) {
  z-index: 12;
  animation: first-play-tile-glow 1250ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.lockGame.is-first-play-attract .rack .weight.is-onboarding-answer:not(:disabled):not(.is-flight-source):not(.is-in-flight) .massWindow {
  transform-origin: 50% 50%;
  animation: first-play-tile-face-pulse 1250ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.lockGame.is-first-play-attract .rack .weight.is-onboarding-nonanswer:not(:disabled) {
  filter: none;
}

.rack .weight.is-onboarding-nonanswer {
  filter: none;
}

@keyframes first-play-attract-arrow-bob {
  0%,
  100% {
    opacity: 0.78;
    transform: translate(-50%, 0) scale(0.98);
    filter:
      drop-shadow(0 0 0.12rem rgba(100, 255, 222, 0.72))
      drop-shadow(0 0 0.46rem rgba(84, 238, 204, 0.54));
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.05);
    filter:
      drop-shadow(0 0 0.24rem rgba(100, 255, 222, 1))
      drop-shadow(0 0 0.92rem rgba(84, 238, 204, 0.92));
  }
}

@keyframes first-play-tile-glow {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 215, 0.72),
      inset 0 -3px 5px rgba(0, 0, 0, 0.76),
      0 3px 0 #2b1a08,
      0 0 0.46rem rgba(106, 255, 226, 0.82),
      0 0 1rem rgba(75, 230, 203, 0.48),
      0 6px 9px #000;
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 251, 225, 0.86),
      inset 0 -3px 5px rgba(0, 0, 0, 0.7),
      0 3px 0 #2b1a08,
      0 0 0.88rem rgba(122, 255, 231, 1),
      0 0 1.7rem rgba(85, 236, 208, 0.72),
      0 7px 10px #000;
  }
}

@keyframes first-play-tile-face-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes first-play-attract-goal-glow {
  0%,
  100% {
    opacity: 0.1;
    box-shadow:
      0 0 0.16rem rgba(98, 235, 200, 0.16),
      0 0 0.45rem rgba(98, 235, 200, 0.12);
  }
  50% {
    opacity: 0.28;
    box-shadow:
      0 0 0.28rem rgba(98, 235, 200, 0.34),
      0 0 0.72rem rgba(98, 235, 200, 0.22);
  }
}

@keyframes first-play-arrow-bob {
  from {
    opacity: 0.72;
    transform: translate(-50%, -0.18rem) scale(0.94);
    filter:
      drop-shadow(0 0 0.12rem rgba(100, 255, 222, 0.86))
      drop-shadow(0 0 0.34rem rgba(84, 238, 204, 0.58));
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0.36rem) scale(1.08);
    filter:
      drop-shadow(0 0 0.26rem rgba(100, 255, 222, 1))
      drop-shadow(0 0 0.82rem rgba(84, 238, 204, 0.94));
  }
}

@keyframes first-play-answer-pulse {
  from {
    opacity: 0.78;
  }
  to {
    opacity: 1;
  }
}

@keyframes first-play-goal-pulse {
  from {
    opacity: 0.32;
    border-color: rgba(150, 255, 238, 0.46);
    box-shadow:
      0 0 0.22rem rgba(98, 235, 200, 0.38),
      0 0 0.7rem rgba(98, 235, 200, 0.28);
  }
  to {
    opacity: 1;
    border-color: rgba(213, 255, 247, 0.98);
    box-shadow:
      0 0 0.52rem rgba(98, 235, 200, 0.96),
      0 0 1.2rem rgba(98, 235, 200, 0.72);
  }
}

@media (max-width: 460px) {
  .first-play-guide {
    top: 0.8%;
    width: 92%;
    gap: 0.22rem;
  }

  .first-play-time {
    gap: 0.22rem;
  }

  .first-play-arrow {
    bottom: calc(100% - 0.02rem);
    width: 3.15rem;
    height: 2.3rem;
  }

  .first-play-cta-arrow {
    top: -5.35rem;
    width: 3.85rem;
    height: 3.25rem;
  }

  .lockGame.is-first-play-attract .first-play-cta-arrow,
  .lockGame.is-followup-ward-cta .first-play-cta-arrow {
    top: auto;
    bottom: calc(100% + 0.08rem);
    width: 5rem;
    height: 3.92rem;
  }

  .lockGame.is-followup-ward-cta .first-play-cta-arrow {
    bottom: calc(100% - 0.56rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .first-play-arrow,
  .first-play-cta-arrow,
  .first-play-rack-slot.is-correct::after,
  .first-play-rack-slot.is-highlighted::after,
  .lockGame.is-first-play-guided .goalCallout::after,
  .lockGame.is-first-play-rescue .goalCallout::after,
  .lockGame.is-first-play-attract .rack .weight.is-onboarding-answer:not(:disabled),
  .lockGame.is-first-play-attract .rack .weight.is-onboarding-answer:not(:disabled) .massWindow,
  .ambientDust i,
  .ambientWisps i,
  .ambientGlints i,
  .ambientFilm,
  .lockGame[data-ambient-gauge="true"] .chronometerGauge output,
  .lockGame[data-ambient-gauge="true"] .countdownGauge strong,
  .sunIndex {
    animation: none;
  }
}