/* Slot UI: one clean, consistent frame for every slot (Neon Reels, Lucky 7s, the four s2 slots, the three s3 slots).
   Loaded after all the slot stylesheets so it wins. Art and game colors stay; the chrome around them is unified. */
:root{
  --su-line:rgba(255,255,255,.07);--su-fill:rgba(255,255,255,.055);--su-fill2:rgba(255,255,255,.09);--su-mut:rgba(235,235,245,.55);
  --su-ic-spin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M19.6 3.6v4.6H15' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --su-ic-auto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2.5l3 3-3 3M4 11.5v-1a5 5 0 0 1 5-5h11M7 21.5l-3-3 3-3M20 12.5v1a5 5 0 0 1-5 5H4'/%3E%3C/svg%3E");
  --su-ic-stop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2.5' fill='%23000'/%3E%3C/svg%3E");
  --su-ic-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2.5 4.8 13.4h6.1l-1 8.1 8.4-10.9h-6.1z' fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --su-ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  --su-ic-max:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l6-6 6 6M6 18l6-6 6 6'/%3E%3C/svg%3E");
  --su-ic-buy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2-6.2-2.3 6.2-2.3z' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- the game panel ---------- */
.pg .nr,.pg .s2,.pg .s3,.pg .cl-machine{border-radius:24px;padding:14px 12px 12px;border:1px solid var(--su-line);box-shadow:0 18px 40px -28px #000}
.pg .nr{background:linear-gradient(180deg,#15122b,#0d0b1a 60%,#0a0912)}
.pg .s2:before,.pg .s3:before{content:none}

/* title row: game name left, details right. No glows, no outlined type. */
.nr-top,.s2-top,.s3-head,.cl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin:0 2px 12px!important;padding:0!important}
.nr-logo,.s2-logo,.s3-logo,.cl-top b{font:650 17px/1.1 -apple-system,"SF Pro Display",Inter,system-ui,sans-serif!important;letter-spacing:-.2px!important;color:#fff!important;text-shadow:none!important;filter:none!important;background:none!important;-webkit-text-fill-color:#fff!important;text-transform:none!important;white-space:nowrap}
.s2-tag,.s3-tag,.cl-top span{padding:0!important;background:none!important;box-shadow:none!important;font:600 11px/1 -apple-system,system-ui!important;letter-spacing:.4px!important;color:var(--su-mut)!important;text-transform:uppercase}

/* jackpots: one quiet strip instead of four boxes */
.nr-jp,.s3-jp{display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:0!important;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--su-line);overflow:hidden}
.nr-jp span,.s3-jp span{min-width:0!important;padding:5px 9px!important;border-radius:0!important;background:none!important;box-shadow:none!important;display:flex;flex-direction:column;align-items:flex-start!important;gap:1px}
.nr-jp span+span,.s3-jp span+span{border-left:1px solid var(--su-line)}
.nr-jp i,.s3-jp i{font:600 8.5px/1 -apple-system,system-ui!important;letter-spacing:.5px!important;color:var(--su-mut)!important}
.nr-jp b,.s3-jp b{font:650 12.5px/1.2 -apple-system,system-ui!important;font-variant-numeric:tabular-nums;color:#fff}
.j-GRAND b,.s3-jp .jp-grand b{color:#ffd66b!important}

/* reel window */
.nr-glass,.s2-glass,.s3-glass,.cl-glass{border-radius:16px!important;padding:4px!important;background:rgba(0,0,0,.4)!important;border:1px solid var(--su-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important}
.s3-dust .s3-glass{background:rgba(40,20,6,.55)!important}
.nr-reels,.s2-reels,.s3-reels{gap:3px!important}
.nr-reel,.s2-reel,.s3-reel{border-radius:12px!important;box-shadow:none!important}
.nr-reel{background:linear-gradient(180deg,#120f24,#191533 50%,#120f24)!important}
.s3-dust .s3-reel{background:linear-gradient(180deg,#f1dcb2,#e6c891)!important}
.cv,.s2-grid{border-radius:12px!important}

/* banner above the reels */
.nr-banner,.s2-ban,.s3-ban{margin:0 0 10px!important;padding:9px 12px!important;border-radius:12px!important;background:rgba(0,0,0,.32)!important;border:1px solid var(--su-line);box-shadow:none!important;font:500 13px/1.2 -apple-system,system-ui!important}
.nr-banner b,.s2-ban b,.s3-ban b{font-weight:650!important;letter-spacing:0!important}

/* status line under the reels */
.nr-info,.s3-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 2px!important;font:500 13px/1.3 -apple-system,system-ui!important;color:var(--su-mut)!important}
.nr-info>b{display:flex;align-items:baseline;gap:6px;font:600 10.5px/1 -apple-system,system-ui!important;letter-spacing:.6px!important;color:var(--su-mut)!important}
.nr-info>b i{margin:0!important;font:700 18px/1 -apple-system,"SF Pro Display",system-ui!important;color:#fff!important;letter-spacing:-.2px}
.nr-info span b{color:#ffd66b!important;font-weight:650}

/* potion meters (Neon Reels): slim row instead of three tall boxes */
.nr-brew{gap:6px!important;margin:0 0 10px!important}
.bt{flex-direction:row!important;justify-content:center;gap:6px!important;height:42px;padding:0 8px!important;border-radius:12px!important;background:rgba(0,0,0,.28)!important;border:1px solid var(--su-line);box-shadow:none!important}
.bt .bb{height:30px!important;filter:none!important}
.bt b{font:600 12px/1 -apple-system,system-ui!important;color:var(--su-mut)!important}
.bt.full{border-color:var(--bc)!important}.bt.full b{color:var(--bc)!important}

/* ---------- controls ---------- */
.pg .sl-ctrl{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:12px 0 0!important;padding:12px!important;border-radius:22px!important;background:rgba(255,255,255,.035)!important;border:1px solid var(--su-line)}
/* bet stepper */
.pg .sl-bet{justify-self:start;display:flex;align-items:center;gap:0;padding:3px;border-radius:14px;background:var(--su-fill)}
.pg .sl-bet button{width:34px!important;height:38px!important;border-radius:11px!important;background:none!important;font:500 20px/1 -apple-system,system-ui!important;color:#fff}
.pg .sl-bet button:active{background:var(--su-fill2)!important}
.pg .sl-bet button:disabled{opacity:.3}
.pg .sl-bet div{min-width:50px!important;text-align:center}
.pg .sl-bet small{display:block;font:600 9.5px/1 -apple-system,system-ui!important;letter-spacing:.5px!important;color:var(--su-mut)!important;margin-bottom:3px}
.pg .sl-bet b{font:700 16px/1 -apple-system,"SF Pro Display",system-ui!important;font-variant-numeric:tabular-nums}
/* spin: white disc, icon on top, small state label below */
.pg .sl-spin{position:relative;width:74px!important;height:74px!important;border-radius:50%!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;background:#fff!important;color:#0b0b10!important;box-shadow:0 0 0 5px rgba(255,255,255,.07),0 10px 24px -10px rgba(0,0,0,.9)!important;text-shadow:none!important;transition:transform .12s,background .2s}
.pg .sl-spin:before{content:"";width:28px;height:28px;background:currentColor;-webkit-mask:var(--su-ic-spin) center/contain no-repeat;mask:var(--su-ic-spin) center/contain no-repeat}
.pg .sl-spin span{font:700 9.5px/1 -apple-system,system-ui!important;letter-spacing:.7px;text-transform:uppercase}
.pg .sl-spin:active{transform:scale(.94)}
.pg .sl-spin.auto{background:#ff453a!important;color:#fff!important;box-shadow:0 0 0 5px rgba(255,69,58,.18),0 10px 24px -10px rgba(255,69,58,.6)!important}
.pg .sl-spin.auto:before{-webkit-mask-image:var(--su-ic-stop);mask-image:var(--su-ic-stop);width:22px;height:22px}
.pg .sl-spin.respin{background:#ffd66b!important;color:#1a1300!important}
/* auto + turbo: two square icon buttons with a label */
.pg .sl-side{justify-self:end;display:flex!important;flex-direction:row!important;gap:6px!important}
.pg .sl-auto,.pg .sl-tb{width:50px;height:50px!important;padding:0!important;border-radius:14px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--su-fill)!important;color:#fff!important;font:600 9.5px/1 -apple-system,system-ui!important;letter-spacing:.2px}
.pg .sl-auto:before,.pg .sl-tb:before{content:"";width:19px;height:19px;background:currentColor;-webkit-mask:var(--su-ic-auto) center/contain no-repeat;mask:var(--su-ic-auto) center/contain no-repeat}
.pg .sl-tb:before{-webkit-mask-image:var(--su-ic-bolt);mask-image:var(--su-ic-bolt)}
.pg .sl-tb.on{background:rgba(255,214,107,.16)!important;color:#ffd66b!important}
.pg .sl-auto:active,.pg .sl-tb:active{background:var(--su-fill2)!important}

/* secondary actions: one tidy row */
.pg .nr-links{display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px!important;margin:8px 0 0!important}
.pg .nr-links button{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 10px!important;border-radius:12px!important;background:rgba(255,255,255,.035)!important;border:1px solid var(--su-line);color:rgba(255,255,255,.85)!important;font:600 13px/1 -apple-system,system-ui!important;box-shadow:none!important}
.pg .nr-links button:before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--su-ic-info) center/contain no-repeat;mask:var(--su-ic-info) center/contain no-repeat;opacity:.85}
.pg .nr-links button[id$="max"]:before{-webkit-mask-image:var(--su-ic-max);mask-image:var(--su-ic-max)}
.pg .nr-links button.buy{color:#ffd66b!important;background:rgba(255,214,107,.08)!important;border-color:rgba(255,214,107,.22)}
.pg .nr-links button.buy:before{-webkit-mask-image:var(--su-ic-buy);mask-image:var(--su-ic-buy)}
.pg .nr-links button:active{background:var(--su-fill2)!important}
.pg .nr-links button:disabled{opacity:.4}
.pg .sl-automenu{border-radius:16px!important;background:rgba(255,255,255,.035)!important;border:1px solid var(--su-line)}
.pg .sl-automenu button{border-radius:10px!important;background:var(--su-fill)!important;font:600 14px/1 -apple-system,system-ui!important}

/* overlays: system type, no outlined/glowing lettering */
.s2-over b,.s3-over b{font-family:-apple-system,"SF Pro Display",system-ui!important;font-weight:800!important;letter-spacing:-.4px!important;text-shadow:none!important}
.s2-over small,.s3-over small{letter-spacing:1px!important}

/* Lucky 7s: keep the lever, tidy the cabinet */
.pg .cl-machine{background:linear-gradient(180deg,#191922,#111118)!important}
.cl-win{border-radius:12px!important;border:1px solid var(--su-line);background:rgba(0,0,0,.35)!important;box-shadow:none!important}
.cl-win b{font:700 20px/1 -apple-system,"SF Pro Display",system-ui!important;font-variant-numeric:tabular-nums}
.cl-msg{font:500 13px/1.3 -apple-system,system-ui!important;color:var(--su-mut)!important}

@media(max-width:360px){.pg .sl-auto,.pg .sl-tb{width:44px}.pg .sl-bet div{min-width:42px!important}.pg .sl-spin{width:68px!important;height:68px!important}}
.pg .cl-machine{padding-right:48px}
/* Dust Devil: warm but calm */
.pg .s3-dust{background:radial-gradient(120% 60% at 50% 0%,#7a3a12,#3a1c0a 55%,#1f0f05)!important}
.s3-dust .s3-sun{display:none}
.pg .sl-automenu button{display:flex;align-items:center;justify-content:center}
