/* DDF Win · How it works. Slide sizes are written in deck pixels (1920 × 1080) through --u. */
:root{
  --u:min(calc(100vw / 1920),calc(100vh / 1080));
  --pad-l:max(104px,calc(128 * var(--u)));
  --pad-r:max(104px,calc(128 * var(--u)));
  --pad-t:max(78px,calc(118 * var(--u)));
  --pad-b:max(80px,calc(112 * var(--u)));
  --gap:max(18px,calc(40 * var(--u)));
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gold:#F5C84C;--bronze:#8A5E10;
  --chrome-fg:#FBF6EE;--chrome-bg:rgba(20,18,16,.42);--chrome-line:rgba(245,200,76,.35);--chrome-dot:rgba(251,246,238,.35);
  color-scheme:dark;
}
@media (max-aspect-ratio:5/4){:root{--u:calc(100vw / 1150)}}
@media (max-width:700px){
  :root{--u:calc(100vw / 1000);--pad-l:max(18px,env(safe-area-inset-left,0px));--pad-r:max(62px,calc(env(safe-area-inset-right,0px) + 54px));--pad-t:76px;--pad-b:40px;--gap:20px}
}
body[data-tone="light"]{--chrome-fg:#17161A;--chrome-bg:rgba(255,255,255,.6);--chrome-line:rgba(138,94,16,.3);--chrome-dot:rgba(23,22,26,.25)}
body[data-tone="gold"]{--chrome-fg:#1C1A17;--chrome-bg:rgba(255,248,225,.45);--chrome-line:rgba(42,31,8,.3);--chrome-dot:rgba(28,26,23,.3)}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#131210}
body{font-family:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#FBF6EE;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,table,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
b{font-weight:800}

/* ---------- tones and backgrounds ---------- */
.dark{--fg:#FBF6EE;--sub:#D9CFBF;--muted:#BFB3A0;--acc:#F5C84C;--rule:#6B5A3A;color:var(--fg)}
.light{--fg:#17161A;--sub:#4A453D;--muted:#6B6457;--acc:#8A5E10;--rule:#E6D3AE;color:var(--fg)}
.goldbg{--fg:#1C1A17;--sub:#2A1F08;--muted:#2A1F08;--acc:#2A1F08;color:var(--fg)}
.bg-cover{background:radial-gradient(ellipse at 72% 40%,#3D3223 0%,#1D1B18 52%,#121110 100%)}
.bg-dark{background:radial-gradient(ellipse at 78% 35%,#3A3022 0%,#1D1B18 55%,#131210 100%)}
.bg-dark-c{background:radial-gradient(ellipse at 50% 20%,#3A3022 0%,#1D1B18 55%,#131210 100%)}
.bg-dark-w{background:radial-gradient(ellipse at 80% 30%,#4A3A22 0%,#1D1B18 55%,#121110 100%)}
.bg-fair{background:radial-gradient(ellipse at 50% 30%,#332B1F 0%,#1A1815 55%,#11100E 100%)}
.bg-casino{background:radial-gradient(ellipse at 50% 0%,#3E2119 0%,#1B1512 46%,#0E0C0B 100%)}
.bg-gold{background:linear-gradient(135deg,#F6D77A 0%,#E2AC34 50%,#C08A1C 100%)}
.bg-light{background:linear-gradient(180deg,#FEFAF5 0%,#F6EADB 100%)}
.bg-refer{background:linear-gradient(135deg,#FDF5E6 0%,#F6E2BC 100%)}
.bg-close{background:#FEFAF5}

/* ---------- deck and slides ---------- */
#deck{position:fixed;inset:0;perspective:1800px;overflow:hidden;touch-action:pan-y}
.slide{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;transform:translate3d(9%,0,0) rotateY(-9deg) scale(.95);transform-origin:50% 50%;transition:opacity .55s ease,transform .9s var(--ease),visibility 0s linear .9s;backface-visibility:hidden}
.slide.before{transform:translate3d(-9%,0,0) rotateY(9deg) scale(.95)}
.slide.active{visibility:visible;opacity:1;transform:none;transition:opacity .75s ease .05s,transform 1s var(--ease),visibility 0s}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.in{position:relative;z-index:2;height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);scrollbar-width:none;overscroll-behavior:contain}
.in::-webkit-scrollbar{display:none}
.ct{margin-block:auto;width:100%;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.note{display:none}

/* ---------- reveal choreography (uses the individual transform properties so transform stays free for tilt) ---------- */
.r{opacity:0;translate:0 32px;filter:blur(8px);transition:opacity .7s var(--ease),translate .9s var(--ease),scale .9s var(--ease),rotate .9s var(--ease),filter .7s ease}
.r.pop{translate:0 0;scale:.6}
.r.flip{translate:0 30px;rotate:x 70deg}
.r.side{translate:-60px 0}
.r.drop{translate:0 -60px}
.slide.active .r{opacity:1;translate:0 0;scale:1;rotate:x 0deg;filter:blur(0);transition-delay:calc(var(--d,0) * 85ms + 220ms)}
.slide.active .r.pop{transition:opacity .5s ease,scale .8s var(--spring),filter .5s ease;transition-delay:calc(var(--d,0) * 85ms + 220ms)}

/* ---------- type ---------- */
.eyebrow{font-size:max(11px,calc(24 * var(--u)));font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--acc)}
.h{font-size:max(27px,calc(72 * var(--u)));font-weight:800;font-style:italic;line-height:1.05;letter-spacing:-.014em;text-wrap:balance;color:var(--fg)}
.h1{font-size:max(32px,calc(84 * var(--u)));font-weight:800;font-style:italic;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:max(15px,calc(28 * var(--u)));line-height:1.4;color:var(--sub);max-width:44em;text-wrap:pretty}
.body{font-size:max(14px,calc(26 * var(--u)));line-height:1.4;color:var(--sub)}
.cap{font-size:max(13px,calc(24 * var(--u)));line-height:1.35;color:var(--sub)}
.foot{font-size:max(12px,calc(22 * var(--u)));font-weight:600;line-height:1.45;color:var(--muted);max-width:80em;text-wrap:pretty}
.head{display:flex;flex-direction:column;gap:max(6px,calc(12 * var(--u)))}
.num{font-variant-numeric:tabular-nums}

/* ---------- 3D gold numbers ---------- */
.g3d{position:relative;display:inline-block;font-weight:900;font-style:italic;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.g3d>span{display:block;padding:0 .12em 0 .02em}
.g3d>.b{color:#5E3D07;text-shadow:.012em .012em 0 #7A520C,.024em .024em 0 #6E4A0B,.036em .036em 0 #63420A,.046em .048em 0 #583B09,.056em .064em 0 #422C07,.1em .16em .26em rgba(0,0,0,.55),0 0 .5em rgba(245,200,76,.35)}
.g3d>.f{position:absolute;left:0;top:0;right:0;background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 62%) 220% 0/260% 100% no-repeat,linear-gradient(180deg,#FFF4C8 0%,#F8D873 28%,#E6B23C 55%,#B98318 80%,#8F6110 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 6s ease-in-out infinite;animation-delay:var(--sh,0s)}
.light .g3d:not(.dk)>.b{color:#6B4508;text-shadow:.012em .012em 0 #7A520C,.024em .024em 0 #6B4508,.036em .036em 0 #5E3D07,.046em .056em 0 #4D3408,.056em .066em 0 #422C07,.08em .14em .22em rgba(122,82,12,.28)}
.light .g3d:not(.dk)>.f{background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,250,230,.95) 50%,rgba(255,255,255,0) 62%) 220% 0/260% 100% no-repeat,linear-gradient(180deg,#E9BC4E 0%,#C9921F 40%,#9A6A12 75%,#7A520C 100%);-webkit-background-clip:text;background-clip:text}
@keyframes shine{0%,60%{background-position:220% 0,0 0}90%,100%{background-position:-120% 0,0 0}}
.n-xl{font-size:min(max(48px,calc(168 * var(--u))),13vw)}
.n-l{font-size:min(max(44px,calc(132 * var(--u))),15vw)}
.n-m{font-size:max(34px,calc(96 * var(--u)))}
.n-s{font-size:max(30px,calc(76 * var(--u)))}
.n-xs{font-size:max(26px,calc(60 * var(--u)))}

/* ---------- shared cards ---------- */
.card{position:relative;border-radius:max(18px,calc(28 * var(--u)));padding:max(20px,calc(40 * var(--u)));display:flex;flex-direction:column;gap:max(8px,calc(14 * var(--u)));min-width:0;transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .4s ease}
.noir{--fg:#FBF6EE;--sub:#D9CFBF;--muted:#BFB3A0;--acc:#F5C84C;--rule:#6B5A3A;color:var(--fg);background:linear-gradient(135deg,#3A3936 0%,#211F1C 62%,#2D2B27 100%);border:2px solid #C99A3F;box-shadow:0 24px 50px rgba(60,40,10,.35),0 0 40px rgba(245,200,76,.2)}
.pearl{background:linear-gradient(135deg,#FFFFFF 0%,#ECECEA 58%,#F6F4F0 100%);border:1px solid #E6DCCB;box-shadow:0 18px 40px rgba(135,100,45,.14)}
.champ{background:linear-gradient(135deg,#FDF3E0 0%,#F8E6C4 56%,#FDF0D9 100%);border:1px solid #E2BA6E;box-shadow:0 18px 40px rgba(135,100,45,.16)}
.glass{background:rgba(255,255,255,.05);border:2px solid rgba(201,154,63,.85);backdrop-filter:blur(6px)}
.white{background:#FFFFFF;border:1px solid #E6DCCB;box-shadow:0 14px 30px rgba(135,100,45,.1)}
.card hr,.rule{border:0;border-top:2px solid var(--rule);width:100%;margin:max(4px,calc(6 * var(--u))) 0}
.pill{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:max(12px,calc(24 * var(--u)));font-weight:800;padding:max(4px,calc(6 * var(--u))) max(14px,calc(22 * var(--u)));border-radius:999px;background:linear-gradient(180deg,#F8D873 0%,#E6B23C 100%);color:#2A1C05;box-shadow:0 6px 16px rgba(201,146,31,.25)}
.glare{overflow:hidden}
.glare::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .4s}
.glare:hover::after{opacity:1}
.sweep{overflow:hidden}
.sweep::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:skewX(-18deg);pointer-events:none}
.slide.active .sweep::before{animation:sweep 1.4s ease calc(var(--d,0) * 85ms + 900ms) 1 both}
@keyframes sweep{to{left:130%}}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:max(18px,calc(36 * var(--u))) max(18px,calc(48 * var(--u)))}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{display:flex;flex-direction:column;gap:max(2px,calc(4 * var(--u)));min-width:0}
.stat .cap{max-width:16em}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:max(24px,calc(64 * var(--u)));align-items:center}
.scenebox{position:relative;width:100%;aspect-ratio:792/680;max-height:calc(100vh - 200px);margin-inline:auto}
.scenebox.odds{aspect-ratio:692/640}
.scenebox.net{aspect-ratio:712/720}
@media (max-width:1000px),(max-aspect-ratio:5/4){
  .split{grid-template-columns:minmax(0,1fr)}
  .scenebox{max-width:560px;max-height:none}
  .stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- chrome ---------- */
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:3;background:radial-gradient(circle,rgba(245,200,76,.13) 0%,rgba(245,200,76,0) 62%);opacity:0;transition:opacity .5s;will-change:transform}
body[data-tone="dark"] #glow.on{opacity:1}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:41;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFE7A3,#F5C84C 50%,#C08A1C);box-shadow:0 0 14px rgba(245,200,76,.9);transition:width .7s var(--ease)}
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(14px,calc(env(safe-area-inset-top,0px) + 8px)) max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px));pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;height:44px;padding:4px 16px 4px 6px;border-radius:999px;background:rgba(254,250,245,.94);box-shadow:0 8px 24px rgba(0,0,0,.2),0 0 0 1px rgba(201,154,63,.35);text-decoration:none}
.brand img{height:36px;width:auto}
.brand span{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8A5E10;white-space:nowrap}
.sec{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-fg);opacity:.75;transition:opacity .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;align-items:center;gap:8px}
.chip{height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--chrome-line);background:var(--chrome-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--chrome-fg);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s,border-color .3s}
.chip svg{width:16px;height:16px}
.chip[aria-pressed="true"]{background:#F5C84C;color:#2A1C05;border-color:#F5C84C}
#count{font-variant-numeric:tabular-nums;letter-spacing:.04em}
#musicBtn .mbars{display:none}#musicBtn[aria-pressed="true"] .mbars{display:inline-flex}#musicBtn[aria-pressed="true"] .mnote{display:none}
.mbars{display:inline-flex;align-items:flex-end;gap:2px;width:16px;height:14px}
.mbars i{flex:1;height:3px;border-radius:2px;background:currentColor;transition:height .3s}
#musicBtn[aria-pressed="true"] .mbars i{animation:eqb .9s ease-in-out infinite alternate}
#musicBtn[aria-pressed="true"] .mbars i:nth-child(2){animation-delay:-.3s;animation-duration:.7s}
#musicBtn[aria-pressed="true"] .mbars i:nth-child(3){animation-delay:-.6s;animation-duration:1.1s}
#musicBtn[aria-pressed="true"] .mbars i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}
@keyframes eqb{from{height:3px}to{height:14px}}
#musicBtn.invite[aria-pressed="false"]{animation:invite 2.4s ease-in-out infinite}
@keyframes invite{0%,100%{box-shadow:0 0 0 0 rgba(245,200,76,0)}50%{box-shadow:0 0 0 5px rgba(245,200,76,.35),0 0 18px rgba(245,200,76,.45)}}
.nav{position:fixed;top:50%;z-index:40;display:grid;place-items:center;border-radius:999px;translate:0 -50%;transition:scale .3s var(--spring),opacity .3s,background .3s,box-shadow .3s}
.next{right:max(22px,calc(env(safe-area-inset-right,0px) + 14px));width:74px;height:74px;background:radial-gradient(circle at 35% 28%,#FFF6D2 0%,#F8D873 30%,#E6B23C 62%,#B98318 100%);color:#2A1C05;box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,246,210,.7),inset 0 -6px 12px rgba(122,82,12,.35),0 0 44px rgba(245,200,76,.5)}
.next::before,.next::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:2px solid rgba(245,200,76,.75);animation:ring 2.4s ease-out infinite;pointer-events:none}
.next::after{animation-delay:1.2s}
@keyframes ring{0%{scale:.92;opacity:.95}100%{scale:1.5;opacity:0}}
.next svg{width:30px;height:30px;transition:translate .3s var(--ease)}
.next:hover{scale:1.08}
.next:hover svg{translate:4px 0}
.next:active{scale:.94}
.next .lbl{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-fg);white-space:nowrap;opacity:.85}
.next.restart svg{rotate:-90deg}
.prev{left:max(22px,calc(env(safe-area-inset-left,0px) + 14px));width:52px;height:52px;background:var(--chrome-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--chrome-line);color:var(--chrome-fg)}
.prev svg{width:22px;height:22px}
.prev:hover{scale:1.08}
.prev[aria-disabled="true"]{opacity:0;pointer-events:none}
.dots{position:fixed;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 10px));translate:-50% 0;z-index:40;display:flex;gap:6px;align-items:center;padding:9px 12px;border-radius:999px;background:var(--chrome-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--chrome-line)}
.dots button{width:8px;height:8px;border-radius:999px;background:var(--chrome-dot);transition:width .45s var(--ease),background .3s}
.dots button:hover{background:#F5C84C}
.dots button.on{width:26px;background:#F5C84C;box-shadow:0 0 10px rgba(245,200,76,.7)}
.dots .sep{width:1px;height:12px;margin:0 4px;background:var(--chrome-line)}
.notes{position:fixed;left:50%;bottom:70px;translate:-50% 0;width:min(780px,calc(100vw - 32px));max-height:40vh;overflow:auto;z-index:42;padding:18px 22px;border-radius:18px;background:rgba(20,18,16,.94);color:#FBF6EE;font-size:15px;line-height:1.6;border:1px solid rgba(245,200,76,.45);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.notes b{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#F5C84C}
.hint{position:fixed;right:max(110px,calc(env(safe-area-inset-right,0px) + 106px));top:50%;translate:0 -50%;z-index:39;font-size:13px;font-weight:700;color:var(--chrome-fg);padding:8px 14px;border-radius:999px;background:var(--chrome-bg);border:1px solid var(--chrome-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .6s,translate .6s var(--ease);animation:nudge 1.6s ease-in-out infinite}
.hint.gone{opacity:0;pointer-events:none}
@keyframes nudge{50%{translate:-8px -50%}}
.skip{position:fixed;left:-999px;top:8px;z-index:50;background:#F5C84C;color:#2A1C05;padding:8px 14px;border-radius:8px;font-weight:800}
.skip:focus{left:8px}
:focus-visible{outline:3px solid #F5C84C;outline-offset:3px}
@media (max-width:900px){.sec{display:none}}
@media (max-width:700px){
  .brand span,.chip .t,#fsBtn,.dots,.prev,.hint{display:none}
  .brand{height:38px;padding:3px 12px 3px 4px}
  .brand img{height:31px}
  .next{right:max(8px,env(safe-area-inset-right,0px));width:48px;height:48px}
  .next svg{width:22px;height:22px}
  .next .lbl{display:none}
  .notes{bottom:16px}
}

/* ---------- 1 cover ---------- */
.cover-ct{max-width:min(1060px,60%);gap:max(12px,calc(22 * var(--u)))}
.cover-logo{position:relative;width:max(150px,calc(300 * var(--u)))}
.cover-logo::before{content:"";position:absolute;inset:-18% -14%;background:radial-gradient(closest-side,rgba(255,248,230,.16),rgba(255,248,230,0));pointer-events:none}
.cover-logo img{position:relative;filter:drop-shadow(0 0 1px rgba(255,250,235,.85)) drop-shadow(0 0 10px rgba(255,248,230,.35)) drop-shadow(0 0 26px rgba(245,200,76,.22));animation:float 6s ease-in-out infinite}
@keyframes float{50%{translate:0 -6px}}
.cover-prize{display:flex;flex-direction:column;gap:2px}
.launch{display:inline-flex;align-items:center;gap:12px;font-size:max(14px,calc(28 * var(--u)));font-weight:700;color:#F5C84C}
.launch i{width:10px;height:10px;border-radius:50%;background:#F5C84C;box-shadow:0 0 0 0 rgba(245,200,76,.7);animation:beacon 1.8s ease-out infinite}
@keyframes beacon{to{box-shadow:0 0 0 16px rgba(245,200,76,0)}}
@media (max-aspect-ratio:1/1){.cover-ct{max-width:100%}}

/* ---------- 2 forty ---------- */
.forty-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:max(20px,calc(64 * var(--u)));align-items:center}
.forty-num{position:relative;display:grid;place-items:center}
.rays{position:absolute;left:27%;top:50%;translate:-50% -50%;width:min(110vh,64vw);aspect-ratio:1;z-index:0;pointer-events:none;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,250,225,.28) 0deg 5deg,rgba(255,250,225,0) 5deg 15deg);-webkit-mask:radial-gradient(closest-side,#000 18%,transparent 72%);mask:radial-gradient(closest-side,#000 18%,transparent 72%);animation:spin 50s linear infinite}
@keyframes spin{to{rotate:360deg}}
.big40{position:relative;font-size:min(max(150px,calc(400 * var(--u))),42vw);font-weight:900;font-style:italic;line-height:1;letter-spacing:-.03em;color:#1C1A17;text-shadow:3px 3px 0 #8A5E10,6px 6px 0 #7A520C,9px 9px 0 #6B4508,12px 12px 0 #5E3D07,.05em .07em .1em rgba(60,40,5,.45);font-variant-numeric:tabular-nums}
.forty-row{display:flex;flex-wrap:wrap;gap:max(18px,calc(56 * var(--u)))}
.forty-row .k{font-size:max(40px,calc(96 * var(--u)));font-weight:900;font-style:italic;line-height:1;font-variant-numeric:tabular-nums}
.forty-row .v{font-size:max(14px,calc(28 * var(--u)));font-weight:600}
.goldbg .lead{color:#1C1A17}
@media (max-width:760px){.forty-grid{grid-template-columns:minmax(0,1fr)}.rays{left:50%;top:32%;width:120vw}}

/* ---------- 3 casino ---------- */
.casino-head{text-align:center;align-items:center}
.casino-head .h{font-size:max(32px,calc(88 * var(--u)));text-shadow:0 0 30px rgba(245,200,76,.35)}
.machines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(16px,calc(32 * var(--u)))}
.machine{--c:#C0392B;padding:max(20px,calc(36 * var(--u)));gap:max(10px,calc(14 * var(--u)));border:2px solid var(--c);background:linear-gradient(180deg,var(--top) 0%,var(--bot) 100%);box-shadow:inset 0 0 40px color-mix(in srgb,var(--c) 30%,transparent),0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent),0 24px 60px rgba(0,0,0,.6)}
.machine.ruby{--c:#C0392B;--top:#2C2320;--bot:#15110F}
.machine.emerald{--c:#1E8A5A;--top:#1F2A24;--bot:#0F1411}
.machine.jackpot{--c:#D9A53A;--top:#2E2717;--bot:#15120B}
.machine .tag{align-self:flex-start;font-size:max(11px,calc(20 * var(--u)));font-weight:900;letter-spacing:.2em;padding:5px 14px;border-radius:999px;background:var(--c);color:#FFF4DE}
.machine.jackpot .tag{color:#2A1C05}
.machine h3{font-size:max(24px,calc(48 * var(--u)));font-weight:800;font-style:italic;line-height:1.05}
.reel{position:relative;height:1.3em;overflow:hidden;font-size:max(46px,calc(108 * var(--u)));border-radius:max(12px,calc(18 * var(--u)));background:#0B0908;border:2px solid #5A4630;box-shadow:inset 0 0 24px rgba(0,0,0,.85)}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 74%,rgba(0,0,0,.65) 100%);pointer-events:none}
.strip{display:flex;flex-direction:column;transform:translateY(0);transition:transform .2s}
.strip>*{flex:0 0 1.3em;height:1.3em;display:flex;align-items:center;justify-content:center}
.strip>.g3d{display:block;text-align:center}
.strip>.g3d>span{line-height:1.3em}
.strip .sym{font-weight:900;font-style:italic;color:rgba(245,200,76,.5);scale:.78}
.slide.active .strip{transform:translateY(calc(-1.3em * (var(--n) - 1)));transition:transform var(--t,2.2s) cubic-bezier(.12,.86,.28,1.06) var(--sd,.5s)}
.chips{display:flex;flex-wrap:wrap;gap:max(6px,calc(8 * var(--u)))}
.chipc{--k:#B4322A;--t:#FFF4DE;width:max(34px,calc(60 * var(--u)));height:max(34px,calc(60 * var(--u)));border-radius:50%;display:grid;place-items:center;font-size:max(11px,calc(19 * var(--u)));font-weight:900;color:var(--t);background:radial-gradient(circle,var(--k) 0 54%,transparent 55%),repeating-conic-gradient(var(--t) 0deg 14deg,var(--k) 14deg 45deg);border:2px solid color-mix(in srgb,var(--k) 70%,#000);box-shadow:0 6px 12px rgba(0,0,0,.45),inset 0 0 0 3px var(--k);transition:translate .3s var(--spring),rotate .6s var(--ease)}
.chipc:hover{translate:0 -6px;rotate:200deg}
.c10{--k:#B4322A}.c50{--k:#1F4E9A}.c100{--k:#1E7A50}.c200{--k:#6B3FA0}.c500{--k:#1C1A17;--t:#F5C84C}.c1k{--k:#E2AC34;--t:#2A1C05}
.play{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:10px;padding:max(10px,calc(16 * var(--u)));border-radius:999px;font-size:max(14px,calc(26 * var(--u)));font-weight:800;text-decoration:none;color:#FFF4DE;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000) 100%);box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);transition:scale .3s var(--spring),box-shadow .3s}
.machine.jackpot .play{color:#2A1C05}
.play:hover{scale:1.04;box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--c) 60%,transparent)}
.machine .cap{color:#D9CFBF}
.machine .mini-label{font-size:max(11px,calc(20 * var(--u)));font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#BFB3A0}
@media (max-width:900px){.machines{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5 miniboard and 7 lottery ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(14px,calc(28 * var(--u)))}
.tier{align-items:flex-start;gap:max(6px,calc(10 * var(--u)))}
.tier .cap{color:#4A453D}
.tier small{font-size:max(12px,calc(22 * var(--u)));font-weight:700;color:#8A5E10}
.lotto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(16px,calc(32 * var(--u)))}
.lotto .card{align-items:center;text-align:center}
.lotto .pill{align-self:center}
.kv{width:100%;display:flex;flex-direction:column;gap:max(6px,calc(10 * var(--u)))}
.kv div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kv dt,.kv .k{font-size:max(13px,calc(24 * var(--u)));color:var(--sub)}
.kv .v{font-size:max(16px,calc(32 * var(--u)));font-weight:800;color:var(--fg)}
@media (max-width:1000px),(max-aspect-ratio:5/4){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.lotto{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.tiers{grid-template-columns:minmax(0,1fr)}}

/* ---------- 8 odds ---------- */
.odds-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:max(14px,calc(24 * var(--u)))}
.odds-side .card{gap:4px}
.odds-side .k{font-size:max(22px,calc(52 * var(--u)));font-weight:900;font-style:italic;line-height:1.1;color:#F5C84C}
.odds-side .k.long{font-size:max(19px,calc(40 * var(--u)))}
@media (max-width:520px){.odds-side{grid-template-columns:minmax(0,1fr)}}

/* ---------- 9 day ---------- */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:max(14px,calc(26 * var(--u))) max(18px,calc(36 * var(--u)));border-radius:max(16px,calc(24 * var(--u)));background:linear-gradient(135deg,#3A3936 0%,#211F1C 62%,#2D2B27 100%);border:1px solid #C99A3F;color:#FBF6EE;position:relative;overflow:hidden}
.band p:first-child{font-size:max(17px,calc(36 * var(--u)));font-weight:800;font-style:italic}
.band p:last-child{font-size:max(13px,calc(24 * var(--u)));color:#D9CFBF}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(245,200,76,.25),transparent);translate:-100% 0;animation:scan 3.5s ease-in-out infinite}
@keyframes scan{60%,100%{translate:100% 0}}
.timeline{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:max(8px,calc(16 * var(--u)))}
.tl-line{position:absolute;left:0;right:0;top:calc(-1 * max(10px,calc(18 * var(--u))));height:4px;border-radius:4px;background:rgba(138,94,16,.15);overflow:hidden}
.tl-line i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#E9BC4E,#9A6A12)}
.slide.active .tl-line i{transform:scaleX(1);transition:transform 3s linear .6s}
.slot{position:relative;padding:max(12px,calc(22 * var(--u))) max(10px,calc(18 * var(--u)));border-radius:max(14px,calc(20 * var(--u)));background:#FFFFFF;border:1px solid #E6DCCB;display:flex;flex-direction:column;gap:2px;transition:background .5s,border-color .5s,box-shadow .5s,translate .5s var(--spring)}
.slot .t{font-size:max(20px,calc(44 * var(--u)));font-weight:900;font-style:italic;color:#8A5E10;line-height:1.1;font-variant-numeric:tabular-nums}
.slot .w{font-size:max(12px,calc(22 * var(--u)));font-weight:800;color:#17161A}
.slot .s{font-size:max(12px,calc(22 * var(--u)));color:#4A453D}
.slot.lotto-slot{background:linear-gradient(135deg,#FDF3E0,#F8E6C4)}
.slot.cut{background:#17161A;border-color:#17161A}
.slot.cut .t{color:#F5C84C}.slot.cut .w{color:#FBF6EE}.slot.cut .s{color:#D9CFBF}
.slide.active .slot{animation:lit .7s var(--ease) both;animation-delay:calc(var(--i) * 375ms + 600ms)}
@keyframes lit{0%{box-shadow:0 0 0 rgba(245,200,76,0)}40%{box-shadow:0 0 0 4px rgba(245,200,76,.9),0 14px 30px rgba(201,146,31,.35);translate:0 -8px}100%{box-shadow:0 8px 20px rgba(201,146,31,.18);translate:0 0}}
.daystats{display:flex;flex-wrap:wrap;gap:max(16px,calc(56 * var(--u)))}
.daystats div{display:flex;align-items:baseline;gap:12px}
.daystats .k{font-size:max(34px,calc(72 * var(--u)));font-weight:900;font-style:italic;color:#8A5E10;line-height:1}
.daystats .v{font-size:max(13px,calc(24 * var(--u)));color:#4A453D;max-width:14em}
@media (max-width:1100px),(max-aspect-ratio:5/4){.timeline{grid-template-columns:repeat(4,minmax(0,1fr))}.tl-line{display:none}}
@media (max-width:480px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 10 fair ---------- */
.fair-head{text-align:center;align-items:center}
.fair-head .lead{margin-inline:auto}
#fair .stats{text-align:center}
.stats.trio{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:max(320px,calc(1240 * var(--u)));margin-inline:auto}
#fair .stat{align-items:center}
#fair .stat .cap{margin-inline:auto}

/* ---------- 11 wallet flow ---------- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:max(10px,calc(20 * var(--u)));position:relative}
.step{position:relative;display:flex;align-items:center;gap:max(10px,calc(16 * var(--u)));padding:max(14px,calc(22 * var(--u))) max(14px,calc(26 * var(--u)));border-radius:999px;background:#FFFFFF;border:1px solid #E2C696;box-shadow:0 10px 24px rgba(135,100,45,.12);font-size:max(15px,calc(30 * var(--u)));font-weight:800}
.step .ic{flex:0 0 auto;width:max(34px,calc(56 * var(--u)));height:max(34px,calc(56 * var(--u)));border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#F8D873,#E6B23C);color:#2A1C05}
.step .ic svg{width:55%;height:55%}
.step:not(:last-child)::after{content:"";position:absolute;right:calc(-1 * max(10px,calc(20 * var(--u))));top:50%;width:max(10px,calc(20 * var(--u)));height:3px;background:repeating-linear-gradient(90deg,#C9921F 0 6px,transparent 6px 10px);background-size:20px 3px;animation:march 1s linear infinite}
@keyframes march{to{background-position:20px 0}}
.coin-run{position:absolute;top:50%;left:0;width:max(18px,calc(30 * var(--u)));height:max(18px,calc(30 * var(--u)));margin-top:calc(-1 * max(9px,calc(15 * var(--u))));border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6D2,#E6B23C 60%,#8F6110);box-shadow:0 0 18px rgba(245,200,76,.9);z-index:2;opacity:0;pointer-events:none}
.slide.active .coin-run{animation:run 4.5s cubic-bezier(.6,0,.4,1) 1.4s infinite}
@keyframes run{0%{left:2%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:96%;opacity:0}}
@media (max-width:900px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.step:not(:last-child)::after,.coin-run{display:none}}

/* ---------- 12 refer ---------- */
.refer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:max(20px,calc(48 * var(--u)));align-items:center}
.refer-grid .left{display:flex;flex-direction:column;gap:max(16px,calc(32 * var(--u)))}
.refer-grid .stat .body{color:#17161A;font-weight:600;font-size:max(15px,calc(30 * var(--u)))}
.eq{font-size:max(22px,calc(48 * var(--u)));font-weight:800;line-height:1.2}
@media (max-width:1000px),(max-aspect-ratio:5/4){.refer-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 13 premium ---------- */
.perks{display:flex;flex-direction:column;gap:max(10px,calc(18 * var(--u)))}
.perk{display:grid;grid-template-columns:max(84px,calc(156 * var(--u))) minmax(0,1fr);gap:max(12px,calc(24 * var(--u)));align-items:center}
.perk .k{font-size:max(30px,calc(64 * var(--u)));font-weight:900;font-style:italic;color:#F5C84C;line-height:1;font-variant-numeric:tabular-nums}
.perk .body{color:#E9E0D0}
.hl{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;font-size:max(14px,calc(28 * var(--u)));font-weight:800;padding:max(10px,calc(16 * var(--u))) max(16px,calc(28 * var(--u)));border-radius:999px;background:linear-gradient(180deg,#F8D873 0%,#E6B23C 100%);color:#2A1C05;box-shadow:0 0 30px rgba(245,200,76,.35)}

/* ---------- 14 pbonus ---------- */
.bonus-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:max(20px,calc(64 * var(--u)));align-items:center}
.coins{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:max(8px,calc(20 * var(--u)));perspective:800px}
.coin{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:max(13px,calc(30 * var(--u)));font-weight:900;font-style:italic;color:#5E3D07;background:radial-gradient(circle at 35% 30%,#FFF6D2 0%,#F8D873 30%,#E6B23C 62%,#B98318 100%);box-shadow:inset 0 0 0 max(3px,calc(5 * var(--u))) rgba(255,246,210,.6),inset 0 -6px 10px rgba(122,82,12,.35),0 10px 20px rgba(135,100,45,.3);opacity:0;rotate:y 90deg;translate:0 -40px}
.slide.active .coin{animation:coin .7s var(--spring) both;animation-delay:calc(var(--i) * 110ms + 500ms)}
@keyframes coin{0%{opacity:0;rotate:y 90deg;translate:0 -40px}60%{opacity:1}100%{opacity:1;rotate:y 0deg;translate:0 0}}
.coin:hover{animation:none;opacity:1;rotate:y 180deg;transition:rotate .6s var(--ease)}
@media (max-width:1000px),(max-aspect-ratio:5/4){.bonus-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 15 pladder, 16 ppools ---------- */
.ladder-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:max(20px,calc(64 * var(--u)));align-items:center}
.ladder{display:flex;flex-direction:column;gap:max(10px,calc(20 * var(--u)))}
.rung{display:grid;grid-template-columns:max(92px,calc(260 * var(--u))) minmax(0,1fr) max(94px,calc(190 * var(--u)));gap:max(10px,calc(24 * var(--u)));align-items:center}
.rung .k{font-size:max(13px,calc(26 * var(--u)));color:var(--sub)}
.rung .track{height:max(22px,calc(44 * var(--u)))}
.rung .bar{height:100%;width:var(--w);border-radius:max(8px,calc(12 * var(--u)));background:linear-gradient(90deg,#F8D873 0%,#E6B23C 60%,#B98318 100%);transform-origin:left;transform:scaleX(0);box-shadow:0 0 20px rgba(245,200,76,.25)}
.light .rung .bar{background:linear-gradient(90deg,#E9BC4E 0%,#C9921F 60%,#9A6A12 100%);box-shadow:0 8px 20px rgba(135,100,45,.22)}
.slide.active .rung .bar{transform:scaleX(1);transition:transform 1.1s var(--ease) calc(var(--d,0) * 85ms + 450ms)}
.rung .v{font-size:max(17px,calc(36 * var(--u)));font-weight:900;white-space:nowrap;color:var(--acc);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1000px),(max-aspect-ratio:5/4){.ladder-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 17 pupgrade ---------- */
.up-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:max(20px,calc(56 * var(--u)));align-items:end}
.cols{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:max(4px,calc(18 * var(--u)));align-items:end;height:max(220px,calc(400 * var(--u)))}
.col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:max(4px,calc(8 * var(--u)));height:100%;min-width:0}
.col .v{font-size:max(10px,calc(26 * var(--u)));font-weight:800;color:#F5C84C;font-variant-numeric:tabular-nums}
.col .bar{width:100%;max-width:86px;height:calc(var(--h) * max(150px,calc(300 * var(--u))) / 2);border-radius:max(6px,calc(10 * var(--u))) max(6px,calc(10 * var(--u))) 4px 4px;background:linear-gradient(180deg,#FFE08A 0%,#E6B23C 50%,#8F6110 100%);transform-origin:bottom;transform:scaleY(0)}
.col:first-child .bar{box-shadow:0 0 24px rgba(245,200,76,.4)}
.slide.active .col .bar{transform:scaleY(1);transition:transform .9s var(--spring) calc(var(--i) * 90ms + 500ms)}
.col .l{font-size:max(10px,calc(24 * var(--u)));color:#D9CFBF}
@media (max-width:1000px),(max-aspect-ratio:5/4){.up-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 18 pmatrix ---------- */
.mx-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:max(20px,calc(44 * var(--u)));align-items:center}
.tablewrap{overflow-x:auto;min-width:0;border-radius:max(14px,calc(20 * var(--u)))}
.mx{width:100%;min-width:500px;border-collapse:collapse;font-size:max(12px,calc(23 * var(--u)));font-variant-numeric:tabular-nums}
.mx th,.mx td{padding:max(4px,calc(7 * var(--u))) max(8px,calc(16 * var(--u)));text-align:right;white-space:nowrap}
.mx th:first-child,.mx td:first-child{text-align:left}
.mx thead th{background:rgba(201,146,31,.18);color:#8A5E10;font-weight:800}
.mx tbody tr:nth-child(even){background:rgba(138,94,16,.06)}
.mx td:last-child{font-weight:800}
.mx tbody tr{opacity:0;translate:-24px 0}
.slide.active .mx tbody tr{opacity:1;translate:0 0;transition:opacity .5s ease,translate .6s var(--ease);transition-delay:calc(var(--i) * 120ms + 500ms)}
.mx tfoot td{background:linear-gradient(90deg,#F8D873 0%,#E6B23C 100%);color:#2A1C05;font-weight:900}
.mx .lvl{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:#17161A;color:#F5C84C;font-weight:800;font-size:.9em}
.dots5{display:inline-flex;gap:2px;margin-left:8px;vertical-align:middle}
.dots5 i{width:5px;height:5px;border-radius:50%;background:#C9921F}
.mx-card{align-items:flex-start}
.mx-card .usdt{font-size:max(26px,calc(52 * var(--u)));font-weight:900;font-style:italic;color:#F5C84C;line-height:1}
.mx-total{font-size:min(max(40px,calc(104 * var(--u))),11.5vw)}
@media (max-width:1100px),(max-aspect-ratio:5/4){.mx-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.mx{min-width:0}.mx th:nth-child(4),.mx td:nth-child(4){display:none}.mx th,.mx td{padding:5px 6px}.mt{min-width:0;font-size:12px}.mt th,.mt td{padding:7px 5px}}

/* ---------- 19 pmonth ---------- */
.month-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:max(20px,calc(56 * var(--u)));align-items:center}
.mt{width:100%;min-width:520px;border-collapse:collapse;font-size:max(13px,calc(28 * var(--u)));font-variant-numeric:tabular-nums}
.mt th,.mt td{padding:max(8px,calc(14 * var(--u))) max(8px,calc(16 * var(--u)));text-align:right}
.mt th:first-child,.mt td:first-child{text-align:left}
.mt thead th{background:rgba(245,200,76,.16);color:#F5C84C}
.mt tbody tr:nth-child(even){background:rgba(255,255,255,.04)}
.mt td:last-child{font-weight:800;color:#F5C84C}
.mt tbody tr{opacity:0;translate:-24px 0}
.slide.active .mt tbody tr{opacity:1;translate:0 0;transition:opacity .5s ease,translate .6s var(--ease);transition-delay:calc(var(--i) * 160ms + 500ms)}
.goldcard{background:linear-gradient(135deg,rgba(245,200,76,.18) 0%,rgba(245,200,76,.05) 100%);border:2px solid #E6B23C;box-shadow:0 0 50px rgba(245,200,76,.25)}
@media (max-width:1100px),(max-aspect-ratio:5/4){.month-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 20 pwallet ---------- */
.pw{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.9fr) auto minmax(0,1fr);gap:max(12px,calc(28 * var(--u)));align-items:center}
.pw ul{display:flex;flex-direction:column;gap:max(8px,calc(14 * var(--u)))}
.pw li{font-size:max(14px,calc(26 * var(--u)));font-weight:700;line-height:1.3;padding:max(10px,calc(16 * var(--u))) max(14px,calc(24 * var(--u)));border-radius:max(12px,calc(18 * var(--u)));background:#FFFFFF;border:1px solid #E2C696;transition:translate .3s var(--spring),box-shadow .3s}
.pw li:hover{translate:4px 0;box-shadow:0 8px 20px rgba(135,100,45,.18)}
.pw li.gold{background:linear-gradient(180deg,#F8D873 0%,#E6B23C 100%);border-color:#C9921F;font-weight:800;color:#2A1C05}
.pw .lbl{font-size:max(12px,calc(26 * var(--u)));font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8A5E10;margin-bottom:4px}
.pipe{position:relative;width:max(30px,calc(64 * var(--u)));height:4px;border-radius:4px;background:rgba(201,146,31,.25);overflow:hidden}
.pipe::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#C9921F,transparent);animation:pipe 1.3s linear infinite}
@keyframes pipe{to{left:100%}}
.wallet-card{align-items:center;text-align:center;padding:max(26px,calc(44 * var(--u))) max(18px,calc(32 * var(--u)))}
@media (max-width:1000px),(max-aspect-ratio:5/4){.pw{grid-template-columns:minmax(0,1fr)}.pipe{width:4px;height:max(24px,calc(40 * var(--u)));justify-self:center}.pipe::after{left:0;top:-40%;width:100%;height:40%;background:linear-gradient(180deg,transparent,#C9921F,transparent);animation-name:pipev}}
@keyframes pipev{to{top:100%}}

/* ---------- 21 wallets ---------- */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(14px,calc(32 * var(--u)))}
.three .title{font-size:max(22px,calc(40 * var(--u)));font-weight:800;font-style:italic;line-height:1.1}
.three .card.premium-w .title{color:#F5C84C}
.facts{display:flex;flex-direction:column;gap:max(8px,calc(14 * var(--u)))}
.facts .k{font-size:max(11px,calc(22 * var(--u)));font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.facts .v{font-size:max(14px,calc(26 * var(--u)));font-weight:600;color:var(--fg)}
.three .pearl,.three .champ{--fg:#17161A;--sub:#4A453D;--acc:#8A5E10;--rule:#E6D3AE;color:#17161A}
@media (max-width:1000px),(max-aspect-ratio:5/4){.three{grid-template-columns:minmax(0,1fr)}}

/* ---------- 22 close ---------- */
#close .in{padding-top:0}
.hero{position:relative;margin:0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l));height:max(200px,calc(560 * var(--u)));overflow:hidden;flex:0 0 auto}
.hero img{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{scale:1.02}to{scale:1.12;translate:-1.5% 1%}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(254,250,245,0),#FEFAF5)}
.close-ct{margin-top:auto;padding-top:max(16px,calc(24 * var(--u)))}
.site{font-size:max(26px,calc(52 * var(--u)));font-weight:900;font-style:italic;background:linear-gradient(180deg,#C9921F 0%,#9A6A12 60%,#7A520C 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;align-self:flex-start;padding-right:.1em}
.endcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(12px,calc(28 * var(--u)))}
.endcards .card{padding:max(16px,calc(24 * var(--u))) max(18px,calc(32 * var(--u)));gap:4px}
.endcards .k{font-size:max(26px,calc(56 * var(--u)));font-weight:900;font-style:italic;line-height:1.1;color:#8A5E10}
.endcards .noir .k{color:#F5C84C}
.again{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:#17161A;color:#F5C84C;font-size:max(14px,calc(24 * var(--u)));font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:scale .3s var(--spring)}
.again:hover{scale:1.05}
.again svg{width:18px;height:18px}
@media (max-width:760px){.endcards{grid-template-columns:minmax(0,1fr)}}

/* phones that ask for less motion keep the gentle animations (fades, counters, reels, coins, particles)
   and lose only the big swinging slide turns, blur and endless spinning */
@media (prefers-reduced-motion:reduce){
  .slide,.slide.before{transform:none}
  .r{filter:none}
  .r.flip{rotate:none}
  .rays,.hero img,.cover-logo img{animation:none}
}

/* ---------- scroll cue and phone hint ---------- */
.mhint{display:none}
.scue{position:fixed;left:50%;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) + 6px));translate:-50% 0;z-index:39;width:34px;height:34px;margin:0;border-radius:50%;display:grid;place-items:center;color:var(--chrome-fg);background:var(--chrome-bg);border:1px solid var(--chrome-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
.scue svg{width:18px;height:18px;animation:bob 1.4s ease-in-out infinite}
.scue.on{opacity:1}
@keyframes bob{50%{translate:0 4px}}

/* ---------- phones ---------- */
@media (max-width:700px){
  :root{--pad-l:max(40px,calc(env(safe-area-inset-left,0px) + 34px));--pad-r:max(46px,calc(env(safe-area-inset-right,0px) + 40px));--pad-t:68px;--pad-b:30px;--gap:16px}
  .prev{display:grid;left:env(safe-area-inset-left,0px);width:30px;height:66px;border-radius:0 18px 18px 0;border-left:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .prev svg{width:17px;height:17px}
  .next{right:env(safe-area-inset-right,0px);width:38px;height:80px;border-radius:22px 0 0 22px;animation:tabglow 2.4s ease-in-out infinite}
  .next::before,.next::after{display:none}
  .next svg{width:21px;height:21px}
  .next:hover{scale:1}
  .next:active,.prev:active{scale:.92}
  @keyframes tabglow{50%{box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,246,210,.7),0 0 34px rgba(245,200,76,.9)}}
  .mhint{display:block;position:fixed;left:50%;bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 10px));translate:-50% 0;z-index:39;margin:0;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;color:var(--chrome-fg);background:var(--chrome-bg);border:1px solid var(--chrome-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .5s;animation:mnudge 1.8s ease-in-out infinite}
  .mhint.gone{opacity:0;pointer-events:none}
  @keyframes mnudge{50%{translate:calc(-50% - 6px) 0}}
  .bf{display:none}
  .h{font-size:26px}
  .lead{font-size:14.5px}

  /* cover */
  .cover-logo{width:140px}

  /* casino: each machine in four short rows */
  .machines{gap:10px}
  .machine{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "title reel" "chips chips" "play play";column-gap:12px;row-gap:8px;padding:12px 14px;align-items:center}
  .machine .tag{grid-area:tag;font-size:10px;padding:3px 10px}
  .machine h3{grid-area:title;font-size:21px}
  .machine .reel{grid-area:reel;font-size:32px;border-radius:10px}
  .machine .cap,.machine .mini-label{display:none}
  .machine .chips{grid-area:chips;gap:5px}
  .machine .chipc{width:30px;height:30px;font-size:9.5px}
  .machine .play{grid-area:play;margin:0;padding:8px 12px;font-size:13px}
  .casino-head .h{font-size:30px}

  /* Mini Pool prices: two across */
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tier{padding:12px;gap:4px;border-radius:16px}
  .tier .pill{font-size:10.5px;padding:3px 9px}
  .tier .g3d{font-size:23px}
  .tier .cap{font-size:11.5px}
  .tier small{font-size:10.5px}

  /* Lottery: prize on top, three facts in a row */
  .lotto{gap:10px}
  .lotto .card{padding:12px 14px;gap:6px;border-radius:16px}
  .lotto .card>.cap,.lotto .card>hr{display:none}
  .lotto .g3d{font-size:30px}
  .lotto .pill{font-size:11px;padding:3px 10px}
  .kv{flex-direction:row;justify-content:space-between;gap:6px}
  .kv div{flex-direction:column;align-items:center;gap:0}
  .kv .k{font-size:10.5px}
  .kv .v{font-size:14px}

  /* a day: four across */
  .band{padding:10px 14px;gap:4px;border-radius:14px}
  .band p:first-child{font-size:15px}
  .band p:last-child{font-size:11.5px}
  .timeline{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .slot{padding:8px 5px;border-radius:12px}
  .slot .s{font-size:9.5px!important}
  .slot .t{font-size:16px}
  .slot .w,.slot .s{font-size:10px;line-height:1.25}
  .daystats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .daystats div{flex-direction:column;align-items:flex-start;gap:2px}
  .daystats .k{font-size:28px}
  .daystats .v{font-size:11px}

  /* wallet flow */
  .step{padding:10px 12px;font-size:14px;gap:8px}
  .step .ic{width:30px;height:30px}

  /* Premium */
  .perk{grid-template-columns:64px minmax(0,1fr);gap:10px}
  .perk .k{font-size:26px}
  .perk .body{font-size:13px}
  .hl{font-size:13px;padding:8px 14px}
  .scenebox.net{max-width:220px}
  .scenebox{max-width:330px}

  /* matrix */
  #pmatrix .lead{display:none}
  .mx-card{padding:14px 16px;gap:4px}
  .mx-card hr,.mx-card .cap{display:none}
  .mx-total{font-size:38px}
  .mx-card .usdt{font-size:22px}
  .mx{font-size:11.5px}
  .mx th,.mx td{padding:4px 5px}

  /* Premium Wallet: two by two */
  .pw{gap:8px}
  .pw ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .pw li{font-size:12px;padding:8px 10px;border-radius:10px}
  .pw .lbl{font-size:11px}
  .pipe{height:16px}
  .wallet-card{padding:14px}

  /* wallets at a glance */
  .three{gap:10px}
  .three .card{padding:12px 14px;gap:6px;border-radius:16px}
  .three .card>hr{display:none}
  .three .title{font-size:19px}
  .three .card>.body{font-size:12px}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
  .facts .k{font-size:10px}
  .facts .v{font-size:12.5px}

  /* one month table fits without sideways scrolling */
  .mt{min-width:0;font-size:11.5px}
  .mt th,.mt td{padding:6px 4px}

  /* close */
  .endcards{gap:8px}
  .endcards .card{padding:12px 14px}
  .endcards .k{font-size:24px}
}

/* ---------- intro film, bot trade, four wallets ---------- */
.bg-intro{background:#090703}
.intro-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#090703}
@media (min-aspect-ratio:16/10){.intro-vid{object-fit:cover}}
.intro-snd{position:absolute;z-index:3;left:50%;bottom:max(84px,12vh);transform:translateX(-50%);cursor:pointer}
.intro-snd[aria-pressed="true"]{background:#F5C84C;color:#2A1C05}
.bg-bot{background:radial-gradient(ellipse at 76% 30%,#1B2530 0%,#101318 55%,#0B0D11 100%)}
#bot .perk .k.up{color:#3DDC84}#bot .perk .k.down{color:#FF7B7B}
.botpanel{border-radius:max(16px,calc(26 * var(--u)));background:#0B0D11;border:1px solid #2A2F38;padding:max(14px,calc(28 * var(--u)));display:flex;flex-direction:column;gap:max(10px,calc(20 * var(--u)));min-width:0}
.bp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:700 max(11px,calc(20 * var(--u))) ui-monospace,Menlo,monospace;color:#9AA4B2;letter-spacing:.04em}
.bp-top i{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 10px #3DDC84}
.bp-top span{margin-left:auto;font-weight:500}
.botbars{position:relative;height:max(120px,calc(300 * var(--u)));background:linear-gradient(#ffffff0a 1px,transparent 1px) 0 0/100% 20%}
.botbars::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed #4B5260}
.botbars b{position:absolute;border-radius:3px;transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 40ms + 500ms)}
.botbars b.u{bottom:50%;background:#3DDC84;transform-origin:50% 100%}.botbars b.d{top:50%;background:#FF6B6B;transform-origin:50% 0}
.slide.active .botbars b{transform:scaleY(1)}
.bp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(8px,calc(16 * var(--u)))}
.bp-stats>div{background:#141820;border-radius:12px;padding:max(8px,calc(16 * var(--u)))}
.bp-stats .v{font:700 max(18px,calc(40 * var(--u))) ui-monospace,Menlo,monospace;color:#fff}.bp-stats .v.up{color:#3DDC84}.bp-stats .v.down{color:#FF7B7B}
.bp-stats .k{font-size:max(11px,calc(20 * var(--u)));color:#9AA4B2}
.three.fourw{grid-template-columns:repeat(4,minmax(0,1fr));gap:max(12px,calc(22 * var(--u)))}
.three.fourw .card{padding:max(16px,calc(28 * var(--u)))}
.three.fourw .title{font-size:max(20px,calc(34 * var(--u)))}
.three.fourw .facts .v{font-size:max(13px,calc(22 * var(--u)))}
.three .card.roi-w{background:linear-gradient(160deg,#16202A,#0B0D11);border:1px solid rgba(61,220,132,.45)}
.three .card.roi-w .title{color:#3DDC84}
@media (max-width:1100px),(max-aspect-ratio:5/4){.three.fourw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.three.fourw{grid-template-columns:minmax(0,1fr)}.intro-snd{bottom:96px}}
.on-intro #hint{display:none}
.botband{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:max(10px,calc(24 * var(--u)));padding:max(12px,calc(20 * var(--u))) max(16px,calc(32 * var(--u)));border-radius:max(16px,calc(24 * var(--u)));background:linear-gradient(90deg,#0B0D11,#16202A);border:1px solid rgba(61,220,132,.5);box-shadow:0 0 0 4px rgba(61,220,132,.08),0 18px 44px rgba(0,0,0,.5);color:#E8EDF3;text-decoration:none}
.bb-tag{font:800 max(10px,calc(18 * var(--u))) ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#3DDC84;white-space:nowrap}
.bb-name{font-size:max(18px,calc(40 * var(--u)));font-weight:800;font-style:italic;color:#fff;white-space:nowrap}
.bb-text{font-size:max(13px,calc(24 * var(--u)));color:#B8C2CF}
.bb-bars{display:flex;align-items:center;gap:4px;height:max(26px,calc(48 * var(--u)))}
.bb-bars i{display:block;width:max(5px,calc(9 * var(--u)));height:60%;border-radius:2px;background:#3DDC84;align-self:flex-end;margin-bottom:50%}
.bb-bars i:nth-child(2){height:85%}.bb-bars i:nth-child(4){height:45%}.bb-bars i:nth-child(5){height:75%}.bb-bars i:nth-child(7){height:90%}
.bb-bars i.d{background:#FF6B6B;height:35%;align-self:flex-start;margin:50% 0 0}
.bb-go{width:max(32px,calc(56 * var(--u)));height:max(32px,calc(56 * var(--u)));border-radius:50%;display:grid;place-items:center;background:#3DDC84;color:#0B2A17;font-weight:900;font-size:max(16px,calc(28 * var(--u)))}
.botline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:max(14px,calc(26 * var(--u)));font-weight:700;color:var(--fg)}
.botline span{font:800 max(10px,calc(18 * var(--u))) ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#101318;color:#3DDC84}
@media (max-width:900px){.botband{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag go" "name go" "text text"}.bb-tag{grid-area:tag}.bb-name{grid-area:name}.bb-text{grid-area:text}.bb-go{grid-area:go}.bb-bars{display:none}}