/* ═══════════════════════════════════════════════════════════
   QUYẾT CHIẾN PREMIUM TT85 — style.css v3.0
   Premium Casino Design System
   © TT85 Premium Gaming
   ═══════════════════════════════════════════════════════════ */

/* ─── FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Rye&family=Bebas+Neue&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Brand Colors */
  --gold-bright:   #FFE066;
  --gold-main:     #FFD700;
  --gold-mid:      #E8B800;
  --gold-deep:     #C89400;
  --gold-dark:     #8B6914;
  --amber:         #FF8C00;
  --amber-dark:    #CC5500;
  --crimson:       #CC2200;
  --crimson-light: #FF4422;
  --brown-deep:    #1A0800;
  --brown-mid:     #2A1000;
  --brown-light:   #3D1A00;

  /* Win Tier Colors */
  --win-color:         #FFD700;
  --bigwin-color:      #FF8C00;
  --megawin-color:     #FF44CC;
  --epicwin-color:     #6644FF;
  --legendary-color:   #FF2200;
  --jackpot-color:     #FFFFFF;

  /* Shadows / Glows */
  --glow-gold:    0 0 20px rgba(255,215,0,.7), 0 0 60px rgba(255,160,0,.4);
  --glow-amber:   0 0 20px rgba(255,140,0,.8), 0 0 50px rgba(255,80,0,.4);
  --glow-red:     0 0 20px rgba(255,50,0,.9),  0 0 60px rgba(200,0,0,.5);
  --glow-white:   0 0 30px rgba(255,255,255,.9), 0 0 80px rgba(255,255,255,.5);

  /* Timing */
  --spin-normal:  2400ms;
  --spin-turbo:    700ms;
  --bounce:        220ms;
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-premium:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html, body { width: 100%; height: 100%; }

/* ─── BODY ──────────────────────────────────────────────── */
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: 'Cinzel', serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding-top: max(8px, env(safe-area-inset-top, 8px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ─── CANVAS LAYERS ─────────────────────────────────────── */
#bg-canvas,
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#bg-canvas      { z-index: -1; }
#particle-canvas{ z-index: 9001; }

/* ─── BACKGROUND ────────────────────────────────────────── */
#bg-layer {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -2;
  overflow: hidden;
}
#bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: bgBreath 12s ease-in-out infinite;
}
@keyframes bgBreath {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.025); }
}
#bg-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.28);
  transition: background 1s ease;
}
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 40%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* Ambient lights */
.ambient-light {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: ambientPulse 4s ease-in-out infinite alternate;
}
.al-1 {
  width: 280px; height: 280px;
  top: 5%; left: -8%;
  background: radial-gradient(circle, rgba(255,140,30,.14) 0%, transparent 70%);
  animation-duration: 5.2s;
  animation-delay: 0s;
}
.al-2 {
  width: 240px; height: 240px;
  top: 10%; right: -6%;
  background: radial-gradient(circle, rgba(255,190,60,.12) 0%, transparent 70%);
  animation-duration: 4.8s;
  animation-delay: -1.5s;
}
.al-3 {
  width: 200px; height: 200px;
  bottom: 15%; left: 5%;
  background: radial-gradient(circle, rgba(200,100,0,.1) 0%, transparent 70%);
  animation-duration: 6s;
  animation-delay: -2.3s;
}
.al-4 {
  width: 260px; height: 260px;
  bottom: 10%; right: 5%;
  background: radial-gradient(circle, rgba(255,160,40,.11) 0%, transparent 70%);
  animation-duration: 7s;
  animation-delay: -3.1s;
}
@keyframes ambientPulse {
  0%   { opacity: 0.6; transform: scale(0.9) translate(0,0); }
  100% { opacity: 1;   transform: scale(1.1) translate(5px,-8px); }
}

/* Free spin mode — ambient glow tint */
body.freespin-mode .ambient-light { filter: blur(60px) hue-rotate(20deg); }

/* ─── SCREEN FX ─────────────────────────────────────────── */
#screen-flash {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0;
  background: rgba(255,220,80,0.18);
}
#screen-vignette {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.35) 100%);
}

/* ─── TT85 BRANDING ─────────────────────────────────────── */
#tt85-brand {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  right: max(14px, env(safe-area-inset-right, 14px));
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.3s;
}
#tt85-brand:hover { opacity: 0.85; }
.tt85-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(16px, 3vw, 22px);
  letter-spacing: 3px;
  background: linear-gradient(180deg, #FFE066, #FFD700, #C89400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,200,0,.5));
}
.tt85-sub {
  font-family: 'Cinzel', serif;
  font-size: clamp(6px, 1.2vw, 8px);
  letter-spacing: 4px;
  color: rgba(255,210,100,0.7);
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 1px;
}

/* ─── TOP BAR ───────────────────────────────────────────── */
.top-bar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 10px));
  left: max(10px, env(safe-area-inset-left, 10px));
  right: max(10px, env(safe-area-inset-right, 10px));
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.top-bar > * { pointer-events: auto; }

/* Lobby button */
.btn-lobby {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(6px,1.8vw,9px) clamp(10px,2.5vw,16px);
  background: linear-gradient(135deg, #CC2000, #991800);
  border: 1.5px solid rgba(255,200,60,0.5);
  border-radius: 8px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: clamp(10px, 2.2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(180,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.btn-lobby:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(200,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-lobby:active { transform: translateY(0); }
.btn-lobby-icon { font-size: 0.9em; }

/* Connection status */
#connect-status {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: clamp(9px, 1.8vw, 11px);
  letter-spacing: 0.5px;
  color: #ccc;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.online  { background: #22DD66; box-shadow: 0 0 6px #22DD66; animation: dotPulse 1.8s infinite; }
.dot.offline { background: #FF4444; }
@keyframes dotPulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.35; }
}

/* Mute button */
.btn-icon-top {
  width: clamp(32px, 7vw, 40px);
  height: clamp(32px, 7vw, 40px);
  border: 1.5px solid rgba(255,200,60,0.4);
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: clamp(14px, 3vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  color: inherit;
}
.btn-icon-top:hover  { border-color: rgba(255,200,60,0.8); transform: scale(1.08); }
.btn-icon-top:active { transform: scale(0.94); }
.btn-icon-top.muted  { opacity: 0.55; }

/* ─── FREE SPIN HUD ─────────────────────────────────────── */
.freespin-hud {
  position: fixed;
  top: max(70px, calc(env(safe-area-inset-top) + 60px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  min-width: clamp(240px, 55vw, 360px);
  text-align: center;
  background: linear-gradient(135deg,
    rgba(50,25,0,0.92) 0%,
    rgba(80,40,0,0.95) 50%,
    rgba(50,25,0,0.92) 100%);
  border: 1px solid rgba(255,200,60,0.6);
  border-radius: 12px;
  padding: 10px 24px 12px;
  box-shadow: 0 0 30px rgba(255,180,0,0.35), inset 0 0 20px rgba(255,150,0,0.08);
  transition: all 0.4s var(--ease-premium);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.freespin-hud.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-15px);
  pointer-events: none;
}
.fs-hud-glow-top,
.fs-hud-glow-bottom {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,200,0,0.8), transparent);
  margin: 0 -24px;
}
.fs-hud-glow-top  { margin-bottom: 8px; }
.fs-hud-glow-bottom { margin-top: 8px; }
.fs-hud-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(14px, 3.5vw, 18px);
  letter-spacing: 4px;
  color: var(--gold-main);
  text-shadow: 0 0 12px rgba(255,215,0,0.8);
  margin-bottom: 8px;
}
.fs-hud-star {
  color: var(--gold-bright);
  font-size: 0.9em;
  animation: starTwinkle 1.4s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0%   { opacity: 0.5; text-shadow: none; }
  100% { opacity: 1; text-shadow: 0 0 8px var(--gold-main); }
}
.fs-hud-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.fs-hud-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.fs-hud-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 6vw, 36px);
  color: #fff;
  text-shadow: 0 0 14px rgba(255,200,0,1), 0 2px 0 rgba(0,0,0,0.9);
  line-height: 1;
  letter-spacing: 2px;
}
.fs-hud-caption {
  font-family: 'Cinzel', serif;
  font-size: clamp(7px, 1.5vw, 9px);
  color: rgba(255,200,80,0.75);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.fs-hud-divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(255,200,60,0.5), transparent);
}

/* ─── WIN OVERLAY ───────────────────────────────────────── */
.win-overlay {
  position: fixed; inset: 0;
  z-index: 9980;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  user-select: none;
}
.win-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
.win-overlay-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.82) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.win-overlay-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 40px;
  animation: winPopIn 0.35s var(--ease-out-back) forwards;
}
@keyframes winPopIn {
  0%   { transform: scale(0.4) rotate(-4deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Decorative elements */
.win-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}
.win-deco-line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  max-width: 80px;
}
.win-deco-diamond {
  font-size: 12px;
  opacity: 0.8;
}

/* Win tier label */
.win-tier-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 12vw, 80px);
  letter-spacing: 6px;
  line-height: 1;
  animation: winLabelPulse 0.8s ease-in-out infinite alternate;
}
@keyframes winLabelPulse {
  0%   { filter: brightness(1); }
  100% { filter: brightness(1.35); }
}

/* Win counter */
.win-counter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 8vw, 54px);
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.9), 0 0 20px rgba(255,255,255,0.4);
  line-height: 1.1;
}

/* WIN TIER STYLES */
.win-overlay.tier-win .win-tier-label {
  color: var(--win-color);
  text-shadow: 0 0 20px rgba(255,215,0,0.9), 0 0 50px rgba(255,160,0,0.6), 0 3px 0 rgba(0,0,0,0.9);
}
.win-overlay.tier-win .win-deco { color: var(--win-color); }

.win-overlay.tier-bigwin .win-tier-label {
  color: var(--bigwin-color);
  text-shadow: 0 0 25px rgba(255,140,0,1), 0 0 60px rgba(255,80,0,0.7), 0 3px 0 rgba(0,0,0,0.9);
}
.win-overlay.tier-bigwin .win-deco { color: var(--bigwin-color); }

.win-overlay.tier-mega .win-tier-label {
  font-size: clamp(44px, 14vw, 92px);
  color: var(--megawin-color);
  text-shadow: 0 0 30px rgba(255,50,200,1), 0 0 70px rgba(200,0,180,0.7), 0 3px 0 rgba(0,0,0,0.9);
}
.win-overlay.tier-mega .win-deco { color: var(--megawin-color); }

.win-overlay.tier-epic .win-tier-label {
  font-size: clamp(48px, 15vw, 100px);
  color: var(--epicwin-color);
  text-shadow: 0 0 30px rgba(100,60,255,1), 0 0 80px rgba(60,0,255,0.7), 0 3px 0 rgba(0,0,0,0.9);
  animation: epicPulse 0.6s ease-in-out infinite alternate;
}
@keyframes epicPulse {
  0%   { transform: scale(1);    filter: brightness(1); }
  100% { transform: scale(1.04); filter: brightness(1.5); }
}
.win-overlay.tier-epic .win-deco { color: var(--epicwin-color); }

.win-overlay.tier-legendary .win-tier-label {
  font-size: clamp(36px, 10vw, 72px);
  color: #fff;
  background: linear-gradient(135deg, #FF4400, #FF8800, #FFD700, #FF8800, #FF4400);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: legendaryShimmer 1.2s linear infinite;
  text-shadow: none;
  filter: none;
}
@keyframes legendaryShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.win-overlay.tier-legendary .win-deco { color: #FF8800; }

/* ─── JACKPOT FULL OVERLAY ──────────────────────────────── */
.jackpot-full-overlay {
  position: fixed; inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.jackpot-full-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.jackpot-full-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(80,40,0,0.95) 0%,
    rgba(20,8,0,0.98) 100%);
}
.jackpot-full-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px;
  animation: jackpotInner 0.5s var(--ease-out-back) forwards;
}
@keyframes jackpotInner {
  0%   { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.jackpot-stars-top,
.jackpot-stars-bottom {
  font-family: 'Cinzel', serif;
  font-size: clamp(14px, 3vw, 22px);
  color: var(--gold-main);
  letter-spacing: 8px;
  text-shadow: 0 0 12px rgba(255,215,0,0.8);
  animation: starSpin 4s linear infinite;
  display: block;
}
@keyframes starSpin {
  0%   { letter-spacing: 8px; opacity: 0.7; }
  50%  { letter-spacing: 14px; opacity: 1; }
  100% { letter-spacing: 8px; opacity: 0.7; }
}
.jackpot-crown {
  font-size: clamp(50px, 14vw, 90px);
  display: block;
  margin: 8px 0;
  animation: crownBounce 0.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 20px rgba(255,200,0,0.9));
}
@keyframes crownBounce {
  0%   { transform: translateY(0) rotate(-3deg) scale(1); }
  100% { transform: translateY(-10px) rotate(3deg) scale(1.06); }
}
.jackpot-full-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(60px, 18vw, 130px);
  letter-spacing: 8px;
  background: linear-gradient(135deg, #FFE066, #FFD700, #FF8C00, #FFD700, #FFE066);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: jackpotShimmer 1s linear infinite;
  text-shadow: none;
  line-height: 0.95;
  display: block;
}
@keyframes jackpotShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.jackpot-full-subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 2.5vw, 18px);
  letter-spacing: 5px;
  color: rgba(255,200,80,0.85);
  margin: 4px 0 16px;
  text-transform: uppercase;
}
.jackpot-win-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 8vw, 58px);
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 0 30px rgba(255,220,0,1), 0 0 60px rgba(255,160,0,0.8), 0 3px 0 rgba(0,0,0,0.9);
  animation: amountPulse 0.6s ease-in-out infinite alternate;
}
@keyframes amountPulse {
  0%   { text-shadow: 0 0 30px rgba(255,220,0,1), 0 0 60px rgba(255,160,0,0.8), 0 3px 0 rgba(0,0,0,0.9); }
  100% { text-shadow: 0 0 50px rgba(255,255,0,1), 0 0 100px rgba(255,200,0,0.9), 0 3px 0 rgba(0,0,0,0.9); }
}

/* ─── WIN MESSAGE (legacy) ──────────────────────────────── */
#win-message {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9970;
  font-family: 'Rye', serif;
  font-size: clamp(28px, 8vw, 54px);
  font-weight: 900;
  color: var(--gold-main);
  text-shadow: 0 0 20px rgba(255,220,60,1), 0 0 50px rgba(255,160,0,0.9), 0 4px 0 rgba(0,0,0,0.9);
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.5);
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: transform 0.24s var(--ease-out-back), opacity 0.18s;
  letter-spacing: 3px;
  max-width: 90vw;
}
#win-message.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.x-multiplier-win-msg {
  position: fixed; top: 36%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9970;
  font-family: 'Rye', serif;
  font-size: clamp(20px, 5.5vw, 36px);
  font-weight: 900;
  color: #FF5500;
  text-shadow: 0 0 20px rgba(255,100,0,1), 0 0 50px rgba(255,60,0,0.9), 0 4px 0 rgba(0,0,0,0.95);
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: transform 0.28s var(--ease-out-back), opacity 0.2s;
  letter-spacing: 1px;
  white-space: nowrap;
  max-width: 90vw;
}
.x-multiplier-win-msg.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* ─── SLOT WRAPPER ──────────────────────────────────────── */
.slot-wrapper {
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 8px 4px 10px;
  gap: 0;
  margin: auto;
  overflow: hidden;
}

/* ─── SLOT MACHINE ──────────────────────────────────────── */
.slot-machine {
  position: relative;
  width: min(540px, 100vw - 8px);
  height: calc(min(540px, 100vw - 8px) * 1.185);
  flex-shrink: 0;
  transition: box-shadow 0.6s ease;
}

/* Free spin gold glow around machine */
.slot-machine.freespin-glow {
  box-shadow:
    0 0 40px rgba(255,200,0,0.35),
    0 0 80px rgba(255,150,0,0.2),
    0 0 120px rgba(255,100,0,0.12);
  animation: machineGoldPulse 2.2s ease-in-out infinite alternate;
}
@keyframes machineGoldPulse {
  0%   { box-shadow: 0 0 40px rgba(255,200,0,0.35), 0 0 80px rgba(255,150,0,0.2); }
  100% { box-shadow: 0 0 60px rgba(255,220,0,0.5),  0 0 120px rgba(255,180,0,0.3); }
}

/* Machine shake on win */
.slot-machine.shake-machine {
  animation: machineShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes machineShake {
  0%,100% { transform: translateX(0) rotate(0); }
  12%     { transform: translateX(-9px) rotate(-0.5deg); }
  25%     { transform: translateX(9px)  rotate(0.5deg); }
  37%     { transform: translateX(-7px) rotate(-0.4deg); }
  50%     { transform: translateX(7px)  rotate(0.4deg); }
  62%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
  87%     { transform: translateX(-2px); }
}

/* Mega shake for Jackpot */
body.mega-shake {
  animation: bodyMegaShake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes bodyMegaShake {
  0%,100% { transform: translate(0,0); }
  10%     { transform: translate(-12px,-4px); }
  20%     { transform: translate(12px,4px); }
  30%     { transform: translate(-10px,-3px); }
  40%     { transform: translate(10px,3px); }
  50%     { transform: translate(-6px,-2px); }
  60%     { transform: translate(6px,2px); }
  70%     { transform: translate(-3px,-1px); }
  80%     { transform: translate(3px,1px); }
}

/* Frame */
.slot-frame {
  position: absolute; top: -1.5%; left: 0;
  width: 100%; height: 107.8%;
  object-fit: fill;
  z-index: 5;
  pointer-events: none;
}

/* ─── FREE SPIN BADGE ───────────────────────────────────── */
.free-spin-badge {
  position: absolute;
  top: 78px; right: -5px;
  z-index: 9;
  background: linear-gradient(135deg, #FF9000, #CC4400);
  border: 2px solid var(--gold-main);
  border-radius: 8px;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.3s var(--ease-out-back), opacity 0.2s;
  box-shadow: 0 0 16px rgba(255,140,0,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
}
.free-spin-badge.show { transform: scale(1); opacity: 1; }
.fs-badge-label {
  font-family: 'Rye', serif;
  font-size: 8px;
  color: var(--gold-bright);
  letter-spacing: 1px;
  line-height: 1.1;
}
.fs-badge-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,220,60,1);
  line-height: 1;
  letter-spacing: 1px;
}

/* ─── JACKPOT TICKER ────────────────────────────────────── */
.jackpot-ticker {
  position: absolute;
  top: 18%; left: 22%;
  width: 54%;
  height: 9%;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.jackpot-ticker-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(9px, 2.2vw, 13px);
  color: rgba(255,180,60,0.8);
  letter-spacing: 3px;
}
.jackpot-ticker-sep {
  font-size: clamp(8px, 1.8vw, 11px);
  color: rgba(255,180,0,0.6);
}
.jackpot-ticker-amount {
  font-family: 'Cinzel', serif;
  font-size: clamp(13px, 3.5vw, 20px);
  font-weight: 900;
  color: var(--gold-main);
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(255,210,50,1), 0 0 24px rgba(255,170,0,0.8), 0 2px 0 rgba(0,0,0,0.9);
  animation: jackpotGlow 2.4s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes jackpotGlow {
  0%,100% { text-shadow: 0 0 10px rgba(255,210,50,0.9), 0 0 22px rgba(255,170,0,0.7), 0 2px 0 #000; }
  50%     { text-shadow: 0 0 20px rgba(255,240,80,1),   0 0 44px rgba(255,200,0,1),   0 2px 0 #000; }
}

/* ─── REEL GRID ─────────────────────────────────────────── */
.slot-grid {
  position: absolute;
  left: 13%;
  top: 27%;
  width: 73%;
  height: 71%;
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: stretch;
}

/* Reel column */
.reel-col-wrapper {
  position: relative;
  overflow: hidden;
  flex: 1;
  border-radius: 4px;
}
.reel-col-wrapper.reel-spinning .reel-strip {
  /* Motion blur applied via JS */
}
.reel-col-wrapper.reel-landing {
  animation: reelLandFlash 0.32s ease-out;
}
@keyframes reelLandFlash {
  0%   { background: rgba(255,200,80,0.3); }
  100% { background: transparent; }
}

/* Reel strip */
.reel-strip {
  position: absolute;
  width: 100%;
  top: 0;
  will-change: transform;
  transition: none;
}

/* Symbol cell */
.reel-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Cell inner shine */
.reel-cell::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  border-radius: 3px 3px 0 0;
  pointer-events: none;
  z-index: 2;
}

/* Symbol images */
.reel-cell img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(255,160,40,0.1));
}

/* Win highlight - Harmonized for UI-2C.3.2 (Animated Gold Border & Continuous Lively Bounce) */
.reel-cell.win-symbol {
  border: 2px solid #ffd700 !important;
  border-radius: 6px;
  background: linear-gradient(150deg, rgba(80, 40, 0, 0.85), rgba(40, 18, 0, 0.85)) !important;
  z-index: 5;
  box-sizing: border-box;
  animation: winGoldBorderPulse 0.75s ease-in-out infinite alternate !important;
  overflow: visible !important;
}

@keyframes winGoldBorderPulse {
  0% {
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.75), inset 0 0 8px rgba(255, 200, 0, 0.4);
  }
  50% {
    border-color: #fff6a0;
    box-shadow: 0 0 24px rgba(255, 230, 60, 1), 0 0 36px rgba(255, 190, 20, 0.75), inset 0 0 14px rgba(255, 215, 0, 0.65);
  }
  100% {
    border-color: #ffb700;
    box-shadow: 0 0 32px rgba(255, 180, 0, 1), 0 0 46px rgba(255, 140, 0, 0.8), inset 0 0 18px rgba(255, 190, 0, 0.75);
  }
}

/* Winning Symbol Bounce Animation:
 * Energetic pop in the first 250ms (for fast feedback in Turbo),
 * then rhythmic breathing pulse throughout the 1.5s Normal hold time so the grid is never dead!
 */
@keyframes winSymbolBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.15); }
  50%  { transform: scale(0.98); }
  75%  { transform: scale(1.10); }
  100% { transform: scale(1.05); }
}

@keyframes winSymbolPulse {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.11); }
}

.reel-cell.win-symbol img,
.reel-cell.win-bounce img {
  animation: winSymbolBounce 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards,
             winSymbolPulse 0.7s ease-in-out 0.35s infinite alternate;
  filter:
    drop-shadow(0 0 12px rgba(255, 215, 0, 0.95))
    drop-shadow(0 0 24px rgba(255, 165, 0, 0.65));
}

/* Wild Symbol Win Highlight (distinct cyan-gold aura) */
.reel-cell.wild-win {
  border: 2px solid #00f0ff !important;
  border-radius: 6px;
  background: linear-gradient(150deg, rgba(0, 48, 80, 0.85), rgba(0, 24, 50, 0.85)) !important;
  z-index: 6;
  box-sizing: border-box;
  animation: wildCyanBorderPulse 0.85s ease-in-out infinite alternate !important;
  overflow: visible !important;
}

@keyframes wildCyanBorderPulse {
  0% {
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.65), inset 0 0 8px rgba(0, 212, 255, 0.35);
  }
  50% {
    border-color: #a6f8ff;
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.95), inset 0 0 14px rgba(0, 240, 255, 0.6);
  }
  100% {
    border-color: #00f0ff;
    box-shadow: 0 0 30px rgba(0, 255, 255, 1), 0 0 42px rgba(0, 200, 255, 0.65), inset 0 0 18px rgba(0, 240, 255, 0.75);
  }
}

.reel-cell.wild-win img {
  animation: winSymbolBounce 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards,
             winSymbolPulse 0.7s ease-in-out 0.35s infinite alternate;
  filter:
    drop-shadow(0 0 14px rgba(0, 240, 255, 0.95))
    drop-shadow(0 0 26px rgba(0, 180, 255, 0.65));
}

/* Dim non-winning symbols */
.reel-cell.cell-dimmed img {
  opacity: 0.5;
  filter: grayscale(0.35) brightness(0.72);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Premium symbol win highlight - maintains gold border with rich amber aura */
.reel-cell.premium-win {
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.95), inset 0 0 16px rgba(255, 200, 0, 0.55);
}

/* ─── X MULTIPLIER OVERLAY ──────────────────────────────── */
.reel-cell .x-multiplier {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; border-radius: 4px;
  background: radial-gradient(circle, rgba(255,60,0,0.22) 0%, transparent 70%);
  animation: xAppear 0.35s var(--ease-out-back) forwards;
}
.x-multiplier .x-badge {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 22px;
  color: #FF4400;
  text-shadow: 0 0 8px rgba(255,80,0,1), 0 0 20px rgba(255,120,0,0.9), 0 2px 0 rgba(0,0,0,0.95);
  -webkit-text-stroke: 1px rgba(255,180,0,0.7);
  letter-spacing: -1px; line-height: 1;
  animation: xPulse 1.1s ease-in-out infinite;
}
.reel-cell.has-multiplier {
  border-color: #FF4400 !important;
  box-shadow: 0 0 16px rgba(255,80,0,0.9), inset 0 0 8px rgba(255,60,0,0.2) !important;
}
@keyframes xAppear {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes xPulse {
  0%,100% { text-shadow: 0 0 8px rgba(255,80,0,1), 0 0 20px rgba(255,120,0,0.9), 0 2px 0 #000; }
  50%     { text-shadow: 0 0 18px rgba(255,120,0,1), 0 0 40px rgba(255,180,0,1), 0 0 60px rgba(255,80,0,0.6), 0 2px 0 #000; }
}

/* ─── CONTROLS ROW ──────────────────────────────────────── */
.control-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 3.5vw, 20px);
  margin-top: 4px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  padding: 0 10px;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  padding: 0;
}
button:active { transform: scale(0.9) !important; }

/* SPIN BUTTON */
.spin-btn {
  width: clamp(80px, 25vw, 140px);
  height: clamp(80px, 25vw, 140px);
  position: relative;
  animation: spinBtnGlow 1.8s ease-in-out infinite;
}
.spin-btn:disabled {
  animation: none;
  filter: brightness(0.4) saturate(0.2);
  cursor: not-allowed;
}
.spin-btn.spin-pressed { animation: spinPressFlash 0.22s ease-out !important; }
@keyframes spinPressFlash {
  0%   { filter: brightness(2.2) drop-shadow(0 0 24px rgba(255,255,100,1)); }
  100% { filter: brightness(1); }
}
.spin-btn img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}
.spin-btn-glow {
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,60,0.22) 0%, transparent 70%);
  animation: spinGlowRing 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes spinBtnGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,200,60,0.4)); }
  50%     { filter: drop-shadow(0 0 22px rgba(255,230,80,1)) drop-shadow(0 0 44px rgba(255,180,0,0.55)); }
}
@keyframes spinGlowRing {
  0%,100% { transform: scale(0.9); opacity: 0.4; }
  50%     { transform: scale(1.1); opacity: 0.9; }
}

/* Small buttons */
.small-btn {
  width: clamp(70px, 25vw, 140px);
  height: clamp(36px, 13vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.small-btn img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
  flex: 1;
}
.small-btn .btn-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(7px, 1.5vw, 9px);
  letter-spacing: 2px;
  color: rgba(255,200,80,0.7);
  line-height: 1;
  display: none; /* Hidden on small screens */
}
.small-btn.active {
  filter: brightness(1.35) drop-shadow(0 0 10px rgba(255,220,60,0.9));
  animation: activeGlow 1.4s ease-in-out infinite alternate;
}
@keyframes activeGlow {
  0%   { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,200,60,0.7)); }
  100% { filter: brightness(1.5) drop-shadow(0 0 16px rgba(255,240,80,1)); }
}
.small-btn:hover:not(:active) { filter: brightness(1.12); }

/* ─── INFO PANEL ────────────────────────────────────────── */
.info-panel {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  margin-top: 6px;
  padding: 0 4px;
  flex-shrink: 0;
}
.info-box {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  border-radius: 6px;
}
#box-balance { max-width: 146px; height: clamp(48px, 11.5vw, 63px); }
#box-bet     { max-width: 169px; height: clamp(48px, 11.5vw, 63px); }
#box-win     { max-width: 146px; height: clamp(48px, 11.5vw, 63px); }
.info-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill; display: block;
}
.info-content {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  gap: 1px;
  padding: 2px 4px;
  transform: translateY(6px);
}
.info-sublabel {
  font-family: 'Rye', serif;
  font-size: 6px;
  letter-spacing: 1.5px;
  color: rgba(255,208,80,0.7);
  line-height: 1;
  text-transform: uppercase;
}
.info-value {
  font-family: 'Cinzel', serif;
  font-size: clamp(9px, 2.1vw, 12px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  line-height: 1;
  white-space: nowrap;
}

/* BET CONTROLS */
.bet-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 4vw, 24px);
  width: 100%;
}
.bet-controls button {
  width: clamp(20px, 4.6vw, 26px);
  height: clamp(20px, 4.6vw, 26px);
  border-radius: 4px;
  background: linear-gradient(180deg, #F2CA42, #9A6200);
  color: #1A0800;
  font-size: clamp(13px, 3vw, 17px);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 6px rgba(240,200,60,0.22);
  line-height: 1;
  flex-shrink: 0;
  transform: translateY(-2px);
  transition: filter 0.12s;
}
.bet-controls button:hover { filter: brightness(1.15); }
#bet-amount {
  font-family: 'Cinzel', serif;
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 700;
  color: #fff;
  min-width: 40px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  line-height: 1;
  white-space: nowrap;
}

/* WIN TEXT */
.win-text {
  color: #FFE870;
  text-shadow: 0 0 8px rgba(255,230,80,0.5);
}
.win-text.win-flash { animation: winFlash 0.4s ease-in-out 3; }
@keyframes winFlash {
  0%,100% { color: #FFE870; text-shadow: 0 0 8px rgba(255,230,80,0.5); }
  50%     { color: #fff;    text-shadow: 0 0 22px rgba(255,255,100,1), 0 0 44px rgba(255,220,0,0.9); }
}

/* ─── TOAST ─────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 99998;
  padding: 10px 22px;
  border-radius: 30px;
  font-family: 'Rye', serif;
  font-size: clamp(12px, 2.8vw, 15px);
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-info     { background: rgba(20,20,40,0.88); border: 1px solid rgba(255,255,255,0.18); color: #eee; }
.toast-error    { background: rgba(180,20,20,0.88); border: 1px solid #FF4444; color: #fff; }
.toast-freespin { background: rgba(20,100,20,0.88); border: 1px solid #44FF88; color: #AFFFCC; }

/* ─── DYNAMIC FX CLASSES ────────────────────────────────── */
.combo-popup {
  position: fixed;
  top: 30%; left: 50%;
  transform: translateX(-50%);
  color: var(--gold-main);
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 900;
  font-family: 'Rye', serif;
  text-shadow: 0 0 20px #FF8C00, 0 2px 0 #000;
  pointer-events: none;
  z-index: 9975;
  animation: comboPopAnim 1.4s ease-out forwards;
  white-space: nowrap;
}
@keyframes comboPopAnim {
  0%   { opacity: 0; transform: translateX(-50%) scale(.6); }
  20%  { opacity: 1; transform: translateX(-50%) scale(1.2); }
  60%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(.9); }
}

.win-float {
  position: fixed;
  color: var(--gold-main);
  font-size: clamp(18px, 4vw, 28px);
  font-family: 'Rye', serif;
  font-weight: 800;
  text-shadow: 0 0 12px #FF8C00, 0 2px 0 #000;
  pointer-events: none;
  z-index: 9975;
  animation: winFloatAnim 1.9s ease-out forwards;
  white-space: nowrap;
}
@keyframes winFloatAnim {
  0%   { opacity: 0; transform: translateY(0) scale(.8); }
  20%  { opacity: 1; transform: translateY(-10px) scale(1.1); }
  80%  { opacity: 1; transform: translateY(-40px) scale(1); }
  100% { opacity: 0; transform: translateY(-70px) scale(.9); }
}

.near-miss-banner {
  position: fixed;
  top: 40%; left: 50%;
  transform: translateX(-50%);
  color: #FF4444;
  font-family: 'Rye', serif;
  font-size: clamp(20px, 5vw, 32px);
  font-weight: 900;
  text-shadow: 0 0 16px #FF0000, 0 2px 0 #000;
  pointer-events: none;
  z-index: 9975;
  animation: comboPopAnim 2.1s ease-out forwards;
  white-space: nowrap;
}

.multi-stamp {
  position: fixed;
  top: 35%; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 7vw, 56px);
  letter-spacing: 4px;
  text-shadow: 0 0 30px var(--gold-main), 0 0 60px var(--amber);
  pointer-events: none;
  z-index: 9975;
  animation: stampAnim 0.8s ease-out forwards;
}
@keyframes stampAnim {
  0%   { opacity: 0; transform: translateX(-50%) scale(2.5); }
  40%  { opacity: 1; transform: translateX(-50%) scale(.95); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

.upgrade-popup {
  position: fixed;
  color: #00FFCC;
  font-family: 'Cinzel', serif;
  font-size: clamp(14px, 3vw, 20px);
  font-weight: 700;
  text-shadow: 0 0 10px #00FFCC;
  pointer-events: none;
  z-index: 9975;
  animation: winFloatAnim 1.6s ease-out forwards;
  white-space: nowrap;
}

/* ─── FREE SPIN MODE BODY ───────────────────────────────── */
body.freespin-mode #bg-overlay {
  background: linear-gradient(180deg,
    rgba(40,18,0,0.72) 0%,
    rgba(20,8,0,0.58) 100%);
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
/* Mobile portrait < 430px */
@media (max-width: 430px) {
  .control-row { gap: clamp(5px, 2.5vw, 14px); padding: 0 6px; }
  .spin-btn    { width: clamp(72px, 22vw, 120px); height: clamp(72px, 22vw, 120px); }
  .small-btn   { width: clamp(62px, 22vw, 110px); height: clamp(32px, 11vw, 60px); }
  .info-value  { font-size: clamp(8px, 1.9vw, 11px); }
  #bet-amount  { font-size: clamp(8px, 1.8vw, 10px); min-width: 32px; }
  .bet-controls button {
    width: clamp(18px, 4vw, 24px);
    height: clamp(18px, 4vw, 24px);
    font-size: clamp(11px, 2.8vw, 15px);
  }
  .bet-controls { gap: clamp(5px, 3.5vw, 18px); }
}

/* Tiny screen < 360px */
@media (max-width: 360px) {
  .info-panel { gap: 0; padding: 0 1px; }
  #box-balance, #box-win { max-width: 108px; }
  #box-bet { max-width: 128px; }
  .jackpot-ticker-amount { font-size: 10px; letter-spacing: 0; }
  .control-row { gap: 4px; }
  .spin-btn    { width: 64px; height: 64px; }
  .small-btn   { width: 58px; height: 30px; }
}

/* Landscape mobile */
@media (max-height: 600px) and (orientation: landscape) {
  .slot-wrapper { padding: 0 4px 2px; }
  .slot-machine {
    width: min(360px, 52vh);
    height: calc(min(360px, 52vh) * 1.185);
  }
  .control-row { margin-top: 1px; gap: 8px; }
  .info-panel  { margin-top: 2px; }
  .spin-btn  { width: clamp(58px, 15vw, 90px); height: clamp(58px, 15vw, 90px); }
  .small-btn { width: clamp(52px, 13vw, 78px); height: clamp(26px, 7.5vw, 44px); }
  .freespin-hud { top: 6px; padding: 6px 16px 8px; }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .slot-wrapper { padding: 12px 0 16px; }
  .small-btn .btn-label { display: block; }
  .slot-machine {
    width: min(520px, 90vw, calc((100dvh - 120px) / 1.185));
    height: calc(min(520px, 90vw, calc((100dvh - 120px) / 1.185)) * 1.185);
  }
}

/* Desktop 1080p+ */
@media (min-width: 1200px) {
  .slot-machine {
    width: min(540px, 44vw, calc((100dvh - 140px) / 1.185));
    height: calc(min(540px, 44vw, calc((100dvh - 140px) / 1.185)) * 1.185);
  }
  body { align-items: center; }
}

/* 2K+ */
@media (min-width: 2000px) {
  .slot-machine { width: 580px; height: calc(580px * 1.185); }
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH v4.0 — BACKEND COMPATIBILITY FIXES
   Grid: 6 cols × 5 rows (backend GRID = { cols:6, rows:5 })
   ═══════════════════════════════════════════════════════════════════ */

/* ─── WILD COLUMN GLOW ──────────────────────────────────── */
.wild-col-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(ellipse at center,
    rgba(0,180,255,0.22) 0%,
    transparent 70%);
  box-shadow:
    inset 0 0 20px rgba(0,200,255,0.35),
    inset 0 0 40px rgba(0,160,255,0.18);
  border-radius: 4px;
  border: 1px solid rgba(0,220,255,0.4);
  animation: wildColPulse 0.8s ease-in-out infinite alternate;
}
@keyframes wildColPulse {
  0%   { box-shadow: inset 0 0 18px rgba(0,200,255,0.3), inset 0 0 36px rgba(0,160,255,0.15); }
  100% { box-shadow: inset 0 0 28px rgba(80,230,255,0.55), inset 0 0 56px rgba(0,200,255,0.3); }
}

/* ─── CASCADE REMOVE & SPARKLE ANIMATION ─────────────────── */
.reel-cell.cascade-remove img {
  transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), transform 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0 !important;
  transform: scale(0.35) !important;
}

.cascade-sparkle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 15%, #ffd700 45%, rgba(255, 140, 0, 0.75) 75%, transparent 100%);
  pointer-events: none;
  z-index: 6;
  animation: sparkleFlash 0.26s cubic-bezier(0.15, 0.85, 0.35, 1.2) forwards;
}

@keyframes sparkleFlash {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { transform: scale(1.6); opacity: 1; }
  70%  { transform: scale(2.2); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ─── CASCADE DROP ANIMATION ────────────────────────────── */
@keyframes cascadeDrop {
  0%   { transform: translateY(-36px) scale(0.92); opacity: 0; }
  75%  { transform: translateY(4px) scale(1.03);  opacity: 1; }
  100% { transform: translateY(0) scale(1);        opacity: 1; }
}
.reel-cell.cascade-drop img {
  animation: cascadeDrop 0.28s cubic-bezier(0.25, 1, 0.5, 1.15) forwards;
}

/* ─── UPGRADE FLASH ─────────────────────────────────────── */
@keyframes upgradeFlash {
  0%   { filter: brightness(1) saturate(1); transform: scale(1); }
  40%  { filter: brightness(3) saturate(0); transform: scale(1.3); }
  100% { filter: brightness(1) saturate(1); transform: scale(1); }
}
.reel-cell.upgrading img {
  animation: upgradeFlash 0.4s ease forwards;
}

/* ─── SCATTER TRIGGER FLASH ─────────────────────────────── */
.reel-cell.scatter-hit {
  animation: scatterPulse 0.6s ease 3;
}
@keyframes scatterPulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 20px rgba(0,255,120,0.8), inset 0 0 16px rgba(0,255,120,0.4); }
}

/* ─── X-MULTIPLIER MESSAGE ENHANCE ─────────────────────── */
.x-multiplier-win-msg {
  font-size: clamp(18px, 5vw, 32px);
  letter-spacing: 2px;
}

/* WIN SYMBOL ANIMATIONS (GLOW & SHIMMER) */
.win-symbol {
  border-radius: 6px;
  position: relative;
  overflow: visible;
}

.win-symbol::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(30deg) translateY(-100%);
  animation: shimmerEffect 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes shimmerEffect {
  0% { transform: rotate(30deg) translateY(-100%) translateX(-100%); }
  100% { transform: rotate(30deg) translateY(100%) translateX(100%); }
}

/* SAFE AREA ADJUSTMENTS FOR MOBILE */
@supports (padding: max(0px)) {
  .slot-wrapper {
    padding-left: env(safe-area-inset-left, 4px);
    padding-right: env(safe-area-inset-right, 4px);
  }
}

/* ═══════════════════════════════════════════════════════════
   BUY FREE SPIN BUTTON & MODAL (Phase D3)
   ═══════════════════════════════════════════════════════════ */
.buy-fs-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 2px;
  z-index: 10;
  position: relative;
}

.btn-buy-freespin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FF9000 0%, #D85A00 50%, #9E2A00 100%);
  border: 1.5px solid var(--gold-main);
  border-radius: 20px;
  padding: 6px 18px;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(11px, 2.8vw, 13px);
  color: #FFF;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 10px rgba(255,215,0,0.7);
  box-shadow: 0 0 14px rgba(255,140,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  animation: buyFsPulse 2.4s ease-in-out infinite;
}

.btn-buy-freespin:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 0 20px rgba(255,180,0,0.8), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

.btn-buy-freespin:active:not(:disabled) {
  transform: scale(0.95);
}

.btn-buy-freespin:disabled,
body.freespin-mode .btn-buy-freespin {
  opacity: 0.45;
  filter: grayscale(0.8);
  cursor: not-allowed;
  animation: none;
  pointer-events: none;
}

.buy-fs-icon {
  font-size: 14px;
}

@keyframes buyFsPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,140,0,0.45); }
  50%      { box-shadow: 0 0 22px rgba(255,215,0,0.8), 0 0 35px rgba(255,140,0,0.4); }
}

/* Modal Backdrop & Card */
.buy-fs-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.buy-fs-modal.hidden {
  display: none !important;
}

.buy-fs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.buy-fs-card {
  position: relative;
  z-index: 2;
  width: min(500px, 94vw);
  background: radial-gradient(circle at 50% 0%, #3D1A00 0%, #1A0800 65%, #100400 100%);
  border: 2px solid var(--gold-main);
  border-radius: 14px;
  box-shadow: 0 0 35px rgba(255,140,0,0.4), inset 0 0 20px rgba(0,0,0,0.8);
  padding: 18px 16px 20px;
  animation: modalAppear 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalAppear {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.buy-fs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,215,0,0.25);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.buy-fs-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.buy-fs-star {
  color: var(--gold-bright);
  font-size: 14px;
}

.buy-fs-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 900;
  color: var(--gold-main);
  text-shadow: 0 0 10px rgba(255,215,0,0.6);
  letter-spacing: 1.5px;
  margin: 0;
}

.buy-fs-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s, transform 0.15s;
}

.buy-fs-close:hover {
  color: var(--gold-bright);
  transform: scale(1.15);
}

.buy-fs-subtitle {
  font-size: clamp(11px, 2.7vw, 13px);
  color: rgba(255,255,255,0.85);
  text-align: center;
  margin-bottom: 16px;
}

.buy-fs-bet-hl {
  color: var(--gold-bright);
  font-weight: 700;
}

/* Package List */
.buy-fs-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

@media (max-width: 420px) {
  .buy-fs-packages {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.buy-fs-item {
  position: relative;
  background: rgba(30, 10, 0, 0.7);
  border: 1.5px solid rgba(255,180,40,0.35);
  border-radius: 10px;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.buy-fs-item:hover {
  border-color: var(--gold-main);
  box-shadow: 0 0 16px rgba(255,180,0,0.4);
  transform: translateY(-2px);
}

.buy-fs-item.featured {
  border-color: var(--gold-bright);
  background: radial-gradient(circle at 50% 0%, rgba(255,140,0,0.25), rgba(30,10,0,0.85));
  box-shadow: 0 0 16px rgba(255,215,0,0.35);
}

.buy-fs-badge-hot {
  position: absolute;
  top: -9px;
  background: linear-gradient(90deg, #FF2200, #FF6600);
  color: #FFF;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px solid var(--gold-bright);
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

.buy-fs-item-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.buy-fs-spins-count {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 6.5vw, 32px);
  color: var(--gold-main);
  line-height: 1;
  text-shadow: 0 0 10px rgba(255,215,0,0.8);
}

.buy-fs-spins-lbl {
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.75);
}

.buy-fs-item-mult {
  font-size: 10px;
  color: rgba(255,200,100,0.85);
  font-weight: 700;
}

.buy-fs-item-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 4px 0;
}

.buy-fs-price-lbl {
  font-size: 9px;
  color: rgba(255,255,255,0.6);
}

.buy-fs-price-val {
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 900;
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(255,220,50,0.6);
  white-space: nowrap;
}

.btn-buy-action {
  width: 100%;
  background: linear-gradient(180deg, #FFB800 0%, #D86800 100%);
  border: 1px solid var(--gold-bright);
  border-radius: 6px;
  padding: 6px 4px;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 10px;
  color: #1A0800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: filter 0.12s, transform 0.12s;
}

.btn-buy-action:hover:not(:disabled) {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.btn-buy-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.buy-fs-status {
  text-align: center;
  font-size: 11px;
  color: var(--gold-bright);
  margin-top: 8px;
  animation: statusPulse 1.2s ease-in-out infinite alternate;
}

.buy-fs-status.hidden {
  display: none !important;
}

@keyframes statusPulse {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE UI-2B — WIN EXPLANATION BAR & WIN DETAILS MODAL
   Western Cowboy TT85 Theme (Gold, Dark Wood, Parchment accents)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FAST WIN EXPLANATION TICKER BAR ───────────────────────────── */
.win-explanation-bar {
  width: min(540px, 100vw - 12px);
  margin: 4px auto 6px auto;
  padding: 5px 10px;
  background: linear-gradient(90deg, rgba(26,8,0,0.88) 0%, rgba(61,26,0,0.95) 50%, rgba(26,8,0,0.88) 100%);
  border: 1px solid var(--gold-mid);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 14px rgba(255,215,0,0.2);
  display: flex;
  align-items: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
}

.win-explanation-bar.hidden {
  display: none !important;
}

.win-exp-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}

.win-exp-badge {
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-deep) 100%);
  color: #1A0800;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.win-exp-text {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: clamp(11px, 2.5vw, 13px);
  font-weight: 700;
  color: #FFE066;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

.btn-win-details {
  flex-shrink: 0;
  background: linear-gradient(180deg, #3D1A00 0%, #1A0800 100%);
  border: 1px solid var(--gold-main);
  border-radius: 6px;
  color: var(--gold-bright);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 6px rgba(255,215,0,0.15);
}

.btn-win-details-icon {
  font-size: 11px;
  line-height: 1;
}

.btn-win-details:hover:not(:disabled) {
  background: linear-gradient(180deg, #5A2A00 0%, #2A1000 100%);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255,215,0,0.45);
}

.btn-win-details:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-win-details:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* Make win box look clickable */
#box-win {
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease;
}
#box-win:hover {
  filter: brightness(1.12);
}
#box-win:active {
  transform: scale(0.98);
}

/* ─── WIN DETAILS MODAL ─────────────────────────────────────────── */
.win-details-modal {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.win-details-modal.hidden {
  display: none !important;
}

.win-details-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.win-details-card {
  position: relative;
  z-index: 2;
  width: min(580px, 95vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 0%, #3D1A00 0%, #1A0800 65%, #100400 100%);
  border: 2px solid var(--gold-main);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(255,140,0,0.45), inset 0 0 25px rgba(0,0,0,0.85);
  overflow: hidden;
  animation: modalAppear 0.28s var(--ease-premium) forwards;
}

.win-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,215,0,0.25);
  padding: 12px 16px;
  flex-shrink: 0;
  background: rgba(42, 16, 0, 0.6);
}

.win-details-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.win-details-star {
  color: var(--gold-bright);
  font-size: 14px;
}

.win-details-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(15px, 3.8vw, 19px);
  font-weight: 900;
  color: var(--gold-main);
  text-shadow: 0 0 10px rgba(255,215,0,0.6);
  letter-spacing: 1.2px;
  margin: 0;
}

.win-details-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s, transform 0.15s;
}

.win-details-close:hover {
  color: var(--gold-bright);
  transform: scale(1.15);
}

.win-details-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.win-details-body::-webkit-scrollbar {
  width: 6px;
}
.win-details-body::-webkit-scrollbar-track {
  background: rgba(26, 8, 0, 0.6);
  border-radius: 4px;
}
.win-details-body::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: 4px;
}
.win-details-body::-webkit-scrollbar-thumb:hover {
  background: var(--gold-main);
}

/* ─── MODAL CONTENT COMPONENTS ──────────────────────────────────── */

/* Total Win Banner */
.wd-total-banner {
  background: linear-gradient(135deg, rgba(255,215,0,0.18) 0%, rgba(200,80,0,0.18) 100%);
  border: 1px solid var(--gold-mid);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  box-shadow: inset 0 0 15px rgba(255,215,0,0.08);
}

.wd-total-label {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.wd-total-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 6.8vw, 34px);
  color: var(--gold-bright);
  text-shadow: 0 0 15px rgba(255,215,0,0.8), 0 2px 4px rgba(0,0,0,0.9);
  letter-spacing: 1.5px;
  line-height: 1.15;
  margin: 2px 0;
}

.wd-total-sub {
  font-size: 11px;
  color: rgba(255,215,0,0.85);
}

/* Free Spin Banner */
.wd-fs-banner {
  background: linear-gradient(90deg, rgba(255,140,0,0.25) 0%, rgba(255,215,0,0.2) 100%);
  border: 1px dashed var(--gold-main);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #fff;
}

.wd-fs-icon {
  font-size: 20px;
}

.wd-fs-info strong {
  color: var(--gold-bright);
}

/* Cascade Cards Container */
.wd-cascades-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wd-cascade-card {
  background: rgba(26, 8, 0, 0.65);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.wd-cascade-header {
  background: rgba(61, 26, 0, 0.75);
  border-bottom: 1px solid rgba(255,215,0,0.2);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.wd-cascade-badge {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: var(--gold-main);
  letter-spacing: 1px;
}

.wd-cascade-mult {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.3);
}

.wd-cascade-mult.has-mult {
  color: var(--amber);
  font-weight: 900;
  background: rgba(255,140,0,0.25);
  border: 1px solid var(--amber);
}

.wd-cascade-step-win {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: var(--gold-bright);
  letter-spacing: 0.8px;
}

.wd-combos-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
}

/* Combo Row */
.wd-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  padding: 7px 10px;
  gap: 8px;
  border-left: 3px solid rgba(255,255,255,0.2);
}

.wd-combo-row.premium {
  border-left-color: var(--gold-main);
  background: rgba(255,215,0,0.06);
}

.wd-combo-row.regular {
  border-left-color: rgba(180,180,180,0.5);
}

.wd-combo-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 105px;
}

.wd-sym-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.wd-sym-info {
  display: flex;
  flex-direction: column;
}

.wd-sym-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.wd-sym-tier {
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wd-sym-tier.premium {
  color: var(--gold-mid);
  font-weight: 700;
}

.wd-combo-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.wd-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.wd-cols-pill {
  background: rgba(255,215,0,0.14);
  color: var(--gold-bright);
  font-weight: 700;
}

.wd-ways-pill {
  background: rgba(255,140,0,0.14);
  color: #FFAA33;
}

.wd-rate-pill {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}

.wd-wild-pill {
  background: rgba(255,50,0,0.22);
  color: #FF7755;
  font-weight: 700;
}

.wd-combo-payout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 80px;
}

.wd-payout-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: var(--gold-bright);
  letter-spacing: 0.5px;
}

.wd-payout-scaled {
  font-size: 9px;
  color: var(--amber);
}

/* Empty State */
.wd-empty {
  text-align: center;
  padding: 24px 16px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  border: 1px dashed rgba(255,215,0,0.2);
}

.wd-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.wd-empty-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-main);
  margin-bottom: 6px;
}

.wd-empty-text {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.4;
}

/* Footer Rules Note */
.wd-footer-note {
  background: rgba(0,0,0,0.45);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,215,0,0.15);
}

.wd-rule-title {
  font-size: 11px;
  font-weight: 900;
  color: var(--gold-main);
  margin-bottom: 6px;
  letter-spacing: 0.8px;
  text-align: center;
}

.wd-rule-list {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.4;
}

.wd-rule-list strong {
  color: var(--gold-bright);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .wd-combo-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .wd-combo-stats {
    justify-content: flex-start;
  }
  .wd-combo-payout {
    align-items: flex-start;
  }
}

@media (max-width: 375px) {
  .win-details-card {
    padding: 0;
  }
  .win-details-body {
    padding: 10px 10px 14px;
    gap: 8px;
  }
}

/* ─── REDUCED MOTION SUPPORT (UI-2C.3.2) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reel-cell.win-symbol,
  .reel-cell.wild-win,
  .reel-cell.premium-win,
  .win-symbol::after {
    animation: none !important;
  }
  .reel-cell.win-symbol,
  .reel-cell.premium-win {
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.95), inset 0 0 12px rgba(255, 215, 0, 0.5) !important;
  }
  .reel-cell.wild-win {
    border: 2px solid #00f0ff !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.95), inset 0 0 12px rgba(0, 240, 255, 0.5) !important;
  }
  .reel-cell.win-symbol img,
  .reel-cell.wild-win img,
  .reel-cell.win-bounce img {
    animation: none !important;
    transform: scale(1.05) !important;
    transition: none !important;
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.95)) !important;
  }
  .cascade-sparkle {
    display: none !important;
  }
  .reel-cell.cascade-remove img,
  .reel-cell.cascade-drop img {
    animation: none !important;
    transition: none !important;
  }
}