*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#050507;--panel:#0b0c10;--panel2:#101117;--line:#232631;--white:#f7f8fb;--muted:#8b909f;--blue:#4aa3ff;--blue2:#1677ff}
html,body{width:100%;min-height:100%;background:var(--bg);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:hidden}
button,a{font:inherit}
button{cursor:pointer}
.splash{position:fixed;inset:0;z-index:9999;background:#050507;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .65s,visibility .65s}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-glow{position:absolute;width:250px;height:250px;border-radius:50%;background:rgba(45,130,255,.10);filter:blur(55px)}
.splash-mark{width:72px;height:72px;border:1px solid #3c404c;border-radius:22px;display:grid;place-items:center;font-weight:900;letter-spacing:-3px;font-size:25px;box-shadow:0 0 45px rgba(40,135,255,.15);position:relative}
.splash-title{font-size:30px;font-weight:900;letter-spacing:-1.5px;margin-top:22px;position:relative}
.splash-by{font-size:12px;color:var(--blue);font-weight:800;letter-spacing:4px;margin-top:7px;text-transform:uppercase;position:relative}
.loader{width:90px;height:2px;background:#191b21;margin-top:38px;overflow:hidden;border-radius:5px}
.loader span{display:block;height:100%;width:35%;background:var(--blue);animation:load 1.2s infinite ease-in-out}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(370%)}}

.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.055);position:sticky;top:0;z-index:20;background:rgba(5,5,7,.84);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px rgba(74,163,255,.8)}
.brand-name{font-size:15px;font-weight:900;letter-spacing:-.4px}
.brand-by{font-size:8px;color:var(--blue);font-weight:800;letter-spacing:2.2px;text-transform:uppercase;margin-top:2px}
.menu-btn{width:42px;height:42px;border:1px solid #262934;background:#0b0c10;border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;box-shadow:inset 0 0 18px rgba(255,255,255,.015)}
.menu-btn span{width:4px;height:4px;border-radius:50%;background:#dfe5ef;display:block}

.page{max-width:900px;margin:auto;padding:38px 18px 30px}
.hero{padding:18px 3px 30px}
.eyebrow{font-size:10px;letter-spacing:2.8px;color:var(--blue);font-weight:900}
.hero h1{font-size:clamp(38px,9vw,68px);line-height:.95;letter-spacing:-4px;margin-top:13px;max-width:650px}
.hero h1 span{color:var(--blue)}
.hero p{color:var(--muted);margin-top:14px;font-size:14px}
.wheel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wheel-card{position:relative;min-height:160px;border:1px solid #252832;border-radius:22px;background:linear-gradient(145deg,#101117,#08090c);padding:20px;overflow:hidden;text-align:left;color:var(--white);box-shadow:inset 0 0 35px rgba(255,255,255,.018),0 15px 45px rgba(0,0,0,.18);transition:transform .22s,border-color .22s}
.wheel-card:hover{transform:translateY(-3px);border-color:#3d78ad}
.wheel-card:active{transform:scale(.98)}
.card-no{font-size:10px;color:#555b69;letter-spacing:2px;font-weight:900}
.card-title{font-size:22px;line-height:1.03;font-weight:900;letter-spacing:-1px;margin-top:28px;max-width:230px}
.card-sub{font-size:10px;color:var(--blue);font-weight:800;letter-spacing:1.2px;margin-top:12px;text-transform:uppercase}
.card-arrow-wrap{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:7px;z-index:2}
.card-hint{font-size:9px;color:var(--blue);font-weight:800;letter-spacing:.3px;text-transform:none;white-space:nowrap;opacity:.95}
.card-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:24px;font-weight:900;line-height:1;box-shadow:0 0 18px rgba(35,130,255,.28);transition:transform .18s,box-shadow .18s}
.wheel-card:hover .card-arrow{transform:scale(1.05);box-shadow:0 0 22px rgba(35,130,255,.38)}
.card-glow{position:absolute;width:120px;height:120px;border-radius:50%;right:-50px;top:-50px;background:rgba(35,130,255,.06);filter:blur(15px)}
.wheel-card.full{grid-column:1/-1}
footer{text-align:center;color:#4e5360;font-size:8px;letter-spacing:3px;font-weight:800;padding:35px 0 5px}footer span{color:var(--blue);padding:0 4px}

.wheel-page{min-height:calc(100vh - 74px);max-width:900px;margin:auto;padding:24px 18px 35px;text-align:center}
.hidden{display:none!important}
.back-btn{border:1px solid #272a34;background:#0b0c10;color:#cfd5df;padding:10px 14px;border-radius:12px;font-size:12px;float:left}
.wheel-head{clear:both;padding-top:25px}
.wheel-head h2{font-size:clamp(29px,7vw,46px);letter-spacing:-2px;line-height:1;margin-top:9px}
.wheel-head p{font-size:12px;color:var(--muted);margin-top:8px}
.wheel-stage{height:min(84vw,500px);max-height:500px;min-height:320px;display:grid;place-items:center;position:relative;margin:6px auto 2px}
.pointer{position:absolute;top:7%;z-index:5;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:27px solid var(--blue);filter:drop-shadow(0 0 9px rgba(74,163,255,.7))}
.wheel-outer{width:min(76vw,410px);height:min(76vw,410px);max-width:410px;max-height:410px;border-radius:50%;padding:13px;background:conic-gradient(from 10deg,#050507,#3b404c,#08090b,#ffffff,#111318,#4d535e,#050507,#2c303a,#090a0d);box-shadow:0 0 0 2px #090a0c,0 0 0 5px #262a33,0 0 55px rgba(0,0,0,.9),inset 0 0 22px #000;transform:rotate(0deg)}
.wheel-outer.spinning{animation:none}
.wheel{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;border:2px solid #30343e;background:radial-gradient(circle at 50% 45%,#191b21 0%,#0b0c10 45%,#030305 100%);box-shadow:inset 0 0 55px #000,inset 0 0 8px rgba(255,255,255,.25)}
.wheel:before{content:"";position:absolute;inset:5%;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:inset 0 0 20px rgba(255,255,255,.06);pointer-events:none;z-index:2}
.wheel-label{position:absolute;left:50%;top:50%;width:45%;height:18%;transform-origin:0 50%;display:flex;align-items:center;padding-left:13px;color:var(--blue);font-weight:900;font-size:clamp(8px,2.2vw,12px);line-height:1.05;text-align:left;text-shadow:0 0 10px rgba(74,163,255,.28);letter-spacing:-.25px;z-index:3}
.wheel-label span{display:block;max-width:100px}
.wheel-center{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:#050507;border:1px solid #474c58;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(0,0,0,.8),inset 0 0 22px #000}
.center-ring{width:58px;height:58px;border-radius:50%;border:1px dashed #4a4e59;display:grid;place-items:center;font-size:10px;font-weight:1000;color:#fff;letter-spacing:1.4px}
.spin-panel{display:flex;flex-direction:column;align-items:center;gap:10px}
.spin-btn{width:min(90%,360px);height:57px;border:1px solid #3f90db;border-radius:16px;background:linear-gradient(180deg,#111923,#090d13);color:var(--blue);font-size:16px;font-weight:1000;letter-spacing:3px;box-shadow:0 0 28px rgba(35,125,220,.12),inset 0 0 18px rgba(74,163,255,.06);transition:.2s}
.spin-btn:hover{box-shadow:0 0 35px rgba(35,125,220,.25)}
.spin-btn:active{transform:scale(.98)}
.spin-btn:disabled{opacity:.35;cursor:not-allowed}
.spin-btn span{font-size:18px;margin-left:5px}
.cooldown{font-size:11px;color:#9096a3;min-height:16px;font-variant-numeric:tabular-nums}
.cooldown.ready{color:var(--blue);font-weight:800}
.tiny-note{font-size:9px;color:#454a55;margin-top:8px;letter-spacing:.6px}

.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}
.modal-card{width:min(92vw,450px);border:1px solid #333844;border-radius:28px;background:radial-gradient(circle at 50% 0%,#141a22,#08090c 60%);padding:34px 24px 24px;text-align:center;box-shadow:0 30px 100px #000,inset 0 0 45px rgba(255,255,255,.025);animation:pop .45s cubic-bezier(.2,1.4,.3,1)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.result-kicker{font-size:9px;color:var(--blue);letter-spacing:3px;font-weight:900}
.result-title{font-size:15px;color:#a2a7b3;margin-top:18px}
.result-text{font-size:clamp(32px,9vw,52px);font-weight:1000;line-height:.98;letter-spacing:-2.5px;margin-top:7px;color:#fff;text-shadow:0 0 28px rgba(74,163,255,.28)}
.congrats{font-size:10px;color:var(--blue);font-weight:900;letter-spacing:2.3px;margin-top:19px}
.result-close{margin-top:25px;width:100%;height:50px;border:1px solid #343944;background:#0c0e12;color:#fff;border-radius:14px;font-size:11px;font-weight:900;letter-spacing:1.4px}

.drawer{position:fixed;inset:0;z-index:100;pointer-events:none}
.drawer.open{pointer-events:auto}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);opacity:0;transition:.3s;backdrop-filter:blur(3px)}
.drawer.open .drawer-backdrop{opacity:1}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(88vw,390px);background:#08090c;border-left:1px solid #2a2d35;padding:75px 25px 25px;transform:translateX(105%);transition:transform .36s cubic-bezier(.2,.8,.2,1);box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:1px solid #292c35;background:#0d0e12;color:#fff;border-radius:12px;font-size:25px;line-height:1}
.drawer-kicker{color:var(--blue);font-size:9px;font-weight:900;letter-spacing:3px}
.drawer-panel h2{font-size:37px;line-height:.96;letter-spacing:-2px;margin-top:10px}.drawer-panel h2 span{color:var(--blue)}
.drawer-copy{color:#777d89;font-size:12px;margin-top:13px;line-height:1.5}
.links{display:flex;flex-direction:column;gap:9px;margin-top:28px}
.links a{color:#e7eaf0;text-decoration:none;border:1px solid #252832;background:#0d0f13;border-radius:15px;padding:15px 14px;font-size:12px;font-weight:800;display:flex;justify-content:space-between;transition:.2s}
.links a:hover{border-color:#3d78ad;color:var(--blue)}
.links b{color:var(--blue)}
.drawer-logo{position:absolute;bottom:24px;left:25px;font-size:70px;font-weight:1000;letter-spacing:-7px;color:#151820;text-shadow:0 0 30px rgba(255,255,255,.04)}

@media(max-width:560px){.wheel-grid{grid-template-columns:1fr}.wheel-card.full{grid-column:auto}.wheel-card{min-height:145px}.hero h1{letter-spacing:-2.8px}.wheel-stage{min-height:300px}.wheel-label{font-size:8px;padding-left:9px}.wheel-center{width:68px;height:68px}.center-ring{width:51px;height:51px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}