@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--muted:#8c8fae;--purple:#a77bff}*{box-sizing:border-box}body{margin:0;background:#090b18;color:#fff;font-family:Manrope,Arial,sans-serif;background-image:radial-gradient(ellipse at 72% 46%,#31205b55,transparent 48%);min-height:100vh}button{font:inherit;cursor:pointer}header{height:94px;max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #ffffff0c}.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.6px}.brand i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(140deg,#9870ff,#5340dc);box-shadow:0 0 30px #8b4bff35;font-style:normal;font-size:26px}.brand span span{color:#ac8bff}.nav{display:flex;gap:32px;font-size:13px;color:var(--muted)}.nav b{color:white;font-weight:600}.demo{border:1px solid #353044;border-radius:25px;padding:9px 15px;font-size:11px;color:#bab2d3;letter-spacing:1px}.demo:before{content:'●';color:#b19aff;margin-right:7px}main{max-width:1190px;margin:auto;min-height:calc(100vh - 165px);display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:40px;padding:48px 36px 40px}.eyebrow{font-size:11px;letter-spacing:3px;color:#b69bfa;font-weight:800;display:flex;align-items:center;gap:9px}.eyebrow:before{content:'';width:23px;height:1px;background:#af8efb}h1{font-size:clamp(42px,4.8vw,65px);line-height:1.13;letter-spacing:-3px;margin:23px 0 20px;font-weight:800}h1 em{font-style:normal;background:linear-gradient(90deg,#b294ff,#ecb5fe);background-clip:text;color:transparent}.lead{font-size:14px;line-height:1.9;color:#9597af;max-width:355px}.stats{display:flex;gap:30px;margin:30px 0}.stat{padding-right:30px;border-right:1px solid #ffffff12}.stat:last-child{border:0}.stat strong{font-size:22px;display:block}.stat small{font-size:10px;color:var(--muted)}.prizebox{display:flex;align-items:center;gap:15px;border:1px solid #9b71f52b;background:linear-gradient(115deg,#8a4cf319,#36195309);padding:18px 20px;border-radius:16px;max-width:366px}.gift{font-size:32px;filter:drop-shadow(0 0 15px #a36dff)}.prizebox small{display:block;font-size:10px;color:#b3a5d3;margin-bottom:5px;letter-spacing:1px}.prizebox strong{font-size:17px}.prizebox .star{margin-left:auto;color:#b99aff;font-size:22px}.fine{color:#676b87;font-size:10px;line-height:1.7;margin-top:20px}.game{text-align:center;position:relative}.game-top{font-size:11px;color:#c4bfd6;letter-spacing:1px;margin-bottom:21px}.game-top span{color:#ba9dff}.wheel-wrap{position:relative;width:min(100%,478px);margin:auto;aspect-ratio:1;filter:drop-shadow(0 18px 50px #7d36ff22)}.rim{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#dfcdff,#72619e 30%,#27213e 60%,#ad8ce1);padding:11px;box-shadow:0 0 0 8px #ffffff03,0 0 65px #7d39ff19}.wheel{width:100%;height:100%;border-radius:50%;transition:transform 5.5s cubic-bezier(.12,.72,.12,1);overflow:hidden;background:#402bf3;position:relative}svg{display:block;width:100%;height:100%}.pointer{position:absolute;z-index:4;left:50%;top:-13px;transform:translateX(-50%);width:38px;height:53px;filter:drop-shadow(0 4px 6px #13082e99);background:linear-gradient(140deg,#fff,#d6c7ff);clip-path:polygon(4% 0,96% 0,100% 19%,58% 94%,50% 100%,42% 94%,0 19%);border-radius:9px}.hub{position:absolute;z-index:3;width:94px;height:94px;border:7px solid #f3e9ff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(140deg,#ffd46e,#f6a322 70%);box-shadow:0 0 0 7px #c8a9ff55,0 7px 22px #180c58aa;color:#fff;font-size:43px;display:grid;place-items:center;padding:0}.hub:disabled{cursor:wait}.spin{border:1px solid #bfa0ff55;background:linear-gradient(105deg,#9e6af4,#7943e4);color:white;border-radius:12px;padding:17px 36px;width:min(100%,340px);font-size:13px;font-weight:800;margin-top:29px;box-shadow:0 8px 28px #8b4ef32a;transition:.2s}.spin:hover{filter:brightness(1.15);transform:translateY(-2px)}.spin:disabled{opacity:.6;cursor:wait;transform:none}.spin span{margin-left:15px}.remaining{color:#85809c;font-size:10px;margin-top:13px}.remaining b{color:#c9b6ee;font-weight:600}footer{max-width:1190px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff0b;padding:23px 36px;color:#5d617b;font-size:10px}.rules{color:#a19bb4;border:0;background:none;font-size:10px}.overlay{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:22px;background:#050512bb;backdrop-filter:blur(12px)}.overlay.open{display:flex}.modal{position:relative;width:390px;text-align:center;background:radial-gradient(ellipse at 50% 25%,#53268c77,transparent 65%),#101024;border:1px solid #9268d85e;border-radius:27px;padding:42px 30px;box-shadow:0 0 100px #6f35d52a}.modal .gift{font-size:76px;margin:15px}.modal h2{font-size:32px;letter-spacing:-1px;margin:12px 0}.modal p{font-size:12px;color:#aaa2c1;line-height:1.8}.award{border:1px solid #a268ff77;border-radius:16px;padding:18px;background:#6b2ddb33;margin:22px 0}.award strong{font-size:36px;display:block}.award small{color:#d1b8fa}.close{position:absolute;right:16px;top:12px;border:0;background:none;color:#8c839f;font-size:25px}.modal .spin{margin-top:7px}.confetti{position:fixed;top:-20px;width:7px;height:12px;z-index:15;pointer-events:none;animation:fall 3s ease-in forwards}@keyframes fall{to{transform:translateY(110vh) rotate(700deg);opacity:0}}@media(max-width:760px){header{height:75px;padding:0 23px}.brand{font-size:16px}.brand i{width:32px;height:32px;font-size:22px}.nav{display:none}.demo{font-size:9px;padding:7px 11px}main{display:flex;flex-direction:column;gap:28px;padding:32px 23px 30px}.intro{text-align:center;width:100%}.eyebrow{justify-content:center;font-size:9px}h1{font-size:40px;letter-spacing:-2px;margin:16px 0 12px}h1 br{display:none}.lead{margin:auto;font-size:12px;max-width:310px}.stats,.prizebox,.fine{display:none}.game{width:100%;max-width:440px}.game-top{font-size:10px;margin-bottom:23px}.wheel-wrap{width:calc(100% - 14px);max-width:370px}.rim{padding:8px}.hub{width:78px;height:78px;font-size:35px;border-width:6px}.pointer{width:30px;height:45px}.spin{margin-top:24px}.remaining{margin-top:12px}footer{padding:20px 23px;font-size:9px;gap:20px}.modal h2{font-size:30px}}@media(prefers-reduced-motion:reduce){.wheel{transition-duration:.1s}.confetti{display:none}}

/* Reference composition */
.intro{isolation:isolate}.prizebox{isolation:isolate}
body{background:#080b1b;background-image:radial-gradient(ellipse at 50% 43%,#18105c55,transparent 56%)}
header{height:94px;max-width:600px;border:0;justify-content:center;position:relative;padding:0 20px}.brand{font-size:27px;letter-spacing:-1px}.brand i{background:linear-gradient(135deg,#bb37ff,#2545ff);box-shadow:none;font-size:34px;width:42px;height:44px;clip-path:polygon(0 0,100% 24%,59% 50%,35% 100%,27% 46%)}.nav,.demo{display:none}
header:before{content:'‹';position:absolute;left:25px;top:23px;font-size:40px;color:#e7e6f5}main{display:flex;flex-direction:column;gap:0;padding:0;min-height:0;max-width:600px;overflow:hidden;margin:0 auto}.intro{width:100%;text-align:center;position:relative}.intro .eyebrow{display:block;font-size:21px;font-weight:400;letter-spacing:0;color:#c3bedc;margin:11px 0 7px}.intro .eyebrow:before{display:none}h1{font-size:43px;line-height:1.2;letter-spacing:-1.5px;margin:9px 0 0}.lead,.stats,.fine{display:none}.prizebox{display:flex;flex-direction:column;border:0;background:none;max-width:none;padding:0;gap:0;position:relative}.prizebox:before{content:'';position:absolute;width:390px;height:300px;left:50%;top:-12px;transform:translateX(-50%);background:repeating-conic-gradient(from 5deg,transparent 0deg,#6425ff26 8deg,transparent 18deg),radial-gradient(ellipse,#5830ffbb,transparent 65%);filter:blur(5px);z-index:-1}.prizebox>.gift{height:210px;width:240px;display:flex;align-items:center;justify-content:center;font-size:110px;filter:drop-shadow(0 0 25px #6034ff);margin:13px 0 -1px}.gift img{width:100%;height:100%;object-fit:contain}.prizebox>div:nth-child(2){display:flex;flex-direction:column;width:245px;border-radius:28px;border:2px solid transparent;background:linear-gradient(135deg,#38128b,#101b9a) padding-box,linear-gradient(110deg,#e545ff,#654bff,#4a52ff) border-box;padding:8px 20px 10px;box-shadow:0 0 25px #5328ff44}.prizebox small{order:2;letter-spacing:0;font-size:22px;font-weight:400;margin:0;color:#ded3fd}.prizebox strong{font-size:35px;line-height:1.1;letter-spacing:-1px}.prizebox .star{display:none}.account-note{font-size:17px;color:#c9c3df;margin:13px 0 34px}.game{width:100%;max-width:none}.game-top{display:none}.wheel-wrap{width:610px;max-width:none;margin:32px 0 0;left:50%;transform:translateX(-50%);filter:drop-shadow(0 0 28px #2520f944)}.rim{padding:2px;background:#f2edff;box-shadow:none}.wheel{background:transparent}.pointer{top:-40px;width:64px;height:64px;border-radius:14px;background:linear-gradient(140deg,#d9e3ff,#fff 63%,#e0d9ff);clip-path:polygon(0 0,100% 0,100% 20%,60% 94%,50% 100%,40% 94%,0 20%);filter:drop-shadow(0 0 7px #9b80ff)}.hub{width:122px;height:122px;border:10px solid white;background:linear-gradient(145deg,#ffdb38,#ffa100 55%,#ff8900);box-shadow:inset 0 0 0 4px #ffcc54,0 0 0 3px #d5c3ff9c,0 0 30px #eb78ff77;font-size:68px}.spin{position:relative;margin:23px auto 0;display:block;background:linear-gradient(110deg,#9827fa,#253dff);max-width:300px}.remaining{font-size:13px;color:#fff;margin:0;padding:23px 10px 26px;background:#080d32c9}.remaining b{color:white}.game .spin{display:none}footer{max-width:600px;justify-content:center;font-size:9px;padding:14px;border:0}footer>span{display:none}.rules{font-size:10px}.modal .gift{height:130px;margin:10px auto;width:150px;font-size:60px}.modal .spin{display:block}.modal{background:radial-gradient(ellipse at 50% 28%,#4224a0aa,transparent 65%),#090c21}.modal .eyebrow{font-size:10px}
@media(min-width:761px){header{height:100px}main{max-width:650px}.wheel-wrap{width:640px}.intro .eyebrow{margin-top:12px}.prizebox>.gift{height:205px}.account-note{margin-bottom:36px}body:before,body:after{content:'✦';position:fixed;font-size:27px;color:#6751d166;top:40%;left:17%;filter:drop-shadow(0 0 15px #9651ff)}body:after{left:auto;right:17%;top:60%;font-size:15px}}
@media(max-width:760px){header{height:85px}.brand{font-size:25px}.intro .eyebrow{font-size:19px;margin-top:8px}h1{font-size:39px}.prizebox>.gift{height:200px;width:220px;margin-top:10px}.account-note{font-size:16px;margin:14px 0 31px}.wheel-wrap{width:calc(100vw * 1.13);max-width:610px;margin-top:32px}.hub{width:103px;height:103px;border-width:9px;font-size:58px}.pointer{width:57px;height:60px;top:-38px}.prizebox>div:nth-child(2){width:235px}.prizebox strong{font-size:34px}.prizebox small{font-size:21px}.remaining{font-size:12px}.game{margin-bottom:0}}

/* Palette matched to the supplied reference, without a page-wide tint. */
body{background:#080d20;background-image:radial-gradient(ellipse 290px 290px at 50% 36%,#16105c66 0%,#080d2000 80%)}
.brand span span{color:#762fea}
.prizebox:before{background:repeating-conic-gradient(from 5deg,transparent 0deg,#5829ff35 8deg,transparent 18deg),radial-gradient(ellipse,#7134ffdd 0%,#3e20ff99 30%,#2610e344 49%,transparent 70%);filter:blur(5px)}
.prizebox>div:nth-child(2){background:linear-gradient(112deg,#441099 0%,#2c129d 40%,#131697 100%) padding-box,linear-gradient(115deg,#cc35eb 0%,#a233ee 24%,#6655fe 65%,#5639f4 100%) border-box;box-shadow:inset 0 0 24px #5924d82b,0 0 23px #4a1cff35}
.prizebox small{color:#d5c9ef}.intro .eyebrow{color:#c0bad8}.account-note{color:#c2bdd9}
.hub{background:linear-gradient(145deg,#ffda38 0%,#ffc52b 25%,#ffac09 55%,#ff9405 83%,#fa8a05 100%);border-color:#fffdf4;box-shadow:inset 0 0 0 4px #ffd24c,inset 0 -6px 8px #ed7a1244,0 0 0 3px #d5c3ff9c,0 0 30px #db75ff66;color:#fffdf1}
.pointer{background:linear-gradient(140deg,#d4dfff 0%,#eef0ff 36%,#fff 67%,#eee9ff 100%)}
.rim{background:#f2efff}.remaining{background:linear-gradient(180deg,#08124a,#080c22);color:#fff}.remaining b{color:#fff}
body:before,body:after{display:none}

/* Sampled photograph palette and clipped reference layout. */
:root{--wheel-diameter:min(118vw,720px)}
body{background:#070d27;background-image:radial-gradient(ellipse 300px 250px at 50% 32%,#14105266,transparent 80%)}
main{max-width:600px;width:100%;overflow:hidden;gap:0}header{max-width:600px}
.prizebox{overflow:visible}
.prizebox:before{width:min(100vw,430px);height:295px;top:-20px;background:repeating-conic-gradient(from 7deg at 50% 52%,transparent 0deg,#6430ff55 6deg,transparent 14deg),radial-gradient(ellipse at center,#7638ffdd 0%,#4b28ff99 27%,#3016e74d 46%,transparent 74%);mask-image:radial-gradient(ellipse at center,#000 0%,#000 21%,#000b 39%,#0005 58%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 21%,#000b 39%,#0005 58%,transparent 76%);filter:blur(6px);opacity:.95}
.prizebox>.gift{position:relative;filter:none}
.prizebox>.gift:before{content:'';position:absolute;inset:-30px -55px;background:radial-gradient(ellipse,#6b32ff88 0%,#4822ff44 35%,transparent 72%);pointer-events:none;z-index:-1}
.prizebox>.gift img{filter:drop-shadow(0 0 13px #7c39ff77);mask-image:radial-gradient(ellipse at 50% 49%,#000 0%,#000 52%,#000f 62%,#000b 74%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse at 50% 49%,#000 0%,#000 52%,#000f 62%,#000b 74%,transparent 100%)}
.prizebox>div:nth-child(2){background:linear-gradient(115deg,#3f148e 0%,#2c139c 40%,#171b95 100%) padding-box,linear-gradient(110deg,#bc3ce8,#7c48f4 50%,#4949ec) border-box;box-shadow:inset 0 0 21px #6435ed22,0 0 22px #4d26e62b}
.account-note{margin-bottom:18px;color:#bcb9d5}
.game{width:100%;max-width:none;position:relative;margin:0}
.wheel-window{position:relative;width:100%;height:calc(var(--wheel-diameter)*.63 + 40px);overflow:hidden;isolation:isolate}
.wheel-wrap{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:var(--wheel-diameter);max-width:none;margin:0;filter:none}
.rim{padding:2px;background:#e9e6f7;box-shadow:0 0 19px #543bfa33}
.pointer{z-index:5;background:linear-gradient(140deg,#cbd8f5,#f5f3ff 55%,#eee9ff);width:62px;height:61px;top:-39px;filter:drop-shadow(0 2px 3px #8c73c777)}
.hub{width:clamp(94px,21vw,124px);height:clamp(94px,21vw,124px);background:linear-gradient(145deg,#ffd444 0%,#ffc330 23%,#f9ad16 47%,#f5990c 67%,#ec820a 100%);border:10px solid #fffcf3;box-shadow:inset 0 0 0 4px #ffcc43,inset 0 -5px 5px #d8791533,0 0 0 2px #dfd3f4;color:#fffdf2;font-size:clamp(49px,11vw,67px)}
.remaining{position:relative;z-index:5;height:86px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:11px;background:linear-gradient(180deg,#081340 0%,#080f2b 62%,#080e24 100%);box-shadow:0 -12px 28px #080f2b22;font-family:Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;color:#f2f1f7;border:0;border-radius:0 0 42px 42px}
.footer-spin{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:31px;line-height:1;font-weight:400;background:radial-gradient(circle,#292069 0%,#1b1751 67%,#151139);color:#fff}
footer{display:none}
@media(max-width:760px){.account-note{margin-bottom:18px}.remaining{height:76px;font-size:12px;border-radius:0 0 32px 32px}.footer-spin{width:35px;height:35px;font-size:28px}.pointer{width:52px;height:56px;top:-35px}.hub{border-width:8px}}

/* Fit the complete reference composition to both viewport axes. */
html{height:100%;overflow:hidden}
body{height:100%;height:100dvh;min-height:0;margin:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.screen-shell{position:relative;flex:none;width:100%;height:100%;margin:auto;overflow:hidden}
.screen-stage{position:absolute;top:0;left:50%;width:var(--stage-width,600px);transform:translateX(-50%) scale(var(--screen-scale,1));transform-origin:top center;--wheel-diameter:calc(var(--stage-width,600px)*1.18)}
.screen-stage header,.screen-stage main{width:100%;max-width:100%}
.hub svg{width:56%;height:56%;overflow:visible;filter:drop-shadow(0 1px 1px #c9791733)}
.footer-spin svg{width:69%;height:69%;overflow:visible}
.remaining{isolation:isolate;background:linear-gradient(180deg,#071239 0%,#080f2b 57%,#070d24 100%);box-shadow:none;overflow:hidden}
.remaining:before,.remaining:after{content:'';position:absolute;z-index:-1;top:0;bottom:0;width:31%;pointer-events:none;opacity:.8}
.remaining:before{left:0;background:radial-gradient(ellipse at 0% 0%,#163ae96b 0%,#12249945 35%,#0b154321 63%,transparent 85%)}
.remaining:after{right:0;background:radial-gradient(ellipse at 100% 0%,#2349f973 0%,#1c2c9a40 36%,#0b154321 65%,transparent 86%)}
.footer-spin{background:radial-gradient(ellipse at 45% 25%,#30236b 0%,#211957 47%,#15113c 100%);box-shadow:inset 0 1px 3px #6951ac1f;color:#f6f4ff}
.hub:focus-visible{outline:3px solid #bd9dff;outline-offset:5px}

/* Desktop uses the available width instead of enlarging a phone frame. */
@media(min-width:600px){
.screen-stage{--wheel-diameter:calc(var(--stage-width)*.59)}
.screen-stage header{height:94px;padding:0 54px;justify-content:flex-start;border-bottom:1px solid #ffffff0a}
header:before{display:none}.brand{font-size:28px}
.screen-stage main{display:grid;grid-template-columns:42% 58%;align-items:center;overflow:visible;min-height:0;padding:36px 0 0;gap:0}
.intro{padding:0 0 35px 30px;align-self:center}
.intro .eyebrow{font-size:23px;margin-top:0}h1{font-size:51px;margin-top:10px}
.prizebox>.gift{height:240px;width:270px;margin-top:16px}
.prizebox:before{width:470px;height:330px;top:0}
.prizebox>div:nth-child(2){width:265px;padding:12px 20px}.prizebox strong{font-size:39px}.prizebox small{font-size:23px}
.account-note{margin:18px 0 0;font-size:17px}
.game{align-self:end;overflow:hidden;border-radius:0 0 30px 30px}
.wheel-window{height:calc(var(--wheel-diameter)*.63 + 46px)}
.wheel-wrap{top:46px}.remaining{height:85px;border-radius:0 0 30px 30px;font-size:14px}
.hub{width:124px;height:124px}
}
.hub svg{width:58%;height:58%;filter:none}.footer-spin svg{width:66%;height:66%}

@media(min-width:600px){
html,body{width:100%;height:100%;min-height:100%;overflow:hidden}
.screen-shell{width:100%!important;height:100%!important;margin:0}
.screen-stage{position:relative;left:auto;top:auto;width:100%;height:100%;transform:none;display:flex;flex-direction:column;--wheel-diameter:min(69vw,112vh);--wheel-diameter:min(69vw,112dvh)}
.screen-stage header{flex:0 0 84px;width:100%;max-width:none;padding:0 5vw}
.screen-stage main{width:100%;max-width:none;flex:1;min-height:0;padding:0;grid-template-columns:40% 60%;align-items:center;overflow:hidden}
.intro{padding:10px 0 15px 5vw;width:100%}
.intro .eyebrow{font-size:clamp(20px,1.7vw,28px)}
h1{font-size:clamp(42px,4vw,68px)}
.prizebox>.gift{width:min(25vw,36vh);height:min(25vw,36vh);width:min(25vw,36dvh);height:min(25vw,36dvh)}
.prizebox:before{width:100%;height:min(38vh,400px)}
.prizebox>div:nth-child(2){width:clamp(235px,22vw,340px)}
.prizebox strong{font-size:clamp(34px,3.1vw,48px)}
.prizebox small{font-size:clamp(20px,1.8vw,27px)}
.game{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;border-radius:0;overflow:hidden}
.wheel-window{flex:0 0 calc(var(--wheel-diameter)*.60 + 44px);width:100%;height:calc(var(--wheel-diameter)*.60 + 44px)}
.wheel-wrap{top:44px}
.remaining{flex:0 0 80px;height:80px;width:100%;border-radius:0;font-size:15px}
.hub{width:clamp(108px,9vw,150px);height:clamp(108px,9vw,150px)}
}
@media(min-width:600px) and (max-height:650px){
.screen-stage header{flex-basis:64px}
.intro .eyebrow{font-size:18px}h1{font-size:38px;margin:7px 0 0}
.prizebox>.gift{height:29dvh;width:29dvh;margin-top:5px}
.prizebox>div:nth-child(2){padding:6px 16px}.prizebox strong{font-size:30px}.prizebox small{font-size:18px}
.account-note{font-size:14px;margin-top:10px}.remaining{flex-basis:62px;height:62px}
}

@media(min-width:600px){
.screen-stage main{grid-template-columns:minmax(0,40%) minmax(0,60%)}
.intro{min-width:0;padding-left:2vw;padding-right:1vw}
.intro .eyebrow{font-size:clamp(15px,1.7vw,28px)}
h1{font-size:clamp(29px,4vw,68px)}
.prizebox>.gift{width:min(29vw,34dvh);height:min(29vw,34dvh)}
.prizebox>div:nth-child(2){width:min(30vw,340px);min-width:0;padding:10px 8px;border-radius:23px}
.prizebox strong{font-size:clamp(26px,3.1vw,48px)}
.prizebox small{font-size:clamp(16px,1.8vw,27px)}
.account-note{font-size:clamp(12px,1.3vw,17px)}
.screen-stage{--wheel-diameter:min(68vw,105dvh)}
.remaining{height:70px;flex-basis:70px;font-size:clamp(11px,1.2vw,15px)}
.hub{width:clamp(76px,9vw,150px);height:clamp(76px,9vw,150px);border-width:7px}
.pointer{width:clamp(36px,4.5vw,62px);height:clamp(43px,5vw,61px)}
.screen-stage header{padding:0 3vw}
}

/* One vertical composition on every screen: reward above, half wheel below. */
.screen-stage{position:absolute;top:0;left:50%;width:var(--stage-width,780px);height:auto;display:block;transform:translateX(-50%) scale(var(--screen-scale,1));transform-origin:top center;--wheel-diameter:calc(var(--stage-width,780px)*1.18)}
.screen-stage header{width:100%;max-width:none;height:88px;padding:0 24px;display:flex;justify-content:center;border:0}
.screen-stage main{display:flex;flex-direction:column;grid-template-columns:none;align-items:center;width:100%;max-width:none;min-height:0;padding:0;gap:0;overflow:hidden}
.intro{width:100%;min-width:0;padding:0;text-align:center;align-self:auto}
.intro .eyebrow{font-size:21px;margin:8px 0 7px}
h1{font-size:43px;line-height:1.2;margin:9px 0 0}
.prizebox>.gift{width:245px;height:215px;margin:12px 0 0}
.prizebox:before{width:min(100%,460px);height:300px;top:-15px}
.prizebox>div:nth-child(2){width:250px;padding:9px 18px 11px;border-radius:28px}
.prizebox strong{font-size:36px}.prizebox small{font-size:22px}
.account-note{font-size:17px;margin:14px 0 18px}
.game{width:100%;height:auto;min-height:0;max-width:none;display:block;align-self:auto;margin:0;overflow:hidden;border-radius:0}
.wheel-window{width:100%;height:calc(var(--wheel-diameter)*.61 + 40px);position:relative;flex:none;overflow:hidden}
.wheel-wrap{width:var(--wheel-diameter);top:40px;margin:0;position:absolute;left:50%;transform:translateX(-50%)}
.pointer{width:62px;height:61px;top:-39px}
.hub{width:124px;height:124px;border-width:10px}
.remaining{height:80px;flex:none;width:100%;font-size:14px;border-radius:0;display:flex}
.screen-shell{flex:none;margin:auto;position:relative;overflow:hidden}
@media(max-width:599px){
.screen-stage header{height:80px}.intro .eyebrow{font-size:19px}h1{font-size:39px}
.prizebox>.gift{width:220px;height:195px}
.prizebox>div:nth-child(2){width:235px}.prizebox strong{font-size:34px}.prizebox small{font-size:21px}
.account-note{font-size:16px}.pointer{width:52px;height:56px;top:-35px}
.hub{width:100px;height:100px;border-width:8px}.remaining{height:74px;font-size:12px}
}

.screen-stage header{justify-content:space-between;height:90px;padding:0 28px;gap:20px;border-bottom:1px solid #a58aff16}
header:before{display:none}
.entry-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;border:1px solid #a980ff70;border-radius:12px;background:linear-gradient(115deg,#8c38ef,#4931d7);color:#fff;font-size:14px;font-weight:700;padding:13px 20px;box-shadow:0 4px 20px #7132e82b}
.entry-button svg{width:18px;height:18px}.entry-button:hover{filter:brightness(1.13)}.entry-button:focus-visible{outline:3px solid #cfb5ff;outline-offset:3px}
.screen-stage main{padding-top:48px}
@media(max-width:599px){.screen-stage header{height:78px;padding:0 18px;gap:12px}.brand{font-size:21px;gap:7px}.brand i{width:32px;height:35px;font-size:28px}.entry-button{padding:11px 13px;font-size:12px;gap:6px;border-radius:10px}.entry-button svg{width:15px;height:15px}.screen-stage main{padding-top:33px}}

/* Keep the complete left and right wheel edges inside the desktop viewport. */
@media(min-width:600px){
.screen-stage{--wheel-diameter:calc(var(--stage-width,780px) - 40px)}
.wheel-window{height:calc(var(--wheel-diameter)*.61 + 40px)}
.wheel-wrap{width:var(--wheel-diameter)}
}

.wheel{transition:none!important;will-change:transform}
.pointer{transform-origin:50% 15%;will-change:transform}
.hub svg{width:55%;height:55%;stroke-width:1.8}
.footer-spin svg{width:64%;height:64%;stroke-width:1.8}
.hub.is-spinning{box-shadow:inset 0 0 0 4px #ffcc43,0 0 0 3px #f7e5a5,0 0 32px #ffb62466}
.hub:disabled{opacity:1}

/* Reference refresh marks: round arcs and slim arrowheads, without square corners. */
.hub svg{width:59%;height:59%;stroke-width:3.2;filter:none}
.footer-spin svg{width:72%;height:72%;stroke-width:2.6;filter:none}
.hub.is-spinning{box-shadow:inset 0 0 0 4px #ffcc43,inset 0 -5px 5px #d8791533,0 0 0 2px #dfd3f4}
.hub{transition:none}

.remaining{gap:11px}.sound-toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%);border:0;padding:8px 5px;background:transparent;color:#bcb7d5;font-family:Arial,sans-serif;font-size:9px;letter-spacing:.5px;cursor:pointer}.sound-toggle:hover{color:#fff}.sound-toggle:focus-visible{outline:1px solid #ded5ff;border-radius:4px}.sound-toggle[aria-pressed="false"]{color:#77718f}
@media(max-width:599px){.sound-toggle{right:9px;font-size:8px}.remaining{padding-right:42px;font-size:11px}}

.pointer{width:68px;height:79px;top:-49px;background:none;border:0;border-radius:0;clip-path:none;filter:drop-shadow(0 4px 2px #02051e88) drop-shadow(0 0 2px #b3b4ff44);transform-origin:50% 14%;overflow:visible;z-index:5}
.pointer svg{width:100%;height:100%;display:block;overflow:visible}
@media(max-width:599px){.pointer{width:57px;height:66px;top:-41px}}
@media(prefers-reduced-motion:reduce){.pointer{will-change:auto}}

/* Beveled wheel rim and recessed rotating face, preserving the reference palette. */
.wheel-wrap{isolation:isolate;filter:drop-shadow(0 14px 14px #01031666)}
.rim{overflow:visible;padding:7px;border-radius:50%;background:linear-gradient(145deg,#ffffff 0%,#d7dcf8 17%,#9a9ec9 40%,#5a558b 66%,#b4b4df 87%,#ebeaff 100%);box-shadow:0 3px 0 #8a87b3,0 6px 0 #59567e,0 9px 0 #33304e,0 12px 0 #1a1b35,0 16px 17px #02041566,inset 0 1px 1px #fff}
.rim:before{content:'';position:absolute;inset:3px;border:1px solid #fff7;border-radius:50%;pointer-events:none;z-index:2}
.rim:after{content:'';position:absolute;inset:7px;border-radius:50%;box-shadow:inset 0 3px 7px #08032a66,inset 0 -1px 3px #f1dfff55;pointer-events:none;z-index:2}
.wheel{box-shadow:inset 0 0 12px #10042a77}
.hub{box-shadow:inset 0 2px 2px #fff3b8,inset 0 0 0 4px #ffcd46,inset 0 -6px 9px #c9711544,0 3px 0 #c4b3db,0 7px 0 #8d7caa,0 10px 14px #13093377;z-index:4}
.hub.is-spinning{box-shadow:inset 0 2px 2px #fff3b8,inset 0 0 0 4px #ffcd46,inset 0 -6px 9px #c9711544,0 3px 0 #c4b3db,0 7px 0 #8d7caa,0 10px 14px #13093377}
@media(max-width:599px){.rim{padding:5px}.rim:after{inset:5px}.rim:before{inset:2px}}

/* Footer stays within the wheel; side fades reveal the page beneath it. */
.game{overflow:visible}
.remaining{width:min(100%,var(--wheel-diameter));margin:0 auto;overflow:visible;background:none;box-shadow:none;isolation:isolate}
.remaining:before{inset:0;width:100%;opacity:1;background:linear-gradient(90deg,transparent 0%,#10246866 7%,#0a1749d9 20%,#080f2b 40%,#080f2b 60%,#0a1749d9 80%,#15276c66 93%,transparent 100%);z-index:-1}
.remaining:after{inset:0;width:100%;opacity:.6;background:linear-gradient(90deg,transparent,#3947b240 16%,#4441ad26 50%,#3947b240 84%,transparent);height:1px;z-index:-1}
.winners-control{position:absolute;left:22px;top:50%;transform:translateY(-50%);z-index:8}
.winners-button{display:flex;align-items:center;gap:7px;padding:10px 13px;border-radius:10px;border:1px solid #9a80df88;background:linear-gradient(145deg,#584193,#33245f 70%);box-shadow:inset 0 1px 0 #bca3ed88,0 3px 0 #21173f,0 5px 7px #02051755;color:#f5efff;font-size:11px;font-weight:700;cursor:pointer}
.winners-button svg{width:19px;height:19px;filter:drop-shadow(0 1px 0 #140d32)}
.winners-button:hover,.winners-button[aria-expanded="true"]{background:linear-gradient(145deg,#6851a6,#40306c)}
.winners-button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #bca3ed66,0 1px 0 #21173f}
.winners-button:focus-visible{outline:2px solid #d8c3ff;outline-offset:4px}
.winners-panel{position:absolute;left:0;bottom:calc(100% + 15px);width:285px;padding:18px;background:linear-gradient(145deg,#171735,#0b1028);border:1px solid #75619e80;border-radius:16px;box-shadow:0 15px 38px #020413aa,inset 0 1px 0 #d4b4ff18;color:#f4efff;text-align:left;letter-spacing:0;cursor:default}
.winners-panel[hidden]{display:none}
.winners-control:before{content:'';position:absolute;bottom:100%;height:18px;width:100%}
.winners-heading{display:flex;justify-content:space-between;align-items:center}.winners-heading strong{font-size:14px}.winners-heading>span{font-size:8px;letter-spacing:1px;color:#c0a6ee;border:1px solid #8664b355;padding:4px 6px;border-radius:5px}
.winners-caption{font-size:10px;font-weight:400;color:#9a94b1;margin:7px 0 13px}
.winners-panel ul{padding:0;margin:0;list-style:none}.winners-panel li{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #aba0d01a;font-size:12px;font-weight:500}.winners-panel li:last-child{padding-bottom:1px}.winners-panel li small{display:block;font-size:9px;color:#8e89a7;margin-top:4px}.winners-panel li b{margin-left:auto;font-size:12px;color:#dfc6ff;white-space:nowrap}
.winner-avatar{display:grid;place-items:center;width:31px;height:31px;background:linear-gradient(145deg,#4b3776,#282143);border:1px solid #9f78cc33;border-radius:50%;color:#dfcbff;font-size:11px}
@media(max-width:599px){.remaining{height:80px;padding:0 0 25px;gap:7px}.remaining>.footer-spin{width:29px;height:29px}.remaining>#remainingLabel{font-size:10px}.winners-control{left:16px;top:auto;bottom:10px;transform:none}.winners-button{padding:6px 9px;font-size:9px;border-radius:8px;gap:5px}.winners-button svg{width:15px;height:15px}.sound-toggle{top:auto;bottom:9px;transform:none;right:16px}.winners-panel{width:260px;max-width:calc(100vw - 48px)}}

.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;right:22px;top:50%;bottom:auto;transform:translateY(-50%);padding:10px 12px;border:1px solid #8c77c766;border-radius:10px;background:linear-gradient(145deg,#3d315f,#251e41);box-shadow:inset 0 1px 0 #bca3ed40,0 3px 0 #17122b;color:#e9e0fb;font-size:11px;font-weight:600;letter-spacing:0;min-width:100px}
.sound-toggle svg{width:18px;height:18px;flex:none}.sound-toggle:hover{background:linear-gradient(145deg,#514074,#30264e)}.sound-toggle[aria-pressed="false"]{color:#ada6bd;background:linear-gradient(145deg,#302b40,#211e30)}
@media(max-width:599px){.sound-toggle{right:16px;top:auto;bottom:10px;transform:none;padding:6px 9px;border-radius:8px;font-size:9px;min-width:85px;gap:5px}.sound-toggle svg{width:15px;height:15px}}

/* Suspended pointer: fixed support behind the moving white pointer. */
.pointer-mount{position:absolute;z-index:4;left:50%;top:-49px;transform:translateX(-50%);width:94px;height:60px;pointer-events:none;background:radial-gradient(ellipse at 50% 75%,#7474b73b 0%,#454b8430 28%,#20295718 52%,transparent 76%)}
.pointer-mount:before{content:'';position:absolute;left:50%;bottom:27px;transform:translateX(-50%);width:35px;height:60px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,transparent 0%,#39426915 16%,#66719c55 54%,#9ca6cc99 83%,#525d89 100%);mask-image:linear-gradient(180deg,transparent,#000 60%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);box-shadow:0 6px 9px #02051b44}
.pointer-mount:after{content:'';position:absolute;left:50%;bottom:23px;transform:translateX(-50%);width:63px;height:16px;border-radius:9px;background:linear-gradient(180deg,#c0c8e4,#777fa5 46%,#343d68);border:1px solid #9ba7cc66;box-shadow:0 4px 7px #01051d66,inset 0 1px 1px #edf0ff88}
.pointer-mount span{position:absolute;z-index:1;left:50%;bottom:25px;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f8faff,#a5afd0 45%,#505b84 80%);box-shadow:0 1px 2px #070c26aa}
.screen-stage main{padding-top:67px}
.wheel-window{overflow:visible;clip-path:inset(-55px 0 0 0)}
@media(max-width:599px){.pointer-mount{top:-41px;width:78px;height:50px}.pointer-mount:before{width:29px;height:51px;bottom:23px}.pointer-mount:after{width:53px;height:14px;bottom:19px}.pointer-mount span{bottom:21px;width:8px;height:8px}.screen-stage main{padding-top:54px}}

@media(max-width:599px){
html,body{height:100%;min-height:0;overflow:hidden}
body{display:block}
.screen-shell{width:100%!important;height:100dvh;margin:0;overflow:hidden}
.screen-stage{position:relative;left:auto;top:auto;transform:none;width:100%;height:var(--mobile-height,100dvh);display:flex;flex-direction:column;--wheel-diameter:min(118vw,105dvh)}
.screen-stage header{flex:0 0 78px;height:78px;padding:0 18px}
.screen-stage main{display:flex;flex:1;min-height:0;flex-direction:column;justify-content:flex-end;padding:0;overflow:visible}
.game{width:100%;height:auto;flex:none;display:block;margin:0}
.wheel-window{height:calc(var(--wheel-diameter)*.61 + 40px);width:100%}
.remaining{height:calc(80px + env(safe-area-inset-bottom,0px));padding-bottom:calc(25px + env(safe-area-inset-bottom,0px));margin-bottom:0}
.winners-control{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.sound-toggle{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:599px) and (max-height:480px){
.screen-stage{--wheel-diameter:min(118vw,85dvh)}
.screen-stage header{flex-basis:62px;height:62px}
}

@media(min-width:600px){
html,body{height:100%;min-height:0;overflow:hidden}
body{display:block}
.screen-shell{width:100%!important;height:100dvh;margin:0;overflow:hidden}
.screen-stage{position:relative;left:auto;top:auto;transform:none;width:100%;height:var(--mobile-height,100dvh);display:flex;flex-direction:column;--wheel-diameter:min(740px,calc(100vw - 40px),100dvh)}
.screen-stage header{width:100%;max-width:none;flex:0 0 90px;height:90px;padding:0 clamp(24px,5vw,90px)}
.screen-stage main{display:flex;flex:1;min-height:0;width:100%;max-width:none;flex-direction:column;justify-content:flex-end;padding:0;overflow:visible}
.game{width:100%;height:auto;flex:none;display:block;margin:0}
.wheel-window{height:calc(var(--wheel-diameter)*.61 + 40px);width:100%;overflow:visible;clip-path:inset(-55px 0 0 0)}
.wheel-wrap{width:var(--wheel-diameter)}
.remaining{height:80px;margin:0 auto;width:var(--wheel-diameter)}
}
@media(min-width:600px) and (max-height:560px){
.screen-stage{--wheel-diameter:min(740px,calc(100vw - 40px),83dvh)}
.screen-stage header{flex-basis:64px;height:64px}
.remaining{height:68px}
}

.overlay{perspective:1100px;background:#040618a6;backdrop-filter:blur(12px);padding:20px}
.overlay.open{animation:rewardBackdropIn .45s ease both}
.modal{transform-style:preserve-3d;transform-origin:50% 58%;border:1px solid #b18add80;background:radial-gradient(ellipse at 45% 0%,#56308c77,transparent 60%),linear-gradient(145deg,#17162e,#0b1025);box-shadow:inset 0 1px 1px #e6d2ff55,inset 1px 0 0 #a99bd124,0 5px 0 #29223e,0 9px 0 #151327,0 28px 70px #0009;backface-visibility:hidden}
.overlay.open .modal{animation:rewardEnter .72s cubic-bezier(.18,.8,.22,1) both}
.modal>.gift{transform:translateZ(35px);filter:drop-shadow(0 12px 16px #08031e66)}
.modal .award{transform:translateZ(20px);background:linear-gradient(130deg,#6334a54d,#25176180);border-color:#b480ed88;box-shadow:inset 0 1px 1px #d8acff33,0 4px 0 #1b1236,0 10px 20px #0003}
.modal h2{transform:translateZ(25px)}
.overlay.closing{animation:rewardBackdropOut .42s ease both;pointer-events:none}
.overlay.closing .modal{animation:rewardExit .42s cubic-bezier(.45,0,.8,.4) both}
@keyframes rewardEnter{0%{opacity:0;transform:translateY(60px) translateZ(-230px) rotateX(19deg) rotateY(-7deg) scale(.83)}65%{opacity:1;transform:translateY(-5px) translateZ(14px) rotateX(-2deg) rotateY(1deg) scale(1.01)}100%{opacity:1;transform:translateY(0) translateZ(0) rotateX(0) rotateY(0) scale(1)}}
@keyframes rewardExit{from{opacity:1;transform:translateY(0) translateZ(0) rotateX(0) rotateY(0) scale(1)}to{opacity:0;transform:translateY(60px) translateZ(-230px) rotateX(19deg) rotateY(-7deg) scale(.83)}}
@keyframes rewardBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes rewardBackdropOut{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.overlay.open,.overlay.open .modal,.overlay.closing,.overlay.closing .modal{animation:none}.modal>.gift,.modal h2,.modal .award{transform:none}}
@media(max-height:650px){.modal{padding:23px 24px;max-height:calc(100dvh - 30px);overflow-y:auto}.modal .gift{height:85px;width:100px;margin:5px auto}.modal h2{font-size:28px;margin:7px 0}.modal p{margin:8px 0}.modal .award{padding:12px;margin:14px 0}}

.game{isolation:isolate;position:relative}
.storm{position:absolute;z-index:-1;pointer-events:none;left:50%;bottom:70px;transform:translateX(-50%);width:min(125vw,1200px);height:calc(var(--wheel-diameter)*1.05);opacity:0}
.storm svg{width:100%;height:100%;overflow:visible}
.game:before{content:'';position:absolute;z-index:-2;left:50%;bottom:55px;transform:translateX(-50%);width:var(--wheel-diameter);height:calc(var(--wheel-diameter)*.9);background:radial-gradient(ellipse at 50% 65%,#6032cf44,transparent 69%);opacity:0;transition:opacity .7s;pointer-events:none}
.game.storm-active:before{opacity:1}
@media(prefers-reduced-motion:reduce){.storm,.game.storm-active:before{display:none}}

.reward-weather{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0}
.overlay .modal{position:relative;z-index:1}
.overlay.open .reward-weather{animation:rewardSky 2.7s ease-out both}
.reward-weather:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#b6c6ff99,#7147c52b 45%,transparent 75%);opacity:0}
.overlay.open .reward-weather:before{animation:skyFlash 1.1s ease-out both}
.reward-weather svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 9px #9366ff) drop-shadow(0 0 3px #fff);opacity:0}
.reward-weather svg path{fill:none;stroke:#e5e7ff;stroke-width:2.5;stroke-linejoin:round}
.overlay.open .reward-weather svg{animation:skyFlash .8s ease-out both}
.reward-rays{position:absolute;left:50%;top:45%;width:180vmax;height:180vmax;margin:-90vmax;background:repeating-conic-gradient(from 0deg,transparent 0deg 17deg,#c2c5ff00 18deg,#bca6ff40 21deg,#d7dfff66 23deg,#9e7dff18 26deg,transparent 30deg 47deg);mask-image:radial-gradient(circle,transparent 2%,#000 12%,#0007 35%,transparent 61%);-webkit-mask-image:radial-gradient(circle,transparent 2%,#000 12%,#0007 35%,transparent 61%);opacity:0}
.overlay.open .reward-rays{animation:rewardRays 2.6s ease-out both}
.overlay.closing .reward-weather{opacity:0;transition:opacity .2s}
@keyframes rewardSky{0%{opacity:0}5%{opacity:1}65%{opacity:.8}100%{opacity:0}}
@keyframes skyFlash{0%{opacity:0}9%{opacity:.85}20%{opacity:.12}30%{opacity:.65}55%,100%{opacity:0}}
@keyframes rewardRays{0%{opacity:0;transform:rotate(-22deg) scale(.85)}18%{opacity:.8}65%{opacity:.5}100%{opacity:0;transform:rotate(26deg) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.reward-weather{display:none}}

/* A thin illuminated bezel surrounds the sculpted segments. */
.wheel-halo{position:absolute;inset:-17px;border-radius:50%;z-index:-1;background:conic-gradient(from 30deg,#433769,#a7a7d3 12%,#4b3d79 24%,#241b42 42%,#746093 60%,#c9baf3 77%,#41305f 93%,#433769);box-shadow:inset 0 1px 2px #eae3ff99,inset 0 -4px 6px #09071d,0 5px 0 #20172e,0 11px 18px #0006}
.wheel-halo:before{content:'';position:absolute;inset:4px;border:1px solid #ac8bf866;border-radius:50%;box-shadow:0 0 10px #7745ff33,inset 0 0 8px #7548f52b}
.wheel-halo:after{content:'';position:absolute;inset:10px;border-radius:50%;border:2px solid #26203e;box-shadow:0 1px 0 #d7c3ff66}
.wheel-studs{position:absolute;inset:-13px;z-index:3;border-radius:50%;pointer-events:none}
.wheel-studs i{position:absolute;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cab9fc 40%,#7054a6 80%);box-shadow:0 0 4px #a781ff80,0 1px 2px #110e20}
.turning .wheel-studs i{animation:bezelLight 1.65s ease-in-out infinite;animation-delay:var(--delay)}
.turning .wheel-halo:before{box-shadow:0 0 17px #8858ff66,inset 0 0 10px #7948fa55}
@keyframes bezelLight{0%,100%{opacity:.45;box-shadow:0 0 2px #9e71ff33}35%{opacity:1;box-shadow:0 0 8px #ddd0ff,0 0 13px #8351ff99}65%{opacity:.7}}
@media(max-width:599px){.wheel-halo{inset:-12px}.wheel-studs{inset:-9px}.wheel-studs i{width:4px;height:4px}}
@media(prefers-reduced-motion:reduce){.turning .wheel-studs i{animation:none}}

.myth-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #9d86c655;background:#17162b;color:#d3c6eb;border-radius:10px;padding:11px 14px;font:600 12px Manrope,Arial;cursor:pointer;white-space:nowrap}.myth-toggle svg{width:20px;height:20px}.myth-toggle:hover{border-color:#c4a365}.myth-toggle:focus-visible{outline:2px solid #e9c37b;outline-offset:3px}
.olympus-scene{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .7s;overflow:hidden;background:radial-gradient(ellipse at 50% 13%,#9f77332c,transparent 53%),linear-gradient(#101725,#080e1c)}
.olympus-sun{position:absolute;width:380px;height:380px;border-radius:50%;left:50%;top:10%;transform:translateX(-50%);border:1px solid #d1ac5b35;box-shadow:0 0 0 18px #b68c3d08,0 0 0 21px #d1ac5b18,0 0 110px #ad7c2c18;background:radial-gradient(circle,#d1ae5822,transparent 65%)}
.olympus-column{position:absolute;bottom:-4%;height:72%;width:clamp(48px,8vw,130px);background:repeating-linear-gradient(90deg,#33404b88 0%,#9da5a04d 8%,#e6d7b32e 13%,#38444f88 20%);border:1px solid #aeab8c33;mask-image:linear-gradient(transparent,#000 18%);-webkit-mask-image:linear-gradient(transparent,#000 18%);opacity:.5;transform:perspective(800px) rotateY(10deg)}
.olympus-column:before,.olympus-column:after{content:'';position:absolute;left:-13%;width:126%;height:24px;background:linear-gradient(#b1b3a76b,#33404b);border:1px solid #a8a38b55;box-shadow:0 5px 0 #24303b}.olympus-column:before{top:9%}.olympus-column:after{bottom:10px}.column-left{left:7%}.column-right{right:7%;transform:perspective(800px) rotateY(-10deg)}
.olympus-mist{position:absolute;inset:40% -30% -20%;background:radial-gradient(ellipse at 30% 65%,#d7c59b10,transparent 45%),radial-gradient(ellipse at 70% 70%,#d7c59b10,transparent 44%)}
.olympus-caption{position:absolute;top:23%;left:50%;transform:translateX(-50%);font-family:Georgia,serif;letter-spacing:12px;font-size:clamp(26px,5vw,60px);color:#d2b47370;text-align:center;white-space:nowrap}.olympus-caption span{display:block;font-family:Manrope,Arial;font-size:9px;letter-spacing:5px;margin-top:15px;color:#c5b38b88}
body.myth-mode{background:#0a111e}.myth-mode .olympus-scene{opacity:1}.myth-mode .screen-shell{background:transparent}.myth-mode header{border-bottom:1px solid #c4a36533;background:linear-gradient(#0b1222cc,#10172755)}
.myth-mode .myth-toggle{background:linear-gradient(135deg,#dac18a,#9b773a);color:#201c14;border-color:#e7d19b;box-shadow:inset 0 1px 0 #fff7d3,0 2px 0 #5f4828}
.myth-mode .brand span span{color:#d1ad66}.myth-mode .brand i{background:linear-gradient(135deg,#f1d798,#a47b39)}
.myth-mode .entry-button{background:linear-gradient(130deg,#b99250,#775527);border-color:#d9b57888;box-shadow:0 4px 20px #aa7e2422}
.myth-mode .wheel-halo{background:conic-gradient(#f1d99e,#856030,#d7ba79,#63441f,#c4a15d,#f6e6b5,#a47d3e);box-shadow:inset 0 1px 2px #fff3cc,0 6px 0 #604421,0 11px 20px #0008}
.myth-mode .wheel-halo:before{border-color:#f0d69c88}.myth-mode .wheel-studs i{background:radial-gradient(circle at 35% 30%,#fff8d8,#d6b566 55%,#80602e);box-shadow:0 0 6px #ebc46a66}
.myth-mode .remaining:before{background:linear-gradient(90deg,transparent,#4f432955 9%,#151e2bef 28%,#111927 50%,#151e2bef 72%,#4f432955 91%,transparent)}
.myth-mode .footer-spin{background:radial-gradient(circle,#65502e,#28261e)}
.myth-mode .winners-button,.myth-mode .sound-toggle{background:linear-gradient(145deg,#675335,#352b20);border-color:#b3945d88;box-shadow:inset 0 1px 0 #dfc58c66,0 3px 0 #231e15;color:#f0dfbb}
.myth-mode .winners-panel,.myth-mode .modal{background:radial-gradient(ellipse at top,#6e542b55,transparent 70%),#101925;border-color:#bf9c6099}.myth-mode .modal .award{background:linear-gradient(130deg,#96723b44,#3f332a66);border-color:#c4a36588}
@media(max-width:599px){.screen-stage header{gap:8px;padding:0 12px}.brand{font-size:17px;gap:4px}.brand i{width:25px;height:30px}.myth-toggle{padding:9px 8px;font-size:10px;gap:4px}.myth-toggle svg{width:16px;height:16px}.entry-button{font-size:10px;padding:10px 8px;gap:3px}.entry-button svg{width:13px;height:13px}.olympus-sun{width:250px;height:250px;top:18%}.column-left{left:-2%}.column-right{right:-2%}.olympus-caption{top:23%;letter-spacing:7px}.olympus-caption span{font-size:8px;letter-spacing:3px}}
@media(prefers-reduced-motion:reduce){.olympus-scene{transition:none}}

.olympus-temple{position:absolute;width:min(85vw,1000px);height:auto;left:50%;top:9%;transform:translateX(-50%);opacity:.22;mask-image:linear-gradient(#000 30%,transparent 95%)}
.olympus-dust{position:absolute;inset:0;overflow:hidden}.olympus-dust i{position:absolute;bottom:-15px;width:2px;height:2px;border-radius:50%;background:#fbe1a0;box-shadow:0 0 8px #e6ba5e;animation:olympusDust var(--duration) linear infinite;animation-delay:var(--delay);opacity:0}
.olympus-caption{top:21%;color:#ddc18b99;text-shadow:0 2px 14px #cda05433}.olympus-caption span{color:#cdbb90}
.myth-mode .olympus-sun{background:radial-gradient(circle,#b98c3020,transparent 65%);animation:olympusSun 8s ease-in-out infinite}
.olympus-mist{animation:olympusCloud 18s ease-in-out infinite alternate}
.greek-ring{display:none;position:absolute;inset:-29px;z-index:-2;border-radius:50%;background:linear-gradient(140deg,#cab077,#40351f 35%,#8e7541 70%,#d2bd85);box-shadow:0 0 0 1px #e0c38977,0 7px 0 #332a18,0 12px 25px #0008;pointer-events:none}
.greek-ring svg{width:100%;height:100%}.myth-mode .greek-ring{display:block}
.myth-mode .wheel-window{clip-path:inset(-65px -32px 0 -32px)}
.myth-mode .wheel-halo{box-shadow:inset 0 1px 2px #fff3cc,0 4px 0 #604421,0 7px 16px #0008}
.myth-mode .hub{background:radial-gradient(circle at 35% 25%,#fff0ad,#deb75f 45%,#a6752c 80%,#755020);border-color:#e9dfbd;box-shadow:inset 0 0 0 3px #edce87,inset 0 -5px 8px #6b481b77,0 4px 0 #7d683a,0 8px 15px #070c1788;color:#fff6d8}
.myth-mode .hub.is-spinning{box-shadow:inset 0 0 0 3px #edce87,inset 0 -5px 8px #6b481b77,0 4px 0 #7d683a,0 8px 15px #070c1788}
.myth-mode .storm{filter:sepia(.7) saturate(.8)}
.myth-mode .game.storm-active:before{background:radial-gradient(ellipse at 50% 65%,#c1983c44,transparent 69%)}
.myth-mode .reward-rays{background:repeating-conic-gradient(transparent 0deg 17deg,#f8dea400 18deg,#e7b75e40 21deg,#fff0c766 23deg,#c99a4d18 26deg,transparent 30deg 47deg)}
.myth-mode .reward-weather svg{filter:drop-shadow(0 0 9px #dbb567) drop-shadow(0 0 3px #fff)}
.myth-mode .modal h2{font-family:Georgia,serif;color:#f1dcae;letter-spacing:.3px}
.myth-mode .modal .spin{background:linear-gradient(120deg,#c6a164,#8c6631);border-color:#e2c48777;color:#fff4db}
@keyframes olympusDust{0%{transform:translateY(0) translateX(0);opacity:0}15%{opacity:.6}80%{opacity:.35}100%{transform:translateY(-90vh) translateX(45px);opacity:0}}
@keyframes olympusSun{0%,100%{opacity:.6;box-shadow:0 0 0 18px #b68c3d08,0 0 0 21px #d1ac5b18,0 0 90px #ad7c2c18}50%{opacity:1;box-shadow:0 0 0 18px #b68c3d12,0 0 0 21px #d1ac5b30,0 0 140px #ad7c2c30}}
@keyframes olympusCloud{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
body:not(.myth-mode) .olympus-dust i{animation-play-state:paused}
@media(max-width:599px){.greek-ring{inset:-20px}.olympus-temple{top:18%;width:120vw;opacity:.19}}
@media(prefers-reduced-motion:reduce){.olympus-dust i{display:none}.myth-mode .olympus-sun,.olympus-mist{animation:none}}

.olympus-stars{position:absolute;inset:0;width:100%;height:75%;opacity:.7}
.olympus-oracle{display:none;position:absolute;left:50%;top:-42px;transform:translateX(-50%);align-items:center;gap:13px;white-space:nowrap;letter-spacing:3px;color:#d2b77c;font:10px Georgia,serif;text-shadow:0 0 15px #d5a95455}
.myth-mode .olympus-oracle{display:flex}.oracle-line{width:36px;height:1px;background:linear-gradient(90deg,transparent,#ba975d)}.oracle-line:last-child{transform:rotate(180deg)}
.myth-mode .hub svg{display:none}
.myth-mode .hub:before{content:'';width:45%;height:61%;background:linear-gradient(135deg,#fff9de,#fdf2c8 50%,#b27a25);clip-path:polygon(52% 0,4% 55%,42% 55%,24% 100%,96% 36%,57% 36%,77% 0);filter:drop-shadow(0 3px 2px #845721);position:absolute;left:28%;top:20%}
.myth-mode .hub:after{content:'';position:absolute;inset:10px;border-radius:50%;border:1px solid #ffedb566;box-shadow:inset 0 0 12px #ffe0a622}
.myth-mode .hub.is-spinning:before{animation:zeusCharge 1.8s ease-in-out infinite}
.myth-mode.olympus-charged .olympus-temple{opacity:.48;filter:drop-shadow(0 0 12px #d5ac4f44);transition:opacity 1s,filter 1s}
.olympus-temple{transition:opacity 1s,filter 1s}
.myth-mode.olympus-charged .olympus-sun{border-color:#e2c77b77;background:radial-gradient(circle,#d5ae4933,transparent 70%)}
.laurel{display:none;position:absolute;left:-22px;top:50%;transform:translateY(-50%);width:calc(100% + 44px);height:120px;pointer-events:none;overflow:visible}
.myth-mode .modal .award{position:relative;margin:27px 15px}
.myth-mode .laurel{display:block}
.modal .award strong{position:relative;z-index:1;font-size:clamp(16px,4.2vw,26px);line-height:1.2;padding:6px 58px;overflow-wrap:anywhere}
.myth-mode .award strong{color:#fff0c6;text-shadow:0 2px 3px #4d371e,0 0 18px #dfb55f44}
.myth-mode .award small{position:relative;z-index:1}
.myth-mode .modal{border-radius:18px;border:1px solid #d3b07399;box-shadow:inset 0 1px 0 #f7dfac88,inset 0 0 0 5px #ad874b13,0 5px 0 #51432f,0 10px 0 #252321,0 30px 80px #000a}
.myth-mode .modal:before,.myth-mode .modal:after{content:'✦';position:absolute;top:14px;color:#d2ae6b;font-size:15px}.myth-mode .modal:before{left:17px}.myth-mode .modal:after{right:40px}
@keyframes zeusCharge{0%,100%{opacity:.8;filter:drop-shadow(0 0 2px #fff1b955)}50%{opacity:1;filter:drop-shadow(0 0 9px #fff2ae)}}
@media(max-width:599px){.olympus-oracle{font-size:8px;letter-spacing:1.7px;gap:8px;top:-34px}.oracle-line{width:20px}}
@media(prefers-reduced-motion:reduce){.myth-mode .hub.is-spinning:before{animation:none}.olympus-temple{transition:none}}


/* Laravel app hooks — do not alter theme chrome */
.credential-overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:22px;background:#050512bb;backdrop-filter:blur(12px)}
.credential-overlay.open{display:flex}
.credential-modal{width:min(100%,390px);text-align:center;background:radial-gradient(ellipse at 50% 25%,#53268c77,transparent 65%),#101024;border:1px solid #9268d85e;border-radius:27px;padding:36px 28px;box-shadow:0 0 100px #6f35d52a;position:relative;font-family:Manrope,Arial,sans-serif;color:#fff}
.credential-modal h2{font-size:26px;letter-spacing:-1px;margin:8px 0 10px}
.credential-modal p{font-size:12px;color:#aaa2c1;line-height:1.7;margin:0 0 18px}
.credential-modal .close{position:absolute;right:16px;top:12px;border:0;background:none;color:#8c839f;font-size:25px;cursor:pointer}
.credential-modal .field{width:100%;margin:0 0 12px;padding:14px 16px;border-radius:12px;border:1px solid #a980ff40;background:#0c0f28;color:#fff;font:inherit;outline:none;box-sizing:border-box}
.credential-modal .field:focus{border-color:#b89bff}
.credential-modal .actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.credential-modal .spin{margin:0;width:100%;max-width:none}
.credential-modal .ghost{border:1px solid #ffffff22;background:transparent;color:#cfc7e8;border-radius:12px;padding:14px 20px;font-size:13px;font-weight:700;cursor:pointer}
.app-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:30;background:#16132f;border:1px solid #a980ff55;color:#fff;padding:14px 18px;border-radius:14px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;max-width:min(92vw,420px);text-align:center;font-family:Manrope,Arial,sans-serif}
.app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.brand-logo{height:38px;width:auto;max-width:170px;display:block;object-fit:contain}
.brand.has-logo{gap:0}
.brand.has-logo>i,.brand.has-logo>span:not(.brand-logo-wrap){display:none}
#wheelSvg,.wheel-studs,.wheel-halo,.pointer,.pointer-mount{pointer-events:none}
.hub{z-index:12;pointer-events:auto}
.modal>.gift{background:transparent!important;overflow:visible;box-shadow:none}
.modal>.gift img{display:block;width:100%;height:100%;object-fit:contain;background:transparent!important;border:0;box-shadow:none;mix-blend-mode:normal;-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 46%,#000 0%,#000 52%,#000e 68%,#0007 80%,transparent 92%);mask-image:radial-gradient(ellipse 72% 78% at 50% 46%,#000 0%,#000 52%,#000e 68%,#0007 80%,transparent 92%)}
.demo-spin{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #9d86c655;background:#17162b;color:#d3c6eb;border-radius:10px;padding:11px 14px;font:600 12px Manrope,Arial;cursor:pointer;white-space:nowrap}
.demo-spin svg{width:18px;height:18px}
.demo-spin:hover{border-color:#b89bff;color:#fff;filter:brightness(1.08)}
.demo-spin:focus-visible{outline:2px solid #cfb5ff;outline-offset:3px}
.demo-spin:disabled{opacity:.55;cursor:wait}
.myth-mode .demo-spin{background:linear-gradient(145deg,#3a3426,#221c14);border-color:#b3945d88;color:#f0dfbb;box-shadow:inset 0 1px 0 #dfc58c44}
@media(max-width:599px){.demo-spin{padding:9px 8px;font-size:10px;gap:4px}.demo-spin svg{width:15px;height:15px}}

/* Boot loader — pipe filling with liquid */
body.is-booting .screen-shell,body.is-booting footer{visibility:hidden}
.boot-loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 38%,#22165a 0%,#0a0d22 55%,#050712 100%);color:#fff;font-family:Manrope,Arial,sans-serif;transition:opacity .55s ease,visibility .55s ease}
.boot-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot-stage{width:min(92vw,420px);text-align:center}
.boot-pipe{position:relative;height:78px;display:flex;align-items:center;filter:drop-shadow(0 14px 28px #050816aa)}
.boot-flange{flex:none;width:22px;height:62px;border-radius:8px;background:linear-gradient(160deg,#d9d7ef 0%,#8d89b4 38%,#4c486f 72%,#b7b3d8 100%);box-shadow:inset 0 1px 1px #fff8,inset 0 -2px 3px #1a173388,0 4px 0 #2a2744;position:relative;z-index:2}
.boot-flange:before{content:'';position:absolute;inset:10px 7px;border-radius:4px;background:radial-gradient(circle at 40% 30%,#2a3558,#12162b);box-shadow:inset 0 0 0 1px #ffffff22}
.boot-tube{position:relative;flex:1;height:44px;margin:0 -6px;border-radius:22px;background:linear-gradient(180deg,#2a2a45 0%,#121225 45%,#1c1b33 100%);border:2px solid #6d689288;box-shadow:inset 0 8px 14px #0008,inset 0 -3px 6px #ffffff10,0 2px 0 #3d3960;overflow:hidden;z-index:1}
.boot-liquid{position:absolute;inset:3px auto 3px 3px;width:0%;border-radius:18px;background:linear-gradient(180deg,#8ef0ff 0%,#49b7ff 28%,#5b6dff 62%,#7a3dff 100%);box-shadow:inset 0 -6px 10px #1a0f6a55,inset 0 4px 8px #ffffff55,0 0 18px #5ec8ff66;overflow:hidden;transition:width .18s linear}
.boot-liquid:before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 40%,#ffffff33 48%,transparent 56% 100%);animation:bootSheen 1.8s linear infinite}
.boot-wave,.boot-wave-2{position:absolute;left:-20%;right:-20%;height:14px;top:-5px;background:radial-gradient(ellipse at center,#c8f7ffee 0%,#7ad7ff00 68%);opacity:.85;animation:bootWave 1.1s ease-in-out infinite}
.boot-wave-2{top:-2px;opacity:.45;animation-duration:1.7s;animation-direction:reverse}
.boot-liquid i{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:#eaffffcc;box-shadow:0 0 6px #9fe9ff;animation:bootBubble 2.2s ease-in infinite;opacity:0}
.boot-liquid i:nth-child(3){left:12%;animation-delay:.1s}.boot-liquid i:nth-child(4){left:28%;width:4px;height:4px;animation-delay:.45s}
.boot-liquid i:nth-child(5){left:46%;animation-delay:.8s}.boot-liquid i:nth-child(6){left:63%;width:3px;height:3px;animation-delay:1.1s}
.boot-liquid i:nth-child(7){left:78%;animation-delay:1.4s}.boot-liquid i:nth-child(8){left:90%;width:4px;height:4px;animation-delay:1.7s}
.boot-shine{position:absolute;left:10%;right:10%;top:5px;height:10px;border-radius:10px;background:linear-gradient(180deg,#ffffff55,#ffffff00);pointer-events:none}
.boot-drip{position:absolute;right:14px;bottom:2px;width:8px;height:10px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#7ad7ff,#5b6dff);opacity:0;filter:blur(.2px);animation:bootDrip 1.4s ease-in infinite}
.boot-meta{margin-top:28px;display:flex;flex-direction:column;gap:8px;align-items:center}
.boot-meta strong{font-size:13px;letter-spacing:2.4px;font-weight:800;color:#d7cff7}
.boot-meta span{font-size:12px;color:#9ea3c8;font-variant-numeric:tabular-nums;letter-spacing:1px}
@keyframes bootWave{0%,100%{transform:translateX(-6%) scaleY(1)}50%{transform:translateX(6%) scaleY(1.15)}}
@keyframes bootSheen{from{transform:translateX(-40%)}to{transform:translateX(40%)}}
@keyframes bootBubble{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:.9}100%{transform:translateY(-34px) scale(1);opacity:0}}
@keyframes bootDrip{0%,70%{opacity:0;transform:translateY(0)}85%{opacity:.85;transform:translateY(4px)}100%{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){
.boot-liquid,.boot-wave,.boot-wave-2,.boot-liquid i,.boot-drip,.boot-liquid:before{animation:none!important;transition:none!important}
.boot-loader{transition:opacity .2s ease}
}