* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color-scheme: only light !important;
}

:root {
  /* Force light color scheme to prevent dark mode affecting colors */
  color-scheme: only light !important;
  /* default header height; JS will set precisely */
  --app-header-height: 56px;
  /* Unlock Card density tokens (Home) */
  --uc-pad: 18px;
  --uc-gap: 16px;
  --uc-radius: 12px;
  --uc-title: 18px;
  --uc-sub: 13px;
  --uc-price: 14px;
  --uc-btn: 14px;
  --uc-emoji: 28px;
  
  --bg-primary: #0a0e27;
  --bg-secondary: #1a1f3a;
  --bg-tertiary: #0f172a;
  --border-primary: #2a3f5f;
  --border-secondary: #3b5998;
  --text-primary: #fff;
  --text-secondary: #8b92a9;
  --accent-primary: #60a5fa;
  --accent-secondary: #3b5998;
  --success: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;
  --purple: #a78bfa;
  --prestige-gold: #ffd700;
  --prestige-gradient: linear-gradient(135deg, #ffd700, #ffed4e);
  
  /* Font families */
  --font-system: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-roboto: 'Roboto', sans-serif;
  --font-open-sans: 'Open Sans', sans-serif;
  --font-lato: 'Lato', sans-serif;
  --font-poppins: 'Poppins', sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;
  --font-source-sans-pro: 'Source Sans Pro', sans-serif;
  --font-raleway: 'Raleway', sans-serif;
  --font-ubuntu: 'Ubuntu', sans-serif;
  --font-nunito: 'Nunito', sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono', monospace;
  --font-fira-code: 'Fira Code', monospace;
  
  /* Default font */
  --font-family: var(--font-system);
}

/* Default body background to match game container */
body {
  background-color: var(--bg-tertiary);
  font-family: var(--font-family);
}

/* Ensure main game content wrapper has consistent background */
#main-game-content {
  background-color: var(--bg-tertiary);
}

body.dark-purple {
  --bg-primary: #1a0f3a;
  --bg-secondary: #2d1b69;
  --bg-tertiary: #160829;
  --border-primary: #4a2f8a;
  --border-secondary: #6b46c1;
  --text-primary: #f3e8ff;
  --text-secondary: #c4b5fd;
  --accent-primary: #a78bfa;
  --accent-secondary: #6b46c1
}
body.midnight-green {
  --bg-primary: #051a1a;
  --bg-secondary: #0f3a3a;
  --bg-tertiary: #0a2929;
  --border-primary: #1f5f5f;
  --border-secondary: #2d8585;
  --text-primary: #e6fffa;
  --text-secondary: #81e6d9;
  --accent-primary: #4fd1c5;
  --accent-secondary: #319795
}
body.crimson-dark {
  --bg-primary: #1a0505;
  --bg-secondary: #3a0f0f;
  --bg-tertiary: #290a0a;
  --border-primary: #5f1f1f;
  --border-secondary: #852d2d;
  --text-primary: #ffe6e6;
  --text-secondary: #fca5a5;
  --accent-primary: #f87171;
  --accent-secondary: #dc2626
}
body.theme-neon {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #050505;
  --border-primary: #f0f;
  --border-secondary: #0ff;
  --text-primary: #fff;
  --text-secondary: #f0f;
  --accent-primary: #0ff;
  --accent-secondary: #f0f;
  --success: #0f0;
  --danger: #f06;
  --warning: #ff0;
  --purple: #f0f
}
body.theme-neon .flip-button,
body.theme-neon .menu-button:hover,
body.theme-neon .resource-value,
body.theme-neon .section-tab.active {
  text-shadow: 0 0 10px currentColor,0 0 20px currentColor
}
body.theme-neon .game-header,
body.theme-neon .left-menu,
body.theme-neon .right-stats {
  box-shadow: inset 0 0 20px rgba(255,0,255,.2)
}
body.theme-neon .upgrade-button:not(:disabled):hover {
  box-shadow: 0 0 20px var(--accent-primary),0 0 40px var(--accent-primary)
}
body.theme-neon .campaign-card.purchased {
  box-shadow: 0 0 20px var(--accent-primary), inset 0 0 20px rgba(255,0,255,.2);
}
body.theme-neon .campaign-button.can-afford:hover {
  box-shadow: 0 0 20px var(--success), 0 0 40px var(--success);
}
body.theme-neon .stat-value,
body.theme-neon .stat-item-value {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}
body.theme-neon .timeline-node.available {
  animation: neon-pulse 1.5s infinite alternate;
}
@keyframes neon-pulse {
  from { box-shadow: 0 0 10px var(--success); }
  to { box-shadow: 0 0 30px var(--success), 0 0 50px var(--success); }
}

/* Matrix Theme - Advertising Components */
body.theme-matrix .advertising-container {
  border: 1px solid var(--success);
  box-shadow: 0 0 20px rgba(0,255,0,.1);
}
body.theme-matrix .campaign-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  font-family: 'Courier New', Consolas, Monaco, monospace;
}
body.theme-matrix .campaign-card.purchased {
  box-shadow: 0 0 15px var(--success), inset 0 0 15px rgba(0,255,0,.1);
  animation: matrix-data-flow 2s infinite linear;
}
body.theme-matrix .campaign-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 10px rgba(0,255,0,.3);
}
body.theme-matrix .campaign-card.locked {
  opacity: 0.4;
  filter: brightness(0.6);
}
body.theme-matrix .campaign-button.can-afford:hover {
  background: var(--success);
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 20px var(--success);
}
body.theme-matrix .stat-value,
body.theme-matrix .stat-item-value {
  color: var(--success);
  text-shadow: 0 0 5px currentColor;
  font-family: 'Courier New', monospace;
}
body.theme-matrix .timeline-container {
  border: 1px solid var(--border-primary);
  background: rgba(0,0,0,.8);
}
body.theme-matrix .timeline-node {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
}
body.theme-matrix .timeline-node.available {
  border-color: var(--success);
  box-shadow: 0 0 10px rgba(0,255,0,.5);
  animation: matrix-terminal-blink 1s infinite;
}
body.theme-matrix .timeline-node.completed {
  background: rgba(0,255,0,.1);
  border-color: var(--success);
}
@keyframes matrix-data-flow {
  0% { box-shadow: 0 0 15px var(--success), inset 0 0 15px rgba(0,255,0,.1); }
  50% { box-shadow: 0 0 25px var(--success), inset 0 0 25px rgba(0,255,0,.2); }
  100% { box-shadow: 0 0 15px var(--success), inset 0 0 15px rgba(0,255,0,.1); }
}
@keyframes matrix-terminal-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.7; }
}

body.retro {
  --bg-primary: #2b1f17;
  --bg-secondary: #3d2817;
  --bg-tertiary: #1f1411;
  --border-primary: #8b6939;
  --border-secondary: #a0826d;
  --text-primary: #faebd7;
  --text-secondary: #daa520;
  --accent-primary: #ff6b35;
  --accent-secondary: #f4a460;
  --success: #90ee90;
  --danger: #ff6347;
  --warning: #ffd700;
  --purple: #dda0dd;
  font-family: 'Courier New',monospace
}
body.retro .flip-button,
body.retro .menu-button {
  border-radius: 0;
  text-transform: uppercase
}
body.diner {
  --bg-primary: #f5f5dc;
  --bg-secondary: #ffe4e1;
  --bg-tertiary: #faf0e6;
  --border-primary: #dc143c;
  --border-secondary: #ff1744;
  --text-primary: #2f4f4f;
  --text-secondary: #696969;
  --accent-primary: #dc143c;
  --accent-secondary: #ff6b6b;
  --success: #32cd32;
  --danger: #f44;
  --warning: #ffa500;
  --purple: #ff1744
}
body.diner .game-header {
  background: repeating-linear-gradient(45deg,var(--bg-secondary),var(--bg-secondary) 10px,#fff 10px,#fff 20px)
}
body.diner .menu-button {
  font-family: Georgia,serif;
  font-weight: 700
}
body.theme-matrix {
  --bg-primary: #000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #030303;
  --border-primary: #0f0;
  --border-secondary: #008f00;
  --text-primary: #0f0;
  --text-secondary: #0c0;
  --accent-primary: #0f0;
  --accent-secondary: #0a0;
  --success: #0f0;
  --danger: #f00;
  --warning: #ff0;
  --purple: #0f0;
  font-family: Consolas,Monaco,monospace
}
body.theme-matrix::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,0,.03) 2px,rgba(0,255,0,.03) 4px);
  pointer-events: none;
  z-index: 1
}
body.theme-matrix * {
  text-shadow: 0 0 3px rgba(0,255,0,.5)
}
body.theme-matrix .flip-button,
body.theme-matrix .menu-button:hover,
body.theme-matrix .resource-value,
body.theme-matrix .section-tab.active {
  text-shadow: 0 0 8px #00ff00, 0 0 16px #00ff00
}
body.theme-matrix .game-header,
body.theme-matrix .left-menu,
body.theme-matrix .right-stats {
  box-shadow: inset 0 0 20px rgba(0,255,0,.2)
}
body.theme-matrix .upgrade-button:not(:disabled):hover {
  box-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-primary)
}

/* === PREMIUM THEMES === */

/* VAPORWAVE Theme */
body.theme-vaporwave {
  --bg-primary: #1a0d2e;
  --bg-secondary: #2d1b4e;
  --bg-tertiary: #16082a;
  --border-primary: #ff69b4;
  --border-secondary: #ff1493;
  --text-primary: #ffb3d9;
  --text-secondary: #e6ccff;
  --accent-primary: #ff69b4;
  --accent-secondary: #da70d6;
  --success: #98fb98;
  --danger: #ff6b9d;
  --warning: #ffb347;
  --purple: #dda0dd;
  font-family: 'Georgia', serif;
}

body.theme-vaporwave::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(255, 105, 180, 0.1) 0%,
    rgba(138, 43, 226, 0.1) 25%,
    rgba(255, 20, 147, 0.1) 50%,
    rgba(218, 112, 214, 0.1) 75%,
    rgba(255, 105, 180, 0.1) 100%
  );
  background-size: 200% 200%;
  animation: vaporwave-gradient 8s ease infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes vaporwave-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.theme-vaporwave .card {
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 105, 180, 0.3);
  box-shadow: 0 8px 32px rgba(255, 105, 180, 0.2);
}

body.theme-vaporwave .flip-button,
body.theme-vaporwave .upgrade-button:not(:disabled) {
  background: linear-gradient(135deg, #ff69b4, #da70d6);
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

body.theme-vaporwave .flip-button:hover,
body.theme-vaporwave .upgrade-button:not(:disabled):hover {
  box-shadow: 0 0 30px rgba(255, 105, 180, 0.8);
  transform: translateY(-2px);
}

body.theme-vaporwave .resource-value {
  text-shadow: 0 0 10px currentColor;
}

/* Vaporwave Theme - Advertising Components */
body.theme-vaporwave .advertising-container {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 2px solid var(--border-primary);
  box-shadow: 0 0 30px rgba(255,105,180,.2);
}
body.theme-vaporwave .campaign-card {
  background: linear-gradient(135deg, rgba(255,105,180,.1), rgba(0,255,255,.1));
  border: 1px solid var(--border-primary);
  backdrop-filter: blur(10px);
}
body.theme-vaporwave .campaign-card.purchased {
  background: linear-gradient(135deg, rgba(255,105,180,.3), rgba(0,255,255,.3));
  box-shadow: 0 0 20px var(--accent-primary), inset 0 0 20px rgba(255,105,180,.2);
  animation: vaporwave-float 3s ease-in-out infinite;
}
body.theme-vaporwave .campaign-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 15px rgba(0,255,255,.4);
  animation: vaporwave-glow 2s ease-in-out infinite alternate;
}
body.theme-vaporwave .campaign-card.locked {
  opacity: 0.6;
  filter: grayscale(0.7);
}
body.theme-vaporwave .campaign-button.can-afford:hover {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 0 25px rgba(255,105,180,.6);
  transform: translateY(-2px);
}
body.theme-vaporwave .stat-value,
body.theme-vaporwave .stat-item-value {
  color: var(--accent-primary);
  text-shadow: 0 0 10px currentColor, 0 0 20px rgba(255,105,180,.5);
  font-weight: 600;
}
body.theme-vaporwave .timeline-container {
  background: linear-gradient(135deg, rgba(255,105,180,.1), rgba(0,255,255,.1));
  border: 2px solid var(--border-primary);
  backdrop-filter: blur(5px);
}
body.theme-vaporwave .timeline-node {
  background: rgba(255,105,180,.2);
  border: 1px solid var(--border-primary);
}
body.theme-vaporwave .timeline-node.available {
  border-color: var(--success);
  box-shadow: 0 0 15px rgba(0,255,255,.5);
  animation: vaporwave-pulse 1.5s ease-in-out infinite alternate;
}
body.theme-vaporwave .timeline-node.completed {
  background: linear-gradient(135deg, rgba(255,105,180,.4), rgba(0,255,255,.4));
  border-color: var(--success);
}
@keyframes vaporwave-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}
@keyframes vaporwave-glow {
  from { box-shadow: 0 0 15px rgba(0,255,255,.4); }
  to { box-shadow: 0 0 25px rgba(0,255,255,.6), 0 0 35px rgba(255,105,180,.4); }
}
@keyframes vaporwave-pulse {
  from { box-shadow: 0 0 15px rgba(0,255,255,.5); }
  to { box-shadow: 0 0 25px rgba(0,255,255,.7), 0 0 35px rgba(255,105,180,.5); }
}

/* SYNTHWAVE Theme */
body.theme-synthwave {
  --bg-primary: #0d0221;
  --bg-secondary: #1a0440;
  --bg-tertiary: #0a0118;
  --border-primary: #ff006e;
  --border-secondary: #00f5ff;
  --text-primary: #ffffff;
  --text-secondary: #ff006e;
  --accent-primary: #00f5ff;
  --accent-secondary: #ff006e;
  --success: #39ff14;
  --danger: #ff0040;
  --warning: #ffff00;
  --purple: #bf00ff;
  font-family: 'Orbitron', 'Arial Black', monospace;
}

body.theme-synthwave::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 98px,
      rgba(0, 245, 255, 0.03) 100px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 98px,
      rgba(255, 0, 110, 0.03) 100px
    ),
    radial-gradient(ellipse at center, rgba(191, 0, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: synthwave-pulse 4s ease-in-out infinite alternate;
}

@keyframes synthwave-pulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

body.theme-synthwave .card {
  border: 2px solid rgba(0, 245, 255, 0.5);
  box-shadow: 
    0 0 20px rgba(255, 0, 110, 0.3),
    inset 0 0 20px rgba(0, 245, 255, 0.1);
  background: linear-gradient(135deg, rgba(13, 2, 33, 0.9), rgba(26, 4, 64, 0.9));
}

body.theme-synthwave .flip-button,
body.theme-synthwave .upgrade-button:not(:disabled) {
  background: linear-gradient(135deg, #ff006e, #00f5ff);
  border: 2px solid rgba(0, 245, 255, 0.8);
  box-shadow: 
    0 0 20px rgba(255, 0, 110, 0.6),
    0 0 40px rgba(0, 245, 255, 0.4);
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

body.theme-synthwave .flip-button:hover,
body.theme-synthwave .upgrade-button:not(:disabled):hover {
  box-shadow: 
    0 0 30px rgba(255, 0, 110, 0.8),
    0 0 60px rgba(0, 245, 255, 0.6);
  transform: translateY(-3px) scale(1.05);
}

body.theme-synthwave .game-header {
  background: linear-gradient(90deg, rgba(255, 0, 110, 0.2), rgba(0, 245, 255, 0.2));
  border-bottom: 3px solid rgba(0, 245, 255, 0.8);
  box-shadow: 0 0 30px rgba(255, 0, 110, 0.5);
}

body.theme-synthwave .resource-value,
body.theme-synthwave .section-tab.active {
  text-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
}

/* Synthwave Theme - Advertising Components */
body.theme-synthwave .advertising-container {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  border: 2px solid var(--border-primary);
  box-shadow: 0 0 40px rgba(255,0,110,.3);
}
body.theme-synthwave .campaign-card {
  background: linear-gradient(135deg, rgba(255,0,110,.2), rgba(0,245,255,.1));
  border: 1px solid var(--border-primary);
  position: relative;
  overflow: hidden;
}
body.theme-synthwave .campaign-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,0,110,.1), transparent);
  animation: synthwave-scan 3s linear infinite;
  pointer-events: none;
}
body.theme-synthwave .campaign-card.purchased {
  background: linear-gradient(135deg, rgba(255,0,110,.4), rgba(0,245,255,.3));
  box-shadow: 0 0 30px var(--accent-primary), inset 0 0 30px rgba(255,0,110,.3);
  border-color: var(--accent-primary);
}
body.theme-synthwave .campaign-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 20px rgba(0,245,255,.5);
  animation: synthwave-beat 1s ease-in-out infinite alternate;
}
body.theme-synthwave .campaign-card.locked {
  opacity: 0.5;
  filter: grayscale(0.8) brightness(0.6);
}
body.theme-synthwave .campaign-button.can-afford:hover {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 0 30px rgba(255,0,110,.8);
  text-shadow: 0 0 15px currentColor;
}
body.theme-synthwave .stat-value,
body.theme-synthwave .stat-item-value {
  color: var(--accent-primary);
  text-shadow: 0 0 15px currentColor, 0 0 30px rgba(255,0,110,.6);
  font-weight: 700;
}
body.theme-synthwave .timeline-container {
  background: linear-gradient(135deg, rgba(255,0,110,.15), rgba(0,245,255,.1));
  border: 2px solid var(--border-primary);
  box-shadow: 0 0 30px rgba(255,0,110,.2);
}
body.theme-synthwave .timeline-node {
  background: rgba(255,0,110,.3);
  border: 1px solid var(--border-primary);
  position: relative;
}
body.theme-synthwave .timeline-node.available {
  border-color: var(--success);
  box-shadow: 0 0 20px rgba(0,245,255,.6);
  animation: synthwave-grid-pulse 1.2s ease-in-out infinite;
}
body.theme-synthwave .timeline-node.completed {
  background: linear-gradient(135deg, rgba(255,0,110,.5), rgba(0,245,255,.4));
  border-color: var(--success);
  box-shadow: 0 0 15px var(--success);
}
@keyframes synthwave-scan {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
@keyframes synthwave-beat {
  from {
    box-shadow: 0 0 20px rgba(0,245,255,.5);
    transform: scale(1);
  }
  to {
    box-shadow: 0 0 30px rgba(0,245,255,.7), 0 0 40px rgba(255,0,110,.4);
    transform: scale(1.02);
  }
}
@keyframes synthwave-grid-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0,245,255,.6);
    border-color: var(--success);
  }
  50% {
    box-shadow: 0 0 30px rgba(0,245,255,.8), 0 0 40px rgba(255,0,110,.5);
    border-color: var(--accent-primary);
  }
}

/* STEAMPUNK Theme */
body.theme-steampunk {
  --bg-primary: #2c1810;
  --bg-secondary: #3d2818;
  --bg-tertiary: #1f120c;
  --border-primary: #cd7f32;
  --border-secondary: #b8860b;
  --text-primary: #f4e4bc;
  --text-secondary: #daa520;
  --accent-primary: #cd7f32;
  --accent-secondary: #b8860b;
  --success: #8fbc8f;
  --danger: #a0522d;
  --warning: #daa520;
  --purple: #9370db;
  font-family: 'Times New Roman', serif;
}

body.theme-steampunk::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(205, 127, 50, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(184, 134, 11, 0.1) 0%, transparent 50%),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(205, 127, 50, 0.02) 0deg,
      transparent 5deg,
      rgba(184, 134, 11, 0.02) 10deg,
      transparent 15deg
    );
  pointer-events: none;
  z-index: 1;
}

body.theme-steampunk .card {
  background: linear-gradient(145deg, rgba(61, 40, 24, 0.9), rgba(44, 24, 16, 0.9));
  border: 3px solid rgba(205, 127, 50, 0.6);
  border-radius: 15px;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    inset 0 2px 5px rgba(205, 127, 50, 0.2);
  position: relative;
}

body.theme-steampunk .card::after {
  content: '⚙';
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  color: rgba(205, 127, 50, 0.3);
  animation: steampunk-gear 8s linear infinite;
  pointer-events: none;
}

@keyframes steampunk-gear {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body.theme-steampunk .flip-button,
body.theme-steampunk .upgrade-button:not(:disabled) {
  background: linear-gradient(135deg, #cd7f32, #b8860b, #8b4513);
  border: 2px solid rgba(218, 165, 32, 0.8);
  border-radius: 8px;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 2px 5px rgba(218, 165, 32, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  position: relative;
}

body.theme-steampunk .flip-button::before,
body.theme-steampunk .upgrade-button:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 30%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 4px;
}

body.theme-steampunk .flip-button:hover,
body.theme-steampunk .upgrade-button:not(:disabled):hover {
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 2px 8px rgba(218, 165, 32, 0.4);
  transform: translateY(-2px);
}

body.theme-steampunk .game-header {
  background: linear-gradient(90deg, rgba(61, 40, 24, 0.95), rgba(44, 24, 16, 0.95));
  border-bottom: 4px solid rgba(205, 127, 50, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.theme-steampunk .resource-value {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  font-weight: bold;
}

body.theme-steampunk .menu-button:hover {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(184, 134, 11, 0.2));
  border-left: 4px solid rgba(218, 165, 32, 0.8);
}

/* Steampunk Theme - Advertising Components */
body.theme-steampunk .advertising-container {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 3px solid var(--border-primary);
  box-shadow: inset 0 0 20px rgba(205,127,50,.3), 0 0 30px rgba(184,134,11,.2);
  border-radius: 8px;
  position: relative;
}
body.theme-steampunk .advertising-container::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(218,165,32,.3);
  border-radius: 4px;
  pointer-events: none;
}
body.theme-steampunk .campaign-card {
  background: linear-gradient(135deg, rgba(205,127,50,.2), rgba(139,69,19,.3));
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(205,127,50,.2);
  position: relative;
}
body.theme-steampunk .campaign-card::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(218,165,32,.8), transparent);
  border-radius: 50%;
  opacity: 0.7;
}
body.theme-steampunk .campaign-card.purchased {
  background: linear-gradient(135deg, rgba(205,127,50,.4), rgba(139,69,19,.5));
  border-color: var(--warning);
  box-shadow: 0 0 25px rgba(218,165,32,.4), inset 0 0 20px rgba(205,127,50,.3);
  animation: steampunk-steam 4s ease-in-out infinite;
}
body.theme-steampunk .campaign-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 15px rgba(218,165,32,.5);
  animation: steampunk-gear-turn 3s linear infinite;
}
body.theme-steampunk .campaign-card.locked {
  opacity: 0.6;
  filter: sepia(0.8) brightness(0.7);
}
body.theme-steampunk .campaign-button.can-afford:hover {
  background: linear-gradient(135deg, var(--warning), var(--accent-primary));
  box-shadow: 0 0 20px rgba(218,165,32,.6);
  border-color: var(--warning);
}
body.theme-steampunk .stat-value,
body.theme-steampunk .stat-item-value {
  color: var(--warning);
  text-shadow: 0 0 8px rgba(218,165,32,.6);
  font-family: 'Times New Roman', serif;
  font-weight: 600;
}
body.theme-steampunk .timeline-container {
  background: linear-gradient(135deg, rgba(205,127,50,.15), rgba(139,69,19,.2));
  border: 2px solid var(--border-primary);
  box-shadow: inset 0 0 15px rgba(205,127,50,.2);
}
body.theme-steampunk .timeline-node {
  background: rgba(205,127,50,.3);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  position: relative;
}
body.theme-steampunk .timeline-node::before {
  content: '⚙';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--warning);
  font-size: 12px;
  animation: steampunk-cog-spin 2s linear infinite;
}
body.theme-steampunk .timeline-node.available {
  border-color: var(--success);
  box-shadow: 0 0 15px rgba(218,165,32,.6);
  animation: steampunk-pressure 1.5s ease-in-out infinite alternate;
}
body.theme-steampunk .timeline-node.completed {
  background: linear-gradient(135deg, rgba(205,127,50,.5), rgba(218,165,32,.4));
  border-color: var(--success);
  box-shadow: 0 0 20px rgba(218,165,32,.5);
}
@keyframes steampunk-steam {
  0%, 100% { box-shadow: 0 0 25px rgba(218,165,32,.4), inset 0 0 20px rgba(205,127,50,.3); }
  50% { box-shadow: 0 0 35px rgba(218,165,32,.6), inset 0 0 30px rgba(205,127,50,.4); }
}
@keyframes steampunk-gear-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes steampunk-cog-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes steampunk-pressure {
  from {
    box-shadow: 0 0 15px rgba(218,165,32,.6);
    transform: scale(1);
  }
  to {
    box-shadow: 0 0 25px rgba(218,165,32,.8);
    transform: scale(1.05);
  }
}

/* CYBERPUNK Theme */
body.theme-cyberpunk {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a0a1a;
  --bg-tertiary: #0f0a0f;
  --border-primary: #ff0080;
  --border-secondary: #00ffff;
  --text-primary: #ffffff;
  --text-secondary: #ff0080;
  --accent-primary: #00ffff;
  --accent-secondary: #ff0080;
  --success: #00ff00;
  --danger: #ff0040;
  --warning: #ffff00;
  --purple: #ff00ff;
  font-family: 'Courier New', 'Consolas', monospace;
}

body.theme-cyberpunk::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255, 0, 128, 0.03) 3px,
      rgba(255, 0, 128, 0.03) 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 255, 0.02) 3px,
      rgba(0, 255, 255, 0.02) 4px
    );
  pointer-events: none;
  z-index: 1;
  animation: cyberpunk-glitch 5s ease-in-out infinite;
}

@keyframes cyberpunk-glitch {
  0%, 90%, 100% { 
    filter: hue-rotate(0deg);
    opacity: 1; 
  }
  92%, 94% { 
    filter: hue-rotate(90deg);
    opacity: 0.8;
    transform: translateX(2px);
  }
  93% { 
    filter: hue-rotate(-90deg);
    transform: translateX(-2px);
  }
}

body.theme-cyberpunk .card {
  background: linear-gradient(135deg, rgba(26, 10, 26, 0.9), rgba(10, 10, 10, 0.9));
  border: 2px solid rgba(255, 0, 128, 0.6);
  box-shadow: 
    0 0 20px rgba(255, 0, 128, 0.3),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  position: relative;
}

body.theme-cyberpunk .card::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
  animation: cyberpunk-scan 3s linear infinite;
}

@keyframes cyberpunk-scan {
  0% { transform: translateY(0px); opacity: 1; }
  50% { transform: translateY(200px); opacity: 0.5; }
  100% { transform: translateY(400px); opacity: 0; }
}

body.theme-cyberpunk .flip-button,
body.theme-cyberpunk .upgrade-button:not(:disabled) {
  background: linear-gradient(135deg, #ff0080, #00ffff);
  border: 2px solid rgba(0, 255, 255, 0.8);
  box-shadow: 
    0 0 25px rgba(255, 0, 128, 0.6),
    0 0 50px rgba(0, 255, 255, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
}

body.theme-cyberpunk .flip-button::before,
body.theme-cyberpunk .upgrade-button:not(:disabled)::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: cyberpunk-hologram 2s linear infinite;
}

@keyframes cyberpunk-hologram {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.theme-cyberpunk .flip-button:hover,
body.theme-cyberpunk .upgrade-button:not(:disabled):hover {
  background: linear-gradient(135deg, #ff0080, #00ffff) !important;
  box-shadow: 
    0 0 30px rgba(255, 0, 128, 0.8),
    0 0 60px rgba(0, 255, 255, 0.6),
    0 0 90px rgba(255, 0, 128, 0.4) !important;
  transform: translateY(-3px) scale(1.05) !important;
}

@keyframes cyberpunk-button-glitch {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
}

body.theme-cyberpunk .resource-value,
body.theme-cyberpunk .section-tab.active {
  text-shadow: 
    0 0 10px currentColor, 
    0 0 20px currentColor,
    0 0 30px currentColor;
  animation: cyberpunk-text-flicker 4s ease-in-out infinite;
}

@keyframes cyberpunk-text-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%, 98% { opacity: 0.8; }
  97% { opacity: 0.6; }
}

/* Cyberpunk Theme - Advertising Components */
body.theme-cyberpunk .advertising-container {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 2px solid var(--border-primary);
  box-shadow: 0 0 40px rgba(255,20,147,.3);
  position: relative;
}
body.theme-cyberpunk .advertising-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0,255,255,.1) 2px,
    rgba(0,255,255,.1) 4px
  );
  pointer-events: none;
}
body.theme-cyberpunk .campaign-card {
  background: linear-gradient(135deg, rgba(255,20,147,.2), rgba(0,255,255,.1));
  border: 1px solid var(--border-primary);
  position: relative;
  overflow: hidden;
}
body.theme-cyberpunk .campaign-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,.3), transparent);
  animation: cyberpunk-data-stream 2s linear infinite;
  pointer-events: none;
}
body.theme-cyberpunk .campaign-card.purchased {
  background: linear-gradient(135deg, rgba(255,20,147,.4), rgba(0,255,255,.3));
  border-color: var(--accent-primary);
  box-shadow: 0 0 30px var(--accent-primary), inset 0 0 20px rgba(255,20,147,.2);
  animation: cyberpunk-pulse 1.5s ease-in-out infinite alternate;
}
body.theme-cyberpunk .campaign-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 20px rgba(0,255,255,.5);
  animation: cyberpunk-ready 1s ease-in-out infinite alternate;
}
body.theme-cyberpunk .campaign-card.locked {
  opacity: 0.4;
  filter: grayscale(1) brightness(0.5);
  position: relative;
}
body.theme-cyberpunk .campaign-card.locked::after {
  content: 'ACCESS DENIED';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--danger);
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 0 10px currentColor;
  animation: cyberpunk-text-flicker 1s infinite;
}
body.theme-cyberpunk .campaign-button.can-afford:hover {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 0 30px rgba(255,20,147,.8);
  text-shadow: 0 0 10px currentColor;
  border-color: var(--accent-primary);
}
body.theme-cyberpunk .stat-value,
body.theme-cyberpunk .stat-item-value {
  color: var(--accent-primary);
  text-shadow: 0 0 10px currentColor, 0 0 20px rgba(255,20,147,.6);
  font-family: 'Courier New', monospace;
  font-weight: 700;
}
body.theme-cyberpunk .timeline-container {
  background: linear-gradient(135deg, rgba(255,20,147,.15), rgba(0,255,255,.1));
  border: 2px solid var(--border-primary);
  box-shadow: 0 0 30px rgba(255,20,147,.2);
}
body.theme-cyberpunk .timeline-node {
  background: rgba(255,20,147,.3);
  border: 1px solid var(--border-primary);
  position: relative;
}
body.theme-cyberpunk .timeline-node::before {
  content: '◆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-primary);
  text-shadow: 0 0 10px currentColor;
}
body.theme-cyberpunk .timeline-node.available {
  border-color: var(--success);
  box-shadow: 0 0 20px rgba(0,255,255,.6);
  animation: cyberpunk-node-active 1.2s ease-in-out infinite;
}
body.theme-cyberpunk .timeline-node.completed {
  background: linear-gradient(135deg, rgba(255,20,147,.5), rgba(0,255,255,.4));
  border-color: var(--success);
  box-shadow: 0 0 15px var(--success);
}
@keyframes cyberpunk-data-stream {
  from { left: -100%; }
  to { left: 100%; }
}
@keyframes cyberpunk-pulse {
  from {
    box-shadow: 0 0 30px var(--accent-primary), inset 0 0 20px rgba(255,20,147,.2);
  }
  to {
    box-shadow: 0 0 50px var(--accent-primary), inset 0 0 30px rgba(255,20,147,.4);
  }
}
@keyframes cyberpunk-ready {
  from {
    box-shadow: 0 0 20px rgba(0,255,255,.5);
    border-color: var(--success);
  }
  to {
    box-shadow: 0 0 30px rgba(0,255,255,.7), 0 0 40px rgba(255,20,147,.4);
    border-color: var(--accent-primary);
  }
}
@keyframes cyberpunk-node-active {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0,255,255,.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(0,255,255,.8), 0 0 40px rgba(255,20,147,.5);
    transform: scale(1.1);
  }
}

/* COSMIC Theme */
body.theme-cosmic {
  --bg-primary: #0b1426;
  --bg-secondary: #1a237e;
  --bg-tertiary: #0d1421;
  --border-primary: #8a2be2;
  --border-secondary: #9c27b0;
  --text-primary: #f0f8ff;
  --text-secondary: #b39ddb;
  --accent-primary: #8a2be2;
  --accent-secondary: #9c27b0;
  --success: #4fc3f7;
  --danger: #e91e63;
  --warning: #ffc107;
  --purple: #9c27b0;
  font-family: 'Georgia', serif;
}

body.theme-cosmic::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 43, 226, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(63, 81, 181, 0.3) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
  animation: cosmic-nebula 20s ease-in-out infinite;
}

@keyframes cosmic-nebula {
  0%, 100% { 
    transform: rotate(0deg) scale(1);
    opacity: 0.8;
  }
  33% { 
    transform: rotate(120deg) scale(1.1);
    opacity: 1;
  }
  66% { 
    transform: rotate(240deg) scale(0.9);
    opacity: 0.9;
  }
}

body.theme-cosmic::after {
  content: '✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(240, 248, 255, 0.1);
  font-size: 20px;
  line-height: 40px;
  white-space: pre-wrap;
  pointer-events: none;
  z-index: 2;
  animation: cosmic-stars 30s linear infinite;
  overflow: hidden;
}

@keyframes cosmic-stars {
  0% { transform: translateY(100vh) rotate(0deg); }
  100% { transform: translateY(-100vh) rotate(360deg); }
}

body.theme-cosmic .card {
  background: linear-gradient(135deg, rgba(26, 35, 126, 0.8), rgba(11, 20, 38, 0.9));
  border: 2px solid rgba(138, 43, 226, 0.6);
  box-shadow: 
    0 0 30px rgba(138, 43, 226, 0.4),
    inset 0 0 30px rgba(156, 39, 176, 0.1);
  backdrop-filter: blur(10px);
}

body.theme-cosmic .flip-button,
body.theme-cosmic .upgrade-button:not(:disabled) {
  background: linear-gradient(135deg, #8a2be2, #9c27b0, #3f51b5);
  border: 2px solid rgba(138, 43, 226, 0.8);
  box-shadow: 
    0 0 25px rgba(138, 43, 226, 0.6),
    0 0 50px rgba(156, 39, 176, 0.4);
  text-shadow: 0 0 15px rgba(240, 248, 255, 0.8);
}

body.theme-cosmic .flip-button:hover,
body.theme-cosmic .upgrade-button:not(:disabled):hover {
  box-shadow: 
    0 0 35px rgba(138, 43, 226, 0.8),
    0 0 70px rgba(156, 39, 176, 0.6),
    0 0 105px rgba(63, 81, 181, 0.4);
  transform: translateY(-3px) scale(1.05);
}

body.theme-cosmic .game-header {
  background: 
    linear-gradient(90deg, rgba(138, 43, 226, 0.3), rgba(156, 39, 176, 0.3)),
    linear-gradient(135deg, rgba(11, 20, 38, 0.9), rgba(26, 35, 126, 0.9));
  border-bottom: 3px solid rgba(138, 43, 226, 0.8);
  box-shadow: 0 0 40px rgba(138, 43, 226, 0.5);
}

body.theme-cosmic .resource-value,
body.theme-cosmic .section-tab.active {
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px rgba(240, 248, 255, 0.5);
  animation: cosmic-pulse 3s ease-in-out infinite;
}

@keyframes cosmic-pulse {
  0%, 100% {
    filter: brightness(1);
    text-shadow:
      0 0 10px currentColor,
      0 0 20px currentColor;
  }
  50% {
    filter: brightness(1.3);
    text-shadow:
      0 0 15px currentColor,
      0 0 30px currentColor,
      0 0 45px rgba(240, 248, 255, 0.8);
  }
}

/* Cosmic Theme - Advertising Components */
body.theme-cosmic .advertising-container {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 3px solid var(--border-primary);
  box-shadow: 0 0 50px rgba(138,43,226,.4);
  position: relative;
  overflow: hidden;
}
body.theme-cosmic .advertising-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 80%, rgba(138,43,226,.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(156,39,176,.2) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(63,81,181,.1) 0%, transparent 50%);
  animation: cosmic-nebula 8s ease-in-out infinite alternate;
  pointer-events: none;
}
body.theme-cosmic .campaign-card {
  background: linear-gradient(135deg, rgba(138,43,226,.3), rgba(156,39,176,.2));
  border: 2px solid var(--border-primary);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
body.theme-cosmic .campaign-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--accent-primary), transparent);
  animation: cosmic-energy 3s ease-in-out infinite;
}
body.theme-cosmic .campaign-card.purchased {
  background: linear-gradient(135deg, rgba(138,43,226,.5), rgba(156,39,176,.4));
  border-color: var(--accent-primary);
  box-shadow: 0 0 40px rgba(138,43,226,.6), inset 0 0 30px rgba(156,39,176,.3);
  animation: cosmic-divine 2s ease-in-out infinite alternate;
}
body.theme-cosmic .campaign-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 25px rgba(138,43,226,.5);
  animation: cosmic-ready 1.8s ease-in-out infinite alternate;
}
body.theme-cosmic .campaign-card.locked {
  opacity: 0.5;
  filter: grayscale(0.9) brightness(0.6);
}
body.theme-cosmic .campaign-button.can-afford:hover {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 0 40px rgba(138,43,226,.8);
  text-shadow: 0 0 15px currentColor, 0 0 30px rgba(240,248,255,.8);
  transform: translateY(-2px);
}
body.theme-cosmic .stat-value,
body.theme-cosmic .stat-item-value {
  color: var(--accent-primary);
  text-shadow:
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px rgba(240,248,255,.6);
  font-weight: 600;
  animation: cosmic-pulse 3s ease-in-out infinite;
}
body.theme-cosmic .timeline-container {
  background: linear-gradient(135deg, rgba(138,43,226,.2), rgba(156,39,176,.15));
  border: 3px solid var(--border-primary);
  box-shadow: 0 0 40px rgba(138,43,226,.3);
  backdrop-filter: blur(5px);
}
body.theme-cosmic .timeline-node {
  background: radial-gradient(circle, rgba(138,43,226,.4), rgba(156,39,176,.3));
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  position: relative;
}
body.theme-cosmic .timeline-node::before {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-primary);
  font-size: 14px;
  text-shadow: 0 0 10px currentColor;
  animation: cosmic-star-twinkle 2s ease-in-out infinite alternate;
}
body.theme-cosmic .timeline-node.available {
  border-color: var(--success);
  box-shadow: 0 0 30px rgba(138,43,226,.7);
  animation: cosmic-orbit 2.5s ease-in-out infinite;
}
body.theme-cosmic .timeline-node.completed {
  background: radial-gradient(circle, rgba(138,43,226,.6), rgba(156,39,176,.5));
  border-color: var(--success);
  box-shadow: 0 0 25px var(--success), 0 0 50px rgba(138,43,226,.4);
}
@keyframes cosmic-nebula {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}
@keyframes cosmic-energy {
  0%, 100% { opacity: 0.3; height: 100%; }
  50% { opacity: 1; height: 80%; }
}
@keyframes cosmic-divine {
  from {
    box-shadow: 0 0 40px rgba(138,43,226,.6), inset 0 0 30px rgba(156,39,176,.3);
    filter: brightness(1);
  }
  to {
    box-shadow: 0 0 60px rgba(138,43,226,.8), inset 0 0 40px rgba(156,39,176,.4);
    filter: brightness(1.2);
  }
}
@keyframes cosmic-ready {
  from {
    box-shadow: 0 0 25px rgba(138,43,226,.5);
    transform: scale(1);
  }
  to {
    box-shadow: 0 0 35px rgba(138,43,226,.7), 0 0 45px rgba(156,39,176,.4);
    transform: scale(1.02);
  }
}
@keyframes cosmic-star-twinkle {
  from { text-shadow: 0 0 10px currentColor; opacity: 0.7; }
  to { text-shadow: 0 0 20px currentColor, 0 0 30px rgba(240,248,255,.8); opacity: 1; }
}
@keyframes cosmic-orbit {
  0%, 100% {
    box-shadow: 0 0 30px rgba(138,43,226,.7);
    transform: rotate(0deg) scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(138,43,226,.9), 0 0 60px rgba(156,39,176,.5);
    transform: rotate(180deg) scale(1.05);
  }
}

/* ARCTIC AURORA Theme */
body.theme-arctic {
  --bg-primary: #010b1a;
  --bg-secondary: #0a1929;
  --bg-tertiary: #132238;
  --border-primary: #1e4976;
  --border-secondary: #4a9eff;
  --text-primary: #e0f4ff;
  --text-secondary: #a0d2ff;
  --accent-primary: #00d4ff;
  --accent-secondary: #00ff88;
  --success: #00ff88;
  --danger: #ff6b9d;
  --warning: #00d4ff;
  --purple: #b19cd9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.theme-arctic::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at top, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(0, 255, 136, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, 
      rgba(177, 156, 217, 0.05) 0%, 
      rgba(19, 34, 56, 0.1) 50%, 
      rgba(0, 212, 255, 0.08) 100%
    );
  background-size: 100% 200%, 100% 150%, 100% 100%;
  animation: aurora 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Arctic frost click effect animation */
@keyframes arctic-frost-expand {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes aurora {
  0% { 
    background-position: 0% 50%, 0% 0%, 0% 0%;
    opacity: 0.6;
  }
  25% {
    background-position: 30% 40%, 20% 10%, 0% 0%;
    opacity: 0.8;
  }
  50% {
    background-position: 100% 50%, 50% 20%, 0% 0%;
    opacity: 0.7;
  }
  75% {
    background-position: 70% 60%, 80% 10%, 0% 0%;
    opacity: 0.9;
  }
  100% { 
    background-position: 0% 50%, 100% 0%, 0% 0%;
    opacity: 0.6;
  }
}

@keyframes aurora-wave {
  0%, 100% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  25% {
    transform: translateX(-30%) translateY(-55%) rotate(5deg);
  }
  50% {
    transform: translateX(-70%) translateY(-45%) rotate(-5deg);
  }
  75% {
    transform: translateX(-40%) translateY(-50%) rotate(3deg);
  }
}

@keyframes aurora-wave-simple {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
    opacity: 0.4;
  }
  25% {
    transform: translateX(-10%) rotate(2deg);
    opacity: 0.6;
  }
  50% {
    transform: translateX(10%) rotate(-2deg);
    opacity: 0.5;
  }
  75% {
    transform: translateX(-5%) rotate(1deg);
    opacity: 0.7;
  }
}

@keyframes aurora-drift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Individual snowflake animations with unique movement patterns */
@keyframes snowfall-1 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(30px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes snowfall-2 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-40px) rotate(-180deg);
    opacity: 0;
  }
}

@keyframes snowfall-3 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  92% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(50px) rotate(270deg);
    opacity: 0;
  }
}

@keyframes snowfall-4 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.5;
  }
  88% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-25px) rotate(-360deg);
    opacity: 0;
  }
}

@keyframes snowfall-5 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  7% {
    opacity: 0.7;
  }
  93% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(45px) rotate(450deg);
    opacity: 0;
  }
}

@keyframes snowfall-6 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.4;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-35px) rotate(-270deg);
    opacity: 0;
  }
}

@keyframes snowfall-7 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  6% {
    opacity: 0.85;
  }
  94% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(60px) rotate(180deg);
    opacity: 0;
  }
}

@keyframes snowfall-8 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  9% {
    opacity: 0.65;
  }
  91% {
    opacity: 0.65;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-20px) rotate(-450deg);
    opacity: 0;
  }
}

@keyframes snowfall-9 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(35px) rotate(380deg);
    opacity: 0;
  }
}

@keyframes snowfall-10 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.55;
  }
  92% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-45px) rotate(-280deg);
    opacity: 0;
  }
}

@keyframes snowfall-11 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  11% {
    opacity: 0.8;
  }
  89% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(28px) rotate(320deg);
    opacity: 0;
  }
}

@keyframes snowfall-12 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  7% {
    opacity: 0.45;
  }
  93% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-32px) rotate(-360deg);
    opacity: 0;
  }
}

@keyframes snowfall-13 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  13% {
    opacity: 0.7;
  }
  87% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(55px) rotate(400deg);
    opacity: 0;
  }
}

@keyframes snowfall-14 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  6% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-38px) rotate(-290deg);
    opacity: 0;
  }
}

@keyframes snowfall-15 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  88% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(42px) rotate(270deg);
    opacity: 0;
  }
}

@keyframes snowfall-16 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  9% {
    opacity: 0.5;
  }
  91% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-28px) rotate(-420deg);
    opacity: 0;
  }
}

@keyframes snowfall-17 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  14% {
    opacity: 0.75;
  }
  86% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(48px) rotate(350deg);
    opacity: 0;
  }
}

@keyframes snowfall-18 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 0.65;
  }
  95% {
    opacity: 0.65;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-52px) rotate(-310deg);
    opacity: 0;
  }
}

@keyframes snowfall-19 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(38px) rotate(440deg);
    opacity: 0;
  }
}

@keyframes snowfall-20 {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  4% {
    opacity: 0.55;
  }
  96% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(-18px) rotate(-380deg);
    opacity: 0;
  }
}

@keyframes ice-shimmer {
  0%, 100% { 
    text-shadow: 
      0 0 5px rgba(0, 212, 255, 0.6),
      0 0 10px rgba(160, 210, 255, 0.4);
    opacity: 0.4;
  }
  50% { 
    text-shadow: 
      0 0 10px rgba(0, 212, 255, 0.8),
      0 0 20px rgba(160, 210, 255, 0.6),
      0 0 30px rgba(177, 156, 217, 0.3);
    opacity: 0.7;
  }
}

@keyframes frost-spread {
  0% { 
    background-position: 0% 0%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 100%;
    filter: brightness(1.1);
  }
  100% { 
    background-position: 0% 0%;
    filter: brightness(1);
  }
}

@keyframes freeze {
  0% { 
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.6), 0 0 50px rgba(0, 255, 136, 0.4);
    transform: scale(1.02);
  }
  100% { 
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    transform: scale(1);
  }
}

body.theme-arctic .card,
body.theme-arctic .section {
  animation: frost-spread 8s ease-in-out infinite;
}

body.theme-arctic .flip-button,
body.theme-arctic .menu-button:hover,
body.theme-arctic .resource-value,
body.theme-arctic .section-tab.active {
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px rgba(0, 212, 255, 0.5),
    0 0 30px rgba(160, 210, 255, 0.3);
}

body.theme-arctic .flip-button,
body.theme-arctic .upgrade-button:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 212, 255, 0.6);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.37),
    0 0 20px rgba(0, 212, 255, 0.3);
}

body.theme-arctic .flip-button:hover,
body.theme-arctic .upgrade-button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(0, 212, 255, 0.8);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.5),
    0 0 30px rgba(0, 212, 255, 0.6),
    0 0 60px rgba(0, 255, 136, 0.4);
  animation: freeze 2s ease-in-out infinite;
  transform: translateY(-2px) scale(1.02);
}

/* Arctic theme header with simple Aurora Borealis effect */
body.theme-arctic .game-header {
  background: 
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 255, 136, 0.05) 10%,
      rgba(177, 156, 217, 0.05) 30%,
      rgba(255, 107, 157, 0.05) 50%,
      rgba(0, 212, 255, 0.05) 70%,
      rgba(0, 255, 136, 0.05) 90%,
      transparent 100%
    );
  background-size: 200% 100%;
  animation: aurora-drift 20s ease-in-out infinite;
  border-bottom: 2px solid rgba(0, 212, 255, 0.6);
  box-shadow: 
    0 0 30px rgba(0, 212, 255, 0.3),
    inset 0 0 60px rgba(0, 255, 136, 0.05),
    inset 0 0 120px rgba(177, 156, 217, 0.03);
}

body.theme-arctic .left-menu,
body.theme-arctic .right-stats {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.25),
    inset 0 0 20px rgba(0, 212, 255, 0.1);
}

body.theme-arctic .upgrade-button:not(:disabled):hover {
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.5),
    0 0 40px rgba(0, 212, 255, 0.6),
    0 0 80px rgba(0, 255, 136, 0.4);
}

body.theme-arctic .section-title {
  position: relative;
}

body.theme-arctic .section-title::before {
  content: '❄️';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  animation: frost-spread 6s ease-in-out infinite;
  font-size: 0.9em;
  color: var(--accent-primary);
}

body.theme-arctic .modal-dialog {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 2px solid rgba(0, 212, 255, 0.4);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.5),
    0 0 50px rgba(0, 212, 255, 0.3);
}

body.theme-arctic .modal-header {
  background: 
    rgba(255, 255, 255, 0.1),
    linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(177, 156, 217, 0.2));
  border-bottom: 2px solid rgba(0, 212, 255, 0.6);
}

body.theme-arctic .loading-screen {
  background: 
    linear-gradient(135deg, 
      #010b1a 0%, 
      #0a1929 50%, 
      #132238 100%
    ),
    radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
}

body.theme-arctic .loading-logo {
  filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
  animation: ice-shimmer 3s ease-in-out infinite;
}

body.theme-arctic .loading-text {
  text-shadow: 
    0 0 10px rgba(0, 212, 255, 0.8),
    0 0 20px rgba(160, 210, 255, 0.6);
}

body.theme-arctic .resize-handle {
  background: linear-gradient(45deg, rgba(0, 212, 255, 0.6), rgba(0, 255, 136, 0.6));
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

body.theme-arctic .resize-handle:hover {
  background: linear-gradient(45deg, rgba(0, 212, 255, 0.8), rgba(0, 255, 136, 0.8));
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

body.theme-arctic .resize-handle:focus {
  background: linear-gradient(45deg, rgba(0, 212, 255, 1), rgba(0, 255, 136, 1));
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.7);
}

body.theme-arctic .progress-bar,
body.theme-arctic .demand-bar,
body.theme-arctic .loading-progress-bar {
  background: linear-gradient(90deg,
    #1e4976 0%,
    #4a9eff 30%,
    #00d4ff 60%,
    #00ff88 80%,
    #e0f4ff 100%
  );
  border: 2px solid var(--border-primary);
  box-shadow: 
    0 0 15px rgba(0, 212, 255, 0.4),
    inset 0 2px 10px rgba(160, 210, 255, 0.3);
  animation: frost-spread 5s ease-in-out infinite;
}

/* Cold thermometer style demand bar */
body.theme-arctic .demand-bar {
  background: linear-gradient(90deg,
    #1e4976 0%,
    #4a9eff 20%,
    #00d4ff 40%,
    #00ff88 60%,
    #b19cd9 80%,
    #e0f4ff 100%
  );
  border: 2px solid var(--border-primary);
  box-shadow: 
    0 0 15px rgba(0, 212, 255, 0.5),
    inset 0 2px 10px rgba(0, 255, 136, 0.3);
}

body.theme-arctic .section-tab.active {
  animation: ice-shimmer 3s ease-in-out infinite;
}

body.theme-arctic .flip-button,
body.theme-arctic .upgrade-button:not(:disabled) {
  background: 
    rgba(255, 255, 255, 0.12),
    linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 136, 0.2));
  border: 2px solid rgba(0, 212, 255, 0.6);
  box-shadow: 
    0 0 20px rgba(0, 212, 255, 0.3),
    0 0 40px rgba(160, 210, 255, 0.2),
    inset 0 1px 3px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

body.theme-arctic .flip-button:hover,
body.theme-arctic .upgrade-button:not(:disabled):hover {
  background: 
    rgba(255, 255, 255, 0.2),
    linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 255, 136, 0.3));
  box-shadow: 
    0 0 30px rgba(0, 212, 255, 0.6),
    0 0 60px rgba(0, 255, 136, 0.4),
    0 0 90px rgba(177, 156, 217, 0.2);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

body.theme-arctic #spatulaList .spatula-buy-button.can-afford:hover,
body.theme-arctic .special-card-button:hover,
body.theme-arctic .unlock-item-button:hover:not(:disabled) {
  box-shadow: 
    0 0 25px rgba(0, 212, 255, 0.6),
    0 0 50px rgba(0, 255, 136, 0.4);
  animation: freeze 2s ease-in-out infinite;
}

body.theme-arctic .notification-bell.has-unread {
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
  animation: ice-shimmer 2s ease-in-out infinite;
}

body.theme-arctic .info-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

body.theme-arctic .info-button:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

body.theme-arctic #unlockCardsContainer .unlock-item-button,
body.theme-arctic .unlock-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

body.theme-arctic .unlock-item-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(0, 212, 255, 0.6);
  box-shadow: 
    0 0 20px rgba(0, 212, 255, 0.4),
    0 0 40px rgba(0, 255, 136, 0.3);
}

body.theme-arctic .unlock-item .unlock-cost {
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

body.theme-arctic .meat-buttons {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

body.theme-arctic .meat-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

body.theme-arctic .meat-button:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
  animation: freeze 1.5s ease-in-out infinite;
}

/* Arctic theme containers - using default backgrounds */

body.theme-arctic .price-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
}

body.theme-arctic .price-button:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

/* Arctic theme cards - using default backgrounds */

body.theme-arctic .achievement-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
}

body.theme-arctic .achievement-card.unlocked {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(0, 212, 255, 0.6);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.5),
    0 0 25px rgba(0, 212, 255, 0.4);
}

body.theme-arctic .tooltip {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 2px solid rgba(0, 212, 255, 0.4);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.5),
    0 0 20px rgba(0, 212, 255, 0.3);
}

body.theme-arctic .notification {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 2px solid rgba(0, 212, 255, 0.4);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.5),
    0 0 20px rgba(0, 212, 255, 0.3);
}

body.theme-arctic .floating-text {
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px rgba(0, 212, 255, 0.5);
  animation: ice-shimmer 2s ease-in-out;
}

body.theme-arctic .stats-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

body.theme-arctic .stat-item {
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

body.theme-arctic .stat-value {
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

body.theme-arctic input,
body.theme-arctic select,
body.theme-arctic textarea {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(0, 212, 255, 0.4);
  color: var(--text-primary);
}

body.theme-arctic input:focus,
body.theme-arctic select:focus,
body.theme-arctic textarea:focus {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

body.theme-arctic .settings-select,
body.theme-arctic #settingsFormatSelect {
  background: rgba(0, 212, 255, 0.1) !important;
  border: 2px solid #00d4ff !important;
  color: #e0f4ff !important;
}

body.theme-arctic .settings-select:hover,
body.theme-arctic #settingsFormatSelect:hover {
  background: rgba(0, 212, 255, 0.2) !important;
  border-color: #00ff88 !important;
}

body.theme-arctic .settings-select option,
body.theme-arctic #settingsFormatSelect option {
  background: #0a1929 !important;
  color: #e0f4ff !important;
}

/* Catering Card Arctic Theme Support */
body.theme-arctic .catering-section {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 2px solid #00d4ff !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
}

body.theme-arctic .catering-button:not(:disabled),
body.theme-arctic .catering-unlock-button {
  background: 
    rgba(255, 255, 255, 0.12),
    linear-gradient(135deg, #00d4ff, #00ff88) !important;
  border: 2px solid #00d4ff !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
}

body.theme-arctic .catering-button:hover:not(:disabled),
body.theme-arctic .catering-unlock-button:hover {
  box-shadow: 
    0 0 25px rgba(0, 212, 255, 0.6)
    0 0 50px rgba(0, 255, 136, 0.4) !important;
  animation: freeze 2s ease-in-out infinite;
}

/* Catering title Arctic theme support */
body.theme-arctic .catering-title {
  color: #00d4ff !important;
  text-shadow: 0 0 10px #00d4ff, 0 0 20px #00ff88 !important;
}

/* Catering progress bar Arctic theme support */
body.theme-arctic .catering-progress .progress-bar {
  background: linear-gradient(90deg, #00d4ff 0%, #00ff88 100%) !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

/* INFERNO Theme */
body.theme-inferno {
  --bg-primary: #0a0000;
  --bg-secondary: #1a0805;
  --bg-tertiary: #2d0f0a;
  --border-primary: #8b2500;
  --border-secondary: #ff6347;
  --text-primary: #ff6b35;
  --text-secondary: #ff9558;
  --accent-primary: #ff4500;
  --accent-secondary: #ffa500;
  --success: #ff8c00;
  --danger: #dc143c;
  --warning: #ffa500;
  --purple: #ff4500;
  font-family: 'Georgia', serif;
}

body.theme-inferno::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at top, rgba(255, 69, 0, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(255, 140, 0, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, 
      rgba(139, 37, 0, 0.05) 0%, 
      rgba(26, 8, 5, 0.1) 50%, 
      rgba(255, 69, 0, 0.08) 100%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: ember-glow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

body.theme-inferno::after {
  content: '🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥 ✦ 🔥';
  position: fixed;
  top: -50px;
  left: 0;
  width: 200%;
  height: 200px;
  color: rgba(255, 69, 0, 0.6);
  font-size: 18px;
  overflow: hidden;
  white-space: nowrap;
  animation: heat-shimmer 15s linear infinite, flame-flicker 2s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes ember-glow {
  0% { 
    opacity: 0.4;
    filter: brightness(1);
  }
  50% {
    opacity: 0.6;
    filter: brightness(1.05);
  }
  100% { 
    opacity: 0.4;
    filter: brightness(1);
  }
}

@keyframes flame-flicker {
  0%, 100% { 
    text-shadow: 
      0 0 5px rgba(255, 69, 0, 0.8),
      0 0 10px rgba(255, 140, 0, 0.6);
    opacity: 0.6;
  }
  25% { 
    text-shadow: 
      0 0 8px rgba(255, 69, 0, 0.9),
      0 0 15px rgba(255, 140, 0, 0.8),
      0 0 20px rgba(255, 99, 53, 0.4);
    opacity: 0.8;
  }
  50% { 
    text-shadow: 
      0 0 12px rgba(255, 69, 0, 1),
      0 0 20px rgba(255, 140, 0, 0.9),
      0 0 30px rgba(255, 99, 53, 0.6);
    opacity: 0.9;
  }
  75% { 
    text-shadow: 
      0 0 6px rgba(255, 69, 0, 0.8),
      0 0 12px rgba(255, 140, 0, 0.7);
    opacity: 0.7;
  }
}

@keyframes heat-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes ignite {
  0% { 
    border-color: var(--border-primary);
    box-shadow: 0 0 5px rgba(255, 69, 0, 0.3);
  }
  50% { 
    border-color: var(--accent-primary);
    box-shadow: 
      0 0 15px rgba(255, 69, 0, 0.8),
      0 0 25px rgba(255, 140, 0, 0.4);
  }
  100% { 
    border-color: var(--accent-secondary);
    box-shadow: 
      0 0 20px rgba(255, 69, 0, 0.9),
      0 0 35px rgba(255, 140, 0, 0.6),
      0 0 50px rgba(255, 99, 53, 0.3);
  }
}

@keyframes sizzle {
  0%, 100% { 
    filter: brightness(1);
  }
  50% { 
    filter: brightness(1.08);
  }
}

body.theme-inferno .card {
  background: linear-gradient(135deg, rgba(26, 8, 5, 0.9), rgba(45, 15, 10, 0.8));
  border: 2px solid rgba(139, 37, 0, 0.8);
  box-shadow: 
    0 0 20px rgba(255, 69, 0, 0.3),
    inset 0 0 20px rgba(255, 140, 0, 0.1);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

body.theme-inferno .card:hover {
  border-color: var(--accent-primary);
  box-shadow: 
    0 0 30px rgba(255, 69, 0, 0.5),
    0 0 50px rgba(255, 140, 0, 0.3),
    inset 0 0 25px rgba(255, 99, 53, 0.15);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

body.theme-inferno .flip-button,
body.theme-inferno .menu-button:hover,
body.theme-inferno .resource-value,
body.theme-inferno .section-tab.active {
  text-shadow: 
    0 0 8px rgba(255, 69, 0, 0.8),
    0 0 16px rgba(255, 140, 0, 0.6),
    0 0 24px rgba(255, 99, 53, 0.4);
  animation: flame-flicker 2s ease-in-out infinite alternate;
}

body.theme-inferno .game-header,
body.theme-inferno .left-menu,
body.theme-inferno .right-stats {
  box-shadow: inset 0 0 25px rgba(255, 69, 0, 0.2);
  border: 1px solid rgba(139, 37, 0, 0.5);
}

body.theme-inferno .upgrade-button:not(:disabled):hover {
  box-shadow: 
    0 0 25px var(--accent-primary), 
    0 0 50px var(--accent-secondary),
    0 0 75px rgba(255, 99, 53, 0.4);
  animation: ignite 1s ease-in-out infinite alternate;
}

body.theme-inferno .flip-button,
body.theme-inferno .upgrade-button:not(:disabled) {
  background: linear-gradient(135deg, #8b2500, #ff4500, #ffa500);
  border: 2px solid rgba(255, 69, 0, 0.8);
  box-shadow: 
    0 4px 15px rgba(255, 69, 0, 0.4),
    inset 0 2px 10px rgba(255, 140, 0, 0.2);
  text-shadow: 
    0 0 5px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 69, 0, 0.6);
  transition: all 0.3s ease;
}

body.theme-inferno .flip-button:hover,
body.theme-inferno .upgrade-button:not(:disabled):hover {
  background: linear-gradient(135deg, #ff4500, #ffa500, #ff6347);
  box-shadow: 
    0 6px 25px rgba(255, 69, 0, 0.6),
    0 0 40px rgba(255, 140, 0, 0.5),
    inset 0 2px 15px rgba(255, 165, 0, 0.3);
  text-shadow: 
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 15px rgba(255, 69, 0, 0.8),
    0 0 25px rgba(255, 140, 0, 0.4);
  transform: translateY(-2px);
}

body.theme-inferno .game-header {
  background: linear-gradient(90deg, 
    rgba(139, 37, 0, 0.8), 
    rgba(255, 69, 0, 0.6), 
    rgba(139, 37, 0, 0.8)
  );
  border-bottom: 2px solid var(--border-primary);
}

body.theme-inferno .resource-value,
body.theme-inferno .section-tab.active {
  color: var(--accent-primary);
  text-shadow: 
    0 0 8px currentColor,
    0 0 16px rgba(255, 140, 0, 0.5);
  animation: flame-flicker 3s ease-in-out infinite alternate;
}

body.theme-inferno #spatulaList .spatula-card.affordable:hover,
body.theme-inferno .achievement-card.unlocked,
body.theme-inferno .meat-option:hover:not(.disabled),
body.theme-inferno .unlock-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 
    0 0 20px rgba(255, 69, 0, 0.5),
    0 0 35px rgba(255, 140, 0, 0.3);
  animation: ignite 1.2s ease-in-out infinite alternate;
}

body.theme-inferno #spatulaList .spatula-buy-button.can-afford:hover,
body.theme-inferno .special-card-button:hover,
body.theme-inferno .unlock-item-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff4500, #ffa500);
  box-shadow: 
    0 0 20px var(--accent-primary),
    0 0 35px rgba(255, 140, 0, 0.4);
  animation: sizzle 1s ease-in-out infinite;
}

body.theme-inferno .notification-bell.has-unread {
  color: var(--accent-primary);
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px rgba(255, 140, 0, 0.6);
  animation: flame-flicker 2s ease-in-out infinite alternate;
}

body.theme-inferno .loading-burger {
  filter: drop-shadow(0 0 25px var(--accent-primary));
  animation: ember-glow 4s ease-in-out infinite;
}

body.theme-inferno .loading-title {
  text-shadow: 
    0 0 15px var(--accent-primary),
    0 0 30px rgba(255, 140, 0, 0.6);
  animation: flame-flicker 2.5s ease-in-out infinite alternate;
}

body.theme-inferno .info-popup-content {
  background: linear-gradient(135deg, rgba(26, 8, 5, 0.95), rgba(45, 15, 10, 0.9));
  border: 2px solid var(--border-primary);
  box-shadow: 
    0 0 30px rgba(255, 69, 0, 0.4),
    inset 0 0 20px rgba(255, 140, 0, 0.1);
}

body.theme-inferno .info-icon {
  color: var(--accent-primary);
  text-shadow: 0 0 8px currentColor;
}

body.theme-inferno .info-button:hover {
  background: rgba(255, 69, 0, 0.2);
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.3);
}

body.theme-inferno #unlockCardsContainer .unlock-item-button,
body.theme-inferno .unlock-card .unlock-item-button,
body.theme-inferno .unlock-cards-container .unlock-item-button,
body.theme-inferno .unlock-item .unlock-item-button,
body.theme-inferno .unlock-item-button {
  background: linear-gradient(135deg, #8b2500, #ff4500);
  border: 1px solid var(--border-primary);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

body.theme-inferno .increment-btn,
body.theme-inferno .increment-btn:hover {
  border-color: var(--border-primary);
  background: rgba(255, 69, 0, 0.2);
}

body.theme-inferno .increment-btn.active {
  background: var(--accent-primary);
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
}

body.theme-inferno .compact-btn,
body.theme-inferno .hire-button,
body.theme-inferno .mini-button,
body.theme-inferno .price-btn,
body.theme-inferno .quick-buy-button,
body.theme-inferno .special-card-button,
body.theme-inferno .upgrade-button,
body.theme-inferno button[style*=background] {
  background: linear-gradient(135deg, #8b2500, #ff4500);
  border: 1px solid var(--border-primary);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

body.theme-inferno .unlock-item-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff4500, #ffa500);
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
  animation: sizzle 1s ease-in-out infinite;
}

body.theme-inferno .spatula-paywall .paywall-button {
  background: rgba(139, 37, 0, 0.8);
  border: 2px solid var(--border-primary);
}

body.theme-inferno .spatula-paywall .paywall-button.ready {
  background: linear-gradient(135deg, #ff4500, #ffa500);
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.4);
}

body.theme-inferno .spatula-paywall .paywall-button.ready:hover {
  box-shadow: 
    0 0 30px rgba(255, 69, 0, 0.6),
    0 0 50px rgba(255, 140, 0, 0.4);
  animation: ignite 1s ease-in-out infinite alternate;
}

body.theme-inferno .spatula-paywall .button-icon {
  filter: drop-shadow(0 0 8px var(--accent-primary));
}

body.theme-inferno .presence-unlock-banner {
  background: linear-gradient(135deg, rgba(26, 8, 5, 0.9), rgba(45, 15, 10, 0.8));
  border: 2px solid var(--border-primary);
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.3);
}

body.theme-inferno .presence-unlock-banner .banner-unlock-btn:not(.disabled) {
  background: linear-gradient(135deg, #ff4500, #ffa500);
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.4);
}

body.theme-inferno .presence-unlock-banner .banner-unlock-btn:hover:not(.disabled) {
  box-shadow: 
    0 0 25px rgba(255, 69, 0, 0.6),
    0 0 40px rgba(255, 140, 0, 0.4);
  animation: sizzle 1s ease-in-out infinite;
}

body.theme-inferno .special-card-button {
  background: linear-gradient(135deg, #8b2500, #ff4500, #ffa500);
  border: 2px solid var(--border-primary);
  box-shadow: 0 4px 15px rgba(255, 69, 0, 0.3);
}

body.theme-inferno .meat-option {
  background: rgba(26, 8, 5, 0.8);
  border: 2px solid rgba(139, 37, 0, 0.6);
  transition: all 0.3s ease;
}

body.theme-inferno .meat-option:hover:not(.disabled) {
  border-color: var(--accent-primary);
  box-shadow: 
    0 0 20px rgba(255, 69, 0, 0.4),
    inset 0 0 15px rgba(255, 140, 0, 0.1);
  animation: heat-shimmer 2s ease-in-out infinite;
}

body.theme-inferno .special-card {
  background: linear-gradient(135deg, rgba(45, 15, 10, 0.9), rgba(26, 8, 5, 0.8));
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.3);
}

body.theme-inferno .unlock-card:not(.special-card) {
  background: rgba(26, 8, 5, 0.8);
  border: 1px solid rgba(139, 37, 0, 0.6);
}

body.theme-inferno .unlock-card:not(.special-card):hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.3);
}

body.theme-inferno .max-demand-indicator {
  background: linear-gradient(90deg, 
    rgba(255, 69, 0, 0.8) 0%, 
    rgba(255, 140, 0, 0.6) 50%, 
    rgba(255, 99, 53, 0.4) 100%
  );
  box-shadow: 
    0 0 15px rgba(255, 69, 0, 0.5),
    inset 0 0 10px rgba(255, 140, 0, 0.3);
  animation: ember-glow 5s ease-in-out infinite;
}

body.theme-inferno .emergency-popup-content {
  background: linear-gradient(135deg, rgba(26, 8, 5, 0.95), rgba(45, 15, 10, 0.9));
  border: 2px solid var(--accent-primary);
  box-shadow: 
    0 0 40px rgba(255, 69, 0, 0.5),
    inset 0 0 25px rgba(255, 140, 0, 0.1);
}

body.theme-inferno .emergency-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #ff4500, #ffa500);
  box-shadow: 
    0 0 30px rgba(255, 69, 0, 0.6),
    0 0 50px rgba(255, 140, 0, 0.4);
  animation: ignite 0.8s ease-in-out infinite alternate;
}

body.theme-inferno .card-button {
  background: linear-gradient(135deg, #8b2500, #ff4500);
  border: 2px solid var(--border-primary);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

body.theme-inferno .section-title {
  color: var(--accent-primary);
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px rgba(255, 140, 0, 0.5);
}

body.theme-inferno .section-title:before {
  content: '🔥 ';
  animation: flame-flicker 2s ease-in-out infinite alternate;
}

body.theme-inferno .section-title:after {
  content: ' 🔥';
  animation: flame-flicker 2s ease-in-out infinite alternate-reverse;
}

body.theme-inferno .net-income-line {
  color: var(--accent-secondary);
  text-shadow: 0 0 8px rgba(255, 165, 0, 0.6);
}

body.theme-inferno .net-income-line.negative {
  color: var(--danger);
  text-shadow: 0 0 8px rgba(220, 20, 60, 0.6);
}

body.theme-inferno .resize-handle:hover {
  background: var(--accent-primary);
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
}

body.theme-inferno .resize-handle::before {
  background: linear-gradient(45deg, 
    var(--accent-primary) 0%, 
    var(--accent-secondary) 50%, 
    var(--accent-primary) 100%
  );
}

body.theme-inferno .size-indicator {
  background: rgba(26, 8, 5, 0.9);
  border: 1px solid var(--border-primary);
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(255, 69, 0, 0.6);
}

body.theme-inferno.resizing .resize-handle {
  background: var(--accent-primary);
  box-shadow: 
    0 0 20px rgba(255, 69, 0, 0.6),
    0 0 35px rgba(255, 140, 0, 0.4);
  animation: sizzle 1s ease-in-out infinite;
}

body.theme-inferno .right-stats {
  background: linear-gradient(135deg, 
    rgba(26, 8, 5, 0.85) 0%, 
    rgba(45, 15, 10, 0.9) 100%
  );
  border-left: 2px solid rgba(139, 37, 0, 0.8);
  box-shadow: 
    inset 5px 0 20px rgba(255, 69, 0, 0.1),
    -5px 0 25px rgba(255, 69, 0, 0.2);
}

body.theme-inferno .right-panel-container {
  background: rgba(26, 8, 5, 0.8);
  border: 1px solid rgba(139, 37, 0, 0.6);
  backdrop-filter: blur(8px);
}

body.theme-inferno .resize-handle:focus {
  outline: 2px solid var(--accent-primary);
  box-shadow: 
    0 0 0 4px rgba(255, 69, 0, 0.3),
    0 0 20px rgba(255, 69, 0, 0.5);
}

/* Progress bars with molten metal gradient */
body.theme-inferno .progress-bar,
body.theme-inferno .demand-bar,
body.theme-inferno .loading-progress-bar {
  background: linear-gradient(90deg,
    #8b2500 0%,
    #ff4500 25%,
    #ffa500 50%,
    #ff6347 75%,
    #ff8c00 100%
  );
  box-shadow: 
    0 0 10px rgba(255, 69, 0, 0.6),
    inset 0 0 10px rgba(255, 140, 0, 0.4);
  animation: ember-glow 4s ease-in-out infinite;
}

/* Temperature gauge style demand bar */
body.theme-inferno .demand-bar {
  background: linear-gradient(90deg,
    #8b2500 0%,
    #ff4500 30%,
    #ffa500 60%,
    #ffff00 80%,
    #ffffff 100%
  );
  border: 2px solid var(--border-primary);
  box-shadow: 
    0 0 15px rgba(255, 69, 0, 0.5),
    inset 0 2px 10px rgba(255, 140, 0, 0.3);
}

/* Font Classes */
body.font-inter { --font-family: var(--font-inter); }
body.font-roboto { --font-family: var(--font-roboto); }
body.font-open-sans { --font-family: var(--font-open-sans); }
body.font-lato { --font-family: var(--font-lato); }
body.font-poppins { --font-family: var(--font-poppins); }
body.font-montserrat { --font-family: var(--font-montserrat); }
body.font-source-sans-pro { --font-family: var(--font-source-sans-pro); }
body.font-raleway { --font-family: var(--font-raleway); }
body.font-ubuntu { --font-family: var(--font-ubuntu); }
body.font-nunito { --font-family: var(--font-nunito); }
body.font-jetbrains-mono { --font-family: var(--font-jetbrains-mono); }
body.font-fira-code { --font-family: var(--font-fira-code); }

/* Font preview styles */
.font-preview { 
  margin-top: 15px;
  padding: 15px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.font-preview .preview-text {
  transition: font-family 0.3s ease;
}

.font-preview .preview-text h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: var(--text-primary);
}

.font-preview .preview-text p {
  margin: 8px 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.font-preview .preview-text .numbers {
  font-weight: 600;
  color: var(--accent-primary);
  font-size: 16px;
}

/* Apply font classes to preview */
.font-preview .preview-text.font-inter { font-family: var(--font-inter); }
.font-preview .preview-text.font-roboto { font-family: var(--font-roboto); }
.font-preview .preview-text.font-open-sans { font-family: var(--font-open-sans); }
.font-preview .preview-text.font-lato { font-family: var(--font-lato); }
.font-preview .preview-text.font-poppins { font-family: var(--font-poppins); }
.font-preview .preview-text.font-montserrat { font-family: var(--font-montserrat); }
.font-preview .preview-text.font-source-sans-pro { font-family: var(--font-source-sans-pro); }
.font-preview .preview-text.font-raleway { font-family: var(--font-raleway); }
.font-preview .preview-text.font-ubuntu { font-family: var(--font-ubuntu); }
.font-preview .preview-text.font-nunito { font-family: var(--font-nunito); }
.font-preview .preview-text.font-jetbrains-mono { font-family: var(--font-jetbrains-mono); }
.font-preview .preview-text.font-fira-code { font-family: var(--font-fira-code); }

/* Typography settings styling */
.font-selector {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.3s ease;
}

.font-selector:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

/* Font option specific styling */
.font-selector option[data-font="system"] { font-family: var(--font-system); }
.font-selector option[data-font="inter"] { font-family: var(--font-inter); }
.font-selector option[data-font="roboto"] { font-family: var(--font-roboto); }
.font-selector option[data-font="open-sans"] { font-family: var(--font-open-sans); }
.font-selector option[data-font="lato"] { font-family: var(--font-lato); }
.font-selector option[data-font="poppins"] { font-family: var(--font-poppins); }
.font-selector option[data-font="montserrat"] { font-family: var(--font-montserrat); }
.font-selector option[data-font="source-sans-pro"] { font-family: var(--font-source-sans-pro); }
.font-selector option[data-font="raleway"] { font-family: var(--font-raleway); }
.font-selector option[data-font="ubuntu"] { font-family: var(--font-ubuntu); }
.font-selector option[data-font="nunito"] { font-family: var(--font-nunito); }
.font-selector option[data-font="jetbrains-mono"] { font-family: var(--font-jetbrains-mono); }
.font-selector option[data-font="fira-code"] { font-family: var(--font-fira-code); }

/* Quick settings font options */
#quick-font-select option[data-font="system"] { font-family: var(--font-system); }
#quick-font-select option[data-font="inter"] { font-family: var(--font-inter); }
#quick-font-select option[data-font="roboto"] { font-family: var(--font-roboto); }
#quick-font-select option[data-font="open-sans"] { font-family: var(--font-open-sans); }
#quick-font-select option[data-font="lato"] { font-family: var(--font-lato); }
#quick-font-select option[data-font="poppins"] { font-family: var(--font-poppins); }
#quick-font-select option[data-font="montserrat"] { font-family: var(--font-montserrat); }
#quick-font-select option[data-font="raleway"] { font-family: var(--font-raleway); }
#quick-font-select option[data-font="ubuntu"] { font-family: var(--font-ubuntu); }
#quick-font-select option[data-font="nunito"] { font-family: var(--font-nunito); }
#quick-font-select option[data-font="jetbrains-mono"] { font-family: var(--font-jetbrains-mono); }
#quick-font-select option[data-font="fira-code"] { font-family: var(--font-fira-code); }

.font-info {
  margin-top: 10px;
  padding: 10px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.font-info p {
  margin: 0;
}

body.light {
  --bg-primary: #fff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --border-primary: #dee2e6;
  --border-secondary: #ced4da;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --accent-primary: #007bff;
  --accent-secondary: #0056b3;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --purple: #6f42c1
}
body.light .game-header {
  box-shadow: 0 2px 10px rgba(0,0,0,.1)
}
body.light .menu-button:hover {
  background-color: #e9ecef
}
body.light .upgrade-button:not(:disabled) {
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
/* TOUCH TARGET COMPLIANCE FIX - Ensure all buttons meet 44px minimum */
button, 
.btn,
[role="button"],
.upgrade-button,
.hire-button,
.fire-button,
.menu-button,
.flip-button,
.unlock-button,
.purchase-button,
.employee-fire,
.ingredient-btn,
.shop-button,
.modal-close,
.navigation button:not(.minimize-btn):not(.info-icon),
.panel button:not(.minimize-btn),
input[type="button"],
input[type="submit"] {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 12px !important;
  touch-action: manipulation; /* Prevent double-tap zoom */
}

/* Override large size for specific small buttons */
.minimize-btn,
.info-icon,
.info-button {
  min-width: 24px !important;
  min-height: 24px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
}

/* Small buttons that need special handling */
.close-btn,
.modal-close,
.employee-fire {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* Ensure proper spacing between buttons */
.button-group button,
.employee-actions button,
.upgrade-section button,
.shop-grid button {
  margin: 4px !important;
}

/* Mobile-specific button improvements */
@media (max-width: 768px) {
  button,
  .btn,
  [role="button"] {
    min-height: 48px !important; /* Even bigger on mobile */
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  /* Fix button spacing on mobile */
  .button-row {
    gap: 8px;
  }
  
  .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* KEYBOARD NAVIGATION & FOCUS STYLES */
*:focus {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px !important;
  z-index: 9999;
}

button:focus,
.btn:focus,
[role="button"]:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid var(--accent-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
}

/* High contrast focus for accessibility mode */
body.accessibility *:focus {
  outline: 4px solid #00ff00 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px rgba(0, 255, 0, 0.3) !important;
}

/* Keyboard shortcuts modal */
.keyboard-shortcuts-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 10000;
}

.keyboard-shortcuts-modal .modal-content {
  position: relative;
}

.keyboard-shortcuts-modal h2 {
  color: var(--accent-primary);
  margin-bottom: 20px;
}

.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
}

.shortcuts-table th,
.shortcuts-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
}

.shortcuts-table th {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  font-weight: bold;
}

.shortcuts-table kbd {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: monospace;
  color: var(--text-primary);
}

/* Skip to content link for screen readers */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent-primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 100000;
}

.skip-to-content:focus {
  top: 0;
}

/* EMPLOYEE MANAGEMENT MOBILE REDESIGN */
@media (max-width: 768px) {
  /* Employee grid becomes single column on mobile */
  .employee-grid,
  .employees-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 10px !important;
  }
  
  /* Employee cards optimized for mobile */
  .employee-card,
  .employee-item {
    min-height: 80px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px !important;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  
  /* Employee info section */
  .employee-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .employee-name {
    font-size: 16px !important;
    font-weight: bold;
    color: var(--accent-primary);
  }
  
  .employee-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
  }
  
  .employee-count {
    font-weight: bold;
    color: var(--text-primary);
  }
  
  /* Employee actions section */
  .employee-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center;
  }
  
  .employee-actions button {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 8px !important;
    font-size: 14px !important;
  }
  
  /* Hire/Fire buttons with better touch targets */
  .hire-button,
  .fire-button,
  .employee-fire {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold;
  }
  
  .hire-button {
    background: var(--success) !important;
    color: white !important;
  }
  
  .fire-button,
  .employee-fire {
    background: var(--danger) !important;
    color: white !important;
  }
  
  /* Quantity selector for bulk actions */
  .employee-quantity {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 4px;
  }
  
  .employee-quantity input {
    width: 50px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
  }
  
  .employee-quantity button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 4px;
  }
  
  /* Employee cost display */
  .employee-cost {
    font-size: 14px;
    color: var(--warning);
    margin-top: 4px;
  }
  
  /* Collapsed view for better space usage */
  .employee-card.collapsed {
    min-height: 60px !important;
  }
  
  .employee-card.collapsed .employee-stats {
    display: none;
  }
  
  /* Toggle button for expand/collapse */
  .employee-expand-toggle {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Swipe to fire gesture hint */
  .employee-card::before {
    content: '← Swipe to manage';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .employee-card:first-child::before {
    opacity: 0.5;
    animation: swipeHint 3s ease-in-out;
  }
  
  @keyframes swipeHint {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.7; }
  }
  
  /* Manager/special employees highlight */
  .employee-card.manager {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-secondary), rgba(96, 165, 250, 0.1));
  }
  
  /* Batch hire modal for mobile */
  .batch-hire-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  
  .batch-hire-modal.open {
    transform: translateY(0);
  }
  
  /* Floating action button for batch hiring */
  .employee-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
}

/* PERFORMANCE MODE STYLES */
/* Reduced motion for performance and accessibility */
@media (prefers-reduced-motion: reduce), 
       (prefers-reduced-motion: no-preference) {
  body.reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.reduced-motion * {
  animation: none !important;
  transition: none !important;
}

/* No animations mode */
body.no-animations * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Idle mode styles */
body.idle-mode {
  filter: brightness(0.8);
}

body.idle-mode .floating-text,
body.idle-mode .particle,
body.idle-mode .animation {
  display: none !important;
}

/* Performance indicator */
#performance-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 5px;
  font-size: 12px;
  z-index: 10000;
  pointer-events: none;
}

.performance-normal {
  border: 1px solid var(--success);
}

.performance-mobile {
  border: 1px solid var(--warning);
}

.performance-low-power {
  border: 1px solid var(--danger);
}

.performance-idle {
  border: 1px solid var(--text-secondary);
  opacity: 0.6;
}

/* Optimizations for low-end devices */
@media (max-width: 768px) and (max-height: 600px) {
  /* Remove shadows on small screens */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Simplify gradients */
  *[class*="gradient"] {
    background-image: none !important;
  }
  
  /* Disable backdrop filters */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Battery saver mode */
@media (prefers-color-scheme: dark) and (prefers-contrast: less) {
  body {
    filter: contrast(0.9) brightness(0.9);
  }
}

body.dark {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #0a0a0a;
  --border-primary: #333;
  --border-secondary: #444;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --accent-primary: #bb86fc;
  --accent-secondary: #7c4dff;
  --success: #03dac6;
  --danger: #cf6679;
  --warning: #ffb74d;
  --purple: #bb86fc
}

body.accessibility {
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #0d0d0d;
  --border-primary: #ffffff;
  --border-secondary: #cccccc;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --accent-primary: #00ff00;
  --accent-secondary: #66ff66;
  --success: #00ff00;
  --danger: #ff0000;
  --warning: #ffff00;
  --purple: #ff00ff;
  
  /* Enhanced contrast and readability */
  font-weight: 500;
  line-height: 1.6;
}

/* Accessibility theme enhancements */
body.accessibility * {
  border-width: 2px !important;
}

body.accessibility .flip-button,
body.accessibility .upgrade-button:not(:disabled),
body.accessibility button:not(:disabled) {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #00ff00 !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
}

body.accessibility .flip-button:hover,
body.accessibility .upgrade-button:not(:disabled):hover,
body.accessibility button:not(:disabled):hover {
  background: #00ff00 !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  transform: scale(1.05);
}

body.accessibility .card {
  background: #000000 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

body.accessibility .game-header {
  background: #000000 !important;
  border-bottom: 4px solid #ffffff !important;
}

body.accessibility .resource-value {
  color: #00ff00 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 2px #000000 !important;
}

body.accessibility .section-tab {
  border: 2px solid #ffffff !important;
  background: #1a1a1a !important;
}

body.accessibility .section-tab.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #00ff00 !important;
}

body.accessibility input,
body.accessibility select,
body.accessibility textarea {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #00ff00 !important;
  font-weight: 600 !important;
}

body.accessibility input:focus,
body.accessibility select:focus,
body.accessibility textarea:focus {
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px !important;
}
body.dark * {
  scrollbar-color: #333 #1e1e1e
}
body.dark .upgrade-button:not(:disabled):hover {
  background: linear-gradient(135deg,#7c4dff 0,#bb86fc 100%)
}
.unlock-card {
  background: linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary)
}
.unlock-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0,0,0,.3)
}
.unlock-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-primary)
}
.unlock-card-header h4 {
  color: var(--accent-primary)
}
.unlock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border: 1px solid var(--border-primary)
}
.unlock-item.affordable {
  border-color: var(--success)
}
.unlock-item.affordable:hover {
  transform: translateX(5px)
}
.unlock-item-name {
  color: var(--text-primary)
}
.unlock-item-desc {
  color: var(--text-secondary);
  margin-top: 4px
}
.unlock-item-button {
  background: var(--accent-secondary);
  color: var(--text-primary)
}
.unlock-item-button:hover:not(:disabled) {
  background: var(--accent-primary)
}
.unlock-item-button:disabled {
  background: var(--border-primary);
  color: var(--text-secondary)
}
.unlock-item-button.success {
  background: var(--success)!important;
  color: var(--bg-primary)!important
}
.unlock-card-link {
  color: var(--accent-primary)
}
.unlock-card-link:hover {
  color: var(--accent-secondary)
}
.special-card {
  background: linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%);
  border-color: var(--accent-primary)
}
.special-card-content p,
.special-card-header h4 {
  color: var(--text-primary)
}
.special-card-button {
  background: var(--bg-primary);
  color: var(--accent-primary);
  border: 2px solid var(--bg-primary)
}
.special-card-button:hover {
  background: var(--bg-secondary);
  transform: scale(1.05)
}
.success-message {
  color: var(--success)
}
.minimize-btn {
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center
}
.minimize-btn:hover {
  background: var(--border-primary);
  color: var(--text-primary)
}
.meat-option {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%)!important;
  border: 2px solid var(--border-primary)!important
}
.meat-option:hover:not(.disabled) {
  border-color: var(--accent-primary)!important;
  background: linear-gradient(145deg,var(--bg-secondary) 0,rgba(0,0,0,.3) 100%)!important
}
.meat-amount {
  color: var(--warning)!important
}
.meat-price {
  color: var(--success)!important
}
.meat-option.disabled {
  border-color: var(--border-primary)!important
}
body.theme-neon #spatulaList .spatula-card.affordable:hover,
body.theme-neon .achievement-card.unlocked,
body.theme-neon .meat-option:hover:not(.disabled),
body.theme-neon .unlock-card:hover {
  box-shadow: 0 0 30px var(--accent-primary),0 0 60px var(--accent-secondary)
}
body.theme-neon #spatulaList .spatula-buy-button.can-afford:hover,
body.theme-neon .special-card-button:hover,
body.theme-neon .unlock-item-button:hover:not(:disabled) {
  text-shadow: 0 0 10px currentColor
}
body.retro #spatulaList .spatula-card,
body.retro .achievement-card,
body.retro .filter-button,
body.retro .meat-option,
body.retro .unlock-card {
  border-radius: 0
}
body.retro .special-card-button,
body.retro .unlock-item-button {
  text-transform: uppercase;
  letter-spacing: 1px
}
body.theme-matrix #spatulaList .spatula-card.affordable,
body.theme-matrix .achievement-card.unlocked .achievement-icon,
body.theme-matrix .meat-amount,
body.theme-matrix .unlock-item.affordable {
  animation: 2s ease-in-out infinite matrix-glow
}
@keyframes matrix-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 10px var(--accent-primary))
  }
  50% {
    filter: drop-shadow(0 0 20px var(--accent-primary))
  }
}
body.light #spatulaList .spatula-card,
body.light .achievement-card,
body.light .unlock-card {
  box-shadow: 0 2px 10px rgba(0,0,0,.1)
}
body.light #spatulaList .spatula-card:hover,
body.light .achievement-card:hover,
body.light .unlock-card:hover {
  box-shadow: 0 5px 20px rgba(0,0,0,.15)
}
body.dark .achievement-card.unlocked {
  background: linear-gradient(135deg,rgba(187,134,252,.15) 0,rgba(124,77,255,.1) 50%,rgba(187,134,252,.15) 100%)
}
body.diner .special-card,
body.diner .unlock-card {
  border: 3px solid var(--accent-primary);
  box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--accent-primary)
}
body.diner .achievement-card.unlocked {
  background: repeating-linear-gradient(45deg,var(--bg-secondary),var(--bg-secondary) 10px,var(--bg-tertiary) 10px,var(--bg-tertiary) 20px)
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0
  }
  to {
    transform: translateX(0);
    opacity: 1
  }
}
@keyframes fadeOut {
  to {
    opacity: 0
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.05)
  }
}
html {
  color-scheme: only light !important;
}
body {
  color-scheme: only light !important;
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column
}
.game-header {
  background-color: var(--bg-secondary);
  border-bottom: 3px solid var(--border-primary);
  padding: 15px 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: space-between
}
.resource-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  flex: 1
}
/* Daily Reward Icon Styles */
.daily-reward-icon-container {
  position: absolute;
  right: 160px;
  top: 50%;
  transform: translateY(-50%);
}
.daily-reward-icon-btn {
  background: var(--accent-primary);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  position: relative;
}
.daily-reward-icon-btn:hover {
  background: var(--accent-secondary);
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(96,165,250,.5);
}
.daily-reward-icon-btn:active {
  transform: scale(0.95);
}
/* Glow animation when reward is ready */
.daily-reward-icon-btn.reward-ready {
  animation: daily-reward-glow 2s ease-in-out infinite;
}
@keyframes daily-reward-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255,215,0,.4), 0 0 15px rgba(255,215,0,.3), 0 0 25px rgba(255,215,0,.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(255,215,0,.6), 0 0 25px rgba(255,215,0,.4), 0 0 35px rgba(255,215,0,.3);
  }
}
/* Tooltip styles */
.daily-reward-icon-btn::after {
  content: 'Daily Reward';
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.daily-reward-icon-btn:hover::after {
  opacity: 1;
}

/* Leaderboard Icon Styles */
.leaderboard-icon-container {
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(-50%);
}
.leaderboard-icon-btn {
  background: var(--accent-primary);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  position: relative;
}
.leaderboard-icon-btn:hover {
  background: var(--accent-secondary);
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(255,215,0,.5);
}
.leaderboard-icon-btn:active {
  transform: scale(0.95);
}
/* Tooltip styles */
.leaderboard-icon-btn::after {
  content: 'Leaderboard';
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.leaderboard-icon-btn:hover::after {
  opacity: 1;
}

/* Responsive behavior for header icons */
@media (max-width: 1400px) {
  /* Move icons to inline layout earlier to prevent CSP overlap */
  .daily-reward-icon-container,
  .leaderboard-icon-container {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    display: inline-block;
    margin-left: 10px;
  }

  .daily-reward-icon-btn,
  .leaderboard-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

@media (max-width: 1200px) {
  .daily-reward-icon-btn,
  .leaderboard-icon-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .daily-reward-icon-container,
  .leaderboard-icon-container {
    margin-left: 8px;
  }
}

@media (max-width: 1000px) {
  .daily-reward-icon-btn,
  .leaderboard-icon-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .daily-reward-icon-container,
  .leaderboard-icon-container {
    margin-left: 6px;
  }
}
.resource-item {
  display: flex;
  align-items: center;
  gap: 10px
}
.resource-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 1px
}
.resource-value {
  font-size: 24px;
  font-weight: 700
}
.resource-value.money {
  color: #4ade80 !important;
}
.resource-value.meat {
  color: #f87171 !important;
}
.resource-value.burgers {
  color: #fbbf24 !important;
}
.resource-value.csp {
  color: #a78bfa !important;
}
.resource-value.rp {
  color: #00d4ff !important;
}
.resource-value.catering-credits {
  color: #ec4899 !important;
}
.game-container {
  display: flex;
  height: calc(100vh - 80px - 30px); /* Account for header (80px) + footer (~30px) */
  margin-top: 80px;
  margin-bottom: 30px; /* Space for fixed footer */
  background-color: var(--bg-tertiary)
}
.left-menu {
  width: 200px; /* Default for large screens */
  background-color: var(--bg-secondary);
  border-right: 3px solid var(--border-primary);
  padding: 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  position: relative;
  transition: width 0.3s ease;
}

/* Left panel resize handle */
.left-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-resize-handle:hover .handle-grip,
.left-resize-handle:active .handle-grip {
  background: var(--accent-primary);
  opacity: 0.8;
}

.left-resize-handle .handle-grip {
  width: 3px;
  height: 60px;
  background: var(--border-primary);
  border-radius: 3px;
  transition: all 0.2s ease;
  opacity: 0.5;
}

/* Left panel toggle button - circular arrow */
.left-panel-toggle {
  position: absolute;
  bottom: 70px;
  right: -12px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.left-panel-toggle:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.left-panel-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

/* Collapsed state - icons only */
.left-menu.collapsed {
  width: 50px !important;
  padding: 10px 0;
  overflow: hidden;
}

.left-menu.collapsed .menu-button {
  padding: 15px 0;
  min-width: 50px;
  min-height: 50px;
  position: relative;
  overflow: hidden;
  /* Hide the actual button text */
  color: transparent;
  font-size: 0;
  line-height: 0;
}

/* Hide seeds section when collapsed */
.left-menu.collapsed .menu-seeds-section {
  display: none;
}

/* Show only icon when collapsed - MUST come after button styles */
.left-menu.collapsed .menu-button::before {
  content: attr(data-icon);
  font-size: 20px !important; /* Override font-size: 0 */
  color: var(--text-primary) !important; /* Override transparent color */
  display: block;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}

.left-menu.collapsed .left-resize-handle {
  display: none;
}

/* Adjust toggle button position when collapsed */
.left-menu.collapsed .left-panel-toggle {
  right: -12px;
}

/* Adjust central content when resizing */
.central-content {
  transition: margin-left 0.3s ease;
}

/* Cursor states during resize */
body.resizing-left {
  cursor: ew-resize !important;
  user-select: none;
}

body.resizing-left * {
  cursor: ew-resize !important;
  user-select: none;
}

/* Hide resize handle and toggle on mobile - existing mobile behavior stays */
@media (max-width: 768px) {
  .left-resize-handle,
  .left-panel-toggle {
    display: none !important;
  }
}
.menu-button {
  width: 100%;
  padding: 15px 20px;
  background-color: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: .3s;
  letter-spacing: .5px;
  position: relative
}
.menu-button:hover {
  background-color: var(--border-primary);
  color: var(--text-primary);
  padding-left: 25px
}
.menu-button.active {
  background-color: var(--accent-secondary);
  color: var(--text-primary);
  border-left: 4px solid var(--accent-primary)
}
.menu-button.locked {
  opacity: .5;
  cursor: not-allowed;
  background: rgba(128,128,128,.2)
}
.menu-button.locked:hover {
  background: rgba(128,128,128,.3);
  transform: none
}
.lock-icon {
  margin-right: 5px;
  opacity: .7;
  font-size: 14px;
}
.menu-button .lock-icon {
  font-size: 14px !important;
}
.menu-notification {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--danger);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  animation: 2s ease-in-out infinite notification-pulse
}
.central-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  margin-left: 0 !important; /* Kill the purple line wall! */
  transition: margin-left 0.3s ease;
}

/* When settings is active, prevent central-content from scrolling */
.central-content:has(#settings-section.active) {
  overflow-y: hidden;
}

/* Fallback for browsers without :has() support */
#main-panel.settings-active {
  overflow-y: hidden !important;
}
.section-content {
  display: none;
  animation: 0.3s fadeIn;
  background-color: transparent; /* Use parent's background */
  height: 100%;
  flex: 1;
}
.section-content.active {
  display: block;
}

/* Ensure settings section has no weird background */
#settings-section {
  background-color: transparent !important;
}

/* Modal open state - prevent body scroll */
body.modal-open {
  overflow: hidden !important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.right-stats {
  width: 250px;
  background-color: var(--bg-secondary);
  border-left: 3px solid var(--border-primary);
  flex-shrink: 0;
  overflow-y: auto;
  max-height: calc(100vh - 110px); /* Account for header + footer */
  padding-bottom: 20px /* Extra space from footer */
}
.stats-group {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-primary)
}
.stats-group:last-child {
  border-bottom: none
}
.stats-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: .5px
}
.stats-value {
  font-size: 20px;
  color: var(--accent-primary);
  font-weight: 700
}
.section-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-primary);
  padding-bottom: 10px
}
.section-tab {
  padding: 10px 20px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-bottom: none;
  color: var(--text-secondary);
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  border-radius: 5px 5px 0 0;
  position: relative
}
.section-tab:hover {
  background-color: var(--border-primary);
  color: var(--text-primary)
}
.section-tab.active {
  background-color: var(--accent-secondary);
  color: var(--text-primary);
  border-color: var(--accent-primary)
}
.section-tab.locked {
  opacity: .6;
  cursor: not-allowed;
  background: rgba(74,124,126,.3)
}
.section-tab.locked:hover {
  background: rgba(74,124,126,.3);
  transform: none
}
.section-tab[disabled] {
  pointer-events: none
}
.tab-notification {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--warning);
  color: var(--bg-primary);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700
}
.tab-panel {
  display: none
}
.tab-panel.active {
  display: block
}
/* Base rule stays as default for large screens */
.home-dashboard {
  display: grid;
  grid-template-columns: 360px 1fr 320px;  /* Keep for 1920px+ */
  gap: 20px;
  padding: 20px;
  padding-bottom: 40px; /* Extra space to avoid footer overlap */
  max-width: 1600px;
  margin: 0 auto;
  min-height: fit-content;
  box-sizing: border-box
}

/* Add these responsive breakpoints IMMEDIATELY AFTER */

/* Standard desktop - slight reduction */
@media screen and (max-width: 1919px) {
    .home-dashboard {
        grid-template-columns: 340px 1fr 300px;
        gap: 18px;
        padding: 18px;
        padding-bottom: 100px;
    }
}

/* Small desktop - needs compression */
@media screen and (max-width: 1599px) {
    .home-dashboard {
        grid-template-columns: 300px 1fr 280px;
        gap: 15px;
        padding: 15px;
        padding-bottom: 100px;
    }
}

/* Laptop screens - critical breakpoint */
@media screen and (max-width: 1399px) {
    .home-dashboard {
        grid-template-columns: 260px 1fr 260px;
        gap: 12px;
        padding: 12px;
        padding-bottom: 100px;
    }

    /* Shrink unlock cards at this size */
    .unlock-card {
        padding: 10px;
        font-size: 0.9em;
    }

    /* Make meat market more compact */
    .meat-option {
        padding: 8px;
        font-size: 0.9em;
    }
}

/* Minimum desktop support - at 1280px drop right rail on Home */
@media screen and (max-width: 1280px) {
    .home-dashboard {
        grid-template-columns: 260px 1fr; /* Left + Center, no right rail */
        gap: 10px;
        padding: 10px;
        padding-bottom: 100px;
    }
}

/* Tablet/Mobile - single column */
@media screen and (max-width: 1200px) {
    .home-dashboard {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
        padding-bottom: 100px;
    }

    /* Stack everything vertically */
    .action-center,
    .main-game-area,
    .live-stats {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Home compact stats header */
.home-compact-stats {
  display: none; /* toggled by JS */
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.home-compact-stats.is-hidden {
  display: none !important;
}
.home-compact-stats .home-compact-item {
  flex: 1 1 0;
  min-height: 44px; /* touch-friendly */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 6px;
}
.home-compact-stats .label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.home-compact-stats .value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.home-compact-stats .value-info { color: var(--info); }
.home-compact-stats .value-positive { color: var(--success); }
.home-compact-stats .value-negative { color: var(--danger); }

@media screen and (max-width: 768px) {
  .home-compact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* Debug borders removed - compact bar should now be properly positioned */

/* Compact bar sticky positioning - at ≤1280px */
@media (max-width: 1280px) {
  /* Position compact bar as sticky within central-content instead of fixed to viewport */
  #homeCompactStats:not(.is-hidden) {
    position: sticky;
    top: -80px; /* Stick at top of central content area (accounting for game-container margin) */
    z-index: 999;
    margin: -20px -20px 0 -20px; /* Expand beyond central-content padding */
    border-radius: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
  }
}
.card {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-primary)
}
.card-title {
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 8px
}
.production-stats {
  background: var(--bg-tertiary)
}
.production-stats .card-title {
  color: var(--accent-primary)
}
.action-center {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding-right: 10px
}
.main-game-area {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.live-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding-right: 10px
}
.burger-flipper {
  text-align: center;
  background: radial-gradient(ellipse at center,var(--bg-secondary) 0,var(--bg-tertiary) 100%)
}


.burger-visual {
  position: relative;
  margin: 20px 0
}
.burger-flipper .burger-icon {
  font-size: 120px;
  filter: drop-shadow(0 0 20px rgba(96,165,250,.3));
  cursor: pointer;
  transition: transform .1s;
  user-select: none
}
.burger-flipper .burger-icon:hover {
  transform: scale(1.1)
}
.burger-flipper .burger-icon:active {
  transform: scale(.95) rotate(10deg)
}
.flip-button {
  background-color: var(--accent-secondary);
  border: none;
  padding: 20px 60px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: .3s;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(59,89,152,.4);
  border-radius: 8px;
  text-transform: uppercase;
  width: 40%
}
.flip-button:hover {
  background-color: #4c70ba;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59,89,152,.6)
}
.flip-button:active {
  transform: translateY(0)
}
.particle-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none
}
.particle {
  font-size: 20px;
  color: var(--success)
}
@keyframes float-up {
  to {
    transform: translateY(-50px);
    opacity: 0
  }
}
.flip-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-primary)
}
.flip-stat {
  text-align: center
}
.flip-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase
}
.flip-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary)
}
.pricing-control {
  background: var(--bg-tertiary)
}
.price-display {
  text-align: center;
  margin-bottom: 20px
}
.current-price {
  font-size: 54px;
  font-weight: 700;
  color: var(--success);
  text-shadow: 0 2px 4px rgba(0,0,0,.3)
}
.price-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px
}
.price-btn {
  border: none;
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: .3s
}
#priceDown, .price-btn.decrease {
  background: #dc2626;
}
#priceUp, .price-btn.increase {
  background: #16a34a;
}
#priceDown:hover:not(:disabled), .price-btn.decrease:hover:not(:disabled) {
  background: #b91c1c;
  transform: scale(1.1)
}
#priceUp:hover:not(:disabled), .price-btn.increase:hover:not(:disabled) {
  background: #15803d;
  transform: scale(1.1)
}
.pricing-control .card-header {
  display: block!important;
  text-align: center!important
}
.pricing-control .card-title {
  display: inline-block!important;
  text-align: center!important;
  width: 100%!important;
  margin: 0!important
}
.pricing-control .pricing-optimizers {
  display: none!important;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%)
}
.quick-increments {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px
}
.increment-btn {
  background: var(--border-primary);
  border: 1px solid var(--border-secondary);
  color: var(--text-secondary);
  padding: 8px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  transition: .2s
}
.increment-btn:hover {
  background: var(--accent-secondary);
  color: #fff
}
.increment-btn.active {
  background: var(--accent-primary);
  color: var(--bg-tertiary)
}
.custom-increment-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px
}
#custom-increment-input {
  flex: 1;
  padding: 8px 12px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  font-size: 14px;
  border-radius: 5px;
  transition: .3s
}
#custom-increment-input:focus {
  outline: 0;
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(96,165,250,.3)
}
#custom-increment-input::placeholder {
  color: var(--text-secondary);
  opacity: .5
}
.demand-meter {
  margin-top: 15px
}
.demand-bar {
  background: var(--bg-secondary);
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  position: relative
}
.demand-fill {
  background: linear-gradient(90deg,var(--danger) 0,var(--warning) 50%,var(--success) 100%);
  height: 100%;
  width: 75%;
  transition: width .3s
}
.demand-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,.5)
}
.meat-option {
  flex: 1;
  background: linear-gradient(145deg,rgba(26,31,58,.8) 0,rgba(15,23,42,.8) 100%);
  border: 2px solid rgba(248,113,113,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px
}
.meat-option:hover {
  border-color: #f87171;
  background: linear-gradient(145deg,#1a1f3a 0,rgba(15,23,42,.9) 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(248,113,113,.3)
}
.meat-amount {
  color: #fbbf24
}
.meat-price {
  color: #4ade80;
  font-size: 18px;
  font-weight: bold;
}
.meat-option.disabled:hover {
  border-color: rgba(248,113,113,.2)
}
.meat-market .auto-buyer-toggle-compact {
  display: flex;
  align-items: center
}

/* Meat Market Notification Styles */
.meat-market-notification {
  text-align: center;
  padding: 15px;
}

.meat-market-notification .notification-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.meat-market-notification .notification-title {
  margin: 0 0 8px 0;
  color: var(--success);
  font-size: 16px;
}

.meat-market-notification .notification-desc {
  margin: 0 0 15px 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.notification-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-button {
  background: var(--success);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.notification-button:hover {
  background: #22c55e;
  transform: translateY(-1px);
}

.notification-dismiss {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 8px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.notification-dismiss:hover {
  background: var(--bg-tertiary);
  color: var(--text);
}
.market-stats {
  background: var(--bg-tertiary)
}
.market-stats .card-title {
  color: var(--accent-primary)
}
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-secondary)
}
.stat-row:last-child {
  border-bottom: none
}
.stat-value.positive {
  color: var(--success)
}
.stat-value.warning {
  color: var(--warning)
}
.market-stats .stat-value {
  color: var(--accent-primary);
  font-size: 16px
}
.special-promos {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border-color: var(--warning);
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--warning);
  animation: 2s ease-in-out infinite alternate glow
}
.specials-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  width: 100%
}
.toggle-label span:first-child {
  flex: 1
}
@keyframes glow {
  from {
    box-shadow: 0 0 5px rgba(251,191,36,.5)
  }
  to {
    box-shadow: 0 0 20px rgba(251,191,36,.8)
  }
}
.live-stats .special-promos {
  background: var(--bg-tertiary);
  border-color: var(--warning);
  animation: none
}
.live-stats .specials-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto
}
.live-stats .special-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid var(--border-primary);
  transition: .2s
}
.live-stats .special-toggle:hover {
  border-color: var(--warning);
  transform: translateX(2px)
}
.live-stats .toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  width: 100%
}
.live-stats .toggle-label span:first-child {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.live-stats .toggle-switch {
  width: 40px;
  height: 20px
}
.live-stats .toggle-slider:before {
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px
}
.live-stats input:checked + .toggle-slider:before {
  transform: translateX(20px)
}
.catering-section {
  /* Match presence detector flow - no absolute positioning */
  display: block;
  margin-bottom: 8px;
  /* Remove width constraint, padding, background, border, transform to match presence detector structure */
  /* The actual styling will be on .catering-banner inside */
}


.catering-header {
  text-align: center;
  margin-bottom: 10px
}
.catering-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #f39c12;
  letter-spacing: 2px
}
.catering-subtitle {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
  letter-spacing: 1px
}
.catering-display {
  /* Remove margin to match presence detector structure */
  margin: 0;
}
.catering-button {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent-primary, #6D28D9) 0%, var(--accent-secondary, #06B6D4) 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb, 167, 139, 250), 0.4) !important;
  text-transform: uppercase;
  letter-spacing: 1px
}
.catering-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb, 124, 58, 237), .4);
  background: linear-gradient(135deg,
    var(--accent-primary-hover) 0%,
    var(--accent-secondary-hover) 100%);
}
.catering-button:disabled {
  background: #444;
  cursor: not-allowed;
  opacity: .6;
  box-shadow: none
}
.catering-button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px
}
.catering-text {
  font-size: 14px;
  letter-spacing: 2px
}
.catering-details {
  font-size: 11px;
  opacity: .9;
  letter-spacing: .5px
}
.catering-status {
  padding: 10px
}
.catering-status.cooking {
  background: rgba(243,156,18,.05);
  border-radius: 8px
}
.catering-progress {
  width: 100%;
  height: 20px;
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.catering-progress .progress-bar {
  height: 100% !important;
  background: linear-gradient(90deg,#f39c12 0,#e67e22 100%) !important;
  transition: width .3s;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.catering-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px
}
.catering-timer {
  font-size: 18px;
  font-weight: 700;
  color: #f39c12
}
.catering-payout {
  color: #4ade80;
  font-size: 12px
}
.cooldown-text {
  color: rgba(255,255,255,.6)
}
.burger-flipper {
  position: relative
}
.burger-content-wrapper {
  transition: transform .3s;
  display: flex;
  flex-direction: column;
  align-items: center
}
/* CATERING ACTIVE BURGER POSITION */
.burger-flipper.catering-active .burger-content-wrapper {
  transform: translateY(-50px) scale(0.85);
}
.presence-indicator-dash {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 5px;
  background: rgba(167,139,250,.1);
  border-radius: 10px;
  border: 1px solid rgba(167,139,250,.3);
  position: relative;
  z-index: 2;
  justify-content: space-between;
}

.presence-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.presence-bar-compact {
  flex: 1;
  height: 16px;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  overflow: hidden;
  position: relative
}
.presence-fill-compact {
  height: 100%;
  background: linear-gradient(90deg,var(--purple) 0,var(--accent-primary) 100%);
  width: 0%;
  transition: width .3s;
  box-shadow: 0 0 10px rgba(167,139,250,.5)
}
.presence-text {
  color: var(--purple);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap
}
.presence-indicator-dash.active {
  animation: 2s ease-in-out infinite presence-glow
}
@keyframes presence-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(167,139,250,.3)
  }
  50% {
    box-shadow: 0 0 20px rgba(167,139,250,.6)
  }
}
.presence-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-secondary);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  flex-shrink: 0;
}

#presence-toggle-icon {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
}
.presence-toggle-btn:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: var(--danger);
  color: var(--danger);
  transform: scale(1.1);
}

.presence-toggle-btn.enabled {
  background: rgba(34, 197, 94, 0.2);
  border-color: var(--success);
  color: var(--success);
}

.presence-toggle-btn.enabled:hover {
  background: rgba(34, 197, 94, 0.3);
}
.presence-indicator-dash.disabled {
  opacity: 0.5;
  background: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.3);
}
.presence-indicator-dash.disabled .presence-fill-compact {
  background: linear-gradient(90deg, #666 0%, #888 100%);
  box-shadow: none;
}
.presence-indicator-dash.disabled .presence-text {
  color: var(--text-secondary);
}
.home-dashboard .quick-actions-panel {
  width: 100%;
  margin: 0;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  overflow: hidden
}
.home-dashboard .panel-header {
  background: var(--bg-secondary);
  padding: 15px 20px;
  margin: 0
}
.home-dashboard .panel-content {
  padding: 20px
}
.home-dashboard .quick-action-category {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-primary)
}
.home-dashboard .quick-action-category:last-child {
  border-bottom: none;
  margin-bottom: 0
}
.home-dashboard .category-title {
  color: var(--text-secondary);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px
}
.home-dashboard .quick-action-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  transition: .3s
}
.home-dashboard .quick-action-item:hover {
  border-color: var(--accent-primary);
  transform: translateX(5px)
}
.home-dashboard .action-info {
  flex: 1;
  margin-right: 10px
}
.home-dashboard .action-name {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 2px
}
.home-dashboard .action-description {
  display: block;
  font-size: 12px;
  color: var(--text-secondary)
}
.home-dashboard .quick-buy-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  border: none;
  padding: 8px 16px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  transition: .3s;
  white-space: nowrap
}
.home-dashboard .quick-buy-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(96,165,250,.3)
}
.home-dashboard .quick-buy-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6;
  transform: none
}
.pricing-optimizers {
  margin-left: auto
}
.optimizer-button-group {
  display: flex;
  gap: 5px
}
.optimizer-btn {
  background: var(--border-primary);
  border: 1px solid var(--border-secondary);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: .2s;
  color: var(--text-primary)
}
.optimizer-btn:hover {
  background: var(--accent-secondary);
  transform: scale(1.1)
}
.particle {
  position: absolute;
  font-weight: 700;
  pointer-events: none;
  animation: 1.2s ease-out forwards particle-float;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
  z-index: 10
}
@keyframes particle-float {
  0% {
    transform: translate(0,0) scale(.5);
    opacity: 0
  }
  20% {
    transform: translate(var(--end-x,0),calc(var(--end-y,-50px) * .3)) scale(1.2);
    opacity: 1
  }
  100% {
    transform: translate(calc(var(--end-x,0) * 1.5),var(--end-y,-80px)) scale(.8);
    opacity: 0
  }
}
.particle:nth-child(odd) {
  animation: 1.2s ease-out forwards particle-float-rotate
}
@keyframes particle-float-rotate {
  0% {
    transform: translate(0,0) scale(.5) rotate(0);
    opacity: 0
  }
  20% {
    transform: translate(var(--end-x,0),calc(var(--end-y,-50px) * .3)) scale(1.2) rotate(180deg);
    opacity: 1
  }
  100% {
    transform: translate(calc(var(--end-x,0) * 1.5),var(--end-y,-80px)) scale(.8) rotate(360deg);
    opacity: 0
  }
}
.floating-text {
  position: absolute;
  font-weight: 700;
  font-size: 24px;
  pointer-events: none;
  animation: float-text var(--duration,0.6s) ease-out forwards;
  text-shadow: 
    2px 2px 4px rgba(0,0,0,0.8),
    -1px -1px 1px rgba(0,0,0,0.6),
    1px -1px 1px rgba(0,0,0,0.6),
    -1px 1px 1px rgba(0,0,0,0.6);
  z-index: 1000;
}
@keyframes float-text {
  0% {
    transform: translate(var(--start-x,0),var(--start-y,0)) scale(.8);
    opacity: 1
  }
  20% {
    opacity: 1;
    transform: translate(calc(var(--start-x,0) + (var(--end-x,0) - var(--start-x,0)) * .2),calc(var(--start-y,0) + (var(--end-y,0) - var(--start-y,0)) * .2)) scale(1.1)
  }
  100% {
    transform: translate(var(--end-x,0),var(--end-y,-80px)) scale(.9);
    opacity: 0
  }
}
.burger-flipper .auto-flipper-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  opacity: 0;
  animation: 0.5s forwards fadeIn
}
.burger-flipper .auto-flipper-toggle .toggle-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500
}
.burger-flipper .auto-flipper-toggle .toggle-switch {
  position: relative;
  display: inline-block;
  width: 75px!important;
  height: 25px!important
}
.burger-flipper .auto-flipper-toggle .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.burger-flipper .auto-flipper-toggle .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  transition: .3s;
  border-radius: 24px!important
}
.burger-flipper .auto-flipper-toggle .toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px!important;
  width: 18px!important;
  left: 3px!important;
  bottom: 3px!important;
  top: auto!important;
  transform: none!important;
  background-color: #ccc;
  transition: .3s;
  border-radius: 50%
}
.burger-flipper .auto-flipper-toggle .toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(77,166,255,.5)
}
.burger-flipper .auto-flipper-toggle .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px)!important;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(255,255,255,.8)
}
.burger-flipper .auto-flipper-toggle .toggle-switch:hover .toggle-slider {
  border-color: rgba(255,255,255,.4)
}
.burger-flipper.auto-flipping .burger-icon {
  animation: 2s ease-in-out infinite subtle-pulse
}
@keyframes subtle-pulse {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.05)
  }
}
.card-header,
.unlock-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.unlock-card-header h4 {
  flex: 1
}
.card-header-controls {
  display: flex;
  align-items: center;
  gap: 10px
}
.minimize-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  font-size: 18px;
  line-height: 1;
  padding: 0
}
.minimize-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.3)
}
.minimize-icon {
  display: block;
  transform: translateY(-1px)
}
.card.minimized .card-content,
.card.minimized .card-footer,
.unlock-card.minimized .unlock-card-items,
.unlock-card.minimized .unlock-card-link {
  display: none
}

/* Additional fallback rules to ensure unlock card content is hidden */
.unlock-card.minimized > *:not(.unlock-card-header) {
  display: none !important;
}
.card.minimized,
.unlock-card.minimized {
  min-height: auto
}
.card.minimized .minimize-icon,
.unlock-card.minimized .minimize-icon {
  content: '+';
  transform: rotate(90deg)
}
.unlock-card .minimize-btn {
  position: relative;
  z-index: 10
}
.burger-flipper.card .card-header {
  position: absolute;
  top: 10px;
  right: 10px;
  background: 0 0;
  border: none;
  padding: 0;
  margin: 0
}
.burger-flipper.card .card-header .card-title {
  display: none
}
.burger-flipper.card .minimize-btn {
  background: rgba(0,0,0,.5)
}
.panel-header.collapsible {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-radius: 8px 8px 0 0;
  transition: .1s;
  user-select: none
}
.panel-header.collapsible .panel-title {
  font-size: 20px;
  margin: 0
}
.collapse-arrow {
  font-size: 20px;
  transition: transform .3s;
  color: #95a5a6
}
.collapse-arrow.collapsed {
  transform: rotate(-90deg)
}
.panel-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s,padding .3s;
  opacity: 1;
  padding: 20px
}
.panel-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0 20px
}
.quick-actions-panel.collapsed .panel-header {
  border-radius: 8px
}
.quick-actions-panel {
  transition: margin .3s
}
.quick-actions-panel:not(.collapsed) {
  box-shadow: 0 4px 6px rgba(0,0,0,.1)
}
.panel-header.collapsible:hover .collapse-arrow {
  animation: 1s infinite pulse
}
#grill-station-section .section-content {
  padding: 20px
}
.grill-station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
  gap: 20px;
  padding: 20px;
  height: calc(100vh - 200px);
  max-width: 1600px;
  margin: 0 auto
}
.grill-card {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  overflow: hidden;
  transition: .3s;
  min-height: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column
}
.grill-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 20px rgba(0,0,0,.3)
}
.grill-card-header {
  background: var(--bg-secondary);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-primary);
  flex-shrink: 0
}
.grill-card-header h3 {
  margin: 0;
  color: var(--accent-primary);
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px
}
.card-bonus,
.card-count,
.card-progress {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary)
}
.card-count {
  color: var(--warning)
}
.card-progress {
  color: var(--purple)
}
.card-bonus {
  color: var(--success)
}
.grill-card-content {
  padding: 15px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column
}
.grill-card-footer {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  padding: 12px 15px;
  border-top: 2px solid var(--border-primary);
  flex-shrink: 0;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 -2px 10px rgba(0,0,0,.2)
}
.compact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  transition: .2s;
  flex: 1;
  max-height: 100px
}
.compact-item:hover {
  background: var(--border-primary);
  transform: translateX(2px)
}
.compact-item:last-child {
  margin-bottom: 0
}
.item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1
}
.item-name {
  color: var(--accent-primary)
}
.item-effect {
  color: var(--text-secondary)
}
.item-action {
  display: flex;
  align-items: center;
  gap: 15px
}
.item-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--warning)
}
.compact-btn {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  transition: .3s;
  white-space: nowrap
}
.compact-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(96,165,250,.3)
}
.compact-btn:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6
}
.compact-btn.purchased {
  background: linear-gradient(135deg,var(--success) 0,#22c55e 100%)
}
.card-items-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  margin-bottom: 5px
}
.mini-employee-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .2s;
  flex: 1;
  max-height: 80px;
  margin: 0
}
.mini-employee-card:hover {
  background: var(--border-primary);
  transform: translateX(2px)
}
.mini-employee-info {
  flex: 1
}
.mini-employee-name {
  font-weight: 700;
  color: var(--accent-primary);
  font-size: 16px
}
.mini-employee-stats {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px
}
.mini-employee-actions {
  display: flex;
  align-items: center;
  gap: 10px
}
.mini-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--warning);
  min-width: 40px;
  text-align: center
}
.mini-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  border: none;
  padding: 6px 12px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  transition: .2s
}
.mini-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(96,165,250,.3)
}
.mini-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6
}
.mini-button.free-hire {
  color: #4ade80!important;
  font-weight: 700
}
.grill-card.expandable,
.grill-card:has(.headhunters-unlock),
.grill-card:has(.recruiters-unlock-panel),
.grill-card:has(.spatula-paywall) {
  height: auto!important;
  min-height: 600px;
  max-height: none!important
}
.grill-card.expandable .grill-card-content,
.grill-card:has(.headhunters-unlock) .grill-card-content,
.grill-card:has(.recruiters-unlock-panel) .grill-card-content,
.grill-card:has(.spatula-paywall) .grill-card-content {
  overflow: visible!important;
  height: auto!important
}
#employeeList .card-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap: 15px;
  padding: 20px
}
.mini-employee-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 10px rgba(74,222,128,.2)
}
.mini-employee-card.owned {
  border-color: var(--accent-secondary)
}
#upgrades-employees {
  height: auto!important;
  max-height: none!important
}
#employeeList {
  height: auto!important;
  max-height: none!important;
  overflow: visible!important
}
.employee-list,
.upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 15px
}
.employee-item,
.upgrade-item {
  background-color: var(--bg-secondary);
  padding: 20px;
  border-radius: 8px;
  border: 2px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .3s
}
.employee-item:hover,
.upgrade-item:hover {
  border-color: var(--accent-secondary);
  transform: translateX(5px)
}
.employee-info,
.upgrade-info {
  flex: 1
}
.employee-name,
.upgrade-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 5px
}
.employee-stats,
.upgrade-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px
}
.upgrade-effect {
  color: #4ade80
}
.hire-button,
.upgrade-button {
  background-color: var(--accent-secondary);
  border: none;
  padding: 12px 24px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  border-radius: 5px;
  white-space: nowrap
}
.hire-button:hover:not(:disabled),
.upgrade-button:hover:not(:disabled) {
  background-color: #4c70ba;
  transform: scale(1.05)
}
.hire-button:disabled,
.upgrade-button:disabled {
  background-color: #555;
  cursor: not-allowed;
  opacity: .6
}
.upgrade-button.purchased {
  background-color: #10b981
}
.upgrade-section {
  margin-bottom: 30px
}
.upgrade-section h4 {
  color: var(--accent-primary);
  font-size: 20px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-primary)
}
.upgrade-total {
  background-color: var(--border-primary);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  color: var(--accent-primary);
  font-size: 18px;
  margin-top: 20px
}
.upgrade-level {
  color: var(--text-secondary);
  font-weight: 400
}
.active-badge,
.owned-badge {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 10px;
  font-weight: 700
}
.owned-badge {
  background-color: #10b981;
  color: #fff
}
.active-badge {
  background-color: #fbbf24;
  color: var(--bg-tertiary)
}
.effect-timer {
  color: #fbbf24;
  font-weight: 700
}
.employee-actions {
  display: flex;
  gap: 10px;
  align-items: center
}
.employee-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
  margin: 0 15px
}
.stock-market-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px
}
.market-header {
  text-align: center;
  margin-bottom: 30px
}
.market-title {
  font-size: 36px;
  color: var(--accent-primary);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px
}
.market-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 18px
}
.market-trend-label {
  color: var(--text-secondary)
}
.market-trend-text {
  font-weight: 700;
  color: var(--text-primary)
}
.market-trend-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  animation: 2s infinite pulse
}
.market-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--border-primary);
  padding-bottom: 10px
}
.market-tab {
  padding: 12px 30px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-bottom: none;
  color: var(--text-secondary);
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  border-radius: 5px 5px 0 0;
  font-size: 16px
}
.market-tab:hover {
  background-color: var(--border-primary);
  color: var(--text-primary)
}
.market-tab.active {
  background-color: var(--accent-secondary);
  color: var(--text-primary);
  border-color: var(--accent-primary)
}
.market-tab-content {
  display: none
}
.market-tab-content.active {
  display: block
}
.companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 20px
}
.company-card {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  transition: .3s;
  position: relative;
  overflow: hidden
}
.company-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-primary);
  box-shadow: 0 10px 30px rgba(0,0,0,.3)
}
.company-card.locked {
  opacity: .7
}
.company-card.locked::after {
  content: '🔒';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px
}
.company-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 10px
}
.company-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 15px;
  line-height: 1.4
}
.company-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px
}
.company-stat {
  text-align: center
}
.stat-label {
  color: var(--text-secondary);
  display: block
}
.risk-indicator {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px
}
.risk-low {
  background-color: var(--success);
  color: var(--bg-primary)
}
.risk-medium {
  background-color: var(--warning);
  color: var(--bg-primary)
}
.risk-high {
  background-color: var(--danger);
  color: var(--text-primary)
}
.company-action {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  font-size: 16px
}
.invest-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  color: #fff
}
.invest-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(96,165,250,.4)
}
.invest-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6
}
.unlock-button {
  background: linear-gradient(135deg,var(--warning) 0,#f59e0b 100%);
  color: var(--bg-primary)
}
.unlock-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(251,191,36,.4)
}
.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 15px
}
.portfolio-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.portfolio-info {
  flex: 1
}
.portfolio-company {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 5px
}
.portfolio-details {
  font-size: 14px;
  color: var(--text-secondary)
}
.portfolio-timer {
  text-align: center;
  margin: 0 20px
}
.timer-display {
  font-size: 24px;
  font-weight: 700;
  color: var(--warning)
}
.timer-label {
  font-size: 12px;
  color: var(--text-secondary)
}
.portfolio-return {
  text-align: right
}
.return-label {
  font-size: 12px;
  color: var(--text-secondary)
}
.return-value {
  font-size: 20px;
  font-weight: 700
}
.return-positive {
  color: var(--success)
}
.return-negative {
  color: var(--danger)
}
.portfolio-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary)
}
.portfolio-hint {
  margin-top: 10px;
  font-size: 14px;
  opacity: .8
}
.market-upgrades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
  gap: 20px
}
.market-upgrade-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
  transition: .3s
}
.market-upgrade-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px)
}
.upgrade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.upgrade-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary)
}
.upgrade-level {
  font-size: 14px;
  color: var(--text-secondary)
}
.upgrade-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 15px
}
.upgrade-effect {
  font-size: 14px;
  color: var(--success);
  margin-bottom: 15px
}
.upgrade-buy-button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: .3s
}
.upgrade-buy-button:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 5px 15px rgba(96,165,250,.3)
}
.upgrade-buy-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6
}
.investment-modal {
  max-width: 500px;
  background: var(--bg-secondary);
  border: 3px solid var(--accent-primary)
}
.invest-details {
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px
}
.invest-stat {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.invest-stat:last-child {
  margin-bottom: 0
}
.invest-controls {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.invest-amount-control label,
.invest-duration-control label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-secondary)
}
#invest-amount-input {
  width: 100%;
  padding: 10px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  border-radius: 5px;
  font-size: 16px
}
.amount-helpers {
  display: flex;
  gap: 10px;
  margin-top: 10px
}
.amount-helpers button {
  flex: 1;
  padding: 8px;
  background: var(--border-primary);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
  transition: .3s
}
.amount-helpers button:hover {
  background: var(--accent-secondary)
}
#invest-duration-slider {
  width: 100%;
  margin-top: 10px
}
.duration-bonus {
  font-size: 12px;
  color: var(--success);
  margin-top: 5px
}
.expected-return {
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700
}
#expected-return-display {
  color: var(--success)
}
.invest-confirm-button {
  padding: 15px;
  background: linear-gradient(135deg,var(--success) 0,#22c55e 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s
}
.invest-confirm-button:hover {
  transform: scale(1.02);
  box-shadow: 0 5px 20px rgba(74,222,128,.4)
}
#industries-section {
  width: 100%
}
.industries-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%
}
.industries-header {
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  padding: 30px;
  border-radius: 15px;
  border: 2px solid var(--border-primary)
}
.industries-title {
  font-size: 36px;
  color: var(--accent-primary);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px
}
.industries-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap
}
.stat-box {
  background: var(--bg-tertiary);
  padding: 15px 25px;
  border-radius: 10px;
  border: 1px solid var(--border-primary)
}
.facility-card {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  transition: .3s
}
.facility-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3)
}
.facility-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.facility-header h3 {
  font-size: 24px;
  color: var(--accent-primary);
  margin: 0
}
.facility-level {
  background: var(--bg-tertiary);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  font-weight: 700
}
.facility-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 15px;
  margin-bottom: 20px
}
.facility-stat {
  background: var(--bg-tertiary);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.facility-stat span:first-child {
  color: var(--text-secondary);
  font-size: 14px
}
.facility-stat span:last-child {
  color: var(--accent-primary);
  font-weight: 700
}
.facility-experiment {
  background: var(--bg-tertiary);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px
}
.facility-experiment h4 {
  color: var(--accent-primary);
  margin-bottom: 15px;
  text-align: center
}
.experiment-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center
}
.experiment-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  border: none;
  padding: 12px 20px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  transition: .3s
}
.experiment-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(96,165,250,.4)
}
.experiment-status {
  text-align: center;
  margin-top: 15px;
  color: var(--warning);
  font-weight: 700
}
.facility-upgrade-button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg,var(--success) 0,#22c55e 100%);
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  transition: .3s
}
.facility-upgrade-button:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 5px 20px rgba(74,222,128,.4)
}
.facility-upgrade-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6
}
.shop-button {
  display: block;
  margin: 30px auto;
  padding: 20px 40px;
  background: linear-gradient(135deg,var(--purple) 0,#8b5cf6 100%);
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  transition: .3s
}
.shop-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(167,139,250,.4)
}
.research-shop-modal {
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto
}
.shop-title {
  text-align: center;
  color: var(--accent-primary);
  font-size: 32px;
  margin-bottom: 20px
}
.shop-header {
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px
}
.shop-currency {
  font-size: 20px;
  color: var(--text-primary)
}
.shop-currency span {
  color: var(--accent-primary);
  font-weight: 700
}
.shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 20px
}
.shop-item {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  transition: .3s
}
.shop-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary)
}
.shop-item.purchased {
  opacity: .7;
  border-color: var(--success)
}
.shop-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.shop-item-header h4 {
  color: var(--accent-primary);
  margin: 0
}
.shop-item-cost {
  background: var(--bg-tertiary);
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--purple);
  font-weight: 700
}
.shop-item-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 15px
}
.shop-item-button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 5px;
  transition: .3s
}
.shop-item-button:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 5px 15px rgba(96,165,250,.3)
}

.shop-item-button:disabled {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.shop-item-button:disabled:hover {
  transform: none;
  box-shadow: none;
}
.shop-item-owned {
  display: block;
  text-align: center;
  color: var(--success);
  font-weight: 700;
  font-size: 16px
}
@media (max-width:768px) {
  .industries-stats {
    flex-direction: column;
    gap: 15px
  }
  .stat-box {
    width: 100%;
    text-align: center
  }
  .facility-stats {
    grid-template-columns: 1fr
  }
  .experiment-buttons {
    flex-direction: column
  }
  .experiment-button {
    width: 100%
  }
}
.headhunters-container,
.recruiters-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 50px
}
.headhunters-header,
.recruiters-header {
  text-align: center;
  margin-bottom: 30px
}
.headhunters-header h3,
.recruiters-header h3 {
  font-size: 28px;
  color: var(--accent-primary);
  margin-bottom: 10px
}
.headhunters-description,
.recruiters-description {
  color: var(--text-secondary);
  font-size: 16px
}
.headhunters-list,
.recruiters-list {
  display: grid!important;
  grid-template-columns: repeat(4,1fr)!important;
  gap: 15px;
  padding: 20px 0;
  width: 100%
}
.headhunter-item,
.recruiter-item {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  transition: .3s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: auto!important;
  min-width: 0
}
.headhunter-item:hover,
.recruiter-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 20px rgba(0,0,0,.3)
}
.headhunter-item.owned,
.recruiter-item.owned {
  border-color: var(--accent-secondary)
}
.headhunter-item.owned::before,
.recruiter-item.owned::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,var(--success) 0,var(--accent-primary) 100%)
}
.headhunter-header-row,
.recruiter-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px
}
.headhunter-name,
.recruiter-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary)
}
.headhunter-count,
.recruiter-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--warning)
}
.headhunter-description,
.recruiter-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.4
}
.headhunter-stats,
.recruiter-stats {
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px
}
.headhunter-stat,
.recruiter-stat {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.headhunter-stat:last-child,
.recruiter-stat:last-child {
  margin-bottom: 0
}
.headhunter-progress,
.recruiter-progress {
  margin-bottom: 15px
}
.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-secondary)
}
.progress-bar {
  height: 20px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  overflow: hidden;
  position: relative
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  transition: width .1s linear;
  position: relative;
  overflow: hidden
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(45deg,transparent 25%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.1) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.1) 75%,rgba(255,255,255,.1));
  background-size: 20px 20px;
  animation: 1s linear infinite progress-animation
}
@keyframes progress-animation {
  from {
    background-position: 0 0
  }
  to {
    background-position: 20px 20px
  }
}
.headhunter-actions,
.recruiter-actions {
  display: flex;
  gap: 10px
}
.headhunter-button,
.recruiter-button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px
}
.buy-headhunter-button,
.buy-recruiter-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  color: #fff
}
.buy-headhunter-button:hover:not(:disabled),
.buy-recruiter-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(96,165,250,.4)
}
.upgrade-headhunter-button,
.upgrade-recruiter-button {
  background: linear-gradient(135deg,var(--success) 0,#22c55e 100%);
  color: #fff
}
.upgrade-headhunter-button:hover:not(:disabled),
.upgrade-recruiter-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(74,222,128,.4)
}
.headhunter-button:disabled,
.recruiter-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6;
  transform: none
}
.speed-indicator {
  font-size: 12px;
  color: var(--success);
  text-align: center;
  margin-top: 5px
}
.headhunter-item.wildcard,
.recruiter-item.wildcard {
  grid-column: 2/4;
  background: linear-gradient(145deg,var(--bg-secondary) 0,rgba(167,139,250,.1) 50%,var(--bg-tertiary) 100%)
}
.headhunter-item.wildcard .headhunter-name,
.recruiter-item.wildcard .recruiter-name {
  background: linear-gradient(90deg,var(--warning) 0,var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}
.headhunters-unlock {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 3px solid var(--accent-primary);
  border-radius: 15px;
  padding: 40px;
  text-align: center
}
.unlock-icon {
  font-size: 72px;
  margin-bottom: 20px
}
.headhunters-unlock h3 {
  font-size: 32px;
  color: var(--accent-primary);
  margin-bottom: 20px
}
.unlock-description {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 30px;
  line-height: 1.5
}
.unlock-benefits {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap
}
.benefit-item {
  background: var(--bg-tertiary);
  padding: 15px 25px;
  border-radius: 10px;
  border: 2px solid var(--border-primary);
  font-size: 16px
}
.unlock-button {
  background: linear-gradient(135deg,var(--warning) 0,#f59e0b 100%);
  border: none;
  padding: 20px 40px;
  font-size: 20px;
  font-weight: 700;
  color: var(--bg-primary);
  cursor: pointer;
  border-radius: 10px;
  transition: .3s
}
.unlock-button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(251,191,36,.4)
}
.recruiters-unlock-panel {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  width: 100%;
  max-width: 600px;
  margin: 0 auto
}
.recruiters-unlock-panel .unlock-icon {
  font-size: 64px;
  margin-bottom: 20px;
  filter: grayscale(.5)
}
.recruiters-unlock-panel h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--primary)
}
.recruiters-unlock-panel .unlock-description {
  color: #999;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.5
}
.recruiters-unlock-panel .unlock-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 15px;
  margin-bottom: 30px
}
.recruiters-unlock-panel .benefit-item {
  background: rgba(255,255,255,.05);
  padding: 12px 20px;
  border-radius: 4px;
  color: #bbb
}
.recruiters-unlock-panel .unlock-button {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 15px 40px;
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: .2s
}
.recruiters-unlock-panel .unlock-button:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-2px)
}
.recruiters-unlock-panel .unlock-button:disabled {
  background: #555;
  cursor: not-allowed;
  opacity: .6
}
.recruiters-unlock-panel .unlock-button.can-afford {
  animation: 2s infinite pulse
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1) rotate(var(--rotation,0deg));
    transform: scale(1);
    opacity: 1
  }
  50% {
    transform: scale(1.1) rotate(var(--rotation,0deg));
    transform: scale(1.1);
    opacity: .8
  }
  0% {
    box-shadow: 0 0 0 0 rgba(74,222,128,.4)
  }
  70% {
    box-shadow: 0 0 0 10px rgba(74,222,128,0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74,222,128,0)
  }
}
#headhuntersList,
#recruitersList {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px
}
.headhunters-unlock {
  width: 100%;
  max-width: 600px;
  margin: 0 auto
}
#grill-station-recruiters {
  width: 100%
}
@media (max-width:1600px) {
  .headhunters-container,
  .recruiters-container {
    padding: 0 30px
  }
}
@media (max-width:1400px) {
  .headhunters-list,
  .recruiters-list {
    grid-template-columns: repeat(3,1fr)!important
  }
  .headhunter-item.wildcard,
  .recruiter-item.wildcard {
    grid-column: 1/-1
  }
}
@media (max-width:1000px) {
  .headhunters-list,
  .recruiters-list {
    grid-template-columns: repeat(2,1fr)!important
  }
  .headhunters-container,
  .recruiters-container {
    padding: 0 20px
  }
}
@media (max-width:600px) {
  .headhunters-list,
  .recruiters-list {
    grid-template-columns: 1fr!important
  }
  .headhunter-item.wildcard,
  .recruiter-item.wildcard {
    grid-column: 1
  }
}
.cashiers-list {
  padding: 20px
}
.cashiers-header {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255,255,255,.05);
  border-radius: 8px
}
.cashier-stats {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-size: 14px
}
.cashier-stats .stat {
  padding: 5px 10px;
  background: rgba(255,255,255,.1);
  border-radius: 4px
}
.cashier-stats .stat.cost {
  color: #f39c12
}
.cashier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: linear-gradient(135deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  transition: .3s
}
.cashier-item:hover {
  background: linear-gradient(135deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.04) 100%);
  transform: translateY(-2px)
}
.cashier-info {
  flex: 1
}
.cashier-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px
}
.cashier-count {
  font-size: 14px;
  color: #7f8c8d;
  margin-left: 10px
}
.cashier-description {
  font-size: 14px;
  color: #95a5a6;
  margin-bottom: 5px
}
.cashier-effect {
  font-size: 14px;
  color: #3498db
}
.cashier-cost {
  font-size: 14px;
  color: #f39c12;
  margin-top: 5px
}
.cashier-actions {
  display: flex;
  gap: 10px
}
.fire-button,
.hire-button {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  transition: .3s
}
.hire-button {
  background: #27ae60;
  color: #fff
}
.hire-button:hover:not(:disabled) {
  background: #2ecc71;
  transform: scale(1.05)
}
.hire-button:disabled {
  background: #7f8c8d;
  cursor: not-allowed;
  opacity: .5
}
.fire-button {
  background: #c0392b
}
.click-hold-upgrades {
  padding: 20px
}
.click-hold-upgrades .section-header {
  text-align: center;
  margin-bottom: 20px
}
.click-hold-upgrades .section-header h3 {
  font-size: 28px;
  color: var(--accent-primary);
  margin-bottom: 10px
}
.click-hold-upgrades .section-description {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.5;
  text-align: center
}
.click-hold-upgrades .upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 15px
}
.click-hold-upgrades .upgrade-item {
  background-color: var(--bg-secondary);
  padding: 20px;
  border-radius: 8px;
  border: 2px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: .3s
}
.click-hold-upgrades .upgrade-item:hover {
  border-color: var(--accent-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,.2)
}
.click-hold-upgrades .upgrade-info {
  display: flex;
  flex-direction: column;
  gap: 8px
}
.click-hold-upgrades .upgrade-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary)
}
.click-hold-upgrades .upgrade-level {
  font-size: 14px;
  color: var(--text-secondary)
}
.click-hold-upgrades .upgrade-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4
}
.click-hold-upgrades .upgrade-effect {
  font-size: 14px;
  color: #4ade80;
  font-weight: 700
}
.click-hold-upgrades .upgrade-button {
  background-color: var(--accent-secondary);
  border: none;
  padding: 12px 24px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  border-radius: 5px;
  width: 100%;
  margin-top: 10px
}
.click-hold-upgrades .upgrade-button:hover:not(:disabled) {
  background-color: #4c70ba;
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(96,165,250,.3)
}
.click-hold-upgrades .upgrade-button:disabled {
  background-color: #555;
  cursor: not-allowed;
  opacity: .6
}
.click-hold-upgrades .upgrade-button.purchased {
  background-color: #10b981
}
.csp-shop-header {
  background: linear-gradient(135deg,rgba(139,92,246,.1) 0,rgba(59,130,246,.1) 100%);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden
}
.csp-shop-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,transparent,#8b5cf6,transparent);
  animation: 3s infinite shimmer
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%)
  }
  100% {
    transform: translateX(100%)
  }
}
.shop-title-section {
  margin-bottom: 20px
}
.premium-shop-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg,#8b5cf6 0,#3b82f6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block
}
.shop-subtitle {
  margin: 5px 0 0;
  color: #94a3b8;
  font-size: 14px
}
.shop-balance {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  border: 1px solid rgba(139,92,246,.2)
}
.balance-label {
  color: #94a3b8;
  font-size: 14px
}
.balance-amount {
  font-size: 24px;
  font-weight: 700;
  color: #8b5cf6;
  text-shadow: 0 0 20px rgba(139,92,246,.5)
}
.csp-category-section {
  margin-bottom: 40px
}
.csp-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(139,92,246,.2)
}
.category-icon {
  font-size: 24px
}
.category-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #e2e8f0
}
.csp-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
  gap: 20px
}
.csp-item-card {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: .3s;
  position: relative;
  overflow: hidden
}
.csp-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top left,rgba(139,92,246,.1) 0,transparent 50%);
  opacity: 0;
  transition: opacity .3s
}
.csp-item-card:hover:not(.maxed) {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.4);
  box-shadow: 0 12px 32px rgba(139,92,246,.2)
}
.csp-item-card:hover::before {
  opacity: 1
}
.csp-item-card.maxed {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3)
}
.csp-item-card.unaffordable {
  opacity: .6
}
.item-icon {
  font-size: 48px;
  text-align: center
}
.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px
}
.item-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9
}
.item-description {
  margin: 0;
  font-size: 14px;
  color: #94a3b8;
  font-style: italic
}
.item-effect {
  font-size: 15px;
  color: #4ade80;
  font-weight: 500;
  padding: 8px 12px;
  background: rgba(74,222,128,.1);
  border-radius: 6px;
  border: 1px solid rgba(74,222,128,.2)
}
.item-level {
  font-size: 13px;
  color: #60a5fa;
  font-weight: 600
}
.item-purchase {
  text-align: center
}
.csp-purchase-button {
  background: linear-gradient(135deg,#8b5cf6 0,#6d28d9 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden
}
.csp-purchase-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .6s,height .6s
}
.csp-purchase-button:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139,92,246,.4)
}
.csp-purchase-button:hover::before {
  width: 300px;
  height: 300px
}
.csp-purchase-button.disabled {
  background: #374151;
  cursor: not-allowed;
  opacity: .6
}
.button-cost {
  font-size: 18px;
  font-weight: 700
}
.button-currency {
  font-size: 14px;
  opacity: .9
}
.purchased-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg,#22c55e 0,#16a34a 100%);
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600
}
.csp-item-card:not(.maxed):not(.unaffordable) {
  /* Removed infinite animation to prevent flicker during DOM updates */
  box-shadow: 0 4px 16px rgba(139,92,246,.15);
}
@keyframes subtleGlow {
  0%,
  100% {
    box-shadow: 0 4px 16px rgba(139,92,246,.1)
  }
  50% {
    box-shadow: 0 4px 24px rgba(139,92,246,.2)
  }
}
.csp-stats-card {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px
}
.csp-stats-header {
  margin-bottom: 15px
}
.csp-stats-header h3 {
  margin: 0;
  color: #4ade80;
  font-size: 18px
}
.csp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px
}
.csp-stat {
  text-align: center;
  padding: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 6px
}
.csp-stat-label {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 5px
}
.csp-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #f1f5f9
}
.csp-upgrade-card {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px
}
.csp-upgrade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.csp-upgrade-header h4 {
  margin: 0;
  color: #e2e8f0;
  font-size: 16px
}
.maxed-badge {
  background: linear-gradient(135deg,#4ade80 0,#22c55e 100%);
  color: #0f172a;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600
}
.csp-level-track {
  margin-bottom: 20px
}
.level-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  padding: 0 20px
}
.level-node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: help;
  transition: .3s;
  z-index: 2
}
.level-node:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,.15)
}
.level-node.unlocked {
  background: #22c55e;
  border-color: #4ade80
}
.level-node.current {
  background: #3b82f6;
  border-color: #60a5fa;
  box-shadow: 0 0 20px rgba(59,130,246,.5)
}
.level-node.next {
  border-color: #fbbf24;
  animation: 2s infinite pulse
}
.node-level {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0
}
.level-node.unlocked .node-level {
  color: #0f172a
}
.node-check {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #4ade80;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #0f172a;
  font-weight: 600
}
.level-connector {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.1);
  margin: 0 -10px;
  z-index: 1
}
.level-connector.completed {
  background: #4ade80
}
.level-progress-bar {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 20px
}
.level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,#22c55e 0,#4ade80 100%);
  transition: width .5s
}
.csp-next-upgrade {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(255,255,255,.05);
  border-radius: 6px
}
.next-upgrade-info {
  display: flex;
  flex-direction: column;
  gap: 5px
}
.next-label {
  font-size: 14px;
  color: #94a3b8
}
.next-value {
  font-size: 16px;
  font-weight: 600;
  color: #4ade80
}
.csp-upgrade-button {
  background: linear-gradient(135deg,#3b82f6 0,#2563eb 100%);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
  white-space: nowrap
}
.csp-upgrade-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59,130,246,.4)
}
.csp-upgrade-button:disabled {
  background: #374151;
  color: #6b7280;
  cursor: not-allowed;
  transform: none
}
.specials-container {
  max-width: 1000px;
  margin: 0 auto
}
.specials-unlock {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 3px solid var(--accent-primary);
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto
}
.specials-unlock .unlock-icon {
  font-size: 72px;
  margin-bottom: 20px
}
.specials-unlock h3 {
  font-size: 32px;
  color: var(--accent-primary);
  margin-bottom: 20px
}
.specials-unlock .unlock-description {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 30px;
  line-height: 1.5
}
.specials-unlock .unlock-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 20px;
  margin-bottom: 30px
}
.specials-unlock .benefit-item {
  background: var(--bg-tertiary);
  padding: 15px 20px;
  border-radius: 10px;
  border: 2px solid var(--border-primary);
  font-size: 16px
}
.specials-summary {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center
}
.summary-title {
  font-size: 18px;
  color: var(--accent-primary);
  font-weight: 700;
  margin-bottom: 10px
}
.summary-effects {
  font-size: 16px;
  color: var(--text-primary)
}
.summary-hint {
  color: var(--text-secondary);
  font-size: 14px
}
.effect-meat {
  color: var(--danger)
}
.effect-price {
  color: var(--success)
}
.effect-demand {
  color: var(--warning)
}
.effect-sales {
  color: var(--purple)
}
.special-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  transition: .3s
}
.special-item:hover {
  border-color: var(--accent-secondary);
  transform: translateX(5px)
}
.special-item.active {
  border-color: var(--success);
  background: linear-gradient(145deg,var(--bg-secondary) 0,rgba(74,222,128,.1) 100%)
}
.special-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.special-info {
  flex: 1;
  margin-right: 20px
}
.special-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 5px
}
.special-description {
  font-size: 14px;
  color: var(--text-secondary)
}
.special-tooltip {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-tertiary);
  border-radius: 5px;
  font-style: italic
}
.special-effects {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-tertiary);
  border-radius: 5px;
  font-size: 14px;
  color: var(--accent-primary);
  text-align: center
}
.special-purchase-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  border: none;
  padding: 12px 24px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  transition: .3s;
  white-space: nowrap
}
.special-purchase-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(96,165,250,.4)
}
.special-purchase-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6
}

/* Locked Specials Styles */
.locked-specials-section {
  margin-top: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid var(--border-primary);
}

.locked-specials-section h3 {
  color: var(--text-secondary);
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
}

.locked-specials-section .locked-description {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
}

.locked-special-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.locked-special-item:hover {
  opacity: 0.85;
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.locked-special-info {
  flex: 1;
  margin-right: 20px;
}

.locked-special-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.locked-special-description {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.locked-special-cost {
  font-size: 14px;
  color: var(--accent-primary);
  font-weight: bold;
}

.locked-special-requirements {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  min-width: 250px;
}

.locked-special-requirements .requirements-title {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.locked-special-requirements span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 5px;
  padding-left: 20px;
  position: relative;
}

.locked-special-requirements span.met {
  color: var(--success-color);
  font-weight: bold;
}

.locked-special-requirements span.met::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success-color);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  cursor: pointer
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-primary);
  transition: .4s;
  border-radius: 30px
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: .4s;
  border-radius: 50%
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--success)
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(30px)
}

/* Force show toggles when needed - override any hiding CSS */
.show-toggle,
#autoFlipperToggle.show-toggle,
#employeeToggle.show-toggle {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 10px 0 !important;
  padding: 8px 12px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 6px !important;
}
.specials-toggles {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  max-width: 100%
}

/* Right column specials - 2 column layout */
#specialsTogglesRight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

#specialsTogglesRight .special-toggle {
  margin: 0;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  transition: all 0.2s ease;
}

#specialsTogglesRight .special-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-primary);
}

#specialsTogglesRight .toggle-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  font-size: 12px;
  cursor: pointer;
}

#specialsTogglesRight .toggle-label span {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  position: relative;
}

/* Custom mini toggle switch for right column */
#specialsTogglesRight .toggle-slider {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 14px;
  background: var(--border-primary);
  border-radius: 14px;
  transition: background 0.3s ease;
}

#specialsTogglesRight .toggle-slider::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

#specialsTogglesRight input[type="checkbox"]:checked + .toggle-slider {
  background: var(--accent-primary);
}

#specialsTogglesRight input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(14px);
}

/* Tooltip for special names */
#specialsTogglesRight .toggle-label span[data-tooltip] {
  position: relative;
}

#specialsTogglesRight .toggle-label span[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.95);
  color: white;
  font-size: 12px;
  white-space: normal;
  border-radius: 4px;
  z-index: 10000;
  min-width: 200px;
  max-width: 300px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  line-height: 1.4;
}

#specialsTogglesRight .toggle-label span[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.95);
  z-index: 10001;
  pointer-events: none;
}

.special-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid var(--border-primary)
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative
}
.toggle-label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer
}
.toggle-label .toggle-slider {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  background-color: var(--border-primary);
  transition: .4s;
  border-radius: 26px;
  flex-shrink: 0
}
.toggle-label .toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .4s;
  border-radius: 50%
}
.toggle-label input[type=checkbox]:checked + .toggle-slider {
  background-color: var(--success)
}
.toggle-label input[type=checkbox]:checked + .toggle-slider:before {
  transform: translateX(24px)
}
.toggle-label span:first-child {
  display: block;
  min-width: 100px;
  position: relative;
  cursor: help
}
.toggle-label span:first-child:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: normal;
  width: 250px;
  z-index: 1000;
  border: 1px solid var(--border-primary);
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
  margin-bottom: 5px;
  line-height: 1.4
}
.toggle-label span:first-child:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border-primary);
  z-index: 1001;
  margin-bottom: -1px
}
.auto-buyer-toggle-compact .toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px!important;
  height: 20px!important
}
.auto-buyer-toggle-compact .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.auto-buyer-toggle-compact .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  transition: .3s;
  border-radius: 20px!important
}
.auto-buyer-toggle-compact .toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px!important;
  width: 14px!important;
  left: 2px!important;
  bottom: 2px!important;
  top: auto!important;
  transform: none!important;
  background-color: #ccc;
  transition: .3s;
  border-radius: 50%
}
.auto-buyer-toggle-compact .toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(77,166,255,.5)
}
.auto-buyer-toggle-compact .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px)!important;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(255,255,255,.8)
}
.auto-buyer-toggle-compact .toggle-switch:hover .toggle-slider {
  border-color: rgba(255,255,255,.4)
}
.settings-panel {
  max-width: 800px;
  margin: 0 auto;
  background-color: transparent; /* Inherit from parent */
}
.settings-title {
  color: var(--accent-primary);
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 2px
}
.settings-info {
  background-color: var(--bg-tertiary);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-primary)
}
.info-label {
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px
}
.info-value {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 16px
}
.settings-group {
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 25px
}
.settings-group-title {
  color: var(--accent-primary);
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-primary)
}
.settings-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 15px
}
.settings-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--border-primary) 100%);
  border: 2px solid var(--accent-primary);
  color: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px
}
/* Create Account button special styling */
.settings-button.create-account {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border-color: #22c55e;
}

.settings-button.create-account:hover {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(34, 197, 94, 0.4);
  border-color: #16a34a;
}

.settings-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(96,165,250,.3);
  background: linear-gradient(135deg,#4c70ba 0,var(--accent-secondary) 100%)
}
.settings-button.save {
  background: linear-gradient(135deg,#10b981 0,#059669 100%);
  border-color: #10b981
}
.settings-button.save:hover {
  background: linear-gradient(135deg,#34d399 0,#10b981 100%)
}
.settings-button.danger {
  background: linear-gradient(135deg,#ef4444 0,#dc2626 100%);
  border-color: #ef4444
}
.settings-button.danger:hover {
  background: linear-gradient(135deg,#f87171 0,#ef4444 100%)
}
.danger-zone {
  border: 2px solid #ff4444;
  background: rgba(255, 68, 68, 0.1);
  border-radius: 12px;
  padding: 20px;
}

/* Footer Styles */
.game-footer {
  background: linear-gradient(135deg, #1a1f3a, #0f1223);
  border-top: 2px solid var(--border-secondary);
  padding: 4px 8px; /* Reduced from 15px 20px - about 75% smaller */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px; /* Reduced from 30px */
}

.footer-section {
  display: flex;
  align-items: center;
  gap: 4px; /* Reduced from 15px */
}

.footer-section h4 {
  color: var(--accent-primary);
  margin: 0;
  margin-right: 4px; /* Reduced from 10px */
  font-size: 12px; /* Reduced from 14px */
}

.social-links {
  display: flex;
  gap: 4px; /* Reduced from 10px */
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* Reduced from 28px */
  height: 20px; /* Reduced from 28px */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
  color: var(--accent-primary);
  font-size: 12px; /* Smaller icon size */
}

.social-links a:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

.social-links a svg {
  width: 16px;
  height: 16px;
}

.footer-links {
  display: flex;
  gap: 15px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 13px;
}

.footer-links a:hover {
  color: var(--accent-primary);
}

.copyright {
  color: var(--text-secondary);
  margin: 0;
  font-size: 12px;
}

.version {
  color: var(--text-muted);
  font-size: 11px;
  opacity: 0.7;
  margin-left: 10px;
}

/* Footer responsive styles */
@media (max-width: 768px) {
  .game-footer {
    padding: 10px 15px;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .footer-section {
    justify-content: center;
  }
  
  .footer-section h4 {
    font-size: 12px;
  }
  
  .footer-links {
    font-size: 12px;
  }
  
  .copyright,
  .version {
    font-size: 10px;
  }
}

/* Cookie Notice Styles */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #2a2d4a, #1a1d3a);
  border-top: 3px solid var(--accent-primary);
  padding: 20px;
  z-index: 10000;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cookie-notice-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.cookie-notice-text {
  flex: 1;
  min-width: 300px;
}

.cookie-notice-text h3 {
  color: var(--accent-primary);
  margin-bottom: 10px;
  font-size: 20px;
}

.cookie-notice-text p {
  color: var(--text-secondary);
  line-height: 1.5;
}

.cookie-notice-text a {
  color: var(--accent-primary);
  text-decoration: underline;
}

.cookie-notice-actions {
  display: flex;
  gap: 15px;
}

.cookie-accept {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cookie-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.cookie-learn-more {
  background: transparent;
  color: var(--accent-primary);
  border: 2px solid var(--accent-primary);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cookie-learn-more:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

/* Daily Login System Styles */
.daily-login-button {
  position: fixed;
  top: 90px;
  right: 395px; /* Default position - will be updated dynamically via JS based on panel width */
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  border: 2px solid var(--border-secondary);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 100px;
}

.daily-login-button.hidden-after-claim {
  display: none;
}

.daily-login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-color: var(--accent-primary);
}

.daily-login-button.can-claim {
  animation: pulse-glow 2s infinite;
  border-color: #ffd700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), var(--bg-primary));
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

.daily-login-icon {
  position: relative;
  font-size: 28px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4444;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  /* Removed bouncing animation - keeping only the glow on the button */
}

.daily-login-text {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.streak-counter {
  font-size: 11px;
  color: var(--accent-primary);
  font-weight: bold;
}

/* Daily Login Modal */
.daily-login-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.daily-login-modal.show {
  opacity: 1;
}

.daily-login-content {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  border: 3px solid var(--border-secondary);
  border-radius: 20px;
  padding: 30px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.daily-login-modal.show .daily-login-content {
  transform: scale(1);
}

.daily-login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-secondary);
}

.daily-login-header h2 {
  color: var(--accent-primary);
  font-size: 28px;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.close-button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 32px;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: var(--accent-primary);
}

.daily-login-streak-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 25px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.streak-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  color: var(--accent-primary);
  font-size: 24px;
  font-weight: bold;
}

/* Reward Calendar Grid */
.reward-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.reward-day {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--border-secondary);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.reward-day:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.reward-day.current-day {
  border: 3px solid #ffd700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.15));
  animation: pulse-glow 2s infinite;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  position: relative;
  z-index: 10;
}

.reward-day.claimed {
  opacity: 0.6;
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.5);
}

.reward-day.locked {
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
}

.reward-day.grand-prize {
  border-color: #ff6b00;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 0, 0, 0.1));
}

.reward-day.grand-prize .day-number {
  color: #ffd700;
  font-weight: bold;
}

.day-number {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.reward-icon {
  font-size: 24px;
  margin: 5px 0;
}

.reward-description {
  font-size: 10px;
  color: var(--text-primary);
  line-height: 1.2;
}

.claimed-mark {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #4caf50;
  font-size: 20px;
  font-weight: bold;
}

.claim-now {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #000;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: bold;
  animation: pulse 1s infinite;
}

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

.daily-login-timer {
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.timer-label {
  color: var(--text-secondary);
  font-size: 14px;
  margin-right: 10px;
}

.timer-value {
  color: var(--accent-primary);
  font-size: 24px;
  font-weight: bold;
  font-family: monospace;
}

.claim-reward-button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.claim-reward-button:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(76, 175, 80, 0.4);
}

.claim-reward-button.disabled {
  background: linear-gradient(135deg, #666, #444);
  cursor: not-allowed;
  opacity: 0.7;
}

.daily-login-footnote {
  margin-top: 15px;
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid var(--border-secondary);
}

.daily-login-footnote small {
  color: var(--text-secondary);
  font-size: 11px;
  opacity: 0.8;
}

/* Reward Claim Animation */
.reward-claim-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  pointer-events: none;
}

.reward-burst {
  animation: burst-animation 3s ease-out forwards;
  text-align: center;
}

@keyframes burst-animation {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    transform: scale(1.5) rotate(10deg);
    opacity: 1;
  }
  40% {
    transform: scale(1.2) rotate(-5deg);
  }
  60% {
    transform: scale(1.3) rotate(5deg);
  }
  80% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(-100px) rotate(0deg);
    opacity: 0;
  }
}

.reward-icon-large {
  font-size: 72px;
  margin-bottom: 10px;
}

.reward-text {
  font-size: 24px;
  color: var(--accent-primary);
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  animation: sparkle-rotate 2s linear infinite;
}

@keyframes sparkle-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1.5); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .reward-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .daily-login-content {
    padding: 20px;
  }
  
  .reward-day {
    min-height: 80px;
  }
  
  .daily-login-button {
    right: 20px; /* On mobile, position it on the right edge */
    top: 80px; /* Move it up a bit on mobile */
  }
}

@media (max-width: 1200px) {
  .daily-login-button {
    right: 20px; /* When stats panel collapses, move button to right edge */
  }
}
.button-icon {
  font-size: 20px
}
.settings-select {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--border-primary);
  color: var(--accent-primary);
  border: 2px solid var(--border-secondary);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: .3s
}
.settings-select:hover {
  border-color: var(--accent-primary)
}

/* Settings option styling */
.settings-option {
  margin-bottom: 20px;
}

.settings-option > label {
  display: block;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Auto-Buyer unlock badge */
.unlock-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* Auto-Buyer Toggle Button */
.auto-buyer-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auto-buyer-toggle-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.auto-buyer-toggle-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
  box-shadow: 0 0 10px rgba(79, 209, 197, 0.3);
}

.auto-buyer-icon {
  font-size: 14px;
}

.auto-buyer-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Badge toggle container */
.badge-toggle-container {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background-color: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
}

.badge-toggle-container:hover {
  border-color: var(--border-secondary);
  background-color: var(--bg-secondary);
}

.badge-toggle-container:active {
  transform: translateY(1px);
}

.badge-toggle-container .toggle-switch {
  flex-shrink: 0;
  width: 60px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.badge-toggle-container .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.badge-toggle-container .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-primary);
  transition: 0.3s;
  border-radius: 30px;
  border: 2px solid var(--border-secondary);
}

.badge-toggle-container .toggle-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-primary);
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.badge-toggle-container input:checked + .toggle-slider {
  background-color: var(--success);
  border-color: var(--success);
}

.badge-toggle-container input:checked + .toggle-slider:before {
  transform: translateX(30px);
}

.toggle-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  flex: 1;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 20px
}
.theme-option {
  text-align: center;
  cursor: pointer;
  transition: .3s;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid transparent
}
.theme-option:hover {
  transform: translateY(-5px)
}
.theme-option.active {
  border-color: var(--accent-primary);
  background-color: rgba(96,165,250,.1)
}
.theme-preview {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 2px solid var(--border-primary)
}
.preview-header {
  height: 25%;
  background-color: var(--bg-secondary)
}
.preview-content {
  height: 75%;
  background-color: var(--bg-tertiary)
}
.theme-preview.dark-blue .preview-header {
  background-color: #1a1f3a
}
.theme-preview.dark-blue .preview-content {
  background-color: #0a0e27
}
.theme-preview.dark-purple .preview-header {
  background-color: #2d1b69
}
.theme-preview.dark-purple .preview-content {
  background-color: #1a0f3a
}
.theme-preview.midnight-green .preview-header {
  background-color: #0f3a3a
}
.theme-preview.midnight-green .preview-content {
  background-color: #051a1a
}
.theme-preview.crimson-dark .preview-header {
  background-color: #3a0f0f
}
.theme-preview.crimson-dark .preview-content {
  background-color: #1a0505
}
.theme-preview.theme-neon .preview-header {
  background-color: #1a1a1a;
  border-bottom: 2px solid #f0f
}
.theme-preview.theme-neon .preview-content {
  background-color: #0a0a0a
}
.theme-preview.retro .preview-header {
  background-color: #3d2817
}
.theme-preview.retro .preview-content {
  background-color: #2b1f17
}
.theme-preview.diner .preview-header {
  background: repeating-linear-gradient(45deg,#ffe4e1,#ffe4e1 5px,#fff 5px,#fff 10px)
}
.theme-preview.diner .preview-content {
  background-color: beige
}
.theme-preview.theme-matrix .preview-header {
  background-color: #0a0a0a;
  border-bottom: 1px solid #0f0
}
.theme-preview.theme-matrix .preview-content {
  background-color: #000
}

/* Premium Theme Previews */
.theme-preview.theme-vaporwave .preview-header {
  background: linear-gradient(135deg, #ff69b4, #da70d6);
  border-bottom: 1px solid #ff69b4
}
.theme-preview.theme-vaporwave .preview-content {
  background: linear-gradient(135deg, #2d1b4e, #1a0d2e)
}

.theme-preview.theme-synthwave .preview-header {
  background: linear-gradient(135deg, #ff006e, #00f5ff);
  border-bottom: 1px solid #00f5ff
}
.theme-preview.theme-synthwave .preview-content {
  background: linear-gradient(135deg, #1a0440, #0d0221)
}

.theme-preview.theme-steampunk .preview-header {
  background: linear-gradient(135deg, #cd7f32, #b8860b);
  border-bottom: 1px solid #cd7f32
}
.theme-preview.theme-steampunk .preview-content {
  background: linear-gradient(135deg, #3d2818, #2c1810)
}

/* Premium Badge Styling */
.premium-badge {
  background: linear-gradient(135deg, #ffd700, #ff6b35);
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 700;
  margin-left: 5px;
  text-shadow: none;
  animation: 2s ease-in-out infinite premium-glow;
}

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

.theme-option.premium-theme {
  position: relative;
}

.theme-option.premium-theme::before {
  content: '✨';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 16px;
  animation: 2s ease-in-out infinite premium-sparkle;
}

@keyframes premium-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
}

/* Locked theme styles */
.theme-option.locked {
  opacity: 0.7;
  cursor: pointer;
}

.theme-option.locked:hover {
  transform: translateY(-2px); /* Less hover effect for locked themes */
  opacity: 0.9;
}

.theme-preview {
  position: relative; /* Ensure the overlay positions correctly */
}

.locked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.locked-text {
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

/* Authentication Styles */
.menu-seeds-section {
  margin-top: auto;
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sesame-seeds-display {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #16a34a;
  background: rgba(255, 215, 0, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  gap: 4px;
}

.seeds-info-btn {
  /* Force tiny size */
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 14px;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  
  /* Hide any actual text content */
  font-size: 0;
  color: transparent;
  
  /* Style */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-left: 4px;
  padding: 0;
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box;
}

.seeds-info-btn::after {
  content: 'i';
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1;
  font-weight: normal;
}

.seeds-info-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--accent-primary);
  transform: scale(1.1);
}

.seeds-info-btn:hover::after {
  color: var(--accent-primary);
}

/* Consumables Quick Access */
.consumables-quick-access {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 0 8px;
}

.consumable-quick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: var(--text-primary);
}

.consumable-quick-btn:hover {
  background: rgba(102, 126, 234, 0.25);
  border-color: rgba(102, 126, 234, 0.5);
  transform: translateX(3px);
}

.consumable-quick-btn:active {
  transform: translateX(3px) scale(0.98);
}

.consumable-icon {
  font-size: 20px;
  margin-right: 8px;
}

.consumable-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.consumable-name {
  font-weight: bold;
  font-size: 11px;
  color: var(--text-primary);
}

.consumable-quantity {
  font-size: 10px;
  color: var(--text-secondary);
}

/* Seeds Info Popup */
.seeds-info-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  z-index: 10001;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: popupFadeIn 0.3s ease;
}

.seeds-info-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  animation: overlayFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

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

.seeds-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-primary);
}

.seeds-info-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.seeds-info-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.seeds-info-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--danger);
  transform: rotate(90deg);
}

.seeds-info-content {
  color: var(--text-primary);
  line-height: 1.6;
}

.seeds-info-section {
  margin-bottom: 16px;
}

.seeds-info-section h4 {
  color: var(--accent-primary);
  margin-bottom: 8px;
  font-size: 16px;
}

.seeds-info-section p {
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.seeds-info-section ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.seeds-info-section li {
  padding: 4px 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.seeds-info-section li::before {
  content: "•";
  color: var(--accent-primary);
  font-weight: bold;
}

.seeds-icon {
    margin-right: 5px;
    font-size: 18px;
}

.seeds-label {
    margin-left: 5px;
    font-size: 14px;
    opacity: 0.8;
}

/* Settings Auth Section */
.auth-settings-container {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.user-info-settings {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.user-info-settings .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #FFD700;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.username-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-name {
    font-size: 16px;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 2px;
}

.change-username-btn {
    background: transparent;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    opacity: 0.6;
}

.change-username-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

.user-email {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.auth-status {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
}

.status-text {
    color: rgba(255, 255, 255, 0.7);
}

.sync-status {
    margin-left: 10px;
    color: #4CAF50;
    font-size: 12px;
}

.settings-button.auth {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    width: auto;
    min-width: 150px;
}

.settings-button.auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Account Security Styles */
.security-options {
    padding: 10px 0;
}

.security-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.security-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 10px;
    min-width: 140px;
}

.security-value {
    font-size: 14px;
    font-weight: 500;
}

.settings-button.small {
    padding: 4px 12px;
    font-size: 12px;
    min-width: auto;
}

/* Passkey Styles */
.passkey-management {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.passkey-title {
    font-size: 18px;
    color: #FFD700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.passkey-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.settings-button.passkey-add {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-bottom: 20px;
    padding: 10px 20px;
    font-size: 14px;
}

.passkey-list {
    margin-bottom: 15px;
}

.passkey-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.passkey-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.passkey-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 215, 0, 0.3);
}

.passkey-icon {
    font-size: 24px;
    margin-right: 15px;
}

.passkey-details {
    flex: 1;
}

.passkey-device {
    font-size: 15px;
    font-weight: 600;
    color: #FFD700;
    margin-bottom: 5px;
}

.passkey-dates {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.passkey-dates span {
    white-space: nowrap;
}

.passkey-remove {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.passkey-remove:hover {
    opacity: 1;
    transform: scale(1.1);
}

.passkey-info {
    padding: 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 5px;
    border-left: 3px solid #667eea;
}

.passkey-info small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

/* Passkey Auth Button in Sign In Dialog */
.auth-button.passkey-auth {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.auth-button.passkey-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.auth-info {
    margin-top: 15px;
    padding: 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 5px;
    border-left: 3px solid #667eea;
}

.auth-info p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.cloud-save-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.cloud-save-button-row {
    display: flex;
    gap: 10px;
}

.settings-button.cloud-save, .settings-button.cloud-load {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    flex: 1;
}

.settings-button.cloud-save:hover, .settings-button.cloud-load:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

/* Settings Tabs Styles */
.settings-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0;
}

.settings-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.settings-tab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

.settings-tab .tab-icon {
    font-size: 18px;
}

.settings-tab-content {
    animation: fadeIn 0.3s ease;
}

.settings-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Backup Recovery Styles */
.backup-list {
    margin: 15px 0;
}

.backup-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.backup-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.backup-item:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.backup-date {
    font-weight: 600;
    color: #60a5fa;
    font-size: 14px;
    min-width: 140px;
}

.backup-stats {
    display: flex;
    gap: 15px;
    flex: 1;
    margin: 0 15px;
}

.backup-stat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.backup-restore-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 6px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.backup-restore-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

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

/* Burger Theme Styles */
.burger-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.premium-burger-divider {
    margin-top: 30px;
    margin-bottom: 15px;
    padding: 15px;
    /* Removed gradient background for cleaner look */
    border-top: 1px solid var(--border-primary);
    text-align: center;
}

.premium-burger-divider h4 {
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 5px;
}

.premium-burger-divider p {
    color: var(--text-secondary);
    font-size: 13px;
}

.burger-theme-option {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.burger-theme-option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.burger-theme-option.active {
    background: rgba(96, 165, 250, 0.2);
    border-color: #60a5fa;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

.burger-preview {
    font-size: 48px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.burger-theme-option span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.burger-theme-option.active span {
    color: #60a5fa;
}

/* Premium burger skin styles */
.burger-theme-option.premium {
    /* Removed gradient background for consistency */
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-primary);
    position: relative;
}

.burger-theme-option.premium.locked {
    opacity: 0.7;
}

.burger-theme-option.premium.locked:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--accent-primary);
}

.burger-theme-option.premium.unlocked {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--success);
}

.premium-price {
    font-size: 11px;
    font-weight: 600;
    margin-top: 5px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

/* Theme-specific fixes for visibility issues */

/* SYNTHWAVE Theme Fixes */
body.theme-synthwave .increment-btn {
  background: rgba(255, 0, 110, 0.4) !important;
  border: 2px solid #ff006e !important;
  color: #00f5ff !important;
}

body.theme-synthwave .increment-btn:hover {
  background: rgba(0, 245, 255, 0.3) !important;
  border-color: #00f5ff !important;
  color: #ffffff !important;
}

body.theme-synthwave .increment-btn.active {
  background: #ff006e !important;
  color: #ffffff !important;
  border-color: #00f5ff !important;
  box-shadow: 0 0 10px #00f5ff !important;
}

/* VAPORWAVE Theme Fixes */
body.theme-vaporwave .settings-select,
body.theme-vaporwave #settingsFormatSelect {
  background: rgba(255, 105, 180, 0.2) !important;
  border: 2px solid #ff69b4 !important;
  color: #ffffff !important;
}

body.theme-vaporwave .settings-select:hover,
body.theme-vaporwave #settingsFormatSelect:hover {
  background: rgba(255, 105, 180, 0.3) !important;
  border-color: #da70d6 !important;
}

body.theme-vaporwave .settings-select option,
body.theme-vaporwave #settingsFormatSelect option {
  background: #2d1b4e !important;
  color: #ffffff !important;
}

/* COSMIC Theme Fixes */
body.theme-cosmic .settings-select,
body.theme-cosmic #settingsFormatSelect {
  background: rgba(138, 43, 226, 0.2) !important;
  border: 2px solid #8a2be2 !important;
  color: #ffffff !important;
}

body.theme-cosmic .settings-select:hover,
body.theme-cosmic #settingsFormatSelect:hover {
  background: rgba(138, 43, 226, 0.3) !important;
  border-color: #9c27b0 !important;
}

body.theme-cosmic .settings-select option,
body.theme-cosmic #settingsFormatSelect option {
  background: #1a237e !important;
  color: #ffffff !important;
}

/* Catering Card Theme Support */
.catering-section {
  background: var(--bg-secondary) !important;
  border: 2px solid var(--border-primary) !important;
}

body.theme-synthwave .catering-section {
  background: linear-gradient(135deg, rgba(26, 4, 64, 0.95), rgba(13, 2, 33, 0.95)) !important;
  border: 2px solid #00f5ff !important;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.3), 0 0 40px rgba(0, 245, 255, 0.2) !important;
}

body.theme-vaporwave .catering-section {
  background: linear-gradient(135deg, rgba(45, 27, 78, 0.95), rgba(26, 13, 46, 0.95)) !important;
  border: 2px solid #ff69b4 !important;
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.3) !important;
}

body.theme-cosmic .catering-section {
  background: linear-gradient(135deg, rgba(26, 35, 126, 0.95), rgba(11, 20, 38, 0.95)) !important;
  border: 2px solid #8a2be2 !important;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.3) !important;
}

/* Catering button theme support */
body.theme-synthwave .catering-button:not(:disabled),
body.theme-synthwave .catering-unlock-button {
  background: linear-gradient(135deg, #ff006e, #00f5ff) !important;
  border: 2px solid #00f5ff !important;
}

body.theme-vaporwave .catering-button:not(:disabled),
body.theme-vaporwave .catering-unlock-button {
  background: linear-gradient(135deg, #ff69b4, #da70d6) !important;
  border: 2px solid #ff69b4 !important;
}

body.theme-cosmic .catering-button:not(:disabled),
body.theme-cosmic .catering-unlock-button {
  background: linear-gradient(135deg, #8a2be2, #9c27b0) !important;
  border: 2px solid #8a2be2 !important;
}

/* Catering title theme support */
body.theme-synthwave .catering-title {
  color: #00f5ff !important;
  text-shadow: 0 0 10px #00f5ff, 0 0 20px #ff006e !important;
}

body.theme-vaporwave .catering-title {
  color: #ff69b4 !important;
  text-shadow: 0 0 10px #ff69b4, 0 0 20px #da70d6 !important;
}

body.theme-cosmic .catering-title {
  color: #8a2be2 !important;
  text-shadow: 0 0 10px #8a2be2, 0 0 20px #9c27b0 !important;
}

/* Catering progress bar theme support */
body.theme-synthwave .catering-progress .progress-bar {
  background: linear-gradient(90deg, #ff006e 0%, #00f5ff 100%) !important;
}

body.theme-vaporwave .catering-progress .progress-bar {
  background: linear-gradient(90deg, #ff69b4 0%, #da70d6 100%) !important;
}

body.theme-cosmic .catering-progress .progress-bar {
  background: linear-gradient(90deg, #8a2be2 0%, #9c27b0 100%) !important;
}

/* Cloud Save Toggle - Unique Styling */
.cloud-save-toggle-wrapper {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.cloud-toggle-container {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Hide the actual checkbox */
.cloud-toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The toggle switch track */
.cloud-toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    background: #333;
    border-radius: 26px;
    transition: background 0.3s;
    margin-right: 12px;
    border: 2px solid #444;
}

/* The toggle switch slider */
.cloud-toggle-switch::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    top: 1px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* When checked */
.cloud-toggle-checkbox:checked + .cloud-toggle-switch {
    background: #60a5fa;
    border-color: #60a5fa;
}

.cloud-toggle-checkbox:checked + .cloud-toggle-switch::after {
    transform: translateX(24px);
}

/* Hover effects */
.cloud-toggle-container:hover .cloud-toggle-switch {
    border-color: #666;
}

.cloud-toggle-label {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    user-select: none;
}

.cloud-toggle-hint {
    display: block;
    margin-top: 10px;
    margin-left: 62px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Auth Dialog Styles */
.auth-dialog, .sync-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.auth-dialog-content, .sync-dialog-content {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 15px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.close-button:hover {
    opacity: 1;
}

.auth-dialog h2 {
    margin-bottom: 10px;
    color: white;
    text-align: center;
}

.auth-dialog p {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.google-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: white;
    color: #333;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.google-auth img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.google-auth:hover {
    background: #f8f8f8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


.auth-divider {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    margin: 20px 0;
    position: relative;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.auth-divider::before {
    left: 0;
}

.auth-divider::after {
    right: 0;
}

#email-auth-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 5px;
    font-size: 14px;
}

#email-auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.auth-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.auth-buttons button {
    flex: 1;
    padding: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.auth-note {
    margin-top: 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* Sync Dialog Styles */
.sync-warning {
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid #ff9800;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 15px 0;
    font-weight: 600;
    color: #ffb74d;
}

.save-comparison {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.save-info {
    flex: 1;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 2px solid transparent;
}

.save-info.current-save {
    border-color: #4CAF50;
}

.save-info.cloud-save {
    border-color: #667eea;
}

.save-info h4 {
    margin-bottom: 15px;
    color: #FFD700;
    font-size: 16px;
    text-align: center;
}

.save-stats p {
    margin: 8px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: space-between;
}

.save-stats p strong {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.save-time {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-align: center;
}

.sync-dialog-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.sync-dialog-buttons button {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.sync-dialog-buttons button span {
    font-size: 16px;
}

.sync-dialog-buttons button small {
    font-size: 11px;
    opacity: 0.8;
    font-weight: 400;
}

.load-cloud-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.load-cloud-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.keep-current-btn {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
}

.keep-current-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

/* Time Control Panel Styles */
.time-control-panel {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: calc(var(--right-panel-width, 280px) - 30px); /* Scale with right panel, minus margins */
  min-width: 250px;
  max-width: 570px; /* Match right panel max minus margins */
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 15px;
  transition: all 0.3s ease, width 0.1s ease-out;
  box-sizing: border-box;
  z-index: 1000;
}

.time-control-panel:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 15px rgba(96, 165, 250, 0.2);
}

.time-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-primary);
}

.time-control-title {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 14px;
}

.time-control-status {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 13px;
  background: rgba(96, 165, 250, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

.time-slider-container {
  margin-bottom: 10px;
}

.time-slider {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  outline: none;
  border: none;
  cursor: pointer;
  margin-bottom: 8px;
}

.time-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
  transition: all 0.2s ease;
}

.time-slider::-webkit-slider-thumb:hover {
  background: var(--accent-secondary);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(96, 165, 250, 0.5);
}

.time-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
  transition: all 0.2s ease;
}

.time-slider::-moz-range-thumb:hover {
  background: var(--accent-secondary);
  transform: scale(1.1);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.time-control-info {
  margin-top: 8px;
}

.time-control-info p {
  color: var(--text-secondary);
  font-size: 11px;
  margin: 0;
  text-align: center;
  line-height: 1.3;
}

/* Animation for when time control is active */
.time-control-panel.active {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, 
    var(--bg-secondary), 
    rgba(96, 165, 250, 0.05)
  );
}

.time-control-panel.active .time-control-status {
  animation: timeControlPulse 2s ease-in-out infinite;
}

@keyframes timeControlPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Turbo Sauce Countdown Display */
.turbo-sauce-display {
  background: rgba(var(--accent-primary-rgb), 0.05);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  text-align: center;
}

.turbo-sauce-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 2px;
  opacity: 0.7;
}

.turbo-sauce-countdown {
  color: var(--accent-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}

/* Low turbo sauce warning */
.turbo-sauce-display.low {
  background: rgba(220, 38, 127, 0.1);
  border-color: rgba(220, 38, 127, 0.3);
}

.turbo-sauce-display.low .turbo-sauce-countdown {
  color: #dc267f;
}

/* User font override - ensures user font selection takes priority over theme fonts */
body.user-font-override.font-inter * { 
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-roboto * { 
  font-family: 'Roboto', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-open-sans * { 
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-lato * { 
  font-family: 'Lato', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-poppins * { 
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-montserrat * { 
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-raleway * { 
  font-family: 'Raleway', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-ubuntu * { 
  font-family: 'Ubuntu', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-nunito * { 
  font-family: 'Nunito', system-ui, -apple-system, sans-serif !important; 
}
body.user-font-override.font-jetbrains-mono * { 
  font-family: 'JetBrains Mono', 'Courier New', monospace !important; 
}
body.user-font-override.font-fira-code * { 
  font-family: 'Fira Code', 'Courier New', monospace !important; 
}

.theme-preview.theme-cyberpunk .preview-header {
  background: linear-gradient(135deg, #ff0080, #00ffff);
  border-bottom: 1px solid #ff0080;
  position: relative;
}

.theme-preview.theme-cyberpunk .preview-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 255, 0.1) 3px);
}

.theme-preview.theme-cyberpunk .preview-content {
  background: linear-gradient(135deg, #1a0a1a, #0a0a0a);
  position: relative;
}

.theme-preview.theme-cyberpunk .preview-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.6), transparent);
  animation: cyberpunk-preview-scan 2s linear infinite;
}

@keyframes cyberpunk-preview-scan {
  0% { transform: translateY(0px); }
  100% { transform: translateY(30px); }
}

.theme-preview.theme-cosmic .preview-header {
  background: linear-gradient(135deg, #8a2be2, #9c27b0);
  border-bottom: 1px solid #8a2be2;
  position: relative;
}

.theme-preview.theme-cosmic .preview-header::after {
  content: '✦';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: rgba(240, 248, 255, 0.6);
  animation: cosmic-preview-twinkle 3s ease-in-out infinite;
}

@keyframes cosmic-preview-twinkle {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

.theme-preview.theme-cosmic .preview-content {
  background: linear-gradient(135deg, #1a237e, #0b1426);
  position: relative;
}

.theme-preview.theme-cosmic .preview-content::before {
  content: '✧';
  position: absolute;
  top: 5px;
  left: 5px;
  color: rgba(179, 157, 219, 0.4);
  animation: cosmic-preview-float 4s ease-in-out infinite;
}

@keyframes cosmic-preview-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

.theme-preview.theme-arctic .preview-header {
  background: 
    rgba(255, 255, 255, 0.12),
    linear-gradient(135deg, #00d4ff, #00ff88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #00d4ff;
  position: relative;
}

.theme-preview.theme-arctic .preview-header::after {
  content: '❄️';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: rgba(0, 212, 255, 0.8);
  animation: arctic-preview-sparkle 4s ease-in-out infinite;
}

@keyframes arctic-preview-sparkle {
  0%, 100% { 
    opacity: 0.6; 
    transform: translateY(-50%) scale(1) rotate(0deg);
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  }
  50% { 
    opacity: 1; 
    transform: translateY(-50%) scale(1.1) rotate(15deg);
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 255, 136, 0.4);
  }
}

.theme-preview.theme-arctic .preview-content {
  background: 
    rgba(255, 255, 255, 0.08),
    linear-gradient(135deg, #0a1929, #010b1a);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}

.theme-preview.theme-arctic .preview-content::before {
  content: '❅';
  position: absolute;
  top: 5px;
  left: 5px;
  color: rgba(160, 210, 255, 0.6);
  animation: arctic-preview-drift 6s ease-in-out infinite;
}

@keyframes arctic-preview-drift {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.4;
  }
  33% { 
    transform: translateY(-2px) translateX(1px) rotate(120deg);
    opacity: 0.7;
  }
  66% { 
    transform: translateY(-1px) translateX(-1px) rotate(240deg);
    opacity: 0.5;
  }
}

.theme-preview.light .preview-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6
}
.theme-preview.light .preview-content {
  background-color: #fff
}
.theme-preview.dark .preview-header {
  background-color: #1e1e1e
}
.theme-preview.dark .preview-content {
  background-color: #121212
}
.position-selector {
  display: flex;
  gap: 10px;
  margin-top: 10px
}
.position-button {
  flex: 1;
  padding: 12px 20px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  transition: .3s;
  font-weight: 700
}
.position-button:hover {
  background: var(--border-primary)
}
.position-button.active {
  background: var(--accent-secondary);
  border-color: var(--accent-primary)
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 2000
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: var(--bg-secondary);
  padding: 30px;
  border-radius: 10px;
  border: 2px solid var(--accent-primary);
  width: 90%;
  max-width: 600px
}
.modal-content h3 {
  color: var(--accent-primary);
  margin-bottom: 20px
}
.save-textarea {
  width: 100%;
  height: 300px;
  background-color: var(--bg-tertiary);
  color: var(--accent-primary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
  font-family: monospace;
  font-size: 14px;
  resize: none;
  margin: 20px 0
}
.modal-buttons {
  display: flex;
  gap: 15px;
  justify-content: center
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all .3s;
  padding: 0;
  font-weight: normal;
}
.modal-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

/* Seed Pack Modal Styles */
.seed-pack-modal .seed-pack-content {
  max-width: 500px;
  width: 90%;
}

.seed-pack-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
}

.pack-description {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.pack-seeds {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.pack-price-per {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.quantity-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.quantity-selector label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quantity-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  background: var(--panel-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.quantity-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--primary-color);
  transform: scale(1.05);
}

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

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

.quantity-input {
  width: 80px;
  height: 44px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background: var(--panel-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 0;
}

.quantity-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.quantity-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.purchase-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 2px solid var(--border-color);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: var(--text-secondary);
}

.summary-row.total {
  padding-top: 12px;
  border-top: 2px solid var(--border-color);
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
}

.total-value {
  color: var(--primary-color);
  font-weight: bold;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  text-align: center;
}

.payment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.payment-icon {
  width: 24px;
  height: 24px;
}

.stripe-btn {
  background: #635BFF;
  color: white;
}

.stripe-btn:hover {
  background: #5851E8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.4);
}

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

.paypal-btn-container {
  min-height: 55px;
}

.paypal-btn {
  background: #0070BA;
  color: white;
}

.paypal-btn:hover:not(:disabled) {
  background: #005EA6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 112, 186, 0.4);
}

.paypal-btn:active:not(:disabled) {
  transform: translateY(0);
}

.paypal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.seed-pack-modal .modal-footer {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.cancel-btn {
  padding: 12px 32px;
  font-size: 16px;
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Stripe Payment Modal Styles (Embedded Flow) */
.stripe-payment-modal .stripe-payment-content {
  max-width: 500px;
  width: 90%;
}

.payment-summary-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 16px;
  color: var(--text-secondary);
}

.summary-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-item.total {
  padding-top: 16px;
  margin-top: 8px;
  border-top: 2px solid var(--border-color);
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
}

.summary-label {
  color: var(--text-secondary);
}

.summary-value {
  color: var(--text-primary);
  font-weight: 600;
}

.summary-item.total .summary-value {
  color: var(--primary-color);
}

#stripe-payment-element {
  margin: 24px 0;
  min-height: 200px;
}

.payment-message {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.payment-message.error {
  background: rgba(255, 85, 85, 0.1);
  color: #ff5555;
  border: 1px solid rgba(255, 85, 85, 0.3);
}

.payment-message.success {
  background: rgba(80, 250, 123, 0.1);
  color: #50fa7b;
  border: 1px solid rgba(80, 250, 123, 0.3);
}

.payment-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.payment-btn.primary {
  flex: 1;
  padding: 16px 24px;
  background: #635BFF;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.payment-btn.primary:hover:not(:disabled) {
  background: #5851E8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.4);
}

.payment-btn.primary:active:not(:disabled) {
  transform: translateY(0);
}

.payment-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.payment-btn.secondary {
  flex: 0.5;
  padding: 16px 24px;
  background: transparent;
  color: var(--text-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.payment-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Modal Responsive Styles for Mobile */
@media (max-width: 768px) {
  .modal-content {
    width: 95% !important;
    max-width: none !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 20px !important;
    margin: 20px auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Make modal scrollable with better touch scrolling */
  .modal-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  
  /* Fix modal close button for touch */
  .modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 5px !important;
    right: 5px !important;
    font-size: 24px !important;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 2px solid var(--border-primary);
  }
  
  /* Ensure modal header close buttons are touch-friendly */
  .modal-header .modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  /* Fix prestige modal responsiveness */
  .prestige-modal {
    width: 95% !important;
    max-width: none !important;
    max-height: 85vh !important;
    margin: 10px !important;
    padding: 20px !important;
  }
  
  .prestige-modal-content {
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix auth modal */
  .auth-modal,
  .auth-modal-content {
    width: 95% !important;
    max-width: none !important;
    padding: 20px !important;
  }
  
  /* Fix shop modal */
  .shop-modal,
  .shop-modal-content {
    width: 95% !important;
    max-width: none !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
  
  /* Fix save/load modal textareas */
  .save-textarea {
    height: 200px !important;
    font-size: 12px !important;
  }
  
  /* Modal buttons should be touch-friendly */
  .modal-buttons button,
  .modal-btn,
  .prestige-modal-btn {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  
  /* Stack modal buttons vertically on very small screens */
  @media (max-width: 480px) {
    .modal-buttons {
      flex-direction: column;
      width: 100%;
    }
    
    .modal-buttons button {
      width: 100%;
    }
    
    .prestige-modal-actions {
      flex-direction: column;
      gap: 10px;
    }
    
    .prestige-modal-btn {
      width: 100%;
    }
  }
  
  /* Ensure modal overlays cover entire viewport */
  .modal,
  .prestige-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Fix any modal that uses fixed width */
  [class*="modal"] {
    max-width: 95vw !important;
  }
  
  /* Fix modal content that might overflow */
  [class*="modal-content"],
  [class*="modal-body"] {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Specific modal fixes */
  .investment-modal,
  .research-shop-modal,
  .privacy-modal {
    width: 95% !important;
    max-width: none !important;
    padding: 15px !important;
  }
  
  /* Fix modal headers on mobile */
  .modal-header {
    padding: 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .modal-header h2 {
    font-size: 18px !important;
    margin: 0 !important;
  }
  
  /* Ensure modals don't get cut off by header */
  .modal {
    padding-top: 60px !important;
  }
  
  /* Fix z-index issues with mobile nav */
  .modal {
    z-index: 20000 !important;
  }
  
  .modal-content {
    z-index: 20001 !important;
  }
}
.notification {
  position: absolute;
  top: 50%;
  background-color: var(--accent-secondary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  opacity: 0;
  transition: .3s;
  z-index: 1100;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  min-width: 200px;
  text-align: center;
  pointer-events: none
}
.notification.left {
  left: -220px;
  right: auto;
  transform: translateY(-50%)
}
.notification.left.show {
  left: 20px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%)
}
.notification.right {
  right: -220px;
  left: auto;
  transform: translateY(-50%)
}
.notification.right.show {
  right: 20px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%)
}
.notification.show {
  opacity: 1;
  transform: translateY(0)
}
@media (max-width:1200px) {
  .notification {
    top: auto;
    bottom: 10px;
    transform: translateY(0)
  }
}
.notification.success {
  background-color: var(--success)
}
.notification.error {
  background-color: var(--danger)
}
.notification.warning {
  background-color: var(--warning)
}
.notification-bell-container {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 1000
}
.notification-bell {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s;
  position: relative;
  color: var(--text)
}
.notification-bell:hover {
  background: var(--background);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.2)
}
.notification-bell.has-unread {
  animation: 0.5s ease-in-out bell-ring
}
@keyframes bell-ring {
  0%,
  100% {
    transform: rotate(0)
  }
  25% {
    transform: rotate(-10deg)
  }
  75% {
    transform: rotate(10deg)
  }
}
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--background)
}
.notification-dropdown {
  position: fixed;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  width: 320px;
  max-height: 400px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 999;
  display: flex;
  flex-direction: column;
  opacity: 1;
  backdrop-filter: none;
  background: #1a1a2e
}
.notification-dropdown-header {
  padding: 15px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center
}
.notification-dropdown-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px
}
.notification-dropdown.left-positioned {
  left: 20px!important;
  right: auto!important
}
.notification-dropdown.right-positioned {
  right: 20px!important;
  left: auto!important
}
.notification-clear-btn {
  background: 0 0;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .2s
}
.notification-clear-btn:hover {
  background: var(--background)
}
.notification-dropdown-content {
  flex: 1;
  overflow-y: auto;
  max-height: 280px
}
.notification-dropdown-content::-webkit-scrollbar {
  width: 8px
}
.notification-dropdown-content::-webkit-scrollbar-track {
  background: var(--background);
  border-radius: 4px
}
.notification-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px
}
.notification-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary)
}
.notification-item {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: start;
  transition: background .2s
}
.notification-item:hover {
  background: var(--background)
}
.notification-item:last-child {
  border-bottom: none
}
.notification-content {
  flex: 1;
  margin-right: 10px
}
.notification-message {
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px
}
.notification-time {
  color: var(--text-secondary);
  font-size: 12px
}
.notification-remove {
  background: 0 0;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: .2s
}
.notification-remove:hover {
  background: var(--danger);
  color: #fff
}
.notification-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic
}
.notification-dropdown-footer {
  padding: 10px 15px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px
}
.notification-item.success .notification-message {
  color: var(--success)
}
.notification-item.error .notification-message {
  color: var(--danger)
}
.notification-item.warning .notification-message {
  color: var(--warning)
}
@media (max-width:768px) {
  .toggle-label span:first-child:hover::after {
    left: 0;
    transform: none
  }
  .toggle-label span:first-child:hover::before {
    left: 20px;
    transform: none
  }
  .notification-bell-container {
    top: 10px;
    right: 10px
  }
  .notification-bell {
    width: 40px;
    height: 40px
  }
  .notification-dropdown {
    width: 280px;
    right: 10px!important
  }
}
.notification-bell-container {
  transition: transform .3s ease-out
}
.notification-bell-container.slid-away {
  transform: translateY(80px)
}
.notification-bell-container[style*=right].slid-away {
  transform: translate(-60px,60px)
}
.notification-bell-container[style*=left].slid-away {
  transform: translate(60px,60px)
}
.coming-soon {
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-secondary);
  padding: 100px;
  opacity: .5
}
.dev-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #e74c3c;
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  font-weight: 700;
  z-index: 1002;
  box-shadow: 0 4px 15px rgba(0,0,0,.3)
}
.reset-button {
  position: fixed;
  bottom: 20px;
  right: 90px;
  background-color: #f39c12;
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  font-size: 24px;
  z-index: 1002;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  transition: .3s
}
.reset-button:hover {
  background-color: #e67e22;
  transform: rotate(180deg)
}
.dev-console {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background-color: var(--bg-secondary);
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #e74c3c;
  display: none;
  width: 320px;
  z-index: 1001;
  box-shadow: 0 4px 20px rgba(0,0,0,.5)
}
.dev-console.active {
  display: block
}
.dev-console h3 {
  color: #e74c3c;
  margin-bottom: 15px
}
.dev-button {
  background-color: #e74c3c;
  border: none;
  padding: 10px 16px;
  margin: 5px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  border-radius: 5px
}
.dev-button:hover {
  background-color: #c0392b
}
.dev-button.save {
  background-color: #10b981
}
.dev-button.save:hover {
  background-color: #059669
}
.dev-button.load {
  background-color: #3b82f6
}
.dev-button.load:hover {
  background-color: #2563eb
}
.autosave-indicator {
  position: fixed;
  top: 100px;
  left: 20px;
  background-color: var(--success);
  color: var(--bg-primary);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .3s;
  z-index: 1003;
  pointer-events: none
}
.autosave-indicator.show {
  opacity: 1
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.auto-buyer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px
}
.toggle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px
}
.toggle-label {
  color: #95a5a6;
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap
}
.unified-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 15px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto
}
.unified-grid.compact {
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 12px
}
.unified-grid.wide {
  grid-template-columns: repeat(auto-fill,minmax(400px,1fr))
}
.uni-card {
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 15px;
  transition: .3s;
  position: relative;
  overflow: hidden
}
.uni-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 5px 15px rgba(0,0,0,.3)
}
.uni-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10px
}
.uni-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  margin: 0
}
.uni-card-count {
  font-size: 20px;
  font-weight: 700;
  color: var(--warning)
}
.uni-card-body {
  margin-bottom: 12px
}
.uni-card-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 14px
}
.uni-card-stat-label {
  color: var(--text-secondary)
}
.uni-card-stat-value {
  color: var(--text-primary);
  font-weight: 700
}
.uni-card-footer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap
}
.uni-card-footer button {
  flex: 1;
  min-width: 80px
}
.uni-card-button {
  flex: 1;
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  border: none;
  padding: 10px 16px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  transition: .3s;
  font-size: 14px
}
.uni-card-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(96,165,250,.3)
}
.uni-card-button:disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6;
  transform: none
}
.uni-card-button.secondary {
  background: linear-gradient(135deg,var(--border-primary) 0,var(--border-secondary) 100%)
}
.uni-card-button.secondary[data-upgrade-btn] {
  background: linear-gradient(135deg,var(--purple) 0,#8b5cf6 100%)
}
.uni-card-button.secondary[data-upgrade-btn]:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(167,139,250,.4)
}
.uni-card-button.secondary[data-upgrade-btn]:disabled {
  background: var(--border-primary)
}
.uni-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 10px rgba(74,222,128,.2)
}
.uni-card.owned {
  border-color: var(--accent-secondary)
}
.uni-card.maxed {
  opacity: .7
}
.uni-card.highlight {
  animation: 2s ease-in-out infinite pulse-glow
}
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(96,165,250,.3)
  }
  50% {
    box-shadow: 0 0 20px rgba(96,165,250,.6)
  }
}
.uni-card.compact-owned {
  padding: 10px
}
.uni-card.compact-owned .uni-card-body {
  display: none
}
.uni-level {
  display: inline-block;
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px
}
.uni-progress {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  margin: 8px 0;
  overflow: hidden
}
.uni-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  transition: width .3s
}
.uni-card-footer button[style*=inline-block] {
  display: flex!important;
  align-items: center;
  justify-content: center
}
.section-header-unified {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-primary);
  margin: -20px -20px 20px
}
.section-title {
  color: var(--accent-primary);
  margin: 0
}
.section-actions {
  display: flex;
  gap: 10px
}
.bulk-action-button {
  background: linear-gradient(135deg,var(--success) 0,#22c55e 100%);
  border: none;
  padding: 6px 16px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  transition: .3s
}
.bulk-action-button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(74,222,128,.3)
}
.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap
}
.filter-button {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  padding: 8px 16px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: .3s;
  font-weight: 700
}
.filter-button:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary)
}
.filter-button.active {
  background: var(--accent-secondary);
  color: #fff;
  border-color: var(--accent-primary)
}
.achievement-popup {
  position: fixed;
  bottom: 20px;
  right: -280px;
  width: 260px;
  max-width: 90vw;
  background: linear-gradient(135deg,#2a2a3e 0,#1a1a2e 100%);
  border: 2px solid gold;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(255,215,0,.3);
  transition: right .5s ease-out;
  z-index: 10000
}
.achievement-popup.show {
  right: 20px
}
.achievement-content {
  display: flex;
  align-items: center;
  gap: 10px
}
.achievement-icon {
  font-size: 32px;
}
.achievement-title {
  color: gold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px
}
.achievement-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin: 2px 0
}
.achievement-description {
  color: #aaa;
  font-size: 11px
}

/* Responsive scaling for achievement popups */
@media (max-width: 768px) {
  .achievement-popup {
    width: 280px;
    padding: 12px;
    bottom: 15px;
    right: -300px;
  }

  .achievement-popup.show {
    right: 15px;
  }

  .achievement-content {
    gap: 10px;
  }

  .achievement-icon {
    font-size: 32px;
  }

  .achievement-title {
    font-size: 11px;
  }

  .achievement-name {
    font-size: 14px;
    margin: 2px 0;
  }

  .achievement-description {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .achievement-popup {
    width: 260px;
    padding: 10px;
    right: -280px;
  }

  .achievement-popup.show {
    right: 10px;
  }

  .achievement-content {
    gap: 8px;
  }

  .achievement-icon {
    font-size: 28px;
  }

  .achievement-title {
    font-size: 10px;
  }

  .achievement-name {
    font-size: 13px;
    margin: 1px 0;
  }

  .achievement-description {
    font-size: 10px;
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.2)
  }
}
.unlock-cards-container {
  position: relative;
  margin-bottom: 20px;
  min-height: 0
}
.unlock-card {
  border: 2px solid rgba(96,165,250,.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  transition: .3s;
  overflow: hidden
}
.unlock-card:hover:not(.animating) {
  border-color: rgba(96,165,250,.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(96,165,250,.2)
}
.unlock-card.animating {
  transition: .3s
}
.unlock-card-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-primary);
  position: relative
}
.unlock-card-header h4 {
  color: var(--accent-primary);
  font-size: 16px;
  margin: 0;
  font-weight: 700;
  letter-spacing: .5px
}
.unlock-card-items {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.unlock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  transition: background .2s;
  border: 1px solid rgba(42,63,95,.3)
}
.unlock-item.affordable {
  border-color: rgba(74,222,128,.2)
}
.unlock-item.unaffordable {
  opacity: .6
}
.unlock-item-info {
  flex: 1;
  margin-right: 15px
}
.unlock-item-name {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px
}
.unlock-item-desc {
  color: var(--text-secondary);
  font-size: 12px
}
.unlock-item-button {
  background: linear-gradient(135deg,#3b5998 0,#2a3f5f 100%);
  color: #fff;
  border: 1px solid rgba(96,165,250,.3);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s,transform .1s,border-color .2s;
  font-size: 13px;
  white-space: nowrap;
  position: relative;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  pointer-events: auto;
  /* Mac Safari specific fixes */
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  min-height: 32px;
  min-width: 60px;
}
.unlock-item-button:hover:not(:disabled) {
  background: linear-gradient(135deg,#4c70ba 0,#3b5998 100%);
  border-color: rgba(96,165,250,.5)
}
.unlock-item-button:active:not(:disabled) {
  transform: scale(.98)
}
.unlock-item-button:disabled {
  background: linear-gradient(135deg,#374151 0,#1f2937 100%);
  border-color: rgba(55,65,81,.5);
  color: var(--text-secondary);
  cursor: not-allowed
}

/* Mac-specific button fixes */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
  .unlock-item-button,
  .unlock-button,
  .hire-button,
  .purchase-button {
    /* Force hardware acceleration on Mac */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Improve click detection */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure proper layering */
    will-change: transform, background;
  }

  .unlock-item-button:active {
    /* More visible feedback on Mac */
    transform: scale(0.95) translateZ(0);
    -webkit-transform: scale(0.95) translateZ(0);
  }
}
.unlock-card-link {
  margin-top: 12px;
  text-align: center;
  color: var(--accent-primary);
  font-size: 13px;
  cursor: pointer;
  transition: color .2s;
  padding: 5px
}
.unlock-card-link:hover {
  color: var(--text-primary);
  text-decoration: underline
}
.unlock-item-button.success {
  background: linear-gradient(135deg,#4ade80 0,#22c55e 100%)!important;
  border-color: #4ade80!important;
  animation: 0.4s ease-out successPulse;
  color: #fff!important;
  font-weight: 700;
  font-size: 14px!important
}
@keyframes successPulse {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.08)
  }
}
.success-message {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg,#4ade80 0,#22c55e 100%);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  animation: 1.5s ease-out fadeInOut
}
@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(10px)
  }
  20%,
  80% {
    opacity: 1;
    transform: translateY(-50%) translateX(0)
  }
}
@keyframes rippleEffect {
  0% {
    width: 20px;
    height: 20px;
    opacity: .6
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0
  }
}
.unlock-item-desc,
.unlock-item-name {
  transition: opacity .15s
}
.unlock-item.updating .unlock-item-desc,
.unlock-item.updating .unlock-item-name {
  opacity: 0
}
.special-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,215,0,.2)
}
.card-close {
  background: 0 0;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: .2s
}
.card-close:hover {
  background: rgba(255,255,255,.1);
  color: #fff
}
.special-card-button:hover {
  box-shadow: 0 4px 12px rgba(255,215,0,.4)
}
.special-card-button:active {
  transform: translateY(0)
}
@keyframes unlockGlow {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(255,215,0,.3)
  }
  50% {
    box-shadow: 0 4px 30px rgba(255,215,0,.6)
  }
}
.special-card {
  box-shadow: 0 4px 20px rgba(255,215,0,.3);
  border: 2px solid #4ade80
}
.special-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px
}
.special-card-header h4 {
  color: #4ade80;
  font-size: 18px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px
}
.special-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px
}
.special-card-content p {
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.5;
  margin: 0
}
.special-card-button {
  width: 100%;
  background: linear-gradient(135deg,#4ade80 0,#22c55e 100%);
  color: #0f172a;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(74,222,128,.3)
}
.special-card-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74,222,128,.4);
  background: linear-gradient(135deg,#5ce88f 0,#2dd36f 100%)
}
.special-card-button:disabled {
  background: #374151;
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none
}
@keyframes specialCardGlow {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(74,222,128,.3)
  }
  50% {
    box-shadow: 0 4px 30px rgba(74,222,128,.5)
  }
}
@keyframes unlockGlow {
  0% {
    box-shadow: 0 0 40px rgba(74,222,128,.8);
    transform: scale(1.05)
  }
  100% {
    box-shadow: 0 4px 20px rgba(74,222,128,.3);
    transform: scale(1)
  }
}
.presence-unlock-banner {
  background: linear-gradient(135deg,#2a2a2a,#1a1a1a);
  border: 2px solid #4ade80
}
.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.banner-main {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1
}
.banner-title {
  font-size: 18px;
  font-weight: 600;
  color: #4ade80
}
.banner-unlock-btn {
  background: linear-gradient(45deg,#4ade80,#22c55e);
  border: none;
  color: #000;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s
}
.banner-unlock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74,222,128,.4)
}
.info-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #666;
  background: 0 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s
}
.info-btn:hover {
  border-color: #4ade80;
  background: rgba(74,222,128,.1)
}
.info-modal {
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center
}
.info-modal-content {
  background: #1a1a1a;
  border: 2px solid #4ade80
}
.info-modal-close {
  color: #fff
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
#rd-auto-flipper .auto-flipper-panel {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px
}
#rd-auto-flipper .auto-flipper-header {
  text-align: center;
  margin-bottom: 30px
}
#rd-auto-flipper .auto-flipper-header h3 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--primary);
  text-shadow: 0 0 20px rgba(77,166,255,.5)
}
#rd-auto-flipper .auto-flipper-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto
}
#rd-auto-flipper .auto-flipper-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 15px;
  margin-bottom: 30px
}
#rd-auto-flipper .stat-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: .3s
}
#rd-auto-flipper .stat-box:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0,0,0,.3)
}
#rd-auto-flipper .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px
}
#rd-auto-flipper .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(77,166,255,.3)
}
#rd-auto-flipper .auto-flipper-upgrade {
  margin-bottom: 30px
}
#rd-auto-flipper .auto-flipper-upgrade-btn {
  width: 100%;
  background: linear-gradient(135deg,#1e3c72 0,#2a5298 100%);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: .3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden
}
#rd-auto-flipper .auto-flipper-upgrade-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition: left .5s
}
#rd-auto-flipper .auto-flipper-upgrade-btn:hover:not(:disabled)::before {
  left: 100%
}
#rd-auto-flipper .auto-flipper-upgrade-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(77,166,255,.4);
  border-color: #5dade2
}
#rd-auto-flipper .auto-flipper-upgrade-btn:disabled {
  opacity: .5;
  cursor: not-allowed
}
#rd-auto-flipper .auto-flipper-upgrade-btn.affordable {
  border-color: #4ade80;
  box-shadow: 0 0 20px rgba(74,222,128,.3);
  animation: 2s infinite pulse
}
#rd-auto-flipper .auto-flipper-upgrade-btn.maxed {
  background: linear-gradient(135deg,gold 0,orange 100%);
  border-color: gold
}
#rd-auto-flipper .upgrade-info {
  text-align: left
}
#rd-auto-flipper .upgrade-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #fff
}
#rd-auto-flipper .upgrade-effect {
  font-size: 14px;
  color: #4ade80
}
#rd-auto-flipper .upgrade-cost {
  font-size: 20px;
  font-weight: 700;
  color: gold;
  text-shadow: 0 0 10px rgba(255,215,0,.5)
}
#rd-auto-flipper .auto-flipper-milestones {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 20px
}
#rd-auto-flipper .auto-flipper-milestones h4 {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--primary);
  text-align: center
}
#rd-auto-flipper .milestone-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}
#rd-auto-flipper .milestone-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .3s
}
#rd-auto-flipper .milestone-item:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2)
}
#rd-auto-flipper .milestone-level {
  font-weight: 700;
  color: var(--primary)
}
#rd-auto-flipper .milestone-reward {
  font-size: 14px;
  color: var(--text-secondary)
}
.stat-divider {
  text-align: center;
  color: #666;
  margin: 10px 0;
  font-size: 12px
}
.net-stat {
  background: rgba(255,255,255,.05);
  padding: 8px;
  margin: 5px -10px;
  border-radius: 4px
}
.stat-value.negative {
  color: #ff6b6b
}
::-webkit-scrollbar {
  width: 10px
}
::-webkit-scrollbar-track {
  background: var(--bg-tertiary)
}
::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 5px
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary)
}
.grill-card-content::-webkit-scrollbar {
  width: 6px
}
.grill-card-content::-webkit-scrollbar-track {
  background: var(--bg-tertiary)
}
.grill-card-content::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 3px
}
.grill-card-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary)
}
@media (max-width:1400px) {
  .home-dashboard {
    grid-template-columns: 320px 1fr 280px
  }
}
@media (max-width:1200px) {
  .home-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto
  }
  .action-center,
  .live-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 15px
  }
  .notification {
    top: auto;
    bottom: 10px;
    transform: translateY(0)
  }
  .csp-stats-grid {
    grid-template-columns: 1fr;
    gap: 10px
  }
  .level-nodes {
    padding: 0 10px
  }
  .level-node {
    width: 32px;
    height: 32px;
    font-size: 12px
  }
  .unified-grid {
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr))
  }
  .grill-station-grid {
    grid-template-columns: 1fr;
    height: auto
  }
  .grill-card {
    min-height: 400px;
    max-height: 500px
  }
}
@media (max-width:768px) {
  .grill-station-grid {
    grid-template-columns: 1fr
  }
  .unified-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px
  }
  .section-header-unified {
    flex-direction: column;
    gap: 10px;
    text-align: center
  }
  .csp-items-grid {
    grid-template-columns: 1fr
  }
  .premium-shop-title {
    font-size: 24px
  }
  .balance-amount {
    font-size: 20px
  }
  .special-toggle-row {
    flex-direction: column;
    align-items: flex-start
  }
  .toggle-switch {
    margin-top: 15px
  }
  .specials-toggles {
    flex-direction: column
  }
  .special-toggle {
    width: 100%
  }
  /* Single column for right specials on mobile */
  #specialsTogglesRight {
    grid-template-columns: 1fr;
  }
  .industries-stats {
    flex-direction: column;
    gap: 15px
  }
  .stat-box {
    width: 100%;
    text-align: center
  }
  .facility-stats {
    grid-template-columns: 1fr
  }
  .experiment-buttons {
    flex-direction: column
  }
  .experiment-button {
    width: 100%
  }
  .recruiters-list {
    grid-template-columns: 1fr
  }
  .unlock-card {
    padding: 12px
  }
  .unlock-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px
  }
  .unlock-item-info {
    margin-right: 0
  }
  .unlock-item-button {
    width: 100%
  }
  .notification-bell-container {
    top: 10px;
    right: 10px
  }
  .notification-bell {
    width: 40px;
    height: 40px
  }
  .notification-dropdown {
    width: 280px;
    right: 10px!important
  }
  .toggle-label span:first-child:hover::after {
    left: 0;
    transform: none
  }
  .toggle-label span:first-child:hover::before {
    left: 20px;
    transform: none
  }
}
@media (max-width:1400px) {
  .meat-option {
    padding: 15px 10px
  }
  .meat-amount {
    font-size: 18px
  }
  .meat-price {
    font-size: 14px
  }
}
body.light .notification-dropdown {
  box-shadow: 0 4px 16px rgba(0,0,0,.1)
}
body.theme-neon .notification-bell.has-unread {
  box-shadow: 0 0 20px rgba(255,0,255,.5)
}
body.theme-matrix .notification-badge {
  background: #0f0;
  color: #000
}
body.theme-matrix .notification-bell.has-unread {
  box-shadow: 0 0 20px rgba(0,255,0,.5)
}
.catering-countdown {
  text-align: center
}
.countdown-title {
  font-size: 14px;
  font-weight: 700;
  color: #f39c12;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase
}
.countdown-progress {
  margin-bottom: 10px
}
.progress-bar-container {
  width: 100%;
  height: 12px;
  background: rgba(0,0,0,.3);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,#f39c12 0,#e67e22 100%);
  transition: width .3s
}
.progress-text, .upgrade-cost-display {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: bold;
  opacity: 1;
}
.countdown-remaining {
  font-size: 13px;
  color: #f39c12;
  font-weight: 700;
  margin: 8px 0
}
.unlock-cost-preview {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: .7;
  margin-top: 8px
}
.countdown-complete {
  margin-bottom: 15px
}
.complete-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px
}
.complete-text {
  font-size: 14px;
  font-weight: 700;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 1px
}
.catering-unlock-button {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg,#4ade80 0,#16a34a 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  box-shadow: 0 4px 15px rgba(74,222,128,.3);
  text-transform: uppercase;
  letter-spacing: 1px
}
.catering-unlock-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74,222,128,.4)
}
.catering-main-display {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px
}
.catering-main-header {
  text-align: center;
  margin-bottom: 30px
}
.catering-main-header h2 {
  font-size: 36px;
  color: var(--accent-primary);
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(243,156,18,.5)
}
.catering-stats {
  font-size: 18px;
  color: var(--text-secondary)
}
.catering-order-card {
  background: linear-gradient(135deg,rgba(243,156,18,.1) 0,rgba(230,126,34,.1) 100%);
  border: 2px solid rgba(243,156,18,.3);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  transition: .3s
}
.catering-order-card.ready {
  border-color: var(--success);
  background: linear-gradient(135deg,rgba(74,222,128,.1) 0,rgba(22,163,74,.1) 100%);
  animation: 2s ease-in-out infinite readyPulse
}
@keyframes readyPulse {
  0%,
  100% {
    box-shadow: 0 10px 40px rgba(0,0,0,.3)
  }
  50% {
    box-shadow: 0 10px 60px rgba(74,222,128,.4)
  }
}
.order-reward,
.order-size {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0,0,0,.3);
  border-radius: 10px
}
.order-label,
.preview-label,
.reward-label {
  font-size: 16px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px
}
.order-value,
.preview-value,
.reward-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary)
}
.order-progress-container {
  position: relative;
  margin: 30px 0
}
.order-progress-bar {
  width: 100%;
  height: 40px;
  background: rgba(0,0,0,.5);
  border-radius: 20px;
  overflow: hidden;
  position: relative
}
.order-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,#f39c12 0,#e67e22 100%);
  transition: width .3s;
  position: relative;
  z-index: 1
}
.order-progress-glow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation: 2s linear infinite progressGlow;
  z-index: 2
}
@keyframes progressGlow {
  0% {
    transform: translateX(-100%)
  }
  100% {
    transform: translateX(100%)
  }
}
.order-timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,.8);
  z-index: 3
}
.order-timer.complete {
  font-size: 24px;
  color: var(--success);
  animation: 1s ease-in-out infinite timerPulse
}
@keyframes timerPulse {
  0%,
  100% {
    transform: translate(-50%,-50%) scale(1)
  }
  50% {
    transform: translate(-50%,-50%) scale(1.1)
  }
}
.complete-order-button {
  width: 100%;
  padding: 20px;
  background: linear-gradient(135deg,var(--success) 0,#16a34a 100%);
  border: none;
  border-radius: 15px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 20px
}
.complete-order-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(74,222,128,.4)
}
.complete-order-button.pulse {
  animation: 2s ease-in-out infinite buttonPulse
}
@keyframes buttonPulse {
  0%,
  100% {
    box-shadow: 0 5px 20px rgba(74,222,128,.3);
    transform: scale(1)
  }
  50% {
    box-shadow: 0 10px 40px rgba(74,222,128,.6);
    transform: scale(1.02)
  }
}
.catering-cooldown-card {
  background: linear-gradient(135deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.02) 100%);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 60px;
  text-align: center
}
.cooldown-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: 3s ease-in-out infinite sandTimer
}
@keyframes sandTimer {
  0%,
  100% {
    transform: rotate(0)
  }
  50% {
    transform: rotate(180deg)
  }
}
.cooldown-text {
  font-size: 20px;
  color: var(--text-secondary);
  margin-bottom: 10px
}
.cooldown-timer {
  font-size: 48px;
  font-weight: 700;
  color: var(--warning);
  text-shadow: 0 0 20px rgba(251,191,36,.5)
}
.catering-ready-card {
  background: linear-gradient(135deg,rgba(96,165,250,.1) 0,rgba(59,130,246,.1) 100%);
  border: 2px solid rgba(96,165,250,.3);
  border-radius: 20px;
  padding: 40px;
  text-align: center
}
.order-preview {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 30px
}
.preview-item {
  background: rgba(0,0,0,.3);
  padding: 20px;
  border-radius: 10px;
  text-align: center
}
.preview-label {
  display: block;
  margin-bottom: 10px
}
.preview-value {
  display: block
}
.start-order-button {
  width: 100%;
  padding: 20px;
  background: linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%);
  border: none;
  border-radius: 15px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  text-transform: uppercase;
  letter-spacing: 2px
}
.start-order-button:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(96,165,250,.4)
}
.start-order-button.disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: .6
}
@media (max-width:768px) {
  .notification-bell-container[style*=left],
  .notification-dropdown[style*=left] {
    left: 10px!important
  }
  .order-preview {
    grid-template-columns: 1fr
  }
  .catering-order-card {
    padding: 20px
  }
  .order-timer {
    font-size: 16px
  }
}
.catering-timer.ready {
  display: inline-block;
  color: var(--success);
  font-weight: 700;
  animation: 1s ease-in-out infinite readyPulse
}
.catering-complete-button {
  margin-top: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg,var(--success) 0,#16a34a 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  width: 100%
}
.catering-complete-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(74,222,128,.3)
}
.catering-status {
  text-align: center
}
.catering-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 0 10px
}
.catering-progress {
  margin-bottom: 10px
}
@keyframes readyPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1
  }
  50% {
    transform: scale(1.05);
    opacity: .8
  }
}
/* Old save loading screen removed - using initial loading screen for all scenarios */
.loading-messages {
  position: relative;
  height: 20px
}
.loading-messages span {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: 6s infinite cycle-messages
}
.loading-messages span:nth-child(1) {
  animation-delay: 0s
}
.loading-messages span:nth-child(2) {
  animation-delay: 2s
}
.loading-messages span:nth-child(3) {
  animation-delay: 4s
}
@keyframes cycle-messages {
  0%,
  33.33% {
    opacity: 0
  }
  25%,
  8.33% {
    opacity: 1
  }
}
body.theme-neon .loading-burger {
  filter: drop-shadow(0 0 20px var(--accent-primary))
}
body.theme-neon .loading-title {
  animation: 2s ease-in-out infinite neon-glow
}
@keyframes neon-glow {
  0%,
  100% {
    text-shadow: 0 0 20px var(--accent-primary)
  }
  50% {
    text-shadow: 0 0 40px var(--accent-primary),0 0 60px var(--accent-primary)
  }
}
body.theme-matrix .loading-screen {
  background: rgba(0,0,0,.98)
}
body.theme-matrix .loading-progress-bar {
  background: var(--success);
  box-shadow: 0 0 20px var(--success)
}
body.theme-matrix .loading-burger {
  filter: drop-shadow(0 0 20px var(--accent-primary))
}
body.theme-matrix .loading-title {
  animation: 2s ease-in-out infinite matrix-cursor-blink
}
@keyframes matrix-cursor-blink {
  0%,
  100% {
    text-shadow: 0 0 10px #00ff00
  }
  50% {
    text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00;
    opacity: 0.8
  }
}
@media (max-width:768px) {
  .loading-burger-container {
    width: 80px;
    height: 80px
  }
  .loading-burger {
    font-size: 60px
  }
  .loading-spatula {
    font-size: 30px
  }
  .loading-title {
    font-size: 24px
  }
}
#wastePopup.info-popup {
  position: fixed!important;
  top: 0!important;
  left: 0!important;
  width: 100vw!important;
  height: 100vh!important;
  background: rgba(0,0,0,.6);
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
  z-index: 10000!important;
  margin: 0!important;
  padding: 0!important;
  transform: none!important;
  isolation: isolate;
  animation: 0.3s fadeIn
}
.info-popup-content {
  background: linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  color: var(--text-primary);
  text-align: left;
  transition: transform .3s
}
.info-popup-content h2 {
  text-align: center;
  margin-top: 0;
  font-size: 24px;
  color: var(--accent-primary);
  font-weight: 700
}
.info-content {
  margin-bottom: 15px
}
.info-content strong {
  color: var(--accent-primary);
  font-weight: 700
}
.info-content p {
  margin: 10px 0;
  line-height: 1.6;
  color: var(--text-secondary)
}
.info-content ul {
  margin: 10px 0;
  padding-left: 20px;
  list-style-type: disc
}
.info-content ul.sub-list {
  margin: 5px 0 10px 20px;
  padding-left: 15px;
  list-style-type: circle;
  color: var(--text-secondary)
}
.info-content li {
  margin-bottom: 8px;
  color: var(--text-secondary)
}
body.crimson-dark .info-popup-content,
body.dark .info-popup-content,
body.dark-purple .info-popup-content,
body.diner .info-popup-content,
body.light .info-popup-content,
body.theme-matrix .info-popup-content,
body.midnight-green .info-popup-content,
body.theme-neon .info-popup-content,
body.retro .info-popup-content {
  background: linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);
  border-color: var(--border-primary);
  color: var(--text-primary)
}
body.theme-neon .info-popup-content {
  box-shadow: 0 0 20px var(--accent-primary),0 0 40px var(--accent-secondary)
}
body.diner .info-popup-content {
  box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--accent-primary)
}
body.theme-matrix .info-popup-content {
  animation: 2s ease-in-out infinite matrix-glow
}
body.light .info-popup-content {
  box-shadow: 0 2px 10px rgba(0,0,0,.15)
}
.info-close-btn {
  margin-top: 15px;
  padding: 10px 20px;
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%);
  color: var(--text-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: .3s
}
.info-close-btn:hover {
  background: linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.3)
}
@media (max-width:600px) {
  .info-popup-content {
    width: 95%;
    padding: 15px;
    border-radius: 8px
  }
  .info-popup-content h2 {
    font-size: 20px
  }
  .info-close-btn {
    font-size: 14px;
    padding: 8px 16px
  }
}
@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
.info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: 0 0;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: .3s;
  vertical-align: middle
}
.info-icon {
  font-style: italic;
  font-size: 16px;
  color: var(--accent-primary);
  font-weight: 400;
  line-height: 1;
  display: block
}
.info-button:hover {
  background: rgba(var(--accent-primary-rgb),.1);
  transform: scale(1.1)
}
.info-button:active {
  transform: scale(.95)
}
.card-title {
  display: inline-flex;
  align-items: center;
  gap: 4px
}
.info-tip {
  margin-top: 20px;
  color: var(--accent-primary);
  font-weight: 700
}
body.theme-neon .info-icon {
  color: #0ff;
  text-shadow: 0 0 5px #0ff
}
body.theme-neon .info-button:hover {
  background: rgba(0,255,255,.1);
  box-shadow: 0 0 10px rgba(0,255,255,.3)
}
body.diner .info-icon {
  color: #dc143c
}
body.theme-matrix .info-icon {
  color: #0f0;
  text-shadow: 0 0 3px #0f0
}
body.theme-matrix .info-button:hover {
  background: rgba(0,255,0,.1);
  box-shadow: 0 0 10px rgba(0,255,0,.3)
}
body.retro .info-icon {
  color: #ff6b6b
}
.production-stats .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.production-stats .card-title {
  flex: 1
}
#unlockCardsContainer .unlock-card,
.action-center .unlock-card,
.unlock-card,
.unlock-cards-container .unlock-card {
  background: rgba(0,0,0,.4)!important;
  background-color: rgba(0,0,0,.4)!important;
  background-image: none!important;
  border: 2px solid var(--border-primary)!important
}
#unlockCardsContainer .unlock-card:hover,
.action-center .unlock-card:hover,
.unlock-card:hover,
.unlock-cards-container .unlock-card:hover {
  background: rgba(0,0,0,.6)!important;
  background-color: rgba(0,0,0,.6)!important;
  background-image: none!important;
  border-color: var(--accent-primary)!important
}
#unlockCardsContainer .unlock-item,
.unlock-card .unlock-item,
.unlock-cards-container .unlock-item,
.unlock-item {
  background: rgba(255,255,255,.03)!important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--border-primary)!important
}
#unlockCardsContainer .unlock-item.affordable,
.unlock-card .unlock-item.affordable,
.unlock-cards-container .unlock-item.affordable,
.unlock-item.affordable {
  background: rgba(255,255,255,.05)!important;
  border-color: var(--success)!important;
  box-shadow: 0 0 5px rgba(74,222,128,.3)!important
}
#unlockCardsContainer .unlock-item.affordable:hover,
.unlock-card .unlock-item.affordable:hover,
.unlock-cards-container .unlock-item.affordable:hover,
.unlock-item.affordable:hover {
  background: rgba(255,255,255,.08)!important;
  border-color: var(--success)!important;
  box-shadow: 0 0 10px rgba(74,222,128,.5)!important
}
#unlockCardsContainer .unlock-item-button,
.unlock-card .unlock-item-button,
.unlock-cards-container .unlock-item-button,
.unlock-item .unlock-item-button,
.unlock-item-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%)!important;
  color: var(--text-primary)!important;
  border: none!important
}
#unlockCardsContainer .unlock-item-button:hover:not(:disabled),
.unlock-card .unlock-item-button:hover:not(:disabled),
.unlock-cards-container .unlock-item-button:hover:not(:disabled),
.unlock-item .unlock-item-button:hover:not(:disabled),
.unlock-item-button:hover:not(:disabled) {
  background: linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%)!important;
  transform: scale(1.02)
}
#unlockCardsContainer .unlock-item-button:disabled,
.unlock-card .unlock-item-button:disabled,
.unlock-cards-container .unlock-item-button:disabled,
.unlock-item .unlock-item-button:disabled,
.unlock-item-button:disabled {
  background: var(--border-primary)!important;
  color: var(--text-secondary)!important;
  opacity: .6!important
}
body.light #unlockCardsContainer .unlock-card,
body.light .unlock-card,
body.light .unlock-cards-container .unlock-card {
  background: rgba(0,0,0,.05)!important;
  background-color: rgba(0,0,0,.05)!important
}
body.light #unlockCardsContainer .unlock-card:hover,
body.light .unlock-card:hover,
body.light .unlock-cards-container .unlock-card:hover {
  background: rgba(0,0,0,.08)!important;
  background-color: rgba(0,0,0,.08)!important
}
body.theme-neon #unlockCardsContainer .unlock-item-button,
body.theme-neon .unlock-card .unlock-item-button,
body.theme-neon .unlock-cards-container .unlock-item-button,
body.theme-neon .unlock-item .unlock-item-button,
body.theme-neon .unlock-item-button {
  color: #000!important;
  text-shadow: 0 0 2px rgba(255,255,255,.5)!important
}
body.theme-neon .increment-btn,
body.theme-neon .increment-btn:hover {
  color: #000!important
}
body.theme-neon .increment-btn.active {
  color: #000!important;
  text-shadow: 0 0 3px rgba(255,255,255,.8)!important
}
body.theme-neon .compact-btn,
body.theme-neon .hire-button,
body.theme-neon .mini-button,
body.theme-neon .price-btn,
body.theme-neon .quick-buy-button,
body.theme-neon .special-card-button,
body.theme-neon .upgrade-button,
body.theme-neon button[style*=background] {
  color: #000!important
}
body.theme-neon .unlock-item-button:hover:not(:disabled) {
  color: #000!important;
  text-shadow: 0 0 5px rgba(255,255,255,.8),0 0 10px var(--accent-primary)!important
}
body.theme-neon .spatula-paywall .paywall-button {
  color: var(--text-primary)!important
}
body.theme-neon .spatula-paywall .paywall-button.ready {
  color: #000!important;
  text-shadow: 0 0 2px rgba(255,255,255,.5)!important
}
body.theme-neon .spatula-paywall .paywall-button.ready:hover {
  color: #000!important;
  text-shadow: 0 0 5px rgba(255,255,255,.8),0 0 10px var(--success)!important
}
body.theme-neon .spatula-paywall .button-icon {
  color: inherit!important
}
body.theme-matrix #unlockCardsContainer .unlock-item-button,
body.theme-matrix .unlock-card .unlock-item-button,
body.theme-matrix .unlock-cards-container .unlock-item-button,
body.theme-matrix .unlock-item .unlock-item-button,
body.theme-matrix .unlock-item-button {
  color: #000!important;
  text-shadow: 0 0 2px rgba(0,255,0,.8)!important
}
body.theme-matrix .increment-btn,
body.theme-matrix .increment-btn:hover {
  color: #000!important
}
body.theme-matrix .increment-btn.active {
  background: var(--success)!important;
  color: #000!important
}
body.theme-matrix .compact-btn,
body.theme-matrix .hire-button,
body.theme-matrix .mini-button,
body.theme-matrix .price-btn,
body.theme-matrix .quick-buy-button,
body.theme-matrix .special-card-button,
body.theme-matrix .upgrade-button,
body.theme-matrix button[style*=background] {
  color: #000!important
}
body.theme-matrix .unlock-item-button:hover:not(:disabled) {
  color: #000!important;
  text-shadow: 0 0 5px rgba(0,255,0,.9), 0 0 10px var(--accent-primary)!important
}
body.theme-matrix .spatula-paywall .paywall-button {
  color: var(--text-primary)!important
}
body.theme-matrix .spatula-paywall .paywall-button.ready {
  color: #000!important;
  text-shadow: 0 0 2px rgba(0,255,0,.8)!important
}
body.theme-matrix .spatula-paywall .paywall-button.ready:hover {
  color: #000!important;
  text-shadow: 0 0 5px rgba(0,255,0,.9), 0 0 10px var(--success)!important
}
body.theme-matrix .spatula-paywall .button-icon {
  color: inherit!important
}
.presence-unlock-banner {
  background: linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 15px;
  animation: 0.5s slideIn
}
.presence-unlock-banner .banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px
}
.presence-unlock-banner .banner-main {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1
}
.presence-unlock-banner .banner-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary)
}
.presence-unlock-banner .banner-unlock-btn {
  background: linear-gradient(135deg,var(--accent-secondary),var(--accent-primary));
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
  white-space: nowrap
}
.presence-unlock-banner .banner-unlock-btn:hover:not(.disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb),.3);
  filter: brightness(1.1)
}
.presence-unlock-banner .banner-unlock-btn.disabled {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: .7;
  border: 1px solid var(--border-primary)
}
.presence-unlock-banner .info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-primary-rgb),.15);
  border: 1px solid var(--accent-primary);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: .3s;
  font-family: Georgia,serif;
  font-style: italic
}
.presence-unlock-banner .info-icon {
  font-size: 14px;
  color: var(--accent-primary);
  font-weight: 700;
  line-height: 1
}
.presence-unlock-banner .info-btn:hover {
  background: rgba(var(--accent-primary-rgb),.25);
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),.3)
}
body.theme-neon .presence-unlock-banner {
  border-color: #0ff;
  box-shadow: 0 0 20px rgba(0,255,255,.3)
}
body.theme-neon .presence-unlock-banner .banner-unlock-btn:not(.disabled) {
  background: linear-gradient(135deg,#f0f,#0ff);
  box-shadow: 0 0 10px rgba(0,255,255,.5)
}
body.theme-neon .presence-unlock-banner .banner-unlock-btn:hover:not(.disabled) {
  box-shadow: 0 0 20px rgba(0,255,255,.8)
}
body.theme-matrix .presence-unlock-banner {
  border-color: #0f0;
  animation: 2s ease-in-out infinite matrix-flicker
}
body.theme-matrix .presence-unlock-banner .banner-unlock-btn:not(.disabled) {
  background: #0f0;
  color: #000;
  text-shadow: none
}
body.theme-matrix .presence-unlock-banner .banner-unlock-btn:hover:not(.disabled) {
  box-shadow: 0 0 20px #0f0;
  filter: brightness(1.2)
}
body.diner .presence-unlock-banner {
  border: 3px solid #dc143c;
  box-shadow: 0 0 0 1px #fff
}
body.diner .presence-unlock-banner .banner-unlock-btn:not(.disabled) {
  background: #dc143c;
  font-family: 'Bebas Neue',Impact,sans-serif;
  letter-spacing: 1px
}
body.retro .presence-unlock-banner {
  background: linear-gradient(135deg,#4a0080,purple);
  border-color: #ff6b6b
}
body.retro .presence-unlock-banner .banner-unlock-btn:not(.disabled) {
  background: linear-gradient(135deg,#ff6b6b,#feca57)
}
@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}
.info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: 0.3s fadeIn
}
.info-modal-content {
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  position: relative;
  color: var(--text-primary)
}
.info-modal-content h3 {
  color: var(--accent-primary);
  margin-bottom: 15px;
  font-size: 24px
}
.info-modal-content p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: var(--text-secondary)
}
.info-modal-content ul {
  margin: 15px 0;
  padding-left: 20px
}
.info-modal-content li {
  margin-bottom: 8px;
  color: var(--text-secondary)
}
.info-modal-content strong {
  color: var(--accent-primary)
}
.info-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: 0 0;
  border: none;
  font-size: 30px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .3s
}
.info-modal-close:hover {
  color: var(--accent-primary)
}
#unlockCardsContainer .special-card,
.special-card,
.unlock-cards-container .special-card {
  background: linear-gradient(135deg,rgba(74,222,128,.2) 0,rgba(74,222,128,.1) 100%)!important;
  border: 2px solid var(--success)!important;
  box-shadow: 0 4px 20px rgba(74,222,128,.3)!important
}
#unlockCardsContainer .special-card:hover,
.special-card:hover,
.unlock-cards-container .special-card:hover {
  background: linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%)!important;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0,0,0,.4)!important;
  border-color: var(--accent-primary)!important
}
.special-card-content p {
  color: var(--text-primary)!important
}
.special-card-button {
  background: linear-gradient(135deg,var(--accent-secondary) 0,var(--accent-primary) 100%)!important;
  color: var(--text-primary)!important
}
#unlockCardsContainer .unlock-card:not(.special-card),
.action-center .unlock-card:not(.special-card),
.unlock-card:not(.special-card),
.unlock-cards-container .unlock-card:not(.special-card) {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--border-primary)!important;
  transition: .3s
}
#unlockCardsContainer .unlock-card:not(.special-card):hover,
.action-center .unlock-card:not(.special-card):hover,
.unlock-card:not(.special-card):hover,
.unlock-cards-container .unlock-card:not(.special-card):hover {
  background: rgba(255,255,255,.08)!important;
  border-color: var(--accent-primary)!important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0,0,0,.2)!important
}
.meat-market {
  background: var(--bg-tertiary)
}
.meat-market .meat-options {
  display: flex;
  gap: 10px;
  justify-content: space-between
}
.meat-option {
  flex: 1;
  background: linear-gradient(145deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%)!important;
  padding: 20px 10px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: .3s;
  border: 2px solid var(--border-primary)!important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px
}
.meat-option:hover:not(.disabled) {
  border-color: var(--accent-primary)!important;
  background: linear-gradient(145deg,var(--bg-secondary) 0,rgba(0,0,0,.3) 100%)!important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0,0,0,.3)!important
}
.meat-amount {
  color: var(--warning)!important;
  display: block;
  text-shadow: 0 0 10px currentColor!important;
  line-height: 1.2
}
.meat-price {
  font-size: 18px;
  color: var(--success)!important;
  display: block;
  font-weight: 600;
  line-height: 1.2
}
.meat-option.disabled {
  opacity: .5!important;
  cursor: not-allowed!important;
  border-color: var(--border-primary)!important
}
.meat-option.disabled:hover {
  transform: none!important;
  border-color: var(--border-primary)!important;
  box-shadow: none!important
}
body.theme-neon .special-card-button {
  color: #000!important;
  text-shadow: 0 0 2px rgba(255,255,255,.5)!important
}
body.theme-neon .meat-option {
  border-color: rgba(248,113,113,.3)!important
}
body.theme-neon .meat-option:hover:not(.disabled) {
  border-color: #f87171!important;
  box-shadow: 0 5px 20px rgba(248,113,113,.3)!important
}
body.light #unlockCardsContainer .unlock-card:not(.special-card),
body.light .unlock-card:not(.special-card),
body.light .unlock-cards-container .unlock-card:not(.special-card) {
  background: rgba(0,0,0,.03)!important;
  backdrop-filter: blur(10px)
}
body.light #unlockCardsContainer .unlock-card:not(.special-card):hover,
body.light .unlock-card:not(.special-card):hover,
body.light .unlock-cards-container .unlock-card:not(.special-card):hover {
  background: rgba(0,0,0,.05)!important
}
body.light #unlockCardsContainer .unlock-item,
body.light #unlockCardsContainer .unlock-item.affordable,
body.light .unlock-cards-container .unlock-item,
body.light .unlock-cards-container .unlock-item.affordable,
body.light .unlock-item,
body.light .unlock-item.affordable {
  background: rgba(0,0,0,.02)!important
}
body.light .special-card {
  background: linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%)!important;
  box-shadow: 0 2px 10px rgba(0,0,0,.1)!important
}
body.light .meat-option {
  background: linear-gradient(145deg,rgba(255,255,255,.8) 0,rgba(245,245,245,.8) 100%)!important;
  border-color: rgba(0,0,0,.1)!important
}
body.light .meat-option:hover:not(.disabled) {
  border-color: var(--accent-primary)!important;
  box-shadow: 0 5px 20px rgba(0,0,0,.1)!important
}

/* Guest Account Styles */
.guest-signin-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 2px dashed rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s ease !important;
}

.guest-signin-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.guest-upgrade-prompt {
  position: fixed;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 15px;
  animation: slideInRight 0.5s ease;
  max-width: 350px;
}

.guest-upgrade-prompt.warning {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.guest-upgrade-text {
  color: white;
  font-size: 14px;
  flex: 1;
}

.guest-upgrade-button {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 2px solid white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.guest-upgrade-button:hover {
  background: white;
  color: #667eea;
}

.guest-indicator {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
}

.guest-warning {
  background: rgba(255, 165, 0, 0.2);
  border: 2px solid orange;
  color: orange;
  padding: 10px;
  border-radius: 8px;
  margin: 10px 0;
  text-align: center;
  animation: pulse 2s infinite;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
body.theme-neon .special-card {
  box-shadow: 0 0 20px var(--accent-primary),0 0 40px var(--accent-secondary)!important
}
body.theme-neon .unlock-card:not(.special-card) {
  box-shadow: 0 0 15px rgba(0,255,255,.2)!important
}
body.theme-neon .unlock-card:not(.special-card):hover {
  box-shadow: 0 0 25px rgba(0,255,255,.4)!important
}
body.theme-matrix #spatulaList .spatula-card.affordable:hover,
body.theme-matrix .achievement-card.unlocked,
body.theme-matrix .meat-option:hover:not(.disabled),
body.theme-matrix .unlock-card:hover {
  box-shadow: 0 0 30px var(--accent-primary), 0 0 60px var(--accent-secondary)
}
body.theme-matrix .special-card-button {
  color: #000!important;
  text-shadow: 0 0 2px rgba(0,255,0,.8)!important
}
body.theme-matrix .meat-option {
  border: 2px solid var(--border-primary);
  box-shadow: 0 0 10px rgba(0,255,0,.1)
}
body.theme-matrix .meat-option:hover:not(.disabled) {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px rgba(0,255,0,.3)
}
body.theme-matrix .special-card {
  box-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-secondary)!important
}
body.theme-matrix .unlock-card:not(.special-card) {
  box-shadow: 0 0 15px rgba(0,255,0,.2)!important
}
body.theme-matrix .unlock-card:not(.special-card):hover {
  box-shadow: 0 0 25px rgba(0,255,0,.4)!important
}
.action-center {
  max-width: 400px
}
@media (max-width:400px) {
  .meat-option {
    padding: 15px 5px
  }
  .meat-amount {
    font-size: 20px
  }
  .meat-price {
    font-size: 16px
  }
}
.special-card {
  background: linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%)!important;
  border-color: var(--accent-primary)!important;
  box-shadow: 0 0 30px rgba(0,0,0,.3)!important;
  border: 2px solid var(--accent-primary)!important
}
.special-card-header h4 {
  color: var(--text-primary)!important;
  color: var(--accent-primary)!important;
  text-shadow: none!important
}
#unlockCardsContainer .special-card,
.special-card,
.unlock-cards-container .special-card {
  background: linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%)!important;
  border: 2px solid var(--accent-primary)!important;
  animation: none!important
}
@keyframes specialCardGlow {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(0,0,0,.3)!important
  }
  50% {
    box-shadow: 0 4px 30px rgba(0,0,0,.5)!important
  }
}
.new-unlock-glow {
  animation: 3s ease-out newUnlockGlow!important
}
@keyframes newUnlockGlow {
  0% {
    box-shadow: 0 0 40px var(--accent-primary)!important;
    transform: scale(1.05)
  }
  100% {
    box-shadow: 0 4px 20px rgba(0,0,0,.3)!important;
    transform: scale(1)
  }
}
.unlock-item.affordable {
  border-color: var(--accent-primary)!important;
  box-shadow: 0 0 5px var(--accent-primary)!important
}
#unlockCardsContainer .special-card,
.special-card,
.unlock-cards-container .special-card {
  background: linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%)!important;
  border: 2px solid var(--accent-primary)!important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3)!important;
  transition: .3s
}
.special-card-button {
  background: var(--accent-primary)!important;
  color: var(--text-primary)!important;
  border: none!important;
  font-weight: 600;
  transition: .3s
}
.special-card-button:hover {
  background: linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%)!important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.4)!important
}
#unlockCardsContainer .unlock-card:not(.special-card),
.action-center .unlock-card:not(.special-card),
.unlock-card:not(.special-card),
.unlock-cards-container .unlock-card:not(.special-card) {
  background: 0 0!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important
}
.demand-meter {
  position: relative
}
.max-demand-indicator {
  background: linear-gradient(135deg,var(--purple),var(--accent-primary));
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
  opacity: 0;
  transition: .3s;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  z-index: 10;
  border: 1px solid rgba(255,255,255,.2);
  margin-top: 10px;
  text-align: center
}
.max-demand-indicator.visible {
  opacity: 1
}
.cap-icon {
  margin-right: 6px;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.5))
}
.cap-text {
  font-weight: 700;
  margin-right: 6px
}
.cap-hint {
  opacity: .85;
  font-size: 12px;
  font-style: italic
}
.demand-bar.at-cap {
  animation: 2s ease-in-out infinite pulse-glow
}
body.theme-neon .max-demand-indicator {
  text-shadow: 0 0 10px currentColor;
  border-color: var(--accent-primary)
}
body.retro .max-demand-indicator {
  border-radius: 0;
  font-family: 'Courier New',monospace
}
body.diner .max-demand-indicator {
  font-family: Georgia,serif;
  background: var(--accent-primary);
  color: var(--bg-primary)
}
body.theme-matrix .max-demand-indicator {
  background: rgba(0,255,0,.2);
  border: 1px solid var(--accent-primary);
  text-shadow: 0 0 5px var(--accent-primary)
}
body.light .max-demand-indicator {
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  border: 1px solid var(--border-primary)
}
.emergency-popup {
  position: fixed!important;
  top: 0!important;
  left: 0!important;
  width: 100%!important;
  height: 100%!important;
  background: rgba(0,0,0,.85)!important;
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
  z-index: 10000!important;
  animation: 0.3s fadeIn;
  margin: 0!important;
  padding: 0!important;
  transform: none!important
}
.emergency-popup-content {
  background: linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));
  border: 2px solid var(--danger);
  border-radius: 12px;
  padding: 30px;
  max-width: 700px;
  width: 90%;
  box-shadow: 0 0 30px rgba(255,0,0,.3)
}
.emergency-popup-content h2 {
  color: var(--danger);
  text-align: center;
  margin-bottom: 20px;
  font-size: 28px
}
.emergency-content p {
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 15px
}
.emergency-options {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 15px;
  margin: 20px 0
}
.emergency-option {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  position: relative;
  transition: .3s
}
.emergency-option:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3)
}
.emergency-option.disabled {
  opacity: .6;
  cursor: not-allowed
}
.emergency-option.recommended {
  border-color: var(--success);
  background: rgba(74,222,128,.1)
}
.emergency-option h3 {
  color: var(--text-primary);
  font-size: 16px;
  margin-bottom: 8px
}
.meat-amount {
  color: var(--success);
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0
}
.cooldown-info {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 4px 0
}
.cooldown-remaining {
  color: var(--warning);
  font-size: 13px;
  font-weight: 700;
  margin: 8px 0
}
.decline-text {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 8px 0
}
.recommended-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  background: var(--success);
  color: var(--bg-primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700
}
.emergency-btn {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: .2s;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary)
}
.emergency-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.2)
}
.emergency-btn:disabled {
  cursor: not-allowed;
  opacity: .5
}
.emergency-btn.primary {
  background: var(--success);
  color: var(--bg-primary);
  border-color: var(--success)
}
.emergency-btn.secondary {
  background: rgba(255,255,255,.1);
  color: var(--text-secondary)
}
.emergency-note {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 20px
}
body.theme-neon .emergency-popup-content {
  box-shadow: 0 0 50px var(--danger),inset 0 0 30px rgba(255,0,102,.2)
}
body.theme-neon .emergency-btn:not(:disabled):hover {
  text-shadow: 0 0 10px currentColor
}
body.theme-matrix .emergency-popup-content {
  border-color: var(--accent-primary);
  box-shadow: 0 0 30px var(--accent-primary)
}
body.theme-matrix .emergency-popup-content h2 {
  color: var(--accent-primary);
  text-shadow: 0 0 10px var(--accent-primary)
}
body.theme-matrix .emergency-btn:not(:disabled):hover {
  text-shadow: 0 0 10px currentColor
}
body.diner .emergency-popup-content {
  background: var(--bg-primary);
  font-family: Georgia,serif
}
body.retro .emergency-popup-content {
  border-radius: 0;
  font-family: 'Courier New',monospace
}
body.retro .emergency-btn {
  border-radius: 0;
  text-transform: uppercase
}
.burger-flipper .employee-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  opacity: 0;
  animation: 0.5s forwards fadeIn
}
.burger-flipper .employee-toggle .toggle-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500
}
.burger-flipper .employee-toggle .toggle-switch {
  position: relative;
  display: inline-block;
  width: 75px!important;
  height: 25px!important
}
.burger-flipper .employee-toggle .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.burger-flipper .employee-toggle .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  transition: .3s;
  border-radius: 24px!important
}
.burger-flipper .employee-toggle .toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px!important;
  width: 18px!important;
  left: 3px!important;
  bottom: 3px!important;
  top: auto!important;
  transform: none!important;
  background-color: #ccc;
  transition: .3s;
  border-radius: 50%
}
.burger-flipper .employee-toggle .toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(77,166,255,.5)
}
.burger-flipper .employee-toggle .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px)!important;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(255,255,255,.8)
}
.burger-flipper .employee-toggle .toggle-switch:hover .toggle-slider {
  border-color: rgba(255,255,255,.4)
}
.employee-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px
}
.fire-button {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s
}
.fire-button:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(220,38,38,.3)
}
.hire-button {
  flex: 1
}
.unified-employees-container .employee-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px
}
.unified-employees-container .hire-button {
  flex: 1;
  padding: 8px
}
.unified-employees-container .fire-button {
  flex: 0 0 auto;
  padding: 8px 15px;
  background: #ef4444;
  color: #fff;
  border: 1px solid #dc2626;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  box-shadow: 0 2px 5px rgba(0,0,0,.2)
}
.unified-employees-container .fire-button:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220,38,38,.3)
}
.burger-flipper.employees-disabled {
  position: relative
}
.burger-flipper.employees-disabled::after {
  content: '⚠️ Employees Disabled';
  position: absolute;
  top: 70px;
  left: 25px;
  background: rgba(239,68,68,.9);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  animation: 2s ease-in-out infinite pulse
}
.employees-disabled .employee-card {
  opacity: .6;
  filter: grayscale(50%)
}
.employees-disabled .employee-card .fire-button,
.employees-disabled .employee-card .hire-button {
  opacity: .5;
  cursor: not-allowed
}
.employees-disabled .column-footer {
  background: rgba(239,68,68,.1);
  border-color: var(--danger)
}
.employees-disabled .column-footer::before {
  content: '⚠️ DISABLED - ';
  color: var(--danger);
  font-weight: 700
}
#ingredientsList .ingredient-next-level {
  font-size: 12px;
  color: var(--accent-primary);
  margin-top: 4px;
  opacity: .8;
  display: flex;
  align-items: center;
  gap: 4px
}
#ingredientsList .ingredient-next-level .next-arrow {
  color: var(--success);
  font-weight: 700
}
#ingredientsList .ingredient-card.level-locked .ingredient-next-level {
  opacity: .4;
  color: var(--text-secondary)
}
.toggle-container {
  display: flex!important;
  flex-direction: row!important;
  justify-content: center;
  align-items: center;
  margin-left: 25px;
  gap: 5px;
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 15px
}
.toggle-container > div {
  display: flex!important;
  margin: 0!important
}
.toggle-container .auto-flipper-toggle,
.toggle-container .employee-toggle {
  display: none!important
}
.toggle-container .auto-flipper-toggle[style*="display:flex"],
.toggle-container .employee-toggle[style*="display:flex"] {
  display: flex!important
}
.operations-container {
  position: relative
}
.operations-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative
}
.operations-header h2 {
  color: var(--accent-primary);
  font-size: 2em;
  margin: 0 0 10px
}
.operations-subtitle {
  color: var(--text-secondary);
  font-size: 1.1em
}
.mode-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-tertiary);
  padding: 8px 16px;
  border-radius: 24px;
  cursor: pointer;
  border: 1px solid var(--border-primary);
  transition: .3s
}
.mode-toggle:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary)
}
.mode-toggle-label {
  font-size: .9em;
  color: var(--text-secondary)
}
.mode-toggle-switch {
  width: 40px;
  height: 20px;
  background: var(--border-primary);
  border-radius: 10px;
  position: relative;
  transition: background-color .3s
}
.mode-toggle-switch.active {
  background: var(--accent-primary)
}
.mode-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .3s
}
.mode-toggle-switch.active .mode-toggle-slider {
  transform: translateX(20px)
}
.card-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,280px);
  gap: 35px;
  margin-top: 20px;
  justify-content: center
}
.upgrade-card-collectible {
  background: linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%);
  border: 3px solid var(--border-primary);
  border-radius: 15px;
  overflow: hidden;
  transition: .3s;
  position: relative;
  cursor: pointer;
  width: 300px;
  gap: 50px;
  transform-style: preserve-3d;
  will-change: transform
}
.upgrade-card-collectible:hover {
  box-shadow: 0 20px 40px rgba(96,165,250,.3),var(--tilt-shadow-x,0) var(--tilt-shadow-y,0) 30px rgba(0,0,0,.3);
  border-color: var(--accent-primary)
}
.upgrade-card-collectible.maxed {
  border-color: var(--purple);
  box-shadow: 0 0 20px rgba(167,139,250,.3)
}
.card-rarity {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: .8em;
  font-weight: 700;
  z-index: 2
}
.rarity-common {
  background: var(--text-secondary);
  color: var(--bg-primary)
}
.rarity-rare {
  background: var(--accent-primary);
  color: var(--bg-primary)
}
.rarity-epic {
  background: var(--purple);
  color: var(--bg-primary)
}
.rarity-legendary {
  background: linear-gradient(135deg,gold,orange);
  color: var(--bg-primary)
}
.card-header {
  background: rgba(0,0,0,.3);
  padding: 20px;
  text-align: center;
  position: relative
}
.card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--border-primary),transparent)
}
.card-icon-large {
  font-size: 4em;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 10px currentColor);
  animation: 3s ease-in-out infinite float
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-10px)
  }
}
.card-title {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary)
}
.card-body {
  padding: 20px
}
.card-stat {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,.2);
  border-radius: 6px;
  transition: .2s
}
.card-stat:hover {
  background: rgba(96,165,250,.1)
}
.stat-label {
  color: var(--text-secondary)
}
.stat-value {
  color: var(--text-primary)
}
.stat-value.highlight {
  color: var(--accent-primary)
}
.card-level-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 20px 0;
  padding: 15px;
  background: rgba(0,0,0,.2);
  border-radius: 8px
}
.level-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--border-primary);
  transition: .3s;
  position: relative
}
.level-dot.filled {
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary)
}
.level-dot.filled::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  opacity: 0;
  animation: 2s infinite pulse
}
@keyframes pulse {
  0%,
  100% {
    opacity: .8
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    opacity: .5
  }
  0% {
    transform: scale(1);
    opacity: 0
  }
  100% {
    transform: scale(1.4);
    opacity: 0
  }
}
.card-action {
  padding: 20px;
  background: rgba(0,0,0,.2)
}
.card-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1em;
  cursor: pointer;
  transition: .3s;
  position: relative;
  overflow: hidden
}
.card-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: translate(-50%,-50%);
  transition: width .6s,height .6s
}
.card-button:hover::before {
  width: 300px;
  height: 300px
}
.card-button.cash {
  background: var(--success);
  color: var(--bg-primary)
}
.card-button.csp {
  background: var(--accent-primary);
  color: var(--bg-primary)
}
.card-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0,0,0,.3)
}
.card-button:disabled {
  background: var(--border-primary);
  color: var(--text-secondary);
  cursor: not-allowed;
  transform: none
}
.card-button.maxed {
  background: var(--purple);
  cursor: default
}
.card-button.maxed:hover {
  transform: none
}
body.theme-matrix .card-button,
body.theme-neon .card-button {
  color: #000;
  text-shadow: 0 0 3px rgba(255,255,255,.6)
}
.upgrade-card-collectible.epic::before,
.upgrade-card-collectible.rare::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);
  transform: rotate(45deg);
  animation: 3s infinite shine
}
@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg)
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg)
  }
}
.upgrade-card-collectible.maxed .card-icon-large {
  color: var(--purple);
  text-shadow: 0 0 20px var(--purple)
}
.upgrade-card-collectible.maxed .card-header {
  background: linear-gradient(135deg,rgba(167,139,250,.2),rgba(96,165,250,.2))
}
.ops-upgrade-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: .3s
}
.cash-btn {
  background: var(--success);
  color: var(--bg-primary)
}
.cash-btn:hover:not(:disabled) {
  background: #22c55e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34,197,94,.3)
}
.csp-btn {
  background: var(--accent-primary);
  color: var(--bg-primary)
}
.csp-btn:hover:not(:disabled) {
  background: var(--accent-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(96,165,250,.3)
}
.ops-upgrade-btn:disabled {
  background: var(--border-primary);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: .6
}
.ops-upgrade-btn.maxed {
  background: var(--purple);
  cursor: default
}
.btn-cost {
  font-size: 1.2em
}
.btn-label {
  font-size: .9em;
  opacity: .9
}
.terminal-container {
  background: #000;
  border: 1px solid #0f0;
  border-radius: 8px;
  padding: 20px;
  font-family: 'Courier New',monospace
}
.terminal-header {
  border-bottom: 1px solid #0f0;
  padding-bottom: 10px;
  margin-bottom: 20px
}
.terminal-title {
  color: #0f0;
  font-size: 1.4em;
  margin: 0
}
.terminal-prompt {
  color: #0f0;
  margin-right: 10px
}
.terminal-section {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px
}
.terminal-command {
  color: #0f0;
  margin-bottom: 10px;
  font-size: .9em
}
.terminal-output {
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 15px
}
.terminal-table {
  width: 100%;
  border-collapse: collapse
}
.terminal-table td {
  padding: 5px 0;
  font-size: .9em
}
.terminal-table .label {
  color: #888;
  text-align: left
}
.terminal-table .value {
  color: #0f0;
  text-align: right
}
.terminal-table .formula {
  color: #ff0;
  font-size: .85em
}
.terminal-upgrade-btn {
  background: 0 0;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 8px 20px;
  cursor: pointer;
  font-family: inherit;
  transition: .3s;
  margin-top: 15px;
  width: 100%
}
.terminal-upgrade-btn:hover:not(:disabled) {
  background: #0f0;
  color: #000;
  box-shadow: 0 0 10px rgba(0,255,0,.5)
}
.terminal-upgrade-btn:disabled {
  border-color: #333;
  color: #333;
  cursor: not-allowed
}
.terminal-maxed {
  color: #0f0;
  text-align: center;
  margin-top: 10px;
  font-style: italic
}
.terminal-output::-webkit-scrollbar {
  width: 8px
}
.terminal-output::-webkit-scrollbar-track {
  background: #111
}
.terminal-output::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px
}
.terminal-output::-webkit-scrollbar-thumb:hover {
  background: #0f0
}
@media (max-width:1200px) {
  .operations-sections-grid {
    grid-template-columns: 1fr
  }
}
.upgrade-card-collectible.locked {
  opacity: .6;
  filter: grayscale(50%)
}
.upgrade-card-collectible.locked .card-body,
.upgrade-card-collectible.locked .card-header {
  opacity: .8
}
.card-locked-content {
  padding: 15px;
  text-align: center
}
.card-locked-content .card-description {
  color: #999;
  font-size: .9em;
  margin: 0
}
.unlock-requirement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  color: orange;
  font-size: .9em;
  font-weight: 500
}
.unlock-requirement .lock-icon {
  font-size: 1.2em
}
.terminal-section.locked {
  opacity: .6
}
.terminal-error {
  color: #f44;
  font-weight: 700;
  margin-bottom: 5px
}
.terminal-locked-msg {
  color: orange;
  font-size: .9em
}
.upgrade-card-collectible:not(.locked):not(.maxed):not(.disabled) {
  box-shadow: 0 0 20px rgba(76,175,80,.3);
  border: 2px solid rgba(76,175,80,.5);
  animation: 2s ease-in-out infinite pulse-glow
}
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--purple);
    box-shadow: 0 0 20px rgba(76,175,80,.3)
  }
  50% {
    box-shadow: 0 0 15px 3px var(--purple);
    box-shadow: 0 0 30px rgba(76,175,80,.5)
  }
}
.right-stats {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 20px;
  height: fit-content;
  margin-left: 10px;
  flex: 1;
  overflow-y: auto;
  max-height: 100vh
}
.stat-section {
  margin-bottom: 24px
}
.stat-section:last-child {
  margin-bottom: 0
}
.section-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-primary);
  text-align: center
}
.stat-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 20px
}
.stat-label {
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px
}
.stat-value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 15px
}
.pause-btn-small {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--accent-primary);
  cursor: pointer;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  vertical-align: middle;
  opacity: 0.7;
  line-height: 1 !important;
  flex-shrink: 0;
  box-sizing: border-box !important;
}
.pause-btn-small:hover {
  opacity: 1;
  color: var(--success);
  transform: scale(1.15);
  outline: none !important;
  box-shadow: none !important;
}
.pause-btn-small:active {
  transform: scale(0.95);
  outline: none !important;
  box-shadow: none !important;
}
.pause-btn-small:focus {
  outline: none !important;
  box-shadow: none !important;
}
.pause-btn-small:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.pause-btn-small i {
  pointer-events: none;
  font-size: 12px !important;
  line-height: 1 !important;
  width: 12px;
  height: 12px;
}
.stat-line.total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-primary)
}
.stat-line.total .stat-label {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 16px
}
.stat-line.total .stat-value {
  font-size: calc(20px * var(--font-scale));
  color: var(--success);
  font-weight: 700
}
.value-positive {
  color: var(--success)
}
.value-negative {
  color: var(--danger)
}
.value-warning {
  color: var(--warning)
}
.value-info {
  color: var(--accent-primary)
}
.wages-breakdown {
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 20px;
  margin-top: 2px
}
.wages-breakdown span {
  color: var(--warning);
  font-weight: 600
}

.production-breakdown {
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 20px;
  margin-top: 2px
}
.production-breakdown span {
  color: var(--accent-primary);
  font-weight: 600
}

.breakdown-label {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  cursor: help;
  border-bottom: 1px dotted var(--text-secondary);
  transition: all 0.2s ease;
  position: relative;
}

.breakdown-label:hover {
  color: var(--accent-primary) !important;
  border-bottom-color: var(--accent-primary);
}
.net-income-line {
  background: linear-gradient(135deg,rgba(74,222,128,.1) 0,rgba(74,222,128,.05) 100%);
  border: 1px solid var(--success);
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .3s
}
.net-income-line .stat-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary)
}
.net-income-line .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--success)
}
.net-income-line.negative {
  background: linear-gradient(135deg,rgba(239,68,68,.1) 0,rgba(239,68,68,.05) 100%);
  border-color: var(--danger)
}
.net-income-line.negative .stat-value {
  color: var(--danger)
}
.bottom-stats {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  font-size: 12px
}
.bottom-stat {
  text-align: center
}
.bottom-stat-label {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px
}
.bottom-stat-value {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 16px
}
body.theme-neon .section-title {
  text-shadow: 0 0 10px currentColor,0 0 20px currentColor;
  border-bottom-color: var(--accent-primary)
}
body.theme-neon .net-income-line {
  box-shadow: 0 0 20px var(--success)
}
body.theme-neon .net-income-line.negative {
  box-shadow: 0 0 20px var(--danger)
}
body.theme-matrix .section-title::after {
  content: '_';
  animation: 1s infinite blink
}
body.theme-matrix .section-title {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  border-bottom-color: var(--accent-primary)
}
body.theme-matrix .net-income-line {
  box-shadow: 0 0 20px var(--success)
}
body.theme-matrix .net-income-line.negative {
  box-shadow: 0 0 20px var(--danger)
}
@keyframes blink {
  0%,
  50% {
    opacity: 1
  }
  100%,
  51% {
    opacity: 0
  }
}
body.diner .section-title {
  font-family: Georgia,serif;
  border-bottom-style: dashed
}
body.light .net-income-line {
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.right-panel-container {
  width: var(--right-panel-width);
  min-width: 280px;
  max-width: 600px;
  position: relative;
  display: flex;
  transition: width .1s ease-out
}
.resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  background: 0 0;
  transition: background .2s;
  z-index: 10
}
.resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(59,130,246,.3))
}
.resize-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 4px;
  height: 40px;
  background: var(--border-primary);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .2s
}
.resize-handle:hover::before {
  opacity: 1
}
body.resizing {
  cursor: ew-resize;
  user-select: none
}
body.resizing .resize-handle {
  background: linear-gradient(to right,transparent,rgba(59,130,246,.5))
}
.right-stats {
  --font-scale: 1;
  font-size: calc(1rem * var(--font-scale))
}
.section-title {
  font-size: calc(15px * var(--font-scale))
}
.stat-line {
  font-size: calc(14px * var(--font-scale));
  padding: calc(6px * var(--font-scale)) 0
}
.stat-label {
  font-size: calc(14px * var(--font-scale))
}
.stat-value {
  font-size: calc(15px * var(--font-scale))
}
.wages-breakdown {
  font-size: calc(14px * var(--font-scale))
}

.production-breakdown {
  font-size: calc(14px * var(--font-scale))
}
.net-income-line .stat-label {
  font-size: calc(16px * var(--font-scale))
}
.net-income-line .stat-value {
  font-size: calc(24px * var(--font-scale))
}
.bottom-stat-label {
  font-size: calc(13px * var(--font-scale))
}
.bottom-stat-value {
  font-size: calc(20px * var(--font-scale))
}
.right-stats:not(.resizing) * {
  transition: font-size .2s
}
.stat-section {
  margin-bottom: calc(24px * var(--font-scale))
}
.section-title {
  margin-bottom: calc(10px * var(--font-scale));
  padding-bottom: calc(6px * var(--font-scale))
}
.net-income-line {
  padding: calc(12px * var(--font-scale));
  margin-top: calc(10px * var(--font-scale))
}
.waste-breakdown {
  width: 100%
}
.waste-breakdown .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0
}
.waste-breakdown .stat-row.separator {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 600
}
.size-indicator {
  position: absolute;
  top: 10px;
  left: 20px;
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 100
}
body.resizing .size-indicator {
  opacity: 1
}
body.dark-purple .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(139,92,246,.3))
}
body.dark-purple .resize-handle::before {
  background: #7c3aed
}
body.dark-purple .size-indicator {
  background: rgba(76,29,149,.9)
}
body.midnight-green .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(16,185,129,.3))
}
body.midnight-green .resize-handle::before {
  background: #065f46
}
body.midnight-green .size-indicator {
  background: rgba(6,78,59,.9)
}
body.crimson-dark .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(239,68,68,.3))
}
body.crimson-dark .resize-handle::before {
  background: #991b1b
}
body.crimson-dark .size-indicator {
  background: rgba(127,29,29,.9)
}
body.theme-neon .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(255,0,255,.3));
  box-shadow: 0 0 10px rgba(255,0,255,.5)
}
body.theme-neon .resize-handle::before {
  background: #f0f;
  box-shadow: 0 0 10px #f0f
}
body.theme-neon .size-indicator {
  background: rgba(0,0,0,.9);
  color: #0ff;
  text-shadow: 0 0 10px #0ff;
  border: 1px solid #f0f
}
body.theme-neon.resizing .resize-handle {
  background: linear-gradient(to right,transparent,rgba(255,0,255,.5));
  box-shadow: 0 0 20px rgba(255,0,255,.8)
}
body.retro .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(255,165,0,.3))
}
body.retro .resize-handle::before {
  background: #ff6b35;
  border-radius: 0
}
body.retro .size-indicator {
  background: #1a0e0a;
  color: gold;
  font-family: monospace;
  border: 2px solid #ff6b35;
  border-radius: 0
}
body.diner .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(220,38,38,.3))
}
body.diner .resize-handle::before {
  background: #dc2626;
  border-radius: 10px
}
body.diner .size-indicator {
  background: rgba(254,243,199,.95);
  color: #7c2d12;
  font-family: Georgia,serif;
  border: 2px dashed #dc2626;
  border-radius: 8px
}
body.theme-matrix .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(0,255,0,.3))
}
body.theme-matrix .resize-handle::before {
  background: #0f0;
  animation: 2s infinite matrix-pulse
}
body.theme-matrix .size-indicator {
  background: rgba(0,0,0,.95);
  color: #0f0;
  font-family: 'Courier New',monospace;
  border: 1px solid #0f0;
  text-shadow: 0 0 5px #0f0
}
body.theme-matrix .size-indicator::after {
  content: '_';
  animation: 1s infinite matrix-blink
}
body.theme-matrix.resizing .resize-handle {
  background: linear-gradient(to right,transparent,rgba(0,255,0,.5));
  box-shadow: 0 0 20px rgba(0,255,0,.8)
}
body.theme-matrix .resize-handle:focus {
  outline: 2px solid #0f0;
  box-shadow: 0 0 10px rgba(0,255,0,.5)
}
@keyframes matrix-pulse {
  0%,
  100% {
    opacity: .5
  }
  50% {
    opacity: 1
  }
}
@keyframes matrix-blink {
  0%,
  50% {
    opacity: 1
  }
  100%,
  51% {
    opacity: 0
  }
}
@keyframes matrix-flicker {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1)
  }
  25% {
    opacity: 0.8;
    filter: brightness(1.2)
  }
  50% {
    opacity: 1;
    filter: brightness(0.9)
  }
  75% {
    opacity: 0.9;
    filter: brightness(1.1)
  }
}
body.light .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(59,130,246,.2))
}
body.light .resize-handle::before {
  background: #e5e7eb
}
body.light .size-indicator {
  background: rgba(255,255,255,.95);
  color: #1f2937;
  border: 1px solid #d1d5db;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
body.light .right-panel-container {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.1))
}
body.dark .resize-handle:hover {
  background: linear-gradient(to right,transparent,rgba(75,85,99,.3))
}
body.dark .resize-handle::before {
  background: #374151
}
body.dark .size-indicator {
  background: rgba(17,24,39,.95);
  color: #f3f4f6;
  border: 1px solid #374151
}
body.theme-neon .right-stats {
  box-shadow: 0 0 20px rgba(255,0,255,.3),inset 0 0 20px rgba(0,255,255,.1)
}
body.retro .right-stats {
  box-shadow: 4px 4px 0 rgba(0,0,0,.3)
}
body.diner .right-stats {
  box-shadow: 0 4px 8px rgba(0,0,0,.2)
}
body.theme-matrix .right-stats {
  box-shadow: 0 0 30px rgba(0,255,0,.2)
}
body.light .right-stats {
  box-shadow: 0 2px 10px rgba(0,0,0,.1)
}
body.theme-neon .right-panel-container {
  transition: width .1s ease-out,box-shadow .3s
}
body.retro .right-panel-container {
  transition: width .1s linear
}
body.theme-matrix .right-panel-container {
  transition: width .1s ease-out
}
.resize-handle:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px
}
body.light .resize-handle:focus {
  outline-color: #3b82f6
}
body.theme-neon .resize-handle:focus {
  outline-color: #f0f;
  box-shadow: 0 0 10px #f0f
}
body.theme-matrix .resize-handle:focus {
  outline-color: #0f0;
  box-shadow: 0 0 10px #0f0
}
.operations-explanation {
  margin-top: 20px;
  padding: 20px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  text-align: center
}
.operations-explanation h3 {
  margin: 0 0 15px;
  color: #fbbf24;
  text-align: center
}
.explanation-content p {
  margin: 10px 0;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  text-align: center
}
.explanation-content strong {
  color: #fbbf24
}
.upgrade-card-collectible.legendary {
  background: linear-gradient(135deg,rgba(255,223,0,.08),rgba(255,236,179,.12));
  border: 2px solid rgba(255,215,0,.6);
  box-shadow: 0 0 12px rgba(255,215,0,.25)
}
.upgrade-card-collectible.legendary .card-button {
  border-color: rgba(255,215,0,.4)!important
}
.card-rarity.rarity-legendary {
  background-color: gold;
  color: #000;
  text-shadow: 0 0 5px rgba(255,255,255,.5);
  font-weight: 700
}
.upgrade-card-collectible.legendary .card-title {
  color: inherit;
  text-shadow: 0 0 3px rgba(255,215,0,.3)
}
.upgrade-card-collectible.legendary .card-icon-large {
  text-shadow: 0 0 8px rgba(255,215,0,.6)
}
@keyframes legendaryGlow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(255,215,0,.2)
  }
  50% {
    box-shadow: 0 0 15px rgba(255,215,0,.3)
  }
}
.terminal-legendary {
  border-left: 4px solid gold;
  background: linear-gradient(90deg,rgba(255,215,0,.1),transparent)
}
.legendary-text {
  color: gold!important;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(255,215,0,.5)
}
.terminal-upgrade-btn.legendary-btn {
  background: linear-gradient(135deg,gold,#ff8c00);
  color: #000;
  font-weight: 700;
  border: 1px solid gold
}
.terminal-upgrade-btn.legendary-btn:hover {
  background: linear-gradient(135deg,#ffe066,#fa3);
  box-shadow: 0 0 10px rgba(255,215,0,.5)
}

/* Meat upgrade timeline spacing */
.upgrade-timeline h3 {
  margin-bottom: 20px !important;
}

.timeline-container {
  margin-top: 10px;
}

/* Clean, prominent upgrade cost display */
.upgrade-cost-simple {
  font-size: 22px;
  font-weight: bold;
  color: var(--accent-primary);
  margin-left: auto;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: 1px solid var(--accent-primary);
  min-width: 120px;
  text-align: center;
}

/* Help System Styling */
.help-container {
  display: flex;
  height: 100%;
  gap: 20px;
  padding: 20px;
}

.help-sidebar {
  width: 300px;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-primary);
  height: fit-content;
}

.help-sidebar h2 {
  margin: 0 0 20px 0;
  color: var(--text-primary);
  font-size: 24px;
  text-align: center;
}

.help-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-topic {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
}

.help-topic:hover {
  background: var(--bg-primary);
  border-color: var(--accent-primary);
  transform: translateX(5px);
}

.help-topic.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
  font-weight: bold;
}

.help-content {
  flex: 1;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid var(--border-primary);
  overflow-y: auto;
  max-height: 80vh;
}

.help-section {
  max-width: none;
}

.help-section h1 {
  color: var(--accent-primary);
  font-size: 32px;
  margin: 0 0 30px 0;
  text-align: center;
  border-bottom: 2px solid var(--accent-primary);
  padding-bottom: 15px;
}

.help-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.help-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.help-card h3 {
  color: var(--success);
  font-size: 20px;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-card p {
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0 0 15px 0;
}

.help-card ul, .help-card ol {
  color: var(--text-primary);
  line-height: 1.6;
  padding-left: 20px;
  margin: 0;
}

.help-card li {
  margin-bottom: 8px;
}

.help-card strong {
  color: var(--accent-primary);
  font-weight: 600;
}

.help-welcome {
  text-align: center;
  padding: 60px 20px;
}

.help-welcome h1 {
  color: var(--accent-primary);
  font-size: 36px;
  margin-bottom: 20px;
}

.help-welcome p {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.6;
}

/* Responsive design for help system */
@media (max-width: 1200px) {
  .help-container {
    flex-direction: column;
    padding: 15px;
  }
  
  .help-sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .help-topics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
  }
  
  .help-content {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .help-topics {
    grid-template-columns: 1fr;
  }
  
  .help-section h1 {
    font-size: 28px;
  }
  
  .help-card {
    padding: 15px;
  }
}

/* Mobile View Styles - DISABLED (broken implementation)
body.mobile-view .home-dashboard,
body.mobile-view .left-menu {
  display: none !important;
}

/* Don't hide right-stats on mobile - we're using it with a slide-out panel */
/* body.mobile-view .right-stats { display: none !important; } - REMOVED */

Make sure game-container and central-content are visible
body.mobile-view .game-container,
body.mobile-view .central-content {
  display: block !important;
}
*/

.mobile-layout {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-primary);
  flex-direction: column;
}

body.mobile-view .mobile-layout {
  display: flex;
}

.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-primary);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  height: 60px;
}

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

.mobile-resource {
  display: flex;
  align-items: center;
  gap: 5px;
}

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

.mobile-layout .resource-value {
  color: var(--text-primary);
  font-weight: bold;
  font-size: 16px;
}

.mobile-switch button {
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.mobile-switch button:hover {
  background: var(--accent-secondary);
}

/* Mobile Screens Container */
.mobile-screens-container {
  position: absolute;
  top: 60px; /* Below header */
  bottom: 60px; /* Above nav */
  left: 0;
  right: 0;
  overflow: hidden;
}

.mobile-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s, transform 0.3s;
}

.mobile-screen.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.screen-title {
  text-align: center;
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: bold;
}

.mobile-game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 30px;
  height: 100%;
}

.mobile-burger {
  font-size: 100px;
  animation: bounce 2s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.15s ease;
}

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

.mobile-flip-button {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  border: none;
  padding: 20px 40px;
  border-radius: 15px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mobile-flip-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4);
}

.mobile-flip-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(96, 165, 250, 0.3);
}

.mobile-info {
  display: flex;
  gap: 30px;
  text-align: center;
}

.mobile-price,
.mobile-demand {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 15px;
  min-width: 120px;
}

.info-label {
  display: block;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 5px;
}

.info-value {
  display: block;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}

/* Bottom Navigation */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-secondary);
  border-top: 2px solid var(--border-primary);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}

.nav-item {
  flex: 1;
  height: 100%;
  background: none;
  border: none;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: var(--accent-primary);
}

.nav-item.active {
  color: var(--accent-primary);
}

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

.nav-label {
  font-size: 10px;
  font-weight: 500;
}

/* Meat Buttons */
.mobile-meat-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: space-between !important;
}

.mobile-meat-option {
  flex: 1;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s ease;
  text-align: center;
}

.mobile-meat-option:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.mobile-meat-option:active {
  transform: translateY(0);
}

.mobile-meat-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.mobile-meat-option:disabled:hover {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
  transform: none;
}

.meat-amount {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.meat-price {
  font-size: 12px;
  color: var(--success);
  font-weight: bold;
}

/* Stats Screen */
.mobile-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 10px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: var(--accent-primary);
}

/* Upgrades Screen */
.mobile-upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-upgrade-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.upgrade-name {
  font-weight: bold;
  color: var(--text-primary);
  font-size: 16px;
}

.upgrade-owned {
  font-size: 12px;
  color: var(--text-secondary);
}

.upgrade-production {
  font-size: 12px;
  color: var(--success);
}

.upgrade-buy {
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.upgrade-buy:hover {
  background: var(--accent-secondary);
}

.upgrade-buy:disabled {
  background: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

.no-upgrades {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 20px;
  font-style: italic;
}

/* Meat Market Screen */
.meat-market-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.meat-market-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
}

.meat-market-item h3 {
  color: var(--text-primary);
  margin-bottom: 15px;
  text-align: center;
}

.market-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.market-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.market-stat .stat-label {
  color: var(--text-secondary);
}

.market-stat .stat-value {
  color: var(--text-primary);
  font-weight: bold;
}

.bulk-meat-options {
  display: flex;
  justify-content: center;
}

.bulk-meat-option {
  background: linear-gradient(135deg, var(--success), var(--accent-primary));
  color: white;
  border: none;
  border-radius: 10px;
  padding: 15px 20px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s;
}

.bulk-meat-option:hover {
  transform: translateY(-2px);
}

.bulk-amount {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.bulk-price {
  font-size: 14px;
  margin-bottom: 5px;
}

.bulk-discount {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

/* Mobile Navigation Hamburger Menu */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 80px;
  left: 15px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.mobile-nav-toggle:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--text-primary);
  margin: 5px auto;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-nav-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-nav-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-nav-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* Mobile Navigation Styles */
@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .left-menu {
    position: fixed !important;
    left: -100%;
    top: 60px;
    width: 280px;
    max-width: 80vw;
    height: calc(100vh - 60px);
    transition: left 0.3s ease;
    z-index: 9999;
    background: var(--bg-secondary);
    border-right: 2px solid var(--border-primary);
    overflow-y: auto;
  }
  
  .left-menu.active {
    left: 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  }
  
  /* Ensure menu buttons are touch-friendly on mobile */
  .left-menu .menu-button {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 14px;
  }
  
  /* Adjust game container when menu is open */
  .game-container {
    margin-left: 0 !important;
  }
  
  /* Central content takes full width on mobile */
  .central-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* Hide right stats panel on mobile for now */
  .right-stats {
    display: none !important;
  }
  
  /* Ensure home dashboard is visible */
  .home-dashboard {
    display: block !important;
  }
}

/* Mobile Stats Panel */
.mobile-stats-toggle {
  display: none;
  position: fixed;
  top: 80px;
  right: 15px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-stats-toggle:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

/* Stats Visualizations Styles */
.visualization-content {
  padding: 20px;
  overflow-y: auto;
  height: calc(100% - 60px);
}

.fun-fact-banner {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  animation: slideIn 0.5s ease-out;
}

.fun-fact-icon {
  font-size: 32px;
}

.fun-fact-text {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
}

.achievement-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.achievement-stat {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}

.achievement-stat.unlocked {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.achievement-stat.locked {
  opacity: 0.6;
  filter: grayscale(50%);
}

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

.achievement-info {
  flex: 1;
}

.achievement-title {
  font-weight: bold;
  color: var(--accent-primary);
  margin-bottom: 5px;
}

.achievement-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Graph Containers */
.graph-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.graph-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
}

.ascii-graph {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-primary);
  white-space: pre;
  overflow-x: auto;
}

/* Chart Styles */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.chart-50 {
  width: 100%;
}

.chart-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
}

.chart-container h3 {
  margin: 0 0 15px 0;
  color: var(--accent-primary);
}

/* Bar Chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  min-width: 100px;
  font-size: 14px;
  color: var(--text-secondary);
}

.bar-container {
  flex: 1;
  height: 30px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bar {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  transition: width 1s ease-out;
  position: relative;
}

.bar-value {
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.bar-percent {
  min-width: 50px;
  text-align: right;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Pie Chart */
.pie-chart-wrapper {
  display: flex;
  gap: 30px;
  align-items: center;
}

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-secondary);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.pie-total {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
}

.pie-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.pie-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.legend-label {
  font-size: 14px;
  color: var(--text-primary);
}

/* Fun Stats Grid */
.fun-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.fun-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.fun-stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.fun-stat-value {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-primary);
}

.idle-bar {
  width: 100%;
  height: 30px;
  background: var(--bg-tertiary);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.idle-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  transition: width 1s ease-out;
}

.idle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* Records Section */
.records-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
  margin-top: 30px;
}

.records-section h3 {
  margin: 0 0 15px 0;
  color: var(--accent-primary);
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.record-item span {
  color: var(--text-secondary);
}

.record-item strong {
  color: var(--accent-primary);
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .graph-row,
  .chart-row {
    grid-template-columns: 1fr;
  }
  
  .pie-chart-wrapper {
    flex-direction: column;
  }
  
  .fun-stats-grid {
    grid-template-columns: 1fr;
  }
}

.mobile-stats-panel {
  display: none;
  position: fixed;
  right: -250px;
  top: 60px;
  width: 220px;
  height: calc(100vh - 60px);
  background: var(--bg-secondary);
  border-left: 2px solid var(--border-primary);
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

.mobile-stats-panel.active {
  right: 0;
}

.mobile-stats-header {
  padding: 15px;
  background: var(--bg-tertiary);
  border-bottom: 2px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-stats-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--accent-primary);
}

.mobile-stats-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mobile-stats-pin {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mobile-stats-pin:hover {
  background: var(--bg-primary);
  border-color: var(--accent-primary);
}

.mobile-stats-pin.pinned {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
  transform: rotate(45deg);
}

.mobile-stats-close {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When pinned, hide overlay and adjust panel */
.mobile-stats-panel.pinned {
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.5);
}

.mobile-stats-content {
  padding: 15px;
  font-size: 14px;
  color: var(--text-primary);
}

.mobile-stat-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-primary);
}

.mobile-stat-section:last-child {
  border-bottom: none;
}

.mobile-stat-title {
  font-weight: bold;
  color: var(--accent-primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.mobile-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
}

.mobile-stat-label {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-stat-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.mobile-stat-value.positive {
  color: var(--success);
}

.mobile-stat-value.negative {
  color: var(--danger);
}

.mobile-stat-value.warning {
  color: var(--warning);
}

/* Combined stats on single line */
.mobile-stat-combined {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}

.mobile-stat-combined span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Mobile Stats Overlay */
.mobile-stats-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-stats-overlay.active {
  display: block;
  opacity: 1;
}

/* Show on mobile only */
@media (max-width: 768px) {
  .mobile-stats-toggle {
    display: flex;
  }
  
  .mobile-stats-panel {
    display: block;
  }
  
  /* Style the right stats panel for mobile - make it a floating panel */
  .right-panel-container {
    position: fixed;
    right: -100%;
    top: 0;
    width: 85% !important;
    max-width: 350px;
    height: 100vh;
    z-index: 999;
    transition: right 0.3s ease;
    background: var(--bg-primary);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
  }
  
  .right-panel-container.active {
    right: 0;
  }
  
  .right-stats,
  body.mobile-view .right-stats {
    display: block !important; /* Override any display:none including mobile-view */
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    padding: 50px 15px 15px 15px; /* Add top padding for close button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
  }
  
  /* Style mobile close button */
  .mobile-stats-close {
    display: block !important; /* Show on mobile */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 1001;
    color: var(--text-primary);
  }
  
  /* Ensure stat content is visible on mobile */
  .right-stats .stat-section {
    display: block !important;
  }
  
  /* Don't use !important for stat-line so JavaScript can hide them */
  .right-stats .stat-line {
    display: flex;
  }
  
  /* But ensure visible lines stay flex on mobile */
  .right-stats .stat-line:not([style*="display: none"]) {
    display: flex !important;
  }
  
  .right-stats .section-title {
    color: var(--text-primary) !important;
  }
  
  .right-stats .stat-label {
    color: var(--text-secondary) !important;
  }
  
  .right-stats .stat-value {
    color: var(--text-primary) !important;
  }
  
  /* Adjust font sizes for mobile readability */
  .right-stats .section-title {
    font-size: 16px !important;
  }
  
  .right-stats .stat-label {
    font-size: 12px !important;
  }
  
  .right-stats .stat-value {
    font-size: 14px !important;
  }
  
  .right-stats .bottom-stats {
    display: flex !important;
    justify-content: space-around;
    padding: 10px;
    border-top: 1px solid var(--border-primary);
  }
  
  /* Hide resize handle on mobile */
  .resize-handle {
    display: none !important;
  }
  
  /* Add mobile stats toggle button */
  .mobile-stats-btn {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    display: flex !important; /* Override inline style */
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 998;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  
  /* Overlay for mobile stats */
  .mobile-stats-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
  }
  
  .mobile-stats-overlay.active {
    display: block;
  }
}

/* Icon styling */
.stat-icon {
  font-size: 14px;
}

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
  
  .mobile-stats-btn {
    display: none !important;
  }
  
  .mobile-stats-overlay {
    display: none !important;
  }
  
  .mobile-stats-close {
    display: none !important;
  }
}

/* Mobile Upgrade Modal */
.upgrade-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  padding: 20px;
}

.upgrade-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-modal-content {
  background: var(--bg-secondary);
  border-radius: 10px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.upgrade-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.upgrade-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.upgrade-modal-header .close-modal {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-modal-body {
  padding: 15px;
  overflow-y: auto;
  flex: 1;
}

/* Mobile Home Dashboard Optimization */
@media (max-width: 768px) {
  /* Hide broken mobile layout */
  .mobile-layout {
    display: none !important;
  }
  
  /* Make home dashboard responsive */
  .home-dashboard {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    gap: 15px !important;
  }
  
  /* Normal padding for game content */
  .game-content,
  .tab-content,
  .right-panel {
    padding-bottom: 20px !important;
  }
  
  /* Hide side columns on mobile */
  .action-center,
  .info-center {
    display: none !important;
  }
  
  /* Main game area takes full width */
  .main-game-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* Burger flipper card optimization */
  .burger-flipper {
    padding: px !important;
    margin: 0 !important;
  }
  
  /* Make burger icon bigger (was too small) */
  .burger-icon img {
    width: 180px !important;
    height: 165px !important;
    object-fit: contain !important;
  }
  
  .burger-visual {
    margin: 10px auto !important;
  }
  
  /* Large, thumb-friendly flip button */
  .flip-button {
    width: 90% !important;
    height: 60px !important;
    font-size: 18px !important;
    margin: 15px auto !important;
    display: block !important;
    border-radius: 10px !important;
    font-weight: bold !important;
  }
  
  /* Condensed meat purchase section */
  .meat-purchase-options {
    display: flex !important;
    justify-content: space-between !important;
    gap: 5px !important;
    margin: 15px 0 !important;
  }
  
  .meat-option {
    flex: 1 !important;
    padding: 8px 4px !important;
    min-height: 60px !important;
    font-size: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .meat-option .meat-amount {
    font-size: 14px !important;
    font-weight: bold !important;
    margin-bottom: 3px !important;
  }
  
  .meat-option .meat-price {
    font-size: 11px !important;
    color: var(--success) !important;
  }
  
  /* Price controls mobile optimization - horizontal layout */
  .price-controls-section,
  .mobile-price-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 15px 0 !important;
    padding: 10px !important;
    background: var(--bg-tertiary) !important;
    border-radius: 8px !important;
  }
  
  .price-display {
    font-size: 16px !important;
    font-weight: bold !important;
    min-width: 80px !important;
    text-align: center !important;
  }
  
  .price-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Hide toggles on mobile or make them smaller */
  .toggle-container {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin: 10px 0 !important;
  }
  
  .auto-flipper-toggle,
  .employee-toggle {
    font-size: 12px !important;
  }
  
  /* Resource display with icons in header */
  .game-header .resource-container {
    font-size: 12px !important;
    gap: 8px !important;
  }
  
  .resource-item {
    min-width: auto !important;
    padding: 4px 6px !important;
  }
  
  .resource-label {
    display: none !important;
  }
  
  .resource-value::before {
    margin-right: 3px;
  }
  
  .resource-value.money::before {
    content: "$";
  }
  
  .resource-value.meat::before {
    content: "M:";
  }
  
  .resource-value.burgers::before {
    content: "B:";
  }
  
  .resource-value.csp::before {
    content: "CSP:";
  }
  
  .resource-value.rp::before {
    content: "RP:";
  }
  
  .resource-value.catering-credits::before {
    content: "CC:";
  }
  
  /* Bubble cards for upgrades */
  .mobile-upgrade-bubbles {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 15px 0 !important;
    flex-wrap: wrap !important;
  }
  
  /* Mobile upgrades - inline with content, not fixed */
  .mobile-upgrades {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 15px 0 !important;
    padding: 10px !important;
    background: var(--bg-tertiary) !important;
    border-radius: 8px !important;
  }
  
  .upgrade-bubble {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important; /* NOT absolute - that would break flex */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex: 0 0 auto !important; /* Prevent flex shrinking/growing */
    margin: 0 5px !important; /* Add horizontal spacing */
  }
  
  /* Ensure bubbles stay in row on mobile */
  .mobile-upgrades .upgrade-bubble {
    display: inline-flex !important;
    vertical-align: middle !important;
  }
  
  .upgrade-bubble:hover {
    transform: scale(1.1) !important;
    border-color: var(--accent-primary) !important;
  }
  
  .upgrade-bubble.affordable {
    border-color: var(--success) !important;
    animation: pulse 2s infinite !important;
  }
  
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
  }
  
  .upgrade-bubble .bubble-icon {
    font-size: 20px !important;
  }
  
  .upgrade-bubble .bubble-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: var(--danger) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
  }
  
  /* Catering section mobile */
  .catering-section {
    margin-top: 15px !important;
    padding: 10px !important;
  }
  
  .catering-header {
    font-size: 14px !important;
  }
  
  /* Special promotions mobile */
  .special-promos-card {
    margin-top: 15px !important;
  }
  
  /* Show mobile-only elements on mobile */
  .mobile-only {
    display: block !important;
  }
  
  /* But keep flex display for mobile-upgrades */
  .mobile-upgrades.mobile-only {
    display: flex !important;
  }
  
  /* FORCE mobile meat buttons to be horizontal - OVERTHINKING FIX */
  .mobile-meat-buttons.mobile-only {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* FORCE price controls to be horizontal - SAME FIX AS MEAT */
  .price-controls-section.mobile-only {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  /* Mobile Demand Bar Styles - WIDER HORIZONTAL VERSION */
  .mobile-demand-section {
    width: 95% !important; /* Take up most of the screen width */
    margin: 20px auto !important; /* Center it horizontally */
    padding: 12px !important;
    background: var(--bg-tertiary) !important;
    border-radius: 10px !important;
    border: 2px solid var(--border-primary) !important;
  }
  
  .mobile-demand-section.mobile-only {
    display: block !important;
  }
  
  .mobile-demand-label {
    font-size: 14px !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
    text-align: center !important;
  }
  
  .mobile-demand-bar {
    position: relative !important;
    height: 35px !important; /* Normal height, not thick */
    width: 100% !important; /* Full width of container */
    background: var(--bg-primary) !important;
    border: 2px solid var(--border-primary) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  }
  
  .mobile-demand-fill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, var(--success), var(--accent-primary)) !important;
    transition: width 0.3s ease !important;
    width: 100% !important;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.2) !important;
  }
  
  .mobile-demand-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 16px !important; /* Reasonable size */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    z-index: 1 !important;
  }
  
  /* Hide desktop meat market on mobile */
  .meat-market {
    display: none !important;
  }
  
  /* Hide desktop price controls on mobile */
  .pricing-control {
    display: none !important;
  }
}

/* More Screen */
.mobile-more-menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 0;
}

.more-option {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--text-primary);
  transition: all 0.2s;
}

.more-option:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

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

.option-text {
  font-size: 16px;
  font-weight: bold;
}

/* Phase 4: Unlock-aware features CSS */

/* Price controls - will be hidden until unlocked */
.mobile-price-controls {
  width: 100%;
  max-width: 400px;
  margin: 20px 0;
}

.price-adjustment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.price-btn {
  width: 50px;
  height: 50px;
  font-size: 24px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.price-btn:hover {
  background: var(--accent-secondary);
  transform: scale(1.1);
}

.price-btn:active {
  transform: scale(0.95);
}

.mobile-layout .price-display {
  text-align: center;
}

.mobile-layout .current-price {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
}

.price-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.increment-buttons {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.inc-btn {
  padding: 5px 15px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 5px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.inc-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.inc-btn.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

/* Stats bar */
.mobile-stats-bar {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--bg-tertiary);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid var(--border-primary);
  z-index: 999;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-primary);
}

/* Note: Stats bar styling is here but not implemented yet in Phase 4 */

/* Enhanced meat market */
.meat-options-detailed {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.meat-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.meat-icon {
  font-size: 30px;
}

.meat-details {
  flex: 1;
}

.meat-amount {
  font-weight: bold;
  color: var(--text-primary);
}

.mobile-layout .meat-price {
  color: var(--accent-primary);
  font-size: 14px;
}

.meat-buy-btn {
  padding: 10px 20px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.meat-buy-btn:hover {
  background: var(--accent-secondary);
}

.meat-buy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--text-secondary);
}

/* Auto buyer toggle */
.auto-buyer-section {
  margin-top: 20px;
  padding: 15px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}

.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

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

.mobile-layout .toggle-slider {
  width: 40px;
  height: 20px;
  background: var(--border-primary);
  border-radius: 10px;
  position: relative;
  transition: background 0.3s;
}

.mobile-layout .toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

.mobile-layout .toggle-container input[type="checkbox"]:checked + .toggle-slider {
  background: var(--accent-primary);
}

.mobile-layout .toggle-container input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.mobile-layout .toggle-label {
  color: var(--text-primary);
  font-weight: 500;
}

/* Locked feature cards */
.locked-feature {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  opacity: 0.7;
  margin: 10px 0;
}

.lock-icon {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: 0.6;
}

.lock-title {
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 5px;
  font-size: 16px;
}

.lock-requirement {
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
}

/* No upgrades message */
.no-upgrades {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Meat multiplier display */
.meat-multiplier-display {
  text-align: center;
  padding: 10px;
  background: var(--accent-primary);
  color: white;
  border-radius: 5px;
  margin-bottom: 15px;
  font-weight: bold;
}

/* Mobile Sub-tabs System */
.mobile-subtabs {
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-subtabs::-webkit-scrollbar {
  display: none;
}

.subtab {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.subtab.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.subtab.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.subtab-content {
  display: none;
  padding: 10px;
}

.subtab-content.active {
  display: block;
}

/* Mobile upgrade items */
.mobile-upgrade-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-upgrade-item.locked {
  opacity: 0.6;
}

.upgrade-info {
  flex: 1;
}

.upgrade-name {
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.upgrade-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.upgrade-owned {
  font-size: 12px;
  color: var(--accent-primary);
}

.upgrade-buy {
  padding: 10px 15px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  white-space: nowrap;
}

.upgrade-buy:disabled {
  opacity: 0.5;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.no-upgrades {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Prestige System Styles */
.prestige-overview {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.prestige-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.stat-card h3 {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Only apply golden styling to prestige-related stat values */
.prestige-overview .stat-value {
  color: var(--prestige-gold);
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px var(--prestige-gold);
}

.prestige-action {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.action-button {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
  user-select: none;
}

.prestige-btn {
  background: var(--prestige-gradient);
  color: #000;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  margin-bottom: 15px;
}

.prestige-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.prestige-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.prestige-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  max-width: 300px;
}

/* Prestige Requirements Display */
.prestige-requirements {
  margin: 15px 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 400px;
}

.requirement-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.requirement-item {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-align: left;
}

.requirement-met {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #4caf50;
}

.requirement-unmet {
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid rgba(244, 67, 54, 0.4);
  color: #f44336;
}

.prestige-bonuses {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.prestige-bonuses h3 {
  color: var(--prestige-gold);
  margin-bottom: 15px;
  text-align: center;
}

/* Next tier bonuses special styling */
.prestige-bonuses.next-tier-bonuses {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
  border: 2px solid var(--prestige-gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.prestige-bonuses.next-tier-bonuses::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, transparent, var(--prestige-gold), transparent);
  opacity: 0.3;
  animation: shimmer 3s infinite;
  z-index: -1;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.next-tier-bonuses h3 {
  color: var(--prestige-gold);
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.next-tier-bonuses .bonus-value {
  color: #4ade80;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(74, 222, 128, 0.3);
}

.bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.bonus-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: var(--bg-tertiary);
  border-radius: 5px;
  border: 1px solid var(--border-primary);
}

.bonus-name {
  color: var(--text-primary);
}

.bonus-value {
  color: var(--success);
  font-weight: bold;
}

.prestige-info {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
}

.prestige-info h3 {
  color: var(--text-primary);
  margin-bottom: 15px;
}

.prestige-info ul {
  list-style: none;
  padding: 0;
}

.prestige-info li {
  color: var(--text-secondary);
  padding: 5px 0;
  position: relative;
  padding-left: 20px;
}

.prestige-info li:before {
  content: "⭐";
  position: absolute;
  left: 0;
  color: var(--prestige-gold);
}

/* Prestige Modal Styles */
.prestige-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.prestige-modal-overlay.show {
  opacity: 1;
}

.prestige-modal {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 2px solid var(--prestige-gold);
  border-radius: 15px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3);
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.prestige-modal-overlay.show .prestige-modal {
  transform: scale(1);
}

.prestige-modal-header {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border-bottom: 2px solid var(--prestige-gold);
  color: var(--text-primary);
  padding: 20px;
  text-align: center;
  border-radius: 13px 13px 0 0;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.prestige-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: var(--prestige-gold);
  text-shadow: 0 0 15px var(--prestige-gold);
}

.prestige-modal-subtitle {
  margin-top: 5px;
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
}

.prestige-modal-content {
  padding: 25px;
}

.prestige-rewards {
  margin-bottom: 25px;
}

.reward-item {
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.reward-item:hover {
  border-color: var(--prestige-gold);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.reward-icon {
  font-size: 32px;
  margin-right: 15px;
  text-shadow: 0 0 10px currentColor;
}

.reward-info {
  flex: 1;
}

.reward-title {
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.reward-value {
  color: var(--prestige-gold);
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 8px var(--prestige-gold);
}

.prestige-warning {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: flex-start;
}

.warning-icon {
  font-size: 24px;
  margin-right: 12px;
  color: var(--warning);
}

.warning-text {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.warning-text strong {
  color: var(--warning);
}

.prestige-modal-actions {
  padding: 20px 25px;
  display: flex;
  gap: 15px;
  border-top: 1px solid var(--border-primary);
}

.prestige-modal-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
}

.cancel-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.confirm-btn {
  background: var(--prestige-gradient);
  color: #000;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* Modal animation effects */
@keyframes modalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.prestige-modal-overlay.show .confirm-btn {
  animation: modalPulse 2s ease-in-out infinite;
}

/* Prestige Bonus Preview Styles */
.prestige-bonuses-preview {
  margin: 25px 0;
}

.prestige-bonuses-preview h3 {
  color: var(--prestige-gold);
  font-size: 18px;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 0 0 10px var(--prestige-gold);
}

.bonus-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bonus-preview-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.bonus-preview-item:hover {
  border-color: var(--prestige-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.bonus-preview-name {
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bonus-preview-value {
  color: var(--prestige-gold);
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 5px var(--prestige-gold);
}

/* Prestige Shop Styles */
.prestige-shop-section {
  margin-top: 30px;
  padding: 20px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 2px solid var(--prestige-gold);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.prestige-shop-section h3 {
  color: var(--prestige-gold);
  text-align: center;
  margin-bottom: 10px;
  font-size: 24px;
  text-shadow: 0 0 15px var(--prestige-gold);
}

.shop-description {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-style: italic;
}

.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.shop-item {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.shop-item.available {
  border-color: var(--success);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.shop-item.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}

.shop-item.unavailable {
  border-color: var(--border-secondary);
  opacity: 0.7;
}

.shop-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.shop-item-icon {
  font-size: 32px;
  margin-right: 12px;
}

.shop-item-info {
  flex: 1;
}

.shop-item-name {
  font-weight: bold;
  color: var(--text-primary);
  font-size: 16px;
}

.shop-item-purchases {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.shop-item-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.shop-item-effect {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--prestige-gold);
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
}

.shop-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-item-cost {
  font-size: 16px;
  font-weight: bold;
  color: var(--prestige-gold);
  text-shadow: 0 0 8px var(--prestige-gold);
}

.shop-buy-button {
  background: linear-gradient(135deg, var(--success), #22c55e);
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.shop-buy-button:hover:not(.disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.shop-buy-button.disabled {
  background: var(--border-primary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Prestige Tabs Styles */
.prestige-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-primary);
  margin-bottom: 20px;
}

.prestige-tab {
  background: var(--bg-tertiary);
  border: none;
  padding: 12px 24px;
  color: var(--text-secondary);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  border-top: 3px solid transparent;
  flex: 1;
}

.prestige-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.prestige-tab.active {
  background: var(--bg-secondary);
  color: var(--prestige-gold);
  border-top-color: var(--prestige-gold);
  text-shadow: 0 0 8px var(--prestige-gold);
}

.prestige-tab-content {
  min-height: 500px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Talent Tree Styles */
.talent-tree-section {
  padding: 20px;
}

.talent-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.talent-tree-header h3 {
  color: var(--prestige-gold);
  font-size: 24px;
  text-shadow: 0 0 15px var(--prestige-gold);
  margin: 0;
}

.talent-points-display {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 2px solid var(--prestige-gold);
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.talent-points-label {
  color: var(--text-secondary);
  margin-right: 8px;
}

.talent-points-value {
  color: var(--prestige-gold);
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 0 10px var(--prestige-gold);
}

.talent-tree-description {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-style: italic;
}

.talent-tree-container {
  max-width: 1200px;
  margin: 0 auto;
}

.talent-paths {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.root-path {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-paths {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.talent-path {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
}

.idle-path {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.hybrid-path {
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.active-path {
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.path-header {
  text-align: center;
  margin-bottom: 20px;
}

.path-header h4 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: var(--text-primary);
}

.path-description {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.talent-nodes {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.talent-row {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.talent-node {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 12px;
  width: 120px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.talent-node:hover .talent-tooltip {
  display: block;
}

.talent-node.locked {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--border-secondary);
}

.talent-node.available {
  border-color: var(--success);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
  transform: scale(1.02);
}

.talent-node.unlocked {
  border-color: var(--prestige-gold);
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.talent-node.maxed {
  border-color: var(--prestige-gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.talent-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.talent-name {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.talent-level {
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.talent-cost {
  font-size: 10px;
  color: var(--prestige-gold);
  font-weight: bold;
}

.talent-tooltip {
  display: none;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: var(--bg-primary);
  border: 2px solid var(--prestige-gold);
  border-radius: 8px;
  padding: 12px;
  width: 250px;
  z-index: 1000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.tooltip-name {
  color: var(--prestige-gold);
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}

.tooltip-description {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.tooltip-effect {
  color: var(--success);
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}

.tooltip-cost {
  color: var(--prestige-gold);
  font-size: 11px;
  margin-bottom: 5px;
}

.tooltip-prereqs {
  color: var(--text-secondary);
  font-size: 10px;
  font-style: italic;
}

.talent-tree-stats {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.talent-stat {
  text-align: center;
}

.talent-stat-label {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 5px;
}

.talent-stat-value {
  color: var(--prestige-gold);
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 0 10px var(--prestige-gold);
}

/* Formula Display Styles for CSP Shop */
.formula-display {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid var(--accent-primary);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  font-family: 'Courier New', monospace;
}

.formula-title {
  color: var(--accent-primary);
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  text-align: center;
}

.formula-math {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 8px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  letter-spacing: 1px;
  margin: 6px 0;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.formula-vars {
  color: var(--text-secondary);
  font-size: 11px;
  text-align: center;
  margin: 4px 0;
  font-style: italic;
}

.formula-current {
  color: var(--success);
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  margin-top: 8px;
}

.formula-desc {
  color: var(--warning);
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  margin-top: 8px;
}

/* Employee Unlock System Styles */
.employee-card.locked {
  opacity: 0.6;
  border-color: #64748b;
  background: rgba(71, 85, 105, 0.2);
}

.employee-card.locked .employee-name {
  color: #94a3b8;
}

.hire-button.locked {
  background: #374151;
  color: #9ca3af;
  border-color: #4b5563;
  cursor: not-allowed;
}

.hire-button.locked:hover {
  background: #374151;
  transform: none;
  box-shadow: none;
}

.lock-reason {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 8px 0;
  font-size: 11px;
  color: #fca5a5;
  text-align: center;
  font-weight: 500;
}

/* Advertising System Styles */
.advertising-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.advertising-header {
  margin-bottom: 30px;
  text-align: center;
}

.advertising-header h3 {
  color: var(--text-primary);
  font-size: 24px;
  margin-bottom: 8px;
}

.advertising-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

.advertising-section {
  margin-bottom: 30px;
  width: 100%;
  max-width: 600px;
}

.advertising-section h4 {
  color: var(--text-primary);
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-primary);
}

.advertising-list {
  display: grid;
  gap: 15px;
}

.advertising-upgrade {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.advertising-upgrade:hover:not(.purchased) {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.advertising-upgrade.purchased {
  opacity: 0.7;
  cursor: default;
  background: rgba(76, 222, 128, 0.1);
  border-color: var(--success);
}

.advertising-upgrade.cant-afford {
  opacity: 0.6;
  cursor: not-allowed;
}

.upgrade-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.upgrade-header h4 {
  color: var(--text-primary);
  font-size: 16px;
  margin: 0;
}

.upgrade-cost {
  color: var(--warning);
  font-weight: bold;
  font-size: 14px;
}

.advertising-upgrade.purchased .upgrade-cost {
  color: var(--success);
}

.upgrade-description {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.upgrade-effects {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.effect-demand {
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: bold;
}

.effect-price {
  color: var(--warning);
  font-size: 12px;
  font-weight: bold;
}

.income-projection {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  background: rgba(96, 165, 250, 0.1);
  border-radius: 4px;
  font-size: 11px;
}

.current-income {
  color: var(--text-secondary);
}

.arrow {
  color: var(--accent-primary);
  font-weight: bold;
}

.projected-income {
  color: var(--success);
  font-weight: bold;
}

.percent-increase {
  color: var(--success);
  font-weight: bold;
}

/* Comprehensive Advertising UI Components */

/* Campaign Cards */
.campaign-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.campaign-card.purchased {
  background: linear-gradient(135deg, var(--accent-primary), var(--bg-secondary));
  border-color: var(--accent-primary);
}

.campaign-card.affordable {
  border-color: var(--success);
  box-shadow: 0 0 20px var(--success);
}

.campaign-card.locked {
  opacity: 0.6;
  background: var(--bg-primary);
  border-color: var(--border-secondary);
  border-style: dashed;
}

/* Timeline Components */
.timeline-node {
  background: var(--bg-secondary);
  border: 3px solid var(--border-primary);
  transition: all 0.3s ease;
}

.timeline-node.completed {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 15px var(--accent-primary);
}

.timeline-node.available {
  border-color: var(--success);
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  animation: pulse 2s infinite;
}

/* Campaign Buttons */
.campaign-button {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.campaign-button.can-afford {
  background: linear-gradient(135deg, var(--success) 0%, var(--success) 100%);
  color: var(--text-primary);
  box-shadow: 0 4px 15px var(--success);
}

.campaign-button.can-afford:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--success);
}

/* Status Indicators */
.status-active {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  color: var(--text-primary);
  box-shadow: 0 2px 8px var(--accent-primary);
}

.status-available {
  background: var(--success);
  color: var(--text-primary);
  border: 1px solid var(--success);
}

.status-locked {
  background: var(--danger);
  color: var(--text-primary);
  border: 1px solid var(--danger);
}

/* Stat Values */
.stat-value {
  color: var(--warning);
  font-weight: 700;
}

.stat-item-value {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Meat Market Timer and Progress Bar */
.market-timer {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.market-progress-bar-container {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--border-primary);
}

.market-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  width: 0%;
  transition: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}


/* === SHOP SYSTEM STYLES === */

/* Shop Section Styles */
.shop-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-primary);
}

.restore-purchases-button, .redeem-code-button {
  position: relative;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.restore-purchases-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.restore-purchases-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.restore-purchases-button:active {
  transform: translateY(0);
}

.redeem-code-button {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.redeem-code-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6);
}

.redeem-code-button:active {
  transform: translateY(0);
}

.shop-title {
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

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

.shop-currency-display {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.currency-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 10px 15px;
  border-radius: 12px;
  border: 1px solid var(--border-primary);
}

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

.currency-label {
  color: var(--text-secondary);
  font-weight: 600;
}

.currency-value {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 18px;
}

/* Shop Tabs */
.shop-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 25px;
  background: var(--bg-secondary);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--border-primary);
}

.shop-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shop-tab.active {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.shop-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.tab-icon {
  font-size: 16px;
}

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

/* Shop Content */
.shop-content {
  min-height: 400px;
}

.shop-tab-content {
  display: none;
}

.shop-tab-content.active {
  display: block;
}

/* Offline Tab Styles */
.offline-intro {
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}

.offline-intro h3 {
  color: var(--primary);
  margin-bottom: 10px;
  font-size: 1.5em;
}

.offline-intro p {
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Current Stats Grid */
.offline-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
  padding: 20px;
}

.offline-stat-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}

.offline-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border-color: var(--primary);
}

.offline-stat-card .stat-icon {
  font-size: 2.5em;
  opacity: 0.8;
}

.offline-stat-card .stat-content {
  flex: 1;
}

.offline-stat-card .stat-title {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.offline-stat-card .stat-value {
  color: var(--primary);
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 5px;
}

.offline-stat-card .stat-description {
  color: var(--text-secondary);
  font-size: 0.85em;
}

/* Upgrades Grid */
.offline-upgrades-grid {
  padding: 0 20px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upgrade-section {
  margin-bottom: 40px;
  width: 100%;
  max-width: 800px;
  text-align: center;
}

.upgrade-section-title {
  color: var(--primary);
  margin-bottom: 20px;
  font-size: 1.2em;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
}

.upgrade-levels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 15px;
  justify-content: center;
  max-width: 100%;
}

.upgrade-level {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  transform: none !important;
}

.upgrade-level.unlocked {
  background: linear-gradient(135deg, #2a4d3a 0%, #1e3a2e 100%);
  border-color: #4a9d5f;
}

.upgrade-level.next {
  border-color: var(--warning);
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
}

.upgrade-level.next:not(.cant-afford) {
  animation: pulse 2s infinite;
}

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

.upgrade-level.cant-afford {
  opacity: 0.6;
}

.level-name {
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--text);
}

.level-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--warning);
}

.spatula-icon, .seed-icon {
  font-size: 1.2em;
}

.level-status {
  color: #4a9d5f;
  font-size: 1.5em;
  margin-top: 10px;
}

.upgrade-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: bold;
  transition: all 0.3s ease;
  width: 100%;
}

.upgrade-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.upgrade-btn:disabled {
  background: var(--border);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Footer */
.offline-footer {
  padding: 20px;
  border-top: 2px solid var(--border);
  text-align: center;
}

.seed-balance {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid var(--success);
  font-size: 1.2em;
  font-weight: bold;
  color: var(--success);
}

/* Shop Categories */
.shop-categories {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.shop-category {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 15px;
  padding: 25px;
}

.category-title {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Currency Purchase Section */
.currency-purchase-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
}

.section-title {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.currency-description {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.currency-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Privacy Modal Styling */
.privacy-modal {
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}

.privacy-modal h2 {
  margin: 0 0 10px;
}

.privacy-modal h3 {
  margin-top: 20px;
  font-size: 1.2em;
  color: #cf6679;
}

.privacy-modal ul {
  margin: 10px 0 20px 20px;
  list-style-type: disc;
}

.privacy-modal p {
  margin: 8px 0;
  line-height: 1.6;
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.modal-header h2 {
  text-align: center;
  margin: 0;
  flex: 1;
}

.modal-header .modal-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.last-updated {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
}

/* Sticky close button for Terms of Service modal */
#terms-of-service-modal .modal-header {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 100;
  padding: 15px 20px;
  margin: -20px -20px 20px -20px;
  border-bottom: 1px solid var(--border-primary);
}

#terms-of-service-modal .modal-close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid var(--border-primary);
}

#terms-of-service-modal .modal-close:hover {
  background: var(--hover-bg);
  transform: translateY(-50%) scale(1.1);
}



/* Auth checkbox styles for Create Account dialog */
.auth-checkboxes {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.auth-checkboxes .checkbox-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.auth-checkboxes .checkbox-item:last-child {
    margin-bottom: 0;
}

.auth-checkboxes .checkbox-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.auth-checkboxes input[type='checkbox'] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #4fc3f7;
    flex-shrink: 0;
    border-radius: 4px;
}

.auth-checkboxes label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    user-select: none;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: block;
}

.auth-checkboxes a {
    display: inline !important;
    color: #4fc3f7;
    text-decoration: underline;
    text-decoration-color: #4fc3f7;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
    word-break: normal;
    word-wrap: normal;
    white-space: normal;
    max-width: none;
    width: auto;
}

.auth-checkboxes a:hover {
    color: #60d5ff;
    text-decoration-color: #60d5ff;
}

/* Auth dialog general improvements */
.auth-dialog-content {
    max-width: 600px;
    width: 90%;
    background: linear-gradient(135deg, #1a1f3a, #0a0e27);
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* CSP Paywall Button Theme Protection */
.csp-paywall .paywall-button {
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
}

.csp-paywall .paywall-button.ready {
    animation-fill-mode: both !important;
}

/* Prevent themes from rotating/skewing CSP button */
body[class*="theme-"] .csp-paywall .paywall-button {
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
}

body[class*="theme-"] .csp-paywall .paywall-button:not(.pulsing):not(:hover) {
    transform: none !important;
}

body[class*="theme-"] .csp-paywall .paywall-button.pulsing {
    animation: pulse 2s ease-in-out infinite !important;
}

body[class*="theme-"] .csp-paywall .paywall-button.ready:hover {
    transform: translateY(-2px) !important;
}

.auth-dialog-content h2 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 24px;
    text-align: center;
}

.auth-dialog-content p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}

.auth-dialog-content input[type='email'],
.auth-dialog-content input[type='password'] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.auth-dialog-content input[type='email']:focus,
.auth-dialog-content input[type='password']:focus {
    outline: none;
    border-color: #4fc3f7;
    background: rgba(255, 255, 255, 0.15);
}

.auth-dialog-content .auth-button {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.auth-dialog-content .auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.auth-dialog-content .google-auth {
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-dialog-content .google-auth img {
    width: 20px;
    height: 20px;
}

.auth-dialog-content .auth-divider {
    text-align: center;
    margin: 20px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    position: relative;
}

.auth-dialog-content .auth-divider::before,
.auth-dialog-content .auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.auth-dialog-content .auth-divider::before {
    left: 0;
}

.auth-dialog-content .auth-divider::after {
    right: 0;
}

.auth-dialog-content .close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.auth-dialog-content .close-button:hover {
    color: #fff;
}

/* Enhanced Auth Form Styles */
.auth-dialog-content .form-group {
    margin-bottom: 20px;
}

.auth-dialog-content .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.auth-dialog-content .form-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.auth-dialog-content .form-group input:focus {
    outline: none;
    border-color: #4fc3f7;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
}

.auth-dialog-content .form-group input:invalid {
    border-color: #f87171;
}

.auth-dialog-content .field-error {
    color: #f87171;
    font-size: 12px;
    margin-top: 5px;
    min-height: 16px;
}

.auth-dialog-content .password-requirements {
    margin-top: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.auth-dialog-content .requirement {
    font-size: 12px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.auth-dialog-content .requirement:last-child {
    margin-bottom: 0;
}

.auth-dialog-content .terms-notice {
    margin: 15px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    text-align: center;
}

.auth-dialog-content button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.auth-dialog-content button[disabled]:hover {
    transform: none !important;
    box-shadow: none !important;
}

.auth-dialog-content .security-notice {
    font-size: 13px;
    line-height: 1.4;
}

/* === PRESTIGE RESET OVERLAY === */
.prestige-reset-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.5s ease-in;
}



:root { --app-header-height: 56px; }

/* Removed duplicate rules - now handled by #homeCompactStats selector above */

/* Home Unlock Cards: density token adjustments by breakpoint */
@media (max-width: 1599px) {
  :root {
    --uc-pad: 16px;
    --uc-gap: 14px;
    --uc-title: 17px;
    --uc-sub: 12.5px;
    --uc-price: 13.5px;
    --uc-btn: 13.5px;
    --uc-emoji: 26px;
  }
}
@media (max-width: 1280px) {
  :root {
    --uc-pad: 14px;
    --uc-gap: 12px;
    --uc-title: 16px;
    --uc-sub: 12px;
    --uc-price: 13px;
    --uc-btn: 13px;
    --uc-emoji: 24px;
  }
}
@media (max-width: 1200px) {
  :root {
    --uc-pad: 12px;
    --uc-gap: 10px;
    --uc-title: 15px;
    --uc-sub: 11.5px;
    --uc-price: 12.5px;
    --uc-btn: 12.5px;
    --uc-emoji: 22px;
  }
}
@media (max-width: 768px) {
  :root {
    --uc-pad: 10px;
    --uc-gap: 8px;
    --uc-title: 14px;
    --uc-sub: 11px;
    --uc-price: 12px;
    --uc-btn: 12px;
    --uc-emoji: 20px;
  }
}

/* Home only: Unlock cards responsive grid */
#home-section .home-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--uc-gap);
}
@media (max-width: 1280px) {
  #home-section .home-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media (max-width: 1200px) {
  #home-section .home-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  #home-section .home-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Home only: Apply density tokens to unlock cards */
#home-section .unlock-card {
  padding: var(--uc-pad);
  border-radius: var(--uc-radius);
  display: block; /* card remains block; item rows handle inner grid */
}

#home-section .unlock-card .unlock-card-header .uc-title {
  font-size: var(--uc-title);
  line-height: 1.2;
  margin: 0;
}

#home-section .unlock-card .unlock-card-items {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--uc-gap);
}

#home-section .unlock-card .unlock-item {
  display: grid;
  grid-template-columns: 1fr auto; /* info | quick-buy */
  align-items: center;
  gap: var(--uc-gap);
}

#home-section .unlock-card .unlock-item-name.uc-title {
  font-size: var(--uc-title);
  line-height: 1.2;
}
#home-section .unlock-card .unlock-item-desc.uc-sub {
  font-size: var(--uc-sub);
  line-height: 1.35;
  color: var(--text-secondary);
}

#home-section .unlock-card .uc-actions {
  justify-self: end;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#home-section .unlock-card .unlock-item-button.uc-price {
  font-size: var(--uc-price);
  padding: 8px 12px;
  min-height: 44px; /* touch target */
}

/* Clamp long text to avoid tall cards */
#home-section .unlock-card .uc-title,
#home-section .unlock-card .uc-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
#home-section .unlock-card .uc-title { -webkit-line-clamp: 2; line-clamp: 2; }
#home-section .unlock-card .uc-sub { -webkit-line-clamp: 2; line-clamp: 2; }

/* Optional: fluid scaling between 1280–1600 */
@media (min-width: 1280px) and (max-width: 1600px) {
  #home-section .unlock-card .unlock-card-header .uc-title { font-size: clamp(15px, 1.1vw, 18px); }
  #home-section .unlock-card .unlock-item-button.uc-price { font-size: clamp(12.5px, .95vw, 14px); }
}

/* Responsive design for screens <1750px - Catering Banner Mode */
/* Responsive design for screens <1750px - Catering Banner Mode */
@media (max-width: 1750px) {
  /* Shrink burger icon by 50% */
  .burger-flipper .burger-icon img {
    width: 120px !important;
    height: 110px !important;
    object-fit: contain !important;
    transition: all 0.3s ease;
  }
  
  /* Also shrink the flip burger button by 50% */
  .flip-button {
    width: 100px !important;
    height: 50px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
  
  /* Make presence detector more compact and thinner - NO NESTED @media! */
  .presence-indicator-dash {
    padding: 4px 8px !important;
    margin-bottom: 8px !important;
    min-height: 32px !important;
    height: 32px !important;
    gap: 6px !important;
  }

  .presence-content {
    gap: 6px !important;
  }

  .presence-toggle-btn {
    width: 10px !important;
    height: 10px !important;
    font-size: 9px !important;
    border-width: 0.5px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #presence-toggle-icon {
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .presence-bar-compact {
    height: 12px !important;
  }
  
  .presence-text {
    font-size: 11px !important;
    font-weight: 500 !important;
  }


  .presence-toggle-btn:hover {
    transform: scale(1.05) !important;
  }
  
  /* Transform catering cards into horizontal banners - target specific card elements */
  .unlock-card[id*="catering"]:not(.catering-section):not(.catering-display),
  .special-card[id*="catering"]:not(.catering-section):not(.catering-display),
  .special-card.catering-unlock,
  .special-card.catering-system,
  .catering-card,
  .catering-unlock-card,
  .catering-system-card {
    /* Break out of container constraints */
    position: relative !important;
    left: -20px !important;
    right: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    margin: 10px -20px 5px -20px !important;
    z-index: 1 !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    min-height: 50px !important;
    height: auto !important;
    
    /* Horizontal banner layout like presence detector */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    
    /* Banner styling similar to presence detector */
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  /* Adjust special card content for horizontal layout */
  .unlock-card[id*="catering"]:not(.catering-section) .unlock-card-content,
  .unlock-card[id*="catering"]:not(.catering-section) .special-card-content,
  .special-card[id*="catering"]:not(.catering-section) .special-card-content,
  .special-card.catering-unlock .special-card-content,
  .special-card.catering-system .special-card-content,
  .catering-card .special-card-content,
  .catering-unlock-card .special-card-content,
  .catering-system-card .special-card-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 0 !important;
    flex: 1 !important;
  }
  
  /* Card emoji smaller and inline */
  .special-card[id*="catering"] .card-emoji,
  .special-card.catering-unlock .card-emoji,
  .special-card.catering-system .card-emoji {
    font-size: 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Title and description inline */
  .special-card[id*="catering"] .card-title,
  .special-card.catering-unlock .card-title,
  .special-card.catering-system .card-title {
    font-size: 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  .special-card[id*="catering"] .card-description,
  .special-card.catering-unlock .card-description,
  .special-card.catering-system .card-description {
    font-size: 12px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
    flex: 1 !important;
  }
  
  /* Progress bar for pre-unlock state */
  .special-card.catering-unlock .progress-container {
    flex: 1 !important;
    max-width: 200px !important;
    margin: 0 !important;
  }
  
  .special-card.catering-unlock .progress-bar {
    height: 18px !important;
    background: rgba(0,0,0,0.3) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .special-card.catering-unlock .progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
    transition: width 0.3s ease !important;
  }
  
  .special-card.catering-unlock .progress-text {
    font-size: 11px !important;
    margin-left: 10px !important;
    white-space: nowrap !important;
    color: var(--text-secondary) !important;
  }
  
  /* Button styling for banner mode */
  .special-card[id*="catering"] .special-card-button,
  .special-card.catering-unlock .special-card-button,
  .special-card.catering-system .special-card-button {
    width: auto !important;
    padding: 8px 20px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  
  /* Active catering order display in banner */
  .special-card.catering-system .catering-info {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    font-size: 12px !important;
  }
  
  .special-card.catering-system .order-status {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  
  /* Hide vertical-specific elements */
  .unlock-card[data-unlock*="catering"] .unlock-card-header,
  .special-card[id*="catering"] .special-card-header,
  .special-card.catering-unlock .special-card-header,
  .special-card.catering-system .special-card-header,
  [id*="catering"][class*="card"] .special-card-header,
  [id*="catering"][class*="unlock"] .special-card-header {
    display: none !important;
  }
  
  /* Catering banner styling complete - debug borders removed */
}




/* ============================================================================
   RESPONSIVE DESIGN FOR SMALLER SCREENS (1400x1100 and below)
   ============================================================================ */

   @media (max-width: 1400px) and (max-height: 1100px) {
    /* Reduce burger visual spacing - target the actual element */
    .burger-visual {
      margin: 5px 0 !important;
      padding: 0 !important;
    }
  
    /* Remove extra spacing around burger icon */
    .burger-icon {
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* Make burger icon smaller */
    .burger-icon img {
      width: 180px !important;
      height: 160px !important;
      object-fit: contain !important;
      margin: 0 !important;
    }
  
    /* Compact burger content wrapper - remove all gaps */
    .burger-content-wrapper {
      gap: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* Fix flip button - ensure it fits content */
    .flip-button {
      padding: 10px 30px !important;
      font-size: 18px !important;
      white-space: nowrap !important;
      letter-spacing: 0.5px !important;
      margin: 5px auto !important;
      width: auto !important;
      min-width: 150px !important;
      display: inline-block !important;
    }
  
    /* Reduce spacing between catering banner and burger */
    .catering-section {
      margin-top: 0 !important;
      margin-bottom: 5px !important;
    }
  
    /* Compact the entire burger flipper area */
    .burger-flipper {
      padding: 5px 0 !important;
      margin: 0 !important;
    }
  
    /* Reduce production stats spacing */
    .production-stats {
      margin: 8px 0 !important;
      padding: 8px !important;
    }
  
    /* Tighten presence detector spacing */
    .presence-indicator-dash {
      margin-bottom: 5px !important;
      padding: 3px 8px !important;
    }
  
    /* Reduce catering banner spacing if present */
    .catering-display {
      margin: 5px 0 !important;
    }
  
    /* Tighten action center gaps */
    .action-center {
      gap: 10px !important;
    }
  
    /* Reduce main game area gaps */
    .main-game-area {
      gap: 15px !important;
    }
  
    /* Compact production display numbers */
    .production-display {
      padding: 8px !important;
      margin: 8px 0 !important;
    }
  
    /* Reduce section padding in home dashboard */
    #home-section {
      padding: 10px !important;
    }
  
    /* Tighten burger flipper section */
    .burger-flipper {
      padding: 10px 0 !important;
    }
  
    /* Ensure price controls are visible */
    #priceControlsWrapper {
      margin-top: 10px !important;
    }
  
    /* Reduce game header height if needed */
    .game-header {
      padding: 8px 15px !important;
    }
  
    /* Compact resource display */
    .resources {
      gap: 10px !important;
    }
  
    /* Smaller resource values */
    .resource-value {
      font-size: 18px !important;
    }
  
    /* Shrink "Burger Price" text by 40% (18px -> ~11px) */
    .price-controls span {
      font-size: 11px !important;
    }
  }
  
  /* Hide entire card-header for price controls on small heights */
  @media (max-height: 1000px) {
    /* Try multiple selectors to catch the header */
    .card-header {
      display: none !important;
    }
  
    /* Also try without the wrapper */
    div.card-header {
      display: none !important;
    }
  
    /* And target any element containing the text */
    *:contains("Burger Pricing Controls") {
      display: none !important;
    }
  }
  
  /* Even more compact for very small heights */
  @media (max-width: 1400px) and (max-height: 900px) {
    /* Further reduce burger size */
    .burger-icon img {
      width: 150px !important;
      height: 130px !important;
    }
  
    /* Even smaller flip button */
    .flip-button {
      padding: 10px 30px !important;
      font-size: 18px !important;
    }
  
    /* Minimal burger visual margin */
    .burger-visual {
      margin: 5px 0 !important;
    }
  
    /* Hide or minimize less critical elements */
    .presence-indicator-dash {
      font-size: 12px !important;
    }
  
    /* Compact header even more */
    .game-header {
      padding: 6px 12px !important;
    }
  
    /* Smaller resource text */
    .resource-value {
      font-size: 16px !important;
    }
  
    /* Reduce production stats font */
    .production-stats {
      font-size: 13px !important;
    }
  }

  #burgerFlipperCard,
  #burgerFlipperCard.card {
      height: auto !important;
      max-height: 620px !important;
      overflow: visible !important;
  }

  #burgerFlipperCard .card-content {
      height: auto !important;
      max-height: 620px !important;
      overflow: visible !important;
  }

  .prestige-info i {
    color: gold;
    margin-right: 2px;
  }
  .prestige-info p {
    margin: 2px 0;
  }

/* ================================
   BULK SELL FEATURE
   ================================ */

.bulk-sell {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

.bulk-sell .card-title {
  color: var(--success);
}

.bulk-sell-info {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 15px;
  font-style: italic;
}

.bulk-sell-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 15px;
}

.bulk-sell-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bulk-sell-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
}

.bulk-sell-input:focus {
  outline: none;
  border-color: var(--success);
  background: var(--bg-primary);
}

.bulk-sell-input::-webkit-outer-spin-button,
.bulk-sell-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bulk-sell-input[type=number] {
  -moz-appearance: textfield;
}

.bulk-sell-max {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bulk-sell-max span {
  color: var(--success);
  font-weight: 600;
}

.bulk-sell-quick-buttons {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.bulk-sell-btn {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--success);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bulk-sell-btn:hover {
  background: var(--bg-primary);
  border-color: var(--success);
  transform: translateY(-1px);
}

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

.bulk-sell-preview {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-sell-price-tier {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bulk-sell-price-tier span {
  color: var(--danger);
  font-weight: 600;
}

.bulk-sell-payout {
  font-size: 16px;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.bulk-sell-payout span {
  color: var(--success);
  font-size: 18px;
}

.bulk-sell-execute-btn {
  width: 100%;
  padding: 12px;
  background: var(--success);
  border: none;
  border-radius: 8px;
  color: var(--bg-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bulk-sell-execute-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.bulk-sell-execute-btn:active:not(:disabled) {
  transform: translateY(0);
}

.bulk-sell-execute-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.5;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .bulk-sell-info {
    font-size: 12px;
  }
  
  .bulk-sell-input {
    font-size: 14px;
  }
  
  .bulk-sell-payout {
    font-size: 14px;
  }
  
  .bulk-sell-payout span {
    font-size: 16px;
  }
}




/* Updated Bulk Sell Slider - Centered Thumb */
.bulk-sell-slider-container {
  margin: 10px 0;
}

.bulk-sell-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.bulk-sell-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success);
  cursor: pointer;
  border: 2px solid var(--border-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  margin-top: -6px;
}

.bulk-sell-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
  filter: brightness(1.1);
}

.bulk-sell-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success);
  cursor: pointer;
  border: 2px solid var(--border-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.bulk-sell-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
  filter: brightness(1.1);
}

.bulk-sell-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
}

.bulk-sell-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
}

.bulk-sell-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Bulk Sell Info Button and Modal */
.bulk-sell-info-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-btn {
  background: transparent;
  border: none;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  padding: 0;
  width: auto;
  height: auto;
}

.info-btn:hover {
  color: var(--success);
  transform: scale(1.15);
}

.info-btn i {
  pointer-events: none;
}

.bulk-sell-info-modal .modal-content {
  position: relative;
  transform: none;
  top: auto;
  left: auto;
  max-width: 600px;
  width: 90%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}

.bulk-sell-info-modal .modal-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bulk-sell-info-modal .modal-header h2 {
  color: var(--success);
  margin: 0;
  font-size: 24px;
}

.bulk-sell-info-modal .modal-body {
  padding: 25px;
  color: var(--text-primary);
  line-height: 1.6;
}

.bulk-sell-info-modal .modal-body p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--text-secondary);
}

.bulk-sell-info-modal .modal-body h3 {
  color: var(--accent-primary);
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-sell-formula {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px 20px;
  margin: 15px 0;
  text-align: center;
  line-height: 1.4;
}

.bulk-sell-formula strong {
  color: var(--accent-primary);
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
}

.bulk-sell-tiers {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid var(--border-primary);
}

.tier-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  margin-bottom: 8px;
  background: var(--bg-primary);
  border-radius: 6px;
  border-left: 3px solid var(--border-primary);
  transition: all 0.2s ease;
}

.tier-row.tier-header {
  background: var(--bg-secondary);
  border-left-color: var(--accent-primary);
  margin-bottom: 12px;
  padding: 12px 15px;
  border-radius: 8px 8px 0 0;
}

.tier-row.tier-header:hover {
  background: var(--bg-secondary);
  border-left-color: var(--accent-primary);
}

.tier-row.tier-header strong {
  color: var(--accent-primary);
  font-size: 14px;
  letter-spacing: 0.5px;
}

.tier-row:hover {
  background: var(--bg-secondary);
  border-left-color: var(--success);
}

.tier-row:last-child {
  margin-bottom: 0;
}

.tier-row.tier-best {
  background: var(--bg-secondary);
  border-left-color: var(--success);
  font-weight: bold;
}

.tier-amount {
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
}

.tier-rate {
  color: var(--success);
  font-weight: 600;
}

.bulk-sell-info-modal .modal-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bulk-sell-info-modal .modal-body ul li {
  background: var(--bg-tertiary);
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  border-left: 3px solid var(--accent-primary);
  font-size: 14px;
  color: var(--text-secondary);
}

.bulk-sell-info-modal .modal-body ul li:before {
  content: '💡';
  margin-right: 10px;
}

.bulk-sell-info-modal .modal-body strong {
  color: var(--warning);
}

.bulk-sell-info-modal .close-button {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--danger);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.bulk-sell-info-modal .close-button:hover {
  background: var(--bg-primary);
  border-color: var(--danger);
  transform: scale(1.1);
}

/* Mobile responsive styles for bulk sell info modal */
@media (max-width: 768px) {
  .bulk-sell-info-modal .modal-content {
    width: 95%;
    max-width: none;
  }

  .bulk-sell-info-modal .modal-header h2 {
    font-size: 20px;
  }

  .bulk-sell-info-modal .modal-body {
    padding: 15px;
  }

  .bulk-sell-formula {
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.6;
  }

  .bulk-sell-formula strong {
    font-size: 15px;
  }

  .tier-row {
    flex-direction: column;
    gap: 5px;
    text-align: center;
  }

  .tier-row.tier-header {
    flex-direction: row;
    justify-content: space-between;
  }

  .tier-row.tier-header strong {
    font-size: 13px;
  }

  .tier-amount,
  .tier-rate {
    font-size: 13px;
  }

  .bulk-sell-info-modal .modal-body ul li {
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* ============================================
   PURCHASE HISTORY MODAL
   ============================================ */

.purchase-history-modal .modal-content {
  max-width: 700px;
  max-height: 80vh;
}

.purchase-history-modal .modal-body {
  max-height: calc(80vh - 80px);
  overflow-y: auto;
  padding: 20px;
}

.history-summary {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.summary-card {
  flex: 1;
  min-width: 150px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
}

.summary-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.summary-value .seed-icon {
  font-size: 20px;
}

.summary-value .loading {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 400;
}

.history-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-primary);
}

.filter-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.filter-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.filter-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  transition: all 0.2s;
}

.history-item:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.item-icon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 10px;
  flex-shrink: 0;
}

.item-details {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.item-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.item-date {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.item-amount {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.item-amount.positive {
  color: var(--success);
}

.item-amount.negative {
  color: var(--danger);
}

.item-amount .seed-icon {
  font-size: 16px;
}

.loading-indicator {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 15px;
  border: 3px solid var(--border-primary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 15px;
}

.empty-state p {
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.empty-hint {
  font-size: 13px;
  opacity: 0.7;
}

.error-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--danger);
}

.error-detail {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 10px 0 20px;
}

.retry-btn {
  padding: 10px 20px;
  background: var(--accent-primary);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.retry-btn:hover {
  background: var(--accent-secondary);
  transform: translateY(-1px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .purchase-history-modal .modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .history-summary {
    flex-direction: column;
  }

  .summary-card {
    min-width: 100%;
  }

  .history-filters {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .history-item {
    padding: 12px;
  }

  .item-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
  }

  .item-title {
    font-size: 14px;
  }

  .item-description {
    font-size: 12px;
  }

  .item-amount {
    font-size: 16px;
  }
}