:root {
  --ink: #0A0812;
  --cream: #FFF7E8;
  --panel-bg: #0d1a0d;
  --panel-dots: #1a2e1a;
  --accent-color: #7EC850;
  --bubble-bg: #FFF7E8;
  --text-color: #0A0812;
}

/* ── Act Palettes ─────────────────────────────── */
.palette-act-1 { --panel-bg:#1a1a0d; --panel-dots:#2e2e14; --accent-color:#C8A84B; --bubble-bg:#FFF7E8; --text-color:#0A0812; }
.palette-act-2 { --panel-bg:#141a0d; --panel-dots:#243314; --accent-color:#7EC850; --bubble-bg:#edfade; --text-color:#0A0812; }
.palette-act-3 { --panel-bg:#181408; --panel-dots:#332a10; --accent-color:#E8B84B; --bubble-bg:#FFF7E8; --text-color:#0A0812; }
.palette-act-4 { --panel-bg:#141c24; --panel-dots:#1e2e3d; --accent-color:#4E9CCD; --bubble-bg:#e0f0fc; --text-color:#0A0812; }
.palette-act-5 { --panel-bg:#0a0a14; --panel-dots:#12122a; --accent-color:#8888DD; --bubble-bg:#e8e8ff; --text-color:#0A0812; }
.palette-act-6 { --panel-bg:#060c14; --panel-dots:#0d1830; --accent-color:#4ECDC4; --bubble-bg:#d8f5f3; --text-color:#0A0812; }
.palette-act-7 { --panel-bg:#0a0d18; --panel-dots:#14182e; --accent-color:#9DC4E0; --bubble-bg:#d0e8f8; --text-color:#0A0812; }
.palette-act-8 { --panel-bg:#1a2a10; --panel-dots:#2a4018; --accent-color:#A8D870; --bubble-bg:#eafade; --text-color:#0A0812; }
.palette-act-9 { --panel-bg:#0a1420; --panel-dots:#10203a; --accent-color:#F0C84B; --bubble-bg:#fff8dc; --text-color:#0A0812; }
.palette-act-10{ --panel-bg:#1a100a; --panel-dots:#2e1810; --accent-color:#C87050; --bubble-bg:#fde8e0; --text-color:#0A0812; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--ink);
  font-family: 'Nunito', sans-serif;
  color: var(--cream);
}

/* ── Start Screen ─────────────────────────────── */
#startScreen {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(160deg, #0d1a0d, #1a2e10 60%, #0a1a0a);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px; transition: opacity .5s;
}
#startScreen .comic-cover {
  width: min(90vw, 440px);
  background: #0d1a0d;
  padding: 30px;
  border: 6px solid var(--ink);
  box-shadow: 12px 12px 0px var(--ink);
  background-image: radial-gradient(#1a2e10 15%, transparent 15%);
  background-size: 12px 12px;
}
#startScreen .issue {
  font-family: 'Space Mono', monospace; font-size: 12px;
  color: var(--ink); background: #E8B84B;
  display: inline-block; padding: 4px 10px; margin-bottom: 14px;
  font-weight: 700; border: 2px solid var(--ink);
}
#startScreen h1 {
  font-family: 'Bangers', cursive;
  font-size: clamp(54px, 14vw, 90px);
  margin: 0; color: #E8B84B;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill; line-height: 1;
  text-shadow: 6px 6px 0 #7EC850;
}
#startScreen .subtitle {
  font-family: 'Baloo 2', sans-serif; font-size: 22px;
  color: var(--cream); margin: 4px 0 16px; font-weight: 800;
  text-shadow: 2px 2px 0px var(--ink);
}
.bigark { font-size: 64px; margin-bottom: 10px; animation: popInAnim .8s .2s both; }
#startScreen p {
  font-family: 'Press Start 2P', monospace; font-size: 10px;
  max-width: 460px; color: var(--cream); opacity: .9;
  margin: 18px 0 26px; line-height: 2;
}
#startBtn {
  font-family: 'Press Start 2P', monospace; font-size: 14px;
  background: #7EC850; color: var(--ink);
  border: 4px solid var(--ink); padding: 16px 30px; cursor: pointer;
  box-shadow: 6px 6px 0 var(--ink); transition: all .1s;
}
#startBtn:hover { box-shadow: 4px 4px 0 var(--ink); transform: translateY(2px); }
#startScreen.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── App Shell ────────────────────────────────── */
#app { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }

#halftoneOverlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle, #fff 15%, #000 85%);
  background-size: 8px 8px;
  mix-blend-mode: multiply; opacity: 0.16; pointer-events: none; z-index: 50;
}
#bgGradient { position: absolute; inset: 0; transition: background 1.1s ease; z-index: 0; }
#particles   { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── Rain / Storm Layer ───────────────────────── */
#rainLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#rainLayer.active { opacity: 1; }
#rainStripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    170deg,
    transparent 0px, transparent 4px,
    rgba(150,200,240,0.08) 4px, rgba(150,200,240,0.08) 5px
  );
  animation: rainFall 0.6s linear infinite;
}
@keyframes rainFall { from { background-position: 0 0; } to { background-position: -50px 100px; } }
.wave-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; }
.air { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-size: 1000px 100px; }
.air.air1 { animation: waveScroll 16s linear infinite; z-index: 4; opacity: .9; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%234E9CCD' opacity='0.6'/%3E%3C/svg%3E"); }
.air.air2 { animation: waveScrollRev 9s linear infinite; z-index: 3; opacity: .55; bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%23C87050' opacity='0.5'/%3E%3C/svg%3E"); }
.air.air3 { animation: waveScroll 20s linear infinite; z-index: 2; opacity: .35; bottom: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%23E8B84B' opacity='0.4'/%3E%3C/svg%3E"); }
.air.air4 { animation: waveScrollRev 6s linear infinite; z-index: 1; opacity: .6; bottom: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 500,60 C650,100 850,20 1000,60 L1000,100 L0,100 Z' fill='%23FFF7E8' opacity='0.2'/%3E%3C/svg%3E"); }
@keyframes waveScroll { 0% { background-position-x: 0; } 100% { background-position-x: 1000px; } }
@keyframes waveScrollRev { 0% { background-position-x: 0; } 100% { background-position-x: -1000px; } }

/* ── Ambient Layer (post-flood, covenant, etc) ── */
#ambientLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#ambientLayer.active { opacity: 1; }
.dove-container { position: absolute; top: 0; left: 0; width: 100%; height: 200px; }
.dove-fly {
  position: absolute; top: -20px; font-size: 18px;
  animation: doveFloat 12s linear infinite; opacity: 0.75;
}
@keyframes doveFloat { 0% { left: -5%; top: 30%; transform: scaleX(1); } 100% { left: 110%; top: 20%; transform: scaleX(1); } }
.dove-fly:nth-child(2) { animation-duration: 15s; animation-delay: -6s; top: 15%; font-size: 14px; }
.dove-fly:nth-child(3) { animation-duration: 18s; animation-delay: -3s; top: 45%; font-size: 11px; }
.rainbow-arc {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 200%; height: 80%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: conic-gradient(from 180deg at 50% 100%,
    rgba(255,0,0,0.15), rgba(255,165,0,0.15), rgba(255,255,0,0.15),
    rgba(0,200,0,0.15), rgba(0,100,255,0.15), rgba(100,0,200,0.15),
    rgba(255,0,0,0.15));
  opacity: 0; transition: opacity 2s ease; pointer-events: none;
}
#ambientLayer.rainbow .rainbow-arc { opacity: 1; }

/* ── HUD ─────────────────────────────────────── */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; pointer-events: auto; gap: 10px;
}
#chapterSelect {
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  letter-spacing: .05em; text-transform: uppercase;
  background-color: var(--accent-color); color: var(--ink);
  border: 4px solid var(--ink); padding: 10px 34px 10px 16px;
  box-shadow: 4px 4px 0px var(--ink); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230A0812'%3E%3Cpath d='M0 3h12L6 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: background-color 0.5s;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}
#dots { display: flex; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); transition: .3s; flex-shrink: 0; }
.dot.on { background: var(--accent-color); transform: scale(1.3); border: 1px solid var(--ink); }

/* ── Stage / Frame ───────────────────────────── */
#stageWrap {
  position: absolute; top: 90px; left: 0; right: 0; bottom: 24vh;
  z-index: 10; display: flex; align-items: center; justify-content: center;
}
#stage {
  position: relative; width: min(94vw, 760px); height: 100%;
  perspective: 1200px; display: flex; align-items: center; justify-content: center;
}
.comic-frame {
  width: 100%; height: 100%;
  background: var(--panel-bg);
  border: 6px solid var(--ink);
  box-shadow: 12px 12px 0px var(--ink);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px;
  background-image: radial-gradient(var(--panel-dots) 20%, transparent 20%),
                    radial-gradient(var(--panel-dots) 20%, transparent 20%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  transition: background 0.5s ease-in-out;
}
#graphicContainer {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#svgLayer {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; transition: opacity 0.5s;
}
#svgLayer svg {
  width: 85%; height: auto; max-height: 85%;
  filter: drop-shadow(6px 6px 0px var(--ink));
}

/* ── Content Overlay ─────────────────────────── */
.content-overlay {
  position: relative; z-index: 4; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.char-container {
  width: 110px; height: 110px;
  filter: drop-shadow(4px 4px 0px var(--ink));
  animation: floatChar 3s ease-in-out infinite alternate;
  position: absolute; bottom: 20px; left: 20px;
}
@keyframes floatChar { 0% { transform: translateY(0) rotate(-1deg); } 100% { transform: translateY(-5px) rotate(2deg); } }

/* ── Caption (narrator) ─────────────────────── */
.caption {
  background-color: #E8B84B;
  background-image: radial-gradient(rgba(0,0,0,0.1) 15%, transparent 15%);
  background-size: 6px 6px;
  color: var(--ink); font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.8vw, 13px); line-height: 1.6;
  padding: 14px 18px; border: 4px solid var(--ink);
  transform: rotate(-0.5deg); box-shadow: 6px 6px 0px var(--ink);
  width: 90%; text-align: center; hyphens: none; word-break: keep-all;
  max-width: 100%; margin-top: 10px;
}
.caption.caption-left  { width: 54%; align-self: flex-start; transform: rotate(-0.3deg); text-align: left; }
.caption.caption-center{ width: 72%; align-self: center; transform: rotate(-0.5deg); text-align: center; }
.caption.caption-right { width: 90%; align-self: flex-end; transform: rotate(0.3deg); text-align: right; }

/* ── Speech Bubbles ─────────────────────────── */
.bubble-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; padding: 0 40px; }
.bubble-wrap.align-left  { align-items: flex-start; }
.bubble-wrap.align-center{ align-items: center; }
.bubble-wrap.align-right { align-items: flex-end; }
.bubble {
  position: relative; background-color: var(--bubble-bg); color: var(--text-color);
  padding: 18px 24px; border: 4px solid var(--ink);
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(16px, 2.8vw, 24px); line-height: 1.35;
  width: 100%; border-radius: 16px; box-shadow: 6px 6px 0px var(--ink);
  text-align: center; hyphens: none; word-break: keep-all; max-width: 100%;
  transition: background-color 0.5s, color 0.5s;
}
.bubble.bubble-left  { width: 54%; text-align: left; }
.bubble.bubble-center{ width: 72%; text-align: center; }
.bubble.bubble-right { width: 90%; text-align: right; }
.bubble::after {
  content: ''; position: absolute; bottom: -20px; left: 25%;
  border-width: 20px 15px 0; border-style: solid;
  border-color: var(--ink) transparent; display: block; width: 0;
}
.bubble::before {
  content: ''; position: absolute; bottom: -12px; left: 25%;
  border-width: 16px 11px 0; border-style: solid; border-color: inherit;
  display: block; width: 0; z-index: 1; margin-left: 4px;
}
/* God's voice — gold dashed border, Bangers font */
.bubble.god {
  background-color: #E8B84B; color: #0A0812;
  font-family: 'Bangers', cursive; font-size: clamp(24px, 4.5vw, 40px);
  letter-spacing: .05em; border-radius: 4px; border: 5px dashed var(--ink);
}
.bubble.god::after  { left: 50%; transform: translateX(-50%); }
.bubble.god::before { left: 50%; transform: translateX(-50%); border-top-color: #E8B84B; margin-left: 0; }
/* Thought bubble for Noah */
.bubble.noah { border-radius: 24px; }

/* ── SFX Text ─────────────────────────────────── */
.sfx {
  font-family: 'Bangers', cursive;
  font-size: clamp(54px, 10vw, 90px);
  color: #E8B84B; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 6px 6px 0 #7EC850;
  transform: rotate(-6deg) scale(1.05); line-height: 1;
  position: absolute; top: 35%; z-index: 4; pointer-events: none;
}

/* ── Choices ─────────────────────────────────── */
#choices {
  position: absolute; left: 50%; bottom: 11.5vh; transform: translateX(-50%);
  z-index: 15; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  width: min(92vw, 760px); opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
#choices.show { opacity: 1; pointer-events: auto; }
.choiceBtn {
  font-family: 'Press Start 2P', monospace; font-size: 10px;
  background: #7EC850; border: 4px solid var(--ink); color: var(--ink);
  padding: 12px 20px; cursor: pointer; transition: all .1s;
  box-shadow: 0 6px 0 var(--ink); text-align: center;
}
.choiceBtn:hover { box-shadow: 0 4px 0 var(--ink); transform: translateY(2px); }
.choiceBtn:active{ box-shadow: 0 0 0 var(--ink); transform: translateY(6px); }

/* ── Delay Note ──────────────────────────────── */
#delayNote {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%) rotate(-0.5deg);
  z-index: 15; font-family: 'Press Start 2P', monospace; font-size: clamp(9px, 1.6vw, 12px);
  color: var(--ink); background-color: #E8B84B;
  background-image: radial-gradient(rgba(0,0,0,0.1) 15%, transparent 15%);
  background-size: 6px 6px; padding: 14px 22px; border: 4px solid var(--ink);
  box-shadow: 6px 6px 0px var(--ink); opacity: 0; pointer-events: none; transition: opacity .4s;
  text-align: center; width: 90%; line-height: 1.6;
}
#delayNote.show { opacity: 1; pointer-events: auto; }

/* ── Navigation ──────────────────────────────── */
#navHints {
  position: absolute; bottom: 2.4vh; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  row-gap: 4px; gap: clamp(8px, 3vw, 22px); padding: 0 12px;
  font-family: 'Space Mono', monospace; font-size: clamp(8px, 2.4vw, 11px);
  letter-spacing: .05em; color: rgba(255,255,255,.5); pointer-events: none; text-align: center;
}
#nextBtn, #nextLineBtn {
  position: absolute; bottom: 6.2vh; right: 4vw; z-index: 25;
  font-family: 'Baloo 2', sans-serif; font-weight: 900;
  color: var(--ink); border: 3px solid var(--ink); padding: 12px 24px; cursor: pointer;
  box-shadow: 4px 4px 0px var(--ink); opacity: 0; transform: translateY(20px);
  transition: .4s; pointer-events: none;
}
#nextBtn     { font-size: 16px; background: #C87050; }
#nextLineBtn { font-size: 14px; background: #7EC850; }
#nextBtn.show, #nextLineBtn.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#nextBtn:hover, #nextLineBtn:hover { transform: translateY(-2px); box-shadow: 6px 6px 0px var(--ink); }
#nextBtn.finale { background: #E8B84B; }

/* ── Portal Transition ───────────────────────── */
#portal {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 150%, #000 150%);
}
#portal.falling { animation: fallIn .75s cubic-bezier(.7,0,.9,.4) forwards; }
@keyframes fallIn {
  0%   { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 150%, #000 150%); }
  100% { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 0%, #000 0%); }
}
#portal.rising  { animation: riseOut .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes riseOut {
  0%   { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 0%, #000 0%); }
  100% { background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 150%, #000 150%); }
}

/* ── Frame Entry Animation ───────────────────── */
.popIn  { animation: popInAnim  .6s cubic-bezier(.2,1.4,.4,1) both; }
.popOut { animation: popOutAnim .4s ease both; }
@keyframes popInAnim  { 0% { opacity:0; transform: scale(.95) translateY(20px); } 100% { opacity:1; transform: scale(1) translateY(0); } }
@keyframes popOutAnim { 0% { opacity:1; transform: scale(1) translateY(0); } 100% { opacity:0; transform: scale(.98) translateY(-10px); } }

/* ── Text Animation Effects ──────────────────── */
.fx-fade .word   { opacity:0; transform:translateY(10px); animation: chFade .4s ease both; }
@keyframes chFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.fx-type .word   { display:inline-block; opacity:0; transform:translateY(4px); animation: chType .2s ease both; }
@keyframes chType { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.fx-wave .word   { opacity:0; animation: chWaveIn .3s ease both, chWaveBob 1.5s ease-in-out infinite; }
@keyframes chWaveIn { from { opacity:0; } to { opacity:1; } }
@keyframes chWaveBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.fx-bounce .word { display:inline-block; opacity:0; transform:scale(.3) translateY(20px); animation: wordBounce .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes wordBounce { from { opacity:0; transform:scale(.3) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }
.fx-shake .line-inner { display:inline-block; animation: shakeIt .4s ease-in-out infinite; }
@keyframes shakeIt { 0%,100% { transform:translate(0,0); } 20% { transform:translate(-3px,2px); } 40% { transform:translate(3px,-2px); } 60% { transform:translate(-2px,1px); } 80% { transform:translate(2px,-1px); } }

/* ── Responsive ──────────────────────────────── */
@media (max-width:600px) {
  #hud { flex-direction: column; align-items: center; padding: 14px 12px; gap: 8px; }
  #chapterSelect { order:2; font-size:8px; }
  #dots { order:1; flex-wrap:wrap; justify-content:center; max-width:90vw; }
}
@media (prefers-reduced-motion: reduce) {
  .air, #rainStripes, .dove-fly { animation: none !important; }
}