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

body {
  font-family: 'Comic Neue', cursive;
  background: #000;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Starfield background */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 50%, #ff0, transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, #fff, transparent),
    radial-gradient(1px 1px at 70% 80%, #0ff, transparent),
    radial-gradient(1px 1px at 90% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 15% 70%, #ff0, transparent),
    radial-gradient(1px 1px at 45% 90%, #fff, transparent),
    radial-gradient(1px 1px at 80% 50%, #0ff, transparent),
    radial-gradient(1px 1px at 25% 35%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 60%, #ff0, transparent),
    radial-gradient(1px 1px at 5% 95%, #fff, transparent),
    radial-gradient(1px 1px at 95% 5%, #fff, transparent),
    radial-gradient(1px 1px at 35% 15%, #0ff, transparent),
    radial-gradient(1.5px 1.5px at 75% 45%, #fff, transparent),
    radial-gradient(1px 1px at 55% 75%, #ff0, transparent),
    radial-gradient(1px 1px at 85% 85%, #fff, transparent);
  background-size: 200px 200px;
  animation: starScroll 30s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes starScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-200px); }
}

/* Header gradient */
.header-gradient {
  background: linear-gradient(135deg, #00ff00, #ff00ff, #00ffff, #ffff00, #ff00ff);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

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

/* Blink text */
@keyframes blink2006 {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink-text {
  animation: blink2006 0.8s step-end infinite;
}

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.marquee-text {
  animation: marquee 12s linear infinite;
  white-space: nowrap;
}

/* Spinning star */
@keyframes spinStar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-star {
  animation: spinStar 2s linear infinite;
  display: inline-block;
}

/* Cat click animation */
@keyframes catSquish {
  0% { transform: scale(1); }
  30% { transform: scale(0.85, 1.15); }
  60% { transform: scale(1.1, 0.9); }
  100% { transform: scale(1); }
}

.cat-squish {
  animation: catSquish 0.2s ease-out;
}

/* Cat glow pulse */
@keyframes catGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 15px #00ffff);
  }
  50% { 
    filter: drop-shadow(0 0 15px #ffff00) drop-shadow(0 0 25px #ff00ff);
  }
}

.cat-glow {
  animation: catGlow 2s ease-in-out infinite;
}

/* Float up animation for +N text */
@keyframes floatUp {
  0% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
  100% { 
    opacity: 0; 
    transform: translateY(-120px) scale(1.5); 
  }
}

.float-number {
  animation: floatUp 1s ease-out forwards;
  pointer-events: none;
}

/* Float up mini cat */
@keyframes floatUpCat {
  0% { 
    opacity: 0.9; 
    transform: translateY(0) rotate(0deg) scale(0.5);
  }
  100% { 
    opacity: 0; 
    transform: translateY(-180px) rotate(360deg) scale(0.1);
  }
}

.float-cat {
  animation: floatUpCat 1.5s ease-out forwards;
  pointer-events: none;
}

/* Screen shake */
@keyframes screenShake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-5px, -3px); }
  20% { transform: translate(5px, 3px); }
  30% { transform: translate(-3px, 5px); }
  40% { transform: translate(3px, -5px); }
  50% { transform: translate(-5px, 3px); }
  60% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, -5px); }
  80% { transform: translate(3px, 5px); }
  90% { transform: translate(-5px, -3px); }
}

.screen-shake {
  animation: screenShake 0.3s ease-out;
}

/* XP-style button */
.xp-button {
  background: linear-gradient(180deg, #f0f0ff 0%, #d4d4e8 40%, #b8b8d0 60%, #a0a0c0 100%);
  border: 2px outset #c0c0e0;
  border-radius: 4px;
  font-family: 'Comic Neue', cursive;
  cursor: pointer;
  transition: all 0.1s;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.xp-button:hover {
  background: linear-gradient(180deg, #ffffaa 0%, #e8e860 40%, #d0d040 60%, #c0c020 100%);
  border-color: #e0e060;
}

.xp-button:active {
  border-style: inset;
  background: linear-gradient(180deg, #c0c0d0 0%, #a0a0b8 40%, #9090a8 60%, #8080a0 100%);
}

.xp-button:disabled {
  background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 40%, #909090 60%, #808080 100%);
  border-color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Shop panel styling */
.shop-panel {
  background: linear-gradient(180deg, #1a0033 0%, #0a001a 100%);
  border: 3px ridge #ff00ff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Upgrade item */
.upgrade-item {
  background: linear-gradient(180deg, rgba(60, 0, 120, 0.6) 0%, rgba(30, 0, 60, 0.8) 100%);
  border: 2px solid #6600cc;
  border-radius: 6px;
  transition: all 0.15s;
}

.upgrade-item:hover:not(.upgrade-disabled) {
  border-color: #ff00ff;
  background: linear-gradient(180deg, rgba(80, 0, 160, 0.7) 0%, rgba(40, 0, 80, 0.9) 100%);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

.upgrade-item.upgrade-disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
}

/* Purchase flash */
@keyframes purchaseFlash {
  0% { background-color: rgba(0, 255, 0, 0.5); }
  100% { background-color: transparent; }
}

.purchase-flash {
  animation: purchaseFlash 0.3s ease-out;
}

/* Banner animation */
@keyframes bannerSlide {
  0% { transform: translateY(-100px) scale(0.5); opacity: 0; }
  20% { transform: translateY(0) scale(1.1); opacity: 1; }
  30% { transform: scale(1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: translateY(-50px); opacity: 0; }
}

.milestone-banner {
  animation: bannerSlide 2.5s ease-out forwards;
}

/* Rainbow text */
@keyframes rainbow {
  0% { color: #ff0000; }
  16% { color: #ff8800; }
  33% { color: #ffff00; }
  50% { color: #00ff00; }
  66% { color: #0088ff; }
  83% { color: #8800ff; }
  100% { color: #ff0000; }
}

.rainbow-text {
  animation: rainbow 2s linear infinite;
}

/* Visitor counter style */
.visitor-counter {
  background: #000;
  border: 2px inset #666;
  color: #00ff00;
  font-family: 'Press Start 2P', monospace;
  padding: 4px 12px;
  font-size: 10px;
  display: inline-block;
}

/* Stats panel */
.stats-panel {
  background: rgba(0, 0, 0, 0.7);
  border: 2px ridge #00ffff;
  border-radius: 6px;
}

/* Scrollbar styling */
.shop-scroll::-webkit-scrollbar {
  width: 12px;
}

.shop-scroll::-webkit-scrollbar-track {
  background: #1a0033;
  border-radius: 4px;
}

.shop-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff00ff, #6600cc);
  border-radius: 4px;
  border: 2px solid #1a0033;
}

/* Silly text popup */
@keyframes sillyPop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  30% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  60% { transform: scale(1) rotate(-5deg); opacity: 1; }
  100% { transform: scale(0.8) rotate(0deg); opacity: 0; }
}

.silly-text {
  animation: sillyPop 0.8s ease-out forwards;
  pointer-events: none;
}

/* Welcome back modal */
.modal-overlay {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: linear-gradient(135deg, #1a0033, #000033, #003300);
  border: 3px ridge #00ff00;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
}

@keyframes pulse2006 {
  0%, 100% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
  50% { text-shadow: 0 0 15px #ff00ff, 0 0 30px #ff00ff, 0 0 45px #ff00ff; }
}

.glow-pulse {
  animation: pulse2006 1.5s ease-in-out infinite;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .game-layout {
    flex-direction: column !important;
  }
  
  .shop-panel {
    max-height: 50vh;
  }
}