/* Blood design: red and black, poster type. Layered on top of app.css (html has data-theme="blood"). */
@font-face { font-family: 'Anton'; src: url('/fonts/anton-latin-400-normal.woff2') format('woff2'); font-display: swap; }
/* ===================== 2. BLOOD: red and black, brutal poster type ===================== */
:root[data-theme="blood"] {
  --bg: #090404; --bg-2: #120707; --card: #150909; --line: #3a1414; --text: #f6efe9; --muted: #b39c95;
  --gold: #e3242b; --gold-2: #ff5a4f; --radius: 4px;
  --serif: 'Anton', Impact, 'Arial Narrow', sans-serif;
}
[data-theme="blood"] body { background: radial-gradient(90% 60% at 50% 0%, #3a0a0a 0%, var(--bg) 60%) fixed, var(--bg); }
[data-theme="blood"] .display, [data-theme="blood"] .q-text, [data-theme="blood"] .char-name,
[data-theme="blood"] .milestone h2, [data-theme="blood"] .analyzing h2, [data-theme="blood"] .gate h3, [data-theme="blood"] .section-title { font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
[data-theme="blood"] .display { font-size: clamp(54px, 15vw, 84px); line-height: .92; }
[data-theme="blood"] .display em, [data-theme="blood"] .tagline { font-style: normal; font-weight: 400; color: var(--gold); }
[data-theme="blood"] .q-text { font-size: clamp(34px, 9vw, 46px); line-height: 1; }
[data-theme="blood"] .char-name { font-size: clamp(56px, 16vw, 86px); line-height: .9; }
[data-theme="blood"] .btn { border-radius: 3px; text-transform: uppercase; letter-spacing: .12em; }
[data-theme="blood"] .btn-gold { background: var(--gold); color: #fff; box-shadow: 6px 6px 0 #000, 0 0 40px -10px rgba(227,36,43,.7); }
[data-theme="blood"] .opt { border-width: 2px; }
[data-theme="blood"] .opt.is-picked { background: #2a0b0b; box-shadow: 4px 4px 0 var(--gold); }
[data-theme="blood"] .opt::before { border-radius: 2px; }
[data-theme="blood"] .meter-fill { background: var(--gold); box-shadow: 0 0 14px rgba(227,36,43,.9); }
[data-theme="blood"] .marquee-track img, [data-theme="blood"] .suspect-row img { filter: grayscale(1) contrast(1.3) sepia(.6) hue-rotate(-30deg) saturate(3); }
[data-theme="blood"] .hero.revealed img { filter: contrast(1.15) saturate(.8); }
[data-theme="blood"] .aura-ring { background: conic-gradient(var(--gold), #300, var(--gold-2), #200, var(--gold)); }
[data-theme="blood"] .gate { background: #140808; border: 2px solid var(--gold); box-shadow: 8px 8px 0 #000; }
[data-theme="blood"] .trait-fill { background: var(--gold); }
[data-theme="blood"] .stat-num { font-weight: 400; }

[data-theme="blood"] .milestone em { font-style: normal; }