/* ===== per-game jackpot: base ===== */
.mid-hide{display:none}
.jpx{margin:12px 0 14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(#0a1024,#060a18);padding:12px 14px 10px;position:relative;overflow:hidden}
.jpx::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -30%,color-mix(in srgb,var(--c) 34%,transparent),transparent 65%);pointer-events:none}
.jphd{display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative;flex-wrap:wrap}
.jphd b{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:3px;font-size:22px;color:var(--c);text-shadow:0 0 16px var(--c)}
.jphd small{color:var(--mut);font-size:12px}
.jpx .jpinfo{position:static;transform:none;margin-left:auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer;font-weight:800}
.jptiles{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;align-items:center}
.jt{position:relative;flex:1 1 130px;max-width:230px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 10px;color:#fff;box-sizing:border-box}
.jt .ji{font-size:22px;line-height:1.1;font-style:normal}
.jt .jn{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:2px;font-size:14px;line-height:1.1}
.jt .ja{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 12px var(--c);white-space:nowrap;line-height:1.15}
.jt.grand{flex-grow:1.4}
.jt.grand .ji{font-size:28px}
.jphow{margin-top:10px;position:relative;border-top:1px solid #ffffff14;padding-top:8px}
.jphow summary{cursor:pointer;color:var(--c);font-weight:800;letter-spacing:1px;font-size:13px;text-transform:uppercase}
.jsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.js{background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;padding:10px;text-align:center}
.js b{display:block;margin:6px 0 3px;font-size:14px}
.js small{display:block;color:var(--mut);font-size:12px;line-height:1.35}
.jsv{display:flex;justify-content:center;align-items:center;gap:4px;min-height:44px;font-size:30px;flex-wrap:wrap}
.jsv svg,.jsv img{max-width:36px;height:auto}
.jsr span{font-size:26px}
.jnote{color:#cfd8f5;font-size:12.5px;margin:10px 0 6px}
.jodds table{margin-top:4px}
@media(max-width:700px){.jsteps{grid-template-columns:1fr}.jt{flex-basis:44%}}
@keyframes jfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes jswing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes jflick{0%{filter:brightness(1) saturate(1)}100%{filter:brightness(1.25) saturate(1.3)}}
@keyframes jneon{0%,100%{opacity:1}92%{opacity:1}94%{opacity:.55}96%{opacity:1}98%{opacity:.7}}
@keyframes jfly{from{left:0}to{left:94%}}
@keyframes jsweep{to{transform:rotate(360deg)}}
@keyframes jneedle{0%,100%{transform:rotate(-70deg)}50%{transform:rotate(70deg)}}
@keyframes jball{0%{top:-12px;opacity:0}20%{opacity:1}100%{top:70%;opacity:.0}}

/* ===== the 25 skins ===== */
/* neon sign */
.jpx[data-skin=neon] .jt{border:2px solid var(--c);border-radius:10px;background:#07040c;box-shadow:0 0 14px var(--c),inset 0 0 16px color-mix(in srgb,var(--c) 38%,transparent)}
.jpx[data-skin=neon] .jt .jn,.jpx[data-skin=neon] .jt .ja{text-shadow:0 0 10px var(--c),0 0 22px var(--c)}
.jpx[data-skin=neon] .jt.grand{animation:jneon 5s infinite}
/* casino chips */
.jpx[data-skin=chip] .jt{flex:0 0 122px;aspect-ratio:1;min-height:0;border-radius:50%;border:7px dashed #ffffffcc;background:radial-gradient(circle,var(--d),var(--c) 140%);box-shadow:0 0 0 4px var(--c),0 8px 16px #000b;padding:4px}
.jpx[data-skin=chip] .jt.grand{flex-basis:150px}
/* stepped pyramid */
.jpx[data-skin=pyramid] .jptiles{flex-direction:column;gap:3px}
.jpx[data-skin=pyramid] .jt{flex:none;max-width:none;width:var(--w);min-height:46px;flex-direction:row;gap:12px;background:linear-gradient(#f6d77e,#a8741a);color:#2a1800;clip-path:polygon(var(--k) 0,calc(100% - var(--k)) 0,100% 100%,0 100%);padding:6px var(--k)}
.jpx[data-skin=pyramid] .jt .ja{text-shadow:none}.jpx[data-skin=pyramid] .jt .jn{color:#4a2e00}
.jpx[data-skin=pyramid] .jt.grand{width:40%;--k:9%}.jpx[data-skin=pyramid] .jt.major{width:58%;--k:7%}.jpx[data-skin=pyramid] .jt.minor{width:76%;--k:6%}.jpx[data-skin=pyramid] .jt.mini{width:94%;--k:5%}
/* faceted gems */
.jpx[data-skin=gem] .jt{flex:0 0 150px;min-height:118px;clip-path:polygon(22% 0,78% 0,100% 34%,50% 100%,0 34%);background:linear-gradient(135deg,#ffffffcc,var(--c) 35%,var(--d) 100%);padding:12px 8px 36px}
.jpx[data-skin=gem] .jt.grand{flex-basis:178px;min-height:136px}
/* wanted posters */
.jpx[data-skin=poster] .jt{background:#d9c08c repeating-linear-gradient(0deg,#0000 0 9px,#a8895a22 9px 10px);color:#3a2410;border:3px double #5a3a18;border-radius:3px;font-family:Georgia,serif;transform:rotate(var(--r,0deg));box-shadow:0 6px 10px #000a}
.jpx[data-skin=poster] .jt:nth-child(1){--r:-1.8deg}.jpx[data-skin=poster] .jt:nth-child(2){--r:1.4deg}.jpx[data-skin=poster] .jt:nth-child(3){--r:-1deg}.jpx[data-skin=poster] .jt:nth-child(4){--r:2deg}
.jpx[data-skin=poster] .jt::before{content:"WANTED";font-size:9px;letter-spacing:3px;color:#7a2a10;font-weight:800}
.jpx[data-skin=poster] .jt .ja{text-shadow:none;color:#5a1a08}.jpx[data-skin=poster] .jt .jn{font-family:Georgia,serif;font-weight:800;letter-spacing:1px}
/* floating bubbles */
.jpx[data-skin=bubble] .jt{flex:0 0 124px;aspect-ratio:1;min-height:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,#ffffffaa,#0000 24%),radial-gradient(circle,color-mix(in srgb,var(--c) 40%,transparent),color-mix(in srgb,var(--d) 85%,transparent));border:2px solid #ffffff55;box-shadow:0 0 20px color-mix(in srgb,var(--c) 50%,transparent);animation:jfloat 4s ease-in-out infinite;animation-delay:calc(var(--i)*-1s)}
.jpx[data-skin=bubble] .jt.grand{flex-basis:152px}
/* hanging lanterns */
.jpx[data-skin=lantern] .jptiles{padding-top:16px}
.jpx[data-skin=lantern] .jt{flex:0 0 130px;min-height:104px;background:radial-gradient(ellipse at 50% 40%,#ff6a3d,#c01418 70%,#7a060a);border-radius:46% 46% 40% 40%/30% 30% 40% 40%;border-top:6px solid #ffd75e;border-bottom:6px solid #ffd75e;transform-origin:50% -18px;animation:jswing 3.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s);box-shadow:0 0 22px #ff3b3b66}
.jpx[data-skin=lantern] .jt::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:18px;background:#ffd75e}
.jpx[data-skin=lantern] .jt.grand{flex-basis:158px;min-height:120px}
/* heraldic shields */
.jpx[data-skin=shield] .jt{flex:0 0 146px;min-height:122px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(160deg,#c3d3ee,var(--c) 35%,var(--d));padding:12px 10px 34px}
.jpx[data-skin=shield] .jt.grand{flex-basis:170px;min-height:140px}
/* treasure chests */
.jpx[data-skin=chest] .jt{background:repeating-linear-gradient(90deg,#7c4a1c 0 15px,#6a3e15 15px 17px);border:3px solid #d7a73a;border-top-width:14px;border-radius:12px 12px 6px 6px;box-shadow:0 6px 12px #000b}
.jpx[data-skin=chest] .jt::after{content:"";position:absolute;top:-14px;left:50%;width:16px;height:16px;margin-left:-8px;background:#ffd75e;border-radius:3px;box-shadow:0 0 8px #ffd75e}
/* planets with rings */
.jpx[data-skin=orb]{background:radial-gradient(circle at 20% 30%,#fff6 1px,#0000 2px) 0 0/90px 70px,radial-gradient(circle at 70% 60%,#fff4 1px,#0000 2px) 0 0/60px 80px,linear-gradient(#0a0828,#04040f)}
.jpx[data-skin=orb] .jt{flex:0 0 116px;aspect-ratio:1;min-height:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffffff88,#0000 30%),radial-gradient(circle,var(--c),var(--d));box-shadow:0 0 26px color-mix(in srgb,var(--c) 60%,transparent);padding:4px}
.jpx[data-skin=orb] .jt::after{content:"";position:absolute;left:-16%;right:-16%;top:44%;height:16%;border:2px solid #ffffff77;border-radius:50%;transform:rotate(-18deg);pointer-events:none}
.jpx[data-skin=orb] .jt.grand{flex-basis:148px}
/* candy */
.jpx[data-skin=candy] .jt{border-radius:999px;border:4px solid #fff;background:repeating-linear-gradient(45deg,var(--c) 0 11px,color-mix(in srgb,var(--c) 55%,#fff) 11px 22px);box-shadow:0 5px 0 color-mix(in srgb,var(--d) 80%,#000),0 0 16px color-mix(in srgb,var(--c) 50%,transparent)}
.jpx[data-skin=candy] .jt .jn,.jpx[data-skin=candy] .jt .ja{text-shadow:0 2px 3px #000a}
/* stone tablets */
.jpx[data-skin=tablet] .jt{border-radius:50% 50% 8px 8px/36% 36% 8px 8px;background:linear-gradient(#d8c9a6,#8f7d58);color:#3a2a10;border:3px solid #5a4724;min-height:104px;padding-top:18px;box-shadow:inset 0 0 16px #0004,0 6px 10px #000a}
.jpx[data-skin=tablet] .jt .ja{text-shadow:none;color:#2a1c06}.jpx[data-skin=tablet] .jt .jn{color:#4a3510}
/* leaves */
.jpx[data-skin=vine] .jt{border-radius:0 62% 0 62%;background:linear-gradient(135deg,#27a64a,#0b3a1a);border:2px solid #8be071;box-shadow:0 0 14px #1fd36a44;min-height:96px}
.jpx[data-skin=vine] .jt:nth-child(even){border-radius:62% 0 62% 0}
/* hanging scrolls */
.jpx[data-skin=scroll] .jt{background:linear-gradient(90deg,#e9dcb8,#f6ecd0 50%,#e9dcb8);color:#2a0a0a;border-top:9px solid #7a1018;border-bottom:9px solid #7a1018;border-radius:2px;min-height:96px;box-shadow:0 6px 10px #000a}
.jpx[data-skin=scroll] .jt::after{content:"";position:absolute;right:8px;top:8px;width:14px;height:14px;border-radius:50%;background:#c8101a}
.jpx[data-skin=scroll] .jt .ja{text-shadow:none;color:#6a0a10}
/* moons */
.jpx[data-skin=moon]{background:linear-gradient(#0a1426,#04070f)}
.jpx[data-skin=moon] .jt{flex:0 0 118px;aspect-ratio:1;min-height:0;border-radius:50%;background:radial-gradient(circle at 68% 30%,#f4f8ff,#a9bfdc 38%,#2b3b58 78%);color:#0b1426;box-shadow:0 0 26px #9db6d688;padding:4px}
.jpx[data-skin=moon] .jt .ja{text-shadow:none;color:#0b1426}.jpx[data-skin=moon] .jt .jn{color:#16233d}
.jpx[data-skin=moon] .jt.grand{flex-basis:150px;box-shadow:0 0 40px #cfe0ffcc}
/* playing cards */
.jpx[data-skin=card] .jt{flex:0 0 108px;min-height:0;aspect-ratio:5/7;background:#fbfbfb;color:#111;border-radius:9px;border:1px solid #bbb;transform:rotate(var(--r,0deg));box-shadow:0 8px 14px #000b}
.jpx[data-skin=card] .jt:nth-child(1){--r:-6deg}.jpx[data-skin=card] .jt:nth-child(2){--r:-2deg}.jpx[data-skin=card] .jt:nth-child(3){--r:2deg}.jpx[data-skin=card] .jt:nth-child(4){--r:6deg}
.jpx[data-skin=card] .jt .ji{font-size:34px}.jpx[data-skin=card] .jt .ja{text-shadow:none;color:#b3121c}.jpx[data-skin=card] .jt .jn{color:#222}
.jpx[data-skin=card] .jt.grand{flex-basis:124px}
/* fruit crates */
.jpx[data-skin=crate] .jt{background:repeating-linear-gradient(0deg,#b98040 0 11px,#8d5f27 11px 13px);border:5px solid #6b441a;border-radius:4px;box-shadow:0 6px 10px #000a}
.jpx[data-skin=crate] .jt .ja,.jpx[data-skin=crate] .jt .jn{text-shadow:0 2px 3px #000}
/* starbursts */
.jpx[data-skin=burst] .jt{flex:0 0 150px;aspect-ratio:1;min-height:0;clip-path:var(--star);background:radial-gradient(circle,#fff6,var(--c) 45%,var(--d));padding:18px}
.jpx[data-skin=burst] .jt.grand{flex-basis:176px}
/* crystals */
.jpx[data-skin=crystal] .jt{flex:0 0 150px;min-height:112px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(160deg,#ffffffee,var(--c) 28%,var(--d));padding:10px 18px}
.jpx[data-skin=crystal] .jt.grand{flex-basis:178px;min-height:130px}
/* fire */
.jpx[data-skin=flame]{background:linear-gradient(#150500,#060100)}
.jpx[data-skin=flame] .jt{border-radius:50% 50% 45% 45%/62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 100%,#ffd75e,#ff6a1c 42%,#7a1000 92%);animation:jflick 1.3s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.3s);min-height:100px;padding-top:16px}
/* flight path */
.jpx[data-skin=altitude] .jptiles{flex-direction:row-reverse;flex-wrap:nowrap;padding:18px 0 4px}
.jpx[data-skin=altitude] .jptiles::before{content:"";position:absolute;left:2%;right:2%;top:50%;border-top:2px dashed var(--c);opacity:.5}
.jpx[data-skin=altitude] .jptiles::after{content:var(--e);position:absolute;left:0;top:calc(50% - 15px);font-size:26px;animation:jfly 6.5s linear infinite;transform:rotate(90deg)}
.jpx[data-skin=altitude] .jt{flex:1 1 0;min-width:0;border-radius:999px;background:linear-gradient(#0e2358,#07102c);border:2px solid var(--c);min-height:86px;box-shadow:0 0 16px color-mix(in srgb,var(--c) 45%,transparent)}
@media(max-width:700px){.jpx[data-skin=altitude] .jptiles{flex-wrap:wrap}.jpx[data-skin=altitude] .jptiles::after,.jpx[data-skin=altitude] .jptiles::before{display:none}}
/* radar */
.jpx[data-skin=radar] .jt{flex:0 0 120px;aspect-ratio:1;min-height:0;border-radius:50%;background:repeating-radial-gradient(circle,#06180e 0 11px,#0d3a1c 11px 12px);border:2px solid var(--c);color:#d6ffe4;overflow:hidden;padding:4px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
.jpx[data-skin=radar] .jt::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 300deg,color-mix(in srgb,var(--c) 70%,transparent) 360deg);animation:jsweep 3s linear infinite;pointer-events:none}
.jpx[data-skin=radar] .jt.grand{flex-basis:146px}
/* gauges */
.jpx[data-skin=dial] .jt{flex:0 0 156px;min-height:88px;border-radius:120px 120px 10px 10px;background:radial-gradient(circle at 50% 100%,#10183a 30%,#0000 31%),conic-gradient(from 270deg at 50% 100%,var(--c) 0 calc(var(--i)*40deg + 40deg),#202a52 0 180deg,#0000 0);padding-top:22px;overflow:hidden;border:1px solid #ffffff22}
.jpx[data-skin=dial] .jt::after{content:"";position:absolute;bottom:0;left:50%;width:3px;height:48px;margin-left:-1px;background:#fff;transform-origin:bottom center;animation:jneedle 4s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s);box-shadow:0 0 8px #fff}
.jpx[data-skin=dial] .jt .ja{margin-top:auto}
/* buckets */
.jpx[data-skin=bucket] .jt{clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:linear-gradient(#32407a,#10163a);min-height:100px;padding:10px 16px 14px;overflow:hidden}
.jpx[data-skin=bucket] .jt::before{content:"";position:absolute;left:50%;top:-12px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);animation:jball 2.4s ease-in infinite;animation-delay:calc(var(--i)*-.6s)}
.jpx[data-skin=bucket] .jt.grand{background:linear-gradient(#caa536,#5a4408);color:#fff}
/* tickets */
.jpx[data-skin=ticket] .jt{background:linear-gradient(#ffeab0,#e6b445);color:#3a2000;border-radius:6px;min-height:92px;-webkit-mask:radial-gradient(circle at 0 50%,#0000 9px,#000 10px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 9px,#000 10px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 50%,#0000 9px,#000 10px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 9px,#000 10px) right/51% 100% no-repeat;padding:8px 18px}
.jpx[data-skin=ticket] .jt::before{content:"";position:absolute;inset:6px 12px;border:2px dashed #3a200055;border-radius:4px;pointer-events:none}
.jpx[data-skin=ticket] .jt .ja{text-shadow:none;color:#6a3a00}.jpx[data-skin=ticket] .jt .jn{color:#4a2800}

/* ===== lobby badge ===== */
.jpbadge{position:absolute;left:8px;bottom:42px;background:linear-gradient(#ffd75e,#e09a10);color:#2a1800;font-size:10px;font-weight:900;letter-spacing:1px;padding:3px 7px;border-radius:6px;box-shadow:0 2px 8px #000a;z-index:3}
.cursel{background:#0c1330;color:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 6px;font-weight:700;cursor:pointer}

/* ===== win scenes (one per game family) ===== */
.jpwin .jpico{font-size:54px;margin-top:6px}
.jps-row{display:flex;gap:8px;justify-content:center;margin:12px 0}
.jps-s{width:84px;height:100px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border:2px solid var(--c);border-radius:12px;animation:jslam .5s cubic-bezier(.2,1.6,.4,1) both;box-shadow:0 0 20px var(--c)}
@keyframes jslam{from{transform:translateY(-120px) scale(1.6);opacity:0}to{transform:none;opacity:1}}
.jps-sky{position:relative;height:120px;margin:8px auto;width:min(520px,90vw);overflow:hidden;border-radius:14px;background:linear-gradient(#050a24,#10205a)}
.jps-sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:jtw 1.2s infinite alternate}
@keyframes jtw{from{opacity:.2}to{opacity:1}}
.jps-ship{position:absolute;left:-40px;top:34px;font-size:46px;transform:rotate(90deg);animation:jship 2.6s ease-in-out infinite}
@keyframes jship{to{left:calc(100% + 10px)}}
.jps-wheel{position:relative;font-size:96px;margin:6px auto;animation:jsweep 3s cubic-bezier(.2,.8,.2,1) 1;filter:drop-shadow(0 0 20px var(--c))}
.jps-arrow{position:absolute;left:50%;top:-18px;font-size:26px;color:#fff;transform:translateX(-50%)}
.jps-rain{position:relative;height:130px;width:min(560px,92vw);margin:6px auto;overflow:hidden}
.jps-rain span{position:absolute;top:-30px;font-size:26px;animation:jdrop 1.6s ease-in infinite}
@keyframes jdrop{to{top:84px;opacity:.1}}
.jps-bucket{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:140px;height:44px;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:linear-gradient(#caa536,#6a4f08);display:flex;align-items:center;justify-content:center;font-size:26px}
.jps-ticket{width:min(300px,80vw);margin:8px auto;padding:16px;background:linear-gradient(#ffeab0,#e6b445);color:#3a2000;border-radius:10px;border:3px dashed #3a200066;display:flex;gap:14px;align-items:center;justify-content:center;animation:jslam .7s cubic-bezier(.2,1.5,.4,1) both}
.jps-ticket b{font-size:44px}.jps-ticket span{font-family:'Bebas Neue',Impact,sans-serif;font-size:34px;letter-spacing:4px}