/* ================================================================
   stories.css — base structural styles
   Theme-aware rain/cloud CSS is now in stories.html inline <style>
   Theme overrides remain in stories-theme.css
================================================================ */

:root, [data-theme="1"] {
  --red: #ff0000;
  --dark-red: #440000;
  --black: #050505;
  --text-color: #ccc;
  --bg-color: #080808;
  --border-color: #1a1a1a;
}

[data-theme="2"] {
  --red: #c8001e;
  --dark-red: #7d000f;
  --black: #f4f1eb;
  --text-color: #0d0d0d;
  --bg-color: #ffffff;
  --border-color: #d0ccc4;
}

[data-theme="3"] {
  --red: #c8902a;
  --dark-red: #6b4c2a;
  --black: #1c1410;
  --text-color: #e8dcc8;
  --bg-color: #231a12;
  --border-color: #4a3020;
}

[data-theme="4"] {
  --red: #00f5ff;
  --dark-red: #0a4050;
  --black: #020408;
  --text-color: #e0f4ff;
  --bg-color: #050a10;
  --border-color: #0a2030;
}

body.light-mode {
  --red: #8b0000;
  --dark-red: #660000;
  --black: #f5f5f5;
  --text-color: #333;
  --bg-color: #fafafa;
  --border-color: #e0e0e0;
}

/* ── SCAN LINES — defined ONCE here, pointer-events:none is mandatory ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.025),
    rgba(0,0,0,0.025) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none; /* CRITICAL — must not block scroll/clicks */
  z-index: 9000;
}
body.light-mode::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* Flash overlay */
#flash-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: white; opacity: 0; pointer-events: none; z-index: 9999;
}
.thunder-flash { animation: flashAnim 0.15s ease-out; }
@keyframes flashAnim { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ── MAIN SECTION ── */
#stories { padding:16px 40px 60px 40px; background:var(--black); text-align:center; min-height: 100vh; transition: background 0.3s, color 0.3s; }

/* Theme button */
.theme-btn {
  background: radial-gradient(circle at 30% 30%, #444, #111);
  border: 3px solid #222;
  color: var(--red);
  padding: 12px 18px;
  font-family: 'Space Mono', monospace;
  cursor: pointer;
  font-size: 0.75rem;
  transition: 0.3s;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.8), 0 0 15px rgba(255,0,0,0.3);
  position: relative;
  letter-spacing: 1px;
}
.theme-btn:hover {
  box-shadow: inset 0 0 12px rgba(0,0,0,0.9), 0 0 20px rgba(255,0,0,0.5);
  transform: scale(1.05);
}

.tv-screen { display: flex; align-items: center; gap: 8px; }
.day-option, .night-option { transition: opacity 0.3s; font-weight: bold; }
.day-option { opacity: 0.5; }
.night-option { opacity: 1; color: var(--red); }
body.light-mode .day-option { opacity: 1; color: var(--red); }
body.light-mode .night-option { opacity: 0.5; }
.sep { opacity: 0.3; font-size: 0.9rem; }

.tv-glitch { animation: tvGlitch 0.4s ease-in-out; }
@keyframes tvGlitch {
  0% { opacity: 1; filter: brightness(1); }
  25% { opacity: 0.8; filter: brightness(1.2) hue-rotate(20deg); transform: scaleX(0.995); }
  50% { opacity: 0.6; filter: brightness(0.9) hue-rotate(-20deg); transform: scaleX(1.005); }
  75% { opacity: 0.8; filter: brightness(1.1) hue-rotate(10deg); transform: scaleX(0.998); }
  100% { opacity: 1; filter: brightness(1); transform: scaleX(1); }
}

/* Story Cards */
.story-card {
  display:block; width:100%; margin-bottom:20px; border:1px solid var(--border-color);
  background:var(--bg-color); position:relative; overflow:hidden; padding:40px;
  font-family:'Space Mono', monospace; color:var(--red); transition: 0.3s;
}
.story-card.active-entry {
  animation: lowGlitch 8s ease-in-out infinite;
  filter: grayscale(15%);
}
@keyframes lowGlitch {
  0%, 100% { transform: translate(0,0); filter: grayscale(15%); }
  25% { transform: translate(-1px,1px); filter: grayscale(18%); }
  50% { transform: translate(0.5px,-0.5px); filter: grayscale(15%); }
  75% { transform: translate(-0.5px,1px); filter: grayscale(17%); }
}

/* Read notes button */
.read-notes-btn {
  display: inline-block; margin-top: 15px; padding: 10px 15px;
  background: rgba(255,0,0,0.1); border: 1px solid var(--red);
  color: var(--red); cursor: pointer; font-family: 'Space Mono', monospace;
  font-size: 0.8rem; transition: 0.3s;
}
.read-notes-btn:hover { background: rgba(255,0,0,0.2); }
body.light-mode .read-notes-btn { border-color: #8b0000; color: #8b0000; background: rgba(139,0,0,0.1); }

/* Cassette animations */
@keyframes reelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dp { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

/* Mobile cassette */
@media(max-width:600px) {
  #cassette-player { width: 120px !important; padding: 6px 6px 8px !important; bottom: 16px !important; right: 14px !important; }
  .cass-reel { width: 16px !important; height: 16px !important; }
  .cass-track-name { font-size: 0.3rem !important; max-width: 60px !important; }
  .cass-btn { font-size: 0.55rem !important; padding: 4px 1px !important; }
}

/* Floating Radio (legacy — kept for compatibility) */
.floating-radio {
  position: fixed; bottom: 30px; right: 30px; z-index: 50; width: 220px;
  background: linear-gradient(160deg, #2a1a0a 0%, #1a1005 40%, #0d0800 100%);
  border: 2px solid #3a2a10; border-radius: 6px 6px 10px 10px;
  padding: 14px 12px 16px; font-family: 'Space Mono', monospace;
  transform: rotate(-1deg);
}

/* ── FOG OF MEDUSA — per-theme overrides ── */
[data-theme="2"] body.fog-active::before {
  background: #f0e8c0;
  color: #5a4800;
  border-bottom-color: #c8a800;
}
[data-theme="4"] body.fog-active {
  --fog-tint: rgba(100,180,0,0.04);
}
[data-theme="4"] body.fog-active::after {
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(100,180,0,0.025) 2px, rgba(100,180,0,0.025) 4px
  ) !important;
}