.luck-roulette-premium-stage {
  --luck-roulette-premium-coral:#c64034;
  --luck-roulette-premium-gold:#efc34a;
  --luck-roulette-premium-cream:#fff7df;
  --luck-roulette-premium-ink:#2c2521;
  --luck-roulette-premium-accent:#176b5d;
  --luck-roulette-premium-metal:#a66f27;
  width:100%;
  min-width:0;
  max-width:980px;
  margin:24px auto;
  padding:clamp(20px, 3.2vw, 34px);
  display:grid;
  grid-template-columns:minmax(300px, 410px) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 48px);
  align-items:center;
  overflow:hidden;
  border:1px solid #e6d7c4;
  border-radius:8px;
  background:#fffaf0;
  color:var(--luck-roulette-premium-ink);
  text-align:left;
}

.luck-roulette-premium-stage.luck-roulette-premium-theme-classic {
  --luck-roulette-premium-coral:#c64034;
  --luck-roulette-premium-gold:#efc34a;
  --luck-roulette-premium-cream:#fff7df;
  --luck-roulette-premium-ink:#2c2521;
  --luck-roulette-premium-accent:#176b5d;
  --luck-roulette-premium-metal:#a66f27;
  background:#fffaf0;
}

.luck-roulette-premium-stage.luck-roulette-premium-theme-festival {
  --luck-roulette-premium-coral:#d54a3d;
  --luck-roulette-premium-gold:#f0bd3f;
  --luck-roulette-premium-cream:#fff8e7;
  --luck-roulette-premium-ink:#172b43;
  --luck-roulette-premium-accent:#1f5f88;
  --luck-roulette-premium-metal:#9a6728;
  background:#f7f9fc;
}

.luck-roulette-premium-stage.luck-roulette-premium-theme-fresh {
  --luck-roulette-premium-coral:#d4573f;
  --luck-roulette-premium-gold:#e9d34f;
  --luck-roulette-premium-cream:#fffbe8;
  --luck-roulette-premium-ink:#143d39;
  --luck-roulette-premium-accent:#16806b;
  --luck-roulette-premium-metal:#88702b;
  background:#f5fbf7;
}

.luck-roulette-premium-stage > * {
  min-width:0;
}

.luck-roulette-premium-machine {
  position:relative;
  width:min(100%, 410px);
  min-width:min(280px, 100%);
  aspect-ratio:1;
  justify-self:center;
  isolation:isolate;
  touch-action:manipulation;
}

.luck-roulette-premium-svg {
  position:absolute;
  z-index:1;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  filter:drop-shadow(0 17px 15px rgba(61, 39, 22, .2));
}

.luck-roulette-premium-rotor {
  will-change:transform;
}

.luck-roulette-premium-rim-outer {
  fill:none;
  stroke:var(--luck-roulette-premium-metal);
  stroke-width:16;
  filter:drop-shadow(0 3px 2px rgba(56, 35, 16, .24));
}

.luck-roulette-premium-rim-inner {
  fill:none;
  stroke:#f4dd99;
  stroke-width:7;
}

.luck-roulette-premium-pin {
  fill:#fff2bd;
  stroke:var(--luck-roulette-premium-metal);
  stroke-width:3;
  filter:drop-shadow(0 1px 2px rgba(57, 38, 20, .3));
}

.luck-roulette-premium-segment {
  stroke:#fff1c7;
  stroke-width:3;
  transition:filter .25s ease, stroke-width .25s ease;
}

.luck-roulette-premium-segment.luck-roulette-premium-is-win {
  fill:var(--luck-roulette-premium-coral);
}

.luck-roulette-premium-segment.luck-roulette-premium-is-lose {
  fill:var(--luck-roulette-premium-gold);
}

.luck-roulette-premium-segment.luck-roulette-premium-is-tone-alt {
  filter:brightness(.94) saturate(.96);
}

.luck-roulette-premium-segment.luck-roulette-premium-is-selected {
  stroke:#fff;
  stroke-width:7;
  filter:brightness(1.13) drop-shadow(0 0 10px rgba(255, 240, 171, .9));
}

.luck-roulette-premium-inner-disc {
  fill:#f8e9bd;
  stroke:#9a682a;
  stroke-width:6;
}

.luck-roulette-premium-segment-label {
  font-size:14px;
  font-weight:900;
  letter-spacing:0;
  paint-order:stroke;
  stroke-width:2px;
  pointer-events:none;
}

.luck-roulette-premium-segment-label.luck-roulette-premium-is-win {
  fill:#fff;
  stroke:rgba(90, 27, 20, .42);
}

.luck-roulette-premium-segment-label.luck-roulette-premium-is-lose {
  fill:#342917;
  stroke:rgba(255, 248, 211, .7);
}

.luck-roulette-premium-pointer {
  --luck-roulette-premium-tick-strength:1;
  position:absolute;
  z-index:3;
  top:0;
  left:50%;
  width:52px;
  height:74px;
  transform:translateX(-50%);
  filter:drop-shadow(0 5px 4px rgba(49, 31, 17, .27));
  pointer-events:none;
}

.luck-roulette-premium-pointer-arm {
  position:absolute;
  inset:0;
  display:block;
  transform-origin:50% 16px;
}

.luck-roulette-premium-pointer-arm::before {
  content:"";
  position:absolute;
  top:13px;
  left:50%;
  width:30px;
  height:52px;
  transform:translateX(-50%);
  clip-path:polygon(50% 100%, 5% 18%, 18% 0, 82% 0, 95% 18%);
  border-radius:5px;
  background:linear-gradient(90deg, #8a571d, #f4d27a 48%, #9d6524);
}

.luck-roulette-premium-pointer-bolt {
  position:absolute;
  z-index:1;
  top:0;
  left:50%;
  width:28px;
  height:28px;
  transform:translateX(-50%);
  border:5px solid #9a6729;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff4be, #d39d42 60%, #744619 100%);
  box-shadow:0 2px 0 #5e3918;
}

.luck-roulette-premium-pointer-arm.luck-roulette-premium-is-ticking {
  animation:luck-roulette-premium-pointer-tick 86ms ease-out;
}

.luck-roulette-premium-hub {
  position:absolute;
  z-index:4;
  top:50%;
  left:50%;
  width:clamp(86px, 24%, 98px);
  aspect-ratio:1;
  min-width:84px;
  min-height:84px;
  padding:7px;
  transform:translate(-50%, -50%);
  border:7px solid #f5dda1;
  border-radius:50%;
  background:radial-gradient(
    circle at 38% 30%,
    #53605c,
    var(--luck-roulette-premium-ink) 58%,
    #14110f 100%
  );
  color:#fff;
  font:900 14px/1.2 inherit;
  letter-spacing:0;
  text-align:center;
  white-space:nowrap;
  box-shadow:
    0 0 0 4px #9b6728,
    0 8px 16px rgba(39, 27, 20, .34),
    inset 0 2px 0 rgba(255, 255, 255, .24);
  cursor:pointer;
  touch-action:manipulation;
}

.luck-roulette-premium-hub:hover:not(:disabled) {
  transform:translate(-50%, -50%) scale(1.04);
}

.luck-roulette-premium-hub:active:not(:disabled) {
  transform:translate(-50%, -50%) scale(.97);
}

.luck-roulette-premium-hub:focus-visible {
  outline:4px solid #165f87;
  outline-offset:5px;
}

.luck-roulette-premium-hub:disabled {
  opacity:1;
  cursor:default;
}

.luck-roulette-premium-stage.luck-roulette-premium-phase-accelerating
  .luck-roulette-premium-hub,
.luck-roulette-premium-stage.luck-roulette-premium-phase-cruising
  .luck-roulette-premium-hub,
.luck-roulette-premium-stage.luck-roulette-premium-phase-awaiting_server
  .luck-roulette-premium-hub {
  animation:luck-roulette-premium-hub-breathe 1.15s ease-in-out infinite;
}

.luck-roulette-premium-copy {
  align-self:center;
  display:grid;
  gap:12px;
}

.luck-roulette-premium-copy h2 {
  margin:0;
  color:var(--luck-roulette-premium-ink);
  font-size:clamp(25px, 3vw, 36px);
  line-height:1.16;
  letter-spacing:0;
}

.luck-roulette-premium-phase {
  width:max-content;
  margin:0;
  padding:6px 10px;
  border:1px solid #9ac8bd;
  border-radius:999px;
  background:#fff;
  color:var(--luck-roulette-premium-accent);
  font-size:12px;
  font-weight:900;
}

.luck-roulette-premium-status {
  min-height:3em;
  margin:0;
  color:#5f554f;
  font-size:16px;
  line-height:1.55;
}

.luck-roulette-premium-notice {
  padding:12px 14px;
  border-left:4px solid var(--luck-roulette-premium-accent);
  background:rgba(255, 255, 255, .82);
  color:#675d55;
  font-size:14px;
  line-height:1.5;
}

.luck-roulette-premium-notice p {
  margin:0;
}

.luck-roulette-premium-notice p + p {
  margin-top:4px;
}

.luck-roulette-premium-ticket {
  position:relative;
  max-width:360px;
  padding:15px 18px 15px 22px;
  display:grid;
  gap:3px;
  border:1px solid #d7a642;
  border-left:8px solid var(--luck-roulette-premium-coral);
  border-radius:6px;
  background:#fff8db;
  color:var(--luck-roulette-premium-ink);
  box-shadow:0 12px 24px rgba(104, 69, 25, .14);
  animation:luck-roulette-premium-ticket-reveal .46s cubic-bezier(.2, .76, .24, 1) both;
}

.luck-roulette-premium-ticket[hidden] {
  display:none;
}

.luck-roulette-premium-ticket::after {
  content:"";
  position:absolute;
  top:0;
  right:18px;
  width:1px;
  height:100%;
  border-right:2px dashed rgba(161, 111, 32, .3);
}

.luck-roulette-premium-ticket-kicker {
  color:#9a4c26;
  font-size:10px;
  font-weight:900;
  letter-spacing:0;
}

.luck-roulette-premium-ticket-title {
  padding-right:24px;
  font-size:19px;
}

.luck-roulette-premium-ticket-copy {
  padding-right:24px;
  color:#65584a;
  font-size:13px;
}

.luck-roulette-premium-stage.luck-roulette-premium-is-not-awarded
  .luck-roulette-premium-phase {
  border-color:#c9d3cf;
  background:#f5f8f7;
  color:#52645e;
}

.luck-roulette-premium-stage.luck-roulette-premium-is-not-awarded
  .luck-roulette-premium-segment.luck-roulette-premium-is-selected {
  filter:brightness(1.05) drop-shadow(0 0 7px rgba(255, 248, 211, .72));
}

.luck-roulette-premium-stage.luck-roulette-premium-is-awarded
  .luck-roulette-premium-copy h2 {
  font-size:clamp(24px, 2.6vw, 32px);
}

@keyframes luck-roulette-premium-pointer-tick {
  0% {
    transform:rotate(0);
  }
  45% {
    transform:rotate(calc(7deg * var(--luck-roulette-premium-tick-strength)));
  }
  100% {
    transform:rotate(0);
  }
}

@keyframes luck-roulette-premium-hub-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 4px #9b6728,
      0 8px 16px rgba(39, 27, 20, .34),
      inset 0 2px 0 rgba(255, 255, 255, .24);
  }
  50% {
    box-shadow:
      0 0 0 5px #e0b75e,
      0 10px 22px rgba(39, 27, 20, .38),
      inset 0 2px 0 rgba(255, 255, 255, .28);
  }
}

@keyframes luck-roulette-premium-ticket-reveal {
  from {
    opacity:0;
    transform:translateY(10px) scale(.98);
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (max-width:700px) {
  .luck-roulette-premium-stage {
    grid-template-columns:1fr;
    gap:20px;
    padding:16px 12px 20px;
  }

  .luck-roulette-premium-machine {
    width:min(100%, 360px);
  }

  .luck-roulette-premium-copy {
    width:100%;
  }

  .luck-roulette-premium-copy h2 {
    font-size:26px;
  }

  .luck-roulette-premium-status {
    min-height:0;
  }
}

@media (max-width:390px) {
  .luck-roulette-premium-stage {
    padding-inline:10px;
  }

  .luck-roulette-premium-segment-label {
    font-size:12px;
  }

  .luck-roulette-premium-hub {
    padding:5px;
    border-width:6px;
    font-size:13px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .luck-roulette-premium-pointer,
  .luck-roulette-premium-hub,
  .luck-roulette-premium-segment,
  .luck-roulette-premium-ticket {
    animation:none !important;
    transition:none !important;
  }
}
