.joker-slot{max-width:700px;padding:28px;border:1px solid #344673;border-radius:24px;background:radial-gradient(ellipse at 50% 0, #23315b 0, #101522 55%, #0b0e17 100%);box-shadow:0 24px 70px #0006,inset 0 1px #ffffff15;text-align:left}
.slot-defs{position:absolute;width:0;height:0;overflow:hidden}
.slot-heading,.slot-controls{display:flex;align-items:center;justify-content:space-between;gap:16px}
.slot-label,.slot-badge{font-size:10px;letter-spacing:.12em;color:#b8caff;font-weight:600}
.slot-badge{border:1px solid #6376a3;padding:5px 9px;border-radius:20px;white-space:nowrap}
.slot-title{display:flex;gap:16px;align-items:center;padding:24px 0}
.slot-title>svg{width:88px;height:88px;filter:drop-shadow(0 6px 15px #638dff40)}
.slot-title div>span{font-size:11px;letter-spacing:.4em;color:#b8caff}
.slot-title h2{font-size:clamp(32px,7vw,54px);letter-spacing:.08em;font-weight:800}
.slot-star{margin-left:auto;color:#a68aff;font-size:40px}
.slot-cabinet{position:relative;padding:16px 14px 18px;border:1px solid #3e507b;border-radius:18px;background:linear-gradient(180deg,#0a1122,#070b14);box-shadow:inset 0 1px #ffffff12}
.slot-lights{display:flex;gap:8px;margin-bottom:14px}
.slot-lights i{flex:1;height:6px;border-radius:3px;background:#1b2540}
.joker-slot.spinning .slot-lights i{animation:slot-chase .6s linear infinite}
.slot-lights i:nth-child(5n+2){animation-delay:.12s}
.slot-lights i:nth-child(5n+3){animation-delay:.24s}
.slot-lights i:nth-child(5n+4){animation-delay:.36s}
.slot-lights i:nth-child(5n){animation-delay:.48s}
@keyframes slot-chase{0%,100%{background:#1b2540;box-shadow:none}50%{background:#7398ff;box-shadow:0 0 10px #7398ff99}}
.slot-reels{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;--cell:150px}
.slot-window{position:relative;height:var(--cell);overflow:hidden;border:1px solid #344468;border-radius:12px;background:linear-gradient(#151d33,#243253 50%,#151d33)}
.slot-window::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:11px;box-shadow:inset 0 20px 22px -12px #000c,inset 0 -20px 22px -12px #000c,inset 0 0 0 1px #ffffff08}
.slot-strip{will-change:transform}
.slot-strip--blur{filter:blur(2.5px)}
.slot-window.tease{border-color:#7398ff;animation:slot-tease .5s ease-in-out infinite}
@keyframes slot-tease{0%,100%{box-shadow:0 0 10px #7398ff44}50%{box-shadow:0 0 26px #7398ffaa}}
.slot-window.hit{border-color:#ffd76a;box-shadow:0 0 26px #ffd76a55,inset 0 0 20px #ffd76a33}
.slot-cell{height:var(--cell);display:grid;place-items:center}
.slot-cell svg{width:calc(var(--cell)*.62);height:calc(var(--cell)*.62);filter:drop-shadow(0 5px 10px #0007)}
.slot-winline{position:absolute;left:10px;right:10px;top:50%;height:4px;transform:translateY(-50%);border-radius:2px;background:linear-gradient(90deg,transparent,#ffd76a,#fff2c4,#ffd76a,transparent);opacity:0;pointer-events:none}
.slot-reels--win .slot-winline{opacity:1;animation:slot-line 1s ease-in-out infinite}
@keyframes slot-line{50%{opacity:.35}}
.slot-controls{margin-top:22px}
.slot-controls p{margin:0;color:#c0cbe2;font-size:13px}
.slot-spin{font-family:inherit;border:0;cursor:pointer;white-space:nowrap;background:#7398ff;color:#080f22;min-width:132px;justify-content:center}
.slot-spin:disabled{cursor:default;opacity:.6;transform:none}
.slot-spin:focus-visible{outline:2px solid white;outline-offset:4px}
.slot-disclaimer{color:#8f9ab1;font-size:11px;margin:18px 0 0;text-align:center}
@media(max-width:480px){.joker-slot{padding:16px}.slot-cabinet{padding:10px 8px 12px}.slot-reels{gap:7px;--cell:100px}.slot-lights{gap:5px;margin-bottom:10px}.slot-heading{gap:8px}.slot-label{font-size:8px}.slot-title>svg{width:65px;height:65px}.slot-controls{flex-direction:column}.slot-spin{width:100%}.slot-star{font-size:28px}}
.hero-glow{position:absolute;inset:-40px 0;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 40%,rgba(77,127,255,.14),transparent 75%)}
.browser-card{position:relative;border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#101216,#0b0c0f);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:#0d0e12}
.browser-bar span{width:10px;height:10px;border-radius:50%;background:#26282f}
.browser-bar em{font-style:normal;font-size:12px;color:var(--muted);margin-left:10px;background:#15161b;border:1px solid var(--border);border-radius:6px;padding:2px 10px}
.browser-body{padding:34px 34px 40px}
.mock-hero{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);padding-bottom:22px}
.mock-wordmark{font-size:34px;font-weight:700;letter-spacing:-.03em}
.mock-wordmark i{font-style:normal;color:var(--accent)}
.mock-tagline{font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.mock-tile{border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;background:#101218}
.mock-tile b{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.08em}
.mock-tile i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#23262e,#1a1c22);width:80%}
.mock-tile i.short{width:50%}

/* Five-reel stage, inspired by the reference's full game composition. */
.joker-slot{max-width:920px;padding:24px 30px 18px;border:1px solid #9e69c5;border-radius:22px;background:radial-gradient(ellipse at 50% 0,#633584 0,transparent 60%),repeating-conic-gradient(from 45deg,#23153b 0% 25%,#2d1a48 0% 50%) 0 0/70px 70px;box-shadow:0 28px 90px #0009,inset 0 0 70px #0e061bcc}
.slot-heading{opacity:.85}.slot-badge{border-color:#c39964;color:#ffe1ac}
.slot-title{justify-content:center;padding:12px 0 22px;position:relative;gap:22px}
.slot-title>svg{width:110px;height:110px;filter:drop-shadow(0 8px 5px #10071f)}
.slot-title div>span{color:#ffd4a6;font-weight:700;letter-spacing:.5em}
.slot-title h2{font-size:clamp(42px,7vw,72px);font-weight:900;font-style:italic;letter-spacing:.025em;color:#ffe9ba;text-shadow:0 3px #a66733,0 6px #512354,0 9px 20px #130919}
.slot-star{position:absolute;right:12px;color:#ffe2a9;text-shadow:0 0 25px #ee9dff}
.slot-cabinet{padding:10px;border:3px solid #d4ad70;border-radius:14px;background:linear-gradient(135deg,#f1d396,#6a3a30 35%,#d9b27b 60%,#472943);box-shadow:0 0 0 3px #281332,0 0 0 5px #bd83b144,0 15px 25px #08020d99}
.slot-lights{display:none}
.slot-reels{--cell:clamp(62px,12vw,130px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:4px;border:2px solid #281330;border-radius:8px;background:#ab7d8c}
.slot-window{height:calc(var(--cell)*3);border:0;border-radius:3px;background:linear-gradient(90deg,#321643,#4c235e 48%,#321643)}
.slot-window::after{border-radius:0;box-shadow:inset 0 24px 22px -12px #080210cc,inset 0 -24px 22px -12px #080210cc;z-index:2}
.slot-cell{height:var(--cell);border-bottom:1px solid #ffffff09}
.slot-cell svg{width:80%;height:85%;filter:drop-shadow(0 5px 1px #17081e) drop-shadow(0 0 8px #e9aaff25)}
.slot-winline{display:none}
.slot-controls{display:grid;grid-template-columns:1fr 86px;gap:24px;margin-top:20px;padding:0 8px}
.slot-controls p{font-size:13px;color:#eee0f6;max-width:540px}
.slot-spin{width:80px;height:80px;min-width:0;border-radius:50%;padding:0;border:3px solid #fff0c8;background:linear-gradient(#ffdf82,#cf8c31);color:#3a174d;box-shadow:0 4px 0 #6d4029,0 0 25px #ffd88330}
.slot-spin span{font-size:58px;line-height:1;font-weight:700}
.slot-disclaimer{color:#c1adcf;margin-top:12px}
@media(max-width:600px){.joker-slot{padding:16px 10px 12px;border-radius:16px}.slot-title{gap:10px;padding:10px 0 16px}.slot-title>svg{width:72px;height:72px}.slot-title h2{font-size:42px}.slot-title div>span{font-size:9px}.slot-star{display:none}.slot-cabinet{padding:5px;border-width:2px}.slot-reels{--cell:clamp(53px,15vw,88px);gap:2px;padding:2px}.slot-controls{grid-template-columns:1fr 62px;padding:0 4px;gap:10px}.slot-spin{width:60px;height:60px}.slot-spin span{font-size:44px}.slot-controls p{font-size:11px}.slot-disclaimer{font-size:10px}}

.slot-cell img{display:block;width:86%;height:86%;min-height:0;object-fit:contain;filter:drop-shadow(0 5px 4px #10041f99);user-select:none}
.slot-character{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 8px 12px #110423aa)}
@media(max-width:600px){.slot-character{width:86px;height:86px}}

/* ---------- quick nav ---------- */

.slot-won .slot-cell:nth-child(2){background:#ffda6b28;box-shadow:inset 0 0 20px #ffd76a55}
.slot-won .slot-winline{display:block;opacity:.8;z-index:3;box-shadow:0 0 16px #ffd76a}
.slot-win-dialog{box-sizing:border-box;width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:52px 44px 28px;overflow:auto;border:1px solid #d4ad70;border-radius:28px;text-align:center;color:#fff6de;background:radial-gradient(ellipse at 50% 0,#78449b,transparent 65%),linear-gradient(145deg,#321744,#170d28);box-shadow:0 28px 100px #000b,inset 0 0 50px #bc78dd18}
.slot-win-dialog::backdrop{background:#080410b8;backdrop-filter:blur(8px)}
.slot-win-dialog[open]{animation:slot-banner-in .35s ease-out}
@keyframes slot-banner-in{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.slot-win-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff0d;color:#fff2d1;font-size:26px;line-height:1;cursor:pointer}
.slot-win-kicker{margin:0 0 22px;color:#e7c389;font-size:11px;letter-spacing:.16em;font-weight:700}
.slot-win-dialog h2{margin:0;font-size:clamp(34px,7vw,58px);line-height:1.06;letter-spacing:-.04em;font-weight:850;color:#fff5df}
.slot-win-dialog h2 span{color:#ffda7a}
.slot-win-symbols{display:flex;justify-content:center;gap:8px;margin:28px 0;padding:16px 8px;border:1px solid #d4ad7055;border-radius:16px;background:#0c061c66}
.slot-win-symbols img{width:calc((100% - 32px)/5);max-width:82px;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 9px #0008)}
.slot-win-copy{margin:0 0 24px;font-size:17px;line-height:1.55;color:#eadcf0}
.slot-win-cta{display:flex;width:100%;box-sizing:border-box;justify-content:center;min-height:60px;border:1px solid #ffe9b7;border-radius:14px;background:linear-gradient(180deg,#ffe6a2,#edb54e);color:#30153b;font-size:18px;font-weight:750;box-shadow:0 6px 24px #eeb64a28}
.slot-win-cta:hover{background:#ffe6a2;color:#30153b}
.slot-win-again{display:block;margin:18px auto 0;padding:6px;border:0;background:transparent;color:#e0cbe9;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.slot-win-note{max-width:430px;margin:22px auto 0;color:#bfa8cd;font-size:12px;line-height:1.5}
.slot-win-dialog button:focus-visible,.slot-win-cta:focus-visible{outline:2px solid #fff5df;outline-offset:4px}
body:has(.slot-win-dialog[open]){overflow:hidden}
@media(max-width:480px){.slot-win-dialog{padding:48px 22px 22px;border-radius:22px}.slot-win-kicker{font-size:9px}.slot-win-symbols{gap:4px;margin:22px 0}.slot-win-symbols img{width:calc((100% - 16px)/5)}.slot-win-copy{font-size:15px}.slot-win-cta{font-size:16px}}
@media(prefers-reduced-motion:reduce){.slot-win-dialog[open]{animation:none}}