* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(160deg, #FF8C00 0%, #FF6A00 45%, #E04E00 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 15% 10%, rgba(255,230,90,0.25), transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(120,20,0,0.3), transparent 55%),
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(255,255,255,0.025) 40px 41px);
}
#root { position: relative; z-index: 1; }

.panel { background: rgba(70,25,0,0.32); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); }

.title-glitch { position: relative; display: inline-block; font-family: 'Archivo Black', sans-serif; color: #fff; 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; }
@keyframes glitch1 { 0%,100%{clip-path:inset(0 0 95% 0);transform:translate(-3px)} 25%{clip-path:inset(20% 0 60% 0);transform:translate(3px)} 50%{clip-path:inset(50% 0 30% 0)} 75%{clip-path:inset(70% 0 10% 0);transform:translate(-2px)} }
@keyframes glitch2 { 0%,100%{clip-path:inset(95% 0 0 0);transform:translate(3px)} 25%{clip-path:inset(60% 0 20% 0);transform:translate(-3px)} 50%{clip-path:inset(30% 0 50% 0)} 75%{clip-path:inset(10% 0 70% 0);transform:translate(2px)} }
@keyframes titlePulse { 0%,100%{text-shadow:0 0 20px rgba(255,215,0,.5)} 50%{text-shadow:0 0 40px rgba(255,215,0,.9),0 0 80px rgba(255,60,0,.4)} }

.spin-badge { background: #111; color: #FFD700; border: 2px solid #FFD700; animation: wobble 2.5s ease-in-out infinite; }
@keyframes wobble { 0%,100%{transform:rotate(-3deg) scale(1)} 50%{transform:rotate(3deg) scale(1.06)} }

.checker-border { border: 6px solid transparent; background-clip: padding-box; position: relative; }
.checker-border::before {
  content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: inherit;
  background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.gm4-showcase { background: linear-gradient(135deg, rgba(30,10,0,0.85), rgba(80,30,0,0.75)); isolation: isolate; transition: box-shadow .3s; }
.gm4-selected { box-shadow: 0 0 0 3px #FFD700, 0 0 50px rgba(255,215,0,0.45); }
.ribbon { position: absolute; top: -14px; right: 20px; background: #FFD700; color: #2a1000; font-weight: 900; font-size: 12px; padding: 4px 12px; border-radius: 999px; letter-spacing: .08em; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.chip { background: #fff; color: #000; font-family: monospace; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 2px solid #000; }
.gm4-range { accent-color: #FFD700; }

.card-glow { transition: all .25s ease; }
.card-glow:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.card-glow.selected { box-shadow: 0 0 0 3px #FFD700, 0 0 30px rgba(255,215,0,.35); }
.star-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); background-size: 250% 100%; animation: sheen 3s linear infinite; pointer-events: none; }
@keyframes sheen { from{background-position:150% 0} to{background-position:-100% 0} }
.gm90-card.selected { box-shadow: 0 0 0 3px #B040FF, 0 0 30px rgba(139,0,255,.45); }
.gm90-shimmer { background: linear-gradient(135deg, rgba(139,0,255,.4), rgba(255,0,200,.3), rgba(0,200,255,.2), rgba(139,0,255,.4)); background-size: 300% 300%; animation: swirl 4s ease-in-out infinite; }
@keyframes swirl { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.btn-fire { transition: all .25s ease; }
.btn-fire:not(:disabled):hover { transform: scale(1.06) rotate(-1deg); box-shadow: 0 0 45px rgba(255,215,0,.6); }
.btn-fire:disabled { cursor: not-allowed; }

.drop-zone { border: 3px dashed rgba(255,255,255,.5); background: rgba(70,25,0,.22); transition: all .25s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #FFD700; background: rgba(255,215,0,.12); }

.progress-bar-animated { background-image: linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25% 50%, rgba(255,255,255,.2) 50% 75%, transparent 75%) !important; background-size: 40px 40px; animation: stripe 1s linear infinite; }
@keyframes stripe { to { background-position: 40px 0; } }
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.thumb-pop { animation: pop .35s ease-out; }
@keyframes pop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }

.fade-in { animation: fadeInUp .6s ease-out both; }
.fade-in-delay-1 { animation-delay: .1s; } .fade-in-delay-2 { animation-delay: .2s; }
.fade-in-delay-3 { animation-delay: .3s; } .fade-in-delay-4 { animation-delay: .4s; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(25px)} to{opacity:1;transform:none} }