/* Bridge, restrained design. Cream + warm dark + one accent. */

:root {
  --bg: #f7f3ec;
  --bg-elev: #fffdf8;
  --text: #2a2723;
  --muted: #7a736a;
  --line: #e5dfd4;
  --line-strong: #ccc4b6;
  --accent: #c95a36;
  --accent-soft: #f3d8cc;
  --char-a: #a8447a;
  --char-a-soft: #f1dce8;
  --char-b: #2f7d8a;
  --char-b-soft: #d5ebee;
  --mediator: #5a7c4a;
  --mediator-soft: #e2ecd9;
  --warn: #a4642b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 10px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 { font-size: 1.9rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.45rem; margin: 0 0 0.4rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }

/* Top bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand {
  font-family: "Iowan Old Style", "Charter", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.brand .brand-sub {
  font-weight: 400;
  font-style: italic;
  font-size: 0.8em;
  opacity: 0.7;
  margin-left: 0.45em;
  letter-spacing: 0;
}
@media (max-width: 600px) {
  /* On mobile the topbar is tight, drop the suffix to keep things clean */
  .brand .brand-sub { display: none; }
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.icon-btn {
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Layout */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.4rem 4rem;
}

/* ===========================================================
   AMBIENT BACKDROP, for landing/onboarding
   Two stacked background divs that crossfade between scene
   paintings, each running a slow Ken Burns zoom. Dark gradient
   overlay + vignette for text legibility. Hidden by default;
   visible when body has .ambient-active class.
   =========================================================== */
.ambient-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
}
body.ambient-active .ambient-backdrop { opacity: 1; }

/* When ambient is active, hide the cream body bg so scene paintings show.
   Topbar styling is handled by the streaming-service-glass rule further below. */
body.ambient-active { background: #14100c; }
body.ambient-active main { position: relative; z-index: 2; }

.ambient-bg {
  position: absolute;
  inset: -4%;        /* slight extra so Ken Burns zoom never reveals edges */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: kenBurns 14s ease-in-out infinite;
  transform-origin: center;
}
.ambient-bg.active { opacity: 1; }
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, 1%); }
  100% { transform: scale(1.00) translate(0, 0); }
}

.ambient-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20, 15, 10, 0.42) 0%,
      rgba(20, 15, 10, 0.30) 35%,
      rgba(20, 15, 10, 0.65) 100%);
}
.ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 30%,
    rgba(20, 15, 10, 0.55) 100%);
}

/* Soft color clouds, large blurred washes drifting slowly, adding depth */
.ambient-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.45;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.cloud.c1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255, 180, 110, 0.55), rgba(255, 180, 110, 0) 70%);
  top: 8%; left: -12%;
  animation: cloudDriftA 65s ease-in-out infinite;
}
.cloud.c2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(110, 160, 200, 0.45), rgba(110, 160, 200, 0) 70%);
  top: 42%; right: -10%;
  animation: cloudDriftB 80s ease-in-out infinite;
}
.cloud.c3 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255, 210, 170, 0.40), rgba(255, 210, 170, 0) 70%);
  bottom: -8%; left: 25%;
  animation: cloudDriftC 75s ease-in-out infinite;
}
.cloud.c4 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(180, 140, 200, 0.32), rgba(180, 140, 200, 0) 70%);
  top: 25%; left: 45%;
  animation: cloudDriftD 90s ease-in-out infinite;
}
@keyframes cloudDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(28vw, 12vh) scale(1.15); }
  66%      { transform: translate(15vw, 28vh) scale(0.95); }
}
@keyframes cloudDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-22vw, 14vh) scale(1.2); }
}
@keyframes cloudDriftC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(20vw, -18vh) scale(1.1); }
  70%      { transform: translate(-10vw, -8vh) scale(0.9); }
}
@keyframes cloudDriftD {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-18vw, -14vh) scale(1.3); }
}

/* Floating watercolor particles, soft dust/ink-bleed motes drifting */
.ambient-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 230, 200, 0.45) 0%,
    rgba(255, 230, 200, 0.10) 40%,
    transparent 70%);
  filter: blur(1.5px);
  opacity: 0;
  animation: particleDrift linear infinite;
}
.ambient-particle.p1 { left: 8%;  bottom: -40px; width: 28px; height: 28px; animation-duration: 28s; animation-delay: 0s; }
.ambient-particle.p2 { left: 22%; bottom: -40px; width: 16px; height: 16px; animation-duration: 22s; animation-delay: 5s; }
.ambient-particle.p3 { left: 38%; bottom: -40px; width: 36px; height: 36px; animation-duration: 34s; animation-delay: 2s; }
.ambient-particle.p4 { left: 54%; bottom: -40px; width: 20px; height: 20px; animation-duration: 26s; animation-delay: 8s; }
.ambient-particle.p5 { left: 68%; bottom: -40px; width: 22px; height: 22px; animation-duration: 30s; animation-delay: 3s; }
.ambient-particle.p6 { left: 84%; bottom: -40px; width: 18px; height: 18px; animation-duration: 24s; animation-delay: 10s; }
.ambient-particle.p7 { left: 15%; bottom: -40px; width: 12px; height: 12px; animation-duration: 20s; animation-delay: 13s; }
.ambient-particle.p8 { left: 76%; bottom: -40px; width: 30px; height: 30px; animation-duration: 32s; animation-delay: 16s; }

@keyframes particleDrift {
  0%   { transform: translateY(0)       translateX(0)    scale(0.6); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(-50vh)   translateX(20px) scale(1);   opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-105vh)  translateX(-15px) scale(0.8); opacity: 0; }
}

/* Subtle light beam sweeping across the scene */
.ambient-beam {
  position: absolute;
  top: 0;
  left: -50%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(255, 230, 200, 0.08) 50%,
    transparent 65%);
  animation: beamSweep 22s ease-in-out infinite;
  pointer-events: none;
}
@keyframes beamSweep {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50%      { transform: translateX(180%); opacity: 0.8; }
}

/* Onboarding text legibility against the ambient backdrop */
body.ambient-active .onb-brand {
  color: rgba(255, 248, 236, 0.98);
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.75),
    0 0 32px rgba(0, 0, 0, 0.45);
  animation: brandBreath 5s ease-in-out infinite,
             brandIn 800ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
body.ambient-active .onb-tagline,
body.ambient-active .onb-body {
  color: rgba(255, 248, 236, 0.94);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}
body.ambient-active .onb-tagline {
  /* parent reveals itself instantly; each word animates in below */
  opacity: 1;
}
.onb-tagline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: wordIn 700ms cubic-bezier(0.34, 1.05, 0.64, 1) forwards;
}
.onb-tagline span:nth-child(1) { animation-delay: 2300ms; }
.onb-tagline span:nth-child(2) { animation-delay: 2450ms; }
.onb-tagline span:nth-child(3) { animation-delay: 2600ms; }
.onb-tagline span:nth-child(4) { animation-delay: 2850ms; }
.onb-tagline span:nth-child(5) { animation-delay: 2980ms; }
.onb-tagline span:nth-child(6) { animation-delay: 3110ms; }
.onb-tagline span:nth-child(7) { animation-delay: 3260ms; }
.onb-tagline span:nth-child(8) { animation-delay: 3410ms; }
.onb-tagline span:nth-child(9) { animation-delay: 3540ms; }
@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); }
}
/* On non-screen-1 (screen 2 + 3 don't have span wrapping), keep
   the original tagline behavior but onb-tagline spans only exist
   on screen 1 so this is naturally scoped. */
body.ambient-active .onb-body {
  animation: bodyIn 700ms ease 200ms both;
}
body.ambient-active .onb-body.onb-emphasis {
  color: #f4c8a8;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
body.ambient-active .onb-screen .primary-btn {
  animation: btnIn 700ms ease 700ms both;
  box-shadow:
    0 6px 20px rgba(201, 90, 54, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
/* Screen 1 button waits for the tagline to finish, then gently pulses
   to invite a click without being noisy */
body.ambient-active .onb-screen[data-screen="1"] .primary-btn {
  animation:
    btnIn 800ms ease 3800ms both,
    btnPulse 3.4s ease-in-out 5000ms infinite;
}
@keyframes btnPulse {
  0%, 100% {
    box-shadow:
      0 6px 20px rgba(201, 90, 54, 0.40),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 0 0 rgba(201, 90, 54, 0.5);
  }
  50% {
    box-shadow:
      0 8px 26px rgba(201, 90, 54, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 0 0 8px rgba(201, 90, 54, 0);
  }
}
body.ambient-active .onb-dot {
  background: rgba(255, 248, 236, 0.32);
}
body.ambient-active .onb-dot.active {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(201, 90, 54, 0.6);
}

@keyframes brandBreath {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.015); }
}
@keyframes brandIn {
  from { opacity: 0; transform: scale(0.96); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes taglineIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bodyIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes btnIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* First-time tutorial overlay */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Click-through: the dim + spotlight are purely visual. The room behind stays
     interactive, so a stuck card can never block the user (Test 002 F1). */
  pointer-events: none;
}
.tutorial-spotlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(18, 14, 10, 0.62);
  border: 2px solid var(--accent);
  pointer-events: none;
  transition: top 280ms ease, left 280ms ease,
              width 280ms ease, height 280ms ease;
}
.tutorial-card {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 32px);
  /* Warm parchment, matches the theme, not the cold-white system-dialog look
     the tester flagged (Test 002 F2). */
  background: linear-gradient(135deg, #f6ead7 0%, #f1dcc4 100%);
  padding: 1.1rem 1.3rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 12px 36px rgba(20, 15, 10, 0.32);
  z-index: 101;
  /* Catch clicks on the card despite the overlay being click-through. */
  pointer-events: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tutorial-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 0.85rem;
}
.tutorial-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.tutorial-controls .primary-btn {
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
}
.tutorial-progress {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  margin-top: 0.6rem;
  letter-spacing: 0.04em;
}

/* Onboarding view */
#view-onboarding {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.onb-container {
  max-width: 560px;
  text-align: center;
  padding: 2rem 1.4rem;
  width: 100%;
  position: relative;
  z-index: 2;
}
.onb-screen {
  margin-bottom: 1.4rem;
  animation: onbFadeIn 520ms cubic-bezier(0.34, 1.05, 0.64, 1);
}
.onb-screen.hidden { display: none; }
.onb-screen.entering {
  animation: onbFadeIn 520ms cubic-bezier(0.34, 1.05, 0.64, 1);
}
.onb-screen.exiting {
  animation: onbFadeOut 280ms ease forwards;
}
@keyframes onbFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes onbFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* Title-card pre-splash (screen 0): bigger, slower, alone with the brand */
.onb-titlecard {
  padding: 2rem 0;
  cursor: pointer;       /* click anywhere to skip the auto-advance */
}
.title-brand {
  font-size: 7rem !important;
  letter-spacing: -0.03em;
  animation: titleBrandIn 1400ms cubic-bezier(0.34, 1.05, 0.64, 1) forwards !important;
  filter: blur(10px);
  opacity: 0;
}
body.ambient-active .title-brand {
  color: rgba(255, 248, 236, 0.98);
  text-shadow:
    0 4px 28px rgba(0, 0, 0, 0.85),
    0 0 56px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(201, 90, 54, 0.20);
}
@keyframes titleBrandIn {
  0%   { opacity: 0; filter: blur(20px); transform: scale(0.92); }
  60%  { opacity: 1; filter: blur(0);    transform: scale(1.04); }
  100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}

/* Hand-painted corner flourishes, ink in with delay, persist across screens */
.onb-flourishes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms ease;
}
body.ambient-active .onb-flourishes { opacity: 1; }
.onb-flourish {
  position: absolute;
  width: 220px;
  height: 140px;
  color: #f4c8a8;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
  opacity: 0;
}
.flourish-tl { top: 28px; left: 28px;
  animation: flourishInTL 1400ms cubic-bezier(0.4, 0, 0.2, 1) 1800ms forwards; }
.flourish-tr { top: 28px; right: 28px;
  animation: flourishInTR 1400ms cubic-bezier(0.4, 0, 0.2, 1) 2100ms forwards; }
.flourish-bl { bottom: 28px; left: 28px;
  animation: flourishInBL 1400ms cubic-bezier(0.4, 0, 0.2, 1) 2400ms forwards; }
.flourish-br { bottom: 28px; right: 28px;
  animation: flourishInBR 1400ms cubic-bezier(0.4, 0, 0.2, 1) 2700ms forwards; }
@keyframes flourishInTL {
  from { opacity: 0; transform: translate(-12px, -12px) scale(0.9); }
  to   { opacity: 0.75; transform: translate(0, 0) scale(1); }
}
@keyframes flourishInTR {
  from { opacity: 0; transform: translate(12px, -12px) scale(0.9, 0.9) scaleX(-1); }
  to   { opacity: 0.75; transform: translate(0, 0) scaleX(-1); }
}
@keyframes flourishInBL {
  from { opacity: 0; transform: translate(-12px, 12px) scale(0.9, 0.9) scaleY(-1); }
  to   { opacity: 0.75; transform: translate(0, 0) scaleY(-1); }
}
@keyframes flourishInBR {
  from { opacity: 0; transform: translate(12px, 12px) scale(-0.9, -0.9); }
  to   { opacity: 0.75; transform: translate(0, 0) scale(-1, -1); }
}

/* On mobile the flourishes shrink and pull in so they don't overlap text */
@media (max-width: 600px) {
  .onb-flourish { width: 130px; height: 85px; }
  .flourish-tl, .flourish-tr { top: 12px; }
  .flourish-bl, .flourish-br { bottom: 12px; }
  .flourish-tl, .flourish-bl { left: 12px; }
  .flourish-tr, .flourish-br { right: 12px; }
  .title-brand { font-size: 4.5rem !important; }
}
.onb-brand {
  font-family: "Iowan Old Style", "Charter", Georgia, serif;
  font-size: 5.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 1.6rem;
  color: var(--text);
  position: relative;
}
/* Brand splits into two lines: "Museum" big, "of Unsaid Gifts" smaller italic */
.onb-brand .brand-line-1 {
  display: block;
  font-size: 1em;
  letter-spacing: -0.025em;
}
.onb-brand .brand-line-2 {
  display: block;
  font-size: 0.42em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  opacity: 0.9;
  margin-top: 0.18em;
}
/* Title card (screen 0), bigger main, slightly smaller suffix proportion */
.title-brand .brand-line-2 {
  font-size: 0.32em;
  margin-top: 0.15em;
}
/* Bridge motif SVG that draws itself under the brand title on screen 1 */
.onb-bridge-motif {
  display: block;
  width: 220px;
  max-width: 80%;
  height: auto;
  margin: 0.4rem auto 1.6rem;
  color: var(--accent);
  opacity: 0;
  animation: bridgeFadeIn 600ms ease 800ms forwards;
}
body.ambient-active .onb-bridge-motif {
  color: #f4c8a8;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6));
}
.onb-bridge-motif path,
.onb-bridge-motif line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: bridgeDraw 2400ms cubic-bezier(0.4, 0, 0.2, 1) 900ms forwards;
}
.onb-bridge-motif .bridge-base   { animation-delay: 900ms; }
.onb-bridge-motif .bridge-arch   { animation-delay: 1100ms; }
.onb-bridge-motif .bridge-strut  { animation-delay: 1700ms; animation-duration: 600ms; }
@keyframes bridgeFadeIn {
  to { opacity: 1; }
}
@keyframes bridgeDraw {
  to { stroke-dashoffset: 0; }
}
.onb-tagline {
  font-family: "Iowan Old Style", "Charter", Georgia, serif;
  font-size: 1.55rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0 auto 2.4rem;
  max-width: 520px;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.onb-body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 auto 0.9rem;
  max-width: 460px;
}
.onb-body.onb-emphasis {
  font-style: italic;
  color: var(--accent);
  margin-top: 1.2rem;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}
.onb-screen .primary-btn {
  margin-top: 0.8rem;
  padding: 0.85rem 2.2rem;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  font-family: "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  border-radius: 4px;
  transition: transform 180ms ease, box-shadow 200ms ease, background 200ms ease;
}
.onb-screen .primary-btn:hover {
  transform: translateY(-1px);
  background: #d76446;
}
.onb-screen .primary-btn:active {
  transform: translateY(0) scale(0.98);
}
.onb-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
}
.onb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 250ms ease, transform 250ms ease;
}
.onb-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* Picker view */
.picker-intro {
  text-align: center;
  margin: 2.2rem auto 2.4rem;
  max-width: 640px;
  position: relative;
  z-index: 1;
}
.picker-intro h1 {
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
  color: var(--text);
}
.picker-intro p {
  color: var(--muted);
  font-size: 1.1rem;
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  line-height: 1.45;
}

/* Picker ambient mode, same backdrop cycling as onboarding, but DIM and
   BLURRED, with a cream wash on top so the picker reads light-on-cream
   (not dark-on-cream). Acts as soft atmosphere, not focal art. */
body.ambient-active.ambient-picker {
  background: var(--bg);     /* keep cream base */
}
body.ambient-active.ambient-picker .ambient-backdrop {
  opacity: 0.55;
}
body.ambient-active.ambient-picker .ambient-bg {
  filter: blur(10px) saturate(0.85);
}
body.ambient-active.ambient-picker .ambient-overlay {
  background: linear-gradient(180deg,
    rgba(247, 243, 236, 0.55) 0%,
    rgba(247, 243, 236, 0.80) 100%);
}
body.ambient-active.ambient-picker .ambient-vignette { opacity: 0.3; }
body.ambient-active.ambient-picker .ambient-clouds { opacity: 0.25; }
body.ambient-active.ambient-picker .ambient-beam { opacity: 0.35; }
body.ambient-active.ambient-picker .ambient-particle { opacity: 0; animation: none; }
/* Picker mode keeps the same dark streaming-service glass as onboarding , 
   handled by the consolidated rule below. This block is intentionally empty
   so the dark glass cascades from the main ambient rule. */
/* Micro-moment entry, the low-commitment door, above the room grid */
.micro-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
  margin-bottom: 1.6rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  /* Solid + elevated, a *featured* tile, not a dashed placeholder. The dashed
     border was reading as "optional / skippable" (Test 002 F3). */
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(246,234,215,0.96), rgba(243,216,204,0.96));
  box-shadow: 0 4px 14px rgba(201, 90, 54, 0.10);
  cursor: pointer;
  font-family: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease;
  position: relative;
  z-index: 1;
}
.micro-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201, 90, 54, 0.16);
}
.micro-entry-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.micro-entry-title {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.3rem;
  color: var(--text);
}
.micro-entry-sub {
  font-size: 0.9rem;
  color: var(--muted);
}
/* Done-for-today: calmer, settled, an invitation fulfilled, not a closed door. */
.micro-entry.done {
  border-style: solid;
  border-color: var(--line);
  background: linear-gradient(135deg, rgba(246,234,215,0.55), rgba(243,216,204,0.55));
}
.micro-entry.done .micro-entry-title { color: var(--mediator); }

/* Pocket Reps entry, a just-in-time companion, distinct from the daily. */
.pocket-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  margin: 0 0 1.6rem;
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  cursor: pointer;
  font-family: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.pocket-entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--mediator); }
.pocket-entry-title {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.1rem;
  color: var(--text);
}
.pocket-entry-sub { font-size: 0.86rem; color: var(--muted); }

/* Pocket Reps, situation chooser */
#view-pocket { max-width: 600px; margin: 0 auto; }
.pocket-wrap { text-align: center; padding: 1.5rem 0 3rem; animation: onbFadeIn 420ms ease; }
.pocket-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mediator);
  margin-bottom: 0.9rem;
}
.pocket-title {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: var(--text);
}
.pocket-sub {
  font-size: 0.98rem;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 1.8rem;
  line-height: 1.55;
}
.pocket-situations {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 460px;
  margin: 0 auto 1.6rem;
}
.pocket-situation {
  text-align: left;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pocket-situation:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pocket-situation:active { transform: translateY(1px); }
.pocket-situation-label {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.08rem;
  color: var(--text);
  line-height: 1.4;
}
.pocket-situation-sub { font-size: 0.84rem; color: var(--muted); }

/* Micro-moment view */
#view-micro { max-width: 600px; margin: 0 auto; }
.micro-wrap {
  text-align: center;
  padding: 1rem 0 3rem;
  animation: onbFadeIn 420ms ease;
  position: relative;
  z-index: 0;
}
/* Subtle scene wash behind the 90-second moment. Far back, blurred soft, low
   opacity so the portrait + text always win. Pure aesthetic, never load-
   bearing. Falls back to the warm page background if the image fails. */
.micro-wrap::before {
  content: "";
  position: absolute;
  inset: -1.5rem -10vw 0 -10vw;
  background-image: url("/bite-default-scene.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 70%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .micro-wrap::before { filter: none; }
}
.micro-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.micro-portrait {
  width: 150px;
  aspect-ratio: 3 / 4;
  margin: 0 auto 1.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  background: var(--bg-elev);
}
.micro-portrait .portrait-svg,
.micro-portrait .portrait-img,
.micro-portrait .portrait-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.micro-setup {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 460px;
  margin: 0 auto 1.2rem;
  line-height: 1.55;
}
.micro-line {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 500px;
  margin: 0 auto 1.8rem;
  padding: 1rem 1.3rem;
  border-left: 3px solid var(--accent-soft);
  background: var(--bg-elev);
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: left;
}
.micro-options {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 520px;
  margin: 0 auto;
}
.micro-option {
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-family: inherit;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}
.micro-option:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.micro-option:active { transform: translateY(1px); }
.micro-option:disabled { cursor: default; opacity: 0.5; }
.micro-option.chosen-hit  { border-color: var(--mediator); border-width: 2px; opacity: 1; }
.micro-option.chosen-miss { border-color: var(--warn); border-width: 2px; opacity: 1; }

/* Micro result */
.micro-result {
  max-width: 520px;
  margin: 1.6rem auto 0;
  text-align: left;
  animation: transferIn 500ms cubic-bezier(0.34, 1.05, 0.64, 1) both;
}
.micro-reaction {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text);
  padding: 0.9rem 1.1rem;
  background: var(--bg-elev);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.micro-verdict {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.micro-lesson {
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f6ead7 0%, #f1dcc4 100%);
  border: 1px solid var(--accent-soft);
  margin-bottom: 1.6rem;
}
.micro-lesson-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.micro-lesson-text {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
/* Room-less bite handoff: the if-then transfer prompt is the production path
   until the bracket's full room is built. */
.micro-transfer {
  margin: 0 auto 1.4rem;
  max-width: 460px;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f6ead7 0%, #f1dcc4 100%);
  border: 1px solid var(--accent-soft);
  text-align: left;
}
.micro-transfer-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.micro-transfer p {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.micro-transfer-soon {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Daily ritual note, gentle "come back tomorrow", no streak pressure. */
.micro-daily-note {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  max-width: 460px;
  margin: -0.4rem auto 1.4rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.micro-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.micro-ctas .primary-btn { width: 100%; max-width: 320px; }

/* Glad Room (mode: "glad"). YOU are the protagonist with good news; only the
   receiver is on the stage. We hide character a's stage and let b's expand
   to fill the room. Joy variant of the arc copy (Tentative -> Shared) already
   applies via the ARC_JOY swap in app.js. */
body.glad-mode .stage {
  grid-template-columns: 1fr;
}
body.glad-mode .char-stage[data-char="a"] {
  display: none;
}
/* Joy arc labels still apply on glad mode (Tentative / Settling / Landed /
   Shared). Same warm progression as the existing joy rooms. */

/* Personal typing: type your real situation, get a tailored bite. Sits
   below the preset Pocket Rep chips. The textarea looks like a notebook
   page, not a form. The button matches the existing primary-btn shape. */
.pocket-custom {
  margin: 1.6rem auto 1.2rem;
  max-width: 640px;
  padding: 1.1rem 1.2rem 0.9rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(246, 234, 215, 0.55), rgba(243, 225, 201, 0.35));
  border: 1px dashed rgba(140, 105, 80, 0.42);
}
.pocket-custom-or {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.pocket-custom-input {
  width: 100%;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.5;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 246, 0.7);
  color: var(--text);
  resize: vertical;
  min-height: 80px;
}
.pocket-custom-input::placeholder { color: rgba(140, 105, 80, 0.6); font-style: italic; }
.pocket-custom-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pocket-custom-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.pocket-custom-status {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
  flex: 1;
  min-width: 200px;
}
.pocket-custom-status.warn { color: var(--accent); }

@media (max-width: 600px) {
  .pocket-custom { padding: 0.95rem 1rem 0.85rem; margin: 1.2rem auto 1rem; }
  .pocket-custom-input { font-size: 0.98rem; }
}

/* Pre-scene primer: small italic line above the options. Surfaces recognition
   of what the player has played in similar rooms before. Never on the live
   button. The chess-feel lever. */
.micro-primer {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin: 0.4rem 0 1rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 246, 0.55);
  border-left: 2px solid var(--accent-soft);
}
@media (max-width: 600px) {
  .micro-primer { font-size: 0.92rem; text-align: left; }
}

/* Repertoire view: the chess-player's opening book. Recognition first,
   production second. No counts shown. Size tiers hint frequency. */
.repertoire-link {
  display: block;
  margin: 1.4rem auto 0.4rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
}
.repertoire-link:hover { color: var(--accent); }

.repertoire-wrap {
  max-width: 800px;
  margin: 2.4rem auto;
  padding: 0 0.8rem 2rem;
}
.repertoire-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.repertoire-title {
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.7rem;
}
.repertoire-sub {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 1.8rem;
  max-width: 620px;
}

.repertoire-empty {
  text-align: center;
  padding: 2.4rem 1rem;
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  color: var(--muted);
}
.repertoire-empty p { font-size: 1.05rem; margin-bottom: 1.2rem; }

.repertoire-section { margin-bottom: 2rem; }
.repertoire-section-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.repertoire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.repertoire-card {
  padding: 0.9rem 1rem 0.85rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(246, 234, 215, 0.85), rgba(243, 225, 201, 0.6));
  border: 1px solid var(--accent-soft);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.repertoire-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 15, 10, 0.10);
}
/* Frequency hint: bigger / warmer for moves seen more often. No numbers. */
.repertoire-card.tier-1 { opacity: 0.84; }
.repertoire-card.tier-2 {
  border-color: rgba(201, 90, 54, 0.42);
  background: linear-gradient(135deg, rgba(246, 234, 215, 0.92), rgba(243, 225, 201, 0.75));
}
.repertoire-card.tier-3 {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(246, 234, 215, 1.0), rgba(243, 216, 204, 0.92));
  box-shadow: 0 3px 12px rgba(201, 90, 54, 0.14);
}
.repertoire-card-name {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.repertoire-card-meaning {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.repertoire-card-anchor {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.repertoire-no-met {
  margin: 1.8rem 0;
  padding: 1rem 1.1rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 246, 0.65);
  border: 1px dashed rgba(140, 105, 80, 0.4);
}
.repertoire-no-met-title {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.repertoire-no-met p {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  font-size: 0.96rem;
}

.repertoire-back {
  display: block;
  margin: 2rem auto 0;
  font-family: inherit;
}

@media (max-width: 600px) {
  .repertoire-wrap { margin: 1.2rem auto; padding: 0 0.4rem 1.5rem; }
  .repertoire-title { font-size: 1.7rem; }
  .repertoire-sub { font-size: 0.98rem; }
  .repertoire-grid { grid-template-columns: 1fr; }
}

/* The Uptake Mirror reflection card: the post-pick surface that shows your
   move, her uptake, her counter, and a user-composed if-then. The card IS the
   teaching unit. Cinematic, warm, mobile-first. See MOVE_VOCABULARY.md. */
.uptake-card {
  position: relative;
  margin: 1.4rem 0 0.6rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f6ead7 0%, #f1dcc4 60%, #ecd0b4 100%);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 8px 28px rgba(20, 15, 10, 0.16);
  overflow: hidden;
  animation: uptakeRise 420ms cubic-bezier(0.22, 1.0, 0.32, 1.0) both;
}
@keyframes uptakeRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .uptake-card { animation: none; }
}
/* Soft warm glow in the top-left, faded vignette feel. */
.uptake-glow {
  position: absolute;
  top: -40px;
  left: -30px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(201, 90, 54, 0.18) 0%, rgba(201, 90, 54, 0) 70%);
  pointer-events: none;
}

/* Speaker labels on dialogue lines so "who said what" is obvious at a glance.
   Tiny, uppercase, muted; sits just above the spoken line. */
.micro-speaker-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
  margin-top: 0.4rem;
}

/* Hit / miss banner at the top of the uptake card. Answers "did I pick
   right?" in one glance. Sage for hit, clay for miss. */
.uptake-result-banner {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  display: inline-block;
}
.uptake-result-banner.hit {
  background: rgba(122, 162, 110, 0.18);
  color: #4a6f3f;
  border: 1px solid rgba(122, 162, 110, 0.42);
}
.uptake-result-banner.miss {
  background: rgba(196, 142, 92, 0.18);
  color: #8a5832;
  border: 1px solid rgba(196, 142, 92, 0.42);
}

/* Mis-uptake banner: small, italic, sits above the pair when she heard the
   move as something else. Never scolding, just visible. */
.uptake-banner {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 0.85rem;
  padding-left: 0.1rem;
  letter-spacing: 0.01em;
}
.uptake-card.misheard .uptake-step-name {
  color: rgba(140, 105, 80, 0.85);   /* slightly muted, "this didn't land as planned" */
}

/* No-met overlay: replaces the named-pair surface when the conversation just
   ends. Same card, softer center. The if-then stays. */
.uptake-no-met {
  margin: 0.4rem 0 1.1rem;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 246, 0.65);
  border: 1px dashed rgba(140, 105, 80, 0.4);
}
.uptake-no-met-title {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.uptake-no-met-line {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.uptake-pair {
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
  margin-bottom: 1rem;
  position: relative;
}
.uptake-step {
  flex: 1;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 246, 0.55);
  border: 1px solid rgba(201, 90, 54, 0.22);
}
.uptake-step-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.18rem;
}
.uptake-step-name {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 600;
}
/* The connector: a thin line with a small dot, signals the move-pair flow. */
.uptake-connector {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.1rem;
  opacity: 0.7;
}
.uptake-connector::before {
  content: "›";
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
}

.uptake-heard {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 0.6rem;
}
.uptake-heard-label {
  font-style: italic;
  color: var(--accent);
  margin-right: 0.3rem;
}
.uptake-detail {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 1.1rem;
}

/* If-then composer: blanks that look like writing in a notebook, not a form. */
.uptake-if-then {
  border-top: 1px dashed rgba(201, 90, 54, 0.28);
  padding-top: 1rem;
}
.uptake-if-then-prompt {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.uptake-blank-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.uptake-blank-key {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.02rem;
  color: var(--text);
  flex-shrink: 0;
  width: 2.6rem;
  text-align: right;
}
.uptake-blank {
  flex: 1;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.02rem;
  padding: 0.3rem 0.1rem 0.34rem;
  border: none;
  border-bottom: 1px solid rgba(140, 105, 80, 0.45);
  background: transparent;
  color: var(--text);
  transition: border-color 180ms ease;
}
.uptake-blank::placeholder { color: rgba(140, 105, 80, 0.55); font-style: italic; }
.uptake-blank:focus { outline: none; border-bottom-color: var(--accent); }

.uptake-stash {
  margin-top: 0.95rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  opacity: 0;
  transition: opacity 320ms ease;
  min-height: 1.2em;
}
.uptake-stash.visible { opacity: 0.85; }

@media (max-width: 600px) {
  .uptake-card { padding: 1.1rem 1.05rem 1rem; margin: 1.1rem 0 0.5rem; }
  .uptake-pair { flex-direction: column; gap: 0.55rem; }
  .uptake-connector { width: auto; height: 14px; transform: rotate(90deg); }
  .uptake-step-name { font-size: 1rem; }
  .uptake-heard, .uptake-detail { font-size: 0.98rem; }
  .uptake-blank-key { width: 2.2rem; }
  .uptake-blank { font-size: 0.98rem; }
}

/* Tuesday Mirror: window picker that appears under the if-then transfer
   at room/bite exit. The picker writes ONCE to the server (one scheduled
   reminder, sent in two days, no in-app return surface). See TUESDAY_MIRROR.md. */
.mirror-picker {
  margin: 1.2rem 0 0.4rem;
  padding: 1rem 1.2rem 0.9rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(246, 234, 215, 0.7), rgba(243, 225, 201, 0.5));
  border: 1px solid var(--accent-soft);
}
.mirror-prompt {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 0.65rem;
}
.mirror-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.mirror-window {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.mirror-window:hover { border-color: var(--accent); color: var(--accent); }
.mirror-window.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.mirror-skip {
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(160, 132, 116, 0.35);
}
.mirror-skip:hover { color: var(--accent); }
.mirror-email-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.mirror-email {
  flex: 1;
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 246, 0.7);
  color: var(--text);
}
.mirror-email:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mirror-email-go {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.mirror-email-go:hover { filter: brightness(1.05); }
.mirror-confirm {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.96rem;
  color: var(--accent);
  margin-top: 0.7rem;
  font-style: italic;
}

/* Emotionally-attuned home: a mood lens above the skill chips. */
.mood-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 0.9rem;
  max-width: 720px;
}
.mood-label {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.95rem;
  color: var(--muted);
  margin-right: 0.3rem;
}
.mood-chip {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.36rem 0.95rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 80ms ease;
}
.mood-chip:hover { border-color: var(--accent); color: var(--accent); }
.mood-chip:active { transform: translateY(1px); }
.mood-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.scenarios-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 2rem 1rem;
}

/* Register badge on scene cards, emotional weight, visible before you commit. */
.register-badge {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  color: #fff;
}
.register-badge.reg-light  { background: rgba(122, 162, 110, 0.92); }   /* sage, easy */
.register-badge.reg-tender { background: rgba(196, 142, 92, 0.92); }    /* amber, in-between */
.register-badge.reg-heavy  { background: rgba(150, 92, 92, 0.92); }     /* muted clay, hard */

/* Intent-led home: skill-area chips above the rooms. On wide screens the
   chip row is visible and the native dropdown is hidden. The mobile media
   query below (600px) swaps that, per Test 002 F4. */
.intent-filter {
  margin: 0 auto 1.6rem;
  max-width: 720px;
}
.intent-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.intent-select-wrap { display: none; }   /* mobile media query reveals it */
.intent-chip {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.42rem 1rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 80ms ease;
}
.intent-chip:hover { border-color: var(--accent); color: var(--accent); }
.intent-chip:active { transform: translateY(1px); }
.intent-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.2rem;
}

/* Poster-style scenario cards: scene painting as backdrop, dark gradient
   overlay for legibility, text floats over it. Hover does subtle Ken Burns
   zoom on the scene + lift on the card. Cards stagger-reveal on render. */
.scenario-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  min-height: 240px;
  background: var(--bg-elev);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  transition: transform 320ms cubic-bezier(0.34, 1.05, 0.64, 1),
              box-shadow 320ms ease;
  opacity: 0;
  transform: translateY(20px);
  animation: cardReveal 700ms cubic-bezier(0.34, 1.05, 0.64, 1) forwards;
}
@keyframes cardReveal {
  to { opacity: 1; transform: translateY(0); }
}
.scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.card-scene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Fallback for rooms without a scene painting yet, a warm wash so the card
     reads as intentional, not broken. An inline background-image overrides it. */
  background-color: #e9d8c2;
  background-image: linear-gradient(135deg, #f0e0cb 0%, #e3c9b3 55%, #d8b89d 100%);
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scenario-card:hover .card-scene {
  transform: scale(1.08);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.20) 40%,
    rgba(0, 0, 0, 0.55) 75%,
    rgba(0, 0, 0, 0.85) 100%);
  transition: background 320ms ease;
}
.scenario-card:hover .card-overlay {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0.60) 75%,
    rgba(0, 0, 0, 0.88) 100%);
}

.card-content {
  position: absolute;
  inset: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.card-tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.card-meta { display: flex; flex-direction: column; gap: 0.25rem; }
.card-content h3 {
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.05rem;
  color: rgba(255, 252, 246, 0.98);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}
.card-characters {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 245, 230, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
  margin-bottom: 0.3rem;
}
.card-blurb {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 245, 230, 0.86);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tier badge updates, now floats over a dark scene */
.tier-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tier-badge.tier-warm    { background: rgba(253, 235, 197, 0.92); color: #6e4612; }
.tier-badge.tier-easy    { background: rgba(216, 235, 208, 0.92); color: #2f5826; }
.tier-badge.tier-medium  { background: rgba(212, 227, 240, 0.92); color: #1f4566; }
.tier-badge.tier-hard    { background: rgba(244, 210, 192, 0.92); color: #7a3a1a; }
.tier-badge.tier-complex { background: rgba(224, 214, 234, 0.92); color: #4a2e68; }

/* Locked Reunion card, greyscale, lock badge, no hover lift */
.scenario-card.locked {
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.85);
}
.scenario-card.locked:hover {
  transform: translateY(0);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.scenario-card.locked:hover .card-scene { transform: scale(1); }
.scenario-card.locked .card-overlay {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.75) 100%);
}
.lock-badge {
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 245, 230, 0.92);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* (Tier badges + locked state defined above in the poster-card block) */

/* Establishing card, covers the game on entry, frames the scene + role,
   dismissed by "Step into the room". Reads over the scene backdrop. */
.establishing-card {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    linear-gradient(180deg, rgba(18,14,10,0.78) 0%, rgba(18,14,10,0.88) 100%);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: establishingIn 500ms ease both;
}
.establishing-card.leaving {
  animation: establishingOut 400ms ease forwards;
}
@keyframes establishingIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes establishingOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* Ambient scene video behind the card content, with a scrim for legibility. */
.establishing-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.establishing-scrim { display: none; }
.establishing-card.has-ambient .establishing-scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16,12,8,0.50) 0%, rgba(16,12,8,0.74) 100%);
}
.establishing-inner {
  position: relative;   /* sit above the video + scrim */
  z-index: 2;
  max-width: 600px;
  text-align: center;
  color: rgba(255, 250, 242, 0.96);
}
.establishing-tier {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 200, 168, 0.9);
  margin-bottom: 0.7rem;
}
.establishing-title {
  font-size: 2.2rem;
  color: white;
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.establishing-setup {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 248, 236, 0.9);
  margin: 0 auto 1.6rem;
  max-width: 520px;
}
.establishing-role-block {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 1.2rem;
  margin: 0 auto 1.8rem;
  max-width: 520px;
}
.establishing-role-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 245, 230, 0.55);
  margin-bottom: 0.55rem;
}
.establishing-role {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: rgba(255, 250, 242, 0.96);
  margin: 0;
}
.establishing-card .primary-btn {
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  font-family: "Iowan Old Style", Georgia, serif;
}
@media (max-width: 600px) {
  .establishing-title { font-size: 1.7rem; }
  .establishing-setup { font-size: 0.98rem; }
  .establishing-role { font-size: 1.02rem; }
}

/* Scene meta, title + small action links */
.scene-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.scene-meta h2 { margin: 0; flex: 1; }
.scene-setup {
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

/* Stage, dominant characters, side by side */
.stage {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f4e6d4 0%, #ecd9bf 100%);
  border: 1px solid var(--line);
  transition: background 600ms ease;
}
/* Warm light that fills the room as the arc advances (behind the portraits). */
.stage-warmth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius);
  background: radial-gradient(125% 95% at 50% 12%, rgba(255, 198, 122, 0.6), transparent 68%);
  opacity: 0;
  transition: opacity 900ms ease;
}
.stage.arc-1 .stage-warmth { opacity: 0.14; }
.stage.arc-2 .stage-warmth { opacity: 0.28; }
.stage.arc-3 .stage-warmth { opacity: 0.42; }
.stage > .char-stage { position: relative; z-index: 1; }   /* portraits above the glow */

/* The relational arc strip, Braced → Cracking → Open → Met. */
.arc-track {
  max-width: 560px;
  margin: 0 auto 1.2rem;
  text-align: center;
  animation: onbFadeIn 360ms ease;
}
.arc-steps { display: flex; align-items: flex-start; justify-content: center; }
.arc-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.34rem;
}
.arc-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
  transition: background 500ms ease;
}
.arc-step:first-child::before { display: none; }
.arc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--line-strong);
  z-index: 1;
  transition: background 400ms ease, border-color 400ms ease, transform 320ms ease, box-shadow 320ms ease;
}
.arc-step-label {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  transition: color 400ms ease;
}
.arc-step.done .arc-dot { background: var(--accent-soft); border-color: var(--accent-soft); }
.arc-step.done::before { background: var(--accent-soft); }
.arc-step.done .arc-step-label { color: var(--accent); }
.arc-step.current .arc-dot {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(201, 90, 54, 0.16);
}
.arc-step.current .arc-step-label { color: var(--accent); font-weight: 600; }
.arc-narrative {
  margin-top: 0.7rem;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  transition: color 300ms ease;
}
.arc-track.advance .arc-step.current .arc-dot { animation: arcPulse 1300ms ease; }
.arc-track.advance .arc-narrative { animation: arcGlow 1300ms ease; }
.arc-track.regress .arc-narrative { color: var(--warn); }
@keyframes arcPulse {
  0%   { box-shadow: 0 0 0 4px rgba(201, 90, 54, 0.16); transform: scale(1.3); }
  45%  { box-shadow: 0 0 0 13px rgba(201, 90, 54, 0.34); transform: scale(1.55); }
  100% { box-shadow: 0 0 0 4px rgba(201, 90, 54, 0.16); transform: scale(1.3); }
}
@keyframes arcGlow {
  0%, 100% { color: var(--text); }
  45%      { color: var(--accent); }
}
/* Readability when a scene image makes the page dark. */
body.has-scene-image .arc-step-label { color: rgba(255, 248, 236, 0.62); }
body.has-scene-image .arc-step.done .arc-step-label,
body.has-scene-image .arc-step.current .arc-step-label { color: #f4c8a8; }
body.has-scene-image .arc-narrative { color: rgba(255, 248, 236, 0.92); }
body.has-scene-image .arc-dot { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
body.has-scene-image .arc-step.done .arc-dot,
body.has-scene-image .arc-step.current .arc-dot { background: #e8a06a; border-color: #e8a06a; }
body.has-scene-image .arc-step.done::before { background: rgba(232,160,106,0.7); }
.stage.scene-holiday {
  background: linear-gradient(135deg, #f4e6d4 0%, #e8d2b2 100%);
}
.stage.scene-hire {
  background: linear-gradient(135deg, #e4ecf0 0%, #cdd9e2 100%);
}

/* When a scene background image is registered for the scenario, replace the
   gradient with the image. Cover-positioned so the painting fills the stage. */
.stage.has-scene-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1.8rem 1.4rem 1.4rem;
  min-height: 360px;
  position: relative;
}
/* Subtle darken overlay so character cards stand out against busy scenes */
.stage.has-scene-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,10,0.05) 0%, rgba(20,15,10,0.18) 100%);
  border-radius: var(--radius);
  pointer-events: none;
}
/* Lift character above the scene overlay */
.stage.has-scene-image .char-stage {
  position: relative;
  z-index: 1;
}

/* SCENE-INTEGRATED MODE: kill the card framing, fade portrait edges into
   the scene with a radial mask, ground with drop-shadow. This makes
   characters read as inhabitants of the room, not pasted-on cards. */
.stage.has-scene-image .portrait-frame {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  /* Soft elliptical mask: solid center, fades to transparent at edges */
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 45%, black 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 100% at 50% 45%, black 55%, transparent 100%);
  /* Drop-shadow grounds the character against the scene */
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.40));
}

/* Speaking-character glow via drop-shadow filter (works with the mask).
   Override the box-shadow-based pulse from the no-scene case. */
.stage.has-scene-image .char-stage.speaking .portrait-frame {
  animation: speakingGlowFilter 3.6s ease-in-out infinite;
}
@keyframes speakingGlowFilter {
  0%, 100% {
    filter:
      drop-shadow(0 8px 14px rgba(0,0,0,0.40))
      drop-shadow(0 0 18px rgba(201, 90, 54, 0.36));
  }
  50% {
    filter:
      drop-shadow(0 10px 18px rgba(0,0,0,0.46))
      drop-shadow(0 0 28px rgba(201, 90, 54, 0.55));
  }
}

/* Name tag legible against the scene */
.stage.has-scene-image .char-name {
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.4);
}
.stage.has-scene-image .bar-pill {
  background: rgba(0,0,0,0.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

/* =============================================================
   FULL-PAGE IMMERSION MODE
   When body has .has-scene-image, the scene fills the viewport.
   Stage panel becomes transparent. Characters shrink. Dialogue +
   options get dark subtitle-style backdrops for readability.
   ============================================================= */

body.has-scene-image {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.has-scene-image::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20,15,10,0.15) 0%,
    rgba(20,15,10,0.30) 50%,
    rgba(20,15,10,0.55) 100%);
  z-index: 0;
  pointer-events: none;
}
body.has-scene-image main,
body.has-scene-image .topbar {
  position: relative;
  z-index: 1;
}

/* Stage: lose its own background, become a transparent layout container */
body.has-scene-image .stage {
  background: transparent !important;
  border: none;
  padding: 1rem 0.5rem 0.6rem;
  min-height: auto;
}
body.has-scene-image .stage::before { display: none; }
body.has-scene-image .stage .portrait-frame {
  /* Override the prior scene rules to allow smaller framing */
  max-width: 200px;
  margin: 0 auto 0.55rem;
}

/* Topbar: dark streaming-service glass when ambient OR scene is active */
body.has-scene-image .topbar,
body.ambient-active .topbar {
  background: rgba(18, 14, 10, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
body.has-scene-image .brand,
body.ambient-active .brand {
  color: rgba(255, 252, 246, 0.98);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
body.has-scene-image .brand .brand-sub,
body.ambient-active .brand .brand-sub {
  color: rgba(255, 245, 230, 0.78);
  opacity: 1;
}
body.has-scene-image .icon-btn,
body.ambient-active .icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 250, 240, 0.95);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
body.has-scene-image .icon-btn:hover,
body.ambient-active .icon-btn:hover {
  background: rgba(201, 90, 54, 0.25);
  border-color: var(--accent);
  color: white;
}

/* Scene title / meta gets contrast */
body.has-scene-image .scene-meta h2 {
  color: white;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
body.has-scene-image .scene-meta .link-btn {
  color: rgba(255,245,230,0.85);
}
body.has-scene-image .scene-meta .link-btn:hover {
  color: var(--accent);
}
body.has-scene-image .scene-setup {
  color: rgba(255,245,230,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Dialogue card: subtitle-style dark glass */
body.has-scene-image .dialogue-card {
  background: rgba(18, 14, 10, 0.78);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
body.has-scene-image .dialogue-text {
  color: rgba(255, 248, 236, 0.96);
}
body.has-scene-image .dialogue-speaker {
  color: rgba(255, 248, 236, 0.70);
}
body.has-scene-image .dialogue-speaker.speaker-a { color: #f0a8c8; }
body.has-scene-image .dialogue-speaker.speaker-b { color: #94d2dc; }

/* Options: light glass cards (kept readable) */
body.has-scene-image .options-prompt {
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
body.has-scene-image .option {
  background: rgba(252, 248, 240, 0.92);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
body.has-scene-image .option:hover {
  border-color: var(--accent);
  background: rgba(255, 251, 244, 1);
}
body.has-scene-image .options-footer .link-btn,
body.has-scene-image .reveal-toggle {
  color: rgba(255,245,230,0.85);
}
body.has-scene-image .reveal-toggle {
  background: rgba(18, 14, 10, 0.55);
  border-color: rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
body.has-scene-image .reveal-toggle:hover {
  color: white;
  border-color: var(--accent);
}

/* Custom-input area: dark glass to match dialogue */
body.has-scene-image #custom-text {
  background: rgba(18, 14, 10, 0.85);
  color: rgba(255,248,236,0.96);
  border-color: rgba(255,255,255,0.20);
}
body.has-scene-image .target-btn {
  background: rgba(18, 14, 10, 0.6);
  color: rgba(255,245,230,0.85);
  border-color: rgba(255,255,255,0.20);
}
body.has-scene-image .target-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Resolution banner adapts to scene */
body.has-scene-image .resolution {
  background: rgba(45, 65, 40, 0.85);
  border-color: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
body.has-scene-image .resolution h3,
body.has-scene-image .resolution p { color: white; }

.char-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transform: scale(1);
  transition: opacity 350ms ease, transform 350ms ease;
}
/* Only dim a non-speaking character when there's actually a speaker.
   Before anyone has spoken (initial load), both characters stay at full opacity. */
.stage:has(.char-stage.speaking) .char-stage:not(.speaking) {
  opacity: 0.62;
  transform: scale(0.96);
}
.char-stage.speaking { opacity: 1; transform: scale(1); }

.portrait-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--bg-elev);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  margin-bottom: 0.55rem;
  transition: box-shadow 300ms ease;
  isolation: isolate;
}
.char-stage.speaking .portrait-frame {
  box-shadow: 0 6px 18px rgba(201, 90, 54, 0.18),
              0 0 0 2px var(--accent) inset;
}
.portrait-svg, .portrait-img, .portrait-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  transition: filter 500ms ease;
}
/* Static portraits get CSS breathing, video provides its own motion */
.portrait-svg, .portrait-img {
  animation:
    portraitFade 360ms ease forwards,
    breathing   4.8s ease-in-out 400ms infinite;
}
.portrait-video {
  animation: portraitFade 360ms ease forwards;
}
/* Speaking character: stronger breath on stills, video stays as-is */
.char-stage.speaking .portrait-svg,
.char-stage.speaking .portrait-img {
  animation:
    portraitFade 360ms ease forwards,
    breathing   3.6s ease-in-out 400ms infinite;
}
/* Non-speaking character: shallower breath on stills, dimmed on everything */
.char-stage:not(.speaking) .portrait-svg,
.char-stage:not(.speaking) .portrait-img {
  animation:
    portraitFade 360ms ease forwards,
    breathing-soft 6s ease-in-out 400ms infinite;
}
.char-stage:not(.speaking) .portrait-svg,
.char-stage:not(.speaking) .portrait-img,
.char-stage:not(.speaking) .portrait-video {
  filter: saturate(0.78) brightness(0.96);
}

@keyframes portraitFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes breathing {
  0%, 100% { transform: scale(1.000) translateY(0); }
  50%      { transform: scale(1.018) translateY(-1px); }
}
@keyframes breathing-soft {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.008); }
}

/* Speaking character: ambient warm pulse on the frame */
.char-stage.speaking .portrait-frame {
  animation: speakingPulse 3.6s ease-in-out infinite;
}
@keyframes speakingPulse {
  0%, 100% {
    box-shadow:
      0 6px 18px rgba(201, 90, 54, 0.16),
      0 0 0 2px var(--accent) inset;
  }
  50% {
    box-shadow:
      0 10px 28px rgba(201, 90, 54, 0.30),
      0 0 0 2px var(--accent) inset;
  }
}

/* Respect users who prefer no motion, comprehensive sweep */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Hide the busy decorative layers entirely */
  .ambient-particle,
  .ambient-beam,
  .ambient-clouds,
  .ambient-vignette {
    display: none;
  }
  /* Scenes still crossfade but no Ken Burns */
  .ambient-bg { animation: none !important; }
  /* Make sure everything that animates IN finishes in its end state */
  .onb-brand, .title-brand { opacity: 1 !important; filter: none !important; transform: none !important; }
  .onb-tagline span { opacity: 1 !important; transform: none !important; }
  .onb-bridge-motif { opacity: 1 !important; }
  .onb-bridge-motif path,
  .onb-bridge-motif line { stroke-dashoffset: 0 !important; }
  .onb-flourish { opacity: 0.75 !important; transform: none !important; }
  .flourish-tr { transform: scaleX(-1) !important; }
  .flourish-bl { transform: scaleY(-1) !important; }
  .flourish-br { transform: scale(-1, -1) !important; }
  .scenario-card { opacity: 1 !important; transform: none !important; }
  .scenario-card:hover .card-scene { transform: none !important; }
  .scenario-card:hover { transform: none !important; }
}

/* Tag under each portrait, name + pill bars inline */
.char-tag {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
}
/* Character names: readable first, color-coded second. Name text uses the
   main text color for legibility against the scene backdrop; a small color
   dot before the name preserves the who-is-who signal without the color-on-
   color washout the previous design had. */
.char-name {
  font-family: "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}
.char-name::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.char-stage[data-char="a"] .char-name::before { background: var(--char-a); }
.char-stage[data-char="b"] .char-name::before { background: var(--char-b); }
/* The existing .stage.has-scene-image .char-name rule (further up) flips
   text to white + shadow when a scene backdrop is in play. That still
   applies on top of the new default-text color. */

.bar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}
.bar-label {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
body.has-scene-image .bar-label {
  color: rgba(255, 245, 230, 0.78);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.bar-pill {
  display: inline-block;
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
}
.bar-pill-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--mediator);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.char-stage[data-char="a"] .bar-pill-fill { background: var(--char-a); }
.char-stage[data-char="b"] .bar-pill-fill { background: var(--char-b); }
.bar-pill-fill.alt { opacity: 0.5; }

/* Char whisper, the legible "why" under a character after the meter moves.
   Tells the player WHAT their move did, not just that a number changed.
   Fades in, holds, fades out. */
.char-whisper {
  margin-top: 0.5rem;
  max-width: 240px;
  font-size: 0.84rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 300ms ease, transform 300ms ease;
  min-height: 1.2em;   /* reserve space so the layout doesn't jump */
  text-align: center;
}
.char-whisper.show { opacity: 1; transform: translateY(0); }
.char-whisper .whisper-delta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  margin-right: 0.35rem;
}
.char-whisper.up   .whisper-delta { color: #4f8a3a; }
.char-whisper.down .whisper-delta { color: #b54a2a; }
.char-whisper.flat .whisper-delta { color: var(--muted); }
.char-whisper .whisper-coach { color: var(--text); }
body.has-scene-image .char-whisper .whisper-coach {
  color: rgba(255, 248, 236, 0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
body.has-scene-image .char-whisper.up   .whisper-delta { color: #a9e08f; }
body.has-scene-image .char-whisper.down .whisper-delta { color: #f0a785; }
body.has-scene-image .char-whisper .whisper-delta { text-shadow: 0 1px 3px rgba(0,0,0,0.7); }

.bar-num {
  font-family: -apple-system, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
body.has-scene-image .bar-num {
  color: rgba(255, 245, 230, 0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Delta floater that briefly appears when a score changes */
.bar-float {
  position: absolute;
  top: -1.2rem;
  left: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}
.bar-float.show {
  animation: barFloat 1100ms cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
.bar-float.positive { color: #4f8a3a; }
.bar-float.negative { color: #b54a2a; }
body.has-scene-image .bar-float.positive {
  color: #b6e4a3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
body.has-scene-image .bar-float.negative {
  color: #f4b294;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
@keyframes barFloat {
  0%   { opacity: 0; transform: translateY(4px); }
  18%  { opacity: 1; transform: translateY(-2px); }
  80%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* Focal dialogue, single card that updates in place */
.dialogue-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  min-height: 84px;
  margin-bottom: 1.2rem;
  position: relative;
}
.dialogue-card.empty { opacity: 0.5; }
.dialogue-speaker {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: var(--muted);
}
.dialogue-speaker.speaker-a { color: var(--char-a); }
.dialogue-speaker.speaker-b { color: var(--char-b); }
.dialogue-speaker.speaker-mediator { color: var(--mediator); }
.dialogue-text {
  /* Spoken lines get the serif + a size bump so they read as the thing that
     matters, distinct from UI chrome (usability test: dialogue "doesn't
     highlight enough"). Short lines, so serif doesn't tire. */
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--text);
}
.dialogue-card.fade-out { opacity: 0; transition: opacity 140ms ease; }
.dialogue-card.fade-in {
  animation: dialogueFadeIn 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dialogueFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal block, appears below dialogue after a mediator turn */
.reveal-block {
  background: var(--bg-elev);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 1rem;
  animation: dialogueFadeIn 320ms ease;
}
.reveal-block h4 {
  margin: 0 0 0.4rem;
  font-family: -apple-system, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 600;
}
.reveal-block ul { margin: 0; padding-left: 1.1rem; }
.reveal-block li { margin-bottom: 0.35rem; }
.reveal-block li strong { color: var(--text); font-weight: 600; }

/* Reveal rows: SHARP (the better move) gets a sage-green tier; misses get
   a softer parchment row. Clear visual hierarchy so the player can see at
   a glance which move was the right call and which one they chose. */
.reveal-block ul.reveal-list { list-style: none; padding-left: 0; margin: 0; }
.reveal-row {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
}
.reveal-sharp {
  background: rgba(122, 162, 110, 0.14);
  border-color: rgba(122, 162, 110, 0.45);
}
.reveal-miss {
  background: rgba(140, 105, 80, 0.06);
  border-color: rgba(140, 105, 80, 0.18);
}
.reveal-picked-miss { border-color: rgba(196, 142, 92, 0.55); border-width: 1.5px; }
.reveal-tag {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #4a6f3f;
  margin-bottom: 0.28rem;
  text-transform: uppercase;
}
.reveal-tag em { font-style: normal; font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; }
.reveal-tag-pick { color: #8a5832; }
.reveal-opt {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.96rem;
  color: var(--text);
  line-height: 1.45;
}
.reveal-row .reveal-q {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.25rem;
}

/* History modal list */
.history-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.4rem 0;
  margin: 0.5rem 0;
}
.history-header {
  padding: 0.45rem 0 0.8rem;
  font-size: 0.84rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.3rem;
}
.history-row {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.history-row:last-child { border-bottom: none; }
.history-row .who {
  font-family: "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: 0.82rem;
  margin-right: 0.4rem;
}
.history-row .who.a { color: var(--char-a); }
.history-row .who.b { color: var(--char-b); }
.history-row .who.mediator { color: var(--mediator); }

/* Director's-cut reveal, character's internal monologue */
.history-internal {
  margin-top: 0.3rem;
  margin-left: 1.1rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--accent-soft);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.modal-card-wide { max-width: 620px; }

/* Transcript */
.transcript {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.bubble {
  max-width: 92%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: 0.96rem;
  line-height: 1.55;
  animation: bubbleIn 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bubble .speaker {
  font-family: "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  letter-spacing: 0.01em;
}
.bubble.char-a {
  background: var(--char-a-soft);
  border: 1px solid #ecc6dc;
  align-self: flex-start;
}
.bubble.char-a .speaker { color: var(--char-a); }
.bubble.char-b {
  background: var(--char-b-soft);
  border: 1px solid #c1dde2;
  align-self: flex-start;
}
.bubble.char-b .speaker { color: var(--char-b); }
.bubble.mediator {
  background: var(--mediator-soft);
  border: 1px solid #d2e0c6;
  align-self: flex-end;
}
.bubble.mediator .speaker { color: var(--mediator); }
.bubble .meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.4rem;
  font-style: italic;
}
.bubble .quality-tag {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.35rem;
  padding: 0.1rem 0.4rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* Reveal section appended after a mediator bubble */
.reveal-block {
  align-self: flex-end;
  max-width: 92%;
  background: var(--bg-elev);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.reveal-block h4 {
  margin: 0 0 0.4rem;
  font-family: -apple-system, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.reveal-block ul { margin: 0; padding-left: 1.1rem; }
.reveal-block li { margin-bottom: 0.35rem; }
.reveal-block li strong { color: var(--text); font-weight: 600; }
/* Reveal now leads with the option text, quality as a small muted tag below. */
.reveal-block li { display: block; }
.reveal-opt {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}
.reveal-q {
  display: inline-block;
  margin-top: 0.12rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.78;
}

/* Options */
.options-area {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.options-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.1rem;
  flex-wrap: wrap;
}
.options-prompt {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: 0.01em;
}
.reveal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong);
  background: var(--bg-elev);
  transition: border-color 150ms ease, color 150ms ease;
}
.reveal-toggle:hover { border-color: var(--accent); color: var(--accent); }
.reveal-toggle input { accent-color: var(--accent); }
.options-list {
  display: grid;
  gap: 0.6rem;
}
.option {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  font-family: inherit;
  transition: border-color 120ms ease, transform 80ms ease,
              box-shadow 120ms ease, background 120ms ease;
}
.option:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.option:active { transform: translateY(1px); }
.option .target-hint {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.options-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3rem;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
}

/* Progressive scaffold, mode links + the one-time nudge. */
.link-btn.subtle { font-size: 0.8rem; color: var(--muted); opacity: 0.85; }
.link-btn.subtle:hover { opacity: 1; }
.link-btn.active { color: var(--accent); font-weight: 600; }

.custom-fallback {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}

.scaffold-nudge {
  border: 1px solid var(--accent-soft);
  background: linear-gradient(135deg, #f6ead7 0%, #f1dcc4 100%);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 0.9rem;
  animation: transferIn 460ms cubic-bezier(0.34, 1.05, 0.64, 1) both;
}
.scaffold-nudge p {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}
.scaffold-nudge-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.scaffold-nudge-actions .primary-btn { padding: 0.5rem 1rem; font-size: 0.9rem; }
.link-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.86rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  font-family: inherit;
}
.link-btn:hover { color: var(--accent); }
.primary-btn {
  background: var(--accent);
  border: none;
  color: white;
  font-size: 0.95rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease;
}
.primary-btn:hover { background: #b04d2c; }

/* Custom input area */
.custom-area {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.custom-targets { display: flex; gap: 0.5rem; }
.target-btn {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
}
.target-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
#custom-text {
  width: 100%;
  min-height: 80px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--bg-elev);
  resize: vertical;
  color: var(--text);
}
#custom-text:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.custom-footer { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Resolution */
.resolution {
  background: var(--mediator-soft);
  border: 1px solid #c0d3b1;
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-top: 1.2rem;
  text-align: center;
}
.resolution h3 {
  color: var(--mediator);
  margin-bottom: 0.4rem;
}
.resolution-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

/* Debrief */
.debrief-text {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  font-family: -apple-system, sans-serif;
  font-size: 0.96rem;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--text);
}
/* Transfer prompt, the closing beat. Warm card, set apart from the debrief,
   carries the lesson into the player's real life. The most important copy. */
.transfer-prompt {
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f6ead7 0%, #f1dcc4 100%);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 4px 18px rgba(201, 90, 54, 0.10);
  animation: transferIn 600ms cubic-bezier(0.34, 1.05, 0.64, 1) both;
}
@keyframes transferIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.transfer-label {
  font-family: -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.transfer-text {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 1rem;
}
.transfer-note {
  width: 100%;
  min-height: 56px;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  resize: vertical;
}
.transfer-note:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
  background: rgba(255,255,255,0.85);
}
.transfer-note::placeholder { color: var(--muted); font-style: italic; }

.debrief-actions { margin-top: 1.4rem; text-align: center; }

/* Loading */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
}
.loading-dot {
  width: 7px; height: 7px;
  background: var(--muted);
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1s infinite ease-in-out;
}
.loading-dot:nth-child(2) { animation-delay: 0.15s; }
.loading-dot:nth-child(3) { animation-delay: 0.3s; }
.loading-message {
  font-size: 0.86rem;
  color: var(--muted);
  margin-left: 0.4rem;
  font-style: italic;
}
body.has-scene-image .loading-message {
  color: rgba(255, 245, 230, 0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* Scene loader, appears inside the card-zoom-clone after it fills the
   viewport. Watercolor sweep bar + scene-specific caption fill the dead
   time while the opening dialogue is being generated. */
.scene-loader {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255, 252, 246, 0.96);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  z-index: 2;
  width: min(80vw, 540px);
  opacity: 0;
  animation: sceneLoaderIn 700ms cubic-bezier(0.4, 0, 0.2, 1) 700ms forwards;
}
.scene-loader-message {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.scene-loader-bar {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  margin: 1.3rem auto 0.9rem;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.scene-loader-bar-sweep {
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(244, 200, 168, 0.95),
    transparent);
  animation: sceneLoaderSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.scene-loader-sub {
  font-size: 0.85rem;
  color: rgba(255, 248, 236, 0.7);
  letter-spacing: 0.02em;
  font-style: italic;
}
@keyframes sceneLoaderIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sceneLoaderSweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-loader-bar-sweep {
    left: 30%; animation: none;
    width: 40%;
  }
  .scene-loader { animation: none; opacity: 1; }
}
@media (max-width: 600px) {
  .scene-loader-message { font-size: 1.2rem; }
  .scene-loader-bar { width: 140px; }
  .scene-loader-sub { font-size: 0.78rem; }
}

/* Toasts, non-blocking error/info messages */
.toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.toast {
  background: rgba(18, 14, 10, 0.92);
  color: rgba(255, 248, 236, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: toastIn 280ms cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  pointer-events: auto;
  max-width: 480px;
}
.toast.toast-error  { border-left: 3px solid #c95a36; }
.toast.toast-info   { border-left: 3px solid #5a7c4a; }
.toast.fade-out { animation: toastOut 220ms ease forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(42, 39, 35, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal-card {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  max-width: 460px;
  width: 90%;
  box-shadow: var(--shadow-md);
}
.modal-card dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5rem 1.4rem;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.modal-card dt { color: var(--muted); }
.modal-card dd { margin: 0; font-variant-numeric: tabular-nums; }

/* =============================================================
   MOBILE, 600px and below
   Phone-first pass: stack characters, shrink portrait, compact
   topbar, larger touch targets on options and buttons.
   ============================================================= */
@media (max-width: 600px) {
  main { padding: 1rem 0.85rem 2.4rem; }

  /* Topbar, cram tighter */
  .topbar { padding: 0.7rem 0.9rem; }
  .brand { font-size: 1.05rem; }
  .topbar-actions { gap: 0.55rem; }
  .icon-btn { padding: 0.28rem 0.55rem; font-size: 0.78rem; }

  /* Picker, single column already, just tighten spacing. Test 002 F6 polish:
     hero h1 shrinks, scenario card sheds drop shadow, dialogue card lighter. */
  .picker-intro { margin: 1.4rem auto 1.6rem; }
  .picker-intro h1 { font-size: 1.95rem; letter-spacing: -0.01em; }
  .picker-intro p { font-size: 0.95rem; line-height: 1.4; }
  .scenario-card { padding: 0.95rem 1.1rem; box-shadow: 0 2px 8px rgba(20, 15, 10, 0.08); }
  .scene-meta h2 { font-size: 1.25rem; }

  /* Intent filter (Test 002 F4): swap the chip row for a native dropdown.
     The tester explicitly asked for this ("kategorit munden me ken edhe nje
     dropdown"). One control instead of seven chips. */
  .intent-filter { margin-bottom: 1.2rem; }
  .intent-chips { display: none; }
  .intent-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    max-width: 100%;
  }
  .intent-select-label {
    font-family: "Iowan Old Style", Georgia, serif;
    font-size: 0.85rem;
    color: var(--muted);
    padding-left: 0.2rem;
  }
  .intent-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.72rem 2.4rem 0.72rem 1rem;
    font-family: inherit;
    font-size: 0.96rem;
    color: var(--text);
    background-color: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23a08474' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
  }
  .intent-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Mood lens: 3 chips fit one row, just tighten + put the label above
     so the row is centered and roomy. (Test 002 F4 mobile crowding.) */
  .mood-filter { gap: 0.4rem; margin: 0 auto 0.8rem; }
  .mood-label { width: 100%; text-align: center; margin: 0 0 0.15rem; font-size: 0.88rem; }
  .mood-chip { font-size: 0.84rem; padding: 0.34rem 0.85rem; }

  /* Onboarding, generous tap target on the primary button */
  .onb-brand { font-size: 3.4rem; margin-bottom: 1.2rem; }
  .onb-tagline { font-size: 1.2rem; }
  .onb-body { font-size: 1rem; }
  .onb-screen .primary-btn { padding: 0.9rem 1.8rem; font-size: 1rem; }

  /* Scene meta, compact */
  .scene-meta h2 { font-size: 1.2rem; }

  /* Stage, STACK characters on phone, give each portrait a real size */
  .stage {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.9rem 0.7rem 0.7rem;
    min-height: auto;
  }
  body.has-scene-image .stage .portrait-frame {
    max-width: 165px;
    margin: 0 auto 0.4rem;
  }
  /* Char-tag (name + bars), bigger text so heard/open are readable */
  .bar-label { font-size: 0.76rem; }
  .bar-num   { font-size: 0.78rem; }
  .char-name { font-size: 0.95rem; }

  /* Dialogue card, taller touch area, larger text */
  .dialogue-card { padding: 0.95rem 1rem; min-height: 96px; }
  .dialogue-text { font-size: 1.1rem; }

  /* Options, full-width tap targets */
  .option {
    padding: 0.95rem 1rem;
    font-size: 0.94rem;
  }
  .options-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .reveal-toggle {
    font-size: 0.8rem;
    padding: 0.35rem 0.55rem;
  }
  .options-footer {
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
  }

  /* Modals fill more screen */
  .modal-card {
    width: 94%;
    padding: 1.2rem 1.3rem;
    max-height: 85vh;
    overflow-y: auto;
  }

  /* On mobile: pin the tutorial card to the bottom so it's ALWAYS visible , 
     the JS's "above/below the spotlight" math can otherwise land off-screen on
     small viewports (Test 002 F1: "I'm stuck on this screen"). The !important
     overrides the inline top/left the JS sets per step. */
  .tutorial-card {
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0.95rem 1.1rem;
  }
}

/* Extra-small (iPhone SE class) */
@media (max-width: 380px) {
  body.has-scene-image .stage .portrait-frame { max-width: 145px; }
  .onb-brand { font-size: 2rem; }
  .onb-tagline { font-size: 1.02rem; }
}