/* Starfall, Dust Devil, Crystal Caverns */
.s3{position:relative;border-radius:24px;padding:14px 12px 12px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14),0 24px 44px -26px #000}
.s3-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}
.s3-logo{font:900 23px/1 ui-rounded,"SF Pro Rounded",-apple-system,system-ui;letter-spacing:-.4px;white-space:nowrap}
.s3-tag{font-size:10.5px;font-weight:800;letter-spacing:1.2px;padding:5px 9px;border-radius:99px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);color:rgba(255,255,255,.8);white-space:nowrap}
.s3-ban{position:relative;display:none;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.4);font-size:13px;font-weight:600;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.15)}
.s3-ban.on{display:flex;animation:pgin .25s}.s3-ban b{font-weight:800}.s3-ban .mult{font:900 18px/1 ui-rounded,system-ui;color:var(--gold)}
.s3-glass{position:relative;border-radius:16px;padding:6px;background:rgba(0,0,0,.38);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),inset 0 8px 22px rgba(0,0,0,.45)}
.s3-reels{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;transition:opacity .3s,filter .3s}
.s3-reels.r3{--rh:calc((min(100vw,560px) - 72px) / 5 * 3)}.s3-reels.r4{--rh:calc((min(100vw,560px) - 72px) / 5 * 4)}
@media(min-width:700px){.s3-reels.r3{--rh:330px}.s3-reels.r4{--rh:440px}}
.s3-reels.dim{opacity:.18;filter:blur(2px)}
.s3-reel{height:var(--rh);border-radius:10px;background:var(--reel)}
.s3-reels.r4 .cell{height:calc(var(--rh) / 4)}
.s3 .cell{padding:9%}
.s3 .cell svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.s3-reel.spinning .cell{filter:blur(1.5px)}
.s3-reel.antic{box-shadow:0 0 0 2px var(--hl),0 0 20px var(--hl)}
.s3 .cell.hit{z-index:2;animation:s3hit .5s ease-in-out infinite alternate}
.s3 .cell.hit:before{content:"";position:absolute;inset:3px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--hl),0 0 14px var(--hl);background:color-mix(in srgb,var(--hl) 14%,transparent)}
@keyframes s3hit{to{transform:scale(1.07)}}
.s3 .cell.land{animation:s3land .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes s3land{from{transform:scale(.6)}}
.s3-info{position:relative}
.cz-star,.cz-vip_star{--spin:radial-gradient(circle at 50% 35%,#facc15,#b45309 65%,#78350f);--spinsh:rgba(250,204,21,.35)}
.cz-dust,.cz-vip_dust{--spin:radial-gradient(circle at 50% 35%,#f87171,#b91c1c 65%,#450a0a);--spinsh:rgba(239,68,68,.35)}
.cz-cave,.cz-vip_cave{--spin:radial-gradient(circle at 50% 35%,#5eead4,#0f766e 65%,#042f2e);--spinsh:rgba(94,234,212,.35)}
.s3-ctrl .s3-spin{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.s3-ctrl .s3-spin:not(.auto){background:var(--spin);box-shadow:0 0 0 4px var(--spinsh),0 12px 24px -8px rgba(0,0,0,.8)}

/* overlays */
.s3-over{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;border-radius:16px;background:var(--over);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pgin .25s}
.s3-over[hidden]{display:none}
.s3-over small{font-size:11px;font-weight:800;letter-spacing:1.8px;color:rgba(255,255,255,.7)}
.s3-over b{font:900 30px/1.05 ui-rounded,"SF Pro Rounded",-apple-system,system-ui;letter-spacing:-.3px;color:var(--hl2);text-shadow:0 2px 18px var(--hl)}
.s3-over span{font-size:14px;color:rgba(255,255,255,.85);max-width:270px;line-height:1.38;display:flex;align-items:center;justify-content:center;gap:4px}
.s3-over.big b{font-size:40px}.s3-over.big span{font:800 28px/1 -apple-system,system-ui;color:#fff}.s3-over.big span i{font-style:normal;font-variant-numeric:tabular-nums}
.s3-over .mp-i{width:22px;height:22px}

/* lobby tiles */
.t-s3star{background:radial-gradient(circle at 50% 30%,#3b2a8a,#0a0820)}
.t-s3dust{background:radial-gradient(circle at 50% 30%,#b45309,#3a1a06)}
.t-s3cave{background:radial-gradient(circle at 50% 30%,#0f766e,#05201c)}
.s3pt svg{width:100%;height:100%}

/* ---------------- Starfall ---------------- */
.s3-star{--reel:linear-gradient(180deg,rgba(30,27,75,.85),rgba(15,12,40,.95));--hl:rgba(253,224,71,.85);--hl2:#fde68a;--over:radial-gradient(circle at 50% 40%,rgba(49,46,129,.92),rgba(5,4,20,.95));
  --spin:radial-gradient(circle at 50% 35%,#facc15,#b45309 65%,#78350f);background:radial-gradient(120% 70% at 50% 0%,#312e81,#0b0a24 60%,#050414)}
.s3-sky{position:absolute;inset:0;z-index:-1;opacity:.9;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(1.4px 1.4px at 40% 70%,#c7d2fe,transparent),radial-gradient(1px 1px at 88% 52%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 88%,#fde68a,transparent),radial-gradient(1px 1px at 58% 36%,#fff,transparent),radial-gradient(1px 1px at 6% 48%,#a5b4fc,transparent),radial-gradient(1.3px 1.3px at 94% 90%,#fff,transparent);background-size:220px 220px;animation:s3drift 60s linear infinite}
@keyframes s3drift{to{background-position:220px 440px}}
.s3-star .s3-logo{background:linear-gradient(180deg,#fff7d1,#fbbf24 60%,#d97706);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 12px rgba(251,191,36,.45))}
.s3-jp{display:flex;gap:4px}
.s3-jp span{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:4px 7px;border-radius:9px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.15)}
.s3-jp i{font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:1.1px;color:rgba(255,255,255,.6)}
.s3-jp b{font:900 12.5px/1.2 ui-rounded,system-ui;font-variant-numeric:tabular-nums}
.s3-jp .jp-mini b{color:#93c5fd}.s3-jp .jp-major b{color:#f0abfc}.s3-jp .jp-grand b{color:#fde047}
.s3c-O{position:relative}
.orbv{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font:900 clamp(10px,3.2vw,14px)/1 -apple-system,system-ui;color:#451a03;text-shadow:0 1px 0 rgba(255,255,255,.5);white-space:nowrap;letter-spacing:-.2px}
.orbv.j{font-size:clamp(8px,2.5vw,11px);letter-spacing:.4px;color:#fff;text-shadow:0 1px 3px #000}
.s3-star .s3c-O.land{animation:s3orb .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes s3orb{from{transform:scale(.4) rotate(-40deg);filter:brightness(2.5)}}
.s3-hold{position:absolute;inset:6px;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:4px}
.s3-hold[hidden]{display:none}
.hc{position:relative;display:grid;place-items:center;border-radius:10px;background:rgba(15,12,40,.85);box-shadow:inset 0 0 0 1px rgba(165,180,252,.18);padding:9%}
.hc svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(253,224,71,.55))}
.hc.on{background:radial-gradient(circle,rgba(250,204,21,.22),rgba(15,12,40,.9) 70%);box-shadow:inset 0 0 0 1.5px rgba(253,224,71,.6)}
.hc.new{animation:s3orb .55s cubic-bezier(.2,1.6,.4,1)}
.hc.jj{box-shadow:inset 0 0 0 2px #f0abfc,0 0 14px rgba(240,171,252,.5)}
.hc.roll{animation:s3roll .7s ease-in-out}
@keyframes s3roll{0%,100%{background:rgba(15,12,40,.85)}50%{background:rgba(99,102,241,.35);box-shadow:inset 0 0 0 1px rgba(165,180,252,.6)}}
.hc.got{animation:s3got .4s ease-out forwards}
@keyframes s3got{50%{transform:scale(1.15)}to{opacity:.35;transform:scale(.92)}}
.s3-hold.grand .hc{box-shadow:inset 0 0 0 2px #fde047,0 0 22px rgba(253,224,71,.7)}
.s3-dots{display:flex;gap:6px}.s3-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15)}.s3-dots i.on{background:#fde047;box-shadow:0 0 8px #fde047}
.s3-over.grand b{font-size:36px;color:#fde047}

/* ---------------- Dust Devil ---------------- */
.s3-dust{--reel:linear-gradient(180deg,#f3dfb8,#e2c08a);--hl:rgba(220,38,38,.85);--hl2:#fde4b4;--over:radial-gradient(circle at 50% 40%,rgba(120,53,15,.93),rgba(28,12,3,.96));
  --spin:radial-gradient(circle at 50% 35%,#ef4444,#991b1b 65%,#450a0a);background:linear-gradient(180deg,#f59e0b 0%,#c2410c 30%,#5c2408 62%,#2a1206)}
.s3-sun{position:absolute;left:50%;top:-60px;width:220px;height:220px;margin-left:-110px;border-radius:50%;z-index:-1;background:radial-gradient(circle,#fde68a,rgba(251,191,36,.4) 45%,transparent 70%)}
.s3-dust .s3-logo{font-family:"Rockwell","Georgia",serif;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#fff4d6;text-shadow:2px 2px 0 #7c2d12,4px 4px 0 rgba(0,0,0,.35)}
.s3-dust .s3-glass{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='14'%3E%3Cpath d='M0 7h80' stroke='%23000' stroke-opacity='.12'/%3E%3C/svg%3E"),linear-gradient(180deg,#7c4a1e,#4a2c12);padding:7px;box-shadow:inset 0 0 0 2px #3f2307,0 0 0 2px #a16207,inset 0 6px 14px rgba(0,0,0,.4)}
.s3-dust .s3-reel{box-shadow:inset 0 0 0 1px rgba(63,35,7,.35),inset 0 0 18px rgba(120,53,15,.25)}
.s3-dust .cell{padding:10%}
.s3-dust .cell.walk{animation:s3walk .55s cubic-bezier(.3,1.2,.5,1)}
@keyframes s3walk{from{transform:translateX(105%) rotate(14deg)}60%{transform:translateX(-6%) rotate(-6deg)}}
.s3-dust .cell.flip{animation:s3flip .42s ease-out both;animation-delay:var(--d,0ms)}
@keyframes s3flip{from{transform:rotateX(90deg);opacity:0}}
.s3-dust .s3c-W{animation:s3sway 1.4s ease-in-out infinite alternate}
@keyframes s3sway{to{transform:rotate(-5deg) translateX(-2px)}}
.s3-dust .s3-ban .dd{font-weight:800;color:#fde4b4}
.dw-walk{position:absolute;inset:7px;z-index:4;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);gap:4px;pointer-events:none}
.dw-t{border-radius:10px;background:#efd6a6;box-shadow:0 0 0 2px rgba(220,38,38,.7),0 6px 16px rgba(0,0,0,.35);transition:transform .55s cubic-bezier(.3,1.25,.5,1),opacity .55s}
.dw-t .cell{height:100%}.dw-t.gone{opacity:0}
.s3-wheel{position:absolute;inset:0;z-index:8;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle,rgba(28,12,3,.55),rgba(28,12,3,.92) 70%)}
.s3-wheel[hidden]{display:none}
.dw-rot{width:min(80%,320px);aspect-ratio:1;will-change:transform}
.dw-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.dw-pin{position:absolute;top:calc(50% - min(40%,160px) - 12px);left:50%;z-index:2;width:0;height:0;margin-left:-11px;border:11px solid transparent;border-top:20px solid #fde4b4;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.dw-hub{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#7c2d12;background:radial-gradient(circle at 40% 35%,#fff3c4,#e9b949 60%,#8a5a0b);box-shadow:0 4px 12px rgba(0,0,0,.5)}

/* ---------------- Crystal Caverns ---------------- */
.s3-cave{--reel:rgba(4,30,28,.75);--hl:rgba(94,234,212,.85);--hl2:#a5f3fc;--over:radial-gradient(circle at 50% 40%,rgba(17,94,89,.92),rgba(2,14,13,.96));
  --spin:radial-gradient(circle at 50% 35%,#5eead4,#0f766e 65%,#042f2e);background:radial-gradient(110% 70% at 50% 0%,#134e4a,#04201d 55%,#020c0b)}
.s3-mist{position:absolute;inset:auto -20% -30% -20%;height:60%;z-index:-1;background:radial-gradient(closest-side,rgba(94,234,212,.12),transparent);animation:s3mist 9s ease-in-out infinite alternate}
@keyframes s3mist{to{transform:translateX(8%)}}
.s3-cave .s3-logo{background:linear-gradient(180deg,#f0fdfa,#5eead4 55%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 12px rgba(94,234,212,.4))}
.cv{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--reel)}
.cv-spots,.cv-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr)}
.cv-spots i{display:grid;place-items:center;margin:1px;border-radius:7px;font:900 clamp(8px,2.4vw,11px)/1 -apple-system,system-ui;font-style:normal;color:#ecfeff;transition:background .3s,box-shadow .3s}
.cv-spots i.mk{background:rgba(94,234,212,.12);box-shadow:inset 0 0 0 1px rgba(94,234,212,.35)}
.cv-spots i.mx{background:radial-gradient(circle,rgba(167,139,250,.55),rgba(94,234,212,.2));box-shadow:inset 0 0 0 1.5px #a78bfa,0 0 10px rgba(167,139,250,.5);align-items:end;padding-bottom:2px}
.cv-spots i.up{animation:s3up .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes s3up{from{transform:scale(.4);filter:brightness(2)}}
.cv-grid{z-index:1;transition:transform .24s ease-in,opacity .24s}
.cv-grid.out{transform:translateY(30%);opacity:0}
.cv-grid .cell{height:auto;padding:12%}
.cv-grid .cell.drop{animation:s3drop .45s cubic-bezier(.25,1.25,.4,1) both;animation-delay:var(--d,0ms)}
@keyframes s3drop{from{transform:translateY(-420%);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
.cv-grid .cell.hit:before{inset:1px;border-radius:7px}
.cv-grid .cell.pop{animation:s3shat .26s ease-in forwards!important}
@keyframes s3shat{to{transform:scale(1.5) rotate(20deg);opacity:0;filter:brightness(3)}}
.cv-grid .s3c-S.land{animation:s3geo .9s ease-in-out infinite alternate}
@keyframes s3geo{to{transform:scale(1.18);filter:drop-shadow(0 0 10px #a78bfa)}}
@media(prefers-reduced-motion:reduce){.s3-sky,.s3-mist,.s3-dust .s3c-W{animation:none}}