/* Jackpot Master — lobby + 4 slot games. Portrait stage of 700 logical units wide (u). */
:root {
  --gold: #ffd54a; --gold2: #fff3b0; --accent: #ffb02e; --frame: #3b1650;
  --vh: 100dvh;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
@supports not (height: 100dvh) { :root { --vh: 100vh; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0517; color: #fff; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
img { -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

.screen { position: fixed; inset: 0; }

/* ---------- login ---------- */
.login { display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: calc(env(safe-area-inset-top) + 8vh) 24px calc(env(safe-area-inset-bottom) + 7vh);
  background: radial-gradient(120% 80% at 50% 30%, #6a2bb8 0%, #2a0c55 45%, #0b0517 80%); }
.login::before { content: ""; position: absolute; inset: 0; background: url('https://momopot-cdn.xnebul.com/lobby/node/JmsBushyOutlaw.webp') 12% 70% / 34vmin no-repeat, url('https://momopot-cdn.xnebul.com/lobby/node/JmsScarletSuccubus.webp') 88% 72% / 34vmin no-repeat, url('https://momopot-cdn.xnebul.com/lobby/node/JmsFangsBeneathLace.webp') 18% 42% / 26vmin no-repeat, url('https://momopot-cdn.xnebul.com/lobby/node/JmsWhiteProwlers.webp') 84% 40% / 26vmin no-repeat; opacity: .55; filter: blur(.5px); }
.login > * { position: relative; }
.login-logo { width: min(86vw, 560px); align-self: center; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); animation: bob 3s ease-in-out infinite; }
.login-actions { display: grid; justify-items: center; gap: 14px; }
.img-btn img { display: block; width: min(64vw, 300px); transition: transform .12s; }
.img-btn:active img { transform: scale(.95); }
.login-note { margin: 0; font-size: 12px; color: #d8c6ff; opacity: .8; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- loading ---------- */
.loading { background: #0b0517; display: grid; }
.loading-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); }
.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,0,15,.9)); }
.loading-bottom { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 6vh); z-index: 1; display: grid; justify-items: center; gap: 12px; }
.loading-title { width: min(72vw, 420px); }
.bar { width: min(78vw, 440px); height: 18px; border-radius: 99px; background: #26103f; border: 2px solid #d6a23a; overflow: hidden; box-shadow: 0 0 12px rgba(0,0,0,.6) inset; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #ffe06a, #f39a12); transition: width .25s; }
#loading-text { margin: 0; font-size: 13px; color: #f0e2ff; }

/* ---------- lobby ---------- */
.lobby { display: grid; grid-template-rows: auto 1fr; background: radial-gradient(100% 60% at 50% 0%, #4b1d8c, #160733 55%, #0b0517); }
.lobby-top { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 12px 10px; background: linear-gradient(180deg, #2c0f57, #1a0838); border-bottom: 2px solid #b17bff44; box-shadow: 0 4px 18px rgba(0,0,0,.5); z-index: 2; }
.profile-chip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 35% 30%, #ffe08a, #e08a00); border: 2px solid #fff3; flex: none; }
.profile-chip b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.lv { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #ffe27a; }
.lv i, .g-level i { display: block; width: 64px; height: 7px; border-radius: 9px; background: #0006; overflow: hidden; }
.lv i b, .g-level i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6cf, #3ef); transition: width .4s; }
.coin-chip { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 4px; border-radius: 99px; background: #0007; border: 2px solid #e2a83c; flex: 1; max-width: 220px; margin-left: auto; }
.coin-ico { width: 28px; height: 28px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff6b5, #ffc21a 45%, #b36a00); box-shadow: inset 0 0 0 3px #e08d00; }
.coin-chip strong { font-size: 17px; color: var(--gold2); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #6b3500; letter-spacing: .02em; }
.coin-chip.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.08); } }
.daily-btn { height: 40px; padding: 0 10px; border-radius: 12px; display: flex; align-items: center; gap: 4px; background: linear-gradient(180deg, #4ed14b, #1c7a1a); border: 2px solid #c8ff8a; font-size: 18px; }
.daily-btn span { font-size: 11px; font-weight: 800; }
.daily-btn:not(:disabled) { animation: glow 1.6s infinite; }
.daily-btn:disabled { filter: grayscale(.9); animation: none; }
@keyframes glow { 50% { box-shadow: 0 0 16px #b9ff7a; } }
.round-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: linear-gradient(180deg, #6b3cc4, #3a1878); border: 2px solid #c9a6ff; box-shadow: 0 3px 0 #1a0838; }
.round-btn:active { transform: translateY(2px); box-shadow: none; }

.lobby-main { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px calc(env(safe-area-inset-bottom) + 20px); }
.featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 1100px; margin: 0 auto 14px; }
.lobby-tabs { position: sticky; top: -12px; z-index: 1; display: flex; gap: 8px; align-items: center; max-width: 1100px; margin: 0 auto 12px; padding: 8px 0; background: linear-gradient(180deg, #170735 70%, transparent); }
.tab { padding: 7px 14px; border-radius: 99px; background: #ffffff14; border: 1px solid #ffffff22; font-size: 13px; white-space: nowrap; }
.tab.active { background: linear-gradient(180deg, #ffcf4a, #e98a00); color: #3a1600; font-weight: 800; border-color: #fff6; }
#lobby-search { flex: 1; min-width: 80px; height: 34px; border-radius: 99px; border: 1px solid #ffffff33; background: #0006; color: #fff; padding: 0 14px; font: inherit; font-size: 13px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30vw, 150px), 1fr)); gap: 10px; max-width: 1100px; margin: 0 auto; }
.card { position: relative; aspect-ratio: 3 / 3.6; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3b1a6e, #1a0a35); display: grid; place-items: center; isolation: isolate; content-visibility: auto; contain-intrinsic-size: 150px 180px; }
.card img { width: 96%; height: 96%; object-fit: contain; transition: transform .25s; }
.card.icon img { object-fit: cover; width: 100%; height: 100%; }
.card:hover img { transform: scale(1.04); }
.card .name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 6px; font-size: 11px; font-weight: 700; text-align: center; background: linear-gradient(transparent, #000c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.soon img { filter: saturate(.75) brightness(.8); }
.card.soon::after { content: "COMING SOON"; position: absolute; top: 8px; right: -30px; rotate: 35deg; padding: 2px 30px; font-size: 9px; font-weight: 900; letter-spacing: .05em; background: #000a; color: #ffd66b; }
.card.play { outline: 3px solid #ffd54a; box-shadow: 0 0 18px #ffb02e88; }
.card.play::after { content: "PLAY"; position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 900; background: linear-gradient(180deg, #5df05a, #1d8f1b); color: #fff; box-shadow: 0 2px 6px #0008; }
.featured .card { aspect-ratio: 3 / 3.8; }
.featured .card .name { font-size: 12px; }
.card.big canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 520px) { .featured { grid-template-columns: repeat(2, 1fr); } }

/* ---------- game stage ---------- */
.game { display: grid; place-items: center; background: #050208; }
.game::before { content: ""; position: absolute; inset: -40px; background: var(--bg) center / cover no-repeat; filter: blur(22px) brightness(.4); }
.stage { --s: min(100vw, calc(var(--vh) * 0.62)); --u: calc(var(--s) / 700); position: relative; width: var(--s); height: var(--vh); overflow: hidden; background: #000 var(--bg) center 30% / cover no-repeat; box-shadow: 0 0 60px #000; font-size: calc(var(--u) * 22); transition: background-image .4s; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 18%, transparent 62%, rgba(0,0,0,.85)); z-index: 0; }
.stage > * { position: absolute; z-index: 1; }
.g-top { top: calc(env(safe-area-inset-top) + var(--u) * 12); left: calc(var(--u) * 14); right: calc(var(--u) * 14); display: flex; align-items: center; gap: calc(var(--u) * 10); z-index: 6; }
.g-top .round-btn { width: calc(var(--u) * 58); height: calc(var(--u) * 58); font-size: calc(var(--u) * 28); }
.g-top .coin-chip { height: calc(var(--u) * 54); max-width: calc(var(--u) * 260); margin-left: 0; }
.g-top .coin-chip strong { font-size: calc(var(--u) * 26); }
.g-top .coin-ico { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.g-level { margin-left: auto; display: grid; gap: 3px; font-size: calc(var(--u) * 18); color: #ffe27a; font-weight: 800; }
.g-level i { width: calc(var(--u) * 100); }
.g-logo { top: calc(env(safe-area-inset-top) + var(--u) * 82); left: 50%; translate: -50% 0; width: calc(var(--u) * 300); max-height: calc(var(--u) * 140); object-fit: contain; filter: drop-shadow(0 6px 10px #000a); animation: bob 3.2s ease-in-out infinite; }
.g-jackpots { top: calc(env(safe-area-inset-top) + var(--u) * 222); left: calc(var(--u) * 22); right: calc(var(--u) * 22); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8); }
.jp { position: relative; height: calc(var(--u) * 74); border-radius: calc(var(--u) * 14); display: grid; justify-items: center; align-content: center; gap: 2px; background: linear-gradient(180deg, #0009, #000c); border: calc(var(--u) * 3) solid var(--c, #ffd54a); box-shadow: 0 0 calc(var(--u) * 14) var(--c, #ffd54a) inset, 0 calc(var(--u) * 3) 0 #0009; }
.jp img { height: calc(var(--u) * 30); max-width: 92%; object-fit: contain; }
.jp strong { font-size: calc(var(--u) * 22); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000; }
.jp-grand { --c: #ff4a3a; } .jp-major { --c: #d34bff; } .jp-minor { --c: #3aa0ff; } .jp-mini { --c: #4ade4a; }
.jp.hit { animation: jpHit .2s 12 alternate; }
@keyframes jpHit { to { filter: brightness(2); transform: scale(1.06); } }
.g-meter { top: calc(env(safe-area-inset-top) + var(--u) * 304); left: calc(var(--u) * 40); right: calc(var(--u) * 40); height: calc(var(--u) * 40); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 18); font-weight: 800; color: #ffe9a6; text-shadow: 0 2px 0 #000; }
.g-meter:empty { display: none; }
.trail { flex: 1; height: calc(var(--u) * 22); border-radius: 99px; background: #0009; border: 2px solid #e2a83c; overflow: hidden; position: relative; }
.trail b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffb02e, #ffe86a); transition: width .5s; }
.trail-pips { display: flex; gap: 4px; }
.trail-pips span { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: #0008; border: 2px solid #e2a83c; }
.trail-pips span.on { background: radial-gradient(#fff6b5, #ff9a00); box-shadow: 0 0 8px #ffb02e; }
.mult-row { display: flex; gap: calc(var(--u) * 8); }
.mult-row span { min-width: calc(var(--u) * 56); text-align: center; padding: 2px 6px; border-radius: 8px; background: #6a1aa0; border: 2px solid #ff9cf0; }

.g-board-area { top: calc(env(safe-area-inset-top) + var(--u) * 350); left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(env(safe-area-inset-bottom) + var(--u) * 230); display: grid; place-items: center; }
.board-frame { position: relative; display: grid; gap: calc(var(--u) * 10); justify-content: center; align-content: center; width: 100%; height: 100%; }
.stage.tall .g-logo { width: calc(var(--u) * 360); max-height: calc(var(--u) * 170); }
.board { --cw: 120px; --ch: 100px; position: relative; display: grid; grid-template-columns: repeat(5, var(--cw)); gap: 0 calc(var(--cw) * .04); padding: calc(var(--cw) * .08); border-radius: calc(var(--cw) * .16); background: linear-gradient(180deg, color-mix(in srgb, var(--frame) 70%, #000c), #000d); border: calc(var(--cw) * .045) solid var(--accent); box-shadow: 0 0 calc(var(--cw) * .3) color-mix(in srgb, var(--accent) 60%, transparent), inset 0 0 calc(var(--cw) * .3) #000; }
.reel { position: relative; width: var(--cw); height: calc(var(--ch) * var(--rows)); overflow: hidden; border-radius: calc(var(--cw) * .06); background: linear-gradient(90deg, #ffffff06, #ffffff10, #ffffff06); }
.strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.sym { position: relative; width: var(--cw); height: var(--ch); display: grid; place-items: center; }
.sym img { width: 94%; height: 94%; object-fit: contain; pointer-events: none; }
.sym.blur img { filter: blur(1.5px) brightness(1.1); }
.sym .val, .hold .val { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font-weight: 900; font-size: calc(var(--cw) * .17); color: #fff; text-shadow: 0 0 4px #000, 0 2px 0 #000; pointer-events: none; }
.sym .val.jp, .hold .val.jp { color: #ffe36a; font-size: calc(var(--cw) * .15); }
.sym .tag { position: absolute; top: 6%; right: 6%; padding: 0 5px; border-radius: 6px; font-size: calc(var(--cw) * .13); font-weight: 900; background: #d21; color: #fff; box-shadow: 0 1px 3px #000; }
.sym.win { z-index: 2; animation: symWin .5s ease-in-out infinite alternate; }
.sym.win::before { content: ""; position: absolute; inset: 3%; border-radius: 12%; border: calc(var(--cw) * .035) solid var(--line, #ffe14a); box-shadow: 0 0 12px var(--line, #ffe14a), inset 0 0 12px var(--line, #ffe14a); }
.sym.dim { opacity: .38; filter: grayscale(.4); transition: opacity .2s; }
.sym.land { animation: land .32s ease-out; }
.sym.pop { animation: pop .5s ease-out; }
@keyframes symWin { to { transform: scale(1.08); } }
@keyframes land { 0% { transform: translateY(-8%); } 60% { transform: translateY(4%); } 100% { transform: none; } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.lines-svg { position: absolute; inset: calc(var(--cw) * .08); pointer-events: none; overflow: visible; z-index: 3; }
.lines-svg polyline { fill: none; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px #000); }
.board.small { gap: 0 calc(var(--cw) * .03); }

/* respin / hold grid */
.hold { display: grid; grid-template-columns: repeat(5, var(--cw)); grid-auto-rows: var(--ch); gap: calc(var(--cw) * .04); }
.hold .cell { position: relative; border-radius: calc(var(--cw) * .1); background: radial-gradient(circle, #ffffff12, #0007); border: 1px solid #ffffff1c; display: grid; place-items: center; overflow: hidden; }
.hold .cell img { width: 92%; height: 92%; object-fit: contain; }
.hold .val { bottom: auto; top: 50%; translate: 0 -50%; font-size: calc(var(--cw) * .2); }
.hold .val.jp { font-size: calc(var(--cw) * .17); }
.hold .cell.spin::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 10%, #ffffff10 10% 20%); animation: scroll .25s linear infinite; }
.hold .cell.hl { box-shadow: 0 0 0 3px #ffe14a inset, 0 0 16px #ffe14a; }
.hold .cell.row-mult { box-shadow: 0 0 0 3px #ff6af0 inset; }
@keyframes scroll { to { background-position: 0 calc(var(--ch)); } }
.spins-left { position: absolute; top: calc(var(--cw) * -0.5); left: 50%; translate: -50% 0; padding: 4px 18px; border-radius: 99px; background: #000c; border: 2px solid var(--accent); font-weight: 900; font-size: calc(var(--cw) * .2); white-space: nowrap; z-index: 4; }
.spins-left b { color: #ffe14a; font-size: 1.3em; }

.g-banner { left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--u) * 168); translate: -50% 0; min-width: calc(var(--u) * 360); max-width: calc(var(--u) * 640); padding: calc(var(--u) * 6) calc(var(--u) * 22); border-radius: 99px; text-align: center; font-size: calc(var(--u) * 20); font-weight: 800; background: #000b; border: 2px solid #ffffff2a; color: #ffeec0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-banner.tip { white-space: normal; font-size: calc(var(--u) * 16); font-weight: 600; line-height: 1.35; border-radius: calc(var(--u) * 18); max-width: calc(var(--u) * 600); }
.g-banner.win { color: #fff; background: linear-gradient(90deg, #6b1a00cc, #c25a00ee, #6b1a00cc); border-color: #ffd54a; }

.g-controls { left: calc(var(--u) * 18); right: calc(var(--u) * 18); bottom: calc(env(safe-area-inset-bottom) + var(--u) * 24); height: calc(var(--u) * 132); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 14); z-index: 5; }
.bet-box, .win-box { height: calc(var(--u) * 92); border-radius: calc(var(--u) * 20); background: linear-gradient(180deg, #1c0b33ee, #0b0418ee); border: calc(var(--u) * 3) solid #8c5ad6; display: flex; align-items: center; justify-content: center; text-align: center; }
.bet-box > div, .win-box { display: grid; flex: 1; }
.bet-box small, .win-box small { font-size: calc(var(--u) * 15); color: #c9b2ff; font-weight: 700; letter-spacing: .08em; }
.bet-box strong, .win-box strong { font-size: calc(var(--u) * 30); color: var(--gold2); font-variant-numeric: tabular-nums; }
.bet-box button { width: calc(var(--u) * 56); height: 100%; font-size: calc(var(--u) * 40); font-weight: 900; color: #ffd54a; }
.win-box strong.pulse { animation: bump .4s; color: #fff; }
.spin-btn { width: calc(var(--u) * 152); height: calc(var(--u) * 152); border-radius: 50%; display: grid; place-content: center; background: radial-gradient(circle at 50% 35%, #8dff6a, #27b51f 55%, #0d6a0a); border: calc(var(--u) * 6) solid #e8ffb5; box-shadow: 0 calc(var(--u) * 7) 0 #0a4207, 0 0 calc(var(--u) * 26) #6aff4a99; font-weight: 900; text-shadow: 0 3px 0 #0a4a07; transition: transform .08s; touch-action: manipulation; }
.spin-btn span { font-size: calc(var(--u) * 40); letter-spacing: .04em; }
.spin-btn small { font-size: calc(var(--u) * 14); opacity: .85; }
.spin-btn:active:not(:disabled) { transform: translateY(calc(var(--u) * 5)); box-shadow: 0 calc(var(--u) * 2) 0 #0a4207; }
.spin-btn.auto { background: radial-gradient(circle at 50% 35%, #ffd36a, #ff8a00 55%, #a14a00); border-color: #ffe7b0; box-shadow: 0 calc(var(--u) * 7) 0 #6a2a00, 0 0 calc(var(--u) * 26) #ffb02e; }
.spin-btn:disabled { filter: grayscale(.4) brightness(.8); opacity: 1; }
.auto-btn { right: calc(var(--u) * 26); bottom: calc(env(safe-area-inset-bottom) + var(--u) * 166); padding: calc(var(--u) * 6) calc(var(--u) * 16); border-radius: 99px; font-size: calc(var(--u) * 16); font-weight: 900; background: #000a; border: 2px solid #ffffff3a; z-index: 5; }
.auto-btn.on { background: #ff8a00; border-color: #ffe7b0; }

/* overlays (big win, feature intro/summary, jackpot, wheel, pick) */
.overlay { inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle, #000a, #000e); animation: fade .3s; }
.overlay .panel { display: grid; justify-items: center; gap: calc(var(--u) * 16); text-align: center; padding: calc(var(--u) * 30); }
.overlay h2 { margin: 0; font-size: calc(var(--u) * 64); line-height: 1; font-weight: 900; letter-spacing: .03em; background: linear-gradient(180deg, #fff7c2, #ffcc33 50%, #e07a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6b2a00) drop-shadow(0 0 20px #ffb02e99); animation: pop .6s; }
.overlay h3 { margin: 0; font-size: calc(var(--u) * 28); color: #ffe7b5; }
.overlay .amount { font-size: calc(var(--u) * 72); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 #8a3c00, 0 0 24px #ffcc33; }
.overlay .title-img { max-width: calc(var(--u) * 480); max-height: calc(var(--u) * 200); object-fit: contain; animation: pop .6s; }
.overlay .tap { font-size: calc(var(--u) * 18); color: #ffffffb0; }
.overlay .btn { padding: calc(var(--u) * 14) calc(var(--u) * 44); border-radius: 99px; font-size: calc(var(--u) * 26); font-weight: 900; background: linear-gradient(180deg, #8dff6a, #1f9a18); border: 3px solid #e8ffb5; box-shadow: 0 5px 0 #0a4207; text-shadow: 0 2px 0 #0a4a07; }
.coins-rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.coins-rain i { position: absolute; top: -10%; width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b5, #ffc21a 45%, #b36a00); box-shadow: inset 0 0 0 3px #e08d00; animation: rain linear forwards; }
@keyframes rain { to { transform: translateY(120vh) rotate(720deg); } }
@keyframes fade { from { opacity: 0; } }
.wheel { position: relative; width: calc(var(--u) * 520); height: calc(var(--u) * 520); }
.wheel-disc { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * 12) solid #ffcc33; box-shadow: 0 0 40px #ff9a00, inset 0 0 30px #000; transition: transform 4.2s cubic-bezier(.17,.67,.12,1); overflow: hidden; }
.wheel-disc span { position: absolute; left: 50%; top: 50%; width: 50%; height: calc(var(--u) * 46); transform-origin: 0 50%; display: flex; align-items: center; justify-content: flex-end; padding-right: calc(var(--u) * 24); font-weight: 900; font-size: calc(var(--u) * 22); color: #fff; text-shadow: 0 2px 0 #000; }
.wheel-pointer { position: absolute; top: calc(var(--u) * -26); left: 50%; translate: -50% 0; width: calc(var(--u) * 70); z-index: 2; filter: drop-shadow(0 4px 4px #000); }
.picks { display: flex; gap: calc(var(--u) * 20); }
.pick { width: calc(var(--u) * 150); height: calc(var(--u) * 150); border-radius: 20px; display: grid; place-items: center; font-size: calc(var(--u) * 40); font-weight: 900; background: center / 90% no-repeat var(--img), radial-gradient(#5a2a9a, #200a40); border: 3px solid #ffcc33; transition: transform .3s; }
.pick.open { transform: rotateY(360deg); background: radial-gradient(#ffcc33, #a05a00); color: #fff; text-shadow: 0 3px 0 #000; }

/* dialogs */
.sheet { width: min(96vw, 720px); max-height: 90dvh; padding: 0; border: 2px solid #b48aff; border-radius: 20px; background: linear-gradient(180deg, #2b1052, #12062a); color: #fff; box-shadow: 0 20px 60px #000; overflow: hidden; }
.sheet::backdrop { background: #000b; }
.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #ffffff1f; }
.sheet h2 { margin: 0; font-size: 18px; }
.pt-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; max-height: calc(90dvh - 120px); }
.pt-track figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; padding: 12px; background: #000; }
.pt-track img { max-width: 100%; max-height: calc(90dvh - 150px); object-fit: contain; }
.pt-track .rules { padding: 16px 20px; font-size: 14px; line-height: 1.7; align-self: start; background: transparent; place-items: start; }
.sheet footer { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 10px; border-top: 1px solid #ffffff1f; }
.sheet footer button { width: 40px; height: 36px; border-radius: 10px; background: #ffffff1a; font-size: 22px; }
.menu-body { padding: 14px 18px 20px; display: grid; gap: 12px; overflow-y: auto; max-height: calc(90dvh - 70px); }
.toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.toggle input { width: 20px; height: 20px; accent-color: #ffb02e; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { padding: 8px; border-radius: 12px; background: #ffffff10; text-align: center; font-size: 11px; color: #cdb8ff; }
.stats b { display: block; font-size: 15px; color: #fff; }
.menu-body h3 { margin: 4px 0 0; font-size: 14px; color: #cdb8ff; }
.history { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; max-height: 180px; overflow-y: auto; }
.history li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: #ffffff0c; }
.history .w { color: #8dff6a; }
.rules-note { margin: 0; font-size: 12px; color: #bfa9ef; line-height: 1.6; }
.wide-btn { height: 42px; border-radius: 12px; background: linear-gradient(180deg, #6b3cc4, #3a1878); border: 2px solid #c9a6ff; font-weight: 800; }
.wide-btn.danger { background: linear-gradient(180deg, #b0283a, #6a0f1c); border-color: #ff9aa8; }

.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 70px); translate: -50% -20px; z-index: 50; padding: 10px 18px; border-radius: 12px; background: #000d; border: 1px solid #ffd54a77; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; translate: -50% 0; }
.offline-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 6px calc(env(safe-area-inset-bottom) + 6px); text-align: center; font-size: 12px; background: #a01a2a; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- original game stage (Cocos 768x1370 design scaled by --k) ---------- */
.o-stage { --k: .5; width: calc(768px * var(--k)); height: calc(1370px * var(--k)); --s: calc(768px * var(--k)); --u: calc(var(--s) / 700); background: #000 var(--obg, none) center / cover no-repeat; }
.o-stage::after { display: none; }
.o-design { position: absolute; left: 0; top: 0; width: 768px; height: 1370px; transform: scale(var(--k)); transform-origin: 0 0; z-index: 1 !important; overflow: hidden; font-size: 22px; }
.o-design .board-frame { position: absolute; inset: 0; display: block; width: auto; height: auto; z-index: 3; pointer-events: none; }
.o-bg, .o-scene, .o-bottom { position: absolute; left: 0; top: 0; }
.o-bg { z-index: 0; } .o-scene { z-index: 2; } .o-bottom { z-index: 5; }
.cn { position: absolute; box-sizing: border-box; }
.cn-text { color: #fff; font-weight: 800; white-space: nowrap; display: flex; align-items: center; justify-content: center; font-family: "Arial Black", "Arial Rounded MT Bold", system-ui, sans-serif; line-height: 1; }
.cn-bm { overflow: visible; }
.bm-line { position: absolute; left: 50%; display: flex; white-space: nowrap; transform-origin: 50% 50%; }
.bm-line i { position: relative; display: block; flex: none; }
.bm-line b { position: absolute; background-image: var(--page); background-repeat: no-repeat; }
.cn-btn { cursor: pointer; touch-action: manipulation; transition: filter .1s; }
.cn-btn:active { background-image: var(--pressed) !important; }
.cn-btn.disabled { background-image: var(--disabled) !important; pointer-events: none; }
.cn-bm.hit { animation: jpHit .2s 12 alternate; }
/* reels placed on the original sp_reel rectangles */
.o-board { position: absolute; pointer-events: none; }
.o-reel { position: absolute; top: 0; overflow: hidden; }
.o-board .strip { position: absolute; left: 0; top: 0; width: 100%; }
.o-board .sym { width: var(--cw); height: var(--ch); }
.o-board .sym img { width: 96%; height: 96%; }
.o-board .lines-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; }
.o-board .lines-svg polyline { stroke-width: 7; }
.o-hold { position: absolute; }
.o-hold .cell { position: absolute; border-radius: 12px; background: radial-gradient(circle, #ffffff10, #0006); display: grid; place-items: center; overflow: hidden; }
.o-hold .cell img { width: 92%; height: 92%; object-fit: contain; }
.o-hold .val { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; font-weight: 900; font-size: calc(var(--cw) * .2); color: #fff; text-shadow: 0 0 4px #000, 0 2px 0 #000; }
.o-hold .val.jp { color: #ffe36a; font-size: calc(var(--cw) * .17); }
.o-hold .cell.spin::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 10%, #ffffff10 10% 20%); animation: scroll .25s linear infinite; }
.o-hold .cell.hl { box-shadow: 0 0 0 4px #ffe14a inset, 0 0 18px #ffe14a; }
.o-hold .cell.row-mult { box-shadow: 0 0 0 4px #ff6af0 inset; }
.o-hold .cell.pop { animation: pop .5s ease-out; }
.o-hold .spins-left { position: absolute; left: 50%; translate: -50% 0; top: -56px; padding: 4px 22px; border-radius: 99px; background: #000c; border: 3px solid var(--accent); font-weight: 900; font-size: 26px; white-space: nowrap; }
.o-design .g-meter { position: absolute; left: 60px; right: 60px; height: 44px; top: var(--meter-top, 700px); display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 24px; font-weight: 900; color: #ffe9a6; text-shadow: 0 2px 0 #000, 0 0 6px #000; z-index: 4; pointer-events: none; }
.o-design .g-meter:empty { display: none; }
.o-design .mult-row span { min-width: 64px; }
.o-stage .g-banner { bottom: calc(var(--u) * 245); font-size: calc(var(--u) * 22); z-index: 6; }
.o-stage .g-top { top: calc(var(--u) * 10); }
.o-stage .g-top .g-level { display: none; }
.pip-on { filter: brightness(1.6) drop-shadow(0 0 6px #ff3355); }