/* MOMO Jackpot · Bushy Outlaw — portrait 700×1000 stage scaled to the viewport.
   All stage geometry uses u(N) = N logical px of the original 700×1000 game screen. */
:root {
  --s: min(100vw, calc(100dvh * 0.7));
  --gold: #ffd54a; --gold-2: #fff3b0; --ink: #fff;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
@supports not (height: 100dvh) { :root { --s: min(100vw, calc(100vh * 0.7)); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0517; color: var(--ink); overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; }
img { -webkit-user-drag: none; user-select: none; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(circle at 50% 40%, #3a1760, #0b0517 70%); transition: opacity .5s; }
.loader.done { opacity: 0; pointer-events: none; }
.loader-logo { width: min(70vw, 340px); animation: bob 2s ease-in-out infinite; }
.loader-bar { width: min(70vw, 320px); height: 14px; border-radius: 99px; background: #2a0f1a; border: 2px solid #c98a2a; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #39c24a, #b6ff6a); transition: width .2s; }
.loader p { margin: 0; color: #e8d8ff; font-size: 13px; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- viewport / stage ---------- */
.viewport { position: fixed; inset: 0; display: grid; place-items: center; background: #0b0517 url('/static/art/bg-base.webp') center / cover no-repeat; }
.viewport::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(18px) brightness(.45); }
.stage { --u: calc(var(--s) / 700); --x: max(0px, calc(100dvh - var(--s) * 10 / 7)); --top: env(safe-area-inset-top, 0px); --bot: env(safe-area-inset-bottom, 0px); position: relative; width: var(--s); height: max(calc(var(--s) * 10 / 7), 100dvh); overflow: hidden; background: url('/static/art/bg-base.webp') center bottom / cover no-repeat; box-shadow: 0 0 80px rgba(0, 0, 0, .7); font-size: calc(var(--u) * 20); }
.stage.respin { background-image: url('/static/art/bg-respin.webp'); }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 4, 30, .25), transparent 25%, transparent 60%, rgba(10, 2, 10, .75)); }
.stage > * { position: absolute; z-index: 1; }

/* ---------- HUD ---------- */
.hud { top: calc(var(--u) * 10 + var(--top)); left: calc(var(--u) * 14); right: calc(var(--u) * 14); height: calc(var(--u) * 46); display: flex; align-items: center; gap: calc(var(--u) * 10); z-index: 5; }
.coin-pill { flex: 1; max-width: calc(var(--u) * 280); height: 100%; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 6); border-radius: 99px; background: linear-gradient(180deg, rgba(40, 12, 8, .9), rgba(20, 5, 5, .9)); border: calc(var(--u) * 2.5) solid #d79a2d; box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 220, 140, .3); }
.coin-icon { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b5, #ffc21a 45%, #b36a00); box-shadow: inset 0 0 0 calc(var(--u) * 3) #e08d00; flex: none; }
.coin-pill strong { font: calc(var(--u) * 24) Rye, serif; color: var(--gold-2); text-shadow: 0 calc(var(--u) * 2) 0 #7a3a00; letter-spacing: .02em; }
.coin-pill.bump { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.06); } }
.hud-btn { height: calc(var(--u) * 46); min-width: calc(var(--u) * 46); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 14); display: grid; place-items: center; grid-auto-flow: column; gap: calc(var(--u) * 4); background: linear-gradient(180deg, #7a3b16, #4a1f0b); border: calc(var(--u) * 2.5) solid #d79a2d; font-size: calc(var(--u) * 22); color: var(--gold-2); box-shadow: 0 calc(var(--u) * 3) 0 #2a0f05; }
.hud-btn:active { transform: translateY(calc(var(--u) * 2)); box-shadow: none; }
.hud-btn.gift { margin-left: auto; background: linear-gradient(180deg, #3fae34, #1d6a17); border-color: #b9ff7a; }
.hud-btn.gift b { font: calc(var(--u) * 16) Rye, serif; }
.hud-btn.gift:not(:disabled) { animation: pulseGlow 1.6s infinite; }
.hud-btn.gift:disabled { filter: grayscale(.8) brightness(.7); animation: none; }
@keyframes pulseGlow { 50% { box-shadow: 0 0 calc(var(--u) * 18) #b9ff7a; } }
.hud-btn.info { background: url('/static/art/btn-info.webp') center / 70% no-repeat, linear-gradient(180deg, #7a3b16, #4a1f0b); }

/* ---------- logo / jackpots / trail ---------- */
.logo { top: calc(var(--u) * 62 + var(--x) * .25); left: 50%; width: calc(var(--u) * 170); translate: -50% 0; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(0, 0, 0, .6)); animation: bob 3s ease-in-out infinite; }
.jackpots { top: calc(var(--u) * 146 + var(--x) * .35); left: calc(var(--u) * 28); right: calc(var(--u) * 28); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6) calc(var(--u) * 12); }
.jp { position: relative; height: calc(var(--u) * 52); background: center / 100% 100% no-repeat; display: flex; align-items: center; justify-content: flex-end; padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 100); }
.jp-grand { background-image: url('/static/art/jp-frame-grand.webp'); }
.jp-major { background-image: url('/static/art/jp-frame-major.webp'); }
.jp-minor { background-image: url('/static/art/jp-frame-minor.webp'); }
.jp-mini { background-image: url('/static/art/jp-frame-mini.webp'); }
.jp-label { position: absolute; left: calc(var(--u) * 12); top: 50%; height: calc(var(--u) * 30); transform: translateY(-50%); }
.jp strong { font: calc(var(--u) * 24) Rye, serif; color: var(--gold-2); text-shadow: 0 calc(var(--u) * 2) 0 #000, 0 0 calc(var(--u) * 10) rgba(255, 210, 80, .6); }
.jp.hit { animation: jpHit .25s 10 alternate; }
@keyframes jpHit { to { filter: brightness(1.8); } }
.trail { top: calc(var(--u) * 254 + var(--x) * .4); left: calc(var(--u) * 40); right: calc(var(--u) * 40); display: grid; justify-items: center; gap: calc(var(--u) * 2); }
.trail-title { width: calc(var(--u) * 440); }
.trail-bar { position: relative; width: calc(var(--u) * 560); height: calc(var(--u) * 50); }
.trail-bar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail-fill { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .6s ease-out; }

/* ---------- machine ---------- */
.machine { top: calc(var(--u) * 350 + var(--x) * .45); left: calc(var(--u) * 34); width: calc(var(--u) * 632); height: calc(var(--u) * 486); }
.machine > img { position: absolute; pointer-events: none; z-index: 3; }
.frame-top { left: calc(var(--u) * -4); top: 0; width: calc(var(--u) * 640); height: calc(var(--u) * 66); }
.frame-side { top: calc(var(--u) * 40); width: calc(var(--u) * 46); height: calc(var(--u) * 430); }
.frame-side.left { left: calc(var(--u) * 2); }
.frame-side.right { right: calc(var(--u) * 2); transform: scaleX(-1); }
.frame-bottom { left: calc(var(--u) * -14); bottom: 0; width: calc(var(--u) * 660); height: calc(var(--u) * 38); }
.reel-window { position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 48); width: calc(var(--u) * 544); height: calc(var(--u) * 412); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 4); background: linear-gradient(180deg, rgba(20, 6, 30, .92), rgba(35, 10, 25, .92)); box-shadow: inset 0 0 0 calc(var(--u) * 3) #f2b52e, inset 0 0 calc(var(--u) * 30) rgba(0, 0, 0, .9); z-index: 2; }
.machine.jackpot-flash .reel-window { animation: flash .3s 8 alternate; }
@keyframes flash { to { box-shadow: inset 0 0 0 calc(var(--u) * 4) #fff6b0, 0 0 calc(var(--u) * 60) #ffd54a; } }
.reels { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 3); width: 100%; height: 100%; }
.reel { position: relative; overflow: hidden; container-type: size; background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .03)); border-radius: calc(var(--u) * 3); }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 10%; z-index: 2; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(180deg, rgba(10, 2, 20, .85), transparent); }
.reel::after { bottom: 0; background: linear-gradient(0deg, rgba(10, 2, 20, .85), transparent); }
.reel.landed .strip { animation: land .22s ease-out; }
@keyframes land { 40% { translate: 0 calc(var(--u) * 6); } }
.strip { position: absolute; inset: 0 0 auto 0; will-change: transform; }
.cell { position: relative; height: 25cqh; display: grid; place-items: center; transition: opacity .3s, filter .3s; }
.cell img { width: 96%; height: 92%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(0, 0, 0, .55)); }
.cell.blur img { filter: blur(calc(var(--u) * 2)) brightness(.9); transform: scaleY(1.08); }
.cell.dim { opacity: .35; filter: grayscale(.7) brightness(.7); }
.cell.win { z-index: 1; }
.cell.win img { animation: symWin .5s ease-in-out infinite alternate; }
.cell.win::after { content: ""; position: absolute; inset: -6%; background: url('/static/art/fx-winframe-strip.webp') 0 0 / 3000% 100% no-repeat; animation: winFrame 1s steps(29) infinite; pointer-events: none; mix-blend-mode: screen; }
@keyframes symWin { to { transform: scale(1.1); } }
@keyframes winFrame { to { background-position: 100% 0; } }
.lines-overlay { position: absolute; inset: calc(var(--u) * 4); width: calc(100% - var(--u) * 8); height: calc(100% - var(--u) * 8); pointer-events: none; z-index: 3; }
.lines-overlay path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 0 3px #000); }
.lines-overlay.all path { opacity: .55; }
.lines-overlay path.active { opacity: 1; stroke-width: 6; }

/* ---------- ticker & controls ---------- */
.ticker { top: calc(var(--u) * 840 + var(--x) * .5); left: calc(var(--u) * 60); right: calc(var(--u) * 60); height: calc(var(--u) * 34); display: grid; place-items: center; border-radius: 99px; background: rgba(15, 4, 8, .72); border: calc(var(--u) * 1.5) solid rgba(242, 181, 46, .55); font-size: calc(var(--u) * 17); color: var(--gold-2); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; }
.ticker b { color: var(--gold); font-weight: 800; }
.controls { left: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: calc(var(--u) * 8 + var(--bot) + var(--x) * .25); height: calc(var(--u) * 116); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 12); }
.ctrl-box { height: calc(var(--u) * 78); border-radius: calc(var(--u) * 16); background: linear-gradient(180deg, rgba(60, 20, 8, .95), rgba(30, 8, 4, .95)); border: calc(var(--u) * 3) solid #d79a2d; box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 220, 140, .25), 0 calc(var(--u) * 4) 0 #200a03; display: grid; align-content: center; justify-items: center; }
.ctrl-box small { font: calc(var(--u) * 16) Rye, serif; color: #f2b52e; letter-spacing: .08em; }
.ctrl-box strong { font: calc(var(--u) * 28) Rye, serif; color: var(--gold-2); text-shadow: 0 calc(var(--u) * 2) 0 #6a2a00; }
.stepper { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.stepper button { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffd96a, #d48a12); color: #5a2300; font-size: calc(var(--u) * 28); font-weight: 900; line-height: 1; box-shadow: 0 calc(var(--u) * 3) 0 #7a3a00; }
.stepper button:active { transform: translateY(calc(var(--u) * 2)); box-shadow: none; }
.stepper button:disabled { filter: grayscale(1) brightness(.6); }
.stepper strong { min-width: calc(var(--u) * 54); text-align: center; }
.start-btn { position: relative; width: calc(var(--u) * 250); height: calc(var(--u) * 90); background: url('/static/art/btn-start.webp') center / contain no-repeat; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 6) rgba(0, 0, 0, .5)); transition: transform .08s; }
.start-btn:not(:disabled):hover { filter: brightness(1.08) drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 6) rgba(0, 0, 0, .5)); }
.start-btn:not(:disabled):active { transform: scale(.95); }
.start-btn:disabled, .start-btn.busy { background-image: url('/static/art/btn-start-dis.webp'); }
.auto-badge { position: absolute; top: calc(var(--u) * -8); right: calc(var(--u) * 8); padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: 99px; background: #e0315a; font: calc(var(--u) * 13) Rye, serif; color: #fff; box-shadow: 0 0 calc(var(--u) * 8) #e0315a; }
.auto-btn { position: absolute; left: 50%; bottom: calc(var(--u) * -6); transform: translateX(-50%); padding: calc(var(--u) * 3) calc(var(--u) * 18); border-radius: 99px; font: calc(var(--u) * 14) Rye, serif; color: var(--gold-2); background: rgba(30, 8, 4, .9); border: calc(var(--u) * 2) solid #d79a2d; }
.auto-btn[aria-pressed="true"] { background: #e0315a; border-color: #ffb3c4; }

/* ---------- win overlay ---------- */
.win-overlay, .jp-overlay { inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle, rgba(30, 6, 30, .55), rgba(0, 0, 0, .82)); animation: fadeIn .25s; }
.win-overlay[hidden], .jp-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.win-glow { position: absolute; width: calc(var(--u) * 640); left: 50%; top: 50%; translate: -50% -55%; animation: spinSlow 8s linear infinite; mix-blend-mode: screen; pointer-events: none; }
@keyframes spinSlow { to { rotate: 360deg; } }
.win-burst { position: absolute; width: calc(var(--u) * 420); height: calc(var(--u) * 420); left: 50%; top: 50%; translate: -50% -60%; background: url('/static/art/fx-burst-strip.webp') 0 0 / 2200% 100% no-repeat; animation: burst 1s steps(21) forwards; mix-blend-mode: screen; pointer-events: none; }
@keyframes burst { to { background-position: 100% 0; } }
.win-coins { position: absolute; width: calc(var(--u) * 560); left: 50%; top: 58%; translate: -50% 0; animation: rise .5s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
.win-kicker { position: absolute; top: 34%; left: 0; right: 0; margin: 0; text-align: center; font: calc(var(--u) * 78) Rye, serif; color: #ffe066; -webkit-text-stroke: calc(var(--u) * 2.5) #7a1f00; text-shadow: 0 calc(var(--u) * 6) 0 #5a1500, 0 0 calc(var(--u) * 30) #ff9a00; animation: popIn .45s cubic-bezier(.2, 1.7, .4, 1); }
.win-amount { position: absolute; top: 47%; left: 0; right: 0; text-align: center; font: calc(var(--u) * 70) Rye, serif; color: #fff; -webkit-text-stroke: calc(var(--u) * 2) #8a4a00; text-shadow: 0 calc(var(--u) * 5) 0 #6a3500, 0 0 calc(var(--u) * 24) #ffd54a; }
@keyframes popIn { from { transform: scale(.3); opacity: 0; } }
@keyframes rise { from { translate: -50% 40%; opacity: 0; } }

.jp-pop-char { position: absolute; width: calc(var(--u) * 340); left: 50%; top: 14%; translate: -50% 0; animation: rise2 .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rise2 { from { translate: -50% 30%; opacity: 0; } }
.jp-pop-frame { position: absolute; top: 52%; left: 50%; translate: -50% 0; width: calc(var(--u) * 560); height: calc(var(--u) * 164); background: url('/static/art/popup-jackpot.webp') center / 100% 100% no-repeat; display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 4); animation: popIn .45s .15s both cubic-bezier(.2, 1.7, .4, 1); }
.jp-pop-label { height: calc(var(--u) * 52); position: absolute; top: calc(var(--u) * -30); }
.jp-pop-frame strong { font: calc(var(--u) * 64) Rye, serif; color: var(--gold-2); text-shadow: 0 calc(var(--u) * 4) 0 #5a1500; margin-top: calc(var(--u) * 10); }
.img-btn.collect { position: absolute; top: 74%; left: 50%; translate: -50% 0; width: calc(var(--u) * 300); height: calc(var(--u) * 108); background: url('/static/art/btn-collect.webp') center / contain no-repeat; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }

.toast { left: 50%; top: calc(var(--u) * 230 + var(--x) * .35); translate: -50% 0; z-index: 30; max-width: 86%; padding: calc(var(--u) * 12) calc(var(--u) * 22); border-radius: calc(var(--u) * 14); background: rgba(20, 5, 10, .92); border: calc(var(--u) * 2) solid var(--gold); font-size: calc(var(--u) * 20); text-align: center; color: var(--gold-2); animation: popIn .3s cubic-bezier(.2, 1.6, .4, 1); }
.toast[hidden] { display: none; }
.offline-bar { left: 0; right: 0; top: var(--top); z-index: 40; padding: calc(var(--u) * 6); text-align: center; font-size: calc(var(--u) * 16); background: #b0213f; }
.offline-bar[hidden] { display: none; }

/* ---------- dialogs ---------- */
.sheet { width: min(92vw, 560px); max-height: 88dvh; padding: 26px 22px 20px; border-radius: 22px; color: #fff; background: linear-gradient(180deg, #4a1c0c, #24090a); border: 4px solid #d79a2d; box-shadow: 0 0 0 2px #5a2400, 0 30px 60px rgba(0, 0, 0, .7); overflow: auto; }
.sheet::backdrop { background: rgba(5, 0, 12, .75); backdrop-filter: blur(3px); }
.sheet[open] { animation: popIn .3s cubic-bezier(.2, 1.5, .4, 1); }
.img-btn.close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; background: url('/static/art/btn-close.webp') center / contain no-repeat; z-index: 2; }
.sheet h2 { margin: 0 0 14px; font: 28px Rye, serif; color: var(--gold); text-align: center; }
.sheet h3 { margin: 18px 0 8px; font: 18px Rye, serif; color: var(--gold); }
.paytable-sheet { padding: 22px 12px 14px; overflow: hidden; }
.pt-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 12px; }
.pt-track::-webkit-scrollbar { display: none; }
.pt-track img { flex: 0 0 100%; width: 100%; max-height: 70dvh; object-fit: contain; scroll-snap-align: center; }
.pt-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 10px; font: 18px Rye, serif; color: var(--gold-2); }
.pt-nav button { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffd96a, #d48a12); color: #5a2300; font-size: 30px; line-height: 1; }
.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 16px; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { width: 48px; height: 28px; border-radius: 99px; background: #3a1a12; border: 2px solid #8a5a2a; position: relative; transition: .2s; }
.switch-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #c9a77a; transition: .2s; }
.switch-row input:checked + i { background: #2f8f2a; border-color: #b9ff7a; }
.switch-row input:checked + i::after { left: 23px; background: #fff; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.stats div { padding: 10px 6px; border-radius: 12px; background: rgba(0, 0, 0, .3); text-align: center; }
.stats small { display: block; font-size: 11px; color: #d9b98a; }
.stats strong { font: 18px Rye, serif; color: var(--gold-2); }
.history { display: grid; gap: 4px; max-height: 200px; overflow: auto; }
.history-row { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 13px; }
.history-row small { color: #c9a77a; }
.history-row strong.hit { color: #8dff7a; }
.history-row strong.miss { color: #ff8aa0; }
.rules { padding-left: 18px; margin: 0; font-size: 13px; line-height: 1.6; color: #f1e2cc; }
.danger-btn { width: 100%; margin-top: 18px; padding: 12px; border-radius: 12px; background: #7a1a26; border: 2px solid #ff8aa0; font-weight: 700; }
.version { margin: 10px 0 0; text-align: center; font-size: 11px; color: #a38a6a; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }