:root {
  --gold-light: #fdf3c4;
  --gold-mid: #e8c769;
  --gold-deep: #a9791f;
  --gold-shadow: #5c3f0e;
  --orange: #e8821e;
  --cream: #f6ecd2;
  --maroon: #7a0e0e;
  --maroon-deep: #460707;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  box-sizing: border-box;
  font-family: 'Cinzel', serif;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 1360px;
  aspect-ratio: 1354/643;
  overflow: hidden;
  border-radius: 6px;

  background:
    radial-gradient(circle at center,
      rgba(0, 0, 0, .10) 0%,
      rgba(0, 0, 0, .35) 45%,
      rgba(0, 0, 0, .70) 100%),
    url("../img/game.png") center/cover no-repeat;

  box-shadow: 0 0 0 2px #000, 0 20px 60px rgba(0, 0, 0, .8);
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 15%, rgba(212, 175, 55, .10), transparent 18%),
    radial-gradient(circle at 90% 15%, rgba(212, 175, 55, .10), transparent 18%),
    radial-gradient(circle at 8% 80%, rgba(212, 175, 55, .08), transparent 20%),
    radial-gradient(circle at 92% 80%, rgba(212, 175, 55, .08), transparent 20%);
  pointer-events: none;
}

/* ---------- shared text styles ---------- */
.stat-label {
  font-weight: 700;
  color: #fdf6e3;
  text-align: center;
  font-size: 2.5cqw;
  letter-spacing: .5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 14px rgba(255, 255, 255, .15);
  line-height: 1;
}

.frame {
  position: relative;
  height: 3.9cqw;
  min-width: 6cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7e7a1;
  border-radius: 40px;
  overflow: visible;
}

.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  border: 27px solid #5f4915;
  padding: 0;
  background:
    linear-gradient(180deg, #fff8c7 0%, #ffd84e 25%, #b77700 50%, #ffd84e 75%, #fff8c7 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: 40px;
  z-index: 1;
}

.frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  background: #eec159;
  z-index: 2;
}

.frame-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 3;
  pointer-events: none;
}

.frame-value,
.last10-value {
  position: relative;
  z-index: 5;
  font-family: 'Orbitron', sans-serif;
  font-size: 2.0cqw;
  letter-spacing: 2.5px;
  font-weight: 700;
}

/* ---------- stat blocks ---------- */
.stat {
  position: absolute;
}

.stat-score {
  left: 1.3%;
  top: 2%;
  width: 21%;
}

.stat-winner {
  left: 77.6%;
  top: 2%;
  width: 21.5%;
}

.stat-time {
  left: 1.3%;
  top: 25%;
  width: 17%;
}

.stat-last10 {
  left: 75.5%;
  top: 25%;
  width: 23.5%;
}

.stat .frame {
  margin-top: 1.6cqw;
}

/* ---------- wheel ---------- */
.finial {
  position: absolute;
  left: calc(50% - 2.1cqw);
  top: 0.3%;
  width: 4.2cqw;
  height: 4.2cqw;
  border-radius: 50%;
  z-index: 5;
  background: radial-gradient(circle at 35% 30%, #6a6a6a, #161616 70%);
  box-shadow: 0 0 0 .5cqw var(--gold-mid), 0 4px 10px rgba(0, 0, 0, .6);
}

.wheel-outer {
  position: absolute;
  left: calc(48% - 13.5cqw);
  top: 1.5%;
  width: 32cqw;
  height: 32cqw;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--gold-light), var(--gold-deep) 45%, var(--gold-shadow) 70%, var(--gold-mid));
  box-shadow: 0 0 10px #FFD700, 0 0 30px #FFD700, 0 0 60px rgba(255, 215, 0, .6), inset 0 0 10px rgba(255, 255, 255, .4);
}

.bulb {
  position: absolute;
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d8, #e8c769 70%, #8a6314);
  /* background: white; */
  box-shadow: 0 0 6px white, 15px gold, 0 0 30px gold, 0 0 45px gold;
  transform: translate(-50%, -50%);
}

.wheel-face {
  position: absolute;
  inset: 5.5%;
  border-radius: 50%;
  box-shadow: 0 0 0 .35cqw #000, inset 0 0 1.4cqw rgba(0, 0, 0, .55);
  background: conic-gradient(from -22.5deg,
      var(--orange) 0deg 45deg, var(--cream) 45deg 90deg,
      var(--orange) 90deg 135deg, var(--cream) 135deg 180deg,
      var(--orange) 180deg 225deg, var(--cream) 225deg 270deg,
      var(--orange) 270deg 315deg, var(--cream) 315deg 360deg);
}

.wheel-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -22.5deg, rgba(0, 0, 0, .28) 0 .35deg, transparent .35deg 45deg);
}

.seg {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
}

.seg-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2cqw;
}

.seg-num {
  font-weight: 900;
  font-size: 1.9cqw;
  color: #5a2e06;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

.seg-icon {
  font-size: 1.8cqw;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

.wheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: radial-gradient(circle, #cf7fb8 0%, #8a3fae 38%, #3a1f6e 60%, #1c1338 100%);
  box-shadow: 0 0 0 .4cqw var(--gold-mid), 0 0 0 .7cqw #5c3f0e, inset 0 0 1.4cqw rgba(0, 0, 0, .6);
}

.wheel-hub-inner {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 35%, var(--gold-light), var(--gold-deep) 55%, var(--gold-shadow) 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 1cqw rgba(0, 0, 0, .5), 0 0 0 .25cqw #1c1338;
}

.hub-slide-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15cqw;
  will-change: transform, opacity;
}

.hub-icon {
  font-size: 3cqw;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
  line-height: 1;
}

.hub-num {
  font-weight: 900;
  font-size: 1.3cqw;
  color: #5a2e06;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  line-height: 1;
}

/* ---------- coins ---------- */
.coin-zone {
  position: absolute;
  left: 27%;
  top: 43%;
  width: 46%;
  height: 24%;
}

.coin {
  width: 100%;
  aspect-ratio: 1/.62;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, #fff3b0, #d9a83a 55%, #8a6314 100%);
  box-shadow: 0 .2cqw 0 #6b4a10, inset 0 0 .3cqw rgba(0, 0, 0, .3);
  margin-top: -2cqw;
}

.coin-left {
  position: absolute;
  left: 27%;
  transform: translateX(-50%);
  width: 38%;
  aspect-ratio: 1.5 / 1;
  background: url("../img/chest1.png") no-repeat center center;
  background-size: contain;
  border: none;
}

.chest {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  top: 5%;
  aspect-ratio: 1.5 / 1;
  background: url("../img/treasure1.png") no-repeat center center;
  background-size: contain;
  border: none;
  z-index: 30;
}

.coin-right {
  position: absolute;
  left: 74%;
  transform: translateX(-50%);
  width: 38%;
  aspect-ratio: 1.5 / 1;
  background: url("../img/chest1.png") no-repeat center center;
  background-size: contain;
  border: none;
}

/* ---------- chip rows ---------- */

.chip-row {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: .15cqw 1.0cqw .5cqw;
  background: linear-gradient(to bottom,
      rgba(255, 248, 220, 0.9) 0%,
      rgba(255, 242, 190, 0.85) 12%,
      rgba(255, 228, 145, 0.8) 28%,
      rgba(248, 200, 82, 0.75) 45%,
      rgba(224, 164, 38, 0.7) 62%,
      rgba(188, 122, 15, 0.65) 80%,
      rgba(138, 82, 0, 0.6) 100%);

  border: .18cqw solid #ffefb3;

  box-shadow:
    inset 0 .15cqw .25cqw rgba(255, 255, 255, .6),
    inset 0 -.2cqw .35cqw rgba(0, 0, 0, .35),
    0 0 .8cqw rgba(255, 220, 100, .6),
    0 0 1.5cqw rgba(255, 190, 0, .45),
    0 .35cqw .8cqw rgba(0, 0, 0, .45);
}

.chip-row.left {
  left: -1%;
  border-radius: 0 2.5cqw 2.5cqw 0;
}

.chip-row.right {
  right: -1%;
  border-radius: 2.5cqw 0 0 2.5cqw;
}

.chip {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  background:
    radial-gradient(ellipse at 30% 10%,
      rgba(255, 215, 80, .9) 0%,
      rgba(255, 255, 255, .45) 18%,
      transparent 35%),
    linear-gradient(to bottom,
      #f7f7f7 0%,
      #d6d9dd 55%,
      #aeb3b9 100%);

  border: .15cqw solid rgba(245, 219, 134, 0.9);
  transform: scaleY(.75);
}

.chip-row.left .chip {
  width: 3.6cqw;
  font-size: 1.5cqw;
}

.chip-row.right .chip {
  width: 4.4cqw;
  font-size: 1.4cqw;
}

.c-white {
  background: radial-gradient(circle at 35% 30%, #fff, #cfd2d6 70%);
  color: #222;
}

.c-yellow {
  background: radial-gradient(circle at 35% 30%, #e8f97a, #7fae1f 75%);
}

.c-purple {
  background: radial-gradient(circle at 35% 30%, #c79bf2, #6a23a8 75%);
}

.c-red {
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #a30f0f 75%);
}

.c-teal {
  background: radial-gradient(circle at 35% 30%, #8af0e6, #0c8c82 75%);
}

.c-pink {
  background: radial-gradient(circle at 35% 30%, #ff9bd6, #c20c7c 75%);
}

.c-black {
  background: radial-gradient(circle at 35% 30%, #6b6b6b, #0c0c0c 75%);
}

.c-navy {
  background: radial-gradient(circle at 35% 30%, #8aa6ff, #101a5c 75%);
}

.c-yellows {
  background: radial-gradient(circle at 35% 25%, #fff9c4 0%, #ffeb3b 35%, #ffc107 65%, #d88900 100%);
}

/* ---------- gold wave + banner ---------- */
.wave-zone {
  position: absolute;
  left: 0;
  top: 56%;
  width: 100%;
  height: 8%;

}

.wave-strip {
  position: absolute;
  left: -2%;
  z-index: 40;
  width: 104%;
  height: 4cqw;
  bottom: -1cqw;
  background: linear-gradient(to bottom, #fff6a0 0%, #ffd84d 20%, #f2b11f 55%, #b87300 80%, #6d3d00 100%);
  clip-path: none;
  border-radius: 0 0 70% 70% / 0 0 180% 180%;
  box-shadow: inset 0 .25cqw .4cqw rgba(255, 255, 255, .7), inset 0 -.35cqw .6cqw rgba(0, 0, 0, .4), 0 .3cqw .8cqw rgba(0, 0, 0, .5);
}

.gem-row {
  position: absolute;
  left: 32px;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gem {
  position: absolute;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%,
      #fff,
      #f2c14e 55%,
      #8a6314);
  border: .22cqw solid #111;
  box-shadow:
    0 0 .6cqw rgba(255, 220, 120, .9),
    inset 0 0 .2cqw rgba(255, 255, 255, .8);
  z-index: 50;
  transition: none;
}

.ribbon {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translateX(-50%);
  width: 25%;
  padding: 1.1cqw 0;
  text-align: center;
  z-index: 60;
}

.ribbon-bg circle {
  transform-origin: center;
  animation: sparkle 1.8s infinite alternate;
}

.ribbon-shape {
  fill: url(#ribbonGradient);
  stroke: #d4af37;
  stroke-width: 12;
}

.inner-curve {
  fill: none;
  stroke: rgba(255, 230, 120, .8);
  stroke-width: 3;
}

.chain {
  position: absolute;
  top: -6cqw;
  width: .15cqw;
  height: 6cqw;
  background: gold;
}

.chain.left {
  left: 2.5cqw;
}

.chain.right {
  right: 2.5cqw;
}

/* ---------- action buttons ---------- */
.action {
  position: absolute;
  top: 74%;
  border-radius: 1.6cqw;
  border: .24cqw solid var(--gold-mid);
  font-weight: 700;
  color: #f0ebda;
  font-size: 1.3cqw;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  box-shadow: 0 .4cqw .6cqw rgba(0, 0, 0, .55), inset 0 .15cqw 0 rgba(255, 255, 255, .18);
  cursor: pointer;
  background: linear-gradient(180deg, #9e1414, var(--maroon) 55%, var(--maroon-deep));
  transition: filter .15s ease, transform .1s ease;
}

.action:hover {
  filter: brightness(1.15);
}

.action:active {
  transform: translateY(1px);
}

.action.take {
  left: -1%;
  width: 11%;
  border-radius: 0 2.5cqw 2.5cqw 0;
}

.action.cancel-bet {
  left: 19.5%;
  width: 11%;
}

.action.cancel-specific {
  left: 68.5%;
  width: 15%;
}

.action.bet-ok {
  left: 89%;
  width: 12.2%;
  border-radius: 2.5cqw 0 0 2.5cqw;

}

.action::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 8%;
  width: 90%;
  height: 35%;
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, .45), transparent);
}

/* ---------- numbers row ---------- */
.numbers-row {
  position: absolute;
  left: 0;
  top: 79%;
  width: 100%;
  display: flex;
}

.num-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9cqw;
  padding-top: .4cqw;
}

.bet-bar {
  width: 88%;
  height: 1.7cqw;
  border-radius: 1cqw;
  background: linear-gradient(180deg, #0c0a06, #1a1208);
  border: .16cqw solid var(--gold-deep);
  display: flex;
  align-items: center;
  padding-left: .4cqw;
  gap: .3cqw;
  box-shadow: inset 0 0 .4cqw rgba(0, 0, 0, .7);
}

.bet-bar .star {
  color: var(--gold-mid);
  font-size: 1cqw;
  line-height: 1;
}

.bet-bar .amt {
  font-weight: 700;
  font-size: 1cqw;
  color: #f7e7a1;
  text-shadow: 0 0 .3cqw rgba(247, 231, 161, .6);
}

.num-chip {
  width: 31%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.5cqw;
  color: #fff7e0;
  position: relative;
  isolation: isolate;
  border: .22cqw solid var(--gold-mid);
  background: radial-gradient(circle at 35% 28%,
      #d84444,
      #7a0e0e 70%);
}

.num-chip::before {
  content: "";
  position: absolute;
  inset: -.70cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
      #ffd86b 0deg 4deg,
      transparent 4deg 14deg);
  z-index: -1;
  /* remove rays from chip area */
  -webkit-mask:
    radial-gradient(circle,
      transparent 0 50%,
      #000 52%);

  mask:
    radial-gradient(circle,
      transparent 0 50%,
      #000 52%);
}

.num-chip.green {
  background: radial-gradient(circle at 35% 28%, #5fd060, #156018 70%);
}

.num-chip.selected {
  background: radial-gradient(circle at 35% 28%, #fffdf0, #f2c14e 65%, #b8801c 100%);
  color: #6b3e06;
  box-shadow: 0 0 1.4cqw rgba(255, 221, 130, .85), 0 .35cqw .5cqw rgba(0, 0, 0, .6), inset 0 0 0 .2cqw rgba(255, 255, 255, .5);
  transform: scale(1.08);
}

/* ---------- status bar ---------- */
.status-bar {
  position: absolute;
  top: 94%;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5.4%;
  background: linear-gradient(180deg, #15100a, #050302);
  border-top: .18cqw solid var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .6%;
}

.status-text {
  flex: 1;
  margin: 0 1%;
  background: linear-gradient(180deg, #fdf6e3, #eadfb8);
  border-radius: 1.4cqw;
  border: .45cqw solid #d4af37;
  text-align: center;
  font-style: italic;
  font-weight: 700;
  color: #1a1206;
  font-size: 1.2cqw;
  padding: .45cqw 0;
  box-shadow: inset 0 .15cqw .3cqw rgba(0, 0, 0, .25);
}

.pill-btn {
  font-weight: 700;
  font-size: 1.9cqw;
  color: #fbe9b0;
  font-size: 1.1cqw;
  padding: .4cqw 2.2cqw;
  border-radius: 1cqw;
  border: .16cqw solid var(--gold-mid);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}

.pill-btn:hover {
  filter: brightness(1.15);
}

.pill-btn:active {
  transform: translateY(1px) scale(.97);
}

.back-btn {
  background: linear-gradient(180deg, #9e1414, var(--maroon-deep));
  margin-left: -9px;
  border-radius: 0 2.5cqw 2.5cqw 0;

}

.exit-btn {
   background: linear-gradient(180deg, #9e1414, var(--maroon-deep));
  margin-right: -8px;
  border-radius: 2.5cqw 0 0 2.5cqw;
}

/* ---------- animation effects ---------- */
@keyframes bulbChase {

  0%,
  100% {
    opacity: .32;
    filter: brightness(.65) saturate(.7);
    transform: translate(-50%, -50%) scale(.85);
  }

  50% {
    opacity: 1;
    filter: brightness(1.6) saturate(1.3);
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* @keyframes gemTwinkle {

  0%,
  100% {
    opacity: .4;
    transform: scale(.75) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.25) rotate(12deg);
  }
} */

@keyframes sparklePop {

  0%,
  80%,
  100% {
    opacity: 0;
    transform: scale(.2) rotate(0deg);
  }

  40% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}

@keyframes chipPulse {

  0%,
  100% {
    box-shadow: 0 0 .8cqw rgba(255, 221, 130, .65), 0 .35cqw .5cqw rgba(0, 0, 0, .6), inset 0 0 0 .2cqw rgba(255, 255, 255, .5);
    transform: scale(1.05);
  }

  50% {
    box-shadow: 0 0 2.4cqw rgba(255, 221, 130, 1), 0 .35cqw .5cqw rgba(0, 0, 0, .6), inset 0 0 0 .2cqw rgba(255, 255, 255, .7);
    transform: scale(1.12);
  }
}

@keyframes bannerBreathe {

  0%,
  100% {
    text-shadow: 0 2px 3px rgba(0, 0, 0, .7), 0 0 8px rgba(255, 210, 120, .35);
  }

  50% {
    text-shadow: 0 2px 3px rgba(0, 0, 0, .7), 0 0 18px rgba(255, 210, 120, .8);
  }
}

@keyframes hubGlow {

  0%,
  100% {
    box-shadow: 0 0 0 .4cqw var(--gold-mid), 0 0 0 .7cqw #5c3f0e, inset 0 0 1.4cqw rgba(0, 0, 0, .6), 0 0 1cqw rgba(180, 120, 255, .0);
  }

  50% {
    box-shadow: 0 0 0 .4cqw var(--gold-mid), 0 0 0 .7cqw #5c3f0e, inset 0 0 1.4cqw rgba(0, 0, 0, .6), 0 0 1.6cqw rgba(180, 120, 255, .55);
  }
}

@keyframes scoreFlicker {

  0%,
  94%,
  100% {
    text-shadow: 0 0 8px rgba(247, 231, 161, .55), 0 2px 2px #000;
  }

  97% {
    text-shadow: 0 0 16px rgba(247, 231, 161, .95), 0 2px 2px #000;
  }
}

.sparkle {
  position: absolute;
  color: #fff8d8;
  font-size: 1.4cqw;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 .5cqw rgba(255, 248, 216, .9);
}

@media (prefers-reduced-motion: no-preference) {
  .bulb {
    animation: bulbChase 1.7s ease-in-out infinite;
  }

  .gem {
    animation: gemTwinkle 2s ease-in-out infinite;
  }

  .sparkle {
    animation: sparklePop 2.6s ease-in-out infinite;
  }

  .num-chip.selected {
    animation: chipPulse 1.4s ease-in-out infinite;
  }

  .ribbon span {
    animation: bannerBreathe 2.6s ease-in-out infinite;
  }

  .wheel-hub {
    animation: hubGlow 3.2s ease-in-out infinite;
  }

  .frame-value {
    animation: scoreFlicker 5s linear infinite;
  }
}

.wheel-outer {
  cursor: pointer;
}

.wheel-outer:hover .wheel-face {
  filter: brightness(1.05);
}

.wheel-outer.spinning {
  cursor: wait;
}

.chip {
  transition: transform .15s ease, filter .15s ease;
}

.chip:hover {
  transform: scale(1.12);
  filter: brightness(1.15);
}

.chip:active {
  transform: scale(.94);
}

.num-chip {
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}


.num-chip:active {
  transform: scale(.93);
}

@keyframes timerUrgency {

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

  50% {
    transform: scale(1.06);
  }
}

@keyframes winnerPop {
  0% {
    transform: scale(1);
    text-shadow: 0 0 8px rgba(247, 231, 161, .55), 0 2px 2px #000;
  }

  25% {
    transform: scale(1.18);
    text-shadow: 0 0 22px rgba(255, 240, 100, 1), 0 2px 2px #000;
  }

  55% {
    transform: scale(1.1);
    text-shadow: 0 0 18px rgba(255, 240, 100, .85), 0 2px 2px #000;
  }

  100% {
    transform: scale(1);
    text-shadow: 0 0 8px rgba(247, 231, 161, .55), 0 2px 2px #000;
  }
}

.winner-flash {
  animation: winnerPop .9s ease-out forwards;
}

/* ---------- hub icon slide left → right ---------- */
@keyframes hubSlideOut {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}

@keyframes hubSlideIn {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }

  55% {
    transform: translateX(9%);
    opacity: 1;
  }

  78% {
    transform: translateX(-4%);
    opacity: 1;
  }

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

@keyframes hubRingFlash {

  0%,
  100% {
    box-shadow: 0 0 0 .4cqw var(--gold-mid), 0 0 0 .7cqw #5c3f0e, inset 0 0 1.4cqw rgba(0, 0, 0, .6);
  }

  30% {
    box-shadow: 0 0 0 .7cqw #fff9a0, 0 0 2.8cqw rgba(255, 240, 100, .95), inset 0 0 1.4cqw rgba(0, 0, 0, .6);
  }

  65% {
    box-shadow: 0 0 0 .55cqw var(--gold-light), 0 0 1.5cqw rgba(255, 240, 100, .6), inset 0 0 1.4cqw rgba(0, 0, 0, .6);
  }
}

.hub-slide-out {
  animation: hubSlideOut .38s cubic-bezier(.6, 0, 1, .6) forwards;
}

.hub-slide-in {
  animation: hubSlideIn .58s cubic-bezier(.2, .8, .3, 1) forwards;
}

.hub-ring-flash {
  animation: hubRingFlash .95s ease-out forwards !important;
}

@media (prefers-reduced-motion: no-preference) {
  .wheel-face {
    transition: transform 4.4s cubic-bezier(.14, .7, .16, 1);
  }
}