*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--red:#FF231F;--gold:#FFD66B;--gold2:#FFF0A4}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050202;color:#fff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.bg{position:fixed;inset:0;background:radial-gradient(circle at 50% -15%,rgba(255,35,31,.34),transparent 36%),radial-gradient(circle at 50% 52%,rgba(255,35,31,.08),transparent 35%),linear-gradient(180deg,#160303 0%,#070202 50%,#020101 100%)}
.sparks{position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(circle,rgba(255,35,31,.95) 0 1px,transparent 2px),radial-gradient(circle,rgba(255,214,107,.9) 0 1px,transparent 2px);background-size:90px 90px,145px 145px;animation:sparks 18s linear infinite}
@keyframes sparks{from{transform:translateY(-70px)}to{transform:translateY(90px)}}
.page{position:relative;width:min(430px,100%);height:100dvh;margin:auto;padding:max(12px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.logo{width:min(132px,36vw);height:72px;object-fit:contain;filter:drop-shadow(0 0 11px rgba(255,35,31,.65)) drop-shadow(0 0 24px rgba(255,214,107,.16))}
.title{text-align:center;margin-top:0;line-height:.9;font-weight:1000;letter-spacing:.025em}
.title span{display:block;font-size:clamp(27px,7vw,38px)}
.title strong{display:block;color:var(--red);font-size:clamp(42px,11vw,61px);text-shadow:0 0 15px rgba(255,35,31,.72),0 0 34px rgba(255,35,31,.32)}
.subtitle{margin-top:8px;color:rgba(255,255,255,.55);font-size:13px}

.wheel-area{position:relative;flex:1;min-height:275px;width:100%;display:grid;place-items:center}
.wheel-aura{position:absolute;width:min(86vw,370px);height:min(86vw,370px);border-radius:50%;background:conic-gradient(from 0deg,rgba(255,35,31,0),rgba(255,35,31,.20),rgba(255,214,107,.08),rgba(255,35,31,0),rgba(255,35,31,.18),rgba(255,35,31,0));filter:blur(18px);opacity:.5;animation:auraRotate 8s linear infinite}
@keyframes auraRotate{to{transform:rotate(360deg)}}
.wheel-shadow{position:absolute;bottom:9%;width:min(62vw,260px);height:32px;border-radius:50%;background:rgba(0,0,0,.86);filter:blur(10px)}
.wheel-button{position:relative;width:min(76vw,330px,42dvh);aspect-ratio:1;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer}
.wheel{position:absolute;inset:0;border-radius:50%;will-change:transform;filter:drop-shadow(0 28px 36px rgba(0,0,0,.78)) drop-shadow(0 0 28px rgba(255,35,31,.24));transition:transform 5.2s cubic-bezier(.07,.78,.09,1)}
.wheel.spinning{filter:drop-shadow(0 30px 40px rgba(0,0,0,.80)) drop-shadow(0 0 38px rgba(255,35,31,.42)) drop-shadow(0 0 18px rgba(255,214,107,.18))}
.wheel-svg{width:100%;height:100%}
.pointer{position:absolute;z-index:20;top:1%;left:50%;width:76px;height:96px;transform:translateX(-50%);filter:drop-shadow(0 12px 16px rgba(0,0,0,.8)) drop-shadow(0 0 15px rgba(255,35,31,.5))}
.pointer::before{content:"";position:absolute;inset:25px 12px 0;background:linear-gradient(180deg,#fff0a2,#ffb431 45%,#763000);clip-path:polygon(50% 100%,0 0,100% 0)}
.ruby{position:absolute;top:0;left:50%;width:40px;height:48px;transform:translateX(-50%);background:radial-gradient(circle at 32% 25%,#fff2e8,#ff4c48 24%,#FF231F 58%,#6d0000 100%);clip-path:polygon(50% 0,86% 25%,72% 100%,28% 100%,14% 25%);box-shadow:0 0 20px rgba(255,35,31,.85),inset 0 0 10px rgba(255,255,255,.3)}

.result{width:100%;text-align:center;margin-top:-3px}
.result.win-pop{animation:resultPop .6s cubic-bezier(.15,.82,.18,1)}
@keyframes resultPop{0%{opacity:0;transform:translateY(8px) scale(.97)}55%{opacity:1;transform:translateY(-2px) scale(1.025)}100%{opacity:1;transform:translateY(0) scale(1)}}
.result-label{color:var(--gold);font-size:10px;font-weight:1000;letter-spacing:.2em}
.result-title{margin-top:4px;font-size:18px;font-weight:900}
.result-value{margin-top:4px;color:var(--gold2);font-size:25px;font-weight:1000}

.reward{position:relative;overflow:hidden;width:100%;margin-top:10px;padding:13px;border-radius:18px;background:linear-gradient(180deg,rgba(255,35,31,.18),rgba(255,35,31,.05)),rgba(8,3,3,.9);border:1px solid rgba(255,35,31,.72);box-shadow:0 0 24px rgba(255,35,31,.22)}
.reward::before{content:"";position:absolute;left:-35%;top:-40%;width:40%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(16deg);animation:rewardShine 2.8s ease-in-out infinite}
@keyframes rewardShine{0%,60%{left:-40%}100%{left:125%}}
.hidden{display:none!important}
.reward-head,.reward-name,.promo,.claim{position:relative;z-index:1}
.reward-head{color:var(--gold);font-size:10px;font-weight:1000;letter-spacing:.18em}
.reward-name{margin-top:4px;font-size:20px;font-weight:1000}
.promo{margin-top:10px;padding:9px 10px;border-radius:13px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:rgba(0,0,0,.28);border:1px solid rgba(255,214,107,.22);backdrop-filter:blur(6px)}
.promo span{display:block;color:rgba(255,255,255,.5);font-size:9px;letter-spacing:.14em}
.promo strong{display:block;margin-top:3px;color:var(--gold2);font-size:18px;word-break:break-all}
.promo button{height:38px;padding:0 13px;border-radius:10px;border:1px solid rgba(255,214,107,.48);background:rgba(255,214,107,.08);color:var(--gold);font-weight:1000}

.claim,.spin{position:relative;overflow:hidden;width:100%;border:0;color:#fff;font-weight:1000;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.24),transparent 35%),linear-gradient(135deg,#ff6d63 0%,var(--red) 46%,#b40c08 72%,#600000 100%);box-shadow:0 0 0 3px rgba(255,214,107,.9),0 12px 27px rgba(0,0,0,.54),0 0 26px rgba(255,35,31,.42),inset 0 0 17px rgba(255,255,255,.16)}
.claim::after,.spin::after{content:"";position:absolute;top:0;left:-42%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:buttonSweep 2.9s ease-in-out infinite}
@keyframes buttonSweep{0%,58%{left:-42%}100%{left:126%}}
.claim{min-height:48px;margin-top:10px;border-radius:14px;font-size:16px;letter-spacing:.06em}
.spin{min-height:62px;margin-top:12px;border-radius:20px;font-size:clamp(21px,6vw,29px);letter-spacing:.07em}
.spin:active,.claim:active{transform:translateY(2px) scale(.99)}
.spin:disabled{opacity:.62}
.footer{margin-top:8px;color:rgba(255,214,107,.62);font-size:12px;font-weight:800}

.victory-flash{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:0;background:radial-gradient(circle at 50% 44%,rgba(255,242,181,.58),rgba(255,35,31,.30) 18%,transparent 48%)}
.victory-flash.show{animation:victoryFlash .65s ease-out forwards}
@keyframes victoryFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#confetti{position:fixed;inset:0;z-index:100;pointer-events:none}

@media(max-height:720px){
.logo{width:100px;height:48px}.title span{font-size:23px}.title strong{font-size:37px}.subtitle{font-size:10px;margin-top:4px}.wheel-area{min-height:210px}.wheel-button{width:min(63vw,235px,34dvh)}.pointer{width:56px;height:70px}.ruby{width:30px;height:36px}.result-title{font-size:14px}.result-value{font-size:19px}.reward{padding:9px;margin-top:7px}.reward-name{font-size:16px}.spin{min-height:48px;margin-top:7px;font-size:18px}.footer{margin-top:4px}
}