:root { --crimson:#8B0000; --red:#CC0000; --gold:#FFD700; --dgold:#DAA520; }
* { box-sizing: border-box; }
body { margin:0; color:#eee; font-family:'Fira Code',monospace; min-height:100vh;
  background: radial-gradient(ellipse at top, #2a0505 0%, #0a0a0a 55%), repeating-linear-gradient(45deg,#0c0c0c 0 12px,#0a0a0a 12px 24px); background-attachment: fixed; }
.gold { color: var(--gold); }
.mono { font-family:'Fira Code',monospace; }
.hdr { position:relative; text-align:center; padding-bottom:16px; overflow:hidden; background: radial-gradient(ellipse at center top, rgba(204,0,0,.35), transparent 65%); }
.title { font-family:'Oswald',Impact,sans-serif; font-weight:700; font-size: clamp(2.4rem,8vw,5.5rem); letter-spacing:4px; margin-top:14px;
  color:#1a0000; -webkit-text-stroke: 2px var(--gold); text-shadow: 0 0 30px rgba(204,0,0,.8), 4px 4px 0 var(--crimson); position:relative; z-index:2; }
.sub { font-family:'Oswald'; color: var(--red); font-size:1.3rem; letter-spacing:3px; font-weight:700; position:relative; z-index:2; }
.laurel { display:flex; align-items:center; gap:12px; color:var(--dgold); max-width:500px; margin:10px auto 0; font-size:22px; }
.laurel::before,.laurel::after { content:''; flex:1; height:1px; background: linear-gradient(90deg,transparent,var(--dgold),transparent); }
.sparks i { position:absolute; bottom:0; width:3px; height:3px; background:var(--gold); border-radius:50%; box-shadow:0 0 6px var(--gold); animation: spark 3s linear infinite; opacity:0; }
@keyframes spark { 0%{transform:translateY(0);opacity:0} 10%{opacity:1} 100%{transform:translateY(-220px) translateX(20px);opacity:0} }
.card { background: linear-gradient(150deg,#1b1b1b,#101010); border:1px solid #3a2a10; border-radius:14px; position:relative; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: rise .5s ease both; }
.card::before { content:''; position:absolute; top:0; left:10%; right:10%; height:2px; background: linear-gradient(90deg,transparent,var(--red),var(--gold),var(--red),transparent); }
@keyframes rise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.panel-title { font-family:'Oswald'; color:var(--gold); font-size:1.25rem; letter-spacing:2px; margin-bottom:12px; font-weight:700; }
.drop-zone { border:3px dashed var(--dgold); border-radius:14px; padding:40px 20px; text-align:center; cursor:pointer; transition:.2s; }
.drop-zone.over,.drop-zone:hover { background: rgba(255,215,0,.06); border-color: var(--gold); }
.demo-thumb { background: linear-gradient(135deg,#8B0000,#DAA520); font-family:Oswald; }
.btn-sparta { background: linear-gradient(180deg,#CC0000,#8B0000); border:2px solid var(--gold); color:var(--gold); font-family:'Oswald'; font-weight:700; letter-spacing:2px; text-transform:uppercase; border-radius:10px; transition:.15s; cursor:pointer; }
.btn-sparta:hover:not(:disabled) { transform:scale(1.04); box-shadow:0 0 25px rgba(204,0,0,.6),0 0 8px rgba(255,215,0,.4); }
.btn-sparta:disabled,.btn-ghost:disabled { opacity:.45; cursor:not-allowed; }
.btn-ghost { background:#1d1d1d; border:1px solid #444; color:var(--gold); padding:6px 12px; border-radius:8px; font-size:.85rem; cursor:pointer; transition:.15s; }
.btn-ghost:hover:not(:disabled) { border-color:var(--gold); background:#262010; }
.btn-ghost.rec { color:#ff5555; border-color:#662222; }
.btn-danger { background:#1a0a0a; border:1px solid var(--red); color:var(--red); padding:6px 12px; border-radius:8px; font-weight:700; cursor:pointer; }
.btn-madness { font-family:Oswald; font-size:1.2rem; letter-spacing:3px; padding:12px 26px; border-radius:999px; cursor:pointer; color:#fff; border:2px solid var(--gold);
  background: linear-gradient(90deg,#CC0000,#DAA520,#CC0000); background-size:200%; animation: shimmer 2s linear infinite; }
.shield-btn { font-size: clamp(1.3rem,3vw,2rem); padding:26px 40px; border-width:3px; border-radius: 18px 18px 50% 50% / 18px 18px 30% 30%; }
.pulse-glow { animation: pg 2s ease-in-out infinite; }
@keyframes pg { 50% { box-shadow:0 0 35px rgba(204,0,0,.8),0 0 70px rgba(204,0,0,.35); } }
@keyframes shimmer { to { background-position: 200% 0; } }
.bar-wrap { height:18px; background:#000; border:1px solid #333; border-radius:99px; overflow:hidden; }
.bar { height:100%; background: linear-gradient(90deg,var(--crimson),var(--red),var(--gold)); background-size:200%; animation: shimmer 1.2s linear infinite; transition: width .2s; }
.chip { background:#000; border:1px solid #3a2a10; color:var(--dgold); padding:4px 10px; border-radius:99px; font-size:.8rem; }
.wave { background:#080808; border:1px solid #333; border-radius:8px; cursor: ew-resize; }
.seg-card { background:#0c0c0c; border-left:4px solid; border-radius:8px; padding:10px; }
.grid-seq { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; padding:8px 0; }
.cell { position:relative; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid #333; border-radius:6px; font-weight:900; font-size:11px; color:#ccc; cursor:pointer; user-select:none; transition: transform .05s; }
.cell:hover { border-color: var(--gold) !important; }
.cell.active { transform: scale(1.3); color:#fff; z-index:2; }
.flip-ico { position:absolute; top:-6px; right:-4px; font-size:9px; color:var(--gold); }
.pat-input { background:#0a0a0a; border:1px solid #333; color:var(--gold); border-radius:8px; padding:8px 10px; width:100%; outline:none; }
.pat-input:focus { border-color: var(--gold); }
.sel { background:#1d1d1d; border:1px solid #444; color:var(--gold); padding:6px 8px; border-radius:8px; font-size:.85rem; }
.tog { display:flex; align-items:center; gap:6px; font-size:.8rem; background:#0c0c0c; border:1px solid #333; padding:5px 10px; border-radius:99px; cursor:pointer; }
input[type=range], input[type=checkbox] { accent-color: var(--red); }
.scrub { position:relative; height:14px; background:#000; border:1px solid #333; border-radius:4px; cursor:pointer; overflow:hidden; }
.scrub-fill { position:absolute; inset:0 auto 0 0; background: linear-gradient(90deg,var(--crimson),var(--red)); }
.scrub-tick { position:absolute; bottom:0; width:2px; height:5px; opacity:.8; }
.spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-card { background:#0c0c0c; border:1px solid #333; border-radius:10px; overflow:hidden; transition:.2s; }
.g-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.avatar { width:34px; height:34px; border-radius:50%; background: linear-gradient(135deg,var(--red),var(--gold)); display:flex; align-items:center; justify-content:center; font-family:Oswald; color:#000; font-weight:700; }
.shake { animation: shake .7s; }
@keyframes shake { 10%,50%,90%{transform:translate(-8px,4px) rotate(-1deg)} 30%,70%{transform:translate(8px,-4px) rotate(1deg)} }
.flash { position:fixed; inset:0; background:rgba(204,0,0,.55); z-index:999; pointer-events:none; animation: fade .35s forwards; }
@keyframes fade { to { opacity:0; } }
.toast { position:fixed; bottom:20px; right:20px; left:auto; max-width:90vw; background:#141414; border:1px solid var(--gold); color:var(--gold); padding:12px 18px; border-radius:8px; font-family:Oswald; letter-spacing:1px; z-index:1000; box-shadow:0 0 20px rgba(204,0,0,.4); animation: rise .25s; }
.foot { text-align:center; padding:28px; margin-top:30px; background:#070707; border-top:1px solid #2a1a05; font-family:Oswald; color:var(--dgold); }
.foot a { display:inline-block; margin-top:6px; color:var(--red); font-size:.8rem; }
/* ── LIGHT THEME ── */
body.light { color:#2a1a0a; background: radial-gradient(ellipse at top, #ffe3d6 0%, #f7efe0 55%), #f7efe0; background-attachment: fixed; }
body.light .gold, body.light .panel-title, body.light .btn-ghost, body.light .sel, body.light .pat-input, body.light .toast, body.light .drop-zone p.gold { color:#8a5a00; }
body.light .title { color:#fff3d0; -webkit-text-stroke: 2px #8B0000; text-shadow: 0 0 24px rgba(204,0,0,.35), 4px 4px 0 #DAA520; }
body.light .sub { color:#a00000; }
body.light .card { background: linear-gradient(150deg,#fffaf0,#f3e7d0); border-color:#d9b96a; box-shadow:0 8px 24px rgba(120,60,0,.15); }
body.light .btn-ghost, body.light .sel { background:#fff; border-color:#c9a65a; }
body.light .btn-ghost:hover:not(:disabled) { background:#fff3d0; border-color:#8B0000; }
body.light .btn-ghost.rec { color:#b00000; border-color:#e0a0a0; }
body.light .btn-danger { background:#fff0f0; color:#a00000; }
body.light .btn-sparta { color:#FFE57A; }
body.light .chip { background:#fff; color:#7a4a00; border-color:#d9b96a; }
body.light .seg-card, body.light .tog, body.light .g-card, body.light .pat-input { background:#fffdf7; border-color:#d9c58f; }
body.light .bar-wrap, body.light .scrub { background:#eee0c4; border-color:#d0b67a; }
body.light .bg-black\/40 { background:rgba(255,255,255,.6) !important; }
body.light .drop-zone { border-color:#b8860b; }
body.light .opacity-50, body.light .opacity-60 { opacity:.75; }
body.light .border-neutral-800 { border-color:#d9c58f; }
body.light .toast { background:#fffaf0; border-color:#8B0000; }
body.light .foot { background:#2a1a0a; }
body.light .foot p { color:#FFD700; }
body.light .foot a { color:#ff6b6b; }
body.light .cell { color:#eee; }
body.light .laurel { color:#8a5a00; }
body.light ::-webkit-scrollbar-track { background:#f3e7d0; }
::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:#111; } ::-webkit-scrollbar-thumb { background:var(--crimson); border-radius:4px; }