/* ========================================
   HORROR LAYOUT - Derived from THE GUEST
   Shared stylesheet for horror stories
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ========================================
   DARK MODE OVERRIDE
   ======================================== */

html:root {
  --guest-bg: #000;
  --guest-panel: #0a0a0a;
  --guest-border: #1a1a1a;
  --guest-red: #8b0000;
  --guest-red-dark: #4a0000;
  --guest-text: #e0e0e0;
  --guest-text-dim: #888888;
  --guest-link: #c25550;
  --guest-recording-text: #c9a86c;
  --guest-recording-border: #3d3428;
  --font-body: 'IBM Plex Serif', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

html.horror-layout,
html.horror-layout body {
  background: var(--guest-bg) !important;
}

.horror-layout .page-container {
  background: var(--guest-bg) !important;
}

.horror-layout .site-header {
  background: linear-gradient(to bottom, #0a0a0a 0%, #0d0d0d 100%) !important;
  border-color: var(--guest-border) !important;
}

.horror-layout .site-title,
.horror-layout .transmission-title {
  color: var(--guest-red) !important;
}

.horror-layout .nav-button {
  background: #111 !important;
  border-color: var(--guest-border) !important;
  color: var(--guest-text-dim) !important;
}

.horror-layout .nav-button:hover {
  background: var(--guest-red) !important;
  border-color: var(--guest-red) !important;
  color: #fff !important;
}

.horror-layout .content-panel {
  background: var(--guest-panel) !important;
  border-color: var(--guest-border) !important;
}

.horror-layout .post-header {
  border-bottom-color: var(--guest-border) !important;
}

.horror-layout .post-header .post-title,
.horror-layout .post-header .post-title a {
  color: var(--guest-red) !important;
}

.horror-layout .post-content {
  color: var(--guest-text) !important;
  font-family: var(--font-body) !important;
}

.horror-layout .post-content a {
  color: var(--guest-link) !important;
}

.horror-layout .post-content h1,
.horror-layout .post-content h2 {
  color: var(--guest-red) !important;
}

.horror-layout .translation-alert {
  background: #0a0a0a !important;
  color: #fff !important;
  padding: 15px 20px !important;
  border: 2px solid var(--guest-border) !important;
  border-radius: 8px !important;
  margin: 20px 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  text-align: center !important;
  font-weight: 500 !important;
}

.horror-layout .site-footer {
  background: #0d0d0d !important;
  border-color: var(--guest-border) !important;
}

.horror-layout .division-bar .gold {
  background: var(--guest-red) !important;
}

.horror-layout .division-bar .blue {
  background: var(--guest-red-dark) !important;
}

.horror-layout .division-bar .red {
  background: #2a0000 !important;
}

.horror-layout .light.red {
  background: #ff0000 !important;
  box-shadow: 0 0 10px #ff0000 !important;
}

.horror-layout .light.amber,
.horror-layout .light.green,
.horror-layout .light.blue,
.horror-layout .light.white {
  background: #330000 !important;
  box-shadow: 0 0 5px #330000 !important;
  animation: none !important;
}

/* ========================================
   INTRO SECTION
   ======================================== */

.horror-layout .intro-section {
  background: #080808 !important;
  padding: 2.5rem !important;
  margin-bottom: 3rem !important;
  border-radius: 4px !important;
  border: 1px solid var(--guest-border) !important;
  line-height: 2 !important;
  color: #d4d4d4 !important;
  font-size: 1.1rem !important;
  font-family: var(--font-body) !important;
}

.horror-layout .intro-section a {
  color: var(--guest-link) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.horror-layout .intro-section a:hover {
  border-bottom-color: var(--guest-link);
}

/* ========================================
   HOST NARRATION
   ======================================== */

.horror-layout .host-narration {
  background: linear-gradient(135deg, #0c0c0c 0%, #101010 100%) !important;
  border-left: 3px solid var(--guest-red) !important;
  padding: 1.5rem 1.8rem !important;
  margin: 2rem 0 !important;
  font-style: italic !important;
  color: #d0d0d0 !important;
  position: relative !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
}

.horror-layout .host-narration::before {
  content: "HOST";
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--guest-red);
  color: #fff;
  padding: 2px 12px;
  font-size: 0.7rem;
  letter-spacing: 2px;
  font-style: normal;
  font-family: var(--font-mono);
}

.horror-layout .host-narration strong {
  color: #fff;
  font-weight: 600;
}

.horror-layout .host-narration em {
  color: #aaa;
}

/* ========================================
   DAVI RECORDINGS
   ======================================== */

.horror-layout .davi-recording {
  background: #080808 !important;
  border: 1px solid var(--guest-recording-border) !important;
  padding: 1.5rem 1.8rem !important;
  margin: 2rem 0 !important;
  font-family: var(--font-mono) !important;
  color: var(--guest-recording-text) !important;
  position: relative !important;
  box-shadow: 0 0 30px rgba(180, 140, 80, 0.03) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

.horror-layout .davi-recording::before {
  content: "REC ●";
  position: absolute;
  top: 12px;
  right: 15px;
  color: #aa3333;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  animation: rec-blink 1.2s infinite;
}

@keyframes rec-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.2; }
}

.horror-layout .davi-recording em {
  color: #8a7a5a;
  font-style: italic;
}

.horror-layout .recording-header {
  color: #6a5a4a !important;
  font-size: 0.75rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid #2a2418 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em !important;
}

/* ========================================
   SOUND CUES & ATMOSPHERE
   ======================================== */

.horror-layout .sound-cue {
  text-align: center !important;
  font-size: 0.8rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin: 2.5rem 0 !important;
  padding: 1rem !important;
  font-family: var(--font-mono) !important;
  color: #fff !important;
}

.horror-layout .guest-voice {
  background: linear-gradient(90deg, #180808 0%, #0a0404 50%, #180808 100%) !important;
  border: 1px solid #2a0000 !important;
  padding: 1.5rem 1.8rem !important;
  margin: 2rem 0 !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: #f0f0f0 !important;
  position: relative !important;
}

.horror-layout .guest-voice::before {
  content: "GUEST";
  position: absolute;
  top: -10px;
  left: 20px;
  background: #2a0000;
  color: #fff;
  padding: 2px 12px;
  font-size: 0.7rem;
  letter-spacing: 2px;
  font-family: var(--font-mono);
}

.horror-layout .guest-voice em {
  color: #e8b3b3;
}

/* Additional blocks from the-guest.css can be added here if needed
   for other horror posts (chat logs, timestamps, etc.). */