.roulette {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block: 1px solid rgba(255,174,65,.36);
  background: radial-gradient(circle at 15% 15%,rgba(133,40,180,.32),transparent 40%),radial-gradient(circle at 88% 75%,rgba(255,124,35,.16),transparent 38%),#080411;
}
.roulette::before { content: '✦'; position: absolute; z-index: -1; top: -170px; left: -45px; color: rgba(255,162,49,.08); font: 900 470px/1 var(--display); pointer-events: none; }
.roulette__inner { display: grid; grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr); align-items: center; gap: clamp(30px,5vw,75px); max-width: 1240px; margin: auto; }
.roulette__intro h2 { margin: 0 0 24px; color: #fff; font: 900 clamp(62px,7.3vw,104px)/.82 var(--display); text-shadow: 0 0 22px rgba(208,70,255,.53); }
.roulette__intro h2 em { color: #ffbd5b; font-style: normal; text-shadow: 0 0 14px rgba(255,142,37,.85),0 0 29px rgba(255,98,22,.45); }
.roulette__intro > p:not(.eyebrow) { max-width: 425px; color: #eee0f3; font: 650 clamp(21px,2.2vw,26px)/1.14 var(--body); }
.roulette__intro .roulette__note { margin-top: 24px; padding-left: 14px; border-left: 3px solid var(--lime); color: #cdd5c7 !important; font-size: 18px !important; }
.roulette__game { min-width: 0; padding: clamp(22px,3vw,38px); border: 2px solid #d970ff; border-radius: 24px; background: radial-gradient(circle at 50% 24%,rgba(126,29,173,.31),transparent 55%),linear-gradient(140deg,#210b36,#080413 74%); box-shadow: inset 0 0 31px rgba(204,63,255,.17),0 0 29px rgba(191,48,251,.35); text-align: center; }
.roulette__game [hidden] { display: none !important; }
.roulette__wheel-stage { --wheel-size: min(76vw,420px); --wheel-radius: min(25vw,138px); position: relative; display: grid; place-items: center; width: var(--wheel-size); max-width: 100%; aspect-ratio: 1; margin: 0 auto 21px; }
.roulette__wheel-stage::before { content: ''; position: absolute; inset: -10px; border: 2px dashed rgba(255,216,121,.73); border-radius: 50%; box-shadow: 0 0 18px rgba(255,182,65,.45),inset 0 0 12px rgba(255,129,29,.32); pointer-events: none; }
.roulette__pointer { position: absolute; z-index: 3; top: -15px; left: 50%; width: 0; height: 0; border-right: 16px solid transparent; border-left: 16px solid transparent; border-top: 36px solid #fff5be; filter: drop-shadow(0 0 8px #ffae32) drop-shadow(0 0 13px #fe6129); transform: translateX(-50%); }
.roulette__wheel { position: relative; width: 100%; height: 100%; border: 8px solid #e8a3ff; border-radius: 50%; background: repeating-conic-gradient(from -22.5deg,rgba(255,242,254,.8) 0deg 1.2deg,transparent 1.2deg 45deg),conic-gradient(from -22.5deg,#653097 0deg 45deg,#17629a 45deg 90deg,#ad4b2e 90deg 135deg,#681b76 135deg 180deg,#376652 180deg 225deg,#77468c 225deg 270deg,#a5404d 270deg 315deg,#2e5494 315deg 360deg); box-shadow: 0 0 5px #fff,0 0 25px rgba(215,93,255,.82),inset 0 0 24px rgba(2,0,10,.62),0 23px 35px rgba(0,0,0,.35); transition: transform 4700ms cubic-bezier(.12,.75,.13,1); will-change: transform; }
.roulette__wheel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.15),transparent 49%); pointer-events: none; }
.roulette__wheel-label { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 76px; min-height: 44px; color: #fff; font: 900 clamp(10px,1.25vw,14px)/.92 var(--display); letter-spacing: .035em; white-space: pre-line; text-shadow: 0 1px 3px #090210,0 0 8px #12031d; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(calc(0px - var(--wheel-radius))) rotate(var(--counter-angle)); }
.roulette__hub { position: absolute; z-index: 2; inset: 39%; display: grid; place-items: center; border: 4px solid #ffe29b; border-radius: 50%; color: #fff; background: radial-gradient(circle,#f96b49,#6d1b9f 65%,#240d40); box-shadow: 0 0 13px #ffb13d,inset 0 0 13px rgba(255,213,132,.62); font: 900 clamp(30px,6vw,45px)/1 var(--display); text-shadow: 0 0 7px #fff; }
.roulette__spin,.roulette__actions button { min-height: 52px; padding: 11px 22px; border: 2px solid #ffd078; border-radius: 10px; color: #180721; background: linear-gradient(#ffe285,#ff9c32); box-shadow: 0 0 15px rgba(255,146,42,.45),inset 0 0 11px rgba(255,255,194,.47); font: 900 20px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: transform .2s,box-shadow .2s; }
.roulette__spin:hover:not(:disabled),.roulette__actions button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 25px rgba(255,159,49,.85); }
.roulette__spin:disabled,.roulette__actions button:disabled { cursor: wait; opacity: .7; }
.roulette__result { margin-top: 25px; padding: 21px; border: 1px solid rgba(255,202,115,.8); border-radius: 15px; background: rgba(10,4,23,.85); box-shadow: inset 0 0 17px rgba(255,151,38,.12),0 0 17px rgba(255,149,34,.24); }
.roulette__kicker { margin: 0 0 8px; color: var(--lime); font: 900 15px/1 var(--display); letter-spacing: .18em; }
.roulette__result h3 { margin: 0 0 10px; color: #ffc76c; font: 900 clamp(31px,3.7vw,47px)/.9 var(--display); text-transform: uppercase; text-shadow: 0 0 15px rgba(255,150,35,.64); }
.roulette__result h3:focus { outline: none; }
.roulette__result p:not(.roulette__kicker) { max-width: 460px; margin: 0 auto; color: #f5e9fa; font: 650 clamp(19px,2.1vw,23px)/1.12 var(--body); }
.roulette__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 18px; }
.roulette__actions button { min-height: 46px; padding: 9px 13px; font-size: 16px; }
.roulette__actions button:last-child { border-color: #bf80ea; color: #fff; background: rgba(75,21,106,.74); box-shadow: inset 0 0 12px rgba(204,90,255,.2),0 0 12px rgba(192,78,252,.3); }
.roulette__actions button:last-child:hover:not(:disabled) { box-shadow: 0 0 21px rgba(205,90,255,.7); }
.roulette__status { min-height: 22px; margin: 15px 0 0; color: #b8f894; font: 700 17px/1.13 var(--display); }
.roulette__fallback { margin-top: 12px; text-align: left; }
.roulette__fallback label { display: block; margin-bottom: 6px; color: #fff; font: 800 17px/1 var(--display); }
.roulette__fallback input { width: 100%; min-height: 42px; padding: 8px; border: 1px solid #c6a9fa; border-radius: 6px; color: #fff; background: #180b30; font: 600 15px/1.1 Arial,sans-serif; }
@media (max-width: 860px) { .roulette__inner { grid-template-columns: 1fr; gap: 22px; }.roulette__intro > p:not(.eyebrow) { max-width: 680px; }.roulette__wheel-stage { --wheel-size: min(73vw,420px); --wheel-radius: min(24vw,138px); } }
@media (max-width: 520px) { .roulette__game { padding: 20px 14px; }.roulette__wheel-stage { --wheel-size: min(72vw,360px); --wheel-radius: min(23.8vw,119px); }.roulette__wheel { border-width: 6px; }.roulette__wheel-label { width: 57px; min-height: 33px; font-size: 10px; }.roulette__pointer { top: -11px; border-left-width: 12px; border-right-width: 12px; border-top-width: 27px; }.roulette__actions button { flex: 1 1 140px; }.roulette__spin { width: min(100%,310px); } }
@media (prefers-reduced-motion: reduce) { .roulette__wheel { transition: none; }.roulette__spin,.roulette__actions button { transition: none; } }