:root {
  --accent: #FFD700;
  --infinity: #7C4DFF;
  --bulge: #00E5FF;
  --text-light: #FFF8F0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8C00 30%, #E55A00 70%, #CC4400 100%);
  min-height: 100vh; color: var(--text-light); overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,215,0,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(124,77,255,0.18) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(0,229,255,0.16) 0%, transparent 45%),
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 51px),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 51px);
  pointer-events: none; z-index: 0;
}
#root { position: relative; z-index: 1; }
button { color: inherit; }

@keyframes glitch1 { 0%,100% { clip-path: inset(0 0 95% 0); transform: translate(-2px,0); } 20% { clip-path: inset(20% 0 60% 0); transform: translate(3px,0); } 40% { clip-path: inset(50% 0 30% 0); } 60% { clip-path: inset(70% 0 10% 0); transform: translate(2px,0); } 80% { clip-path: inset(10% 0 80% 0); transform: translate(-3px,0); } }
@keyframes glitch2 { 0%,100% { clip-path: inset(95% 0 0 0); transform: translate(2px,0); } 20% { clip-path: inset(60% 0 20% 0); transform: translate(-3px,0); } 40% { clip-path: inset(30% 0 50% 0); } 60% { clip-path: inset(10% 0 70% 0); transform: translate(-2px,0); } 80% { clip-path: inset(80% 0 10% 0); transform: translate(3px,0); } }
@keyframes titlePulse { 0%,100% { text-shadow: 0 0 20px rgba(255,215,0,0.5); } 50% { text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,100,0,0.5); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes progressStripe { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes insanePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,0,60,0.4); } 50% { box-shadow: 0 0 20px 4px rgba(255,0,60,0.6); } }
@keyframes infinityPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(124,77,255,0.5); } 50% { box-shadow: 0 0 24px 6px rgba(124,77,255,0.8); filter: hue-rotate(40deg); } }
@keyframes ultraPulse { 0% { filter: hue-rotate(0deg); transform: scale(1); } 50% { box-shadow: 0 0 30px 8px rgba(124,77,255,0.85); transform: scale(1.04); } 100% { filter: hue-rotate(360deg); transform: scale(1); } }
@keyframes infinitySpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.15); text-shadow: 0 0 24px rgba(233,30,99,0.9); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes confusionWobble { 0%,100% { transform: rotate(0deg); } 25% { transform: translateY(-2px) rotate(-0.6deg); } 75% { transform: translateY(2px) rotate(0.6deg); } }
@keyframes badgePulse { 0%,100% { transform: scale(1); box-shadow: 0 0 10px rgba(0,229,255,0.5); } 50% { transform: scale(1.08); box-shadow: 0 0 22px rgba(124,77,255,0.8); } }
@keyframes rouletteSpin { to { background-position: 200% 50%; } }
@keyframes bulgeBreath { 0%,100% { box-shadow: 0 0 0 0 rgba(0,229,255,0.35), inset 0 0 20px rgba(0,229,255,0.15); } 50% { box-shadow: 0 0 28px 6px rgba(0,229,255,0.6), inset 0 0 40px rgba(0,229,255,0.3); } }
@keyframes bulgeHover { 0%,100% { transform: scale(1); border-radius: 1rem; } 50% { transform: scale(1.05); border-radius: 2.2rem; } }
@keyframes sparkle { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
@keyframes screenShake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-8px,4px); } 40% { transform: translate(7px,-6px); } 60% { transform: translate(-5px,-3px); } 80% { transform: translate(6px,5px); } }

.title-glitch { position: relative; font-family: 'Archivo Black', sans-serif; animation: titlePulse 3s ease-in-out infinite; }
.title-glitch::before, .title-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.title-glitch::before { color: #ff0040; animation: glitch1 3s infinite linear; opacity: 0.6; }
.title-glitch::after { color: #00ffff; animation: glitch2 3s infinite linear; opacity: 0.6; }
.infinity-spin { display: inline-block; animation: infinitySpin 4s ease-in-out infinite; }
.ultra-badge { display: inline-block; background: linear-gradient(135deg, #00E5FF, #7C4DFF, #E91E63); color: #fff; font-family: 'Archivo Black', sans-serif; animation: badgePulse 2s ease-in-out infinite; }

.gm74-ribbon {
  background: radial-gradient(circle at 50% 40%, #E0FDFF, #00E5FF 45%, #0077A8);
  color: #002B3D; font-family: 'Archivo Black', sans-serif; letter-spacing: 0.05em;
  animation: bulgeBreath 2.4s ease-in-out infinite; transition: transform .3s;
}
.gm74-ribbon:hover { transform: scale(1.12); }
.new-badge { background: linear-gradient(135deg,#00E5FF,#B2FFFF); color: #002B3D; animation: sparkle 1.2s ease-in-out infinite; }
.bulge-card { animation: bulgeBreath 2.4s ease-in-out infinite; }
.bulge-card:hover { animation: bulgeHover 1.2s ease-in-out infinite, bulgeBreath 2.4s ease-in-out infinite; }
.screen-shake { animation: screenShake 0.12s linear 5; }

.fade-in { animation: fadeInUp 0.6s ease-out forwards; }
.progress-bar-animated {
  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px; animation: progressStripe 1s linear infinite;
}
.card-glow { transition: all 0.3s ease; }
.card-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.card-glow.selected { box-shadow: 0 0 0 3px var(--accent), 0 0 30px rgba(255,215,0,0.3); }
.confusion-card { animation: confusionWobble 3.5s ease-in-out infinite; }
.confusion-card:hover { animation-play-state: paused; }
.btn-fire { position: relative; overflow: hidden; transition: all 0.3s ease; }
.btn-fire:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 40px rgba(255,215,0,0.5); }
.btn-fire:disabled { opacity: 0.4; cursor: not-allowed; }
.insane-btn { animation: insanePulse 1.6s ease-in-out infinite; }
.infinity-btn { animation: infinityPulse 2s ease-in-out infinite; }
.ultra-btn { animation: ultraPulse 3s linear infinite; }
.roulette-btn {
  background: linear-gradient(90deg, #FFD700, #FF6B00, #E91E63, #7C4DFF, #00E5FF, #FFD700);
  background-size: 200% 100%; animation: rouletteSpin 3s linear infinite; border: 2px solid rgba(255,255,255,0.3);
}
.drop-zone { border: 3px dashed rgba(255,255,255,0.4); transition: all 0.3s ease; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: rgba(255,215,0,0.1); }
.spinner { animation: spin 1s linear infinite; }
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FFD700, #FF6B00); color: #3D1600;
  padding: 12px 24px; border-radius: 999px; font-weight: bold; z-index: 100;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); animation: toastIn 0.4s ease-out; max-width: 90vw; text-align: center;
  font-family: 'Archivo Black', sans-serif;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }