* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body {
  font-family: 'Poppins', sans-serif; color: #FFF8F0; min-height: 100vh;
  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; }

button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #FFE27A; outline-offset: 3px; }

.mascot { width: 96px; height: 96px; object-fit: cover; border-radius: 24px; border: 3px solid #fff; box-shadow: 0 8px 30px rgba(60,20,120,.5); animation: bob 3s ease-in-out infinite; image-rendering: pixelated; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }

.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; }
.fixed-sticker { background: #16a34a; color: #fff; transform: rotate(-4deg); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
@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; color: inherit; display: block; }
@media (hover: hover) { .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 #FFD700; animation: gold 2s linear infinite; }
@keyframes gold { 0%,100% { border-color: #FFD700; box-shadow: 0 0 18px rgba(255,215,0,.6); } 50% { border-color: #fff4b0; box-shadow: 0 0 32px rgba(255,180,0,.9); } }
.fx-card.flash { animation: flash .4s ease-in-out 3; }
@keyframes flash { 50% { box-shadow: 0 0 0 4px #FFE27A, 0 0 40px #FFE27A; transform: scale(1.05); } }

.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); max-width: 100%; }

.pill { padding: .9rem 1.6rem; 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; }
input[type=range] { accent-color: #FFE27A; }

.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; } }

.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 380px); }
.toast { background: rgba(30,10,70,.95); border: 2px solid #FFE27A; padding: .7rem 1rem; border-radius: 14px; font-weight: 700; font-size: .9rem; text-align: center; animation: up .3s ease-out both; }

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