/* ============================================================
   QuickPlay88 — Arcade cabinet + game boards
   Games run on a dark "night arcade" stage so the candy colours
   glow; the shell around them keeps the light candy theme.
   ============================================================ */
:root {
  --night-1: #1b1240;
  --night-2: #24165a;
  --night-3: #3d2690;
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.14);
}

/* ---------- Overlay + header ---------- */
.game-modal {
  position: absolute; inset: 0; z-index: 85; display: none; flex-direction: column;
  background: var(--night-1); color: #fff;
}
.game-modal.active { display: flex; animation: pop .3s ease; }
.gm-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(180deg, #2f1d6e, var(--night-2));
}
.gm-close {
  border: none; background: var(--glass-2); color: #fff; font-family: inherit; font-weight: 800; font-size: 14px;
  padding: 8px 14px 8px 10px; border-radius: var(--r-pill); cursor: pointer; display: flex; align-items: center; gap: 4px;
}
.gm-close svg { width: 16px; height: 16px; }
.gm-title { flex: 1; text-align: center; font-weight: 800; font-size: 17px; }
.gm-bal {
  display: flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--glass-2); padding: 6px 12px 6px 7px; border-radius: var(--r-pill);
}
.gm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Cabinet layout ---------- */
.cab { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stage {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 46px 14px 16px;
  background: radial-gradient(120% 75% at 50% 0%, var(--night-3) 0%, var(--night-2) 55%, var(--night-1) 100%);
}
.opts { padding: 10px 14px 2px; background: var(--night-1); }
.dock {
  display: flex; gap: 8px; align-items: stretch;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); background: var(--night-1);
}

/* Recent results strip */
.hist {
  position: absolute; top: 12px; left: 14px; right: 14px; display: flex; gap: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
          mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.hchip {
  flex: none; min-width: 32px; padding: 3px 9px; border-radius: var(--r-pill); text-align: center;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--glass-2); color: rgba(255,255,255,.85);
}
.hchip.up { background: rgba(45,225,194,.22); color: #8ff7e3; }
.hchip.down { background: rgba(255,90,122,.2); color: #ffa3b5; }
.hist-empty { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.45); }

/* Result: a splash for wins, a quiet pill for misses */
.result {
  position: absolute; left: 50%; bottom: 16px; z-index: 6; pointer-events: none; text-align: center;
  transform: translate(-50%, 12px); opacity: 0; transition: opacity .2s, transform .25s;
}
.result.show { opacity: 1; transform: translate(-50%, 0); }
.result.lose {
  background: rgba(12,8,34,.82); padding: 8px 16px; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(0,0,0,.35); white-space: nowrap;
}
.result.lose b { font-size: 15px; }
.result.lose em { font-style: normal; font-size: 12.5px; opacity: .7; margin-left: 8px; }
.result.win { top: 50%; bottom: auto; transform: translate(-50%, -50%) scale(.6); display: flex; flex-direction: column; align-items: center; }
.result.win.show { transform: translate(-50%, -50%) scale(1); transition: transform .45s cubic-bezier(.2,1.5,.4,1), opacity .15s; }
.result.win::before {
  content: ""; position: absolute; inset: -50px -80px; z-index: -1;
  background: radial-gradient(closest-side, rgba(14,8,40,.9), rgba(14,8,40,.6) 55%, rgba(14,8,40,0));
}
.result.win small {
  font-size: 14px; font-weight: 800; padding: 3px 14px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--pink), var(--purple)); box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.result.win b {
  display: block; font-size: 50px; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff7cf, #ffd24d 48%, #ff9a1f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(120,50,0,.6)) drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.result.win em { font-style: normal; font-size: 13.5px; font-weight: 700; opacity: .9; margin-top: 4px; }

/* ---------- Dock: bet stepper + play ---------- */
.stepper {
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 16px;
  background: var(--glass); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.step {
  width: 36px; height: 46px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--glass-2); color: #fff; font-family: inherit; font-size: 22px; font-weight: 800; line-height: 1;
}
.bet-amt { min-width: 70px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.bet-amt small { font-size: 11px; font-weight: 700; opacity: .6; }
.bet-amt b { display: flex; align-items: center; gap: 4px; font-size: 17px; font-variant-numeric: tabular-nums; }
.bet-amt .coin { width: 16px; height: 16px; font-size: 9px; }
.quick { display: flex; flex-direction: column; gap: 4px; }
.quick button {
  flex: 1; width: 40px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--glass-2); color: #fff; font-family: inherit; font-weight: 800; font-size: 13px;
}
.play-btn {
  flex: 1; min-height: 56px; padding: 0 12px; border: none; border-radius: 16px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 19px; color: #fff;
  background: linear-gradient(180deg, #ff74a8, var(--pink) 50%, var(--pink-deep));
  box-shadow: 0 6px 0 #a3104a, inset 0 2px 0 rgba(255,255,255,.35);
  transition: transform .1s, box-shadow .1s, filter .2s;
}
.play-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a3104a, inset 0 2px 0 rgba(255,255,255,.35); }
.play-btn:disabled { filter: saturate(.25) brightness(.75); cursor: default; }
.play-btn.cashout {
  color: #053a31; background: linear-gradient(180deg, #74f5dc, var(--mint) 50%, #14b89b);
  box-shadow: 0 6px 0 #0b7a66, inset 0 2px 0 rgba(255,255,255,.45);
  animation: cashpulse .8s ease-in-out infinite alternate;
}
@keyframes cashpulse { to { filter: brightness(1.15); } }

.cab.in-round .stepper, .cab.in-round .quick, .cab.in-round .opts { opacity: .45; pointer-events: none; }
.cab button:focus-visible, .gm-close:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* ---------- Shared option controls ---------- */
.opts-note { text-align: center; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.62); padding: 4px 6px 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--glass); }
.seg button {
  border: none; border-radius: 11px; padding: 8px 4px; cursor: pointer; background: transparent;
  color: rgba(255,255,255,.8); font-family: inherit; font-weight: 800; font-size: 14.5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.seg button small { font-size: 11px; font-weight: 700; opacity: .7; }
.seg button svg, .seg button img { width: 26px; height: 26px; display: block; object-fit: contain; }
.seg button.on { background: #fff; color: var(--purple-deep); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.seg button.on small { opacity: 1; color: var(--pink-deep); }
.nums { display: flex; gap: 6px; margin-top: 8px; }
.nums.hidden { display: none; }
.nums button {
  flex: 1; height: 38px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--glass-2); color: #fff; font-family: inherit; font-weight: 800; font-size: 16px;
}
.nums button.on { background: var(--sun); color: #5a3000; }

/* ---------- Lucky Slots ---------- */
.machine {
  --cell: 74px;
  position: relative; width: min(100%, 336px); padding: 34px 12px 14px; border-radius: 26px;
  background: linear-gradient(180deg, #ffd96f, #ffb02e 42%, #f08a12);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -5px 0 rgba(150,70,0,.4), 0 18px 40px rgba(0,0,0,.5);
}
.lights { position: absolute; top: 12px; left: 26px; right: 26px; display: flex; justify-content: space-between; }
.lights i { width: 10px; height: 10px; border-radius: 50%; background: #fff3c4; opacity: .5; box-shadow: 0 0 0 2px rgba(150,70,0,.25); }
.machine.spinning .lights i { animation: blink .5s steps(2) infinite; }
.machine.spinning .lights i:nth-child(even) { animation-delay: .25s; }
.machine.won .lights i { background: #fff; animation: blink .2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 1; box-shadow: 0 0 10px #fff3a0, 0 0 0 2px rgba(150,70,0,.25); } }
.reels {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 7px;
  border-radius: 16px; background: #3a1f6e; box-shadow: inset 0 4px 10px rgba(0,0,0,.55);
}
.reel {
  position: relative; height: calc(var(--cell) * 3); overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #e3dbf8, #fff 30%, #fff 70%, #e3dbf8);
}
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(40,20,90,.42), transparent 30%, transparent 70%, rgba(40,20,90,.42));
}
.strip { will-change: transform; }
.strip.blur .cell svg { filter: blur(1.4px); opacity: .85; }
.cell { height: var(--cell); display: grid; place-items: center; }
.cell svg { width: 54px; height: 54px; display: block; }
.payline { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dashed rgba(255,77,141,.45); pointer-events: none; }
.payline::before, .payline::after {
  content: ""; position: absolute; top: -8px; border: 7px solid transparent;
}
.payline::before { left: -2px; border-left-color: var(--pink); }
.payline::after { right: -2px; border-right-color: var(--pink); }
.machine.won .payline { border-top: 3px solid var(--pink); box-shadow: 0 0 12px var(--pink); }
.machine.won .reel .cell:nth-child(2) svg { animation: cellwin .5s ease-in-out 3; }
@keyframes cellwin { 50% { transform: scale(1.2); } }
.paytable { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding: 2px 0 4px; }
.pt { display: flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.85); }
.pt svg { width: 20px; height: 20px; display: block; }
.pt.two svg { width: 16px; height: 16px; margin-right: -3px; }

/* Themed slot machines: colours come from the theme (style vars on .cab). */
.cab.themed .stage { background: radial-gradient(120% 75% at 50% 0%, var(--bg-a) 0%, var(--bg-b) 100%); }
.cab.has-bg .stage {
  background: linear-gradient(180deg, rgba(14,8,40,.35), rgba(14,8,40,.72)), var(--bg-img) center / cover no-repeat;
}
.cab.themed .opts, .cab.themed .dock { background: var(--bg-b); }
.cab.themed .machine {
  background: linear-gradient(180deg, var(--frame-a), var(--frame-b));
}
/* Image art (themed slots, ARCADE_ART_GUIDE.md) sizes like the built-in sprites. */
.cell img { width: 60px; height: 60px; object-fit: contain; display: block; }
.pt img { width: 20px; height: 20px; object-fit: contain; display: block; }
.pt.two img { width: 16px; height: 16px; margin-right: -3px; }

/* ---------- Rocket Crash ---------- */
.cab-crash .stage { align-items: stretch; }
.crash {
  position: relative; flex: 1; min-height: 240px; border-radius: 20px; overflow: hidden;
  background-color: #120c33;
  background-image:
    radial-gradient(1.5px 1.5px at 14px 20px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70px 64px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 116px 32px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 40px 90px, rgba(255,255,255,.4), transparent);
  background-size: 140px 110px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.crash.flying { animation: starfield 1.1s linear infinite; }
@keyframes starfield { to { background-position: -140px 110px; } }
.crash canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crash-rocket { position: absolute; left: 0; top: 0; width: 40px; height: 40px; z-index: 3; }
.crash-rocket svg, .crash-rocket img { width: 40px; height: 40px; display: block; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,210,77,.6)); }
.crash-rocket img { width: 52px; height: 52px; margin: -6px; }
/* Top-left: the curve tip always climbs toward the top-right, so this corner stays clear. */
.crash-mult {
  position: absolute; left: 20px; top: 14%; z-index: 2; pointer-events: none;
  font-size: 56px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.crash-mult.cashed { color: #6ff5da; }
.crash-mult.bust { color: #ff5a7a; }
.crash-note {
  position: absolute; left: 22px; right: 22px; top: calc(14% + 62px); z-index: 2; pointer-events: none;
  font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.65);
}
.crash.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* ---------- Pachinko Drop ---------- */
.cab-pachinko .stage { background: radial-gradient(100% 70% at 50% 8%, #4a2a9e, var(--night-2) 60%, var(--night-1)); }
.plinko { width: 100%; max-width: 400px; flex: 1; min-height: 280px; max-height: 480px; display: flex; }
.plinko canvas { flex: 1; width: 100%; height: 100%; display: block; }

/* ---------- Racing ---------- */
.race { width: 100%; }
.commentary { text-align: center; font-size: 16px; font-weight: 800; min-height: 24px; margin-bottom: 10px; }
.track {
  position: relative; border-radius: 16px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #2fbf71 0 28px, #2ab268 28px 56px);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), 0 12px 26px rgba(0,0,0,.4);
}
.track > .hist-empty { display: block; padding: 18px; text-align: center; color: #fff; }
.lane { position: relative; height: 42px; display: flex; align-items: center; }
.lane + .lane { border-top: 2px dashed rgba(255,255,255,.35); }
.lane-no { width: 26px; text-align: center; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.95); z-index: 1; }
.lane-name { position: absolute; left: 70px; font-size: 12px; font-weight: 800; color: rgba(10,60,30,.55); }
.runner { position: absolute; left: 30px; top: 6px; width: 30px; height: 30px; z-index: 2; will-change: transform; }
.runner svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
/* Runner art: a side-on runner a little bigger than the badge, with its lane number. */
.runner-art { position: absolute; left: -6px; top: -8px; width: 44px; height: 44px; object-fit: contain; display: block; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.runner-no { position: absolute; left: -8px; top: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; color: #1b1240; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.runner.winner .runner-art { filter: drop-shadow(0 0 8px #ffd24d) drop-shadow(0 0 2px #fff); }
.runner.running::before {
  content: ""; position: absolute; right: 22px; top: 10px; width: 24px; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55));
}
.runner.winner svg { filter: drop-shadow(0 0 8px #ffd24d) drop-shadow(0 0 2px #fff); }
.gate { position: absolute; left: 62px; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,.75); z-index: 1; }
.finish {
  position: absolute; right: 12px; top: 0; bottom: 0; width: 10px; z-index: 1;
  background: repeating-conic-gradient(#fff 0 25%, #1b1240 0 50%) 0 0 / 10px 10px;
}
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.picks.nudge { animation: shake .4s; }
.pick {
  display: flex; align-items: center; gap: 6px; padding: 6px 7px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--glass-2); color: #fff; font-family: inherit; text-align: left;
}
.pick svg { width: 24px; height: 24px; flex: none; display: block; }
.pick b { display: block; font-size: 13px; line-height: 1.1; }
.pick small { display: block; font-size: 11px; font-weight: 800; color: var(--sun); }
.pick.on { background: #fff; color: var(--ink); }
.pick.on small { color: var(--pink-deep); }

/* ---------- Lucky Dice ---------- */
.cab-dice .stage { background: radial-gradient(90% 70% at 50% 45%, #1fa58c 0%, #0e6b5c 62%, #0a4a40 100%); }
.cab-dice .opts, .cab-dice .dock { background: #0a3d35; }
.table { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; }
.die svg, .die img { width: 124px; height: 124px; display: block; object-fit: contain; filter: drop-shadow(0 10px 0 rgba(0,0,0,.18)); }
.die.tumble { animation: tumble .9s cubic-bezier(.3,.7,.4,1); }
@keyframes tumble {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-96px) rotate(260deg); }
  60% { transform: translateY(0) rotate(520deg); }
  76% { transform: translateY(-26px) rotate(640deg); }
  100% { transform: translateY(0) rotate(720deg); }
}
.die-shadow { width: 96px; height: 16px; margin-top: 8px; border-radius: 50%; background: rgba(0,0,0,.3); filter: blur(2px); }
.die-shadow.tumble { animation: dieshadow .9s cubic-bezier(.3,.7,.4,1); }
@keyframes dieshadow { 30% { transform: scale(.5); opacity: .45; } 60% { transform: scale(1); opacity: 1; } 76% { transform: scale(.8); } }

/* ---------- Coin Flip ---------- */
.cab-coinflip .stage { background: radial-gradient(60% 45% at 50% 48%, #5a3bb8, var(--night-2) 70%, var(--night-1)); }
.coinstage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; perspective: 800px; }
.coin3d { width: 144px; height: 144px; position: relative; transform-style: preserve-3d; }
.c-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; }
.c-face svg, .c-face img { width: 100%; height: 100%; display: block; object-fit: contain; }
.c-t { transform: rotateY(180deg); }
.coin-wrap.toss { animation: toss 1.2s; }
@keyframes toss {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  45% { transform: translateY(-140px); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  100% { transform: translateY(0); }
}
.coin-shadow { width: 112px; height: 18px; margin-top: 16px; border-radius: 50%; background: rgba(0,0,0,.38); filter: blur(3px); }
.coin-shadow.toss { animation: cshadow 1.2s; }
@keyframes cshadow { 45% { transform: scale(.45); opacity: .4; } }

/* ---------- Guest banner (home) ---------- */
.guest-banner { width: 100%; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--sun), var(--orange)); color: #6a3800; font-weight: 800; text-align: left;
  padding: 12px 14px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin-bottom: 14px;
  animation: pop .4s cubic-bezier(.2,.9,.3,1.3); }
.guest-banner[hidden] { display: none; }
.gb-ico { font-size: 20px; }
.gb-text { flex: 1; font-size: 13px; line-height: 1.3; }
.gb-text u { text-underline-offset: 2px; }
.gb-arrow { font-size: 20px; font-weight: 900; }

/* ---------- Win-burst spritesheet overlay (6 frames) ---------- */
.win-burst { position: absolute; left: 50%; top: 42%; width: 160px; height: 160px; transform: translate(-50%, -50%);
  z-index: 93; pointer-events: none; display: none;
  background-image: url(../assets/sprites/win-burst.svg); background-repeat: no-repeat; background-size: 960px 160px; }
.win-burst.play { display: block; animation: winburst .72s steps(6) forwards; }
@keyframes winburst { from { background-position: 0 0; } to { background-position: -960px 0; } }

/* ---------- Spinning-coin spritesheet (8 frames) ---------- */
.coin-spin { width: 50px; height: 50px; display: inline-block; vertical-align: middle;
  background-image: url(../assets/sprites/coin-spin.svg); background-repeat: no-repeat; background-size: 400px 50px; }
.coin-spin.go { animation: coinspin8 .7s steps(8) infinite; }
@keyframes coinspin8 { from { background-position: 0 0; } to { background-position: -400px 0; } }

@media (prefers-reduced-motion: reduce) {
  .machine .lights i, .play-btn.cashout, .crash.flying, .crash.shake, .die.tumble, .coin-wrap.toss,
  .coin-shadow.toss, .die-shadow.tumble, .picks.nudge, .result.win.show { animation: none !important; transition: none !important; }
}