:root {
  color-scheme: dark;
  --panel: rgba(7, 10, 20, 0.76);
  --line: rgba(221, 244, 255, 0.12);
  --soft-line: rgba(221, 244, 255, 0.08);
  --text: #f7fbff;
  --muted: rgba(231, 244, 255, 0.66);
  --gold: #f6cf67;
  --gold-bright: #ffe69a;
  --teal: #6ef3d2;
  --cyan: #7ddfff;
  --violet: #9474ff;
  --rose: #ff7cb5;
  --capsule-red: #f2352f;
  --capsule-red-dark: #a90f1f;
  --capsule-white: #f8fbff;
  --capsule-belt: #111827;
  --ink: #070b14;
  --glass-edge: rgba(255, 255, 255, 0.16);
  --shine: rgba(255, 247, 205, 0.9);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(3, 5, 13, 0.2), rgba(3, 5, 13, 0.8)),
    radial-gradient(circle at 18% 10%, rgba(110, 243, 210, 0.18), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(148, 116, 255, 0.22), transparent 28%),
    radial-gradient(circle at 68% 72%, rgba(255, 124, 181, 0.12), transparent 32%),
    linear-gradient(135deg, #02040b 0%, #08111f 48%, #050712 100%);
  font-family:
    "Outfit",
    "Satoshi",
    "Segoe UI",
    Arial,
    sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 28%, rgba(255, 230, 154, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(141, 248, 255, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 66%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.045) 49%, transparent 56%);
  background-size: 420px 320px, 520px 390px, 470px 360px, 610px 450px, 100% 100%;
  content: "";
  opacity: 0.54;
  pointer-events: none;
}

button,
input,
textarea {
  font: inherit;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  grid-template-columns: minmax(320px, 400px) 1fr;
}

.control-panel {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100vh;
  overflow: auto;
  flex-direction: column;
  gap: 18px;
  padding: 30px 28px;
  border-right: 1px solid var(--glass-edge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%),
    var(--panel);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    16px 0 70px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(22px);
}

.eyebrow {
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  display: grid;
  gap: 2px;
  margin: -4px 0 0;
  color: #ffffff;
  font-size: 38px;
  font-weight: 900;
  line-height: 0.98;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

.control-note {
  margin-top: -6px;
  color: rgba(255, 230, 154, 0.82);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field span,
.section-title {
  color: var(--muted);
  font-size: 13px;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.12);
  outline: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.field input {
  height: 44px;
  padding: 0 14px;
}

.field textarea {
  min-height: 170px;
  resize: vertical;
  padding: 14px;
  line-height: 1.55;
}

.file-control {
  position: relative;
  display: grid;
  min-height: 48px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.file-button {
  border-radius: 7px;
  padding: 8px 10px;
  color: #161103;
  background: linear-gradient(180deg, #fff0a8, #f6cf67);
  font-size: 12px;
  font-weight: 900;
}

.file-name {
  min-width: 0;
  overflow: hidden;
  color: rgba(231, 244, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.field input:focus,
.field textarea:focus {
  border-color: rgba(110, 243, 210, 0.58);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 0 0 3px rgba(110, 243, 210, 0.12);
}

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.button {
  position: relative;
  height: 46px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  overflow: hidden;
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    filter 160ms ease;
}

.button::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.42) 46%, transparent 62%);
  content: "";
  opacity: 0;
  transform: translateX(-70%);
  transition: opacity 180ms ease, transform 480ms ease;
}

.button:hover:not(:disabled)::before {
  opacity: 1;
  transform: translateX(70%);
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.button.primary {
  color: #161103;
  background:
    radial-gradient(circle at 30% 20%, #fff8dc, transparent 34%),
    linear-gradient(180deg, #fff0a8, #f6cf67 52%, #bd8120);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 18px 36px rgba(246, 207, 103, 0.2);
}

.button.secondary {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.message {
  min-height: 20px;
  font-size: 13px;
}

.message.error {
  color: #ff9d93;
}

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

.stats div {
  padding: 15px 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.14);
}

.stats dt {
  color: var(--muted);
  font-size: 12px;
}

.stats dd {
  margin: 8px 0 0;
  color: var(--gold-bright);
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 22px rgba(246, 207, 103, 0.2);
}

.stats-note {
  margin-top: -8px;
  color: rgba(231, 244, 255, 0.6);
  font-size: 12px;
  font-weight: 700;
}

.text-button {
  align-self: flex-start;
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.text-button:hover {
  color: var(--text);
}

.history-block {
  margin-top: auto;
  border-top: 1px solid var(--soft-line);
  padding-top: 18px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.history-list li {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 10px;
}

.history-name {
  font-weight: 700;
}

.history-meta {
  color: var(--muted);
  font-size: 12px;
}

.stage {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  padding: 30px clamp(22px, 3vw, 36px) 32px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 18%),
    radial-gradient(ellipse at 74% 26%, rgba(255, 230, 154, 0.07), transparent 30%);
}

.stage::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 46% 56%, rgba(236, 249, 255, 0.12), transparent 30%),
    radial-gradient(circle at 50% 58%, rgba(110, 243, 210, 0.14), transparent 28%),
    radial-gradient(circle at 72% 48%, rgba(126, 168, 255, 0.13), transparent 27%);
  content: "";
}

.stage::after {
  position: absolute;
  inset: -16%;
  z-index: 0;
  background:
    conic-gradient(
      from 124deg at 43% 52%,
      transparent 0deg,
      rgba(236, 249, 255, 0.2) 36deg,
      transparent 68deg,
      rgba(126, 168, 255, 0.18) 124deg,
      transparent 164deg,
      rgba(236, 249, 255, 0.14) 232deg,
      transparent 292deg,
      rgba(89, 255, 210, 0.12) 328deg,
      transparent 360deg
    );
  content: "";
  filter: blur(5px);
  mask-image: radial-gradient(ellipse at 43% 52%, #000 0 54%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0.82;
  pointer-events: none;
  animation: card-vortex 18s linear infinite;
}

.stage-header,
.machine-area {
  position: relative;
}

.stage > .aurora-ribbon,
.stage > .pokemon-spark {
  position: absolute;
}

.pokemon-spark {
  position: absolute;
  z-index: 0;
  width: clamp(68px, 8vw, 110px);
  height: clamp(110px, 14vw, 190px);
  opacity: 0.22;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(236, 249, 255, 0), rgba(236, 249, 255, 0.84), rgba(89, 255, 210, 0));
  clip-path: polygon(58% 0, 26% 44%, 48% 44%, 34% 100%, 78% 34%, 54% 34%);
  filter: blur(0.4px) drop-shadow(0 0 18px rgba(89, 255, 210, 0.34));
}

.spark-one {
  right: 8%;
  bottom: 8%;
  animation: spark-float 7s ease-in-out infinite alternate;
}

.spark-two {
  top: 18%;
  left: 42%;
  width: clamp(48px, 6vw, 88px);
  height: clamp(78px, 10vw, 130px);
  animation: spark-float 8s ease-in-out infinite alternate-reverse;
}

.aurora-ribbon {
  position: absolute;
  left: -10%;
  width: 120%;
  filter: blur(28px);
  opacity: 0.8;
  transform-origin: center;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ribbon-one {
  top: 10%;
  height: 170px;
  background: linear-gradient(90deg, transparent, rgba(110, 243, 210, 0.58), rgba(125, 223, 255, 0.2), transparent);
  animation: aurora-flow 9s ease-in-out infinite alternate;
}

.ribbon-two {
  top: 24%;
  height: 220px;
  background: linear-gradient(90deg, transparent, rgba(148, 116, 255, 0.5), rgba(255, 124, 181, 0.22), transparent);
  animation: aurora-flow 12s ease-in-out infinite alternate-reverse;
}

.ribbon-three {
  bottom: -4%;
  height: 190px;
  background: linear-gradient(90deg, transparent, rgba(246, 207, 103, 0.22), rgba(110, 243, 210, 0.3), transparent);
  animation: aurora-flow 10s ease-in-out infinite alternate;
}

.stage-header {
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.stage-brand {
  display: grid;
  gap: 8px;
  padding-top: 6px;
}

.stage-platform {
  width: max-content;
  max-width: 340px;
  color: #ecfff9;
  background: linear-gradient(90deg, #6ef3d2, #ffffff 42%, #ffe69a 68%, #7ddfff);
  background-clip: text;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: none;
  text-shadow:
    0 0 10px rgba(110, 243, 210, 0.38),
    0 0 24px rgba(125, 223, 255, 0.22),
    0 0 38px rgba(255, 230, 154, 0.14);
  -webkit-text-fill-color: transparent;
  animation: platform-shimmer 3.8s ease-in-out infinite;
}

.stage-subline {
  width: fit-content;
  border: 1px solid rgba(255, 230, 154, 0.28);
  border-radius: 999px;
  padding: 5px 9px;
  color: rgba(255, 230, 154, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 230, 154, 0.12), rgba(255, 230, 154, 0.035));
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.stage-title {
  max-width: min(760px, 72vw);
  color: rgba(255, 255, 255, 0.97);
  font-size: 42px;
  font-weight: 900;
  line-height: 0.98;
  text-align: right;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.34);
  outline: none;
}

.stage-title:focus {
  color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(246, 207, 103, 0.28);
}

.machine-area {
  z-index: 1;
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

.launch-trail {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.launch-trail::before,
.launch-trail::after,
.launch-trail span {
  position: absolute;
  content: "";
  pointer-events: none;
}

.launch-trail::before {
  left: var(--trail-x, 42%);
  top: var(--trail-y, 50%);
  width: var(--trail-width, 320px);
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(236, 249, 255, 0.8), rgba(89, 255, 210, 0.5), transparent);
  filter: blur(7px);
  transform: rotate(var(--trail-angle, -12deg));
  transform-origin: left center;
}

.launch-trail::after {
  left: var(--exit-x, 45%);
  top: var(--exit-y, 50%);
  width: 118px;
  aspect-ratio: 1;
  border: 1px solid rgba(236, 249, 255, 0.62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 249, 255, 0.34), rgba(89, 255, 210, 0.16) 42%, transparent 68%);
  filter: blur(0.2px);
  transform: translate(-50%, -50%) scale(0.55);
}

.launch-trail span {
  left: var(--exit-x, 45%);
  top: var(--exit-y, 50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 154, 0.74), transparent 68%);
  transform: translate(-50%, -50%);
}

.launch-trail span:nth-child(2) {
  width: 190px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 154, 0.64), transparent);
  filter: blur(8px);
}

.machine-area.is-launching .launch-trail {
  opacity: 1;
}

.machine-area.is-launching .launch-trail::before {
  animation: launch-beam 1.22s ease-out both;
}

.machine-area.is-launching .launch-trail::after {
  animation: launch-exit-ring 720ms ease-out both;
}

.machine-area.is-launching .ball-chamber {
  box-shadow:
    inset 0 0 68px rgba(255, 255, 255, 0.16),
    0 0 150px rgba(236, 249, 255, 0.36),
    0 0 230px rgba(89, 255, 210, 0.26),
    0 0 280px rgba(255, 230, 154, 0.18);
}

.winner-flight-ball {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  display: grid;
  width: 112px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.2) 13%, transparent 14%),
    linear-gradient(180deg, #ff6b5f 0%, var(--capsule-red) 42%, var(--capsule-belt) 43%, var(--capsule-belt) 55%, var(--capsule-white) 56%, #cbd7e6 100%);
  box-shadow:
    inset -14px -16px 26px rgba(4, 10, 20, 0.32),
    inset 8px 8px 18px rgba(255, 255, 255, 0.22),
    0 0 36px rgba(236, 249, 255, 0.72),
    0 0 90px rgba(89, 255, 210, 0.44),
    0 0 130px rgba(255, 230, 154, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--flight-start-x, 0), var(--flight-start-y, 0)) scale(0.42);
  will-change: transform, opacity, filter;
}

.winner-flight-ball::before {
  position: absolute;
  top: 49%;
  left: 50%;
  width: 32%;
  aspect-ratio: 1;
  border: 7px solid var(--capsule-belt);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff, #e9f7ff 48%, #8df8ff 100%);
  content: "";
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(141, 248, 255, 0.45);
}

.winner-flight-ball::after {
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(236, 249, 255, 0.34), transparent 72deg, rgba(255, 230, 154, 0.28), transparent);
  content: "";
  mix-blend-mode: screen;
  animation: premium-spin 1.1s linear infinite;
}

.winner-flight-ball span {
  display: none;
}

.winner-flight-ball.launch {
  animation: prize-ball-flight 1.32s cubic-bezier(0.12, 0.9, 0.16, 1) both;
}

.machine {
  position: relative;
  display: flex;
  min-height: min(70vh, 720px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.machine::before {
  position: absolute;
  width: min(52vw, 570px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(
      from 18deg,
      transparent,
      rgba(255, 230, 154, 0.16),
      transparent 38deg,
      rgba(236, 249, 255, 0.14),
      transparent 92deg,
      rgba(89, 255, 210, 0.14),
      transparent 150deg,
      rgba(255, 255, 255, 0.12),
      transparent
    );
  content: "";
  filter: blur(1px);
  opacity: 0.64;
  pointer-events: none;
  animation: premium-spin 15s linear infinite;
}

.stage.is-charging .ball-chamber {
  box-shadow:
    inset 0 0 48px rgba(255, 255, 255, 0.1),
    0 0 120px rgba(89, 255, 210, 0.26),
    0 0 180px rgba(126, 168, 255, 0.2);
}

.stage.is-revealing .ball-chamber {
  box-shadow:
    inset 0 0 58px rgba(255, 255, 255, 0.16),
    0 0 150px rgba(236, 249, 255, 0.34),
    0 0 220px rgba(89, 255, 210, 0.26),
    0 0 260px rgba(126, 168, 255, 0.18);
}

.ball-chamber {
  position: relative;
  width: min(50vw, 560px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.28), transparent 20%),
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.14), transparent 33%),
    radial-gradient(circle at 64% 78%, rgba(89, 255, 210, 0.14), transparent 28%),
    radial-gradient(circle at 40% 44%, rgba(126, 168, 255, 0.12), transparent 36%),
    rgba(7, 11, 24, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 0 54px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 34px 88px rgba(0, 0, 0, 0.42),
    0 0 120px rgba(89, 255, 210, 0.22),
    0 0 160px rgba(255, 230, 154, 0.08);
}

.ball-chamber::before {
  position: absolute;
  inset: -8%;
  z-index: 1;
  border-radius: 50%;
  background:
    conic-gradient(
      from 218deg,
      transparent 0deg,
      rgba(236, 249, 255, 0.18) 42deg,
      transparent 74deg,
      rgba(126, 168, 255, 0.16) 136deg,
      transparent 190deg,
      rgba(89, 255, 210, 0.15) 246deg,
      transparent 316deg
    );
  content: "";
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0.46;
  pointer-events: none;
  animation: chamber-vortex 13s linear infinite;
}

.ball-chamber::after {
  position: absolute;
  inset: 6%;
  z-index: 4;
  border: 1px solid rgba(221, 244, 255, 0.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#ballCanvas {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.glass-sheen {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.26), transparent 24%),
    linear-gradient(128deg, rgba(255, 255, 255, 0.18), transparent 24%, transparent 70%, rgba(255, 255, 255, 0.08)),
    linear-gradient(70deg, transparent 0 44%, rgba(255, 255, 255, 0.14) 48%, transparent 54%);
  pointer-events: none;
  animation: glass-sweep 5.6s ease-in-out infinite alternate;
}

.machine-plinth {
  width: min(36vw, 380px);
  height: 18px;
  margin-top: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(246, 207, 103, 0.88), transparent);
  filter: blur(0.2px);
  box-shadow:
    0 14px 30px rgba(246, 207, 103, 0.2),
    0 0 42px rgba(255, 230, 154, 0.18);
}

.winner-zone {
  position: relative;
  display: grid;
  min-height: 360px;
  grid-template-rows: auto minmax(190px, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 22px 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 46%, rgba(255, 230, 154, 0.055)),
    radial-gradient(ellipse at 50% 24%, rgba(255, 230, 154, 0.14), transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 28px 70px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  text-align: center;
}

.winner-zone::before {
  position: absolute;
  inset: -30%;
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255, 230, 154, 0.18),
      transparent 62deg,
      rgba(236, 249, 255, 0.12),
      transparent 128deg,
      rgba(89, 255, 210, 0.12),
      transparent
    );
  content: "";
  opacity: 0.46;
  pointer-events: none;
  animation: premium-spin 18s linear infinite reverse;
}

.winner-zone::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 24%, rgba(255, 230, 154, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 68%, rgba(141, 248, 255, 0.38) 0 1px, transparent 2px),
    linear-gradient(120deg, transparent 0 40%, rgba(255, 255, 255, 0.08) 50%, transparent 61%);
  background-size: 170px 150px, 210px 180px, 190px 170px, 100% 100%;
  content: "";
  opacity: 0.52;
  pointer-events: none;
}

.winner-zone > * {
  position: relative;
  z-index: 1;
}

.winner-caption {
  color: rgba(255, 230, 154, 0.78);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  transition: color 260ms ease, transform 260ms ease;
}

.reward-showcase {
  position: relative;
  display: grid;
  min-height: 204px;
  overflow: hidden;
  align-content: center;
  justify-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 230, 154, 0.16);
  border-radius: 14px;
  padding: 18px 16px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 230, 154, 0.24), transparent 30%),
    radial-gradient(circle at 50% 84%, rgba(89, 255, 210, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -30px 80px rgba(89, 255, 210, 0.06),
    0 20px 44px rgba(0, 0, 0, 0.18);
}

.reward-showcase::before {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(
      from 34deg,
      transparent,
      rgba(255, 230, 154, 0.18),
      transparent 80deg,
      rgba(236, 249, 255, 0.14),
      transparent 170deg,
      rgba(89, 255, 210, 0.12),
      transparent
    );
  content: "";
  opacity: 0.55;
  pointer-events: none;
  animation: premium-spin 16s linear infinite;
}

.reward-showcase > * {
  position: relative;
  z-index: 1;
}

.reward-kicker {
  color: rgba(255, 230, 154, 0.78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.reward-text {
  max-width: 100%;
  color: #fff8dc;
  font-size: 34px;
  font-weight: 950;
  line-height: 0.96;
  overflow-wrap: anywhere;
  outline: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 28px rgba(255, 230, 154, 0.24),
    0 0 54px rgba(89, 255, 210, 0.16);
}

.reward-text:focus {
  color: #ffffff;
  text-shadow:
    0 0 18px rgba(255, 230, 154, 0.42),
    0 0 34px rgba(89, 255, 210, 0.22);
}

.reward-image-frame {
  display: grid;
  width: min(70%, 210px);
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(145deg, rgba(8, 13, 28, 0.58), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 42px rgba(0, 0, 0, 0.22),
    0 0 34px rgba(255, 230, 154, 0.14);
}

.reward-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reward-showcase.has-image {
  grid-template-rows: auto minmax(118px, 1fr) auto;
  align-content: stretch;
}

.reward-showcase.has-image .reward-text {
  font-size: 22px;
  line-height: 1.08;
}

.reward-shine {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.2) 48%, transparent 58%);
  opacity: 0.44;
  pointer-events: none;
  transform: translateX(-32%);
  animation: reward-shine 4.2s ease-in-out infinite;
}

.winner-stack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 166px;
  padding-top: 2px;
}

.prize-dock {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 0;
  width: 148px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.72;
  pointer-events: none;
  transform: translateX(-50%) scale(0.9);
}

.prize-dock::before,
.prize-dock::after,
.prize-dock span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  content: "";
}

.prize-dock::before {
  border: 1px solid rgba(255, 230, 154, 0.34);
  background:
    radial-gradient(circle, transparent 46%, rgba(255, 230, 154, 0.18) 48%, transparent 62%),
    conic-gradient(from 0deg, transparent, rgba(236, 249, 255, 0.26), transparent 78deg, rgba(89, 255, 210, 0.22), transparent);
  box-shadow:
    inset 0 0 28px rgba(255, 230, 154, 0.08),
    0 0 48px rgba(89, 255, 210, 0.12);
}

.prize-dock::after {
  inset: 32%;
  background: radial-gradient(circle, rgba(236, 249, 255, 0.5), rgba(89, 255, 210, 0.14) 48%, transparent 72%);
  filter: blur(6px);
  opacity: 0.7;
}

.prize-dock span:nth-child(1) {
  inset: 12%;
  border: 1px dashed rgba(236, 249, 255, 0.28);
  animation: trophy-rays-spin 8s linear infinite;
}

.prize-dock span:nth-child(2) {
  inset: 27%;
  background: conic-gradient(from 120deg, transparent, rgba(255, 230, 154, 0.38), transparent 96deg);
  filter: blur(4px);
  animation: trophy-rays-spin 4.6s linear infinite reverse;
}

.winner-zone.is-announcing .prize-dock {
  animation: prize-dock-ready 1.35s ease-in-out infinite alternate;
}

.winner-zone.has-winner .prize-dock {
  animation: prize-dock-hit 720ms cubic-bezier(0.14, 0.9, 0.22, 1) both;
}

.winner-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: 100%;
}

.winner-celebration {
  position: relative;
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  margin-bottom: -72px;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(0.74);
}

.celebration-rays,
.celebration-rays span,
.trophy-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.celebration-rays {
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 231, 148, 0.42), transparent 44%),
    conic-gradient(
      from 20deg,
      transparent,
      rgba(236, 249, 255, 0.26),
      transparent 28deg,
      rgba(89, 255, 210, 0.22),
      transparent 70deg,
      rgba(255, 231, 148, 0.32),
      transparent 114deg,
      rgba(126, 168, 255, 0.26),
      transparent 162deg,
      rgba(236, 249, 255, 0.2),
      transparent
    );
  filter: blur(0.2px);
  opacity: 0.86;
  box-shadow:
    inset 0 0 38px rgba(255, 255, 255, 0.12),
    0 0 60px rgba(255, 230, 154, 0.18);
}

.celebration-rays span {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(236, 249, 255, 0.28), transparent 54deg);
  filter: blur(6px);
}

.celebration-rays span:nth-child(2) {
  width: 66%;
  height: 66%;
  background: conic-gradient(from 130deg, transparent, rgba(89, 255, 210, 0.3), transparent 62deg);
}

.celebration-rays span:nth-child(3) {
  width: 52%;
  height: 52%;
  background: radial-gradient(circle, rgba(255, 231, 148, 0.58), transparent 64%);
}

.trophy-icon {
  inset: 23%;
  filter:
    drop-shadow(0 14px 28px rgba(255, 204, 86, 0.28))
    drop-shadow(0 0 24px rgba(236, 249, 255, 0.24));
}

.trophy-cup {
  position: absolute;
  top: 9%;
  left: 25%;
  width: 50%;
  height: 40%;
  border-radius: 8px 8px 18px 18px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(135deg, #fff3b0, #f6cf67 42%, #b87b19 100%);
  box-shadow: inset -9px -8px 14px rgba(126, 72, 8, 0.28);
}

.trophy-handle {
  position: absolute;
  top: 17%;
  width: 24%;
  height: 28%;
  border: 5px solid #f6cf67;
  border-radius: 999px;
}

.trophy-handle.left {
  left: 10%;
  border-right-color: transparent;
}

.trophy-handle.right {
  right: 10%;
  border-left-color: transparent;
}

.trophy-stem {
  position: absolute;
  top: 48%;
  width: 14%;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe69a, #c9891f);
}

.trophy-base {
  position: absolute;
  top: 67%;
  width: 58%;
  height: 18%;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #ffe69a, #b87b19);
}

.winner-ball {
  position: relative;
  display: grid;
  width: 118px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  color: var(--capsule-belt);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.2) 13%, transparent 14%),
    linear-gradient(180deg, #ff6b5f 0%, var(--capsule-red) 42%, var(--capsule-belt) 43%, var(--capsule-belt) 55%, var(--capsule-white) 56%, #cbd7e6 100%);
  font-size: 18px;
  font-weight: 800;
  transform: translateY(0) scale(1);
  box-shadow:
    inset -14px -16px 26px rgba(4, 10, 20, 0.32),
    inset 8px 8px 18px rgba(255, 255, 255, 0.22),
    0 18px 48px rgba(236, 249, 255, 0.3),
    0 0 72px rgba(89, 255, 210, 0.24),
    0 0 110px rgba(255, 230, 154, 0.1);
}

.winner-ball::before {
  position: absolute;
  top: 49%;
  left: 50%;
  width: 32%;
  aspect-ratio: 1;
  border: max(5px, 0.6vw) solid var(--capsule-belt);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #ffffff, #e9f7ff 48%, #8df8ff 100%);
  content: "";
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(141, 248, 255, 0.34);
}

#winnerBallName {
  display: none;
}

.winner-ball.reveal {
  animation: winner-capsule-burst 1.35s cubic-bezier(0.14, 0.9, 0.2, 1) both;
}

.hidden {
  visibility: hidden;
}

.winner-name {
  min-height: 42px;
  color: #ffffff;
  font-size: 42px;
  font-weight: 950;
  line-height: 0.96;
  max-width: 100%;
  overflow-wrap: anywhere;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 360ms ease, transform 360ms ease, text-shadow 360ms ease;
}

.winner-meta {
  color: rgba(231, 244, 255, 0.72);
  font-size: 13px;
  font-weight: 650;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 360ms ease 80ms, transform 360ms ease 80ms;
}

.winner-zone.is-announcing .winner-caption {
  color: var(--gold-bright);
  transform: translateY(-2px);
}

.winner-zone.is-announcing .winner-celebration {
  animation: trophy-rise 1.05s cubic-bezier(0.14, 0.84, 0.22, 1) both;
}

.winner-zone.is-announcing .celebration-rays {
  animation: trophy-rays-spin 1.7s linear infinite;
}

.winner-zone.is-announcing .celebration-rays span:nth-child(1) {
  animation: trophy-rays-spin 1.2s linear infinite reverse;
}

.winner-zone.is-announcing .celebration-rays span:nth-child(2) {
  animation: trophy-rays-spin 1.5s linear infinite;
}

.winner-zone.is-announcing .trophy-icon {
  animation: trophy-float 1.8s ease-in-out infinite alternate;
}

.winner-zone.is-announcing:not(.has-winner) .winner-name,
.winner-zone.is-announcing:not(.has-winner) .winner-meta {
  opacity: 0.58;
  transform: translateY(10px);
}

.winner-zone.has-winner .winner-name {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 34px rgba(236, 249, 255, 0.34),
    0 0 58px rgba(89, 255, 210, 0.22),
    0 0 76px rgba(255, 230, 154, 0.16);
  animation: winner-name-rise 640ms cubic-bezier(0.16, 0.9, 0.2, 1) both;
}

.winner-zone.has-winner .reward-showcase {
  animation: reward-pop 720ms cubic-bezier(0.16, 0.9, 0.2, 1) both;
}

.winner-zone.has-winner .winner-meta {
  animation: winner-meta-rise 680ms ease both;
}

.reveal-effect {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.reveal-effect::before,
.reveal-effect::after,
.reveal-effect span {
  position: absolute;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
}

.reveal-effect::before {
  border: 1px solid rgba(236, 249, 255, 0.56);
  box-shadow:
    0 0 42px rgba(236, 249, 255, 0.46),
    inset 0 0 40px rgba(126, 168, 255, 0.24);
}

.reveal-effect::after {
  width: 72%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(236, 249, 255, 0.68),
    transparent,
    rgba(89, 255, 210, 0.56),
    transparent
  );
  filter: blur(4px);
  opacity: 0.62;
}

.reveal-effect span:nth-child(1) {
  width: 104%;
  height: 20%;
  border: 0;
  border-radius: 999px;
  aspect-ratio: auto;
  background: linear-gradient(90deg, transparent, rgba(236, 249, 255, 0.34), rgba(89, 255, 210, 0.18), transparent);
  filter: blur(10px);
}

.reveal-effect span:nth-child(2) {
  width: 88%;
  height: 16%;
  border: 0;
  border-radius: 999px;
  aspect-ratio: auto;
  background: linear-gradient(90deg, transparent, rgba(126, 168, 255, 0.26), rgba(236, 249, 255, 0.32), transparent);
  filter: blur(12px);
}

.reveal-effect span:nth-child(3) {
  width: 38%;
  background: radial-gradient(circle, rgba(236, 249, 255, 0.46), transparent 62%);
  filter: blur(10px);
}

.stage.is-revealing .reveal-effect {
  opacity: 1;
}

.stage.is-revealing .reveal-effect::before {
  animation: reveal-ring 1.1s ease-out infinite;
}

.stage.is-revealing .reveal-effect::after {
  animation: reveal-spin 1.6s linear infinite;
}

.stage.is-revealing .reveal-effect span:nth-child(1) {
  animation: reveal-sweep 900ms ease-in-out infinite alternate;
}

.stage.is-revealing .reveal-effect span:nth-child(2) {
  animation: reveal-sweep-alt 1040ms ease-in-out infinite alternate-reverse;
}

.stage.is-revealing .reveal-effect span:nth-child(3) {
  animation: reveal-pulse 700ms ease-in-out infinite alternate;
}

@keyframes aurora-flow {
  from {
    transform: translateX(-4%) rotate(-5deg) scaleY(0.92);
  }

  to {
    transform: translateX(4%) rotate(5deg) scaleY(1.08);
  }
}

@keyframes card-vortex {
  from {
    transform: rotate(0deg) scale(1);
  }

  to {
    transform: rotate(360deg) scale(1.02);
  }
}

@keyframes chamber-vortex {
  from {
    transform: rotate(0deg) scale(1.02);
  }

  to {
    transform: rotate(-360deg) scale(1.02);
  }
}

@keyframes premium-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes glass-sweep {
  from {
    opacity: 0.62;
    transform: translate3d(-1.5%, -1.5%, 0) rotate(0deg);
  }

  to {
    opacity: 0.94;
    transform: translate3d(1.5%, 1.5%, 0) rotate(0deg);
  }
}

@keyframes spark-float {
  from {
    transform: translate3d(-8px, -8px, 0) rotate(-8deg);
  }

  to {
    transform: translate3d(8px, 10px, 0) rotate(10deg);
  }
}

@keyframes platform-shimmer {
  0%,
  100% {
    filter: brightness(1);
  }

  46% {
    filter: brightness(1.28);
  }
}

@keyframes winner-capsule-burst {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(0.24) rotate(-26deg);
    filter: blur(4px);
  }

  34% {
    opacity: 1;
    transform: translateY(10px) scale(1.18) rotate(10deg);
    filter: blur(0);
  }

  62% {
    opacity: 1;
    transform: translateY(-7px) scale(0.96) rotate(-5deg);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes launch-beam {
  0% {
    opacity: 0;
    transform: rotate(var(--trail-angle, -12deg)) scaleX(0.08);
  }

  28% {
    opacity: 0.96;
    transform: rotate(var(--trail-angle, -12deg)) scaleX(0.54);
  }

  72% {
    opacity: 0.78;
    transform: rotate(var(--trail-angle, -12deg)) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--trail-angle, -12deg)) scaleX(1.08);
  }
}

@keyframes launch-exit-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.24);
  }

  32% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@keyframes prize-ball-flight {
  0% {
    opacity: 0;
    transform: translate(var(--flight-start-x, 0), var(--flight-start-y, 0)) scale(0.24) rotate(-28deg);
    filter: blur(5px) brightness(1.1);
  }

  10% {
    opacity: 1;
    filter: blur(0) brightness(1.36);
  }

  58% {
    opacity: 1;
    transform: translate(var(--flight-mid-x, 48%), var(--flight-mid-y, 12%)) scale(0.78) rotate(236deg);
    filter: blur(0) brightness(1.22);
  }

  86% {
    opacity: 1;
    transform: translate(var(--flight-end-x, 70%), var(--flight-end-y, 58%)) scale(1.18) rotate(594deg);
    filter: blur(0) brightness(1.42);
  }

  96% {
    opacity: 1;
    transform: translate(var(--flight-end-x, 70%), var(--flight-end-y, 58%)) scale(0.96) rotate(640deg);
    filter: blur(0) brightness(1.25);
  }

  100% {
    opacity: 0;
    transform: translate(var(--flight-end-x, 70%), var(--flight-end-y, 58%)) scale(0.7) rotate(660deg);
    filter: blur(3px) brightness(1.8);
  }
}

@keyframes prize-dock-ready {
  from {
    opacity: 0.54;
    transform: translateX(-50%) scale(0.88);
    filter: brightness(1);
  }

  to {
    opacity: 0.92;
    transform: translateX(-50%) scale(1.04);
    filter: brightness(1.18);
  }
}

@keyframes prize-dock-hit {
  0% {
    opacity: 0.8;
    transform: translateX(-50%) scale(0.82);
    filter: brightness(1.1);
  }

  42% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
    filter: brightness(1.65);
  }

  100% {
    opacity: 0.82;
    transform: translateX(-50%) scale(1);
    filter: brightness(1.18);
  }
}

@keyframes trophy-rise {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.44);
  }

  52% {
    opacity: 1;
    transform: translateY(-8px) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes trophy-rays-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes trophy-float {
  from {
    transform: translateY(-2px) scale(1);
  }

  to {
    transform: translateY(5px) scale(1.04);
  }
}

@keyframes winner-name-rise {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes winner-meta-rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reward-shine {
  0%,
  42% {
    transform: translateX(-56%);
  }

  72%,
  100% {
    transform: translateX(56%);
  }
}

@keyframes reward-pop {
  0% {
    transform: translateY(10px) scale(0.96);
    filter: brightness(1);
  }

  48% {
    transform: translateY(-4px) scale(1.03);
    filter: brightness(1.24);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1.08);
  }
}

@keyframes reveal-ring {
  from {
    opacity: 0.95;
    transform: scale(0.72);
  }

  to {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes reveal-spin {
  from {
    transform: rotate(0deg) scale(0.82);
  }

  to {
    transform: rotate(360deg) scale(1.08);
  }
}

@keyframes reveal-sweep {
  from {
    opacity: 0.22;
    transform: rotate(-18deg) scaleX(0.72);
  }

  to {
    opacity: 0.74;
    transform: rotate(-8deg) scaleX(1.16);
  }
}

@keyframes reveal-sweep-alt {
  from {
    opacity: 0.18;
    transform: rotate(28deg) scaleX(0.68);
  }

  to {
    opacity: 0.62;
    transform: rotate(14deg) scaleX(1.08);
  }
}

@keyframes reveal-pulse {
  from {
    opacity: 0.35;
    transform: scale(0.9);
  }

  to {
    opacity: 0.86;
    transform: scale(1.15);
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .control-panel {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .machine-area {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 24px;
  }

  .machine {
    min-height: auto;
    padding-top: 16px;
  }

  .ball-chamber {
    width: min(86vw, 560px);
  }

  .machine-plinth {
    width: min(68vw, 330px);
  }

  .winner-zone {
    min-height: 240px;
    border-radius: 14px;
  }

  .reward-showcase {
    min-height: 180px;
  }
}

@media (max-width: 640px) {
  .control-panel,
  .stage {
    padding: 20px;
  }

  .stage-header {
    display: grid;
    gap: 8px;
  }

  .stage-title {
    text-align: left;
    font-size: 30px;
  }

  .button-row,
  .stats {
    grid-template-columns: 1fr;
  }

  .winner-name {
    font-size: 32px;
  }

  h1 {
    font-size: 34px;
  }

  .winner-ball {
    width: 108px;
  }

  .winner-celebration {
    width: 98px;
  }

  .reward-text {
    font-size: 28px;
  }
}