/* Horror theme. Palette: Tailwind zinc darker + red.
   - Backgrounds: near-black with blood tint
   - Accent:      red-600 / red-500
   - States:      lime-500 (right) / red-700 (wrong)
   Same DOM as default — only color and serif overrides. */

:root[data-theme="horror"],
body[data-theme="horror"] {
  --bg:        #050000;
  --bg-elev:   #150505;
  --bg-tile:   #1a0808;
  --bg-tile-h: #2d1010;
  --fg:        #f0e0d0;
  --muted:     #6a4040;
  --muted-hi:  #a06060;
  --rule:      #2a1010;
  --rule-hi:   #4a1818;
  --accent:    #b91c1c;     /* dark crimson — interactive */
  --accent-hi: #dc2626;
  --timer:     #dc2626;     /* urgent red */
  --right:     #d4af37;     /* antique gold — correct */
  --wrong:     #7a0000;     /* deep blood — wrong */

  --font-sans:    'Crimson Text', Georgia, serif;
  --font-mono:    'Special Elite', 'Courier New', monospace;
  --font-hud:     'Special Elite', 'Courier New', monospace;
  --font-display: 'Special Elite', serif;
}

body[data-theme="horror"] {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 var(--font-sans);
  margin: 0;
  min-height: 100vh;
}

body[data-theme="horror"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at top, rgba(220, 38, 38, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}

body[data-theme="horror"] .qtext {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  text-shadow: 0 0 16px rgba(220, 38, 38, 0.35);
}

body[data-theme="horror"] .m-brand { font-style: italic; }
body[data-theme="horror"] .m-mode  { font-style: italic; }

body[data-theme="horror"] .choice-text {
  font: italic 400 19px/1.3 var(--font-sans);
  letter-spacing: 0;
}
body[data-theme="horror"] .choice-letter {
  font-size: 16px;
}
body[data-theme="horror"] .choice {
  box-shadow:
    inset 0 1px 0 rgba(220, 38, 38, 0.12),
    inset 0 0 0 1px rgba(220, 38, 38, 0.08);
}
body[data-theme="horror"] .choice:not(:disabled):hover {
  background: var(--bg-tile-h);
  box-shadow:
    inset 0 1px 0 rgba(220, 38, 38, 0.2),
    inset 0 0 0 1px rgba(220, 38, 38, 0.35),
    0 0 24px rgba(220, 38, 38, 0.2);
}

body[data-theme="horror"] .end-score {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(220, 38, 38, 0.5);
}
/* Brick wall — varied red shades + shadow depth. Italic serif for the
   gothic typography texture. */
body[data-theme="horror"] .brick {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
}
body[data-theme="horror"] .brick.sh-0 { color: #dc2626; opacity: 1;    text-shadow: 0 0 14px rgba(220, 38, 38, 0.6), 0 0 4px rgba(220, 38, 38, 0.4); }
body[data-theme="horror"] .brick.sh-1 { color: #b91c1c; opacity: 0.92; text-shadow: 0 1px 0 rgba(0,0,0,0.35); }
body[data-theme="horror"] .brick.sh-2 { color: #7a0000; opacity: 0.8;  text-shadow: 0 0 8px rgba(122, 0, 0, 0.35); }
body[data-theme="horror"] .brick.sh-3 { color: #4a0e0e; opacity: 0.65; text-shadow: none; }

body[data-theme="horror"] .intro-hero {
  font-style: normal;
  text-shadow:
    0 0 60px var(--bg),
    0 0 32px var(--bg),
    0 0 18px var(--bg),
    0 0 8px var(--bg),
    0 0 28px rgba(220, 38, 38, 0.5);
}
body[data-theme="horror"] .intro-sub {
  font-style: italic;
}
body[data-theme="horror"] .intro-play {
  color: var(--fg);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 36px 4px rgba(220, 38, 38, 0.5);
}
body[data-theme="horror"] .intro-play:hover {
  background: var(--accent-hi);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 48px 6px rgba(220, 38, 38, 0.7);
}
body[data-theme="horror"] .picker-title {
  text-shadow: 0 0 18px rgba(220, 38, 38, 0.4);
  font-style: italic;
}
body[data-theme="horror"] .picker-start { background: var(--accent); color: var(--fg); }
body[data-theme="horror"] .picker-start:hover { background: var(--accent-hi); }
body[data-theme="horror"] .toggle-opt.active { background: var(--accent); color: var(--fg); }