* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Poppins', sans-serif;
  color: #FFF8F0;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(160deg, #FF7A00 0%, #FF6600 45%, #E0480A 100%);
}
.wave { position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(2px); }
.w1 { width: 120vw; height: 120vh; right: -60vw; bottom: -50vh;
  background: radial-gradient(ellipse at 30% 30%, rgba(124,92,255,.55), rgba(30,10,80,.75) 60%, transparent 72%); animation: drift 18s ease-in-out infinite alternate; }
.w2 { width: 90vw; height: 90vh; left: -40vw; top: -30vh;
  background: radial-gradient(ellipse at 60% 60%, rgba(120,230,200,.30), rgba(80,150,255,.25) 50%, transparent 70%); animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-6vw, -4vh) rotate(12deg) scale(1.08); } }
#root { position: relative; z-index: 1; }

.section-title { font-family: 'Archivo Black', sans-serif; font-size: 1.75rem; text-shadow: 0 3px 0 rgba(0,0,0,.15); }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.title-glitch { position: relative; display: inline-block; font-family: 'Archivo Black', sans-serif; line-height: 1;
  animation: pulse 3s ease-in-out infinite; }
.title-glitch::before, .title-glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .65; }
.title-glitch::before { color: #ff0050; animation: g1 2.6s infinite linear; }
.title-glitch::after { color: #00f0ff; animation: g2 2.6s infinite linear; }
@keyframes g1 { 0%,100%{clip-path:inset(0 0 90% 0);transform:translate(-3px)} 33%{clip-path:inset(40% 0 40% 0);transform:translate(3px)} 66%{clip-path:inset(75% 0 5% 0);transform:translate(-2px)} }
@keyframes g2 { 0%,100%{clip-path:inset(90% 0 0 0);transform:translate(3px)} 33%{clip-path:inset(20% 0 60% 0);transform:translate(-3px)} 66%{clip-path:inset(5% 0 80% 0);transform:translate(2px)} }
@keyframes pulse { 50% { text-shadow: 0 0 40px rgba(255,230,120,.8), 0 0 80px rgba(140,90,255,.5); } }

.gm-badge { background: linear-gradient(90deg,#2a0f5c,#5b3bd6,#2a0f5c); background-size: 200%; font-weight: 700;
  box-shadow: 0 0 25px rgba(140,100,255,.7); letter-spacing: .15em; animation: shine 3s linear infinite; }
@keyframes shine { to { background-position: 200% 0; } }

.fade-in { animation: up .6s ease-out both; }
@keyframes up { from { opacity: 0; transform: translateY(24px); } }

.drop-zone { border: 3px dashed rgba(255,255,255,.55); background: rgba(40,10,60,.18); transition: .25s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #FFE27A; background: rgba(255,226,122,.15); }

.tab { padding: .45rem .9rem; border-radius: 999px; font-weight: 700; font-size: .85rem; background: rgba(0,0,0,.2); border: 2px solid rgba(255,255,255,.2); transition: .2s; }
.tab:hover { background: rgba(255,255,255,.15); }
.tab.on { background: #fff; color: #E0480A; border-color: #fff; }

.fx-card { border: 2px solid rgba(255,255,255,.15); transition: transform .2s, box-shadow .2s; }
.fx-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 30px rgba(30,8,60,.35); }
.fx-card.selected { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 30px rgba(255,255,255,.6); }
.fx-card.ultimate { border: 3px solid transparent; background-clip: padding-box; }
.fx-card.ultimate::before { content: ''; position: absolute; inset: -3px; border-radius: 18px; z-index: -1;
  background: linear-gradient(90deg,#FFD700,#fff4b0,#FFB300,#FFD700); background-size: 300%; animation: shine 2s linear infinite; }

.sel-pill { background: rgba(30,10,70,.85); border: 2px solid #FFE27A; box-shadow: 0 6px 20px rgba(0,0,0,.25); backdrop-filter: blur(6px); }

.pill { padding: .9rem 1.8rem; border-radius: 999px; font-weight: 900; font-size: 1.2rem; background: rgba(0,0,0,.2); border: 2px solid rgba(255,255,255,.3); transition: .2s; }
.pill:hover { transform: scale(1.06); }
.pill.on { background: #fff; color: #E0480A; box-shadow: 0 0 30px rgba(255,255,255,.6); }
.pill.hundred.on { background: linear-gradient(135deg,#FFD700,#8b5cf6); color: #fff; }

.toggle { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; padding: .5rem 1rem; border-radius: 999px; background: rgba(0,0,0,.25); }
.toggle .knob { width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.3); position: relative; transition: .2s; }
.toggle .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }
.toggle.on .knob { background: #8b5cf6; }
.toggle.on .knob::after { left: 21px; }

.num { width: 70px; padding: .4rem; border-radius: .6rem; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.3); color: #fff; text-align: center; font-weight: 700; }

.btn-fire { background: linear-gradient(135deg,#fff,#FFE27A 40%,#FFB300); color: #5a1a00; font-family: 'Archivo Black', sans-serif; transition: .25s; box-shadow: 0 8px 0 rgba(120,30,0,.35); }
.btn-fire:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 0 rgba(120,30,0,.35), 0 0 40px rgba(255,240,150,.7); }
.btn-fire:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.mini-preview { max-width: 260px; border-radius: 12px; overflow: hidden; background: #000; }
.mini-preview canvas { width: 100%; display: block; }

.progress-bar-animated { background-image: linear-gradient(45deg,rgba(255,255,255,.3) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 75%,transparent 75%) !important; background-size: 30px 30px !important; animation: stripe 1s linear infinite; }
@keyframes stripe { to { background-position: 30px 0; } }

input[type=number]::-webkit-inner-spin-button { opacity: 1; }