/* Jewel spectrum wheel. All positions, prize angles and spin transforms come
   from the existing game renderer; this layer changes visual surfaces only. */
.app-shell[data-route="lucky"] .screen {
  background: radial-gradient(ellipse at 50% 8%, #28204b 0, #0c1930 43%, #07111f 78%);
}
.app-shell[data-route="lucky"] .topbar {
  background: #11172c; border-color: #585281;
}
.lucky-hero {
  border-color: #77699b;
  background: linear-gradient(110deg, #10192eef, #19284bd9), url('/assets/byd/wheel-spectrum-20261028/stage.jpg') center 48% / cover;
  box-shadow: inset 0 1px #e3d5ff26, 0 10px 28px #0004;
}
.lucky-hero .hero-actions :is(button, a) {
  color: #ebf5ff; background: #1c2b49; border-color: #7783b3;
}
.lucky-hero .hero-actions button:disabled { color: #c1c9df; background: #252b43; }
.lucky-section {
  padding: 16px 8px 14px; border: 1px solid #8981b4; border-radius: 24px;
  background: linear-gradient(#08152985, #0b1732c7), url('/assets/byd/wheel-spectrum-20261028/stage.jpg') center 58% / cover, #0b1630;
  box-shadow: inset 0 1px #f1dcff38, 0 16px 36px #02050e75, 0 0 28px #8a61d526;
}
.lucky-section .lucky-wheel-wrap {
  overflow: hidden;
  background: radial-gradient(circle, #1b285c3d 50%, #2c20764d 63%, transparent 72%);
}
.lucky-section .lucky-wheel-backdrop {
  inset: 1px; border: 1px solid #c2b0ec59;
  background: radial-gradient(circle, transparent 49%, #a98bff18 63%, #42c6f020 69%, transparent 73%);
  box-shadow: inset 0 0 22px #6d8ce021, 0 0 22px #7d53dc20;
}
.lucky-section .lucky-wheel-disc {
  box-shadow: 0 14px 22px #02050dbf, 0 0 0 1px #d6bc8e, 0 0 0 3px #1b2444, 0 0 0 4px #97b6d9, 0 0 18px #9c6fff59;
}
.lucky-section .lucky-wheel-base-img { border: 0; background: #071329; box-shadow: none; }
.lucky-section .lucky-wheel-disc::after {
  inset: 1px; z-index: 2; border: 1px solid #f3e1ad6b;
}
.lucky-section .lucky-wheel-pointer-img {
  filter: brightness(1.18) saturate(1.3) drop-shadow(0 2px 3px #020715) drop-shadow(0 0 7px #a2dfffbd);
}
.lucky-section .lucky-wheel-slot .lucky-wheel-prize-amount:not(.is-text-prize) {
  padding: 5px 3px; color: #fff; background: #051226b8;
  border: 1px solid #c9e9ff45; border-radius: 6px; box-shadow: inset 0 1px #edf8ff19, 0 2px 5px #02071559;
  font-size: clamp(16px, 5.1vw, 22px); font-weight: 800; text-shadow: 0 1px 2px #0008;
}
.lucky-section .lucky-wheel-prize-currency { color: #ceecff; }
.lucky-section .lucky-wheel-prize-value { color: #fff; }
.lucky-section .lucky-wheel-slot .lucky-wheel-prize-amount.is-long:not(.is-text-prize) { font-size: clamp(15px, 4.65vw, 20px); }
.lucky-section .lucky-wheel-slot .lucky-wheel-prize-amount.is-extra-long:not(.is-text-prize) { font-size: clamp(12px, 3.8vw, 17px); }
/* Keep the phone on the inner face so the ring's lamps remain continuous. */
.lucky-section .lucky-wheel-phone-sector { inset: 5.5%; }
.lucky-section .is-phone-prize-slot .lucky-wheel-prize-amount.is-text-prize {
  border-color: #eed39b; background: #10162ee8; box-shadow: 0 2px 5px #02050cb3;
}
.lucky-section .lucky-wheel-center {
  background: radial-gradient(circle at 33% 18%, #748ff0, #3d4d9e 31%, #172c59 66%, #0b1733);
  border: 2px solid #f1d69c;
  box-shadow: inset 0 0 0 2px #2c3a67, inset 0 -7px 13px #01051b88, inset 0 5px 10px #cbd4ff29, 0 0 0 3px #0b1735, 0 0 0 4px #a5cae4, 0 7px 15px #0008, 0 0 16px #9c80ff5c;
}
.lucky-section .lucky-wheel-center-img { display: none; }
.lucky-section .lucky-wheel-center::before {
  position: absolute; inset: 5px; content: ''; border: 1px solid #bed6ff5c; border-radius: 50%; pointer-events: none;
}
.lucky-section .lucky-wheel-center-label { color: #fff; text-shadow: 0 1px 3px #0b1533; }
.lucky-section .lucky-wheel-center-label small { color: #e4f6ff; }
.lucky-section .lucky-wheel-center:disabled { opacity: 1; filter: none; }
.lucky-section .lucky-wheel-center:disabled .lucky-wheel-center-label { color: #e2e8f6; }
.lucky-section :is(.lucky-result, .lucky-winner-feed) {
  color: #edf6ff; background: #0d1b35e8; border: 1px solid #767fa8; border-radius: 10px;
  box-shadow: inset 0 1px #e4d5ff19;
}
.lucky-notice .game-play-price { background: #122747; border-color: #8395c5; }
.lucky-notice .game-play-price strong { color: #cbf3ff; }
@media (max-width: 360px) {
  .lucky-section { padding: 13px 6px 12px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lucky-section .lucky-wheel-backdrop, .lucky-section .lucky-wheel-center::before { animation: none; }
}