/* ═══════════════════════════════════════════════════════════════════════════
   GREG'S AUTO PETS - ELITE HORROR UI
   Dark, premium, atmospheric design with occult aesthetics
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Elite Horror Palette */
  --abyss: #050208;
  --void: #0a0610;
  --obsidian: #12091a;
  --charcoal: #1a1020;
  --shadow: #251530;

  /* Crimson Accents */
  --blood: #8b0000;
  --blood-bright: #c41e3a;
  --blood-glow: rgba(196, 30, 58, 0.4);
  --crimson: #dc143c;

  /* Fire & Ember */
  --fire: #ff4500;
  --fire-bright: #ff6347;
  --ember: #ff8c42;
  --sulfur: #ffd700;
  --hellfire: #ff2400;

  /* Ancient Gold */
  --gold: #d4af37;
  --gold-dark: #b8860b;
  --gold-glow: rgba(212, 175, 55, 0.3);

  /* Ethereal Accents */
  --spectral: #9370db;
  --phantom: #8a2be2;
  --wraith: #6b238e;
  --necrotic: #4a0080;

  /* Neutrals */
  --bone: #e8e4d9;
  --ash: #6b6b6b;
  --smoke: #484848;
  --metal: #3d3d4a;

  /* Legacy compatibility */
  --sand: #c9a857;
  --sand-dark: #8b7355;
  --rust: #8b4513;
  --rust-dark: #5c2e0a;
  --rust-glow: rgba(139, 69, 19, 0.4);
  --metal-dark: #2a2a35;
  --radiation: #39ff14;
  --blood-dark: #4a0000;

  /* Panel Effects */
  --panel: rgba(15, 8, 20, 0.95);
  --panel-light: rgba(25, 15, 35, 0.92);
  --panel-glass: rgba(20, 10, 30, 0.85);
  --glow-orange: rgba(255, 100, 50, 0.15);
  --glow-purple: rgba(138, 43, 226, 0.2);
  --glow-gold: rgba(212, 175, 55, 0.15);

  /* Tier Colors - Premium */
  --t1: #cd853f;
  --t2: #dc143c;
  --t3: #ffd700;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Premium Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(255, 69, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BACKGROUND VIDEO
   ═══════════════════════════════════════════════════════════════════════════ */

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

#bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(75, 0, 30, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(75, 0, 30, 0.15) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(5, 2, 8, 0.92) 0%,
      rgba(15, 8, 20, 0.85) 15%,
      rgba(25, 12, 30, 0.78) 35%,
      rgba(30, 15, 35, 0.75) 50%,
      rgba(25, 12, 30, 0.78) 65%,
      rgba(15, 8, 20, 0.85) 85%,
      rgba(5, 2, 8, 0.92) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Vignette effect for horror atmosphere */
#bg-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORANGE ESOTERIC GLITCHY CURSOR
   Cross-browser compatible (Chrome, Firefox, Safari, Brave, Edge)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide default cursor on desktop - use custom cursor instead */
* {
  cursor: none;
}

/* Ensure interactive elements also hide cursor */
a, button, input, select, textarea, [role="button"], [onclick] {
  cursor: none !important;
}

/* Show default cursor on touch-only devices (mobile/tablet) */
@media (pointer: coarse), (hover: none) {
  * {
    cursor: auto !important;
  }

  a, button, input, select, textarea, [role="button"], [onclick] {
    cursor: pointer !important;
  }

  #cursor,
  #cursor-aura {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Also hide custom cursor on small screens (likely mobile) */
@media (max-width: 768px) {
  * {
    cursor: auto !important;
  }

  a, button, input, select, textarea, [role="button"], [onclick] {
    cursor: pointer !important;
  }

  #cursor,
  #cursor-aura {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Main cursor - esoteric orange triangle with glitch animation */
#cursor {
  position: fixed;
  width: 0;
  height: 0;
  /* Asymmetric sharp triangle - esoteric fire pointer */
  border-left: 5px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 22px solid var(--fire-bright, #ff6600);
  pointer-events: none;
  z-index: 99999;
  /* Angled rotation for aggressive futuristic look */
  transform: translate(-30%, -15%) rotate(-35deg);
  filter: drop-shadow(0 0 6px var(--sulfur, #ffaa00))
          drop-shadow(0 0 12px var(--fire-bright, #ff6600))
          drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
  transition: transform 0.05s ease-out, filter 0.1s ease;
  /* Continuous glitch animation */
  animation: cursor-glitch-orange 3s infinite, cursor-flicker-orange 0.15s infinite;
  /* Ensure GPU acceleration for smooth animation */
  will-change: transform, filter, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Inner triangle accent - yellow/gold */
#cursor::after {
  content: '';
  position: absolute;
  top: 6px;
  left: -2px;
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid var(--sulfur, #ffcc00);
  opacity: 0.6;
  filter: drop-shadow(0 0 3px var(--sulfur, #ffcc00));
  animation: inner-glitch-orange 2s infinite ease-in-out;
}

/* Esoteric glyph that appears on hover over interactive elements */
#cursor::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -12px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--sulfur, #ffaa00);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
  transition: opacity 0.2s, transform 0.3s;
  animation: glyph-rotate-orange 4s linear infinite;
}

#cursor.hovering::before {
  opacity: 0.6;
  transform: scale(1) rotate(0deg);
}

/* Click state */
#cursor.clicking {
  transform: translate(-30%, -15%) rotate(-35deg) scale(0.85);
  filter: drop-shadow(0 0 10px var(--sulfur, #ffaa00))
          drop-shadow(0 0 20px var(--fire-bright, #ff6600))
          drop-shadow(0 0 30px var(--fire, #ff4400));
  animation: cursor-glitch-orange 3s infinite, click-flash-orange 0.1s ease-out;
}

/* Cursor aura - pulsing ethereal glow */
#cursor-aura {
  position: fixed;
  width: 40px;
  height: 40px;
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 102, 0, 0.3) 0%, rgba(255, 204, 0, 0.1) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  animation: aura-pulse-orange 1.5s ease-in-out infinite, aura-glitch-orange 4s infinite;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Glitch animation keyframes - Orange theme */
@keyframes cursor-glitch-orange {
  0%, 100% {
    transform: translate(-30%, -15%) rotate(-35deg);
    filter: drop-shadow(0 0 6px var(--sulfur, #ffaa00))
            drop-shadow(0 0 12px var(--fire-bright, #ff6600))
            drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
  }
  7% {
    transform: translate(-32%, -15%) rotate(-35deg) skewX(5deg);
    filter: drop-shadow(0 0 8px var(--sulfur, #ffcc00))
            drop-shadow(0 0 15px var(--fire-bright, #ff6600));
  }
  8% {
    transform: translate(-28%, -15%) rotate(-33deg) skewX(-3deg);
  }
  9% {
    transform: translate(-30%, -15%) rotate(-35deg);
  }
  45% {
    transform: translate(-30%, -15%) rotate(-35deg);
  }
  47% {
    transform: translate(-30%, -17%) rotate(-37deg) skewY(2deg);
    filter: drop-shadow(-2px 0 8px var(--sulfur, #ffaa00))
            drop-shadow(2px 0 8px var(--fire, #ff4400));
  }
  48% {
    transform: translate(-30%, -13%) rotate(-33deg);
  }
  49% {
    transform: translate(-30%, -15%) rotate(-35deg);
  }
  82% {
    transform: translate(-30%, -15%) rotate(-35deg);
  }
  84% {
    transform: translate(-31%, -15%) rotate(-35deg) scaleY(1.05);
    filter: drop-shadow(0 0 10px var(--fire-bright, #ff6600))
            drop-shadow(0 0 20px rgba(255, 102, 0, 0.5));
  }
  85% {
    transform: translate(-29%, -15%) rotate(-35deg) scaleY(0.98);
  }
  86% {
    transform: translate(-30%, -15%) rotate(-35deg);
  }
}

/* Subtle flicker effect */
@keyframes cursor-flicker-orange {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.97; }
  75% { opacity: 1; }
  87% { opacity: 0.94; }
}

/* Inner triangle glitch */
@keyframes inner-glitch-orange {
  0%, 100% { opacity: 0.6; transform: none; }
  25% { opacity: 0.8; }
  50% { opacity: 0.4; transform: translateX(1px); }
  75% { opacity: 0.7; transform: translateX(-1px); }
}

/* Glyph rotation */
@keyframes glyph-rotate-orange {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1) rotate(360deg); }
}

/* Click flash */
@keyframes click-flash-orange {
  0% {
    filter: drop-shadow(0 0 20px #fff)
            drop-shadow(0 0 40px var(--fire-bright, #ff6600));
  }
  100% {
    filter: drop-shadow(0 0 10px var(--sulfur, #ffaa00))
            drop-shadow(0 0 20px var(--fire-bright, #ff6600))
            drop-shadow(0 0 30px var(--fire, #ff4400));
  }
}

/* Aura pulse */
@keyframes aura-pulse-orange {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) skewX(-5deg);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4) skewX(5deg);
    opacity: 0.2;
  }
}

/* Aura glitch effect */
@keyframes aura-glitch-orange {
  0%, 100% {
    background: radial-gradient(ellipse at 30% 30%, rgba(255, 102, 0, 0.3) 0%, rgba(255, 204, 0, 0.1) 50%, transparent 70%);
  }
  33% {
    background: radial-gradient(ellipse at 35% 25%, rgba(255, 102, 0, 0.35) 0%, rgba(255, 204, 0, 0.15) 50%, transparent 70%);
  }
  66% {
    background: radial-gradient(ellipse at 25% 35%, rgba(255, 204, 0, 0.3) 0%, rgba(255, 102, 0, 0.1) 50%, transparent 70%);
  }
}

.click-ripple {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--sulfur);
  pointer-events: none;
  z-index: 99998;
  animation: ripple 0.25s ease-out forwards;
}

@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16:9 CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P', monospace;
  background: transparent;
  height: 100vh;
  width: 100vw;
  color: var(--bone);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

html {
  background: #000;
}

.container {
  position: relative;
  width: 100vw;
  height: 56.25vw;
  max-height: 100vh;
  max-width: 177.78vh;
  background:
    radial-gradient(ellipse at center, transparent 0%, transparent 60%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg,
      rgba(28, 20, 16, 0.5) 0%,
      rgba(44, 28, 20, 0.4) 20%,
      rgba(60, 36, 24, 0.35) 40%,
      rgba(76, 44, 28, 0.3) 50%,
      rgba(60, 36, 24, 0.35) 60%,
      rgba(44, 28, 20, 0.4) 80%,
      rgba(28, 20, 16, 0.5) 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 2px solid rgba(196, 80, 48, 0.5);
  box-shadow:
    inset 0 0 100px rgba(0,0,0,0.4),
    0 0 60px rgba(255,100,50,0.08),
    0 8px 32px rgba(0,0,0,0.6);
}

.container::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 15% 85%, rgba(255,150,80,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 40% 20% at 85% 80%, rgba(255,120,60,0.03) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius-lg);
}

.container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(0deg, rgba(255,80,20,0.05) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTICLES
   ═══════════════════════════════════════════════════════════════════════════ */

#dust-layer, #ash-layer, #ember-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
  transition: transform 0.15s ease-out;
}

/* Parallax container effect */
.container {
  transition: transform 0.2s ease-out;
}

.dust {
  position: absolute;
  background: radial-gradient(circle, rgba(200,160,100,0.35) 0%, transparent 70%);
  border-radius: 50%;
  animation: dust-drift 22s linear infinite;
}

@keyframes dust-drift {
  0% { transform: translateX(-60px); opacity: 0; }
  10% { opacity: 0.25; }
  90% { opacity: 0.1; }
  100% { transform: translateX(calc(100vw + 60px)); opacity: 0; }
}

.ash {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #999;
  border-radius: 50%;
  animation: ash-fall 18s linear infinite;
}

@keyframes ash-fall {
  0% { transform: translateY(-10px); opacity: 0; }
  5% { opacity: 0.4; }
  100% { transform: translateY(100vh) translateX(30px); opacity: 0; }
}

.ember {
  position: absolute;
  background: radial-gradient(circle, #fff 0%, var(--sulfur) 25%, var(--fire) 55%, transparent 75%);
  border-radius: 50%;
  animation: ember-rise 6s ease-out infinite;
}

@keyframes ember-rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.game-header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 14px 24px;
  background:
    linear-gradient(180deg,
      rgba(25, 12, 35, 0.98) 0%,
      rgba(15, 8, 22, 0.99) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(212, 175, 55, 0.1),
    inset 0 -20px 40px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* Premium decorative border */
.game-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.5) 20%,
    var(--gold) 50%,
    rgba(212, 175, 55, 0.5) 80%,
    transparent 100%);
}

.glitch-text {
  font-family: 'Orbitron', 'Press Start 2P', sans-serif;
  font-size: clamp(22px, 3.2vw, 42px);
  font-weight: 700;
  color: transparent;
  background: linear-gradient(180deg,
    #ffd700 0%,
    #d4af37 30%,
    #b8860b 60%,
    #8b6914 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  letter-spacing: 6px;
  position: relative;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

/* Glowing outline effect */
.glitch-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  z-index: -1;
  filter: blur(15px);
  opacity: 0.5;
  animation: title-pulse 3s ease-in-out infinite;
}

@keyframes title-pulse {
  0%, 100% { opacity: 0.4; filter: blur(15px); }
  50% { opacity: 0.6; filter: blur(20px); }
}

.subtitle {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: clamp(8px, 0.9vw, 12px);
  font-weight: 500;
  color: var(--gold-dark);
  letter-spacing: 10px;
  margin-top: 6px;
  text-transform: uppercase;
  opacity: 0.9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.header-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.header-actions button {
  background:
    linear-gradient(180deg,
      rgba(30, 18, 40, 0.95) 0%,
      rgba(18, 10, 25, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-sm);
  color: var(--bone);
  padding: 8px 16px;
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

/* Subtle shine effect */
.header-actions button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(212, 175, 55, 0.1),
    transparent);
  transition: left 0.5s ease;
}

.header-actions button:hover::before {
  left: 100%;
}

.header-actions button:hover {
  background:
    linear-gradient(180deg,
      rgba(50, 25, 60, 0.95) 0%,
      rgba(35, 18, 45, 0.98) 100%);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(212, 175, 55, 0.15);
  color: var(--gold);
}

/* Premium Fire Button */
.btn-fire {
  background:
    linear-gradient(180deg,
      #8b0000 0%,
      #660000 40%,
      #4a0000 100%) !important;
  border: 2px solid var(--crimson) !important;
  box-shadow:
    0 4px 20px rgba(139, 0, 0, 0.4),
    0 0 40px rgba(220, 20, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
  position: relative;
  overflow: hidden;
}

.btn-fire::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent);
  animation: fire-shine 2s ease-in-out infinite;
}

@keyframes fire-shine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.btn-fire:hover {
  background:
    linear-gradient(180deg,
      #a50000 0%,
      #7a0000 40%,
      #5a0000 100%) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 30px rgba(139, 0, 0, 0.5),
    0 0 50px rgba(220, 20, 60, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN MENU
   ═══════════════════════════════════════════════════════════════════════════ */

#main-menu {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 20px;
}

.menu-stats { display: flex; gap: 20px; }

.stat-box {
  text-align: center;
  background:
    linear-gradient(180deg,
      rgba(25, 15, 35, 0.9) 0%,
      rgba(15, 8, 22, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 28px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(212, 175, 55, 0.1);
  position: relative;
  transition: all 0.3s ease;
}

.stat-box:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

/* Decorative corner accents */
.stat-box::before,
.stat-box::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(212, 175, 55, 0.4);
  border-style: solid;
  border-width: 0;
}

.stat-box::before {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.stat-box::after {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.stat-box .stat-value {
  display: block;
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.stat-box .stat-label {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 8px;
  font-weight: 500;
  color: var(--bone);
  margin-top: 6px;
  letter-spacing: 2px;
  opacity: 0.75;
}

.mode-selection { text-align: center; }

.mode-selection .section-title {
  font-size: 11px;
  color: var(--fire-bright);
  margin-bottom: 14px;
  text-shadow: 0 0 10px rgba(255,150,50,0.3);
}

.mode-buttons { display: flex; gap: 18px; }

.mode-btn {
  background: var(--panel);
  border: 1px solid rgba(100,100,110,0.4);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  min-width: 160px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.mode-btn:hover {
  border-color: var(--fire-bright);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255,100,50,0.25);
}

.mode-btn.active {
  background: linear-gradient(180deg, var(--fire) 0%, var(--blood) 100%);
  border-color: var(--sulfur);
  box-shadow: 0 4px 20px rgba(255,100,50,0.4);
}

.mode-btn .mode-icon { font-size: 26px; margin-bottom: 8px; }
.mode-btn .mode-name { font-size: 9px; color: var(--bone); margin-bottom: 5px; }
.mode-btn .mode-desc { font-size: 6px; color: var(--bone); opacity: 0.7; }
.mode-btn .mode-rules { font-size: 7px; color: var(--bone); margin-top: 8px; display: flex; gap: 10px; justify-content: center; }
.mode-btn .mode-requirement { font-size: 7px; color: var(--bone); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.mode-btn.active .mode-desc { color: #fff; opacity: 0.85; }
.mode-btn.active .mode-rules { color: #fff; }
.mode-btn.active .mode-requirement { color: #fff; }

#start-game {
  background: linear-gradient(180deg, var(--sulfur) 0%, var(--fire-bright) 30%, var(--fire) 65%, var(--rust) 100%);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  padding: 14px 44px;
  font-family: inherit;
  font-size: 14px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  box-shadow: 0 6px 0 var(--blood-dark), 0 6px 30px rgba(255,150,50,0.4);
  transition: all 0.15s ease;
}

#start-game:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--blood-dark), 0 10px 40px rgba(255,150,50,0.5);
}

.tier-section {
  background: var(--panel);
  border: 1px solid rgba(196, 80, 48, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  text-align: center;
  max-width: 520px;
  width: 100%;
}

.tier-section h3 { font-size: 9px; color: var(--fire-bright); margin-bottom: 6px; }
.tier-section .tier-description { font-size: 7px; color: var(--bone); margin-bottom: 10px; opacity: 0.85; }
.tier-section .tier-note { font-size: 6px; color: var(--ash); margin-top: 12px; opacity: 0.7; }

/* Tier unlock grid */
.tier-unlock-grid {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.tier-unlock-card {
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(196, 80, 48, 0.4);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  min-width: 140px;
  max-width: 160px;
  flex: 1;
  transition: all 0.2s ease;
}

.tier-unlock-card:hover {
  border-color: rgba(196, 80, 48, 0.7);
  transform: translateY(-2px);
}

.tier-unlock-card.unlocked {
  border-color: var(--radiation);
  box-shadow: 0 0 12px rgba(112,255,64,0.2);
}

.tier-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.tier-card-header .tier-badge {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 9px;
  font-weight: bold;
}

.tier-card-header .tier-name {
  font-size: 7px;
  color: var(--bone);
  letter-spacing: 0.5px;
  text-align: left;
  line-height: 1.2;
}

.tier-card-pets {
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: 1px;
  line-height: 1.4;
  word-break: break-word;
}

.btn-tier-unlock {
  background: linear-gradient(180deg, var(--rust) 0%, var(--rust-dark) 100%);
  border: 1px solid var(--fire-bright);
  border-radius: var(--radius-sm);
  color: var(--bone);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 7px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-tier-unlock:hover {
  background: linear-gradient(180deg, var(--fire-bright) 0%, var(--rust) 100%);
  transform: translateY(-2px);
}

.btn-tier-unlock .unlock-cost {
  color: var(--sulfur);
  font-size: 8px;
}

.btn-tier-unlock .unlock-status {
  font-size: 7px;
  opacity: 0.9;
}

.btn-tier-unlock.unlocked {
  background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
  border-color: var(--radiation);
}

.btn-tier-unlock.unlocked .unlock-status {
  color: var(--radiation);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GAME SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

#game-screen {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  gap: 8px;
  overflow: hidden;
}

.game-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  border: 1px solid rgba(196, 80, 48, 0.35);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.info-section { display: flex; gap: 18px; align-items: center; }

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
}

.info-icon { font-size: 14px; }
.info-label { color: var(--sand); opacity: 0.85; }
.info-value { color: var(--bone); }
.gold-color { color: var(--sulfur) !important; text-shadow: 0 0 10px rgba(255,220,50,0.5); }

.progress-section { flex: 1; max-width: 300px; margin: 0 14px; }
.progress-label { display: flex; justify-content: space-between; font-size: 7px; color: var(--fire-bright); margin-bottom: 3px; }

.progress-bar {
  height: 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(196, 80, 48, 0.4);
  border-radius: var(--radius-sm);
  overflow: visible;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  position: relative;
}

.progress-fill, #progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blood) 0%, var(--fire) 50%, var(--sulfur) 100%);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 12px var(--fire);
  transition: width 0.3s ease;
}

/* Progress markers with boss indicators */
.progress-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.progress-markers .marker {
  position: absolute;
  font-size: 10px;
  transform: translateX(-50%);
  color: #888;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
  cursor: help;
  pointer-events: auto;
}

.progress-markers .marker[data-win="3"] { left: 25%; }
.progress-markers .marker[data-win="6"] { left: 50%; }
.progress-markers .marker[data-win="9"] { left: 75%; }
.progress-markers .marker[data-win="12"] { left: 100%; }

.progress-markers .marker.reached {
  color: var(--fire-bright);
  text-shadow: 0 0 8px var(--fire);
}

.progress-markers .marker.boss-marker {
  font-size: 12px;
  filter: drop-shadow(0 0 3px rgba(255, 68, 68, 0.5));
}

.progress-markers .marker.boss-upcoming {
  font-size: 14px;
  animation: bossGlow 1s infinite;
  color: var(--fire-bright);
  filter: drop-shadow(0 0 8px var(--fire));
}

@keyframes bossGlow {
  0%, 100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 8px var(--fire)); }
  50% { transform: translateX(-50%) scale(1.2); filter: drop-shadow(0 0 15px var(--blood)); }
}

.progress-markers .victory-marker {
  font-size: 14px;
}

.lives-display, #lives-display { display: flex; gap: 4px; }
.life-heart { font-size: 15px; filter: drop-shadow(0 0 4px var(--fire)); transition: all 0.3s ease; }
.life-heart.lost { opacity: 0.15; filter: grayscale(1); transform: scale(0.9); }

/* ═══════════════════════════════════════════════════════════════════════════
   BATTLE ARENA
   ═══════════════════════════════════════════════════════════════════════════ */

#battle-arena, .battle-arena {
  background: linear-gradient(180deg, rgba(70,30,15,0.9) 0%, rgba(35,15,8,0.95) 50%, rgba(70,30,15,0.9) 100%);
  border: 2px solid var(--fire);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 130px;
  box-shadow: inset 0 0 50px rgba(100,30,10,0.4), 0 4px 20px rgba(255,80,30,0.15);
}

.arena-side { flex: 1; max-width: 340px; }
.arena-side.player-side { text-align: left; order: 1; }
.arena-side.enemy-side { text-align: right; order: 3; }

.arena-label {
  font-size: 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.arena-side.player-side .arena-label { color: var(--radiation); text-shadow: 0 0 8px rgba(112,255,64,0.5); }
.arena-side.enemy-side .arena-label { color: var(--fire); text-shadow: 0 0 8px rgba(255,80,30,0.5); }

.vs-divider { order: 2; text-align: center; }

.vs-text {
  font-size: clamp(22px, 2.8vw, 36px);
  color: var(--sulfur);
  text-shadow: 0 0 16px var(--sulfur), 4px 4px 0 var(--blood-dark);
  animation: vs-beat 0.55s ease-in-out infinite;
}

.vs-flames {
  width: 55px;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--fire), var(--sulfur), var(--fire), transparent);
  margin: 8px auto;
  border-radius: 3px;
  box-shadow: 0 0 12px var(--fire);
}

@keyframes vs-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

#enemy-team, #battle-team { display: flex; gap: 6px; }
/* Player team on left - reverse so front pet (index 0) is closest to VS (on right side) */
#battle-team { flex-direction: row-reverse; justify-content: flex-start; }
/* Enemy team on right - normal order so front pet (index 0) is closest to VS (on left side) */
#enemy-team { flex-direction: row; justify-content: flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP PHASE
   ═══════════════════════════════════════════════════════════════════════════ */

#shop-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 0 10px;
}

.your-team-section {
  background: var(--panel);
  border: 1px solid rgba(196, 80, 48, 0.35);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.section-title {
  font-size: 9px;
  color: var(--fire-bright);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.team-count, #team-count {
  font-size: 8px;
  color: var(--sand);
  background: rgba(0,0,0,0.25);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  opacity: 0.85;
}

#your-team {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-direction: row-reverse;
}

/* First to fight indicator for slot 0 */
#your-team .pet-slot[data-slot="0"]::before {
  content: "⚔️ FRONT";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: var(--fire-bright);
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--fire-bright);
  white-space: nowrap;
  font-weight: bold;
  text-shadow: 0 0 4px var(--fire-bright);
  z-index: 10;
}

.team-hint {
  font-size: 6px;
  color: var(--ash);
  text-align: center;
  margin-top: 6px;
  opacity: 0.7;
}

.shop-container {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.shop-section {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--fire-bright);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3), 0 0 20px var(--glow-orange);
}

.shop-section.food-shop {
  flex: 0 0 110px;
  max-width: 110px;
  border-color: rgba(196, 80, 48, 0.5);
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  align-items: center;
}

.shop-section.food-shop .section-title {
  font-size: 7px;
  letter-spacing: 0px;
  white-space: nowrap;
}

.shop-section.food-shop .shop-header {
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,136,68,0.15);
}

.shop-actions { display: flex; gap: 6px; }

.btn-action, #roll-shop, #freeze-shop {
  background: linear-gradient(180deg, var(--rust) 0%, var(--rust-dark) 100%);
  border: 1px solid var(--fire-bright);
  border-radius: var(--radius-sm);
  color: var(--bone);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.btn-action:hover, #roll-shop:hover, #freeze-shop:hover {
  background: linear-gradient(180deg, var(--fire-bright) 0%, var(--rust) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,136,68,0.25);
}

#freeze-shop.active {
  background: linear-gradient(180deg, #66ddff 0%, #2299cc 100%);
  border-color: #66ddff;
  box-shadow: 0 2px 12px rgba(102, 221, 255, 0.4);
}

#freeze-shop.active:hover {
  background: linear-gradient(180deg, #88eeff 0%, #44bbdd 100%);
  box-shadow: 0 4px 16px rgba(102, 221, 255, 0.5);
}

.cost-badge {
  background: rgba(0,0,0,0.35);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 6px;
  color: var(--sulfur);
}

#shop-slots {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 8px 0;
}

#food-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PET CARDS - SMOOTH ROUNDED DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

.pet-slot {
  width: 85px;
  height: 105px;
  background: linear-gradient(160deg, rgba(70,50,35,0.95) 0%, rgba(40,28,20,0.98) 50%, rgba(25,18,12,0.99) 100%);
  border: 2px solid var(--t1);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.5),
    0 0 1px rgba(255,150,80,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.pet-slot:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow:
    0 10px 25px rgba(255,100,50,0.35),
    0 0 20px rgba(255,136,68,0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.pet-slot.empty {
  background: repeating-linear-gradient(45deg, rgba(35,25,18,0.5) 0px, rgba(35,25,18,0.5) 5px, rgba(25,18,12,0.5) 5px, rgba(25,18,12,0.5) 10px);
  border: 2px dashed var(--metal);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.pet-slot.empty::after {
  content: '+';
  font-size: 18px;
  color: var(--metal);
  opacity: 0.4;
}

.pet-slot.empty:hover { border-color: var(--fire-bright); }
.pet-slot.empty:hover::after { color: var(--fire-bright); opacity: 0.7; }

.pet-slot.selected {
  border: 2px solid var(--sulfur);
  box-shadow:
    0 0 0 3px rgba(8,6,4,0.9),
    0 0 0 5px var(--sulfur),
    0 0 30px rgba(255,220,50,0.6);
  animation: glow-pulse 0.4s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(8,6,4,0.9), 0 0 0 5px var(--sulfur), 0 0 30px rgba(255,220,50,0.6); }
  50% { box-shadow: 0 0 0 3px rgba(8,6,4,0.9), 0 0 0 5px var(--sulfur), 0 0 45px rgba(255,220,50,0.8); }
}

.pet-slot.tier-1 { border-color: var(--t1); box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 12px rgba(212,144,80,0.2); }
.pet-slot.tier-2 { border-color: var(--t2); background: linear-gradient(160deg, rgba(85,45,30,0.95) 0%, rgba(50,25,15,0.98) 50%, rgba(30,15,10,0.99) 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 16px rgba(255,96,80,0.3); }
.pet-slot.tier-3 { border-color: var(--t3); background: linear-gradient(160deg, rgba(85,70,35,0.95) 0%, rgba(50,40,20,0.98) 50%, rgba(30,25,12,0.99) 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(255,215,0,0.35); }

/* Boss pet styling - larger and more menacing */
.pet-slot.boss {
  width: 100px;
  height: 120px;
  border: 3px solid #ff2244;
  background: linear-gradient(160deg, rgba(100,30,30,0.95) 0%, rgba(60,15,15,0.98) 50%, rgba(30,5,5,0.99) 100%);
  box-shadow:
    0 4px 20px rgba(255,34,68,0.5),
    0 0 30px rgba(255,34,68,0.3),
    inset 0 0 20px rgba(255,34,68,0.2);
  animation: bossBreath 2s ease-in-out infinite;
}

.pet-slot.boss .pet-emoji {
  font-size: 40px;
  animation: bossPulse 1.5s ease-in-out infinite;
}

.pet-slot.boss::before {
  content: '👑';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  z-index: 10;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.8));
}

@keyframes bossBreath {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,34,68,0.5), 0 0 30px rgba(255,34,68,0.3), inset 0 0 20px rgba(255,34,68,0.2); }
  50% { box-shadow: 0 4px 30px rgba(255,34,68,0.7), 0 0 50px rgba(255,34,68,0.5), inset 0 0 30px rgba(255,34,68,0.3); }
}

@keyframes bossPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Minion pet styling - slightly different from regular enemies */
.pet-slot.minion {
  border-color: #aa4444;
  opacity: 0.9;
}

/* Elite enemy styling - glowing border and special indicator */
.pet-slot.elite {
  border: 2px solid #aa44ff;
  box-shadow:
    0 0 15px rgba(170, 68, 255, 0.5),
    inset 0 0 10px rgba(170, 68, 255, 0.2);
  animation: eliteGlow 1.5s ease-in-out infinite;
}

.pet-slot.elite::after {
  content: attr(data-elite-emoji);
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 14px;
  z-index: 10;
  filter: drop-shadow(0 0 5px rgba(170, 68, 255, 0.8));
}

@keyframes eliteGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(170, 68, 255, 0.5), inset 0 0 10px rgba(170, 68, 255, 0.2); }
  50% { box-shadow: 0 0 25px rgba(170, 68, 255, 0.7), inset 0 0 15px rgba(170, 68, 255, 0.3); }
}

/* Boss ability tag shown below the boss */
.boss-ability-tag {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6px;
  color: #ff8866;
  background: rgba(0,0,0,0.8);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ff4444;
}

.pet-emoji {
  font-size: 30px;
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.7));
  margin-bottom: 3px;
}

.pet-level {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 6px;
  color: #fff;
  background: linear-gradient(180deg, var(--fire) 0%, var(--blood) 100%);
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid var(--fire-bright);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

.pet-stats {
  display: flex;
  gap: 10px;
  font-size: 9px;
  font-weight: bold;
}

.pet-attack { color: var(--fire); text-shadow: 0 0 6px rgba(255,102,34,0.5); }
.pet-attack::before { content: '⚔'; margin-right: 2px; }

.pet-health { color: var(--radiation); text-shadow: 0 0 6px rgba(112,255,64,0.5); }
.pet-health::before { content: '♥'; margin-right: 2px; }

.pet-cost {
  position: absolute;
  bottom: 4px;
  font-size: 7px;
  color: var(--sulfur);
  text-shadow: 0 0 6px rgba(255,220,50,0.4);
}

/* SHOP SLOTS */
.shop-slot {
  width: 95px;
  height: 115px;
  background: linear-gradient(160deg, rgba(70,50,35,0.95) 0%, rgba(40,28,20,0.98) 50%, rgba(25,18,12,0.99) 100%);
  border: 2px solid var(--t1);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 1px rgba(255,150,80,0.3);
}

.shop-slot:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 25px rgba(255,100,50,0.35), 0 0 20px rgba(255,136,68,0.2);
}

.shop-slot .pet-emoji { font-size: 36px; filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.7)); margin-bottom: 5px; }
.shop-slot .pet-stats { display: flex; gap: 12px; font-size: 10px; font-weight: bold; }
.shop-slot .pet-attack { color: var(--fire); text-shadow: 0 0 6px rgba(255,102,34,0.5); }
.shop-slot .pet-attack::before { content: '⚔'; margin-right: 2px; }
.shop-slot .pet-health { color: var(--radiation); text-shadow: 0 0 6px rgba(112,255,64,0.5); }
.shop-slot .pet-health::before { content: '♥'; margin-right: 2px; }
.shop-slot .pet-cost { position: absolute; bottom: 6px; font-size: 8px; color: var(--sulfur); }

.shop-slot.tier-1 { border-color: var(--t1); box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 12px rgba(212,144,80,0.2); }
.shop-slot.tier-2 { border-color: var(--t2); background: linear-gradient(160deg, rgba(85,45,30,0.95) 0%, rgba(50,25,15,0.98) 50%, rgba(30,15,10,0.99) 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 16px rgba(255,96,80,0.3); }
.shop-slot.tier-3 { border-color: var(--t3); background: linear-gradient(160deg, rgba(85,70,35,0.95) 0%, rgba(50,40,20,0.98) 50%, rgba(30,25,12,0.99) 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(255,215,0,0.35); }

.shop-slot.sold { opacity: 0.1; border-style: dashed; background: rgba(20,15,10,0.5); }
.shop-slot.frozen { border-color: #66ddff; box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(102,221,255,0.4); }
.shop-slot.frozen::before { content: '❄'; position: absolute; top: 4px; left: 4px; font-size: 10px; filter: drop-shadow(0 0 5px #66ddff); }

/* FOOD SLOTS */
.food-slot {
  width: 70px;
  height: 80px;
  background: linear-gradient(160deg, rgba(60,45,30,0.95) 0%, rgba(35,25,18,0.98) 50%, rgba(22,16,10,0.99) 100%);
  border: 2px solid var(--rust);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.food-slot:hover {
  border-color: var(--fire-bright);
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(255,136,68,0.3);
}

.food-slot.selected {
  border-color: var(--sulfur);
  box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--sulfur), 0 0 20px rgba(255,220,50,0.5);
}

.food-emoji { font-size: 24px; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.6)); }
.food-cost { font-size: 7px; color: var(--sulfur); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.action-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid rgba(196, 80, 48, 0.35);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

#sell-pet {
  background: linear-gradient(180deg, var(--panel-light) 0%, var(--charcoal) 100%);
  border: 1px solid var(--rust);
  border-radius: var(--radius-sm);
  color: var(--bone);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

#sell-pet:hover {
  border-color: var(--fire-bright);
  background: linear-gradient(180deg, var(--rust) 0%, var(--rust-dark) 100%);
}

#end-turn {
  background: linear-gradient(180deg, var(--sulfur) 0%, var(--fire-bright) 35%, var(--fire) 65%, var(--rust) 100%);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  padding: 10px 32px;
  font-family: inherit;
  font-size: 11px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  box-shadow: 0 5px 0 var(--blood-dark), 0 5px 25px rgba(255,150,50,0.4);
  transition: all 0.15s ease;
}

#end-turn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--blood-dark), 0 8px 35px rgba(255,150,50,0.5);
}

#forfeit-game {
  background: linear-gradient(180deg, #301515 0%, #150808 100%);
  border: 1px solid var(--blood);
  border-radius: var(--radius-sm);
  color: var(--fire);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 8px;
  transition: all 0.15s ease;
}

#forfeit-game:hover {
  border-color: var(--fire);
  box-shadow: 0 0 14px rgba(255,50,50,0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATTLE LOG
   ═══════════════════════════════════════════════════════════════════════════ */

#battle-log {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 230px;
  max-height: 170px;
  background: var(--panel);
  border: 1px solid var(--rust);
  border-radius: var(--radius-md);
  z-index: 500;
  font-size: 7px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(180deg, var(--rust) 0%, var(--rust-dark) 100%);
  color: var(--bone);
  font-size: 8px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

#toggle-log { background: none; border: none; color: var(--bone); font-size: 12px; }

#log-content { max-height: 125px; overflow-y: auto; padding: 6px; }
#log-content.collapsed { display: none; }

.log-entry { padding: 3px 6px; margin: 2px 0; border-left: 2px solid var(--ash); color: var(--sand); border-radius: 0 4px 4px 0; }
.log-entry.attack { border-color: var(--fire); color: var(--fire-bright); background: rgba(255,102,34,0.05); }
.log-entry.death { border-color: var(--blood); color: var(--fire); background: rgba(160,16,16,0.05); }
.log-entry.ability { border-color: var(--sulfur); color: var(--sulfur); background: rgba(255,220,34,0.05); }
.log-entry.win { border-color: var(--radiation); color: var(--radiation); background: rgba(112,255,64,0.05); }
.log-entry.lose { border-color: var(--fire); color: var(--fire); background: rgba(255,102,34,0.05); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════════════════════════ */

#pet-tooltip, #food-tooltip {
  position: fixed;
  background: linear-gradient(180deg, rgba(55,40,30,0.98) 0%, rgba(28,20,14,0.99) 100%);
  border: 1px solid var(--rust);
  border-radius: var(--radius-md);
  padding: 10px;
  z-index: 3000;
  max-width: 220px;
  font-size: 7px;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}

.hidden { display: none !important; }

.tooltip-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(196,80,48,0.3); }
#tooltip-emoji { font-size: 22px; flex-shrink: 0; }
.tooltip-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tooltip-name { color: var(--bone); font-size: 9px; }
.tooltip-tier { font-size: 6px; padding: 2px 5px; background: var(--t1); color: #000; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.tooltip-tier.tier-2-badge { background: var(--t2); }
.tooltip-tier.tier-3-badge { background: var(--t3); }
.tooltip-stats { display: flex; gap: 12px; margin-bottom: 8px; }
.tooltip-ability { color: var(--sand); line-height: 1.5; opacity: 0.9; }
#tooltip-trigger { display: inline-block; font-size: 6px; padding: 2px 5px; background: rgba(0,0,0,0.3); color: var(--sulfur); margin-bottom: 4px; border-radius: 4px; }
#tooltip-hint { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(196,80,48,0.3); color: var(--fire-bright); font-size: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.modal, .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.modal-content {
  background: linear-gradient(180deg, rgba(55,40,30,0.98) 0%, rgba(28,20,14,0.99) 100%);
  border: 2px solid var(--rust);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 90%;
  max-height: 85%;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 50px rgba(255,100,50,0.25);
}

.modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--sand); font-size: 18px; transition: color 0.15s; }
.modal-close:hover { color: var(--fire-bright); }

.modal-title {
  font-size: 15px;
  color: var(--fire-bright);
  text-align: center;
  margin-bottom: 16px;
  text-shadow: 2px 2px 0 var(--blood-dark);
}

.modal-title.win { color: var(--radiation); text-shadow: 0 0 12px rgba(112,255,64,0.4); }
.modal-title.lose { color: var(--fire); text-shadow: 0 0 12px rgba(255,102,34,0.4); }

/* ============================================ */
/* LEADERBOARD                                  */
/* ============================================ */
.btn-leaderboard {
  display: block;
  margin: 8px auto 0;
  padding: 10px 24px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--sand);
  background: linear-gradient(180deg, rgba(55,40,30,0.9) 0%, rgba(28,20,14,0.95) 100%);
  border: 1px solid var(--rust);
  border-radius: var(--radius-md);
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
.btn-leaderboard:hover {
  color: var(--fire-bright);
  border-color: var(--fire-bright);
  box-shadow: 0 0 15px rgba(255,100,50,0.2);
}

.lb-modal {
  width: 420px;
  max-width: 90vw;
}

.lb-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  justify-content: center;
}

.lb-tab {
  padding: 7px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--ash);
  background: rgba(25, 15, 10, 0.8);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}
.lb-tab:hover { color: var(--fire-bright); border-color: var(--rust); }
.lb-tab.active {
  color: var(--bone);
  background: linear-gradient(135deg, var(--rust), var(--rust-dark));
  border-color: var(--fire-bright);
  box-shadow: 0 0 10px rgba(255,100,50,0.15);
}

.lb-list { min-height: 200px; max-height: 400px; overflow-y: auto; }

.lb-loading {
  text-align: center;
  padding: 40px;
  color: var(--ash);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
}

.lb-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.1);
  transition: background 0.2s ease;
}
.lb-entry:hover { background: rgba(139, 69, 19, 0.06); }

.lb-rank {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--ash);
  width: 36px;
  text-align: center;
}
.lb-entry:nth-child(1) .lb-rank { color: var(--sand); text-shadow: 0 0 8px rgba(201,168,87,0.4); }
.lb-entry:nth-child(2) .lb-rank { color: #c0c0c0; }
.lb-entry:nth-child(3) .lb-rank { color: #cd7f32; }

.lb-name {
  flex: 1;
  font-size: 12px;
  color: var(--bone);
}

.lb-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--fire-bright);
}

#result-icon { font-size: 50px; text-align: center; margin-bottom: 12px; }

.result-stats { display: flex; justify-content: center; gap: 32px; margin: 16px 0; }
.result-stat { text-align: center; }
.result-stat .stat-value { font-size: 15px; color: var(--sulfur); display: block; margin: 4px 0; }
.result-stat .stat-label { font-size: 7px; color: var(--sand); opacity: 0.8; }

.modal-btn, #result-close {
  display: block;
  margin: 16px auto 0;
  background: linear-gradient(180deg, var(--fire-bright) 0%, var(--rust) 100%);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 10px 26px;
  font-family: inherit;
  font-size: 9px;
  box-shadow: 0 3px 12px rgba(255,136,68,0.3);
  transition: all 0.15s ease;
}

.modal-btn:hover, #result-close:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(255,136,68,0.4);
}

/* Tutorial modal - clean grid layout */
.tutorial-modal { max-width: 560px; max-height: 80vh; overflow-y: auto; }
.tutorial-content { padding: 12px 0; }

.tutorial-section {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(196,80,48,0.25);
}
.tutorial-section:last-child { border-bottom: none; margin-bottom: 0; }
.tutorial-section h3 {
  font-size: 10px;
  color: var(--fire-bright);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.tutorial-section p, .tutorial-section li {
  font-size: 8px;
  color: var(--bone);
  line-height: 1.9;
  opacity: 0.95;
}
.tutorial-section ul { list-style: none; padding-left: 0; margin: 0; }
.tutorial-section li {
  margin-bottom: 8px;
  padding-left: 14px;
  position: relative;
}
.tutorial-section li::before {
  content: '•';
  color: var(--fire-bright);
  position: absolute;
  left: 0;
}
.tutorial-section li strong { color: var(--sulfur); }

/* Ability triggers - proper 5-column grid */
.ability-triggers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.trigger-badge {
  font-size: 7px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(196,80,48,0.4);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
  color: var(--bone);
  white-space: nowrap;
}

/* Tier info rows - cleaner layout */
.tier-info { margin-top: 12px; }
.tier-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 8px;
  color: var(--bone);
}
.tier-badge-sm {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: bold;
  flex-shrink: 0;
}
.tier-1-badge { background: var(--t1); color: #000; }
.tier-2-badge { background: var(--t2); color: #000; }
.tier-3-badge { background: var(--t3); color: #000; }

/* Tutorial text colors */
.atk-color { color: var(--fire); }
.hp-color { color: var(--radiation); }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.pet-slot.attacking-right { animation: atk-right 0.2s ease; }
.pet-slot.attacking-left { animation: atk-left 0.2s ease; }
@keyframes atk-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }
@keyframes atk-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-20px); } }

.pet-slot.hit { animation: hit-shake 0.15s ease; }
@keyframes hit-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); filter: brightness(1.5); } 75% { transform: translateX(5px); } }

.pet-slot.dying { animation: death 0.4s ease forwards; }
@keyframes death { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); filter: brightness(2); } 100% { transform: scale(0) rotate(180deg); opacity: 0; } }

#damage-numbers { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
.damage-number { position: absolute; font-family: inherit; font-size: 15px; color: var(--fire); text-shadow: 1px 1px 0 #000, 0 0 8px var(--fire); animation: dmg-up 0.9s ease-out forwards; }
.damage-number.heal { color: var(--radiation); text-shadow: 1px 1px 0 #000, 0 0 8px var(--radiation); }
@keyframes dmg-up { 0% { transform: translateY(0) scale(1.2); opacity: 1; } 100% { transform: translateY(-40px) scale(0.8); opacity: 0; } }

.buff-indicator { position: absolute; font-size: 24px; animation: buff-up 1.3s ease-out forwards; pointer-events: none; z-index: 100; }
@keyframes buff-up { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-35px) scale(1.25); opacity: 0; } }

.gold-change { position: fixed; font-family: inherit; font-size: 12px; color: var(--sulfur); text-shadow: 1px 1px 0 #000; animation: gold-up 0.9s ease-out forwards; pointer-events: none; z-index: 2000; }
.gold-change.negative { color: var(--fire); }
@keyframes gold-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }

/* Battle transition animations */
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, -4px); }
  20% { transform: translate(8px, 4px); }
  30% { transform: translate(-6px, 2px); }
  40% { transform: translate(6px, -2px); }
  50% { transform: translate(-4px, 4px); }
  60% { transform: translate(4px, -4px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, 1px); }
}

@keyframes sparkPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

@keyframes readyPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes petRunRight {
  0% { transform: translateX(-200px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes petRunLeft {
  0% { transform: translateX(200px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes vsFlash {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px #ff4444); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 20px #ff0000); }
}

@keyframes battleTextPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes clashFlash {
  0%, 100% { filter: drop-shadow(0 0 10px #ff8800); }
  50% { filter: drop-shadow(0 0 30px #ffff00) brightness(1.5); }
}

/* Battle transition specific styles */
#battle-transition .pet-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

#battle-transition .pet-icon:hover {
  transform: scale(1.1);
}

/* Battle transition mobile fixes */
@media screen and (max-width: 768px) {
  #battle-transition .transition-stage {
    gap: 10px !important;
    padding: 0 10px !important;
  }

  #battle-transition .transition-side {
    max-width: 38% !important;
  }

  #battle-transition .transition-pets {
    gap: 4px !important;
  }

  #battle-transition .pet-icon {
    font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
  }

  #battle-transition .side-label {
    font-size: clamp(0.4rem, 1.2vw, 0.6rem) !important;
  }

  #battle-transition .vs-circle {
    width: 50px !important;
    height: 50px !important;
    font-size: 0.9rem !important;
  }

  #battle-transition .transition-clash {
    width: 60px !important;
    height: 60px !important;
  }

  #battle-transition .transition-text {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
  }
}

@media screen and (max-width: 480px) {
  #battle-transition .transition-stage {
    gap: 6px !important;
  }

  #battle-transition .transition-side {
    max-width: 35% !important;
  }

  #battle-transition .pet-icon {
    font-size: clamp(1rem, 2.5vw, 1.4rem) !important;
  }

  #battle-transition .vs-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.7rem !important;
  }

  #battle-transition .transition-clash {
    width: 50px !important;
    height: 50px !important;
  }
}

/* Shop phase slide out animation */
#shop-phase.slide-out {
  animation: slideOutLeft 0.4s ease forwards;
}

@keyframes slideOutLeft {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* Battle arena slide in animation */
#battle-arena.slide-in {
  animation: slideInRight 0.4s ease forwards;
}

@keyframes slideInRight {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYNERGY & BETTING
   ═══════════════════════════════════════════════════════════════════════════ */

#synergy-bar {
  background: var(--panel);
  border: 1px solid rgba(196,80,48,0.3);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.synergy-label {
  font-size: 7px;
  color: var(--ash);
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#synergy-list {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.synergy-item {
  font-size: 8px;
  color: var(--sulfur);
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(255,220,50,0.12) 0%, rgba(255,180,30,0.08) 100%);
  border: 1px solid var(--sulfur);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 0 4px rgba(255,220,50,0.3);
}

.synergy-item:hover {
  background: linear-gradient(135deg, rgba(255,220,50,0.25) 0%, rgba(255,180,30,0.15) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,220,50,0.2);
}

.synergy-item .synergy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(160deg, rgba(40,30,20,0.98) 0%, rgba(25,18,12,0.99) 100%);
  border: 1px solid var(--sulfur);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-width: 180px;
  max-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px rgba(255,220,50,0.15);
  pointer-events: none;
}

.synergy-item:hover .synergy-tooltip,
.synergy-item.active .synergy-tooltip {
  opacity: 1;
  visibility: visible;
}

.synergy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--sulfur);
}

.synergy-tooltip-name {
  font-size: 9px;
  font-weight: bold;
  color: var(--sulfur);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.synergy-tooltip-desc {
  font-size: 7px;
  color: var(--bone);
  line-height: 1.4;
  opacity: 0.9;
}

.synergy-tooltip-req {
  font-size: 6px;
  color: var(--ash);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,220,50,0.2);
}

/* Entry Fee Section (Prize Pool Mode) */
#bet-section, .entry-fee-section { text-align: center; margin: 16px 0; }

.entry-fee-info {
  background: var(--panel);
  border: 1px solid rgba(196, 80, 48, 0.4);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 12px;
}

.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 9px;
}

.fee-row:not(:last-child) {
  border-bottom: 1px solid rgba(196, 80, 48, 0.2);
}

.fee-label { color: var(--bone); opacity: 0.8; }
.fee-value { color: var(--sulfur); font-weight: bold; }
.fee-value.highlight-green { color: var(--radiation); text-shadow: 0 0 8px rgba(112,255,64,0.4); }

.pool-row .fee-value { color: var(--fire-bright); }

.entry-fee-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 7px;
}

.entry-fee-rules .win-info, .entry-fee-rules .lose-info {
  color: var(--bone);
  opacity: 0.9;
}

.highlight-green { color: var(--radiation) !important; }
.highlight-red { color: var(--fire) !important; }
#bet-amount { background: var(--void); border: 1px solid var(--rust); border-radius: var(--radius-sm); color: var(--sulfur); padding: 8px 14px; font-family: inherit; font-size: 11px; width: 120px; text-align: center; }
.bet-presets { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.bet-preset { background: var(--charcoal); border: 1px solid var(--rust); border-radius: var(--radius-sm); color: var(--bone); padding: 5px 10px; font-family: inherit; font-size: 7px; transition: all 0.15s; }
.bet-preset:hover { border-color: var(--fire-bright); color: var(--sulfur); }
#contract-warning { background: rgba(160,16,16,0.35); border: 1px solid var(--blood); border-radius: var(--radius-sm); padding: 10px; margin: 12px auto; max-width: 360px; font-size: 7px; color: var(--fire); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIO SETTINGS MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.audio-modal {
  width: 420px;
  max-width: 95vw;
}

.audio-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.audio-section {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(196, 80, 48, 0.3);
  border-radius: var(--radius-md);
  padding: 14px;
}

.audio-section-title {
  font-size: 9px;
  color: var(--fire-bright);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.audio-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  color: var(--bone);
  margin-bottom: 10px;
}

.audio-label span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

#volume-display {
  color: var(--sulfur);
  min-width: 40px;
  text-align: right;
}

.volume-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  outline: none;
  border: 1px solid rgba(196, 80, 48, 0.4);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, var(--sulfur) 0%, var(--fire-bright) 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, var(--sulfur) 0%, var(--fire-bright) 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Upload rows */
.audio-upload-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(196, 80, 48, 0.15);
}

.audio-upload-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.upload-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 8px;
}

.upload-icon {
  font-size: 14px;
}

.upload-label {
  color: var(--bone);
  min-width: 100px;
}

.upload-status {
  color: var(--ash);
  font-size: 7px;
  opacity: 0.7;
}

.upload-status.has-file {
  color: var(--radiation);
  opacity: 1;
}

.upload-btn {
  background: linear-gradient(180deg, var(--rust) 0%, var(--rust-dark) 100%);
  border: 1px solid var(--fire-bright);
  border-radius: var(--radius-sm);
  color: var(--bone);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.upload-btn:hover {
  background: linear-gradient(180deg, var(--fire-bright) 0%, var(--rust) 100%);
  transform: translateY(-1px);
}

.clear-btn {
  background: rgba(160, 16, 16, 0.3);
  border: 1px solid var(--blood);
  border-radius: var(--radius-sm);
  color: var(--fire);
  width: 28px;
  height: 28px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-btn:hover {
  background: var(--blood);
  color: var(--bone);
}

/* Sound effect toggles */
.audio-toggles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.toggle-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 7px;
  color: var(--bone);
  cursor: pointer;
  text-align: center;
}

.toggle-row span:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.toggle-row input[type="checkbox"] {
  display: none;
}

.toggle-switch {
  width: 36px;
  height: 20px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--rust);
  border-radius: 10px;
  position: relative;
  transition: all 0.2s ease;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--ash);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.toggle-row input[type="checkbox"]:checked + .toggle-switch {
  background: rgba(112, 255, 64, 0.2);
  border-color: var(--radiation);
}

.toggle-row input[type="checkbox"]:checked + .toggle-switch::after {
  left: 18px;
  background: var(--radiation);
  box-shadow: 0 0 8px var(--radiation);
}

/* Test buttons */
.test-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.test-btn {
  background: linear-gradient(180deg, var(--panel-light) 0%, var(--charcoal) 100%);
  border: 1px solid rgba(196, 80, 48, 0.5);
  border-radius: var(--radius-sm);
  color: var(--bone);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.test-btn:hover {
  background: linear-gradient(180deg, var(--rust) 0%, var(--rust-dark) 100%);
  border-color: var(--fire-bright);
  transform: translateY(-2px);
}

.test-btn:active {
  transform: translateY(0);
}

/* Audio close button */
#audio-close-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 24px;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  color: var(--bone);
  background: linear-gradient(180deg, var(--fire-bright) 0%, var(--fire) 50%, var(--rust) 100%);
  border: 2px solid var(--sulfur);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(255,150,50,0.3), 0 0 12px rgba(255,136,68,0.2);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

#audio-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,150,50,0.4), 0 0 20px rgba(255,136,68,0.3);
}

#audio-close-btn:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════════════════════ */

#music-indicator { position: fixed; bottom: 12px; left: 12px; display: flex; align-items: flex-end; gap: 3px; background: var(--panel); border: 1px solid var(--rust); border-radius: var(--radius-sm); padding: 7px 9px; z-index: 500; height: 30px; }
.music-bar { width: 3px; background: var(--fire-bright); border-radius: 2px; animation: music-pulse 0.5s ease infinite; }
.music-bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.music-bar:nth-child(2) { height: 100%; animation-delay: 0.1s; }
.music-bar:nth-child(3) { height: 40%; animation-delay: 0.2s; }
.music-bar:nth-child(4) { height: 80%; animation-delay: 0.3s; }
.music-bar:nth-child(5) { height: 50%; animation-delay: 0.4s; }
@keyframes music-pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.3); } }
#music-indicator.paused .music-bar { animation: none; height: 3px !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--void); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--rust); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fire-bright); }

.screen { display: none; }
.screen:not(.hidden) { display: flex; flex-direction: column; }
#main-menu:not(.hidden) { display: flex; }

.wallet-info, #wallet-info { display: flex; align-items: center; gap: 7px; font-size: 7px; background: var(--void); padding: 6px 10px; border: 1px solid var(--rust); border-radius: var(--radius-sm); }
.disconnect-btn {
  background: transparent;
  border: none;
  color: var(--ash);
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 4px;
}
.disconnect-btn:hover {
  color: var(--fire);
  background: rgba(160, 16, 16, 0.3);
}
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; }
.status-dot.connected { background: var(--radiation); box-shadow: 0 0 8px var(--radiation); }
.status-dot.disconnected { background: var(--fire); box-shadow: 0 0 8px var(--fire); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Touch devices - hide custom cursor */
@media (pointer: coarse) {
  * { cursor: auto !important; }
  #cursor, #cursor-trail, .click-ripple { display: none !important; }
}

/* Mobile Portrait & Small Screens */
@media screen and (max-width: 768px) {
  /* Container - full screen on mobile */
  .container {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }

  /* Header - compact */
  .game-header {
    padding: 8px 12px;
    border-radius: 0;
  }

  .glitch-text {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .subtitle {
    font-size: 6px;
    letter-spacing: 3px;
  }

  .header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-actions button {
    padding: 8px 12px;
    font-size: 8px;
    min-height: 36px;
  }

  #connect-wallet {
    padding: 10px 16px;
  }

  .wallet-info, #wallet-info {
    font-size: 8px;
    padding: 8px 10px;
  }

  /* Main Menu */
  #main-menu {
    padding: 12px;
    gap: 12px;
    overflow-y: auto;
  }

  .menu-stats {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .stat-box {
    padding: 10px 16px;
    min-width: 80px;
  }

  .stat-box .stat-value {
    font-size: 18px;
  }

  .stat-box .stat-label {
    font-size: 6px;
  }

  /* Mode Selection */
  .mode-selection .section-title {
    font-size: 10px;
    margin-bottom: 10px;
  }

  .mode-buttons {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .mode-btn {
    min-width: unset;
    width: 100%;
    padding: 14px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  .mode-btn .mode-icon {
    font-size: 28px;
    margin-bottom: 0;
  }

  .mode-btn .mode-name {
    font-size: 10px;
  }

  .mode-btn .mode-desc {
    font-size: 7px;
  }

  .mode-btn .mode-rules {
    font-size: 7px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #start-game {
    width: 100%;
    padding: 16px 24px;
    font-size: 12px;
  }

  /* Tier Section */
  .tier-section {
    padding: 12px;
    max-width: 100%;
  }

  .tier-section h3 {
    font-size: 9px;
  }

  .tier-unlock-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .tier-unlock-card {
    min-width: 100px;
    max-width: 120px;
    flex: 1;
    padding: 8px 10px;
  }

  .tier-card-header {
    gap: 6px;
    margin-bottom: 6px;
  }

  .tier-card-header .tier-badge {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }

  .tier-card-header .tier-name {
    font-size: 6px;
  }

  .tier-card-pets {
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0;
    margin-bottom: 6px;
  }

  .tier-status-text {
    font-size: 6px;
    padding: 3px 6px;
  }

  .btn-tier-unlock {
    padding: 8px 10px;
    font-size: 7px;
  }

  /* Game Screen */
  #game-screen {
    padding: 6px 8px;
    gap: 6px;
  }

  /* Game Info Bar */
  .game-info-bar {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 8px;
  }

  .info-section {
    gap: 10px;
  }

  .info-item {
    font-size: 8px;
    gap: 4px;
  }

  .info-icon {
    font-size: 12px;
  }

  .progress-section {
    flex: 1 1 100%;
    max-width: 100%;
    margin: 4px 0;
    order: 10;
  }

  .lives-display, #lives-display {
    gap: 2px;
  }

  .life-heart {
    font-size: 12px;
  }

  /* Your Team Section */
  .your-team-section {
    padding: 8px 10px;
  }

  .section-title {
    font-size: 8px;
  }

  #your-team {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    flex-direction: row-reverse;
  }

  #your-team .pet-slot[data-slot="0"]::before {
    font-size: 6px;
    top: -14px;
    padding: 1px 4px;
  }

  .pet-slot {
    width: 60px;
    height: 75px;
    flex-shrink: 0;
  }

  .pet-emoji {
    font-size: 22px;
  }

  .pet-stats {
    font-size: 8px;
    gap: 6px;
  }

  .pet-level {
    font-size: 5px;
    padding: 2px 4px;
  }

  .pet-cost {
    font-size: 6px;
  }

  /* Shop Container */
  .shop-container {
    flex-direction: column;
    gap: 8px;
  }

  .shop-section {
    padding: 10px;
  }

  .shop-section.food-shop {
    flex: unset;
    max-width: 100%;
    flex-direction: row;
  }

  .shop-section.food-shop .shop-header {
    flex-direction: row;
    text-align: left;
  }

  #food-slots {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .shop-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .shop-actions {
    gap: 6px;
  }

  .btn-action, #roll-shop, #freeze-shop {
    padding: 8px 12px;
    font-size: 8px;
    min-height: 36px;
  }

  #shop-slots {
    gap: 8px;
    justify-content: center;
  }

  .shop-slot {
    width: 70px;
    height: 88px;
  }

  .shop-slot .pet-emoji {
    font-size: 26px;
  }

  .shop-slot .pet-stats {
    font-size: 9px;
  }

  .food-slot {
    width: 55px;
    height: 65px;
  }

  .food-emoji {
    font-size: 20px;
  }

  .food-cost {
    font-size: 7px;
  }

  /* Battle Arena */
  #battle-arena, .battle-arena {
    padding: 8px;
    min-height: 90px;
    gap: 6px;
  }

  .arena-label {
    font-size: 6px;
    margin-bottom: 4px;
  }

  .vs-text {
    font-size: 16px;
  }

  .vs-flames {
    width: 30px;
    margin: 2px auto;
  }

  .vs-divider {
    padding: 0 4px;
    flex-shrink: 0;
  }

  #enemy-team, #battle-team {
    gap: 2px;
  }

  /* Battle pet slots - smaller on mobile to fit 5 */
  #battle-team .pet-slot,
  #enemy-team .pet-slot {
    width: 48px;
    height: 60px;
    flex-shrink: 0;
  }

  #battle-team .pet-emoji,
  #enemy-team .pet-emoji {
    font-size: 18px;
  }

  #battle-team .pet-stats,
  #enemy-team .pet-stats {
    font-size: 7px;
    gap: 4px;
  }

  /* Preserve battle team directions on mobile */
  #battle-team {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  #enemy-team {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Battle arena mobile layout */
  .battle-arena {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .arena-side {
    max-width: 42%;
    overflow: hidden;
  }

  .arena-side.player-side {
    order: 1;
  }

  .vs-divider {
    order: 2;
  }

  .arena-side.enemy-side {
    order: 3;
  }

  /* Action Bar */
  .action-bar {
    padding: 8px 10px;
    gap: 10px;
    flex-wrap: wrap;
  }

  #sell-pet {
    padding: 10px 14px;
    font-size: 8px;
  }

  #end-turn {
    padding: 12px 24px;
    font-size: 10px;
    flex: 1;
    max-width: 200px;
  }

  #forfeit-game {
    padding: 10px 14px;
    font-size: 8px;
  }

  /* Battle Log - Hide on mobile or make smaller */
  #battle-log {
    width: 180px;
    max-height: 120px;
    bottom: 8px;
    right: 8px;
    font-size: 6px;
  }

  .log-header {
    padding: 4px 8px;
    font-size: 7px;
  }

  /* Tooltips - Fixed at bottom on mobile */
  #pet-tooltip, #food-tooltip {
    position: fixed !important;
    bottom: 80px !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    max-width: calc(100vw - 20px) !important;
    width: calc(100vw - 20px) !important;
    padding: 12px;
    font-size: 8px;
    z-index: 3000;
  }

  #tooltip-emoji {
    font-size: 24px;
  }

  .tooltip-name {
    font-size: 10px;
  }

  .tooltip-header {
    margin-bottom: 10px;
  }

  .tooltip-stats {
    font-size: 10px;
    gap: 16px;
  }

  .tooltip-ability {
    font-size: 9px;
    line-height: 1.6;
  }

  #tooltip-trigger {
    font-size: 8px;
    padding: 4px 8px;
  }

  #tooltip-hint {
    font-size: 8px;
  }

  /* Modals */
  .modal-content {
    padding: 16px;
    max-width: 95vw;
    max-height: 90vh;
  }

  .modal-title {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .modal-close {
    top: 6px;
    right: 8px;
    font-size: 16px;
  }

  /* Tutorial Modal */
  .tutorial-modal {
    max-width: 95vw;
  }

  .tutorial-section h3 {
    font-size: 9px;
  }

  .tutorial-section p, .tutorial-section li {
    font-size: 7px;
  }

  .ability-triggers {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .trigger-badge {
    font-size: 6px;
    padding: 8px 4px;
  }

  .tier-row {
    font-size: 7px;
    gap: 10px;
  }

  .tier-badge-sm {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  /* Audio Modal */
  .audio-modal {
    width: 95vw;
  }

  .audio-section {
    padding: 10px;
  }

  .audio-section-title {
    font-size: 8px;
  }

  .audio-label {
    font-size: 7px;
  }

  .audio-upload-row {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 8px 0;
  }

  .upload-info {
    font-size: 7px;
    gap: 6px;
  }

  .upload-label {
    min-width: 70px;
  }

  .upload-btn {
    padding: 8px 10px;
    font-size: 7px;
  }

  .clear-btn {
    width: 32px;
    height: 32px;
  }

  .audio-toggles {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .toggle-row {
    font-size: 6px;
  }

  .toggle-switch {
    width: 32px;
    height: 18px;
  }

  .toggle-switch::after {
    width: 12px;
    height: 12px;
  }

  .toggle-row input[type="checkbox"]:checked + .toggle-switch::after {
    left: 16px;
  }

  .test-buttons {
    gap: 6px;
  }

  .test-btn {
    padding: 10px 12px;
    font-size: 7px;
  }

  /* Result Modal */
  #result-icon {
    font-size: 40px;
  }

  .result-stats {
    gap: 20px;
  }

  .result-stat .stat-value {
    font-size: 14px;
  }

  .result-stat .stat-label {
    font-size: 6px;
  }

  .modal-btn, #result-close {
    padding: 12px 20px;
    font-size: 9px;
  }

  /* Entry Fee Section */
  .entry-fee-info {
    padding: 10px 14px;
  }

  .fee-row {
    font-size: 8px;
  }

  /* Music Indicator */
  #music-indicator {
    bottom: 8px;
    left: 8px;
    padding: 5px 7px;
    height: 26px;
  }

  .music-bar {
    width: 2px;
  }

  /* Hide particles on mobile for performance */
  #dust-layer, #ash-layer, #ember-layer, .blood-drips {
    display: none;
  }

  /* Synergy tablet styles */
  #synergy-bar {
    padding: 6px 12px;
    margin-bottom: 6px;
  }

  .synergy-item {
    font-size: 7px;
    padding: 4px 8px;
  }

  .synergy-item .synergy-tooltip {
    min-width: 160px;
    max-width: 200px;
  }

  .synergy-tooltip-name {
    font-size: 8px;
  }

  .synergy-tooltip-desc {
    font-size: 6px;
  }
}

/* Extra Small Screens (phones in portrait) */
@media screen and (max-width: 480px) {
  .glitch-text {
    font-size: 14px;
  }

  .header-actions {
    justify-content: center;
  }

  .header-actions button {
    font-size: 7px;
    padding: 6px 10px;
  }

  .stat-box {
    padding: 8px 12px;
    min-width: 70px;
  }

  .stat-box .stat-value {
    font-size: 16px;
  }

  .pet-slot {
    width: 55px;
    height: 68px;
  }

  .pet-emoji {
    font-size: 20px;
  }

  .shop-slot {
    width: 62px;
    height: 78px;
  }

  .shop-slot .pet-emoji {
    font-size: 22px;
  }

  .food-slot {
    width: 50px;
    height: 58px;
  }

  /* Battle arena extra small - even smaller pets */
  #battle-arena, .battle-arena {
    padding: 6px;
    gap: 4px;
  }

  .arena-label {
    font-size: 5px;
  }

  .vs-text {
    font-size: 14px;
  }

  .vs-divider {
    padding: 0 2px;
  }

  #enemy-team, #battle-team {
    gap: 1px;
  }

  #battle-team .pet-slot,
  #enemy-team .pet-slot {
    width: 38px;
    height: 50px;
  }

  #battle-team .pet-emoji,
  #enemy-team .pet-emoji {
    font-size: 14px;
  }

  #battle-team .pet-stats,
  #enemy-team .pet-stats {
    font-size: 6px;
    gap: 2px;
  }

  #end-turn {
    padding: 10px 20px;
    font-size: 9px;
  }

  /* Audio close button mobile */
  #audio-close-btn {
    padding: 12px 16px;
    font-size: 8px;
  }

  .ability-triggers {
    grid-template-columns: repeat(2, 1fr);
  }

  .audio-toggles {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Synergy mobile styles */
  #synergy-bar {
    padding: 6px 10px;
  }

  .synergy-label {
    display: none;
  }

  .synergy-item {
    font-size: 7px;
    padding: 4px 8px;
  }

  .synergy-item .synergy-tooltip {
    min-width: 150px;
    max-width: 180px;
    padding: 6px 10px;
    bottom: calc(100% + 6px);
  }

  .synergy-tooltip-name {
    font-size: 8px;
  }

  .synergy-tooltip-desc {
    font-size: 6px;
  }

  .synergy-tooltip-req {
    font-size: 5px;
  }

  /* Tier cards for very small screens */
  .tier-section {
    padding: 10px;
  }

  .tier-unlock-grid {
    gap: 6px;
  }

  .tier-unlock-card {
    min-width: 90px;
    max-width: 100px;
    padding: 6px 8px;
  }

  .tier-card-header .tier-badge {
    width: 18px;
    height: 18px;
    font-size: 7px;
  }

  .tier-card-header .tier-name {
    font-size: 5px;
  }

  .tier-card-pets {
    font-size: 10px;
    letter-spacing: 0;
  }

  .tier-status-text {
    font-size: 5px;
    padding: 2px 4px;
  }

  /* Compact grotto bar */
  .btn-grotto-main {
    padding: 8px 12px;
    gap: 8px;
  }

  .grotto-icon {
    font-size: 18px;
  }

  .grotto-title {
    font-size: 8px;
  }

  .grotto-resources {
    font-size: 7px;
    gap: 8px;
  }
}

/* Landscape Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .game-header {
    padding: 4px 10px;
  }

  .glitch-text {
    font-size: 14px;
  }

  .subtitle {
    display: none;
  }

  #main-menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    gap: 8px;
  }

  .menu-stats {
    width: 100%;
  }

  .mode-selection {
    flex: 1;
  }

  .mode-buttons {
    flex-direction: row;
  }

  .mode-btn {
    flex-direction: column;
    text-align: center;
  }

  .tier-section {
    flex: 1;
  }

  #game-screen {
    padding: 4px 6px;
    gap: 4px;
  }

  .game-info-bar {
    padding: 4px 8px;
  }

  .your-team-section {
    padding: 4px 8px;
  }

  .shop-container {
    flex-direction: row;
  }

  .action-bar {
    padding: 4px 8px;
  }

  #battle-log {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME WORLD - THE GROTTO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Old btn-home-world styles removed - now using btn-grotto-main */
.hw-souls { color: #ff9966; }
.hw-crystals { color: #66ddff; }

/* Home World Screen */
#home-world {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 20px 10px;
  gap: 8px;
  background: radial-gradient(ellipse at center bottom, rgba(40, 20, 50, 0.4) 0%, transparent 60%);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Home World Header */
.hw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(40, 20, 50, 0.9) 0%, rgba(20, 10, 30, 0.95) 100%);
  border: 1px solid rgba(136, 68, 170, 0.4);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.hw-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(136, 68, 170, 0.4);
  border-radius: var(--radius-sm);
  color: #e0c0ff;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 8px;
  transition: all 0.2s ease;
}

.hw-back-btn:hover {
  background: rgba(136, 68, 170, 0.3);
  border-color: #bb66dd;
}

.hw-title-section {
  text-align: center;
}

.hw-title {
  font-size: 18px;
  color: #e0c0ff;
  text-shadow: 0 0 20px rgba(136, 68, 170, 0.6), 2px 2px 0 rgba(0, 0, 0, 0.5);
  letter-spacing: 4px;
}

.hw-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.level-badge {
  background: linear-gradient(180deg, #8844aa 0%, #5522aa 100%);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 8px;
  color: #fff;
}

.level-name {
  font-size: 7px;
  color: #aa88cc;
  opacity: 0.9;
}

.hw-resources-bar {
  display: flex;
  gap: 20px;
}

.resource-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(136, 68, 170, 0.3);
}

.resource-item.souls { border-color: rgba(255, 153, 102, 0.4); }
.resource-item.crystals { border-color: rgba(102, 221, 255, 0.4); }

.resource-icon { font-size: 18px; }

.resource-value {
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 10px currentColor;
}

.resource-item.souls .resource-value { color: #ff9966; }
.resource-item.crystals .resource-value { color: #66ddff; }

.resource-label {
  font-size: 6px;
  color: #888;
  letter-spacing: 1px;
}

/* Convert Button on Crystals */
.resource-item.crystals {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.resource-item.crystals:hover {
  background: rgba(102, 221, 255, 0.15);
  transform: scale(1.05);
}

.convert-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #66ddff;
  background: linear-gradient(180deg, #1a1525 0%, #0d0815 100%);
  color: #66ddff;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  animation: pulse-glow 2s ease-in-out infinite;
}

.convert-btn:hover {
  background: #66ddff;
  color: #0d0815;
  transform: scale(1.2);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(102, 221, 255, 0.5); }
  50% { box-shadow: 0 0 15px rgba(102, 221, 255, 0.8); }
}

/* Crystal Converter Modal */
.crystal-converter-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.crystal-converter-modal.hidden {
  display: none;
}

.converter-content {
  background: linear-gradient(180deg, #1a1228 0%, #0d0815 100%);
  border: 2px solid #66ddff;
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 40px rgba(102, 221, 255, 0.3),
              inset 0 0 30px rgba(102, 221, 255, 0.05);
}

.converter-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
}

.converter-header h3 {
  color: #66ddff;
  font-size: 12px;
  text-shadow: 0 0 10px rgba(102, 221, 255, 0.5);
}

.converter-icon {
  font-size: 24px;
}

.converter-close {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 10;
}

.converter-close:hover {
  color: #ff6666;
}

.converter-desc {
  color: #999;
  font-size: 8px;
  margin-bottom: 16px;
}

.converter-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}

.rate-from {
  color: #66ddff;
  font-size: 14px;
}

.rate-arrow {
  color: #666;
  font-size: 16px;
}

.rate-to {
  color: #ff9966;
  font-size: 14px;
}

.converter-current {
  color: #aaa;
  font-size: 9px;
  margin-bottom: 12px;
}

.converter-current strong {
  color: #66ddff;
}

.converter-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.converter-adjust {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #66ddff;
  background: transparent;
  color: #66ddff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.converter-adjust:hover {
  background: #66ddff;
  color: #0d0815;
}

#convert-amount {
  width: 60px;
  height: 36px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #444;
  border-radius: var(--radius-sm);
}

#convert-amount:focus {
  outline: none;
  border-color: #66ddff;
}

.converter-max {
  padding: 8px 12px;
  background: transparent;
  border: 2px solid #ff9966;
  color: #ff9966;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.converter-max:hover {
  background: #ff9966;
  color: #0d0815;
}

.converter-result {
  color: #aaa;
  font-size: 9px;
  margin-bottom: 16px;
}

.converter-result strong {
  color: #ff9966;
  font-size: 14px;
}

.converter-confirm {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, #66ddff 0%, #4488cc 100%);
  border: none;
  border-radius: var(--radius-md);
  color: #0d0815;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-shadow: none;
}

.converter-confirm:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(102, 221, 255, 0.5);
}

.converter-confirm:disabled {
  background: #333;
  color: #666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Buildings Grid */
.hw-buildings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 0 0 auto;
  align-content: center;
}

/* Elite Horror Building Cards */
.hw-building {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 14px;
  background:
    linear-gradient(180deg,
      rgba(20, 10, 30, 0.95) 0%,
      rgba(10, 5, 18, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-md);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(212, 175, 55, 0.08);
}

/* Decorative corner accent */
.hw-building::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(139, 0, 0, 0.5) 50%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hw-building:hover::before {
  opacity: 1;
}

.hw-building:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--gold);
  box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(139, 0, 0, 0.2),
    0 0 20px rgba(212, 175, 55, 0.15),
    inset 0 1px 0 rgba(212, 175, 55, 0.15);
}

.hw-building:hover .building-glow {
  opacity: 1;
}

.building-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center bottom,
      rgba(139, 0, 0, 0.15) 0%,
      transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.building-icon {
  font-size: 34px;
  filter: drop-shadow(0 0 15px rgba(139, 0, 0, 0.5));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hw-building:hover .building-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.6));
}

.building-name {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.building-desc {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 7px;
  font-weight: 400;
  color: var(--bone);
  opacity: 0.6;
  text-align: center;
}

.building-stat {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: var(--gold);
  padding: 5px 14px;
  background: rgba(139, 0, 0, 0.2);
  border: 1px solid rgba(139, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}

/* Building color variations - Elite Horror */
#building-crypt { border-color: rgba(100, 150, 200, 0.3); }
#building-crypt:hover { border-color: #88aadd; box-shadow: 0 15px 50px rgba(100, 150, 200, 0.25), 0 0 30px rgba(100, 150, 200, 0.15); }
#building-crypt .building-glow { background: radial-gradient(ellipse at center bottom, rgba(100, 150, 200, 0.15) 0%, transparent 60%); }

#building-altar { border-color: rgba(139, 0, 0, 0.4); }
#building-altar:hover { border-color: var(--crimson); box-shadow: 0 15px 50px rgba(139, 0, 0, 0.35), 0 0 30px rgba(220, 20, 60, 0.2); }
#building-altar .building-glow { background: radial-gradient(ellipse at center bottom, rgba(220, 20, 60, 0.2) 0%, transparent 60%); }

#building-forge { border-color: rgba(212, 175, 55, 0.3); }
#building-forge:hover { border-color: var(--gold); box-shadow: 0 15px 50px rgba(212, 175, 55, 0.25), 0 0 30px rgba(212, 175, 55, 0.15); }
#building-forge .building-glow { background: radial-gradient(ellipse at center bottom, rgba(212, 175, 55, 0.15) 0%, transparent 60%); }

#building-monolith { border-color: rgba(147, 112, 219, 0.3); }
#building-monolith:hover { border-color: var(--spectral); box-shadow: 0 15px 50px rgba(147, 112, 219, 0.25), 0 0 30px rgba(147, 112, 219, 0.15); }
#building-monolith .building-glow { background: radial-gradient(ellipse at center bottom, rgba(147, 112, 219, 0.15) 0%, transparent 60%); }

/* Elite Horror Panel Design */
.hw-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 800px;
  max-height: 80vh;
  background:
    linear-gradient(180deg,
      rgba(18, 10, 28, 0.98) 0%,
      rgba(10, 5, 18, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-lg);
  padding: 24px;
  z-index: 100;
  overflow-y: auto;
  box-shadow:
    0 0 80px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(139, 0, 0, 0.2),
    inset 0 1px 0 rgba(212, 175, 55, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  animation: panel-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Decorative panel corners */
.hw-panel::before,
.hw-panel::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0.5;
}

.hw-panel::before {
  top: 8px;
  left: 8px;
  border-width: 2px 0 0 2px;
}

.hw-panel::after {
  bottom: 8px;
  right: 8px;
  border-width: 0 2px 2px 0;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
}

/* Decorative header line */
.panel-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(139, 0, 0, 0.5) 50%,
    transparent 100%);
}

.panel-header h3 {
  font-family: 'Orbitron', 'Press Start 2P', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(139, 0, 0, 0.5));
}

.panel-close {
  background: rgba(139, 0, 0, 0.2);
  border: 1px solid rgba(139, 0, 0, 0.4);
  border-radius: var(--radius-sm);
  color: var(--crimson);
  width: 30px;
  height: 30px;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-close:hover {
  background: rgba(139, 0, 0, 0.4);
  border-color: var(--crimson);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(139, 0, 0, 0.3);
}

.panel-subtitle {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: var(--bone);
  opacity: 0.7;
  margin-bottom: 18px;
}

.panel-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.panel-tab {
  flex: 1;
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-sm);
  color: var(--bone);
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 9px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.panel-tab:hover {
  background: rgba(136, 68, 170, 0.2);
}

.panel-tab.active {
  background: linear-gradient(180deg, #8844aa 0%, #5522aa 100%);
  border-color: #bb66dd;
  color: #fff;
}

/* Crypt Pet Grid */
.crypt-pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.crypt-pet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(136, 68, 170, 0.3);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.crypt-pet-card:hover {
  background: rgba(136, 68, 170, 0.15);
  border-color: rgba(136, 68, 170, 0.5);
  transform: translateY(-2px);
}

.crypt-pet-card.locked {
  opacity: 0.4;
  filter: grayscale(0.7);
}

.crypt-pet-card .pet-emoji {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.crypt-pet-card .pet-name {
  font-size: 7px;
  color: #e0c0ff;
  text-align: center;
}

.crypt-pet-card .pet-rank {
  display: flex;
  gap: 2px;
}

.crypt-pet-card .rank-star {
  font-size: 10px;
  color: #444;
}

.crypt-pet-card .rank-star.filled {
  color: #ffcc00;
  text-shadow: 0 0 6px rgba(255, 200, 0, 0.5);
}

.crypt-pet-card .pet-exp {
  font-size: 6px;
  color: #888;
}

/* Altar Content */
.altar-content {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  min-height: 300px;
}

.altar-pet-select h4 {
  font-size: 9px;
  color: #ff9966;
  margin-bottom: 12px;
}

.altar-pet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.altar-pet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 100, 50, 0.2);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.altar-pet-item:hover {
  background: rgba(255, 100, 50, 0.15);
  border-color: rgba(255, 100, 50, 0.4);
}

.altar-pet-item.selected {
  background: rgba(255, 100, 50, 0.25);
  border-color: #ff8844;
}

.altar-pet-item .pet-emoji { font-size: 22px; }
.altar-pet-item .pet-info { flex: 1; }
.altar-pet-item .pet-name { font-size: 8px; color: #e0c0ff; }
.altar-pet-item .pet-rank-stars { font-size: 9px; }

.altar-upgrade-view {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 100, 50, 0.2);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.altar-placeholder {
  text-align: center;
  color: #666;
}

.altar-placeholder .placeholder-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

.altar-placeholder p {
  font-size: 9px;
}

.altar-pet-detail {
  text-align: center;
  width: 100%;
}

.altar-pet-emoji {
  font-size: 60px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  margin-bottom: 10px;
}

.altar-pet-name {
  font-size: 14px;
  color: #e0c0ff;
  margin-bottom: 6px;
}

.altar-current-rank {
  font-size: 9px;
  color: #ffcc00;
  margin-bottom: 16px;
}

.altar-rank-bonuses {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.rank-bonus-item {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  font-size: 8px;
}

.rank-bonus-item.achieved { color: #66ff66; }
.rank-bonus-item.locked { color: #666; }

.altar-upgrade-btn {
  background: linear-gradient(180deg, #ff8844 0%, #cc4400 100%);
  border: 2px solid #ffaa66;
  border-radius: var(--radius-md);
  color: #fff;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(255, 100, 50, 0.3);
}

.altar-upgrade-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255, 100, 50, 0.5);
}

.altar-upgrade-btn:disabled {
  background: linear-gradient(180deg, #444 0%, #222 100%);
  border-color: #555;
  color: #666;
  box-shadow: none;
}

.altar-upgrade-cost {
  font-size: 8px;
  color: #ff9966;
  margin-top: 8px;
}

/* Soul Forge Content */
.forge-content {
  min-height: 350px;
}

.forge-deck-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.forge-deck-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(200, 150, 50, 0.3);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.forge-deck-slot:hover {
  border-color: rgba(200, 150, 50, 0.5);
  background: rgba(200, 150, 50, 0.1);
}

.forge-deck-slot.active {
  border-color: #ddaa44;
  background: rgba(200, 150, 50, 0.2);
  box-shadow: 0 0 20px rgba(200, 150, 50, 0.2);
}

.deck-icon { font-size: 36px; }

.deck-name {
  font-size: 10px;
  color: #e0c0ff;
}

.deck-pet-count {
  font-size: 8px;
  color: #aa88cc;
}

.deck-actions-row {
  display: flex;
  gap: 8px;
}

.btn-deck-edit, .btn-deck-toggle {
  padding: 8px 14px;
  font-family: inherit;
  font-size: 7px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.btn-deck-edit {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(200, 150, 50, 0.4);
  color: #ddaa44;
}

.btn-deck-toggle {
  background: linear-gradient(180deg, #66aa44 0%, #448822 100%);
  border: 1px solid #88cc66;
  color: #fff;
}

.btn-deck-toggle.active {
  background: linear-gradient(180deg, #aa4444 0%, #882222 100%);
  border-color: #cc6666;
}

/* Deck Editor */
.deck-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.deck-name-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(200, 150, 50, 0.4);
  border-radius: var(--radius-sm);
  color: #e0c0ff;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  width: 200px;
}

.deck-editor-back {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(136, 68, 170, 0.4);
  border-radius: var(--radius-sm);
  color: #e0c0ff;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 8px;
}

.deck-hint {
  font-size: 8px;
  color: #aa88cc;
  margin-bottom: 12px;
}

.deck-pet-selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.deck-pet-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(200, 150, 50, 0.2);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.deck-pet-option:hover {
  border-color: rgba(200, 150, 50, 0.4);
}

.deck-pet-option.selected {
  border-color: #ddaa44;
  background: rgba(200, 150, 50, 0.2);
}

.deck-pet-option .pet-emoji { font-size: 24px; }
.deck-pet-option .pet-name { font-size: 6px; color: #aa88cc; }

.deck-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-deck-save, .btn-deck-activate {
  padding: 12px 24px;
  font-family: inherit;
  font-size: 9px;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.btn-deck-save {
  background: linear-gradient(180deg, #4488aa 0%, #226688 100%);
  border: 2px solid #66aacc;
  color: #fff;
}

.btn-deck-activate {
  background: linear-gradient(180deg, #ddaa44 0%, #aa7722 100%);
  border: 2px solid #ffcc66;
  color: #fff;
}

/* Monolith Upgrades */
.monolith-upgrades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 450px;
  overflow-y: auto;
  padding: 8px;
}

.monolith-upgrade {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(100, 200, 150, 0.3);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  min-height: 80px;
}

.monolith-upgrade:hover {
  background: rgba(100, 200, 150, 0.1);
  border-color: rgba(100, 200, 150, 0.5);
}

.monolith-upgrade.maxed {
  border-color: #66ddaa;
  box-shadow: 0 0 15px rgba(100, 200, 150, 0.15);
}

.upgrade-icon {
  font-size: 24px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(100, 200, 150, 0.2);
}

.upgrade-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.upgrade-name {
  font-size: 11px;
  font-weight: bold;
  color: #e0c0ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upgrade-desc {
  font-size: 9px;
  color: #aa88cc;
  line-height: 1.3;
}

.upgrade-level {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.upgrade-level .level-pip {
  width: 12px;
  height: 5px;
  background: rgba(100, 200, 150, 0.2);
  border-radius: 2px;
}

.upgrade-level .level-pip.filled {
  background: #66ddaa;
  box-shadow: 0 0 6px rgba(100, 200, 150, 0.5);
}

.upgrade-buy-btn {
  padding: 8px 12px;
  background: linear-gradient(180deg, #66ddaa 0%, #44aa88 100%);
  border: 1px solid #88ffcc;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit;
  font-size: 9px;
  font-weight: bold;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  min-width: 70px;
}

.upgrade-buy-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 200, 150, 0.3);
}

.upgrade-buy-btn:disabled {
  background: linear-gradient(180deg, #444 0%, #222 100%);
  border-color: #555;
  color: #666;
}

.upgrade-cost {
  font-size: 7px;
  color: #ff9966;
}

/* Home World Start Section */
.hw-start-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.hw-start-btn {
  position: relative;
  background: linear-gradient(180deg, var(--sulfur) 0%, var(--fire-bright) 30%, var(--fire) 65%, var(--rust) 100%) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: #fff !important;
  padding: 12px 36px !important;
  font-family: inherit;
  font-size: 14px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  box-shadow: 0 6px 0 var(--blood-dark), 0 6px 30px rgba(255,150,50,0.4) !important;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hw-start-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--blood-dark), 0 10px 40px rgba(255,150,50,0.5) !important;
}

.hw-start-btn .start-icon {
  font-size: 18px;
  margin-right: 8px;
}

.hw-active-bonuses {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.active-bonus-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(136, 68, 170, 0.4);
  border-radius: var(--radius-sm);
  font-size: 7px;
  color: #aa88cc;
}

.active-bonus-tag .bonus-icon { font-size: 12px; }

/* Responsive Home World */
@media screen and (max-width: 900px) {
  .hw-buildings {
    grid-template-columns: repeat(2, 1fr);
  }

  .altar-content {
    grid-template-columns: 1fr;
  }

  .altar-pet-select {
    max-height: 150px;
  }

  .altar-pet-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .forge-deck-list {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .hw-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .hw-resources-bar {
    width: 100%;
    justify-content: center;
  }

  .hw-buildings {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .building-icon { font-size: 32px; }
  .building-name { font-size: 8px; }
  .building-desc { font-size: 6px; }

  .hw-panel {
    width: 95%;
    padding: 14px;
  }

  .monolith-upgrades {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GAME INFO BOX - Main Menu
   ═══════════════════════════════════════════════════════════════════════════ */

/* Elite Game Info Box */
.game-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 40px;
  background:
    linear-gradient(180deg,
      rgba(25, 12, 35, 0.92) 0%,
      rgba(15, 8, 22, 0.96) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(212, 175, 55, 0.1);
  position: relative;
}

/* Decorative corners */
.game-info-box::before,
.game-info-box::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(212, 175, 55, 0.4);
  border-style: solid;
}

.game-info-box::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.game-info-box::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.mode-icon-large {
  font-size: 52px;
  filter: drop-shadow(0 0 20px rgba(139, 0, 0, 0.5));
  animation: icon-pulse 3s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(139, 0, 0, 0.5)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(220, 20, 60, 0.6)); }
}

.game-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--bone);
  text-align: center;
}

.game-rules span {
  opacity: 0.85;
  letter-spacing: 1px;
}

/* Tier Status Text */
.tier-status-text {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 8px;
  font-weight: 500;
  color: var(--ash);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius-sm);
  margin-top: 8px;
  text-align: center;
}

.tier-unlock-card.unlocked .tier-status-text {
  color: var(--radiation);
  background: rgba(112, 255, 64, 0.15);
  font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE GROTTO - COMPACT RESOURCE BAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Premium Grotto Button - Elite Horror Style */
.btn-grotto-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 540px;
  padding: 14px 20px;
  background:
    linear-gradient(180deg,
      rgba(30, 15, 40, 0.98) 0%,
      rgba(18, 8, 25, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 30px rgba(139, 0, 0, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(212, 175, 55, 0.15),
    inset 0 -20px 40px rgba(0, 0, 0, 0.3);
}

/* Ornate corner decorations */
.btn-grotto-main::before,
.btn-grotto-main::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-style: solid;
  border-color: var(--gold);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.btn-grotto-main::before {
  top: 6px;
  left: 6px;
  border-width: 2px 0 0 2px;
}

.btn-grotto-main::after {
  bottom: 6px;
  right: 6px;
  border-width: 0 2px 2px 0;
}

.btn-grotto-main:hover::before,
.btn-grotto-main:hover::after {
  opacity: 1;
}

@keyframes grotto-shine {
  0% { left: -100%; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

.btn-grotto-main:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow:
    0 0 40px rgba(139, 0, 0, 0.4),
    0 0 60px rgba(212, 175, 55, 0.15),
    0 8px 30px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.grotto-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.grotto-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 12px rgba(139, 0, 0, 0.8));
  animation: icon-flicker 4s ease-in-out infinite;
}

@keyframes icon-flicker {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 12px rgba(139, 0, 0, 0.8)); }
  50% { opacity: 0.9; filter: drop-shadow(0 0 18px rgba(220, 20, 60, 0.9)); }
}

.grotto-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.grotto-title {
  font-family: 'Orbitron', 'Press Start 2P', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 3px;
}

.grotto-subtitle {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 7px;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: 2px;
  opacity: 0.6;
  text-transform: uppercase;
}

.grotto-features {
  display: none;
}

.grotto-resources {
  display: flex;
  gap: 16px;
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 10px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.grotto-souls {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}

.grotto-crystals {
  color: #9370db;
  text-shadow: 0 0 10px rgba(147, 112, 219, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}

.grotto-cta {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 2px;
  opacity: 0.7;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.btn-grotto-main:hover .grotto-cta {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Mobile Grotto Bar */
@media screen and (max-width: 600px) {
  .btn-grotto-main {
    padding: 10px 14px;
    gap: 10px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .grotto-banner {
    flex: 1;
    min-width: auto;
  }

  .grotto-icon {
    font-size: 20px;
  }

  .grotto-title {
    font-size: 9px;
  }

  .grotto-resources {
    font-size: 8px;
    gap: 10px;
  }

  .grotto-cta {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DAILY QUESTS BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Elite Horror Daily Quests Banner */
.hw-quests-banner {
  background:
    linear-gradient(180deg,
      rgba(30, 18, 15, 0.95) 0%,
      rgba(18, 10, 8, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow:
    0 4px 25px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(212, 175, 55, 0.1);
  position: relative;
}

/* Decorative top border */
.hw-quests-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.5) 50%,
    transparent 100%);
}

.quest-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.quest-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
}

.quest-title {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  flex: 1;
  letter-spacing: 2px;
}

.quest-timer {
  font-family: 'Teko', 'Press Start 2P', sans-serif;
  font-size: 8px;
  font-weight: 500;
  color: var(--gold-dark);
  opacity: 0.7;
}

.quest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 175, 55, 0.15);
  transition: all 0.3s ease;
}

.quest-item:hover {
  background: rgba(139, 0, 0, 0.15);
  border-color: rgba(212, 175, 55, 0.35);
}

.quest-item.completed {
  border-color: rgba(100, 200, 100, 0.5);
  background: rgba(100, 200, 100, 0.1);
}

.quest-task {
  flex: 1;
  font-size: 8px;
  color: #e8d4a8;
}

.quest-progress {
  font-size: 8px;
  color: #ffd866;
  min-width: 40px;
  text-align: center;
}

.quest-reward {
  font-size: 8px;
  color: #88ff88;
  min-width: 60px;
  text-align: right;
}

.quest-item.complete .quest-progress {
  color: #66ff66;
}

.quest-item.claimed {
  opacity: 0.6;
  border-color: rgba(100, 100, 100, 0.3);
  background: rgba(50, 50, 50, 0.3);
}

.quest-item.claimed .quest-reward {
  color: #888;
}

.quest-claim-btn {
  padding: 4px 12px;
  background: linear-gradient(180deg, #66dd66 0%, #44aa44 100%);
  border: 1px solid #88ff88;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit;
  font-size: 7px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: questPulse 1.5s infinite;
}

.quest-claim-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(100, 220, 100, 0.5);
}

@keyframes questPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(100, 220, 100, 0.3); }
  50% { box-shadow: 0 0 15px rgba(100, 220, 100, 0.6); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEEKLY CHALLENGE BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.hw-challenge-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(80, 40, 100, 0.9) 0%, rgba(50, 20, 70, 0.95) 100%);
  border: 2px solid rgba(200, 100, 255, 0.5);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.challenge-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 10px rgba(200, 100, 255, 0.5));
}

.challenge-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.challenge-title {
  font-size: 10px;
  color: #e8b8ff;
  text-shadow: 0 0 10px rgba(200, 100, 255, 0.5);
}

.challenge-desc {
  font-size: 7px;
  color: #c888e8;
  opacity: 0.9;
}

.challenge-reward {
  text-align: center;
}

.reward-amount {
  font-size: 11px;
  color: #88ffdd;
  text-shadow: 0 0 10px rgba(136, 255, 221, 0.5);
}

.challenge-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
}

.challenge-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
}

.challenge-fill {
  height: 100%;
  background: linear-gradient(90deg, #aa66dd 0%, #dd88ff 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.challenge-progress > span {
  font-size: 7px;
  color: #c888e8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAVERN & PIT BUILDING STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

#building-tavern { border-color: rgba(200, 150, 80, 0.4); }
#building-tavern:hover { border-color: #ddaa66; box-shadow: 0 12px 40px rgba(200, 150, 80, 0.3); }
#building-tavern .building-glow { background: radial-gradient(ellipse at center, rgba(200, 150, 80, 0.2) 0%, transparent 60%); }

#building-pit { border-color: rgba(200, 50, 100, 0.4); }
#building-pit:hover { border-color: #dd4488; box-shadow: 0 12px 40px rgba(200, 50, 100, 0.3); }
#building-pit .building-glow { background: radial-gradient(ellipse at center, rgba(200, 50, 100, 0.2) 0%, transparent 60%); }

.building-notification {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  background: #ff4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  font-weight: bold;
  animation: notif-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

@keyframes notif-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.building-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 6px;
  font-weight: bold;
  letter-spacing: 1px;
}

.building-badge.new-badge {
  background: linear-gradient(180deg, #44dd88 0%, #22aa66 100%);
  color: #fff;
  box-shadow: 0 0 10px rgba(68, 221, 136, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAVERN PANEL - ACHIEVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.tavern-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.achievement-categories {
  display: flex;
  gap: 8px;
}

.achievement-tab {
  flex: 1;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(200, 150, 80, 0.3);
  border-radius: var(--radius-sm);
  color: #d4a866;
  font-family: inherit;
  font-size: 9px;
  transition: all 0.2s ease;
}

.achievement-tab:hover {
  background: rgba(200, 150, 80, 0.15);
}

.achievement-tab.active {
  background: linear-gradient(180deg, #c4a044 0%, #8a6820 100%);
  border-color: #e8c866;
  color: #fff;
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 350px;
  overflow-y: auto;
  padding: 4px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(200, 150, 80, 0.2);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.achievement-item:hover {
  background: rgba(200, 150, 80, 0.1);
  border-color: rgba(200, 150, 80, 0.4);
}

.achievement-item.unlocked {
  border-color: rgba(100, 200, 100, 0.5);
  background: rgba(100, 200, 100, 0.08);
}

.achievement-item.locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.achievement-icon {
  font-size: 28px;
  width: 44px;
  text-align: center;
}

.achievement-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.achievement-name {
  font-size: 10px;
  color: #e8d4a8;
}

.achievement-desc {
  font-size: 7px;
  color: #aa9966;
}

.achievement-reward {
  font-size: 10px;
  color: #88dd88;
  text-shadow: 0 0 8px rgba(136, 221, 136, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIT PANEL - ENDLESS MODE
   ═══════════════════════════════════════════════════════════════════════════ */

.pit-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pit-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.pit-stat {
  text-align: center;
  padding: 14px 24px;
  background: rgba(200, 50, 100, 0.1);
  border: 1px solid rgba(200, 50, 100, 0.3);
  border-radius: var(--radius-md);
}

.pit-stat-value {
  display: block;
  font-size: 24px;
  color: #ff6699;
  text-shadow: 0 0 15px rgba(255, 102, 153, 0.5);
}

.pit-stat-label {
  font-size: 7px;
  color: #cc6688;
  margin-top: 4px;
}

.pit-rewards h4 {
  font-size: 10px;
  color: #e8a8c8;
  margin-bottom: 12px;
  text-align: center;
}

.pit-milestone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(200, 50, 100, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.pit-milestone:hover {
  background: rgba(200, 50, 100, 0.1);
  border-color: rgba(200, 50, 100, 0.4);
}

.pit-milestone.boss {
  border-color: rgba(255, 200, 50, 0.5);
  background: rgba(255, 200, 50, 0.1);
}

.pit-milestone.completed {
  border-color: rgba(100, 200, 100, 0.5);
}

.milestone-depth {
  font-size: 9px;
  color: #e8a8c8;
}

.milestone-reward {
  font-size: 9px;
  color: #88dd88;
}

.btn-pit {
  margin-top: 12px;
  background: linear-gradient(180deg, #dd4488 0%, #aa2266 50%, #771144 100%) !important;
  border-color: #ff6699 !important;
}

.btn-pit:hover {
  box-shadow: 0 6px 30px rgba(200, 50, 100, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Home World Enhancements
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 900px) {
  .hw-buildings {
    grid-template-columns: repeat(3, 1fr);
  }

  .hw-challenge-banner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .challenge-icon { order: 1; }
  .challenge-info { order: 2; flex-basis: calc(100% - 60px); }
  .challenge-reward { order: 3; }
  .challenge-progress { order: 4; flex: 1; }
}

@media screen and (max-width: 600px) {
  .hw-quests-banner {
    padding: 12px 14px;
  }

  .quest-header {
    flex-wrap: wrap;
  }

  .quest-timer {
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }

  .quest-item {
    flex-wrap: wrap;
    gap: 8px;
  }

  .quest-task { flex-basis: 100%; }

  .hw-challenge-banner {
    padding: 12px 14px;
    flex-direction: column;
    text-align: center;
  }

  .challenge-info { align-items: center; }

  .pit-stats {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pit-stat {
    flex: 1;
    min-width: 80px;
  }

  .achievement-list {
    max-height: 250px;
  }

  .achievement-item {
    flex-wrap: wrap;
  }
}

/* ============================================ */
/* ADD GROTTO NETWORK BUTTON                   */
/* ============================================ */

.btn-add-network {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #0a0a0a;
  background: linear-gradient(135deg, #00ffff, #008b8b);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-add-network:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px #00ffff, 0 5px 20px rgba(0, 255, 255, 0.4);
}

.btn-add-network:active {
  transform: translateY(0);
}

.btn-add-network .wallet-icon {
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLS LINKS - Layout + Theme (base.css not loaded on this page)
   ═══════════════════════════════════════════════════════════════════════════ */

.tools-link {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  overflow: visible;
  background: linear-gradient(transparent, rgba(5, 5, 10, 0.9) 30%);
}

.tools-link a {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--ash);
  text-decoration: none;
  letter-spacing: 1px;
  padding: 10px 15px;
  background: var(--panel);
  border: 1px solid var(--sand-dark);
  border-radius: 5px;
  transition: all 0.3s ease;
  cursor: none;
}

.tools-link a:hover {
  color: var(--fire-bright);
  border-color: var(--ember);
  box-shadow: 0 0 15px var(--rust-glow);
  text-shadow: 0 0 5px var(--fire);
}

/* Nav Dropdown (GAMES menu) */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.nav-dropdown-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--ash);
  letter-spacing: 1px;
  padding: 10px 15px;
  background: var(--panel);
  border: 1px solid var(--sand-dark);
  border-radius: 5px;
  transition: all 0.3s ease;
  cursor: none;
  white-space: nowrap;
}

.nav-dropdown-btn:hover,
.nav-dropdown:hover .nav-dropdown-btn {
  color: var(--fire-bright);
  border-color: var(--ember);
  box-shadow: 0 0 15px var(--rust-glow);
  text-shadow: 0 0 5px var(--fire);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(10, 10, 18, 0.95);
  border: 1px solid var(--sand-dark);
  border-radius: 8px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
  z-index: 200;
  min-width: 120px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: var(--ash);
  text-decoration: none;
  letter-spacing: 1px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: none;
  white-space: nowrap;
  text-align: center;
}

.nav-dropdown-menu a:hover {
  color: var(--fire-bright);
  background: rgba(255, 99, 71, 0.05);
  text-shadow: 0 0 5px var(--fire);
}

/* Nav responsive */
@media (max-width: 768px) {
  .tools-link {
    gap: 5px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 8px 10px;
  }

  .tools-link a {
    font-size: 0.4rem;
    padding: 8px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-dropdown-btn {
    font-size: 0.4rem;
    padding: 8px 10px;
  }

  .nav-dropdown-menu a {
    font-size: 0.35rem;
    padding: 6px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 4 - MYTHIC HORRORS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --t4: #ff44ff;
  --t4-glow: rgba(255, 68, 255, 0.5);
}

.tier-4-badge {
  background: linear-gradient(135deg, #ff44ff, #aa00aa) !important;
  color: white !important;
  text-shadow: 0 0 10px rgba(255, 68, 255, 0.5);
}

.pet-slot.tier-4, .shop-slot.tier-4 {
  border-color: var(--t4) !important;
  box-shadow: 0 0 15px var(--t4-glow), inset 0 0 10px rgba(255, 68, 255, 0.2);
}

.pet-slot.tier-4::before, .shop-slot.tier-4::before {
  background: linear-gradient(90deg, transparent, rgba(255, 68, 255, 0.3), transparent);
  animation: mythicPulse 2s infinite;
}

@keyframes mythicPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATTLE SPEED BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.battle-speed-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  border: 2px solid #666;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ash);
  cursor: pointer;
  transition: all 0.2s ease;
}

.battle-speed-btn:hover {
  border-color: var(--fire);
  color: var(--fire-bright);
}

.battle-speed-btn.speed-1 {
  border-color: #44aa44;
  color: #66dd66;
}

.battle-speed-btn.speed-2 {
  border-color: #aaaa44;
  color: #dddd66;
}

.battle-speed-btn.speed-3 {
  border-color: #aa4444;
  color: #dd6666;
  animation: turboGlow 0.5s infinite alternate;
}

@keyframes turboGlow {
  from { box-shadow: 0 0 5px rgba(255, 68, 68, 0.3); }
  to { box-shadow: 0 0 15px rgba(255, 68, 68, 0.6); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACHIEVEMENT POPUP
   ═══════════════════════════════════════════════════════════════════════════ */

.achievement-popup {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 20000;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-popup.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.achievement-popup-content {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  background: linear-gradient(135deg, rgba(255, 200, 50, 0.95), rgba(200, 150, 30, 0.95));
  border: 3px solid #ffd700;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 40px rgba(255, 200, 50, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: achievementBounce 0.5s ease;
}

@keyframes achievementBounce {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.achievement-popup-icon {
  font-size: 2.5rem;
  animation: spin 1s ease;
}

@keyframes spin {
  0% { transform: rotate(-360deg) scale(0); }
  100% { transform: rotate(0) scale(1); }
}

.achievement-popup-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.achievement-popup-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #553300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.achievement-popup-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: #221100;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACHIEVEMENT LIST IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.achievement-counter {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--sulfur);
  margin-left: 10px;
}

.achievement-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}

.achievement-progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--fire), var(--sulfur));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.achievement-progress-text {
  font-size: 0.5rem;
  color: var(--ash);
  margin-top: 4px;
}

.claim-reward-btn {
  padding: 8px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  background: linear-gradient(135deg, #44cc44, #228822);
  border: 2px solid #66ff66;
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: claimPulse 1.5s infinite;
}

@keyframes claimPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(68, 204, 68, 0.3); }
  50% { box-shadow: 0 0 15px rgba(68, 204, 68, 0.6); }
}

.claim-reward-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(68, 204, 68, 0.5);
}

.claimed-badge {
  font-size: 1.5rem;
  color: #44cc44;
}

.achievement-item.claimed {
  opacity: 0.6;
}

.achievement-item.claimed .achievement-icon {
  filter: grayscale(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PIT IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.pit-milestone.reached {
  background: linear-gradient(135deg, rgba(68, 204, 68, 0.3), rgba(34, 136, 34, 0.3));
  border-color: #44cc44;
}

.pit-milestone.reached::after {
  content: '✓';
  position: absolute;
  right: 10px;
  color: #44cc44;
  font-size: 1rem;
}

.pit-milestone {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYNERGY BAR IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.synergy-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.5), rgba(60, 60, 60, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  font-size: 0.55rem;
  color: var(--bone);
  transition: all 0.3s ease;
}

.synergy-tag.active {
  background: linear-gradient(135deg, rgba(255, 200, 50, 0.3), rgba(200, 150, 30, 0.3));
  border-color: var(--sulfur);
  color: var(--sulfur);
  animation: synergyActive 2s infinite;
}

@keyframes synergyActive {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 200, 50, 0.3); }
  50% { box-shadow: 0 0 15px rgba(255, 200, 50, 0.5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIT MODE INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */

.pit-mode-indicator {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(180, 50, 100, 0.9), rgba(120, 30, 70, 0.9));
  border: 2px solid #ff6699;
  border-radius: var(--radius-md);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: white;
  z-index: 1000;
  animation: pitGlow 2s infinite alternate;
}

@keyframes pitGlow {
  from { box-shadow: 0 0 10px rgba(255, 102, 153, 0.3); }
  to { box-shadow: 0 0 25px rgba(255, 102, 153, 0.6); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WALLET CONNECTION UI
   ═══════════════════════════════════════════════════════════════════════════ */

.wallet-btn,
#connect-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(100, 80, 160, 0.8) 0%, rgba(60, 40, 100, 0.8) 100%);
  border: 1px solid rgba(150, 100, 220, 0.5);
  border-radius: var(--radius-md);
  color: #e0c0ff;
  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wallet-btn:hover,
#connect-wallet:hover {
  background: linear-gradient(180deg, rgba(120, 100, 180, 0.9) 0%, rgba(80, 60, 120, 0.9) 100%);
  border-color: rgba(180, 140, 255, 0.7);
  transform: translateY(-1px);
}

.wallet-btn.connected,
#connect-wallet.connected {
  background: linear-gradient(180deg, rgba(80, 160, 100, 0.8) 0%, rgba(40, 100, 60, 0.8) 100%);
  border-color: rgba(100, 220, 150, 0.5);
}

.wallet-btn.connected:hover,
#connect-wallet.connected:hover {
  background: linear-gradient(180deg, rgba(100, 180, 120, 0.9) 0%, rgba(60, 120, 80, 0.9) 100%);
}

.wallet-icon {
  font-size: 14px;
}

.wallet-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.wallet-username {
  font-weight: bold;
  color: #fff;
}

.wallet-address {
  font-size: 8px;
  color: #aaa;
}

.wallet-balance {
  font-weight: bold;
  color: #ffcc66;
  margin-left: auto;
}

/* Wallet Dropdown Menu */
.wallet-dropdown {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 280px;
  background: rgba(30, 20, 50, 0.98);
  border: 2px solid rgba(150, 100, 220, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 10000;
  overflow: hidden;
}

.wallet-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(150, 100, 220, 0.3);
}

.wallet-avatar {
  font-size: 32px;
}

.wallet-menu-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-menu-name {
  font-size: 12px;
  font-weight: bold;
  color: #e0c0ff;
}

.wallet-menu-address {
  font-size: 9px;
  color: #888;
  word-break: break-all;
}

.wallet-menu-balance {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 200, 50, 0.1);
  border-bottom: 1px solid rgba(150, 100, 220, 0.3);
  font-size: 11px;
  color: #ffcc66;
}

.wallet-menu-actions {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.wallet-menu-actions button {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: #ccc;
  font-family: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wallet-menu-actions button:hover {
  background: rgba(150, 100, 220, 0.2);
  color: #fff;
}

.wallet-menu-actions button.disconnect {
  color: #ff6666;
  margin-top: 8px;
  border-top: 1px solid rgba(100, 100, 100, 0.3);
  padding-top: 16px;
}

.wallet-menu-actions button.disconnect:hover {
  background: rgba(255, 50, 50, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   USERNAME MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.username-modal {
  max-width: 400px;
  text-align: center;
}

.username-modal h2 {
  color: #e0c0ff;
  margin-bottom: 12px;
}

.username-modal p {
  color: #aaa;
  font-size: 10px;
  margin-bottom: 20px;
}

.username-input-container {
  position: relative;
  margin-bottom: 8px;
}

.username-input-container input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(150, 100, 220, 0.4);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  text-align: center;
}

.username-input-container input:focus {
  outline: none;
  border-color: rgba(150, 100, 220, 0.8);
}

.username-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
}

.username-status.success { color: #66dd66; }
.username-status.error { color: #ff6666; }

.username-rules {
  font-size: 8px;
  color: #666;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.purchase-modal {
  max-width: 350px;
  text-align: center;
  padding: 30px;
}

.purchase-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.purchase-modal h3 {
  color: #e0c0ff;
  margin-bottom: 12px;
}

.purchase-amount {
  font-size: 18px;
  font-weight: bold;
  color: #ffcc66;
  margin-bottom: 16px;
}

.purchase-status {
  font-size: 10px;
  color: #aaa;
  margin-bottom: 20px;
}

.purchase-status a {
  color: #88aaff;
}

.purchase-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border: 3px solid rgba(150, 100, 220, 0.3);
  border-top-color: #aa66ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIRM PURCHASE MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.confirm-purchase-modal {
  max-width: 380px;
  text-align: center;
}

.confirm-purchase-modal h3 {
  color: #e0c0ff;
  margin-bottom: 16px;
}

.confirm-purchase-modal > p {
  color: #aaa;
  font-size: 10px;
  margin-bottom: 20px;
}

.purchase-price-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 200, 50, 0.1);
  border: 1px solid rgba(255, 200, 50, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.heresy-icon {
  font-size: 24px;
}

.heresy-amount {
  font-size: 18px;
  font-weight: bold;
  color: #ffcc66;
}

.wallet-balance-info {
  font-size: 9px;
  color: #888;
  margin-bottom: 20px;
}

.modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.modal-buttons .btn-fire,
.confirm-purchase-modal .btn-fire {
  padding: 12px 28px;
  background: linear-gradient(180deg, #ff6644 0%, #cc4422 50%, #993311 100%);
  border: 2px solid #ffaa44;
  border-radius: var(--radius-sm, 6px);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(255, 100, 50, 0.3);
}

.modal-buttons .btn-fire:hover,
.confirm-purchase-modal .btn-fire:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 100, 50, 0.5);
  background: linear-gradient(180deg, #ff7755 0%, #dd5533 50%, #aa4422 100%);
}

.modal-buttons .btn-secondary,
.confirm-purchase-modal .btn-secondary {
  padding: 12px 28px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(150, 150, 150, 0.4);
  border-radius: var(--radius-sm, 6px);
  color: #aaa;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-buttons .btn-secondary:hover,
.confirm-purchase-modal .btn-secondary:hover {
  background: rgba(100, 100, 100, 0.3);
  border-color: rgba(200, 200, 200, 0.5);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM SHOP MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.premium-shop-modal {
  max-width: 700px;
  width: 95%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.premium-shop-modal h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffcc66;
  margin-bottom: 16px;
}

.premium-shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(150, 100, 220, 0.3);
  padding-bottom: 12px;
}

.premium-shop-tabs .tab-btn {
  flex: 1;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(150, 100, 220, 0.3);
  border-radius: var(--radius-sm);
  color: #aaa;
  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.premium-shop-tabs .tab-btn:hover {
  background: rgba(150, 100, 220, 0.2);
  color: #fff;
}

.premium-shop-tabs .tab-btn.active {
  background: linear-gradient(180deg, rgba(150, 100, 220, 0.4) 0%, rgba(100, 60, 160, 0.4) 100%);
  border-color: rgba(180, 140, 255, 0.5);
  color: #fff;
}

.premium-shop-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.shop-tab {
  display: none;
}

.shop-tab.active {
  display: block;
}

.shop-tab h3 {
  font-size: 10px;
  color: #aa88cc;
  margin-bottom: 16px;
  text-align: center;
}

.premium-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.premium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(150, 100, 220, 0.3);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.premium-item:hover {
  border-color: rgba(180, 140, 255, 0.5);
  transform: translateY(-2px);
}

.premium-item.owned {
  opacity: 0.6;
  border-color: rgba(100, 200, 100, 0.5);
}

.premium-item .item-icon {
  font-size: 32px;
}

.premium-item .item-name {
  font-size: 10px;
  font-weight: bold;
  color: #e0c0ff;
  text-align: center;
}

.premium-item .item-desc {
  font-size: 8px;
  color: #888;
  text-align: center;
}

.premium-item .item-price {
  font-size: 11px;
  font-weight: bold;
  color: #ffcc66;
}

.premium-item .btn-buy {
  padding: 8px 20px;
  background: linear-gradient(180deg, #aa66ff 0%, #7744cc 100%);
  border: 1px solid #cc88ff;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit;
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.premium-item .btn-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(170, 100, 255, 0.4);
}

.premium-shop-footer {
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(150, 100, 220, 0.3);
  text-align: center;
  font-size: 10px;
  color: #ffcc66;
}

/* Crystal bundle special colors */
.premium-item.crystal-bundle.small { border-color: rgba(100, 150, 200, 0.5); }
.premium-item.crystal-bundle.medium { border-color: rgba(100, 200, 150, 0.5); }
.premium-item.crystal-bundle.large { border-color: rgba(200, 150, 100, 0.5); }
.premium-item.crystal-bundle.mega { border-color: rgba(255, 150, 100, 0.5); }

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.leaderboard-modal {
  max-width: 500px;
  width: 95%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.leaderboard-modal h2 {
  text-align: center;
  color: #ffcc66;
  margin-bottom: 16px;
}

.leaderboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.leaderboard-tabs .tab-btn {
  flex: 1;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(150, 100, 220, 0.3);
  border-radius: var(--radius-sm);
  color: #aaa;
  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
}

.leaderboard-tabs .tab-btn.active {
  background: rgba(150, 100, 220, 0.3);
  border-color: rgba(180, 140, 255, 0.5);
  color: #fff;
}

.leaderboard-table {
  flex: 1;
  overflow-y: auto;
}

.leaderboard-header {
  display: grid;
  grid-template-columns: 40px 1fr 80px;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(150, 100, 220, 0.3);
  font-size: 9px;
  font-weight: bold;
  color: #aa88cc;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 40px 1fr 80px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.2);
  font-size: 10px;
  color: #ccc;
}

.leaderboard-row:hover {
  background: rgba(150, 100, 220, 0.1);
}

.leaderboard-row.highlight {
  background: rgba(255, 200, 50, 0.1);
  border-color: rgba(255, 200, 50, 0.3);
}

.leaderboard-row .rank {
  font-weight: bold;
  color: #ffcc66;
}

.leaderboard-row .player {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row .stat {
  text-align: right;
  font-weight: bold;
}

.leaderboard-loading {
  text-align: center;
  padding: 40px;
  color: #888;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPGRADE SKIP BUTTON (Premium Purchase)
   ═══════════════════════════════════════════════════════════════════════════ */

.upgrade-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-skip-upgrade {
  padding: 4px 8px;
  background: linear-gradient(180deg, rgba(255, 180, 50, 0.8) 0%, rgba(200, 130, 30, 0.8) 100%);
  border: 1px solid rgba(255, 200, 100, 0.6);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit;
  font-size: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-skip-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 180, 50, 0.4);
}

.btn-skip-upgrade .skip-price {
  display: block;
  font-size: 6px;
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMPROVED MOBILE STYLES FOR SMALL SCREENS
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 500px) {
  /* Game screen - more breathing room */
  #game-screen {
    padding: 8px;
    padding-bottom: 20px;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
    max-height: 100vh;
  }

  /* Container takes full screen */
  .container {
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  /* Game Info Bar - more compact */
  .game-info-bar {
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .info-section {
    gap: 12px;
  }

  .info-item {
    font-size: 10px;
    gap: 4px;
  }

  .info-icon {
    font-size: 14px;
  }

  .progress-bar-container {
    height: 8px;
  }

  /* Team section - better sizing */
  .your-team-section {
    padding: 10px 12px;
    min-height: auto;
  }

  .your-team-section .section-header {
    margin-bottom: 8px;
  }

  .your-team-section .section-title {
    font-size: 10px;
  }

  #your-team {
    gap: 8px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
  }

  .pet-slot {
    width: 56px;
    height: 70px;
    min-width: 56px;
    flex-shrink: 0;
  }

  .pet-slot .pet-emoji {
    font-size: 22px;
  }

  .pet-slot .pet-stats {
    font-size: 9px;
    gap: 6px;
  }

  /* Shop container - stack vertically */
  .shop-container {
    flex-direction: column;
    gap: 10px;
  }

  /* Pet shop - full width */
  .shop-section.pet-shop {
    width: 100%;
    padding: 10px 12px;
  }

  .shop-section .shop-header {
    margin-bottom: 8px;
  }

  .shop-section .section-title {
    font-size: 10px;
  }

  /* Shop action buttons */
  .shop-actions {
    gap: 6px;
  }

  .shop-actions button {
    padding: 8px 12px;
    font-size: 9px;
  }

  /* Shop slots - center and space */
  #shop-slots {
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .shop-slot {
    width: 70px;
    height: 88px;
    padding: 6px;
  }

  .shop-slot .pet-emoji {
    font-size: 26px;
  }

  .shop-slot .pet-stats {
    font-size: 10px;
    gap: 6px;
  }

  .shop-slot .pet-cost {
    font-size: 9px;
    padding: 3px 6px;
  }

  /* Food shop - horizontal layout */
  .shop-section.food-shop {
    width: 100%;
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
  }

  .shop-section.food-shop .shop-header {
    flex-shrink: 0;
  }

  #food-slots {
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
  }

  .food-slot {
    width: 56px;
    height: 68px;
    min-width: 56px;
    flex-shrink: 0;
  }

  .food-slot .food-emoji {
    font-size: 22px;
  }

  .food-slot .food-cost {
    font-size: 9px;
  }

  /* Bottom actions - fixed at bottom */
  .game-actions {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .game-actions button {
    padding: 12px 16px;
    font-size: 10px;
    flex: 1;
    min-width: 80px;
    max-width: 150px;
  }

  #end-turn {
    flex: 2;
    max-width: 180px;
  }

  /* Sell button */
  #sell-pet {
    font-size: 9px;
    padding: 10px 14px;
  }

  /* Victory progress */
  .progress-section {
    flex: 1 1 100%;
    order: 10;
    margin-top: 4px;
  }

  .win-counter {
    font-size: 9px;
  }
}

/* Extra small screens (iPhone SE, etc) */
@media screen and (max-width: 375px) {
  #game-screen {
    padding: 6px;
    gap: 8px;
  }

  .game-info-bar {
    padding: 8px 10px;
  }

  .info-item {
    font-size: 9px;
  }

  .pet-slot {
    width: 50px;
    height: 62px;
    min-width: 50px;
  }

  .pet-slot .pet-emoji {
    font-size: 18px;
  }

  .pet-slot .pet-stats {
    font-size: 8px;
  }

  .shop-slot {
    width: 62px;
    height: 78px;
  }

  .shop-slot .pet-emoji {
    font-size: 22px;
  }

  .food-slot {
    width: 50px;
    height: 60px;
    min-width: 50px;
  }

  .game-actions button {
    padding: 10px 12px;
    font-size: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED ANIMATIONS AND TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smooth page transitions */
.container, #game-screen, #main-menu, #battle-screen {
  transition: opacity 0.3s ease;
}

/* Button hover animations */
button, .btn, .pet-slot, .shop-slot, .food-slot {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

button:active, .btn:active {
  transform: scale(0.95);
}

/* Pet slot hover effects */
.pet-slot:hover:not(.empty), .shop-slot:hover:not(.empty), .food-slot:hover:not(.empty) {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Pulse animation for important elements */
@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.btn-fire, #end-turn, .btn-battle {
  animation: subtlePulse 2s ease-in-out infinite;
}

.btn-fire:hover, #end-turn:hover, .btn-battle:hover {
  animation: none;
  transform: scale(1.05);
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-content, .modal-overlay > div {
  animation: fadeIn 0.2s ease-out;
}

/* Resource gain animation */
@keyframes resourcePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #ffdd44; }
  100% { transform: scale(1); }
}

.stat-value.gained {
  animation: resourcePop 0.4s ease;
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.3s ease;
}

/* Glow animation for new items */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 200, 100, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 200, 100, 0.6); }
}

.new-item, .shop-slot.can-afford:not(.frozen) {
  animation: glow 1.5s ease-in-out infinite;
}

/* Smooth scroll behavior */
.your-team-section, #food-slots, #shop-slots {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Better focus states for accessibility */
button:focus, .pet-slot:focus, .shop-slot:focus, input:focus {
  outline: 2px solid rgba(255, 180, 100, 0.8);
  outline-offset: 2px;
}

/* Loading spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Tooltip improvements */
.tooltip, [data-tooltip]::after {
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: bottom center;
}

[data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(-5px);
}

/* Card flip animation for reveals */
@keyframes cardFlip {
  0% { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

.shop-slot.revealed {
  animation: cardFlip 0.3s ease-out;
}

/* Victory celebration */
@keyframes celebrateBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.victory-pet {
  animation: celebrateBounce 0.5s ease infinite;
}

/* Damage flash */
@keyframes damageFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) saturate(0.5); }
}

.pet-slot.hit {
  animation: damageFlash 0.2s ease;
}

/* Touch feedback for mobile */
@media (pointer: coarse) {
  button:active, .pet-slot:active, .shop-slot:active, .food-slot:active {
    transform: scale(0.92);
    transition-duration: 0.05s;
  }

  /* Larger touch targets */
  .shop-actions button {
    min-height: 44px;
    min-width: 44px;
  }

  .game-actions button {
    min-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EPIC BATTLE COUNTDOWN OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.battle-countdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, rgba(75, 0, 30, 0.9) 0%, rgba(5, 2, 8, 0.95) 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.battle-countdown-overlay.active {
  opacity: 1;
  visibility: visible;
}

.countdown-number {
  font-family: 'Orbitron', sans-serif;
  font-size: 12rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow:
    0 0 40px var(--gold),
    0 0 80px var(--fire),
    0 0 120px var(--blood-bright);
  animation: countdownPulse 0.5s ease-out;
}

.countdown-fight {
  font-family: 'Orbitron', sans-serif;
  font-size: 6rem;
  font-weight: 700;
  color: var(--crimson);
  text-shadow:
    0 0 30px var(--crimson),
    0 0 60px var(--blood),
    0 0 100px var(--fire);
  letter-spacing: 20px;
  animation: fightReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.countdown-round {
  font-family: 'Teko', sans-serif;
  font-size: 2rem;
  color: var(--bone);
  margin-top: 20px;
  letter-spacing: 8px;
  opacity: 0.8;
}

@keyframes countdownPulse {
  0% { transform: scale(2); opacity: 0; filter: blur(20px); }
  50% { transform: scale(0.9); filter: blur(0); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fightReveal {
  0% { transform: scale(0.3) rotateX(90deg); opacity: 0; }
  60% { transform: scale(1.3) rotateX(-10deg); }
  100% { transform: scale(1) rotateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE TRANSITION EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

.phase-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--abyss);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
}

.phase-transition-overlay.shop-to-battle {
  animation: phaseWipe 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.phase-transition-overlay.battle-to-shop {
  animation: phaseWipeReverse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes phaseWipe {
  0% { opacity: 0; transform: translateX(-100%); }
  30% { opacity: 1; transform: translateX(0); }
  70% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(100%); }
}

@keyframes phaseWipeReverse {
  0% { opacity: 0; transform: translateY(-100%); }
  30% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(100%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEVEL UP CELEBRATION
   ═══════════════════════════════════════════════════════════════════════════ */

.pet-slot.leveling-up {
  animation: levelUpCelebration 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
}

.pet-slot.leveling-up::before {
  content: '⬆️';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  animation: levelUpArrow 0.8s ease-out forwards;
  z-index: 101;
}

.level-up-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.level-up-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: levelUpParticle 0.8s ease-out forwards;
}

@keyframes levelUpCelebration {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); filter: brightness(1.5) drop-shadow(0 0 20px var(--gold)); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes levelUpArrow {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

@keyframes levelUpParticle {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VICTORY / DEFEAT SCREEN ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.result-modal.victory {
  animation: victoryReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result-modal.defeat {
  animation: defeatReveal 0.6s ease-out;
}

@keyframes victoryReveal {
  0% { transform: scale(0.5) rotateY(180deg); opacity: 0; }
  60% { transform: scale(1.1) rotateY(-10deg); }
  100% { transform: scale(1) rotateY(0); opacity: 1; }
}

@keyframes defeatReveal {
  0% { transform: translateY(-50px); opacity: 0; filter: blur(10px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

.result-modal.victory .result-title {
  animation: victoryTitle 1s ease-out infinite alternate;
}

.result-modal.defeat .result-title {
  color: var(--ash);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

@keyframes victoryTitle {
  0% { text-shadow: 0 0 20px var(--gold), 0 0 40px var(--fire); }
  100% { text-shadow: 0 0 40px var(--gold), 0 0 80px var(--fire), 0 0 120px var(--sulfur); }
}

/* Victory confetti effect */
.victory-confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10001;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOLD GAIN / LOSS FEEDBACK
   ═══════════════════════════════════════════════════════════════════════════ */

.gold-change-indicator {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Teko', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  z-index: 9000;
  pointer-events: none;
  animation: goldChangeFloat 1.5s ease-out forwards;
}

.gold-change-indicator.gain {
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold), 0 0 40px var(--sulfur);
}

.gold-change-indicator.loss {
  color: var(--crimson);
  text-shadow: 0 0 20px var(--crimson), 0 0 40px var(--blood);
}

@keyframes goldChangeFloat {
  0% { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0; }
  20% { transform: translateX(-50%) translateY(-20px) scale(1.2); opacity: 1; }
  80% { transform: translateX(-50%) translateY(-60px) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-100px) scale(0.8); opacity: 0; }
}

/* Gold display pulse when changed */
.gold-display.changed {
  animation: goldPulse 0.4s ease-out;
}

@keyframes goldPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); filter: brightness(1.3); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED ATTACK ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.pet-slot.attacking {
  animation: attackLunge 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
}

.pet-slot.attacking-left {
  animation: attackLungeLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pet-slot.attacking-right {
  animation: attackLungeRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes attackLungeLeft {
  0% { transform: translateX(0); }
  40% { transform: translateX(-40px) scale(1.1); }
  100% { transform: translateX(0); }
}

@keyframes attackLungeRight {
  0% { transform: translateX(0); }
  40% { transform: translateX(40px) scale(1.1); }
  100% { transform: translateX(0); }
}

/* Impact flash */
.pet-slot.taking-damage {
  animation: takeDamage 0.25s ease-out;
}

@keyframes takeDamage {
  0% { filter: brightness(1); transform: scale(1); }
  25% { filter: brightness(2) saturate(0); transform: scale(0.95); }
  50% { filter: brightness(1.5) hue-rotate(10deg); transform: scale(1.05); }
  100% { filter: brightness(1); transform: scale(1); }
}

/* Death animation enhanced */
.pet-slot.dying {
  animation: petDeath 0.6s ease-out forwards;
}

@keyframes petDeath {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  30% { transform: scale(1.2); filter: brightness(2) saturate(0); }
  60% { transform: scale(0.8) rotate(10deg); opacity: 0.5; }
  100% { transform: scale(0) rotate(180deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYNERGY ACTIVATION EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

.synergy-activation-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, var(--spectral) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 9500;
  animation: synergyFlash 0.5s ease-out;
}

@keyframes synergyFlash {
  0% { opacity: 0.6; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2); }
}

.synergy-indicator.active {
  animation: synergyPulseActive 1s ease-in-out infinite;
}

@keyframes synergyPulseActive {
  0%, 100% { box-shadow: 0 0 10px var(--spectral); }
  50% { box-shadow: 0 0 30px var(--spectral), 0 0 60px var(--phantom); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP PURCHASE FEEDBACK
   ═══════════════════════════════════════════════════════════════════════════ */

.shop-slot.purchasing {
  animation: purchasePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes purchasePop {
  0% { transform: scale(1); }
  50% { transform: scale(0.85); filter: brightness(1.5); }
  100% { transform: scale(1); }
}

.shop-slot.sold {
  animation: soldFade 0.4s ease-out forwards;
}

@keyframes soldFade {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(0.8) translateY(-20px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FREEZE BUTTON ENHANCEMENT
   ═══════════════════════════════════════════════════════════════════════════ */

.freeze-btn.frozen {
  animation: frozenPulse 2s ease-in-out infinite;
  background: linear-gradient(135deg, #4169e1 0%, #1e90ff 50%, #00bfff 100%) !important;
}

@keyframes frozenPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(65, 105, 225, 0.5); }
  50% { box-shadow: 0 0 25px rgba(30, 144, 255, 0.8), 0 0 50px rgba(0, 191, 255, 0.4); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOSS WARNING ANIMATION
   ═══════════════════════════════════════════════════════════════════════════ */

.boss-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(139, 0, 0, 0.3);
  pointer-events: none;
  z-index: 9000;
  animation: bossWarningFlash 0.5s ease-out;
}

@keyframes bossWarningFlash {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}

.boss-incoming-text {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--crimson);
  text-shadow: 0 0 30px var(--blood), 0 0 60px var(--crimson);
  letter-spacing: 10px;
  z-index: 9001;
  animation: bossTextReveal 1s ease-out forwards;
}

@keyframes bossTextReveal {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); letter-spacing: 50px; }
  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); letter-spacing: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN SHAKE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.screen-shake-light {
  animation: screenShakeLight 0.3s ease-out;
}

.screen-shake-heavy {
  animation: screenShakeHeavy 0.5s ease-out;
}

@keyframes screenShakeLight {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -1px); }
}

@keyframes screenShakeHeavy {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-8px, 5px) rotate(-1deg); }
  20% { transform: translate(8px, -5px) rotate(1deg); }
  30% { transform: translate(-6px, 4px) rotate(-0.5deg); }
  40% { transform: translate(6px, -4px) rotate(0.5deg); }
  50% { transform: translate(-4px, 3px); }
  60% { transform: translate(4px, -3px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, 1px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 2, 8, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-spinner-large {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(212, 175, 55, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-family: 'Teko', sans-serif;
  font-size: 1rem;
  color: var(--bone);
  margin-top: 20px;
  letter-spacing: 4px;
  animation: loadingTextPulse 1.5s ease-in-out infinite;
}

@keyframes loadingTextPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON HOVER IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-premium:hover::before {
  left: 100%;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.btn-premium:active {
  transform: translateY(0);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  padding: 15px 25px;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--obsidian) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  color: var(--bone);
  font-family: 'Teko', sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast.success {
  border-color: #4ade80;
}

.toast.error {
  border-color: var(--crimson);
}

.toast.warning {
  border-color: var(--ember);
}

.toast.hiding {
  animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .countdown-number {
    font-size: 8rem;
  }

  .countdown-fight {
    font-size: 4rem;
    letter-spacing: 10px;
  }

  .gold-change-indicator {
    font-size: 2rem;
  }

  .boss-incoming-text {
    font-size: 2rem;
  }

  .toast {
    right: 10px;
    left: 10px;
    max-width: calc(100vw - 20px);
  }

  /* Better touch feedback */
  .pet-slot, .shop-slot, .food-slot {
    transition: transform 0.1s ease;
  }

  .pet-slot:active, .shop-slot:active, .food-slot:active {
    transform: scale(0.95);
  }
}

@media (max-width: 480px) {
  .countdown-number {
    font-size: 6rem;
  }

  .countdown-fight {
    font-size: 3rem;
    letter-spacing: 6px;
  }
}