* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --crimson: #8B0000; --red: #CC0000; --gold: #FFD700; --dgold: #DAA520; }
body {
    background: radial-gradient(ellipse at top, #2a0606 0%, #0a0a0a 55%) fixed, #0a0a0a;
    color: #f3e9d2; font-family: 'Fira Code', monospace; min-height: 100vh; overflow-x: hidden;
}
#sparks { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#sparks i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px #ff8c00; animation: rise linear infinite; opacity: 0; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-100vh) translateX(40px); opacity: 0; } }
#root { position: relative; z-index: 1; }

.title-main {
    font-family: 'Cinzel', 'Oswald', Impact, serif; font-weight: 900; font-size: clamp(2.2rem, 7vw, 4.8rem); letter-spacing: 0.04em; line-height: 1;
    background: linear-gradient(90deg, #8B0000, #CC0000, #FFD700, #fff6c0, #FFD700, #CC0000); background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 4s linear infinite;
    filter: drop-shadow(0 4px 0 #000);
}
.subtitle { font-family: 'Oswald', sans-serif; font-weight: 700; color: #CC0000; font-size: 1.3rem; letter-spacing: 0.15em; }
.shake-in { animation: shimmer 4s linear infinite, shake 0.6s ease-out; }
@keyframes shake { 0%,100% { translate: 0 0; } 10% { translate: -8px 3px; } 20% { translate: 7px -4px; } 30% { translate: -6px 2px; } 40% { translate: 5px -2px; } 60% { translate: -3px 1px; } 80% { translate: 2px 0; } }
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 20px rgba(204,0,0,.4); } 50% { box-shadow: 0 0 40px rgba(204,0,0,.8), 0 0 70px rgba(255,215,0,.2); } }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.spin-shield { animation: spin 1.6s linear infinite; }

.header-bg { background: radial-gradient(ellipse at center top, rgba(139,0,0,.35) 0%, transparent 65%); }
.laurel-divider { display: flex; align-items: center; gap: 12px; color: var(--dgold); opacity: .6; }
.laurel-divider::before, .laurel-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--dgold), transparent); }

.card-section { background: linear-gradient(150deg, rgba(30,14,14,.92), rgba(12,10,10,.95)); border: 1px solid #3a2414; border-radius: 14px; position: relative; overflow: hidden; }
.card-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--crimson), var(--gold), var(--crimson), transparent); }
.step-title { font-family: 'Oswald', sans-serif; font-weight: 700; color: var(--gold); font-size: 1.25rem; letter-spacing: .08em; display: flex; align-items: center; }

.drop-zone { border: 3px dashed var(--dgold); transition: all .25s; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--gold); background: rgba(255,215,0,.06); }

.btn-sparta { background: linear-gradient(180deg, #CC0000, #8B0000); border: 2px solid var(--gold); color: var(--gold); font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: transform .15s, box-shadow .15s; cursor: pointer; }
.btn-sparta:hover { transform: scale(1.04); box-shadow: 0 0 30px rgba(204,0,0,.6), 0 0 10px rgba(255,215,0,.3); }
.btn-sparta:disabled { opacity: .5; }
.btn-ghost { background: #1a1212; color: var(--gold); border: 1px solid #4a3020; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; display: inline-block; }
.btn-ghost:hover { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,.2); }
.btn-danger { background: #1a0a0a; color: #ff4040; border: 1px solid #CC0000; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.btn-shield {
    font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(1.3rem, 4vw, 2rem); color: var(--gold);
    background: radial-gradient(circle at 50% 30%, #e01010, #8B0000 60%, #3a0000);
    border: 4px solid var(--gold); padding: 34px 48px; border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%;
    box-shadow: inset 0 0 0 6px #8B0000, inset 0 0 0 8px #DAA520, 0 10px 40px rgba(204,0,0,.5);
    cursor: pointer; transition: transform .2s; animation: pulse-glow 2s infinite; text-shadow: 0 2px 0 #000;
}
.btn-shield:hover { transform: scale(1.06) rotate(-1deg); }

.progress-bar { height: 100%; background: linear-gradient(90deg, var(--crimson), var(--red), var(--gold)); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; transition: width .2s; }
.waveform-canvas { background: #0b0707; border: 1px solid #3a2414; border-radius: 8px; }
.seg-card { background: rgba(0,0,0,.35); border-left: 4px solid; border-radius: 8px; padding: 10px; }

.sec-tab { background: #140c0c; border: 1px solid #3a2414; color: #776; padding: 8px 4px; border-radius: 8px; font-family: 'Oswald'; font-weight: 700; letter-spacing: .1em; font-size: 13px; transition: all .15s; }
.sec-tab.on { color: var(--gold); border-color: #8B0000; background: linear-gradient(180deg, #3a0a0a, #1a0808); }
.sec-tab.live { box-shadow: 0 0 16px rgba(255,215,0,.5); border-color: var(--gold); }
.chip { background: #160e0e; border: 1px solid #3a2414; color: #ccb; padding: 5px 11px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: all .12s; }
.chip.on { background: #8B0000; color: var(--gold); border-color: var(--gold); }
.chip:hover { border-color: var(--dgold); }

.pattern-cell { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid; font-size: 11px; font-weight: 700; user-select: none; }
.pattern-cell.active { transform: scale(1.3); z-index: 2; }
.pattern-cell.editable { cursor: pointer; }
.pattern-cell.editable:hover { outline: 1px dashed var(--gold); }
.flip-mark { position: absolute; top: -6px; right: -3px; font-size: 9px; color: var(--gold); }
.pattern-input { background: #0b0707; border: 1px solid #3a2414; color: var(--gold); padding: 8px 10px; border-radius: 8px; width: 100%; font-family: 'Fira Code'; letter-spacing: .15em; outline: none; }
.pattern-input:focus { border-color: var(--gold); }
.madness-fill { height: 100%; background: linear-gradient(90deg, #DAA520, #CC0000, #ff0040); box-shadow: 0 0 12px #CC0000; transition: width .3s; }

.gen-overlay { position: fixed; inset: 0; background: radial-gradient(circle, rgba(60,0,0,.92), rgba(0,0,0,.97)); z-index: 50; display: flex; align-items: center; justify-content: center; }

.scrubber { position: relative; height: 26px; background: #0b0707; border: 1px solid #3a2414; border-radius: 6px; cursor: pointer; overflow: hidden; }
.scrub-part { position: absolute; top: 0; bottom: 0; font-size: 10px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); border-right: 1px solid #000; }
.sp-intro { background: #2a2a40; } .sp-verse { background: #1E3A5F; } .sp-chorus { background: #6b0b0b; } .sp-outro { background: #7a5a00; }
.scrub-head { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.pad { aspect-ratio: 1; background: radial-gradient(circle at 50% 35%, #3a0d0d, #140808); border: 2px solid #5a2a14; border-radius: 14px; color: var(--gold); font-family: 'Oswald'; font-weight: 700; letter-spacing: .05em; font-size: 14px; cursor: pointer; transition: transform .06s, box-shadow .1s; touch-action: manipulation; }
.pad:active { transform: scale(.93); box-shadow: 0 0 30px #CC0000, inset 0 0 20px #CC0000; border-color: var(--gold); }
.pad-key { font-family: 'Cinzel'; font-size: 22px; color: #fff; opacity: .5; }

.hall-card { background: rgba(0,0,0,.4); border: 1px solid #3a2414; border-radius: 10px; padding: 12px; }

.toast { position: fixed; bottom: 20px; right: 20px; left: auto; max-width: 90vw; background: linear-gradient(135deg, #1a0a0a, #2a1010); border: 1px solid var(--gold); border-radius: 8px; padding: 12px 18px; color: var(--gold); font-family: 'Oswald'; z-index: 100; animation: tin .3s ease; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
@keyframes tin { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #111; } ::-webkit-scrollbar-thumb { background: #8B0000; border-radius: 4px; }