body[data-color-mode="light"] {
  color-scheme: light;
  --bg-0: #F7F4EE;
  --bg-1: #EFEBE3;
  --bg-2: #E4DFD4;
  --text: #1A1816;
  --muted: rgba(26, 24, 22, 0.48);
  --soft: rgba(26, 24, 22, 0.64);
  --line: rgba(26, 24, 22, 0.10);
  --panel: rgba(255, 252, 245, 0.60);
  --panel-solid: rgba(255, 252, 245, 0.92);
  --accent: #7A7A7A;
  --effect-mist: rgba(0, 0, 0, .06);
  --effect-paper: rgba(255, 255, 255, .38);
  --shadow: rgba(63, 54, 42, 0.12);
  --vignette: rgba(70, 58, 42, 0.16);
}
body[data-color-mode="dark"] {
  color-scheme: dark;
  --bg-0: #0A0A08;
  --bg-1: #121110;
  --bg-2: #1C1A17;
  --text: #F0EDE6;
  --muted: rgba(240, 237, 230, 0.44);
  --soft: rgba(240, 237, 230, 0.66);
  --line: rgba(240, 237, 230, 0.10);
  --panel: rgba(10, 11, 10, 0.52);
  --panel-solid: rgba(10, 10, 8, 0.84);
  --accent: #A3A0A0;
  --effect-mist: rgba(240, 237, 230, .06);
  --effect-paper: rgba(240, 237, 230, .03);
  --shadow: rgba(0, 0, 0, 0.42);
  --vignette: rgba(0, 0, 0, 0.52);
}
.mode-switch [data-color-mode-choice="theme"] {
  display: none;
}
.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.app-shell::before {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent), transparent 94%), transparent),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.025) 22px 23px);
  opacity: .5;
}
body[data-color-mode="dark"] .app-shell::before {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent), transparent 95%), transparent),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.018) 22px 23px);
}
.ambient-layer {
  z-index: -1;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
body[data-ambient="rain"] .ambient-layer,
body[data-ambient="wind"] .ambient-layer,
body[data-ambient="tide"] .ambient-layer,
body[data-ambient="sea"] .ambient-layer,
body[data-ambient="heat"] .ambient-layer,
body[data-ambient="static"] .ambient-layer {
  opacity: 1;
}
body[data-ambient="rain"] .ambient-layer {
  background-image:
    repeating-linear-gradient(105deg, transparent 0 9px, color-mix(in srgb, var(--accent), white 52%) 10px 11px, transparent 12px 21px),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent), transparent 86%));
  opacity: .24;
  animation: atmoRain 1.05s linear infinite;
}
body[data-ambient="wind"] .ambient-layer {
  background:
    repeating-linear-gradient(170deg, transparent 0 30px, color-mix(in srgb, var(--accent), white 65%) 31px 32px, transparent 33px 78px),
    radial-gradient(ellipse at 0% 50%, var(--effect-mist), transparent 42%),
    linear-gradient(90deg, transparent, var(--effect-mist), transparent);
  opacity: .24;
  animation: atmoWind 4.5s ease-in-out infinite;
}
body[data-ambient="tide"] .ambient-layer,
body[data-ambient="sea"] .ambient-layer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='320' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.28)' d='M0,160 C120,96 240,224 360,160 C480,96 600,224 720,160 C840,96 960,224 1080,160 C1200,96 1320,224 1440,160 L1440,320 L0,320 Z'/%3E%3C/svg%3E") 0 68% / 760px 190px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='320' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.16)' d='M0,190 C160,120 260,250 420,180 C580,110 700,250 860,180 C1020,110 1140,250 1300,180 C1360,154 1400,154 1440,170 L1440,320 L0,320 Z'/%3E%3C/svg%3E") 0 76% / 900px 210px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='320' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.10)' d='M0,220 C180,150 300,280 480,210 C660,140 780,280 960,210 C1140,140 1260,280 1440,210 L1440,320 L0,320 Z'/%3E%3C/svg%3E") 0 86% / 1040px 230px repeat-x,
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent), transparent 58%) 0%, transparent 62%),
    linear-gradient(180deg, transparent 0%, transparent 42%, color-mix(in srgb, var(--accent), transparent 92%) 58%, color-mix(in srgb, var(--accent), transparent 66%) 100%);
  opacity: .66;
  mix-blend-mode: screen;
  filter: blur(.15px);
  animation: atmoWaveFront 7.2s ease-in-out infinite;
}
body[data-color-mode="light"][data-ambient="tide"] .ambient-layer,
body[data-color-mode="light"][data-ambient="sea"] .ambient-layer {
  mix-blend-mode: multiply;
  opacity: .28;
}
body[data-ambient="heat"] .ambient-layer {
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--accent), transparent 56%) 0%, transparent 54%),
    repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, var(--accent), transparent 80%) 15px 18px, transparent 19px 34px),
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(255,255,255,.05) 27px 30px, transparent 31px 58px);
  opacity: .5;
  filter: blur(8px) saturate(1.12);
  animation: atmoHeatShimmer 3.2s ease-in-out infinite;
}
body[data-ambient="static"] .ambient-layer {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.00) 0 3px, rgba(255,255,255,.075) 4px 5px, rgba(0,0,0,.00) 6px 8px),
    radial-gradient(rgba(255,255,255,.36) .8px, transparent .9px),
    radial-gradient(color-mix(in srgb, var(--accent), white 28%) .7px, transparent .85px),
    linear-gradient(90deg, transparent 58%, color-mix(in srgb, var(--accent), white 32%) 60%, transparent 63%);
  background-size: auto, 6px 6px, 11px 11px, auto;
  opacity: .2;
  mix-blend-mode: screen;
  animation: atmoStaticNoise .22s steps(2) infinite, atmoScanDrift 1.2s linear infinite;
}
body[data-ambient="tide"] .text-card,
body[data-ambient="sea"] .text-card,
body[data-ambient="heat"] .text-card {
  position: relative;
}
body[data-ambient="tide"] .text-card::after,
body[data-ambient="sea"] .text-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='180' viewBox='0 0 900 180'%3E%3Cpath fill='rgba(255,255,255,0.13)' d='M0,70 C90,35 180,105 270,70 C360,35 450,105 540,70 C630,35 720,105 810,70 C850,55 880,55 900,65 L900,180 L0,180 Z'/%3E%3C/svg%3E") 0 100% / 420px 90px repeat-x,
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.025) 26%, color-mix(in srgb, var(--accent), transparent 82%) 100%);
  opacity: .74;
  animation: atmoCardWave 5.6s ease-in-out infinite;
}
body[data-ambient="heat"] .text-card,
body[data-ambient="heat"] .scene-card,
body[data-ambient="heat"] .choice-btn {
  box-shadow:
    0 0 38px color-mix(in srgb, var(--accent), transparent 84%),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: atmoHeatDistort 3.4s ease-in-out infinite;
}
body.fx-shake .app-shell {
  animation: fx2StageShake .34s steps(2) infinite;
}
body.fx-blur .reader {
  filter: blur(2.4px);
}
body.fx-blur .topbar,
body.fx-blur .bottombar {
  filter: blur(.8px);
}
body.fx-noise::after,
body.fx-flash::after,
body.fx-blackout::after,
body.fx-glitch::after,
body.fx-drown::after,
body.fx-heatwave::after,
body.fx-heat::after,
body.fx-cold::after,
body.fx-red::after,
body.fx-blood::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}
body.fx-noise::after {
  background:
    radial-gradient(rgba(255,255,255,.55) .75px, transparent .8px),
    radial-gradient(color-mix(in srgb, var(--accent), white 30%) .6px, transparent .7px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.05) 6px 7px);
  background-size: 4px 4px, 9px 9px, auto;
  mix-blend-mode: screen;
  opacity: .22;
  animation: fx2Noise .18s steps(2) infinite;
}
body.fx-flash::after {
  background: rgba(255,255,255,.92);
  opacity: 0;
  animation: fx2Flash 1.8s ease-in-out infinite;
}
body.fx-blackout::after {
  background: #000;
  opacity: 0;
  animation: fx2Blackout 2.7s ease-in-out infinite;
}
body.fx-silence .app-shell {
  filter: saturate(.18) contrast(.82) brightness(.88);
}
body.fx-silence .story-text,
body.fx-silence .scene-card-copy,
body.fx-silence .choice-btn {
  opacity: .58;
}
body.fx-heartbeat .text-card,
body.fx-pulse .text-card {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent), transparent 72%),
    0 0 52px color-mix(in srgb, var(--accent), transparent 76%),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: fx2Heartbeat 1.24s ease-in-out infinite !important;
}
body.fx-heartbeat .story-text,
body.fx-pulse .story-text {
  animation: fx2TextPulse 1.24s ease-in-out infinite;
}
body.fx-breath .text-card,
body.fx-breath .scene-card,
body.fx-breath .choice-btn {
  animation: fx2Breath 4.4s ease-in-out infinite !important;
}
body.fx-glitch .reader {
  animation: fx2GlitchBlock .75s steps(2) infinite;
}
body.fx-glitch .story-text,
body.fx-glitch .speaker,
body.fx-glitch .scene-card-title {
  animation: fx2GlitchText .7s steps(2) infinite;
}
body.fx-glitch::after {
  background:
    linear-gradient(90deg, rgba(255,0,0,.12), transparent 18%, rgba(0,200,255,.12) 28%, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.055) 13px 14px);
  opacity: .22;
  mix-blend-mode: screen;
  animation: fx2GlitchOverlay .5s steps(3) infinite;
}
body.fx-drown::after {
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent), #0b302d 45%) 82%, color-mix(in srgb, var(--accent), #061b1b 25%) 120%),
    radial-gradient(circle at 50% 110%, rgba(42, 126, 148, .35), transparent 52%);
  opacity: .6;
  animation: fx2Drown 4.2s ease-in-out infinite;
}
body.fx-heatwave .reader,
body.fx-heat .reader {
  animation: fx2HeatWave 2.8s ease-in-out infinite;
  filter: blur(.18px) saturate(1.12);
}
body.fx-heatwave::after,
body.fx-heat::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--accent), transparent 80%) 19px 22px, transparent 23px 42px),
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--accent), transparent 70%), transparent 42%);
  filter: blur(7px);
  opacity: .34;
  animation: fx2HeatOverlay 3.1s ease-in-out infinite;
}
body.fx-cold .app-shell {
  box-shadow: inset 0 0 150px color-mix(in srgb, #9ccfff, transparent 54%);
}
body.fx-cold .text-card,
body.fx-cold .scene-card,
body.fx-cold .choice-btn {
  border-color: color-mix(in srgb, #9ccfff, transparent 38%);
  box-shadow:
    0 0 36px color-mix(in srgb, #9ccfff, transparent 80%),
    inset 0 1px 0 rgba(255,255,255,.08);
}
body.fx-cold::after {
  background:
    radial-gradient(circle at 20% 15%, rgba(180,225,255,.18), transparent 24%),
    radial-gradient(circle at 80% 70%, rgba(180,225,255,.12), transparent 28%);
  opacity: .8;
  mix-blend-mode: screen;
}
body.fx-red .app-shell,
body.fx-blood .app-shell {
  box-shadow: inset 0 0 160px rgba(160, 20, 16, .42);
}
body.fx-red .story-text,
body.fx-red .speaker,
body.fx-blood .story-text,
body.fx-blood .speaker {
  color: color-mix(in srgb, var(--text), #e43b2f 34%);
}
body.fx-red::after,
body.fx-blood::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 28%, rgba(120,0,0,.34) 100%),
    linear-gradient(180deg, rgba(180,20,20,.12), transparent 42%, rgba(120,0,0,.16));
  opacity: .76;
  mix-blend-mode: multiply;
}
@keyframes atmoRain {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 130px, 0 0; }
}
@keyframes atmoWind {
  0%, 100% { transform: translateX(-22px); opacity: .14; }
  50% { transform: translateX(28px); opacity: .3; }
}
@keyframes atmoWaveFront {
  0%, 100% {
    transform: translateY(10px);
    background-position: 0 68%, 0 76%, 0 86%, center bottom, 0 0;
  }
  50% {
    transform: translateY(-8px);
    background-position: -190px 66%, 130px 78%, -260px 84%, center bottom, 0 0;
  }
}
@keyframes atmoCardWave {
  0%, 100% { background-position: 0 100%, 0 0; }
  50% { background-position: -140px 96%, 0 0; }
}
@keyframes atmoHeatShimmer {
  0%, 100% { transform: translateX(-4px) skewX(-0.6deg); }
  50% { transform: translateX(6px) skewX(0.8deg); }
}
@keyframes atmoHeatDistort {
  0%, 100% { transform: skewX(0deg) scale(1); filter: blur(0); }
  50% { transform: skewX(.35deg) scale(1.003); filter: blur(.25px); }
}
@keyframes atmoStaticNoise {
  0% { transform: translate(0,0); }
  50% { transform: translate(2px,-2px); }
  100% { transform: translate(-2px,1px); }
}
@keyframes atmoScanDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 12px, 2px -1px, -2px 1px, 0 0; }
}
@keyframes fx2StageShake {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  20% { transform: translate(-4px,2px) rotate(-.08deg); }
  40% { transform: translate(4px,-2px) rotate(.08deg); }
  60% { transform: translate(-2px,-2px) rotate(-.05deg); }
  80% { transform: translate(2px,2px) rotate(.05deg); }
}
@keyframes fx2Noise {
  0% { transform: translate(0,0); }
  50% { transform: translate(3px,-2px); }
  100% { transform: translate(-2px,2px); }
}
@keyframes fx2Flash {
  0%, 78%, 100% { opacity: 0; }
  82% { opacity: .95; }
  86% { opacity: .08; }
  90% { opacity: .42; }
}
@keyframes fx2Blackout {
  0%, 50%, 100% { opacity: 0; }
  62%, 82% { opacity: .82; }
}
@keyframes fx2Heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.018); }
  20% { transform: scale(.998); }
  31% { transform: scale(1.026); }
  44% { transform: scale(1); }
}
@keyframes fx2TextPulse {
  0%, 100% { opacity: 1; }
  18% { opacity: .76; }
  32% { opacity: 1; }
}
@keyframes fx2Breath {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.022); opacity: 1; }
}
@keyframes fx2GlitchBlock {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(1.5px,-1px); }
  50% { transform: translate(-1px,1px); }
  75% { transform: translate(.5px,.5px); }
}
@keyframes fx2GlitchText {
  0%, 100% { transform: translate(0,0); text-shadow: none; opacity: 1; }
  20% { transform: translate(-1px,1px); text-shadow: 2px 0 rgba(255,0,0,.34), -2px 0 rgba(0,180,255,.28); }
  42% { opacity: .58; }
  46% { opacity: 1; }
  60% { transform: translate(1px,-1px); text-shadow: -2px 0 rgba(255,0,0,.22), 2px 0 rgba(0,180,255,.24); }
}
@keyframes fx2GlitchOverlay {
  0% { transform: translateX(-8px); opacity: .12; }
  50% { transform: translateX(8px); opacity: .28; }
  100% { transform: translateX(-3px); opacity: .18; }
}
@keyframes fx2Drown {
  0%, 100% { transform: translateY(34px); opacity: .36; }
  50% { transform: translateY(-10px); opacity: .72; }
}
@keyframes fx2HeatWave {
  0%, 100% { transform: skewX(0deg) scale(1); }
  50% { transform: skewX(.6deg) scale(1.004); }
}
@keyframes fx2HeatOverlay {
  0%, 100% { transform: translateX(-8px) skewX(-.6deg); }
  50% { transform: translateX(8px) skewX(.8deg); }
}
/* Keep atmosphere full-screen; avoid local boxed effects inside the reader. */