:root { --accent: #FFD700; --red: #E60012; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Bricolage Grotesque', sans-serif;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8C00 30%, #E55A00 70%, #CC4400 100%);
  min-height: 100vh; color: #FFF8F0; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,215,0,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(230,0,18,0.15) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255,255,255,0.025) 50px, rgba(255,255,255,0.025) 51px),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.025) 50px, rgba(255,255,255,0.025) 51px);
}
#root { position: relative; z-index: 1; }
.panel { background: rgba(0,0,0,0.2); backdrop-filter: blur(10px); border-radius: 1rem; }
.sec-title { font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; text-align: center; margin-bottom: 1.5rem; }

@keyframes glitch1 { 0%,100%{clip-path:inset(0 0 95% 0);transform:translate(-2px)} 20%{clip-path:inset(20% 0 60% 0);transform:translate(3px)} 40%{clip-path:inset(50% 0 30% 0);transform:translate(-1px)} 60%{clip-path:inset(70% 0 10% 0);transform:translate(2px)} 80%{clip-path:inset(10% 0 80% 0);transform:translate(-3px)} }
@keyframes glitch2 { 0%,100%{clip-path:inset(95% 0 0 0);transform:translate(2px)} 20%{clip-path:inset(60% 0 20% 0);transform:translate(-3px)} 40%{clip-path:inset(30% 0 50% 0);transform:translate(1px)} 60%{clip-path:inset(10% 0 70% 0);transform:translate(-2px)} 80%{clip-path:inset(80% 0 10% 0);transform:translate(3px)} }
@keyframes titlePulse { 0%,100%{text-shadow:0 0 20px rgba(255,215,0,.5)} 50%{text-shadow:0 0 40px rgba(255,215,0,.8),0 0 80px rgba(255,50,0,.3)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes progressStripe { to { background-position: 40px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gm90Swirl { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(230,0,18,.6)} 50%{box-shadow:0 0 0 8px rgba(230,0,18,0)} }
@keyframes bounce { 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-10px) rotate(8deg)} }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,20px)} to{opacity:1;transform:translate(-50%,0)} }

.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; inset: 0; opacity: .6; }
.title-glitch::before { color: #ff0040; animation: glitch1 3s infinite linear; }
.title-glitch::after { color: #00ffff; animation: glitch2 3s infinite linear; }

.version-badge {
  position: relative; font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.6;
  background: var(--red); color: #fff; padding: 8px 14px; border-radius: 999px;
  animation: badgePulse 2s infinite; transition: transform .2s;
}
.version-badge:hover { transform: scale(1.06); }
.new-dot { position: absolute; top: -10px; right: -14px; background: #FFD700; color: #3D1600; font-size: 8px; padding: 3px 6px; border-radius: 999px; }
.bell-btn { background: var(--red); color: #fff; transition: transform .2s; box-shadow: 0 4px 0 #8a000b; }
.bell-btn:hover { transform: translateY(-2px); }
.bell-btn.subbed { background: rgba(0,0,0,0.3); box-shadow: none; }

.fade-in { animation: fadeInUp .6s ease-out forwards; }
.fade-in-delay-1 { animation-delay: .1s; opacity: 0; }
.fade-in-delay-2 { animation-delay: .2s; opacity: 0; }
.fade-in-delay-3 { animation-delay: .3s; opacity: 0; }
.fade-in-delay-4 { animation-delay: .4s; opacity: 0; }
.fade-in-delay-5 { animation-delay: .5s; opacity: 0; }

.progress-bar-animated {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px; animation: progressStripe 1s linear infinite;
}
.card-glow { transition: all .3s ease; }
.card-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.card-glow.selected { box-shadow: 0 0 0 3px var(--accent), 0 0 30px rgba(255,215,0,.3); }
.gm90-card.selected { box-shadow: 0 0 0 3px #B040FF, 0 0 30px rgba(139,0,255,.4); }
.gm90-shimmer { background: linear-gradient(135deg, rgba(139,0,255,.3), rgba(255,0,200,.2), rgba(0,200,255,.15), rgba(139,0,255,.3)); background-size: 300% 300%; animation: gm90Swirl 4s ease-in-out infinite; }

.btn-fire { position: relative; overflow: hidden; transition: all .3s ease; }
.btn-fire:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 40px rgba(255,215,0,.5); }
.btn-fire:disabled { cursor: not-allowed; }
.drop-zone { border: 3px dashed rgba(255,255,255,.4); transition: all .3s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: rgba(255,215,0,.1) !important; }
.spinner { animation: spin 1s linear infinite; }
.bounce { animation: bounce 1s ease-in-out infinite; }

.toggle { width: 52px; height: 30px; border-radius: 999px; background: rgba(0,0,0,.35); position: relative; transition: background .2s; flex-shrink: 0; }
.toggle span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: #FFD700; }
.toggle.on span { transform: translateX(22px); }
.chip { padding: 6px 16px; border-radius: 999px; background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.2); font-weight: 700; transition: all .2s; }
.chip:hover { transform: scale(1.05); }
.chip-on { background: #FFD700; color: #3D1600; border-color: #FFD700; }
.chip-on-red { background: var(--red); border-color: var(--red); color: #fff; }

.sub-card { background: linear-gradient(135deg, #E60012, #a3000d); box-shadow: 0 10px 40px rgba(230,0,18,.35); }
.modal { background: #FFF3E0; color: #3D1600; box-shadow: 0 20px 60px rgba(0,0,0,.4); border-top: 6px solid var(--red); }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #1a0f00; color: #FFD700; padding: 12px 22px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toastIn .3s ease-out; max-width: 92vw; text-align: center;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 4px; }