/* ============ Lucky Number — 3-reel slot machine ============ */
.lucky-game { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow-x: clip; }

/* ── Stage ── */
.lk-stage {
  position: relative; margin: 12px 14px 0; border-radius: var(--r);
  border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(240,185,11,.12), transparent 62%),
    linear-gradient(180deg, #221a0c 0%, #18130b 52%, #100c08 100%);
  min-height: clamp(244px, 36vh, 360px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 14px;
}
.lk-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 16% 24%, rgba(255,220,140,.5), transparent),
    radial-gradient(1px 1px at 74% 16%, rgba(255,220,140,.4), transparent),
    radial-gradient(1px 1px at 42% 60%, rgba(255,220,140,.3), transparent),
    radial-gradient(1px 1px at 86% 70%, rgba(255,220,140,.35), transparent);
}

.lk-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 10px 12px; pointer-events: none; }
.lk-status-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,.32); border: 1px solid var(--line); backdrop-filter: blur(3px);
}
.lk-status-pill.win      { color: var(--win); border-color: rgba(14,203,129,.45); }
.lk-status-pill.lose     { color: var(--lose); border-color: rgba(246,70,93,.42); }
.lk-status-pill.spinning { color: var(--accent); border-color: rgba(240,185,11,.4); }

.lk-machine-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; z-index: 1; }

/* ── The machine: a flat cartoon orange frame ringed with marquee bulbs ── */
.lk-machine {
  --cell: clamp(78px, 20vw, 112px);                     /* tall reel; shows one number */
  --bulb: radial-gradient(circle, #ffe680 0 2.7px, #e09800 2.8px 3.9px, transparent 4.3px);
  display: flex; align-items: center; justify-content: center;
  margin-right: clamp(24px, 6.5vw, 38px);               /* reserve room for the lever */
  padding: clamp(12px, 3.2vw, 16px);                    /* thin frame */
  border-radius: clamp(16px, 4.4vw, 22px);
  border: clamp(2.5px, .8vw, 3.5px) solid #14110c;
  background:
    var(--bulb) 0 0      / 20px 15px repeat-x,           /* top row    */
    var(--bulb) 0 100%   / 20px 15px repeat-x,           /* bottom row */
    var(--bulb) 0 0      / 15px 20px repeat-y,           /* left col   */
    var(--bulb) 100% 0   / 15px 20px repeat-y,           /* right col  */
    linear-gradient(180deg, #ff7a3d 0%, #ff5a25 52%, #f5481b 100%);   /* orange body */
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 10px 20px rgba(0,0,0,.45),
    0 22px 40px rgba(0,0,0,.4);
  position: relative;
  transition: box-shadow .3s ease;
}
.lk-machine.jackpot {
  box-shadow: 0 0 46px rgba(255,180,40,.7), 0 12px 26px rgba(0,0,0,.45), 0 22px 40px rgba(0,0,0,.4);
  animation: lk-jack-pulse .55s ease 3;
}
@keyframes lk-jack-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.03); }
}

/* black inner frame the reels sit on */
.lk-window {
  position: relative;
  display: flex; align-items: stretch; gap: clamp(5px, 1.6vw, 8px);
  padding: clamp(5px, 1.6vw, 8px);
  border-radius: clamp(8px, 2.6vw, 12px);
  background: #14110c;
}

/* ── A reel: a tall cream window showing one number ── */
.lk-reel {
  width: clamp(46px, 12vw, 64px); height: var(--cell);
  border-radius: clamp(6px, 2vw, 9px); overflow: hidden; position: relative;
  background: linear-gradient(180deg, #f8f2e4 0%, #efe7d3 56%, #e0d4ba 100%);
  border: clamp(2px, .7vw, 3px) solid #14110c;
  box-shadow: inset 0 4px 7px rgba(0,0,0,.28), inset 0 -3px 6px rgba(0,0,0,.16);
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* soft top & bottom shading for depth inside the window */
.lk-reel::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 18%, transparent 42%,
    transparent 58%, rgba(0,0,0,.08) 82%, rgba(0,0,0,.28) 100%);
}
/* subtle glass sheen */
.lk-glass {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 16%, transparent 32%);
}

.lk-strip { display: flex; flex-direction: column; will-change: transform; }
.lk-cell {
  height: var(--cell); display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 8vw, 44px); font-weight: 900; font-variant-numeric: tabular-nums;
  color: #ec1c2b;
  text-shadow: -1.5px -1.5px 0 #fff, 1.5px 1.5px 0 #8a0f17, 0 3px 4px rgba(0,0,0,.25);
}
.lk-q {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 8vw, 44px); font-weight: 900; color: #d4332e;
  text-shadow: -1.5px -1.5px 0 #fff, 1.5px 1.5px 0 #8a0f17, 0 3px 4px rgba(0,0,0,.25);
}
.lk-reel:not(.unknown) .lk-q { display: none; }
.lk-reel.unknown .lk-strip { visibility: hidden; }

/* motion blur while spinning */
.lk-reel.spinning .lk-strip { filter: blur(1px); }
.lk-reel.free .lk-strip { filter: blur(1.8px); }

/* fast free-spin (the blur-spin build) — periodic so it loops seamlessly */
@keyframes lk-free { from { transform: translateY(0); } to { transform: translateY(calc(var(--cell) * -10)); } }
.lk-reel.free .lk-strip { animation: lk-free .26s linear infinite; }

/* little bounce when a reel locks */
.lk-reel.lock { animation: lk-lock .2s ease; }
@keyframes lk-lock { 0% { transform: translateY(0); } 45% { transform: translateY(3px); } 100% { transform: translateY(0); } }

/* pop when a picked digit snaps onto reels 1 & 2 */
.lk-reel.pop { animation: lk-pop .2s ease; }
@keyframes lk-pop { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* win / lose reel states */
.lk-reel.win {
  border-color: #f0b90b;
  box-shadow: 0 0 22px rgba(240,185,11,.85), inset 0 0 18px rgba(240,185,11,.4);
}
.lk-reel.win .lk-cell {
  color: #ffb800;
  text-shadow: -1.5px -1.5px 0 #fff7df, 1.5px 1.5px 0 #8a5a08, 0 3px 5px rgba(120,80,0,.4);
}
.lk-reel.lose {
  border-color: #f6465d;
  box-shadow: inset 0 0 18px rgba(246,70,93,.45);
}

/* ── Pull lever (red ball + silver arm + gold base) ── */
.lk-lever { position: absolute; right: clamp(-20px, -5vw, -13px); top: clamp(6px, 2vw, 12px); z-index: 8; }
.lk-lever::after {            /* gold connector base on the frame edge */
  content: ''; position: absolute; left: -9px; bottom: -5px; z-index: 0;
  width: clamp(13px, 3.6vw, 17px); height: clamp(16px, 4.4vw, 22px); border-radius: 5px;
  background: linear-gradient(180deg, #ffd23f, #e09a00); border: clamp(2px, .7vw, 3px) solid #14110c;
}
.lk-lever-arm {
  position: relative; z-index: 1;
  width: clamp(6px, 1.7vw, 8px); height: clamp(44px, 12vw, 62px); border-radius: 6px;
  background: linear-gradient(90deg, #9aa0aa, #f0f3f7 45%, #b6bcc6);
  border: clamp(2px, .6vw, 2.5px) solid #14110c;
  transform-origin: bottom center; transform: rotate(24deg);
}
.lk-lever-ball {
  position: absolute; top: clamp(-20px, -5.4vw, -14px); left: 50%; transform: translateX(-50%);
  width: clamp(22px, 6vw, 30px); height: clamp(22px, 6vw, 30px); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff8585, #e51f2b 60%, #a01018);
  border: clamp(2px, .7vw, 3px) solid #14110c;
}
.lk-machine.pulling .lk-lever-arm { animation: lk-pull .5s ease; }
@keyframes lk-pull { 0% { transform: rotate(24deg); } 35% { transform: rotate(64deg); } 100% { transform: rotate(24deg); } }

.lk-picked-label { font-size: 11px; color: var(--muted); letter-spacing: .3px; text-align: center; }
.lk-picked-label b { color: var(--accent); font-weight: 800; }

/* ── History balls ── */
.lk-hist { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
.lk-hball {
  width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.lk-hball.win  { background: rgba(240,185,11,.22); color: var(--accent); border: 1px solid rgba(240,185,11,.45); }
.lk-hball.lose { background: rgba(246,70,93,.13); color: var(--lose);  border: 1px solid rgba(246,70,93,.3); }

/* ── Controls ── */
.lk-controls {
  margin: 12px 14px calc(14px + env(safe-area-inset-bottom)); padding: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 12px;
}
.lk-pick-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.lk-pay { color: var(--accent); letter-spacing: .5px; }

/* thin, one-row 0-9 picker */
.lk-digits { display: flex; gap: 5px; }
.lk-d-btn {
  flex: 1; min-width: 0; height: 42px; border-radius: 9px;
  font-size: clamp(13px, 4vw, 16px); font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--panel-2); border: 1.5px solid var(--line); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, box-shadow .15s, transform .07s ease;
}
.lk-d-btn:active:not(:disabled) { transform: scale(.9); }
.lk-d-btn.selected {
  background: rgba(240,185,11,.16); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 14px rgba(240,185,11,.34), inset 0 0 10px rgba(240,185,11,.1);
}
.lk-d-btn:disabled { opacity: .45; }

/* spin button */
.lucky-game .launch-btn {
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #1a1300; font-weight: 800;
  box-shadow: 0 6px 18px rgba(240,185,11,.3);
  transition: transform .07s ease, filter .15s ease, box-shadow .25s ease;
}
.lucky-game .launch-btn:not(:disabled) { animation: lk-btn-glow 2.3s ease-in-out infinite; }
.lucky-game .launch-btn:disabled { background: var(--panel-2); color: var(--muted); box-shadow: none; animation: none; }
.lucky-game .launch-btn:active:not(:disabled) { transform: scale(.985); }
@keyframes lk-btn-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(240,185,11,.28); }
  50%       { box-shadow: 0 8px 28px rgba(240,185,11,.52); }
}

/* ── Mobile bottom nav ── */
@media (max-width: 879px) {
  .lucky-game { padding-bottom: 74px; }
  .lucky-game .mybets { display: none; }
  .lucky-game.view-plays .mybets { display: block; min-height: 60vh; }
  .lucky-game.view-plays .lk-stage,
  .lucky-game.view-plays .lk-controls { display: none; }
}