:root { --orange: #FF8C00; --deep: #E06400; --ink: #111; --cream: #FFF4E0; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Poppins', sans-serif; color: var(--ink);
  background: radial-gradient(circle at 15% 10%, #FFB347 0, transparent 40%), radial-gradient(circle at 90% 90%, #E05500 0, transparent 45%), var(--orange);
  min-height: 100vh; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .07;
  background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 60px 60px;
}
#root { position: relative; z-index: 1; }
.bungee, .title-glitch { font-family: 'Bungee', sans-serif; }
.mono { font-family: 'DM Mono', monospace; }

.title-glitch { position: relative; color: #fff; text-shadow: 4px 4px 0 #000; line-height: 1; display: inline-block; }
.title-glitch::before, .title-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; opacity: .7; }
.title-glitch::before { color: #ff0050; animation: g1 2.6s infinite steps(1); text-shadow: none; }
.title-glitch::after { color: #00e5ff; animation: g2 2.6s infinite steps(1); text-shadow: none; }
@keyframes g1 { 0%,100%{clip-path:inset(0 0 85% 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(80% 0 0 0);transform:translate(3px)} 33%{clip-path:inset(10% 0 70% 0);transform:translate(-3px)} 66%{clip-path:inset(50% 0 30% 0);transform:translate(2px)} }

.gm-badge { display: inline-block; font-family: 'Bungee'; font-size: 1.6rem; padding: .3rem 1.2rem; border: 4px solid #000; border-radius: 12px; animation: flip 3s infinite steps(1); box-shadow: 0 0 25px rgba(255,255,255,.6); }
@keyframes flip { 0%{background:#fff;color:#000;border-color:#000} 50%{background:#000;color:#fff;border-color:#fff} }
.piano-bounce { display: inline-block; animation: bounce .5s infinite alternate ease-in; }
@keyframes bounce { to { transform: translateY(-6px) rotate(-8deg); } }

.rise { animation: rise .6s ease-out both; }
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.5s}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.panel { background: var(--cream); border: 3px solid #000; border-radius: 20px; box-shadow: 6px 6px 0 #000; overflow: hidden; }
.panel.amber { background: #FFC266; }

.drop { border: 4px dashed #000; border-radius: 20px; padding: 2.5rem 1rem; text-align: center; cursor: pointer; background: rgba(255,244,224,.55); transition: .2s; }
.drop:hover, .drop.over { background: #fff; transform: scale(1.01); }
.sample-btn { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; background: #000; color: #fff; padding: .4rem .9rem .4rem .4rem; border-radius: 999px; transition: .2s; }
.sample-btn:hover { transform: scale(1.05); }

.btn-black { display: inline-block; background: #000; color: #fff; font-weight: 800; padding: .8rem 1.6rem; border-radius: 14px; transition: .2s; }
.btn-black:hover { transform: scale(1.05); box-shadow: 0 0 0 4px #fff; }
.btn-ghost { background: #fff; border: 3px solid #000; font-weight: 800; padding: .7rem 1.4rem; border-radius: 14px; transition: .2s; }
.btn-ghost:hover { transform: scale(1.05); }

.gm-card { padding: 8px; border-radius: 24px; background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 24px 24px; animation: pulse 1.5s infinite ease-in-out; }
@keyframes pulse { 50% { box-shadow: 0 0 35px rgba(255,255,255,.9); } }
.gm-card-inner { background: var(--cream); border-radius: 18px; }
.selected-badge { background: #000; color: #fff; font-weight: 900; padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; }
.chip { font-family: 'DM Mono'; font-size: .8rem; background: #000; color: #FFC266; padding: .2rem .6rem; border-radius: 8px; }
.preview-box { background: #000; border-radius: 14px; min-height: 140px; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }

.toggle { width: 52px; height: 28px; border-radius: 999px; background: #bbb; border: 3px solid #000; position: relative; transition: .2s; flex-shrink: 0; }
.toggle span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #000; transition: .2s; }
.toggle.on { background: #000; }
.toggle.on span { left: 26px; }

.pill { min-width: 92px; padding: .9rem 1.4rem; font-family: 'Bungee'; font-size: 1.3rem; border-radius: 999px; border: 3px solid #000; background: rgba(255,255,255,.5); transition: .2s; }
.pill:hover { transform: scale(1.07); }
.pill.on { background: #000; color: #fff; box-shadow: 4px 4px 0 #fff; }

.btn-fire { font-family: 'Bungee'; font-size: clamp(1.2rem, 4vw, 2rem); padding: 1.1rem 2.4rem; border-radius: 20px; background: #000; color: #fff; border: 4px solid #fff; box-shadow: 8px 8px 0 #000, 0 0 40px rgba(255,255,255,.5); transition: .2s; }
.btn-fire:hover:not(:disabled) { transform: scale(1.06) rotate(-1deg); }
.btn-fire:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

.bar { height: 22px; border: 3px solid #000; border-radius: 999px; background: #fff; overflow: hidden; }
.bar-fill { height: 100%; transition: width .25s; background: repeating-linear-gradient(45deg, #000 0 12px, #FF8C00 12px 24px); background-size: 34px 34px; animation: stripe .8s linear infinite; }
@keyframes stripe { to { background-position: 34px 0; } }
.spin-check { width: 30px; height: 30px; border-radius: 6px; background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 15px 15px; border: 2px solid #000; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.thumb { position: relative; width: 52px; height: 34px; border: 2px solid #000; border-radius: 6px; overflow: hidden; background: #000; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb span { position: absolute; right: 1px; bottom: 0; font-size: 9px; font-family: 'DM Mono'; color: #fff; background: #000; padding: 0 2px; }
.pop { animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(0); } }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #000; color: #fff; font-weight: 800; padding: .8rem 1.4rem; border-radius: 14px; border: 3px solid #fff; z-index: 50; animation: rise .3s; }