:root{--bg:#08090c;--panel:#111318;--line:rgba(255,255,255,.11);--text:#f4f1e9;--muted:#92959f;--warm:#d9c6a1;--sol:#9a8cff;--usdt:#59cda8;--ease:cubic-bezier(.12,.76,.14,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,sans-serif;overflow-x:hidden}.scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;background:radial-gradient(circle at 50% -20%,#252936 0,transparent 45%),linear-gradient(180deg,#0b0c10,#07080a 75%)}.grain{position:absolute;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.halo{position:absolute;border-radius:50%;filter:blur(90px);opacity:.13}.halo-a{width:500px;height:500px;left:-250px;top:20%;background:#7d6aff}.halo-b{width:520px;height:520px;right:-300px;top:8%;background:#d6b56f}.chrome-orbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:rotate(-22deg)}.orbit-a{width:920px;height:280px;left:-260px;top:18%}.orbit-b{width:780px;height:220px;right:-220px;top:12%}.shell{width:min(1440px,calc(100% - 48px));margin:auto}.nav-shell{height:82px;margin-top:18px;padding:0 18px 0 24px;border:1px solid var(--line);background:rgba(14,15,19,.62);backdrop-filter:blur(24px);display:flex;align-items:center;justify-content:space-between;border-radius:18px;position:relative;z-index:10}.logo,.footer-logo{color:#fff;text-decoration:none;font:700 15px/1 Space Grotesk;letter-spacing:.14em;display:flex;align-items:center;gap:12px}.logo>span:last-child span,.footer-logo span{color:var(--warm)}.logo-mark{width:29px;height:29px;position:relative;display:block}.logo-mark i{position:absolute;width:18px;height:18px;border:2px solid #eee;transform:rotate(45deg);left:1px;top:5px}.logo-mark i:last-child{left:9px;border-color:var(--warm)}nav{display:flex;gap:34px}nav a{font-size:12px;color:#a8abb2;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;transition:.2s}nav a:hover{color:#fff}.wallet-button{height:48px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:#f0eee8;color:#111217;padding:0 16px 0 19px;display:flex;align-items:center;gap:12px;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.wallet-button svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.7}.hero{padding:104px 0 72px}.hero-copy{text-align:center;max-width:970px;margin:auto}.micro-label{display:inline-flex;align-items:center;gap:10px;color:#aaa9a5;font-size:10px;font-weight:800;letter-spacing:.22em}.micro-label span{width:25px;height:1px;background:var(--warm)}h1{font:600 clamp(55px,8vw,116px)/.88 Space Grotesk;margin:28px 0 28px;letter-spacing:-.065em}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(244,241,233,.58)}.hero-copy>p{max-width:650px;margin:auto;color:#92959d;font-size:16px;line-height:1.8}.hero-meta{margin:35px auto 70px;display:flex;justify-content:center;gap:42px;color:#7d8088;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.hero-meta b{color:var(--warm);margin-right:8px}.engine{max-width:1180px;margin:auto;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:linear-gradient(145deg,rgba(24,26,32,.91),rgba(11,12,15,.95));box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.06);overflow:hidden;position:relative}.engine:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.035) 42%,transparent 63%);pointer-events:none}.engine-topline,.engine-footer{height:70px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.18em;color:#a4a6ad}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8ddabf;box-shadow:0 0 16px #67c6a5;margin-right:10px}.engine-id{color:#5f6269}.engine-body{position:relative;padding:25px 0}.track-row{height:178px;display:grid;grid-template-columns:210px 1fr;align-items:center}.asset-label{height:100%;border-right:1px solid var(--line);padding-left:30px;display:flex;align-items:center;gap:14px}.asset-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}.asset-icon img{width:27px;height:27px}.asset-label small{display:block;color:#5f6269;font-size:8px;letter-spacing:.22em;margin-bottom:8px}.asset-label b{font:600 14px Space Grotesk;letter-spacing:.12em}.reel-window{height:132px;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.reel{height:100%;display:flex;will-change:transform;transform:translate3d(0,0,0)}.reel-cell{flex:0 0 190px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgba(255,255,255,.055);opacity:.32;transition:opacity .25s,filter .25s}.reel-cell img{width:22px;height:22px;margin-bottom:10px;filter:grayscale(.2)}.reel-cell .value{font:600 31px Space Grotesk;letter-spacing:-.04em}.reel-cell .unit{font-size:8px;color:#666a73;letter-spacing:.18em;margin-top:7px}.center-line{position:absolute;top:25px;bottom:25px;left:calc(210px + (100% - 210px)/2);width:1px;background:linear-gradient(transparent,var(--warm) 18%,var(--warm) 82%,transparent);z-index:3;box-shadow:0 0 22px rgba(217,198,161,.35)}.center-line i,.center-line:before,.center-line:after{content:"";position:absolute;left:50%;transform:translateX(-50%)}.center-line i{top:-4px;width:8px;height:8px;border:1px solid var(--warm);transform:translateX(-50%) rotate(45deg);background:#17181c}.center-line:before{top:0;width:60px;height:40px;background:radial-gradient(circle at 50% 0,rgba(217,198,161,.19),transparent 70%)}.center-line:after{bottom:0;width:60px;height:40px;background:radial-gradient(circle at 50% 100%,rgba(217,198,161,.18),transparent 70%)}.track-divider{height:22px;display:flex;align-items:center;gap:12px;padding-left:210px;color:#585b63;font-size:7px;letter-spacing:.22em}.track-divider span{height:1px;background:rgba(255,255,255,.06);flex:1}.track-divider span:last-child{margin-right:25px}.engine-footer{height:84px;border-top:1px solid var(--line);border-bottom:0}.security{font-size:9px;color:#686b73}.security span{color:var(--warm);margin-right:8px}.spin-button,.claim-button{border:0;cursor:pointer;background:#e9e5dc;color:#101115;border-radius:14px;height:53px;padding:0 7px 0 22px;display:flex;align-items:center;gap:20px;font-weight:800;font-size:10px;letter-spacing:.13em;position:relative;overflow:hidden}.button-icon,.claim-icon{width:39px;height:39px;border-radius:10px;background:linear-gradient(145deg,#1d1f25,#111216);color:#eee6d7;display:grid;place-items:center;flex:0 0 39px;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.24)}
.action-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;transition:transform .24s var(--ease)}
.spin-button:hover .action-arrow,.claim-button:hover .action-arrow{transform:translate(1px,-1px)}.spin-button:before,.claim-button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.8),transparent 70%);transform:translateX(-130%)}.spin-button:hover:before,.claim-button:hover:before{transform:translateX(130%);transition:.8s}.loader{display:none;width:16px;height:16px;border:2px solid #888;border-top-color:#111;border-radius:50%;animation:rotate .8s linear infinite}.spin-button.loading .button-icon{display:none}.spin-button.loading .loader{display:block;margin:0 13px}.engine.spinning .reel-cell{opacity:.65;filter:blur(.4px)}.engine.won .reel-cell.jackpot{opacity:1;filter:none}.engine.won .center-line{box-shadow:0 0 38px rgba(217,198,161,.7)}@keyframes rotate{to{transform:rotate(360deg)}}.ticker{height:72px;border-block:1px solid var(--line);display:flex;align-items:center;margin-top:18px;overflow:hidden}.ticker-label{flex:0 0 150px;font-size:9px;letter-spacing:.18em;color:#8d9098;font-weight:800}.ticker-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#70c8a8;margin-right:9px}.ticker-viewport{overflow:hidden;flex:1}.ticker-track{display:flex;width:max-content;will-change:transform;backface-visibility:hidden;animation:ticker 110s linear infinite;animation-delay:-43s;transform:translate3d(0,0,0)}.ticker-set{display:flex;flex:none;padding-right:64px}.ticker-track span{white-space:nowrap;margin-right:64px;font-size:10px;color:#60636b;letter-spacing:.06em}.ticker-track b{color:#b6b7ba;margin-left:10px}@keyframes ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}.process{padding:150px 0 140px}.section-title{text-align:center}.section-title span{color:var(--warm);font-size:9px;font-weight:800;letter-spacing:.22em}.section-title h2{font:600 clamp(36px,5vw,64px) Space Grotesk;letter-spacing:-.05em;margin:18px 0 65px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:22px;overflow:hidden}.steps article{min-height:230px;padding:35px;border-right:1px solid var(--line);background:rgba(15,16,20,.55)}.steps article:last-child{border:0}.steps article>span{font:600 11px Space Grotesk;color:var(--warm)}.steps h3{font:600 25px Space Grotesk;margin:65px 0 12px}.steps p{color:#767982;font-size:13px;margin:0}footer{border-top:1px solid var(--line);min-height:110px;padding:0 max(24px,calc((100% - 1392px)/2));display:flex;align-items:center;gap:25px}footer p{color:#63666d;font-size:11px;flex:1}footer>span{font-size:10px;color:#60636a}.toast{position:fixed;right:25px;bottom:25px;z-index:30;display:flex;align-items:center;gap:13px;padding:16px 19px;border:1px solid var(--line);border-radius:15px;background:rgba(18,19,23,.88);backdrop-filter:blur(20px);transform:translateY(120px);opacity:0;transition:.45s}.toast.show{transform:none;opacity:1}.toast>span{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#dae7df;color:#173326}.toast b,.toast small{display:block}.toast b{font-size:12px}.toast small{margin-top:4px;color:#7d8087;font-size:10px}.modal-backdrop{position:fixed;inset:0;z-index:40;background:rgba(2,3,5,.76);backdrop-filter:blur(15px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.35s}.modal-backdrop.open{opacity:1;visibility:visible}.reward-modal{width:min(620px,100%);border:1px solid rgba(255,255,255,.16);border-radius:28px;background:linear-gradient(145deg,#181a20,#0d0e12);padding:54px;text-align:center;box-shadow:0 60px 160px #000;position:relative;transform:scale(.94) translateY(12px);transition:.4s var(--ease)}.modal-backdrop.open .reward-modal{transform:none}.modal-close{position:absolute;right:18px;top:16px;border:0;background:transparent;color:#777;font-size:28px;cursor:pointer}.modal-orbit{width:88px;height:88px;border:1px solid rgba(217,198,161,.35);border-radius:50%;margin:0 auto 30px;position:relative;display:grid;place-items:center}.modal-orbit span{position:absolute;inset:9px;border:1px solid rgba(255,255,255,.08);border-radius:50%}.modal-orbit span:nth-child(2){inset:-8px;border-style:dashed;animation:rotate 12s linear infinite}.modal-orbit i{font-style:normal;color:var(--warm);font-size:23px}.modal-kicker{font-size:8px;color:var(--warm);letter-spacing:.22em}.reward-modal h2{font:600 38px/1.1 Space Grotesk;letter-spacing:-.04em;margin:15px 0 30px}.reward-pair{display:grid;grid-template-columns:1fr 25px 1fr;align-items:center;gap:10px}.reward-pair>div{border:1px solid var(--line);border-radius:17px;padding:20px;display:flex;align-items:center;gap:13px;text-align:left}.reward-pair img{width:34px;height:34px}.reward-pair small,.reward-pair b{display:block}.reward-pair small{font-size:7px;color:#676a72;letter-spacing:.17em;margin-bottom:6px}.reward-pair b{font:600 20px Space Grotesk}.reward-pair>i{font-style:normal;color:#5e6067}.claim-button{width:100%;justify-content:space-between;margin-top:26px}.reward-modal>p{color:#60636b;font-size:9px;margin:17px 0 0}
@media(max-width:850px){.shell{width:min(100% - 22px,1440px)}.nav-shell{height:67px;margin-top:10px;padding:0 10px 0 15px}.nav-shell nav{display:none}.logo{font-size:11px}.wallet-button{width:45px;height:45px;padding:0;justify-content:center}.wallet-button span{display:none}.hero{padding:72px 0 45px}h1{font-size:clamp(48px,14vw,76px)}.hero-copy>p{font-size:13px;padding:0 10px}.hero-meta{gap:13px;flex-wrap:wrap;margin:28px auto 48px}.hero-meta span{font-size:8px}.engine{border-radius:20px}.engine-topline{height:57px;padding:0 15px}.track-row{height:143px;grid-template-columns:83px 1fr}.asset-label{padding-left:10px;gap:0;justify-content:center}.asset-label>div{display:none}.asset-icon{width:39px;height:39px}.asset-icon img{width:22px}.center-line{left:calc(83px + (100% - 83px)/2)}.track-divider{padding-left:83px}.reel-window{height:110px}.reel-cell{flex-basis:125px}.reel-cell .value{font-size:23px}.engine-footer{height:112px;padding:14px;flex-direction:column;gap:10px}.security{order:2}.spin-button{width:100%;justify-content:space-between}.ticker-label{flex-basis:105px}.process{padding:100px 0}.steps{grid-template-columns:1fr}.steps article{min-height:170px;border-right:0;border-bottom:1px solid var(--line)}.steps h3{margin-top:35px}.reward-modal{padding:43px 18px 28px}.reward-modal h2{font-size:30px}.reward-pair{grid-template-columns:1fr}.reward-pair>i{height:0}.reward-pair>div{justify-content:center}.toast{left:12px;right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.ticker-track{animation:none}}


/* V2 hero-to-engine composition */
.hero{
  min-height:calc(100svh - 100px);
  padding:clamp(72px,10vh,118px) 0 clamp(54px,8vh,90px);
  display:grid;
  place-items:center;
}
.hero-copy{width:100%}
.hero-copy>p{max-width:620px}
.hero-cta{
  margin:34px auto 0;
  min-width:230px;
  height:58px;
  padding:0 13px 0 23px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:15px;
  background:linear-gradient(135deg,#f5f1e8,#d9c9aa);
  color:#101116;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font:800 10px/1 Manrope,sans-serif;
  letter-spacing:.15em;
  cursor:pointer;
  box-shadow:0 16px 45px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.85);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),filter .28s;
}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(0,0,0,.42),0 0 30px rgba(217,198,161,.12)}
.hero-cta i{
  width:34px;height:34px;border-radius:10px;background:#111217;color:#f1eadc;
  display:grid;place-items:center;font-style:normal;font-size:15px;
}
.hero-meta{margin:30px auto 0}
.engine-section{
  scroll-margin-top:28px;
  padding:32px 0 72px;
  min-height:calc(100svh - 20px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.engine-intro{
  max-width:1180px;
  width:100%;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#73767f;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.engine-intro span{color:var(--warm);font-weight:800}
.engine-intro p{margin:0;text-transform:none;letter-spacing:0;font-size:12px;color:#6f727a}
.engine{width:100%}
@media(max-width:850px){
  .hero{min-height:calc(100svh - 77px);padding:56px 0 44px}
  .hero-cta{margin-top:28px;width:min(100%,310px)}
  .hero-meta{margin-top:24px}
  .engine-section{min-height:auto;padding:68px 0 45px;scroll-margin-top:12px}
  .engine-intro{padding:0 4px;margin-bottom:14px}
  .engine-intro p{display:none}
}
@media(max-height:760px) and (min-width:851px){
  .hero{min-height:auto;padding:72px 0 80px}
}

/* PERFORMANCE FIX — transform-only spin, no extra spinning background */
.engine.spinning::after,.engine.spinning .reel-window::before,.engine.spinning .reel-window::after{content:none!important;display:none!important}
.engine.spinning .reel-cell{filter:none!important;text-shadow:none!important;opacity:.58;transition:none}
.reel{will-change:transform;backface-visibility:hidden;transform-style:preserve-3d}

/* STAGE 3 — final UX polish */
button{font-family:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid rgba(217,198,161,.9);outline-offset:4px}
.wallet-button,.hero-cta,.spin-button,.claim-button{transition:transform .24s var(--ease),box-shadow .24s var(--ease),background-color .24s ease,opacity .2s ease}
.wallet-button:hover,.spin-button:hover,.claim-button:hover{transform:translateY(-2px)}
.wallet-button:active,.hero-cta:active,.spin-button:active,.claim-button:active{transform:translateY(0) scale(.985)}
.spin-button:disabled{cursor:default}

/* Keep the reel on its own compositor layer and isolate layout/paint work. */
.engine{contain:layout paint;isolation:isolate}
.engine-body,.track-row,.reel-window{contain:layout paint}
.reel-window{transform:translateZ(0)}
.reel{backface-visibility:hidden;transform-style:flat;will-change:transform}
.reel-cell{transition:none;backface-visibility:hidden}
.reel-cell img{transform:translateZ(0)}

/* No temporary background, overlay, glow or blur while spinning. */
.engine.spinning::before,
.engine.spinning::after,
.engine.spinning .engine-body::before,
.engine.spinning .engine-body::after,
.engine.spinning .reel-window::before,
.engine.spinning .reel-window::after{content:none!important;display:none!important}
.engine.spinning{box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.06)}
.engine.spinning .reel-cell{opacity:.48!important;filter:none!important;text-shadow:none!important}
.engine.spinning .center-line{box-shadow:0 0 22px rgba(217,198,161,.35)}
.engine.spinning .ticker-track{animation-play-state:running}

/* The winning state is restrained: only the confirmed cells become clear. */
.engine.won .reel-cell{opacity:.24}
.engine.won .reel-cell.jackpot{opacity:1;filter:none;animation:rewardSettle .5s var(--ease) both}
.engine.won .center-line{box-shadow:0 0 30px rgba(217,198,161,.55)}
@keyframes rewardSettle{0%{transform:scale(.965)}100%{transform:scale(1)}}

/* Remove the expensive moving shine from primary actions; retain a clean hover. */
.spin-button:before,.claim-button:before{display:none}
.spin-button:hover,.claim-button:hover{box-shadow:0 12px 30px rgba(0,0,0,.24)}
.hero-cta:hover{filter:none}

/* Pause off-screen work and keep lower sections cheap to render. */
.process,footer{content-visibility:auto;contain-intrinsic-size:700px}

/* Cleaner modal motion without heavy blur animation. */
.modal-backdrop{backdrop-filter:none;background:rgba(2,3,5,.84)}
.reward-modal{transition:transform .36s var(--ease),opacity .3s ease;opacity:0}
.modal-backdrop.open .reward-modal{opacity:1}
.toast{backdrop-filter:none;background:rgba(18,19,23,.96)}

@media(max-width:850px){
  .scene .grain{display:none}
  .halo{filter:blur(70px);opacity:.09}
  .reel-window{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .engine.spinning .reel-cell{opacity:.52!important}
}

/* FIX: do not paint-contain the horizontally translated reels; it clips their cells. */
.reel,.reel-cell{contain:none!important}