/* 777 Slots — casino cabinet styling.
   Layout primitives are in Tailwind on the page; this file owns the
   bits that don't fit utility classes well: the reel strip animation,
   brushed-metal frame, payline glow, and win flash. */

:root {
  --reel-w: 110px;
  --reel-h: 130px;
  --symbol-h: 130px;        /* one symbol == one reel-window height */
  --reel-duration: 1200ms;  /* JS overrides per-reel for the stagger */
}

.cabinet {
  background:
    radial-gradient(ellipse at top, #4a0a3d 0%, #1a0418 50%, #050108 100%);
  border: 1px solid rgba(220, 80, 180, 0.2);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.7),
    0 20px 60px -10px rgba(160, 30, 100, 0.4);
}

/* Brushed-metal frame around the trio of reels. */
.reel-frame {
  background: linear-gradient(180deg, #b8b8b8, #555 20%, #2a2a2a 50%, #555 80%, #b8b8b8);
  padding: 8px;
  border-radius: 14px;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.7),
    0 6px 16px rgba(0, 0, 0, 0.5);
}

.reel-window {
  width: var(--reel-w);
  height: var(--reel-h);
  overflow: hidden;
  background: #0a0a0f;
  border-radius: 6px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
  position: relative;
}

.reel-strip {
  display: flex;
  flex-direction: column;
  /* Animation now driven by Web Animations API in slot777.js — the
     transform property is set imperatively, no CSS transition. */
  will-change: transform;
}

/* Motion blur during the fast / mid spin. JS removes this class
   partway through the deceleration so the symbols become readable as
   they slow. The vertical scale (1.04, 0.96) gives a slight stretch
   that reads as speed without making text unreadable. */
.reel-strip.spinning > .reel-cell {
  filter: blur(2.5px);
  transform: scaleY(1.04);
}

.reel-strip > .reel-cell {
  height: var(--symbol-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  line-height: 1;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
  user-select: none;
}

/* The "BAR" symbol is text rather than an emoji — make it look like a
   classic casino BAR with a gold gradient. */
.reel-cell .bar-symbol {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #facc15, #b45309);
  color: #1a0418;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* The 7 — bigger and red so it pops as the jackpot symbol. */
.reel-cell .seven-symbol {
  font-size: 78px;
  filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.5));
}

/* Glowing center payline behind the middle row of symbols. */
.payline-glow {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #fde047, transparent);
  box-shadow: 0 0 16px 4px rgba(253, 224, 71, 0.55);
  pointer-events: none;
  z-index: 5;
}

/* Win highlight — flashes the reel-frame when a triple lands. */
.win-flash {
  animation: winflash 1.2s ease-out 2;
}

@keyframes winflash {
  0%, 100% { box-shadow: 0 0 0 transparent,
                          inset 0 0 12px rgba(0, 0, 0, 0.7); }
  50%      { box-shadow: 0 0 36px 10px rgba(253, 224, 71, 0.95),
                          inset 0 0 12px rgba(0, 0, 0, 0.7); }
}

/* Chunky SPIN button with a press animation. */
.spin-btn {
  background: linear-gradient(180deg, #fbbf24, #d97706);
  color: #1a0418;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 0 #92400e, inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  transition: transform 80ms ease, box-shadow 80ms ease, opacity 200ms ease;
}
.spin-btn:hover:not(:disabled) { filter: brightness(1.05); }
.spin-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #92400e, inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.spin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: translateY(2px);
  box-shadow: 0 6px 0 #92400e, inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Outcome pills */
.s-pill {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.s-pill-jackpot { background: linear-gradient(90deg, #facc15, #f59e0b);
                  color: #1a0418;
                  box-shadow: 0 0 24px rgba(253, 224, 71, 0.7); }
.s-pill-win     { background: rgba(16,185,129,0.20); color: #34d399; }
.s-pill-refund  { background: rgba(167,139,250,0.18); color: #c4b5fd; }
.s-pill-loss    { background: rgba(113,113,122,0.20); color: #a1a1aa; }

/* +amount popup that floats up from the cabinet on a win */
.win-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8),
               0 0 12px rgba(253, 224, 71, 0.6);
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}
.win-popup.show { animation: popup 1.6s ease-out; }
@keyframes popup {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  60%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(0.95); }
}

.chip-amt {
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.4);
  transition: background 80ms;
}
.chip-amt:hover  { background: rgba(251, 191, 36, 0.22); }
.chip-amt.active { background: rgba(251, 191, 36, 0.32);
                   border-color: rgba(251, 191, 36, 0.8); }