* { margin: 0; padding: 0; box-sizing: border-box; }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #1a0033 0%, #2d0a4e 25%, #4a0e7a 50%, #2d0a4e 75%, #1a0033 100%); background-size: 400% 400%; animation: gradientShift 15s ease infinite; color: #fff; min-height: 100vh; overflow-x: hidden; }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; position: relative; z-index: 10; }
.header { text-align: center; margin-bottom: 40px; padding: 30px 0; }
.neon-text { font-size: 4rem; font-weight: 700; color: #ffd700; text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 70px #ff00ff, 0 0 80px #ff00ff, 0 0 100px #ff00ff; animation: flicker 3s infinite alternate; margin-bottom: 10px; }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 70px #ff00ff, 0 0 80px #ff00ff, 0 0 100px #ff00ff; } 20%, 24%, 55% { text-shadow: none; } }
.subtitle { font-size: 1.5rem; color: #d4af37; font-weight: 300; letter-spacing: 3px; }
.score-container { text-align: center; background: rgba(74, 14, 122, 0.4); border: 3px solid #ffd700; border-radius: 20px; padding: 30px; margin-bottom: 40px; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); }
.score-label { font-size: 1.2rem; color: #d4af37; margin-bottom: 10px; letter-spacing: 2px; }
.score { font-size: 4rem; font-weight: 700; color: #ffd700; text-shadow: 0 0 20px #ffd700; margin: 10px 0; }
.score-per-second { font-size: 1.5rem; color: #ff00ff; font-weight: 600; }
.main-button-container { display: flex; justify-content: center; margin: 60px 0; }
.main-button { position: relative; width: 300px; height: 300px; border-radius: 50%; border: none; background: linear-gradient(135deg, #ff00ff, #8b00ff, #ff00ff); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 40px rgba(255, 0, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2); overflow: hidden; }
.main-button:hover { transform: scale(1.05); box-shadow: 0 0 60px rgba(255, 0, 255, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.3); }
.main-button:active { transform: scale(0.95); box-shadow: 0 0 30px rgba(255, 0, 255, 0.9), inset 0 0 40px rgba(0, 0, 0, 0.3); }
.button-text { position: relative; z-index: 2; font-size: 1.8rem; font-weight: 700; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.button-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; }
.main-button:hover .button-glow { opacity: 1; }
.upgrades-container { margin-top: 60px; }
.upgrades-container h2 { text-align: center; font-size: 2.5rem; color: #ffd700; margin-bottom: 30px; text-shadow: 0 0 10px #ffd700; }
.upgrades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
.upgrade-card { background: rgba(74, 14, 122, 0.6); border: 2px solid #8b00ff; border-radius: 15px; padding: 20px; cursor: pointer; transition: all 0.3s ease; display: flex; gap: 15px; align-items: center; }
.upgrade-card:hover { transform: translateY(-5px); border-color: #ffd700; box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3); background: rgba(74, 14, 122, 0.8); }
.upgrade-card.disabled { opacity: 0.5; cursor: not-allowed; }
.upgrade-card.disabled:hover { transform: none; border-color: #8b00ff; box-shadow: none; }
.upgrade-icon { font-size: 3rem; flex-shrink: 0; }
.upgrade-info { flex: 1; }
.upgrade-name { font-size: 1.3rem; font-weight: 600; color: #ffd700; margin-bottom: 5px; }
.upgrade-description { color: #ff00ff; font-size: 0.9rem; margin-bottom: 8px; }
.upgrade-cost { color: #d4af37; font-weight: 600; margin-bottom: 5px; }
.upgrade-owned { color: #aaa; font-size: 0.9rem; }
.footer { text-align: center; margin-top: 60px; padding: 20px; color: #d4af37; font-size: 1.1rem; }
.particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.particle { position: absolute; font-size: 2rem; pointer-events: none; animation: float 2s ease-out forwards; opacity: 0; }
@keyframes float { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-200px) scale(0.5); opacity: 0; } }
@media (max-width: 768px) { .neon-text { font-size: 2.5rem; } .subtitle { font-size: 1rem; } .score { font-size: 3rem; } .main-button { width: 200px; height: 200px; } .button-text { font-size: 1.3rem; } .upgrades-grid { grid-template-columns: 1fr; } }