/* The Ruth theme extends the complete layered-comic layout supplied by the
   story template. Keep this import first so the rules below can customise it. */
@import url("base-comic.css");

/* =========================================================================
   RUTH — Comic Stylesheet
   Palette: parchment cream, earth umber, muted teal, barley gold
   ========================================================================= */

:root {
  --parchment: #d8c8a0;
  --earth: #5a4028;
  --umber: #3a2818;
  --teal-muted: #4a6878;
  --barley: #c8a848;
  --gold-restrained: #b89840;
  --warm-white: #f8ecd0;
  --shadow-soft: rgba(40, 28, 16, 0.4);
}

/* ── Wind-swept barley page background ─────────────────────
   Adapted for Ruth from KPCodes' “Grass in the wind” CodePen. */
.ruth-field-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #527b9d 0%, #91a67f 58%, #77602e 100%);
}

#startScreen > .ruth-field-backdrop { z-index: 0; }
#startScreen .comic-cover { position: relative; z-index: 1; }
#app > .ruth-field-backdrop { opacity: .48; }

.ruth-field-sun {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 220%;
  background: radial-gradient(circle at 52% 47%, rgba(255, 220, 105, .95) 0 4%, rgba(229, 166, 58, .48) 8%, rgba(82, 123, 157, .08) 27%, transparent 48%);
  transform: translateY(-42%);
}

.ruth-grass-field { position: absolute; inset: 0; }

.ruth-grass-clump {
  position: absolute;
  bottom: -1px;
  width: var(--clump-size);
  height: var(--clump-size);
  overflow: hidden;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  opacity: var(--clump-opacity);
  animation: ruthGentleBreeze var(--sway-time) ease-in-out var(--sway-delay) infinite;
  will-change: transform;
}

.ruth-grass-blade {
  position: absolute;
  bottom: -100%;
  left: -50%;
  width: 100%;
  height: 160%;
  border-right: max(2px, 1.8vmin) solid var(--blade-color);
  border-top-right-radius: 50%;
  transform-origin: bottom right;
}

.ruth-grass-blade:nth-child(2) {
  bottom: -230%;
  left: -150%;
  width: 200%;
  height: 300%;
  border-top-right-radius: 20%;
}

.ruth-grass-blade:nth-child(3) {
  bottom: -300%;
  left: 50%;
  width: 200%;
  height: 360%;
  border-right: 0;
  border-left: max(2px, 1.8vmin) solid var(--blade-color);
  border-top-left-radius: 15%;
  transform-origin: bottom left;
}

@keyframes ruthSunrise {
  from { transform: translateY(0); }
  to { transform: translateY(-42%); }
}
@keyframes ruthGentleBreeze {
  0%, 100% { transform: translateX(-50%) rotate(-.35deg); }
  50% { transform: translateX(-50%) rotate(.35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ruth-field-sun,
  .ruth-grass-clump { animation: none; }
}

/* ── Act Palettes ───────────────────────────── */
/* NOTE: --panel-bg, --panel-dots, --accent-color, --bubble-bg and
   --text-color are the variables base-comic.css actually reads for panel
   backgrounds, the dot progress bar, the chapter select, and default bubble
   colour. --accent / --accent-dark are Ruth-only additions used for the
   Next Chapter button. Every one of these needs to be set per act, or the
   panel falls back to base-comic.css's leftover Exodus palette. */
.palette-act-1 { --accent: #d4a860; --accent-dark: #8a6830; --panel-bg:#241a10; --panel-dots:#332415; --accent-color:#d4a860; --bubble-bg:#f8ecd4; --text-color:#2a1810; }
.palette-act-2 { --accent: #c89860; --accent-dark: #7a5830; --panel-bg:#2a1c10; --panel-dots:#3a2818; --accent-color:#c89860; --bubble-bg:#f8ead4; --text-color:#2a1810; }
.palette-act-3 { --accent: #8a9a48; --accent-dark: #4a5828; --panel-bg:#2a3018; --panel-dots:#3a4020; --accent-color:#8a9a48; --bubble-bg:#f4f0d8; --text-color:#26301a; }
.palette-act-4 { --accent: #4a6888; --accent-dark: #2a4058; --panel-bg:#141e2a; --panel-dots:#1e2c3c; --accent-color:#4a6888; --bubble-bg:#e4eef8; --text-color:#182430; }
.palette-act-5 { --accent: #6a5840; --accent-dark: #3a2818; --panel-bg:#1a1410; --panel-dots:#281f18; --accent-color:#6a5840; --bubble-bg:#ece0d0; --text-color:#241a10; }
.palette-act-6 { --accent: #b89870; --accent-dark: #6a5038; --panel-bg:#241c14; --panel-dots:#342a1e; --accent-color:#b89870; --bubble-bg:#f4e8d4; --text-color:#2a2014; }
.palette-act-7 { --accent: #c8a878; --accent-dark: #7a5838; --panel-bg:#2e2010; --panel-dots:#3e2c18; --accent-color:#c8a878; --bubble-bg:#fbeed8; --text-color:#2e2010; }
.palette-act-8 { --accent: #d8b888; --accent-dark: #8a6840; --panel-bg:#242c14; --panel-dots:#343c1e; --accent-color:#d8b888; --bubble-bg:#fdf6e0; --text-color:#2a2410; }

/* Contextual lower surface: earth, barley field, or threshing-floor grain. */
.palette-act-1,
.palette-act-2 { --surface-1:#8c6c3c; --surface-2:#a9854d; --surface-3:#c0a36a; --surface-4:#6f542f; }
.palette-act-3,
.palette-act-4,
.palette-act-7,
.palette-act-8 { --surface-1:#42652f; --surface-2:#62813c; --surface-3:#88a951; --surface-4:#304d28; }
.palette-act-5,
.palette-act-6 { --surface-1:#8b6735; --surface-2:#b18a49; --surface-3:#d0ad63; --surface-4:#6d4e2a; }

/* The template's lower wave markup is terrain in Ruth, not permanent water. */
#rainLayer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#rainLayer.active { opacity: .78; }
#rainLayer #rainStripes { display: none; }
#rainLayer .wave-container { height: 112px; }
#rainLayer .air {
  background-image: none;
  background-color: var(--surface-1, #8c6c3c);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 100 350 20 500 60s350-40 500 0v40H0z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 100 350 20 500 60s350-40 500 0v40H0z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 1000px 100px; mask-size: 1000px 100px;
}
#rainLayer .air1 { background-color: var(--surface-1); }
#rainLayer .air2 { background-color: var(--surface-2); }
#rainLayer .air3 { background-color: var(--surface-3); }
#rainLayer .air4 { background-color: var(--surface-4); }

/* ── Cover Screen ───────────────────────────── */
#startScreen .comic-cover {
  background: radial-gradient(ellipse at 50% 30%, #3a2818 0%, #1a1008 70%);
}

#startScreen h1 {
  font-size: 5rem;
  color: var(--parchment);
  text-shadow: 0 4px 20px var(--barley), 0 0 60px rgba(200, 168, 72, 0.3);
  letter-spacing: 0.1em;
}

#startScreen .subtitle {
  color: var(--barley);
  font-style: italic;
}

#startScreen .bigtorch {
  font-size: 4rem;
  filter: drop-shadow(0 0 20px rgba(200, 168, 72, 0.5));
}

#startScreen p {
  color: var(--warm-white);
  max-width: 500px;
  margin: 1rem auto;
  line-height: 1.6;

  font-weight: 700;
}

#startBtn {
  background: linear-gradient(135deg, var(--barley), var(--gold-restrained));
  color: var(--umber);
  border: none;
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px var(--shadow-soft);
}

#startBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(200, 168, 72, 0.4);}

/* ── Dialogue Bubbles ───────────────────────── */
.bubble {
  background: var(--warm-white);
  color: var(--umber);
  border: 2px solid var(--earth);
  border-radius: 18px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 3px 12px var(--shadow-soft);
  font-family: 'Georgia', serif;
  line-height: 1.5;
}

.bubble.ruth { border-bottom-left-radius: 4px; }
.bubble.naomi { border-bottom-right-radius: 4px; }
.bubble.boaz { border-bottom-left-radius: 4px; background: #e8f0f8; }
.bubble.kinsman_redeemer { border-bottom-right-radius: 4px; background: #f0e8e0; }
.bubble.field_overseer { border-bottom-right-radius: 4px; }
.bubble.bethlehem_woman { border-bottom-left-radius: 4px; background: #f8ece0; }

/* Match each bubble's ::before fill-triangle to its own background, the
   same way base-comic.css does for its own character bubbles — otherwise
   the speech-bubble tail renders in the default dark ink colour and looks
   broken against a light bubble. */
.bubble.boaz::before { border-top-color: #e8f0f8; }
.bubble.kinsman_redeemer::before { border-top-color: #f0e8e0; }
.bubble.bethlehem_woman::before { border-top-color: #f8ece0; }

.caption {
  background: rgba(26, 16, 8, 0.85);
  color: var(--warm-white);
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  font-style: italic;
  border: 1px solid rgba(200, 168, 72, 0.2);
}

/* ── Choice Buttons ─────────────────────────── */
.choiceBtn {
  background: linear-gradient(135deg, rgba(200, 168, 72, 0.9), rgba(184, 152, 64, 0.9));
  color: var(--umber);
  border: 2px solid var(--barley);
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 3px 10px var(--shadow-soft);
}

.choiceBtn:hover {
  background: linear-gradient(135deg, rgba(220, 180, 80, 1), rgba(200, 168, 72, 1));
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(200, 168, 72, 0.3);
}

/* ── Navigation Buttons ─────────────────────── */
#nextBtn, #nextLineBtn {
  background: linear-gradient(135deg, var(--accent, var(--barley)), var(--accent-dark, var(--gold-restrained)));
  color: var(--warm-white);
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 3px 12px var(--shadow-soft);
  transition: transform 0.2s;
}

#nextBtn:hover, #nextLineBtn:hover {
  transform: translateY(-2px);
}

/* ── Delay Note ─────────────────────────────── */
#delayNote {
  background: rgba(26, 16, 8, 0.9);
  color: var(--barley);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-style: italic;
  border-left: 3px solid var(--barley);
}

/* ── Stage & Frames ─────────────────────────── */
#stageWrap {
  overflow: hidden;
}

.comic-frame {
  background: #1a1008;
}

/* ── Character Containers ───────────────────── */
.char-container {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.char-container.right {
  float: right;
  margin-left: 1rem;
}

/* ── HUD ────────────────────────────────────── */
#hud select {
  background: rgba(26, 16, 8, 0.9);
  color: var(--parchment);
  border: 1px solid var(--barley);
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
}

.dot {
  background: rgba(200, 168, 72, 0.3);
  border: 1px solid var(--barley);
}

.dot.on {
  background: var(--barley);
  box-shadow: 0 0 8px var(--barley);
}

/* ── Nav Hints ──────────────────────────────── */
#navHints {
  color: rgba(216, 200, 160, 0.6);
  font-size: 0.85rem;
}

/* ── Audio Toggle ───────────────────────────── */
#audioToggle {
  background: rgba(26, 16, 8, 0.8);
  border: 1px solid var(--barley);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  #startScreen h1 { font-size: 3rem; }
  .bubble { max-width: 200px; font-size: 0.9rem; }
  #navHints { font-size: 0.75rem; }
}