/* =============================================================
   SLOT MACHINE — CASINO THEME
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@400;600&display=swap');

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Exo 2', 'Segoe UI', sans-serif;
  /* Arizona desert sky at dusk — deep terracotta earth fading to near-black */
  background:
    radial-gradient(ellipse 160% 60% at 50% 0%, #3A1800 0%, transparent 65%),
    radial-gradient(ellipse at center, #1E0C00 0%, #080400 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E8C070;
  overflow-x: hidden;
  padding: 16px;
  /* Respect safe areas on notched devices */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* ── Machine Cabinet ──────────────────────────────────────── */
.machine {
  width: 100%;
  max-width: 540px;
  user-select: none;
  -webkit-user-select: none;
  /* Weathered saloon wood — dark mahogany planks with subtle grain lines */
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 38px,
      rgba(0,0,0,0.06) 38px, rgba(0,0,0,0.06) 40px
    ),
    linear-gradient(180deg, #301600 0%, #1E0E00 40%, #160A00 100%);
  border: 3px solid #8B4513;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px #5A2A08,
    0 0 0 5px #1A0A00,
    0 0 40px rgba(178, 100, 30, 0.30),
    0 0 80px rgba(178, 100, 30, 0.12),
    inset 0 1px 0 rgba(210,140,50,0.12);
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.machine-header {
  /* Adobe canyon wall at sunset — warm terracotta layers */
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 59px,
      rgba(0,0,0,0.04) 59px, rgba(0,0,0,0.04) 60px
    ),
    linear-gradient(135deg, #4A1E00 0%, #7A3800 40%, #4A1E00 100%);
  border-bottom: 2px solid #8B4513;
  padding: 18px 20px 14px;
  text-align: center;
  position: relative;
}

.machine-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 900;
  letter-spacing: 4px;
  color: #D4882A;
  text-shadow:
    0 0 10px rgba(212, 136, 42, 0.8),
    0 0 30px rgba(212, 136, 42, 0.4),
    0 2px 4px rgba(0,0,0,0.8);
  text-transform: uppercase;
}

.machine-subtitle {
  font-size: 11px;
  letter-spacing: 3px;
  color: #B07830;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.85;
}

.header-lights {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D4882A;              /* copper amber */
  box-shadow: 0 0 6px #D4882A;
  animation: lightBlink 1.2s ease-in-out infinite alternate;
}
.light:nth-child(2) { animation-delay: 0.2s; background: #1ABC9C; box-shadow: 0 0 6px #1ABC9C; } /* turquoise */
.light:nth-child(3) { animation-delay: 0.4s; background: #E07040; box-shadow: 0 0 6px #E07040; } /* terra cotta */
.light:nth-child(4) { animation-delay: 0.6s; background: #5DADE2; box-shadow: 0 0 6px #5DADE2; } /* sky blue */
.light:nth-child(5) { animation-delay: 0.8s; }  /* copper, inherits base */

@keyframes lightBlink {
  0%   { opacity: 0.3; }
  100% { opacity: 1.0; }
}

/* ── Balance Bar ──────────────────────────────────────────── */
.balance-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid #4A2A0A;
  gap: 8px;
  flex-wrap: wrap;
}

.balance-item {
  text-align: center;
  flex: 1;
  min-width: 80px;
}

.balance-item .label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8A5028;
  display: block;
}

.balance-item .value {
  font-family: 'Orbitron', monospace;
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 700;
  color: #D4882A;
  text-shadow: 0 0 8px rgba(212,136,42,0.5);
}

.balance-item.balance-highlight .value {
  font-size: clamp(20px, 5vw, 28px);
  color: #E89A42;
}

/* ── Grand Jackpot Marquee ────────────────────────────────── */
#grandJackpotDisplay {
  background: linear-gradient(135deg, #1a0a00 0%, #3a1800 40%, #1a0a00 100%);
  border-top: 2px solid #FFD700;
  border-bottom: 2px solid #FFD700;
  text-align: center;
  padding: 10px 16px;
  font-family: 'Orbitron', monospace;
  cursor: default;
  animation: grandJackpotGlow 1.6s ease-in-out infinite alternate;
}

#grandJackpotDisplay .gj-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #FFD700;
  text-transform: uppercase;
  margin-bottom: 2px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

#grandJackpotDisplay .gj-amount {
  display: block;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #FFE44D;
  text-shadow:
    0 0 10px #FFD700,
    0 0 24px #FFD700,
    0 0 48px #FF8C00;
}

#grandJackpotDisplay .gj-coins {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #C8A020;
  margin-top: 2px;
}

@keyframes grandJackpotGlow {
  from {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 180, 0, 0.05);
    border-color: #B8960A;
  }
  to {
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 140, 0, 0.5), inset 0 0 20px rgba(255, 200, 0, 0.08);
    border-color: #FFD700;
  }
}

/* ── Free Spins Banner ────────────────────────────────────── */
#freeSpinsDisplay {
  display: none;
  background: linear-gradient(90deg, #0a3a20, #0d5530, #0a3a20);
  color: #50ff90;
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 8px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(80, 255, 144, 0.7);
  animation: pulse 1s ease-in-out infinite alternate;
  border-top: 1px solid #1a6a40;
  border-bottom: 1px solid #1a6a40;
}

@keyframes pulse {
  from { opacity: 0.7; }
  to   { opacity: 1.0; }
}

/* ── Desert Free Games — Banner override ─────────────────── */
#freeSpinsDisplay.desert-free-banner {
  background: linear-gradient(90deg, #4A1E00, #8B4513, #C86A10, #8B4513, #4A1E00);
  background-size: 200% 100%;
  animation: desertBannerScroll 2.5s linear infinite, desertPulse 0.8s ease-in-out infinite alternate;
  color: #FFD700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 24px rgba(200, 100, 0, 0.6);
  border-top: 1px solid #C86A10;
  border-bottom: 1px solid #C86A10;
}

@keyframes desertBannerScroll {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

@keyframes desertPulse {
  from { opacity: 0.85; }
  to   { opacity: 1.0; }
}

/* ── Desert Free Games — Cell storm overlay ───────────────── */
.desert-storm-cell {
  animation: desertStormGlow 0.5s ease-in-out infinite alternate !important;
}

@keyframes desertStormGlow {
  from { box-shadow: inset 0 0 10px rgba(200, 100, 0, 0.5); filter: brightness(1.0); }
  to   { box-shadow: inset 0 0 24px rgba(255, 180, 0, 0.9); filter: brightness(1.25); }
}

/* ── Reel Window ──────────────────────────────────────────── */
.reel-window {
  padding: 16px;
  background: rgba(0,0,0,0.3);
}

.reel-frame {
  background: #080600;
  border: 3px solid #6B3810;
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.85),
    inset 0 0 10px rgba(0,0,0,0.6),
    0 0 24px rgba(178, 100, 30, 0.20);
  position: relative;
  overflow: hidden;
}

/* Centre line indicator */
.reel-frame::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  height: 2px;
  background: rgba(212, 136, 42, 0.3);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
}

#reelsContainer {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── Reel ─────────────────────────────────────────────────── */
.reel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #2a1a00;
  transition: transform 0.05s;
  position: relative; /* required for absolute-positioned spin strip */
}

.reel.reel-stop {
  animation: reelBounce 0.35s ease-out;
}

@keyframes reelBounce {
  0%   { transform: translateY(-10px); }
  55%  { transform: translateY(5px); }
  80%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* ── Spin Strip (smooth scroll animation) ─────────────────── */

/* The long strip of tiles that scrolls upward through the reel window */
.reel-spin-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;          /* must match .reel gap */
  z-index: 20;
  will-change: transform;
}

/* Individual tile inside the strip — inherits .cell styles,
   but aspect-ratio and min-height are overridden so the JS-set
   explicit height is respected without conflict. */
.reel-spin-tile {
  flex-shrink: 0 !important;
  aspect-ratio: unset !important;
  min-height: unset !important;
}

/* Top & bottom curtain fades — only active while a reel is spinning.
   Symbols materialise from darkness and disappear into darkness,
   reinforcing the sense of a fast-moving drum. */
.reel.spinning-reel::before,
.reel.spinning-reel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  z-index: 30;
  pointer-events: none;
}
.reel.spinning-reel::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(10,4,0,0.92) 0%, transparent 100%);
}
.reel.spinning-reel::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(10,4,0,0.92) 0%, transparent 100%);
}

/* ── Cell ─────────────────────────────────────────────────── */
.cell {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #111;
  border: 1px solid #222;
  font-size: clamp(28px, 8vw, 48px);
  cursor: default;
  transition: background 0.1s, border-color 0.1s;
  position: relative;
  overflow: hidden;
  min-height: 80px;
}

.cell.spinning {
  animation: cellSpin 0.08s linear;
}

@keyframes cellSpin {
  0%   { transform: translateY(-10px); opacity: 0.6; }
  100% { transform: translateY(0);     opacity: 1.0; }
}

.cell.win-cell {
  border: 2px solid var(--hl-color, #D4882A);
  box-shadow:
    0 0 12px var(--hl-color, #D4882A),
    inset 0 0 12px rgba(212, 136, 42, 0.15);
  animation: winPulse 0.5s ease-in-out infinite alternate;
}

@keyframes winPulse {
  from { box-shadow: 0 0 8px var(--hl-color, #D4882A), inset 0 0 8px rgba(212,136,42,0.1); }
  to   { box-shadow: 0 0 20px var(--hl-color, #D4882A), inset 0 0 16px rgba(212,136,42,0.25); }
}

/* ── Symbol Styles ────────────────────────────────────────── */
.sym-emoji-wrap,
.sym-wild,
.sym-scatter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 2px;
}

.sym-emoji {
  font-size: clamp(24px, 7vw, 42px);
  line-height: 1;
  display: block;
}

.sym-sublabel {
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.85;
}

.sym-wild .sym-emoji    { filter: drop-shadow(0 0 6px gold); }
.sym-scatter .sym-emoji { filter: drop-shadow(0 0 6px #1abc9c); }

/* BAR / 7 text symbols */
.sym-text {
  font-family: 'Orbitron', monospace;
  font-size: clamp(18px, 5vw, 30px);
  font-weight: 900;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Blank reel stop — visible but clearly non-winning */
.cell.blank-cell {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

.sym-blank {
  font-size: 28px;
  color: #2e2e2e;
  line-height: 1;
  user-select: none;
  letter-spacing: 0;
}

/* ── Payline Indicators ───────────────────────────────────── */
.payline-indicators {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px 4px;
  flex-wrap: wrap;
}

.payline-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

/* ── Win Display ──────────────────────────────────────────── */
.win-display {
  min-height: 36px;
  text-align: center;
  padding: 6px 16px;
  font-family: 'Orbitron', monospace;
  font-size: clamp(13px, 3vw, 17px);
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  line-height: 1.4;
}

.win-display small {
  font-family: 'Exo 2', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-top: 2px;
}

.win-small  { color: #90ee90; text-shadow: 0 0 8px rgba(144,238,144,0.6); }
.win-big    { color: #D4882A; text-shadow: 0 0 15px rgba(212,136,42,0.8); animation: bigWinAnim 0.4s ease-in-out infinite alternate; }
.win-mega   { color: #ff6eff; text-shadow: 0 0 20px rgba(255,110,255,0.9); animation: megaWinAnim 0.3s ease-in-out infinite alternate; font-size: clamp(15px, 4vw, 22px); }
.msg-neutral { color: #808080; }
.msg-error   { color: #ff6060; }

@keyframes bigWinAnim {
  from { transform: scale(1.0); text-shadow: 0 0 10px rgba(212,136,42,0.7); }
  to   { transform: scale(1.04); text-shadow: 0 0 25px rgba(212,136,42,1.0); }
}
@keyframes megaWinAnim {
  from { transform: scale(1.0)  rotate(-1deg); }
  to   { transform: scale(1.06) rotate(1deg); }
}

/* ── Controls ─────────────────────────────────────────────── */
.controls {
  padding: 14px 20px 20px;
  border-top: 1px solid #4A2A0A;
  background: rgba(0,0,0,0.25);
}

/* Bet row */
.bet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.bet-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8A5028;
  min-width: 36px;
}

.bet-amount {
  font-family: 'Orbitron', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #D4882A;
  min-width: 44px;
  text-align: center;
  text-shadow: 0 0 8px rgba(212,136,42,0.5);
}

.bet-info {
  font-size: 10px;
  color: #7A4A20;
  text-align: center;
  margin-left: 4px;
}

/* Buttons */
button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-icon {
  background: linear-gradient(180deg, #3C1E00, #281200);
  border: 1px solid #6B3810;
  color: #D4882A;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.btn-icon:hover  { background: linear-gradient(180deg, #4E2800, #3A1A00); border-color: #9A5A20; }
.btn-icon:active { transform: scale(0.95); }

.btn-secondary {
  background: linear-gradient(180deg, #2C1800, #1C0E00);
  border: 1px solid #5A3210;
  color: #C07830;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.btn-secondary:hover  { background: linear-gradient(180deg, #3C2200, #2A1600); border-color: #7A4A1A; color: #D48A3A; }
.btn-secondary:active { transform: scale(0.97); }

/* SPIN button */
.spin-row {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

#spinBtn {
  background: linear-gradient(180deg, #9B2E00, #6E1C00, #9B2E00);
  border: 3px solid #C85000;
  border-radius: 50px;
  color: #FFE8C0;
  font-family: 'Orbitron', monospace;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 900;
  letter-spacing: 3px;
  padding: 16px 48px;
  text-transform: uppercase;
  box-shadow:
    0 4px 20px rgba(160, 60, 0, 0.65),
    0 0 40px rgba(160, 60, 0, 0.30),
    inset 0 1px 0 rgba(255,200,100,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  cursor: pointer;
  min-width: 180px;
}

#spinBtn:hover:not(:disabled) {
  background: linear-gradient(180deg, #B03400, #7E2000, #B03400);
  border-color: #E06000;
  box-shadow:
    0 6px 30px rgba(180, 70, 0, 0.75),
    0 0 50px rgba(180, 70, 0, 0.35),
    inset 0 1px 0 rgba(255,200,100,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

#spinBtn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 10px rgba(200, 50, 0, 0.5);
}

#spinBtn:disabled {
  background: linear-gradient(180deg, #555, #333, #555);
  border-color: #666;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

#spinBtn.btn-spinning {
  animation: spinBtnPulse 0.6s ease-in-out infinite alternate;
}

@keyframes spinBtnPulse {
  from { box-shadow: 0 2px 10px rgba(100,100,100,0.4); }
  to   { box-shadow: 0 4px 20px rgba(150,150,150,0.5); }
}

/* Volume row */
.volume-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.volume-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A4A20;
}

#muteBtn {
  background: transparent;
  border: 1px solid #5a3800;
  color: #D4882A;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#muteBtn:hover { background: rgba(212,136,42,0.14); border-color: #9A5A20; }

#volumeSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 4px;
  background: #3C1C00;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #D4882A;
  box-shadow: 0 0 6px rgba(212,136,42,0.5);
  cursor: pointer;
}
#volumeSlider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #D4882A;
  border: none;
  cursor: pointer;
}

/* Info row */
.info-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Paytable ──────────────────────────────────────────────── */
#paytablePanel {
  display: none;
  background: rgba(0,0,0,0.5);
  border-top: 1px solid #4A2A0A;
  padding: 16px;
}

#paytablePanel h3 {
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: #D4882A;
  margin-bottom: 12px;
}

#paytablePanel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#paytablePanel th {
  color: #8A5028;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid #4A2A0A;
}

#paytablePanel td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(90,45,10,0.5);
  color: #C8A870;
}

#paytablePanel td:nth-child(2),
#paytablePanel td:nth-child(3) {
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  color: #D4882A;
}

.pt-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 16px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(100,70,0,0.4);
}

.pt-symbol b {
  font-size: 10px;
  font-weight: 900;
}

#paytablePanel .pt-note {
  font-size: 11px;
  color: #806040;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

/* ── Stats Panel ──────────────────────────────────────────── */
#statsPanel {
  display: none;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid #4A2A0A;
  padding: 14px 20px;
}

#statsPanel h3 {
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: #D4882A;
  margin-bottom: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-item {
  text-align: center;
}
.stat-item .stat-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7A4A20;
  display: block;
}
.stat-item .stat-value {
  font-family: 'Orbitron', monospace;
  font-size: 15px;
  font-weight: 700;
  color: #D4882A;
}

/* ── Bonus Modal ──────────────────────────────────────────── */
#bonusModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bonus-modal-inner {
  background: linear-gradient(135deg, #1C0900, #3C1800);
  border: 3px solid #D4882A;
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  max-width: 340px;
  width: 90%;
  box-shadow:
    0 0 0 1px #8A5020,
    0 0 60px rgba(212,136,42,0.4),
    0 0 120px rgba(212,136,42,0.18);
  animation: bonusPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bonusPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1.0); opacity: 1; }
}

.bonus-icon {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
  animation: bonusIconSpin 1s ease-out;
}

@keyframes bonusIconSpin {
  from { transform: scale(0) rotate(-180deg); }
  to   { transform: scale(1) rotate(0deg); }
}

#bonusTitle {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 900;
  color: #D4882A;
  letter-spacing: 2px;
  text-shadow: 0 0 15px rgba(212,136,42,0.7);
  margin-bottom: 10px;
}

#bonusMessage {
  font-size: 15px;
  color: #E8B870;
  line-height: 1.5;
  margin-bottom: 20px;
}

#bonusModalClose {
  background: linear-gradient(180deg, #8B2500, #6B1A00);
  border: 2px solid #C44A00;
  color: #fff;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 10px 28px;
  border-radius: 30px;
  cursor: pointer;
  text-transform: uppercase;
}
#bonusModalClose:hover { background: linear-gradient(180deg, #A03A10, #7A2200); }

/* ── Grand Jackpot Modal override ────────────────────────── */
#bonusModal.grand-jackpot-modal .bonus-modal-inner {
  background: linear-gradient(135deg, #0D0800, #2A1C00, #0D0800);
  border-color: #FFD700;
  box-shadow:
    0 0 0 1px #B89000,
    0 0 40px rgba(255, 215, 0, 0.5),
    0 0 100px rgba(255, 180, 0, 0.25);
  animation: bonusPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), grandModalGlow 1.8s ease-in-out infinite alternate 0.4s;
}

@keyframes grandModalGlow {
  from { box-shadow: 0 0 0 1px #B89000, 0 0 30px rgba(255,215,0,0.35), 0 0 80px rgba(255,180,0,0.15); }
  to   { box-shadow: 0 0 0 1px #FFD700, 0 0 60px rgba(255,215,0,0.70), 0 0 130px rgba(255,140,0,0.35); }
}

#bonusModal.grand-jackpot-modal #bonusTitle {
  font-size: 18px;
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 180, 0, 0.5);
}

#bonusModal.grand-jackpot-modal #bonusMessage {
  color: #FFE88A;
}

#bonusModal.grand-jackpot-modal #bonusModalClose {
  background: linear-gradient(180deg, #8B7000, #5A4800);
  border-color: #FFD700;
}
#bonusModal.grand-jackpot-modal #bonusModalClose:hover {
  background: linear-gradient(180deg, #AA8800, #786000);
}

/* ── Footer ───────────────────────────────────────────────── */
.machine-footer {
  background: rgba(0,0,0,0.40);
  border-top: 1px solid #3A1E08;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.footer-text {
  font-size: 10px;
  color: #604020;
  letter-spacing: 1px;
}

.payline-row {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Hold & Spin — Held Cell ──────────────────────────────── */

/* Gold locked glow when a lemon is held */
.cell.held {
  border: 2px solid #f1c40f !important;
  background: linear-gradient(135deg, rgba(241,196,15,0.15), rgba(241,196,15,0.05)) !important;
  box-shadow:
    0 0 14px rgba(241, 196, 15, 0.75),
    inset 0 0 10px rgba(241, 196, 15, 0.18) !important;
  animation: heldPulse 1.6s ease-in-out infinite alternate !important;
}

@keyframes heldPulse {
  from { box-shadow: 0 0 10px rgba(241,196,15,0.55), inset 0 0 6px rgba(241,196,15,0.12); }
  to   { box-shadow: 0 0 22px rgba(241,196,15,0.95), inset 0 0 14px rgba(241,196,15,0.28); }
}

/* Flash-in animation when a cell first gets locked */
.cell.held-new {
  animation: holdFlashIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards,
             heldPulse 1.6s ease-in-out 0.5s infinite alternate !important;
}

@keyframes holdFlashIn {
  0%   { transform: scale(1.0);  filter: brightness(1.0); }
  40%  { transform: scale(1.18); filter: brightness(1.8); }
  100% { transform: scale(1.0);  filter: brightness(1.0); }
}

/* Locked sun cell — compact sun + coin value layout */
.held-sun-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 4px;
  pointer-events: none;
}

.held-sun-emoji {
  font-size: clamp(18px, 4.5vw, 28px);
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(212, 136, 42, 0.9));
}

.held-coin-value {
  font-family: 'Orbitron', monospace;
  font-size: clamp(9px, 2.2vw, 14px);
  font-weight: 900;
  color: #D4882A;
  text-shadow: 0 0 8px rgba(212, 136, 42, 0.95), 0 1px 2px rgba(0,0,0,0.9);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Trigger cell flash — momentary highlight when hold & spin fires */
.cell.hold-trigger-flash {
  animation: triggerFlash 0.55s ease-in-out 3 !important;
  z-index: 20;
}

@keyframes triggerFlash {
  0%   { box-shadow: 0 0 0 rgba(0,255,200,0); border-color: transparent; }
  50%  { box-shadow: 0 0 30px rgba(0,255,200,0.9), 0 0 60px rgba(0,255,200,0.4);
          border: 2px solid #00ffc8; }
  100% { box-shadow: 0 0 0 rgba(0,255,200,0); border-color: transparent; }
}

/* ── Hold & Spin — Banner ─────────────────────────────────── */

#holdSpinBanner {
  display: none;
  background: linear-gradient(90deg, #0a1f00, #1a4500, #256000, #1a4500, #0a1f00);
  background-size: 200% 100%;
  animation: hsBannerShift 3s linear infinite;
  border-top: 2px solid #7dff3a;
  border-bottom: 2px solid #7dff3a;
  padding: 10px 16px;
  text-align: center;
}

@keyframes hsBannerShift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

.hs-icon {
  font-size: 22px;
  vertical-align: middle;
  margin-right: 6px;
  filter: drop-shadow(0 0 6px #7dff3a);
}

.hs-title {
  font-family: 'Orbitron', monospace;
  font-size: 16px;
  font-weight: 900;
  color: #7dff3a;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(125,255,58,0.8);
  vertical-align: middle;
}

.hs-sub {
  display: block;
  font-size: 11px;
  color: #a8f070;
  letter-spacing: 1px;
  margin-top: 4px;
  opacity: 0.9;
}

.hs-counter {
  display: block;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  margin-top: 4px;
  text-shadow: 0 0 8px rgba(125,255,58,0.6);
}

.hs-total {
  display: block;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 900;
  color: #D4882A;
  letter-spacing: 1px;
  margin-top: 5px;
  text-shadow: 0 0 10px rgba(212, 136, 42, 0.85);
  min-height: 1.2em; /* holds space even when empty so banner doesn't jump */
}

.hs-start-btn {
  display: block;
  margin: 10px auto 2px;
  padding: 10px 28px;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #0a1f00;
  background: linear-gradient(135deg, #7dff3a 0%, #4cbe00 60%, #2e7a00 100%);
  border: 2px solid #a0ff60;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: none;
  box-shadow: 0 0 14px rgba(125,255,58,0.7);
  transition: transform 0.1s, box-shadow 0.1s;
}
.hs-start-btn:hover  { transform: scale(1.05); box-shadow: 0 0 22px rgba(125,255,58,0.95); }
.hs-start-btn:active { transform: scale(0.97); }

/* ── Desert Jackpot Wheel Modal ──────────────────────────── */

#wheelModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.90);
  align-items: center;
  justify-content: center;
  z-index: 1001;
  animation: fadeIn 0.3s ease;
}

.wheel-modal-inner {
  background: linear-gradient(160deg, #110600 0%, #1E0C00 45%, #2C1400 100%);
  border: 3px solid #D4882A;
  border-radius: 20px;
  padding: 22px 24px 26px;
  text-align: center;
  max-width: 400px;
  width: 95%;
  box-shadow:
    0 0 0 1px #8A5020,
    0 0 60px rgba(212,136,42,0.4),
    0 0 120px rgba(212,136,42,0.15);
  animation: bonusPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.wheel-eagle-icon {
  font-size: 48px;
  line-height: 1;
  animation: bonusIconSpin 0.8s ease-out;
  filter: drop-shadow(0 0 14px rgba(255,165,0,0.85));
}

.wheel-modal-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 900;
  color: #D4882A;
  letter-spacing: 3px;
  text-shadow:
    0 0 20px rgba(212,136,42,0.9),
    0 0 40px rgba(212,136,42,0.4);
}

.wheel-modal-sub {
  font-size: 12px;
  color: #B07830;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: -4px;
  opacity: 0.9;
}

.wheel-canvas-wrap {
  position: relative;
  display: inline-block;
  margin-top: 6px;
}

/* Triangular pointer sitting just above the wheel at 12 o'clock */
.wheel-pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  line-height: 1;
  color: #D4882A;
  text-shadow:
    0 0 10px rgba(212,136,42,0.95),
    0 2px 6px rgba(0,0,0,1);
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.9));
}

#wheelCanvas {
  display: block;
  border-radius: 50%;
  max-width: min(300px, calc(100vw - 80px));
  height: auto;
  box-shadow:
    0 0 0 4px #3C1C00,
    0 0 0 7px rgba(178,100,30,0.30),
    0 0 40px rgba(212,136,42,0.22);
}

.wheel-prize-display {
  font-family: 'Orbitron', monospace;
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 900;
  color: #D4882A;
  letter-spacing: 2px;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 15px rgba(212,136,42,0.8);
}

.wheel-prize-display.wheel-prize-reveal {
  animation: megaWinAnim 0.35s ease-in-out infinite alternate;
  font-size: clamp(18px, 5vw, 26px);
  color: #E89A42;
}

.wheel-spin-btn {
  background: linear-gradient(180deg, #1a7800, #0d4a00);
  border: 2px solid #55dd00;
  color: #ccff99;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 13px 32px;
  border-radius: 30px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(80,204,0,0.4);
  transition: all 0.15s;
}

.wheel-spin-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #228800, #116600);
  border-color: #88ff22;
  box-shadow: 0 0 32px rgba(80,204,0,0.65);
  transform: translateY(-2px);
}

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

.wheel-spin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wheel-close-btn {
  display: none;
  background: linear-gradient(180deg, #8B2500, #6B1A00);
  border: 2px solid #C44A00;
  color: #fff;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 11px 30px;
  border-radius: 30px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(200,50,0,0.4);
}
.wheel-close-btn:hover { background: linear-gradient(180deg, #A03A10, #7A2200); }

/* Eagle near-miss cell flash */
.cell.eagle-sighting {
  border: 2px solid #FF8C00 !important;
  animation: eagleSighting 0.5s ease-in-out 3 !important;
}

@keyframes eagleSighting {
  0%   { box-shadow: 0 0 8px rgba(255,140,0,0.4); }
  50%  { box-shadow: 0 0 28px rgba(255,200,0,0.95), 0 0 50px rgba(255,140,0,0.5); }
  100% { box-shadow: 0 0 8px rgba(255,140,0,0.4); }
}

/* Eagle / wheel-trigger symbol cell layout */
.sym-wheel-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 2px;
}

.sym-wheel-trigger .sym-emoji {
  filter: drop-shadow(0 0 8px rgba(255,140,0,0.9));
}

/* ── DEV ONLY — Test Bonus button (remove before release) ─── */
.dev-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #4A2A00;
}

.btn-dev {
  background: transparent;
  border: 1px dashed #7a5090;
  color: #a070c0;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.btn-dev:hover  { opacity: 1; border-color: #b090d0; color: #c090e0; }
.btn-dev:active { transform: scale(0.97); }

/* ── Responsive ───────────────────────────────────────────── */

/* Small phones and compact viewports (≤ 480px) */
@media (max-width: 480px) {
  body { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .machine-header { padding: 14px 16px 10px; }
  .controls { padding: 12px 14px 16px; }
  .bet-row { gap: 6px; margin-bottom: 12px; }
  #spinBtn { padding: 14px 36px; }
}

/* Narrow phones (≤ 400px) */
@media (max-width: 400px) {
  body { padding: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .machine { border-radius: 16px; }
  #spinBtn { padding: 14px 28px; min-width: 150px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .balance-bar { gap: 4px; }
  .bet-row { gap: 4px; }
  .bet-label { min-width: 28px; font-size: 10px; }
  .controls { padding: 10px 10px 14px; }
  .info-row { gap: 6px; }
  .btn-secondary { padding: 6px 10px; font-size: 11px; }
  .dev-row { flex-wrap: wrap; }
}

/* Very narrow phones (≤ 360px) */
@media (max-width: 360px) {
  .machine-title { letter-spacing: 2px; font-size: 18px; }
  .machine-subtitle { font-size: 9px; letter-spacing: 2px; }
  .balance-item.balance-highlight .value { font-size: 18px; }
  .balance-item .value { font-size: 14px; }
  #spinBtn { padding: 12px 22px; min-width: 130px; font-size: 15px; letter-spacing: 2px; }
  .bet-amount { font-size: 18px; }
  #grandJackpotDisplay .gj-amount { font-size: 20px; }
}

/* ── Audio Unlock Overlay ─────────────────────────────────── */
#audioUnlockOverlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 160% 60% at 50% 0%, #3A1800 0%, transparent 65%),
    radial-gradient(ellipse at center, #1E0C00 0%, #080400 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.unlock-inner {
  text-align: center;
  padding: 40px 32px;
  pointer-events: none; /* clicks pass through to the outer overlay div */
}

.unlock-icon {
  font-size: 72px;
  display: block;
  margin-bottom: 20px;
  animation: unlockFloat 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(212, 136, 42, 0.7));
  line-height: 1;
}

@keyframes unlockFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

.unlock-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(16px, 5vw, 26px);
  font-weight: 900;
  color: #D4882A;
  letter-spacing: 4px;
  text-shadow:
    0 0 20px rgba(212,136,42,0.8),
    0 0 40px rgba(212,136,42,0.4);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.unlock-subtitle {
  font-size: 11px;
  letter-spacing: 3px;
  color: #8A5028;
  text-transform: uppercase;
  margin-bottom: 36px;
  opacity: 0.8;
}

/* ── Refresh Coins Button ─────────────────────────────────── */
.refresh-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}

#refreshCoinsBtn {
  width: 100%;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid #b8860b;
  background: linear-gradient(135deg, #7a5c00 0%, #b8860b 50%, #7a5c00 100%);
  color: #fff8dc;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: refreshGlow 2s ease-in-out infinite alternate;
}

@keyframes refreshGlow {
  from { box-shadow: 0 0  6px rgba(212, 172, 13, 0.35), 0 0 12px rgba(212, 172, 13, 0.15); }
  to   { box-shadow: 0 0 14px rgba(212, 172, 13, 0.75), 0 0 28px rgba(212, 172, 13, 0.35); }
}

#refreshCoinsBtn:hover:not(:disabled) {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

#refreshCoinsBtn:active:not(:disabled) {
  transform: translateY(0);
}

#refreshCoinsBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
  animation: none;
  box-shadow: none;
}

/* ── Refresh Coins Modal ──────────────────────────────────── */
#refreshModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.82);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.refresh-modal-inner {
  background: linear-gradient(160deg, #1e0e00 0%, #2e1800 100%);
  border: 2px solid #b8860b;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(184, 134, 11, 0.15);
}

.refresh-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

#refreshTitle {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #d4ac0d;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

#refreshMsg {
  font-size: 14px;
  color: #e8d5a0;
  line-height: 1.5;
  margin-bottom: 16px;
}

#refreshMsg strong {
  color: #f0c830;
}

#refreshCountdown {
  font-family: 'Orbitron', monospace;
  font-size: 15px;
  color: #f39c12;
  min-height: 24px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}

#refreshActionBtn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid #b8860b;
  background: linear-gradient(135deg, #7a5c00 0%, #b8860b 50%, #7a5c00 100%);
  color: #fff8dc;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

#refreshActionBtn:hover:not(:disabled) { filter: brightness(1.2); }
#refreshActionBtn:disabled             { opacity: 0.45; cursor: not-allowed; }

#refreshActionBtn.claiming {
  background: linear-gradient(135deg, #145a32 0%, #1e8449 50%, #145a32 100%);
  border-color: #1e8449;
  color: #aeffc8;
  animation: pulse 0.8s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { filter: brightness(1);   }
  to   { filter: brightness(1.3); }
}

#refreshCloseBtn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #888;
  font-size: 13px;
  padding: 8px 20px;
  cursor: pointer;
  width: 100%;
  transition: color 0.15s, border-color 0.15s;
}

#refreshCloseBtn:hover { color: #ccc; border-color: rgba(255,255,255,0.3); }

/* ── Ko-fi Floating Support Badge ────────────────────────── */
#kofiBtn {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  right: 18px;
  z-index: 500;                       /* sits above game; below all modals (1000+) */

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(212, 172, 13, 0.45);

  /* Matches the game's gold accent colour */
  background: linear-gradient(135deg, #3a1e08 0%, #2a1500 100%);
  color: #d4ac0d;
  font-family: 'Exo 2', 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.55),
    0 0  0  1px rgba(212, 172, 13, 0.08) inset;

  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#kofiBtn:hover,
#kofiBtn:focus-visible {
  background: linear-gradient(135deg, #4a2a0a 0%, #3a1e04 100%);
  color: #f0c830;
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.6),
    0 0  12px rgba(212, 172, 13, 0.25);
  outline: none;
}

#kofiBtn:active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 480px) {
  #kofiBtn {
    font-size: 14px;
    padding: 11px 18px;
    bottom: max(14px, env(safe-area-inset-bottom, 14px));
    right: 14px;
  }
}

.unlock-btn {
  background: linear-gradient(180deg, #9B2E00, #6E1C00, #9B2E00);
  border: 3px solid #C85000;
  border-radius: 50px;
  color: #FFE8C0;
  font-family: 'Orbitron', monospace;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 900;
  letter-spacing: 3px;
  padding: 16px 48px;
  text-transform: uppercase;
  box-shadow:
    0 4px 20px rgba(160, 60, 0, 0.65),
    0 0 40px rgba(160, 60, 0, 0.30);
  animation: unlockPulse 1.2s ease-in-out infinite alternate;
  pointer-events: none; /* outer overlay handles clicks */
  display: block;
  margin: 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@keyframes unlockPulse {
  from { box-shadow: 0 4px 20px rgba(160, 60, 0, 0.5),  0 0 30px rgba(160, 60, 0, 0.2);  transform: scale(1.00); }
  to   { box-shadow: 0 6px 32px rgba(200, 80, 0, 0.90), 0 0 60px rgba(200, 80, 0, 0.5);  transform: scale(1.04); }
}