.ball-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  align-items: start;
  gap: 1.2rem;
}

.ball-desk {
  position: sticky;
  top: 94px;
}

.ball-stage-panel {
  min-width: 0;
}

.stage-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stage-tool-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding-inline: 0.75rem;
  border-color: rgba(21, 82, 77, 0.35);
  color: var(--forest);
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stage-tool-button[hidden] {
  display: none;
}

.ball-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--forest);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ball-status::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d29a4a;
  content: "";
}

.ball-status.is-playing::before {
  background: var(--teal);
}

.ball-status.is-error::before {
  background: var(--orange);
}

.ball-stage {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background: #02040b;
  border: 2px solid #15263b;
  box-shadow: 0 18px 54px rgba(1, 4, 12, 0.42);
  scroll-margin-top: 88px;
}

.ball-stage canvas {
  display: block;
  width: 100%;
  height: 680px;
  outline-offset: -5px;
  scroll-margin-top: 88px;
}

.ball-stage-panel.is-fullscreen {
  display: grid;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  background: #02040b;
}

.ball-stage-panel.is-fullscreen .stage-heading {
  position: relative;
  z-index: 8;
  padding-top: max(0.8rem, env(safe-area-inset-top));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: 0.8rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  background: var(--white);
}

.ball-stage-panel.is-fullscreen .ball-stage,
.ball-stage-panel.is-fullscreen .ball-stage canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

.game-gate {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  overflow-y: auto;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(7, 30, 25, 0.76);
  place-items: center;
  overscroll-behavior: contain;
  backdrop-filter: blur(10px);
}

.game-gate[hidden],
.game-hud[hidden],
.pickup-toast[hidden],
.event-callout[hidden] {
  display: none;
}

.gate-card {
  width: min(540px, 100%);
  padding: clamp(1.2rem, 4vw, 2.4rem);
  border: 1px solid rgba(255, 253, 247, 0.24);
  background: rgba(7, 62, 53, 0.93);
  color: var(--white);
  box-shadow: 0 26px 80px rgba(2, 30, 25, 0.35);
}

.gate-card .section-kicker {
  margin-bottom: 0.75rem;
  color: #f0b18b;
}

.gate-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.gate-card > p:not(.section-kicker) {
  margin: 1rem 0 0;
  color: rgba(255, 253, 247, 0.76);
  line-height: 1.65;
}

.gate-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.3rem 0 0;
  padding: 0;
  gap: 0.5rem 1.2rem;
  color: rgba(255, 253, 247, 0.78);
  font-size: 0.82rem;
  list-style: none;
}

.gate-controls strong {
  color: var(--white);
}

.gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.45rem;
}

.gate-actions .lab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gate-controls[hidden],
.gate-actions[hidden],
.gate-actions [hidden],
.gate-hint[hidden] {
  display: none;
}

.gate-hint {
  font-family: var(--mono);
  font-size: 0.67rem;
}

.game-hud {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.stage-celebration,
.score-burst-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage-celebration {
  z-index: 3;
  opacity: 0;
}

.score-burst-layer {
  z-index: 5;
}

.celebration-rail {
  position: absolute;
  display: block;
  filter: drop-shadow(0 0 4px rgba(255, 222, 89, 0.78));
}

.celebration-rail-top,
.celebration-rail-bottom {
  right: 0;
  left: 0;
  height: 11px;
  background: radial-gradient(circle at 7px 50%, #fff 0 2px, #ffd54f 2.5px 5px, #ff5b8e 5.5px 7px, transparent 7.5px) 0 0 / 31px 100% repeat-x;
}

.celebration-rail-top { top: 0; }
.celebration-rail-bottom { bottom: 0; transform: rotate(180deg); }

.celebration-rail-right,
.celebration-rail-left {
  top: 0;
  bottom: 0;
  width: 11px;
  background: radial-gradient(circle at 50% 7px, #fff 0 2px, #4df0db 2.5px 5px, #a879ff 5.5px 7px, transparent 7.5px) 0 0 / 100% 31px repeat-y;
}

.celebration-rail-right { right: 0; }
.celebration-rail-left { left: 0; transform: rotate(180deg); }

.celebration-spark {
  position: absolute;
  color: #fff3a6;
  font-size: clamp(1.2rem, 3.2vw, 2.3rem);
  line-height: 1;
  opacity: 0;
  text-shadow: 0 0 6px #ffd54f, 0 0 16px #ff5b8e;
}

.celebration-spark-one { top: 8%; left: 6%; }
.celebration-spark-two { top: 17%; right: 5%; color: #75f5e5; }
.celebration-spark-three { right: 8%; bottom: 18%; }
.celebration-spark-four { bottom: 10%; left: 5%; color: #d2b4ff; }

.ball-stage.is-score-pop .stage-celebration,
.ball-stage.is-combo-pop .stage-celebration,
.ball-stage.is-jackpot .stage-celebration {
  opacity: 1;
}

.ball-stage.is-score-pop .celebration-rail,
.ball-stage.is-combo-pop .celebration-rail {
  animation: celebration-chase 620ms linear both;
}

.ball-stage.is-jackpot .celebration-rail {
  animation: jackpot-chase 780ms linear both;
  filter: drop-shadow(0 0 7px rgba(255, 222, 89, 0.95));
}

.ball-stage.is-combo-pop .celebration-spark,
.ball-stage.is-jackpot .celebration-spark {
  animation: celebration-spark 680ms cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

.ball-stage.is-combo-pop .celebration-spark-two,
.ball-stage.is-jackpot .celebration-spark-two { animation-delay: 25ms; }
.ball-stage.is-combo-pop .celebration-spark-three,
.ball-stage.is-jackpot .celebration-spark-three { animation-delay: 50ms; }
.ball-stage.is-combo-pop .celebration-spark-four,
.ball-stage.is-jackpot .celebration-spark-four { animation-delay: 75ms; }

.score-burst {
  position: absolute;
  top: var(--burst-y, 62%);
  left: var(--burst-x, 50%);
  max-width: min(88%, 34rem);
  padding: 0.38rem 0.72rem;
  border: 2px solid #fff5b8;
  border-radius: 999px;
  background: linear-gradient(110deg, #8e225a, #ee4d75 44%, #b04b12);
  box-shadow: 0 4px 0 #521b49, 0 0 18px rgba(255, 104, 166, 0.65);
  color: #fffdf7;
  font-family: var(--mono);
  font-size: clamp(0.78rem, 2.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.1;
  opacity: 0;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow: 0 2px 0 rgba(65, 20, 50, 0.8);
  text-transform: uppercase;
  transform: translate(-50%, -50%) scale(0.72) rotate(var(--burst-tilt, -2deg));
}

.score-burst:nth-child(5n + 1) { --burst-x: 50%; --burst-y: 66%; --burst-tilt: -2deg; }
.score-burst:nth-child(5n + 2) { --burst-x: 35%; --burst-y: 72%; --burst-tilt: 3deg; }
.score-burst:nth-child(5n + 3) { --burst-x: 65%; --burst-y: 76%; --burst-tilt: -4deg; }
.score-burst:nth-child(5n + 4) { --burst-x: 43%; --burst-y: 82%; --burst-tilt: 2deg; }
.score-burst:nth-child(5n) { --burst-x: 57%; --burst-y: 86%; --burst-tilt: -1deg; }

.score-burst[data-tier="bonus"] {
  border-color: #72ffe3;
  background: linear-gradient(110deg, #075f6a, #079d91 48%, #7552c9);
  box-shadow: 0 4px 0 #11395d, 0 0 22px rgba(87, 255, 223, 0.7);
}

.score-burst[data-tier="jackpot"] {
  padding: 0.52rem 0.92rem;
  border-width: 3px;
  background: linear-gradient(110deg, #a61f72, #ed403b 36%, #f39a1f 70%, #b86f00);
  box-shadow: 0 5px 0 #622052, 0 0 28px rgba(255, 218, 77, 0.78);
  color: #fff8bd;
  font-size: clamp(1rem, 3vw, 1.45rem);
}

.score-burst.is-live {
  animation: score-burst-rise 680ms cubic-bezier(0.15, 0.75, 0.28, 1) both;
}

.crosshair,
.crosshair::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 3px;
  border: 1px solid rgba(7, 30, 25, 0.9);
  background: var(--white);
  content: "";
  transform: translate(-50%, -50%);
}

.crosshair::before {
  width: 3px;
  height: 18px;
  border: 0;
}

.hud-powers {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  max-width: calc(100% - 18rem);
  gap: 0.45rem;
}

.hud-powers span {
  display: none;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(255, 253, 247, 0.25);
  background: rgba(7, 30, 25, 0.8);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.hud-powers span.is-active {
  display: block;
}

.hud-powers #hud-linger.is-active {
  border-color: rgba(255, 127, 211, 0.72);
  color: #ffb5e5;
  box-shadow: 0 0 10px rgba(232, 73, 173, 0.24);
}

.hud-powers #hud-rocket.is-active {
  border-color: rgba(183, 255, 74, 0.76);
  color: #dcffa7;
  box-shadow: 0 0 10px rgba(183, 255, 74, 0.26);
}

.hud-scoreboard {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  justify-items: end;
  gap: 0.35rem;
  color: var(--white);
  font-family: var(--mono);
  text-align: right;
  text-shadow: 0 2px 10px rgba(2, 24, 21, 0.8);
}

.hud-score {
  display: grid;
  min-width: 6.4rem;
  padding: 0.55rem 0.72rem;
  border: 2px solid #ffd451;
  border-radius: 0.35rem;
  background: linear-gradient(145deg, rgba(78, 20, 72, 0.94), rgba(7, 62, 66, 0.94));
  box-shadow: 0 3px 0 rgba(51, 16, 54, 0.9), 0 0 16px rgba(255, 200, 70, 0.28);
  line-height: 1;
}

.hud-score small {
  margin-bottom: 0.18rem;
  color: rgba(255, 253, 247, 0.68);
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hud-score strong {
  color: #fff3a4;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(255, 196, 63, 0.5);
}

.ball-stage.is-score-pop .hud-score,
.ball-stage.is-combo-pop .hud-score,
.ball-stage.is-jackpot .hud-score {
  animation: score-register-pop 680ms cubic-bezier(0.2, 1.4, 0.35, 1) both;
}

.hud-combo-stack {
  display: none;
  width: min(100%, 11rem);
  gap: 0.22rem;
}

.hud-combo-stack:has(.hud-combo.is-active) {
  display: grid;
}

.hud-combo,
.hud-journey,
.hud-journey-progress,
.hud-gravity,
.hud-gravity-countdown,
.hud-target {
  display: none;
  width: max-content;
  max-width: 15rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(255, 253, 247, 0.2);
  background: rgba(7, 30, 25, 0.78);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hud-journey,
.hud-journey-progress {
  display: block;
}

.hud-journey {
  border-color: rgba(255, 225, 90, 0.65);
  background: linear-gradient(90deg, rgba(98, 28, 87, 0.9), rgba(12, 100, 94, 0.9));
  color: #fff3a4;
  box-shadow: 0 0 12px rgba(255, 209, 77, 0.18);
}

.hud-journey-progress {
  border-color: rgba(117, 245, 229, 0.48);
  color: #75f5e5;
}

.hud-combo.is-active,
.hud-gravity.is-active {
  display: block;
}

.hud-combo {
  border-color: #ffcf4b;
  background: linear-gradient(90deg, rgba(131, 31, 88, 0.92), rgba(176, 67, 20, 0.92));
  box-shadow: 0 2px 0 rgba(67, 17, 51, 0.78), 0 0 12px rgba(255, 198, 66, 0.32);
  color: #fff3a4;
  font-size: 0.72rem;
  font-weight: 600;
}

.hud-combo-meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 243, 164, 0.72);
  border-radius: 999px;
  background: rgba(26, 8, 36, 0.78);
}

.hud-combo-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #50e6d3, #ffe15a 48%, #ff5a91);
  box-shadow: 0 0 8px #ffd654;
  transition: width 120ms linear;
}

.hud-gravity {
  display: block;
  color: #8ee8ff;
}

.hud-gravity-countdown,
.hud-target {
  display: block;
}

.hud-gravity-countdown {
  color: rgba(255, 253, 247, 0.82);
}

.hud-target {
  color: #ffd166;
}

.event-callout {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(92%, 800px);
  justify-items: center;
  padding: clamp(0.75rem, 3vw, 1.5rem);
  color: var(--white);
  filter: drop-shadow(0 10px 28px rgba(4, 22, 29, 0.76));
  line-height: 0.9;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.event-callout::before {
  position: absolute;
  z-index: -1;
  inset: -0.62rem 0;
  border-block: 3px solid #ffd34d;
  background: linear-gradient(90deg, transparent, rgba(79, 17, 75, 0.94) 15%, rgba(7, 79, 78, 0.94) 50%, rgba(116, 35, 51, 0.94) 85%, transparent);
  box-shadow: inset 0 5px 0 rgba(255, 100, 151, 0.18), inset 0 -5px 0 rgba(90, 238, 220, 0.18);
  content: "";
}

.event-callout::after {
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -0.62rem;
  left: 8%;
  height: 6px;
  background: radial-gradient(circle, #fff 0 1.5px, #ffd650 2px 3px, transparent 3.5px) 0 50% / 24px 6px repeat-x;
  content: "";
}

.event-callout-stars {
  display: none;
  margin-bottom: 0.28rem;
  color: #7cffe8;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.8vw, 1rem);
  letter-spacing: 0.12em;
  text-shadow: 0 0 9px rgba(93, 255, 226, 0.75);
}

.event-callout-kicker {
  margin-bottom: 0.48rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(10, 27, 40, 0.7);
  color: #fff9c7;
  font-family: var(--mono);
  font-size: clamp(0.62rem, 1.6vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.22em;
}

.event-callout-title {
  max-width: 100%;
  color: #fff29a;
  font-family: var(--serif);
  font-size: clamp(2.35rem, 8vw, 6.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.84;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 0 #a83c22, 0 0 18px rgba(255, 217, 88, 0.6);
}

.event-callout-points {
  min-height: 0.8em;
  margin-top: 0.55rem;
  color: #fffdf7;
  font-family: var(--mono);
  font-size: clamp(0.85rem, 2.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.event-callout.is-active,
.event-callout.is-visible {
  animation: callout-arrive 280ms cubic-bezier(0.2, 1.35, 0.45, 1) both;
}

.event-callout.is-gravity .event-callout-title,
.event-callout[data-kind="gravity"] .event-callout-title {
  color: #ff6fb5;
  text-shadow: 0 0 24px rgba(255, 69, 154, 0.72);
}

.event-callout.is-score .event-callout-stars,
.event-callout[data-kind="score"] .event-callout-stars,
.event-callout.is-combo .event-callout-stars,
.event-callout[data-kind="combo"] .event-callout-stars {
  display: block;
}

.event-callout.is-gravity::before,
.event-callout[data-kind="gravity"]::before {
  border-color: #67e8ff;
  background: linear-gradient(90deg, transparent, rgba(53, 12, 65, 0.9) 18%, rgba(7, 53, 68, 0.9) 82%, transparent);
  animation: gravity-border-arrive 360ms cubic-bezier(0.2, 0.82, 0.35, 1) both;
  transform-origin: center;
}

.event-callout.is-combo .event-callout-title,
.event-callout[data-kind="combo"] .event-callout-title,
.event-callout.is-score .event-callout-title,
.event-callout[data-kind="score"] .event-callout-title {
  color: #fff28d;
}

.event-callout.is-combo::before,
.event-callout[data-kind="combo"]::before {
  border-color: #6ff7df;
  background: linear-gradient(90deg, transparent, rgba(101, 20, 93, 0.96) 12%, rgba(190, 51, 53, 0.96) 48%, rgba(12, 103, 102, 0.96) 88%, transparent);
}

.event-callout[data-tier="cascade"] .event-callout-title {
  color: #79ffe4;
  text-shadow: 0 3px 0 #773a91, 0 0 22px rgba(91, 255, 224, 0.8);
}

.event-callout[data-tier="cascade"]::before {
  border-color: #ffef76;
  background: linear-gradient(90deg, transparent, rgba(93, 25, 116, 0.96) 12%, rgba(18, 115, 112, 0.96) 50%, rgba(185, 48, 84, 0.96) 88%, transparent);
}

.event-callout[data-tier="jackpot"] .event-callout-title {
  color: #fff6a8;
  font-size: clamp(2.65rem, 9vw, 7rem);
  text-shadow: 0 4px 0 #c92d55, 0 0 16px #ffdf4d, 0 0 34px rgba(255, 81, 153, 0.82);
}

.event-callout[data-tier="jackpot"]::before {
  border-color: #fff18a;
  background: linear-gradient(90deg, transparent, rgba(143, 25, 100, 0.97) 10%, rgba(205, 58, 42, 0.97) 34%, rgba(18, 119, 111, 0.97) 70%, rgba(111, 44, 160, 0.97) 90%, transparent);
}

.event-callout[data-tier="jackpot"]::after {
  height: 8px;
  background-size: 21px 8px;
  filter: drop-shadow(0 0 5px #ffd342);
}

@keyframes callout-arrive {
  0% { opacity: 0; transform: translate(-50%, -43%) scale(0.76); }
  64% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes gravity-border-arrive {
  0% { opacity: 0.28; transform: scaleX(0.48); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes celebration-chase {
  0% { background-position: 0 0; opacity: 0.28; }
  38% { opacity: 1; }
  100% { background-position: 62px 62px; opacity: 0.72; }
}

@keyframes jackpot-chase {
  0% { background-position: 0 0; opacity: 0.35; }
  44% { opacity: 1; }
  100% { background-position: 93px 93px; opacity: 0.78; }
}

@keyframes celebration-spark {
  0% { opacity: 0; transform: scale(0.35) rotate(-22deg); }
  42% { opacity: 1; transform: scale(1.18) rotate(8deg); }
  100% { opacity: 0; transform: scale(0.72) rotate(24deg); }
}

@keyframes score-register-pop {
  0% { transform: scale(1); }
  48% { transform: scale(1.14) rotate(-1deg); }
  100% { transform: scale(1); }
}

@keyframes score-burst-rise {
  0% { opacity: 0; transform: translate(-50%, 25%) scale(0.72) rotate(var(--burst-tilt, -2deg)); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(var(--burst-tilt, -2deg)); }
  72% { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(var(--burst-tilt, -2deg)); }
  100% { opacity: 0; transform: translate(-50%, -175%) scale(0.9) rotate(var(--burst-tilt, -2deg)); }
}

@keyframes ticket-toast-arrive {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(0.82); }
  52% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.pickup-toast {
  position: absolute;
  z-index: 5;
  top: 18%;
  left: 50%;
  min-width: min(260px, calc(100% - 2rem));
  max-width: calc(100% - 2rem);
  padding: 0.72rem 1rem;
  border: 2px dashed #fff0a0;
  border-radius: 0.4rem;
  background: linear-gradient(110deg, rgba(116, 28, 101, 0.95), rgba(16, 114, 102, 0.95));
  box-shadow: 0 4px 0 rgba(48, 17, 58, 0.78), 0 0 20px rgba(255, 209, 77, 0.42);
  color: #fff8b8;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.pickup-toast:not([hidden]) {
  animation: ticket-toast-arrive 380ms cubic-bezier(0.2, 1.25, 0.38, 1) both;
}

.key-guide {
  margin: 0;
}

.key-guide > div {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1.2fr);
  gap: 0.65rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.75rem;
}

.key-guide dt {
  color: var(--forest);
  font-family: var(--mono);
  font-weight: 500;
}

.key-guide dd {
  margin: 0;
  color: var(--muted);
}

.option-help {
  margin: 0.25rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.god-mode-row {
  color: #8c5a0c;
  font-weight: 500;
}

.god-mode-row input {
  accent-color: #d39b16;
}

.run-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0.8rem;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.run-stats > div {
  display: grid;
  min-width: 0;
  padding: 0.6rem 0.35rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}

.run-stats span {
  color: var(--muted);
  font-size: 0.59rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.run-stats strong {
  color: var(--forest);
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.run-stats .run-stat-feature strong {
  color: #996313;
  font-size: 1.12rem;
}

.combo-meter {
  position: relative;
  height: 9px;
  margin: -0.38rem 0 0.8rem;
  overflow: hidden;
  border: 1px solid rgba(153, 99, 19, 0.35);
  border-radius: 999px;
  background: rgba(97, 35, 83, 0.12);
  box-shadow: inset 0 1px 3px rgba(67, 35, 17, 0.16);
}

.combo-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #159e8b, #e2ae27 48%, #ef5b4d 76%, #b52e82);
  box-shadow: 0 0 10px rgba(240, 111, 61, 0.55);
  transition: width 120ms linear;
}

.combo-meter::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 253, 247, 0.8) calc(10% - 1px) 10%);
  content: "";
  opacity: 0.5;
}

.journey-card {
  margin: 0 0 0.8rem;
  padding: 0.72rem;
  border: 1px solid rgba(109, 78, 154, 0.3);
  background: linear-gradient(145deg, rgba(116, 74, 157, 0.08), rgba(16, 142, 126, 0.08));
  box-shadow: inset 0 3px 0 rgba(255, 208, 72, 0.14);
}

.journey-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.journey-heading h3 {
  margin: 0;
  color: #6f3e91;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.journey-heading h3 span {
  color: #bd7a0c;
}

.journey-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: right;
}

.journey-stats {
  display: grid;
  grid-template-columns: minmax(42px, 0.5fr) minmax(0, 1.55fr) minmax(58px, 0.7fr);
  margin: 0.65rem 0 0.5rem;
  border-top: 1px solid rgba(109, 78, 154, 0.22);
  border-left: 1px solid rgba(109, 78, 154, 0.22);
}

.journey-stats > div {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0.12rem;
  padding: 0.48rem 0.38rem;
  border-right: 1px solid rgba(109, 78, 154, 0.22);
  border-bottom: 1px solid rgba(109, 78, 154, 0.22);
}

.journey-stats dt {
  color: var(--muted);
  font-size: 0.54rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.journey-stats dd {
  min-width: 0;
  margin: 0;
  color: var(--forest);
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#journey-stage,
#journey-progress {
  color: #8c5a0c;
  font-size: 0.77rem;
  font-variant-numeric: tabular-nums;
}

.journey-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(109, 78, 154, 0.35);
  border-radius: 999px;
  background: rgba(56, 26, 76, 0.1);
}

.journey-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #6b4aa0, #0fa58f 55%, #e5ad27);
  box-shadow: 0 0 8px rgba(15, 165, 143, 0.55);
  transition: width 180ms ease-out;
}

#reset-game {
  width: 100%;
}

.power-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(58px, auto);
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.75rem;
}

.power-icon {
  display: grid;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  place-items: center;
  font-family: var(--mono);
}

.power-copy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.power-copy small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 400;
  line-height: 1.3;
}

.power-help {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.power-row .power-value {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.25;
  text-align: right;
}

.power-row.is-active .power-value {
  color: var(--forest);
  font-weight: 500;
}

.power-rapid .power-icon { color: #b7791f; }
.power-giant .power-icon { color: var(--teal); }
.power-splat .power-icon { color: var(--orange); }
.power-linger .power-icon { color: #b52e82; }
.power-speed .power-icon { color: #2563a4; }
.power-jump .power-icon { color: #7552a3; }
.power-wallwalk .power-icon { color: #18735a; }
.power-rocket .power-icon { color: #5f8700; }

body.comfort-mode .event-callout,
.ball-stage.is-comfort-mode .event-callout,
body:has(#comfort-mode:checked) .event-callout {
  animation: none;
}

body.comfort-mode .event-callout-title,
.ball-stage.is-comfort-mode .event-callout-title,
body:has(#comfort-mode:checked) .event-callout-title {
  animation: none !important;
}

body.comfort-mode .event-callout::before,
.ball-stage.is-comfort-mode .event-callout::before,
body:has(#comfort-mode:checked) .event-callout::before {
  animation: none !important;
}

body.comfort-mode .stage-celebration,
.ball-stage.is-comfort-mode .stage-celebration,
body:has(#comfort-mode:checked) .stage-celebration,
body.comfort-mode .score-burst-layer,
.ball-stage.is-comfort-mode .score-burst-layer,
body:has(#comfort-mode:checked) .score-burst-layer,
body.comfort-mode .event-callout-stars,
.ball-stage.is-comfort-mode .event-callout-stars,
body:has(#comfort-mode:checked) .event-callout-stars {
  display: none !important;
}

body.comfort-mode .hud-score,
.ball-stage.is-comfort-mode .hud-score,
body:has(#comfort-mode:checked) .hud-score,
body.comfort-mode .pickup-toast,
.ball-stage.is-comfort-mode .pickup-toast,
body:has(#comfort-mode:checked) .pickup-toast {
  animation: none !important;
}

body.comfort-mode .hud-combo-meter span,
.ball-stage.is-comfort-mode .hud-combo-meter span,
body:has(#comfort-mode:checked) .hud-combo-meter span,
body.comfort-mode .journey-meter span,
.ball-stage.is-comfort-mode .journey-meter span,
body:has(#comfort-mode:checked) .journey-meter span {
  transition: none !important;
}

.noscript-note {
  width: min(1180px, calc(100% - 3rem));
  margin: 2rem auto;
  padding: 1rem;
  border-left: 3px solid var(--orange);
}

@media (max-width: 1100px) {
  .ball-layout {
    grid-template-columns: 1fr;
  }

  .ball-desk {
    position: static;
  }

  .run-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1101px) and (max-height: 900px) {
  .ball-desk {
    position: static;
  }
}

@media (max-width: 700px) {
  .stage-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .ball-stage,
  .ball-stage canvas {
    min-height: 520px;
    height: 520px;
  }

  .gate-controls {
    grid-template-columns: 1fr;
  }

  .hud-scoreboard {
    top: 0.65rem;
    right: 0.65rem;
    max-width: calc(100% - 1.3rem);
  }

  .hud-powers {
    top: auto;
    right: 0.65rem;
    bottom: 0.65rem;
    left: 0.65rem;
    display: grid;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hud-powers span {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
  }

  .run-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-callout-title {
    font-size: clamp(2.1rem, 12vw, 4.4rem);
  }

  .event-callout[data-tier="jackpot"] .event-callout-title {
    font-size: clamp(2.3rem, 13vw, 4.8rem);
  }

  .score-burst {
    max-width: calc(100% - 1.5rem);
    letter-spacing: 0.05em;
  }
}

@media (max-width: 480px) {
  .ball-stage,
  .ball-stage canvas {
    min-height: 450px;
    height: 450px;
  }

  .gate-actions {
    display: grid;
  }

  .gate-actions > * {
    width: 100%;
  }

  .power-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(54px, auto);
  }

  .journey-heading {
    grid-template-columns: 1fr;
  }

  .journey-heading p {
    text-align: left;
  }

  .hud-score {
    min-width: 5.5rem;
    padding: 0.38rem 0.48rem;
  }

  .hud-score strong {
    font-size: 1rem;
  }

  .hud-combo,
  .hud-journey,
  .hud-journey-progress,
  .hud-gravity,
  .hud-gravity-countdown,
  .hud-target {
    max-width: 9rem;
    font-size: 0.54rem;
  }

  .hud-combo-stack {
    width: min(100%, 9rem);
  }

  .event-callout {
    width: 96%;
    padding-inline: 0.5rem;
  }

  .event-callout::before {
    inset-inline: -0.35rem;
  }

  .event-callout-points {
    max-width: 94%;
    overflow-wrap: anywhere;
  }

  .hud-powers {
    gap: 0.25rem;
  }

  .hud-powers span {
    padding: 0.28rem 0.38rem;
    font-size: 0.52rem;
  }

  .game-gate {
    padding: 0.75rem;
    place-items: start center;
  }

  .gate-card {
    padding: 1rem;
  }

  .gate-card h3 {
    font-size: 2rem;
  }

  .gate-card > p:not(.section-kicker) {
    margin-top: 0.7rem;
    line-height: 1.45;
  }

  .gate-controls {
    margin-top: 0.8rem;
  }

  .gate-actions {
    margin-top: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-callout,
  .event-callout-title,
  .event-callout::before {
    animation: none !important;
  }

  .combo-meter span {
    transition: none;
  }

  .stage-celebration,
  .score-burst-layer,
  .event-callout-stars {
    display: none !important;
  }

  .hud-score,
  .pickup-toast,
  .celebration-rail,
  .celebration-spark,
  .score-burst {
    animation: none !important;
  }

  .hud-combo-meter span {
    transition: none !important;
  }

  .journey-meter span {
    transition: none !important;
  }
}