/* ═══════════════════════════════════════════════════════════════════════════
   style.css — Meher's Enchanted ‘Four’est
   Watercolor art direction · Mobile-first (375px primary) · No dark mode

   Layer stack (back → front):
     1. forest-bg.jpg                  (body background)
     2. .gold-atmosphere               (CSS-generated dot field)
     3. .overall-sparkle               (drifting watercolor texture)
     4. .top-sparkle                   (top-anchored crown, breathes)
     5. .scenery > scenery elements    (bushes, fairy-house, ground row, flowers, leaf branches, critters, butterflies)
     6. .falling-leaves                (animated falling leaves)
     7. .floating-hearts               (drifting hearts around fairy)
     8. .fairy-sparkles                (SVG sparkles around fairy)
     9. .fairy-stage                   (fairy + glow)
    10. .state UI                       (header, transcription, buttons, etc.)
    11. .deckled-mask                   (deckled white frame on top of all)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */

:root {
  /* watercolor palette — physical scene colors, do NOT invert in dark mode */
  --forest-deep:    #1B3B2C;
  --forest-mid:     #2D5A40;
  --forest-light:   #3B6D45;
  --gold:           #C9A84C;
  --gold-light:     #F0D878;
  --gold-pale:      #FDF1C4;
  --gold-deep:      #A0822D;
  --cream:          #F2E8D0;
  --cream-muted:    #C8BAA0;

  /* fonts — change here to swap globally */
  --font-display: 'Enchanted', Georgia, 'Times New Roman', serif;
  --font-body:    'Garden',    Georgia, 'Times New Roman', serif;
}


/* ─── @FONT-FACE ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Enchanted';
  src: url('assets/fonts/display.woff2?v=17') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garden';
  src: url('assets/fonts/body.woff2?v=17') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ─── RESET & BASE ───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  background-color: var(--forest-deep);
  background-image: radial-gradient(
    ellipse at center 35%,
    var(--forest-mid) 0%,
    var(--forest-deep) 45%,
    #0E2216 100%
  );
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}


/* ─── STATE VISIBILITY ───────────────────────────────────────────────────── */

.state { display: none; }

[data-state="splash"]        .state-splash,
[data-state="conversation"]  .state-conversation,
[data-state="complete"]      .state-confirmation,
[data-state="return"]        .state-return {
  display: flex;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GOLD ATMOSPHERE — LAYER A (CSS-GENERATED DOT FIELD)
   ═══════════════════════════════════════════════════════════════════════════ */

.gold-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.gold-dot {
  position: absolute;
  width: var(--size, 2px);
  height: var(--size, 2px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--gold-pale) 0%,
    var(--gold-light) 35%,
    rgba(201, 168, 76, 0.4) 60%,
    transparent 80%
  );
  opacity: var(--base-opacity, 0.4);
  pointer-events: none;
  will-change: transform, opacity;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GOLD ATMOSPHERE — LAYER B1 (OVERALL SPARKLE TEXTURE)
   ═══════════════════════════════════════════════════════════════════════════ */

.overall-sparkle {
  position: fixed;
  inset: -15%;                      /* oversized so drift never reveals edges */
  background-image: url('assets/sparkle-textures/overall-sparkle.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GOLD ATMOSPHERE — LAYER B2 (TOP SPARKLE FRAME)
   ═══════════════════════════════════════════════════════════════════════════ */

.top-sparkle {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 45vh;
  background-image: url('assets/sparkle-textures/top-sparkle.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0.62;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCENERY LAYER (bushes, fairy house, ground row, flowers, leaf branches)
   ═══════════════════════════════════════════════════════════════════════════ */

.scenery {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.scenery img {
  position: absolute;
  pointer-events: none;
}


/* ─── BUSHES (sides) ─────────────────────────────────────────────────────── */

.scenery-bush {
  /* Bushes hidden — composition felt crowded.
     Assets kept in assets/bushes/ for possible future use. */
  display: none;
}


/* ─── FAIRY HOUSE (corner accent) ────────────────────────────────────────── */

.scenery-fairy-house {
  /* Temporarily hidden — was overlapping the CTA / privacy copy in the
     bottom-right. Asset kept in assets/fairy-house.png for later. */
  display: none;
}


/* ─── GROUND ELEMENTS (grass, mushrooms, flower stem) ────────────────────── */

.ground-element {
  bottom: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* Ground flower stem — scaled down to ~1/4 size per feedback */
.ground-flower-stem {
  left: 1vw;
  bottom: 0;
  height: 12vh;
  width: auto;
  z-index: 3;
}

/* Grass tufts hidden — simplifying to just the two mushrooms in the bottom-left */
.ground-grass-1,
.ground-grass-2 {
  display: none;
}

/* Mushrooms hidden — simplifying further. Assets kept in bg-elements/. */
.ground-mushroom-big,
.ground-mushroom-small {
  display: none;
}


/* ─── FLOWERS (mid-layer scattered) ──────────────────────────────────────── */

.scenery-flower {
  width: 12vw;
  max-width: 80px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
}

.scenery-flower--1 { left: 2vw;   bottom: 36vh; width: 9vw;  max-width: 60px; transform: rotate(-8deg); }
.scenery-flower--2 { right: 1vw;  bottom: 40vh; width: 11vw; max-width: 72px; transform: rotate(6deg); }
.scenery-flower--3 { right: 3vw;  top: 20vh;    width: 8vw;  max-width: 52px; transform: rotate(-12deg); opacity: 0.85; }
.scenery-flower--4 { left: 1vw;   top: 24vh;    width: 10vw; max-width: 68px; transform: rotate(15deg); opacity: 0.9; }
.scenery-flower--5 { right: 5vw;  bottom: 22vh; width: 7vw;  max-width: 48px; transform: rotate(-4deg); opacity: 0.75; }


/* ─── LEAF BRANCHES (static-with-sway) ───────────────────────────────────── */

.leaf-branch {
  /* Leaf branches removed from layout — felt awkward as static overlays.
     Asset files kept in assets/leaves/ for possible future use. */
  display: none;
}


/* ─── CRITTERS (caterpillar, snail) ──────────────────────────────────────── */

.critter {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

/* Caterpillar — faces LEFT, starts on the right edge, drifts leftward.
   Extremely slow traversal so it never completes during a conversation. */
.critter-caterpillar {
  bottom: 4vh;
  right: 2vw;             /* starting anchor */
  width: 12vw;
  max-width: 80px;
}

/* Snail — faces RIGHT, starts on the left edge, drifts rightward.
   Extremely slow traversal so it never completes during a conversation. */
.critter-snail {
  bottom: 3vh;
  left: 28vw;             /* starting position, away from the mushrooms cluster */
  width: 14vw;
  max-width: 90px;
}


/* ─── BUTTERFLIES (direction-aware) ──────────────────────────────────────── */

.butterfly {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
  will-change: transform;
}

/* Front-facing — hovers/drifts randomly (JS sets target positions on a loop).
   Faces the viewer, so no directional bias. Positioned top-left to start. */
.butterfly-front {
  top: 12vh;
  left: 4vw;
  width: 11vw;
  max-width: 60px;
}

/* Left-facing (original) — drifts from the right edge leftward across the top. */
.butterfly-side-left {
  top: 8vh;
  right: 6vw;
  width: 12vw;
  max-width: 70px;
}

/* Right-facing (mirror of left) — drifts from left edge rightward, lower in the scene.
   Mirrored with scaleX(-1). */
.butterfly-side-right {
  top: 28vh;
  left: 4vw;
  width: 12vw;
  max-width: 70px;
  transform: scaleX(-1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   FALLING LEAVES (animated, generated by JS into #falling-leaves)
   ═══════════════════════════════════════════════════════════════════════════ */

.falling-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.falling-leaf {
  position: absolute;
  top: -80px;
  width: var(--leaf-size, 36px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}


/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING HEARTS (around fairy area, generated by JS)
   ═══════════════════════════════════════════════════════════════════════════ */

.floating-hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

.floating-heart {
  position: absolute;
  width: var(--heart-size, 32px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 10px rgba(255, 200, 200, 0.4));
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAIRY SPARKLES (SVG, generated by JS)
   ═══════════════════════════════════════════════════════════════════════════ */

.fairy-sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.fairy-sparkle {
  position: absolute;
  width: var(--sparkle-size, 14px);
  height: var(--sparkle-size, 14px);
  color: var(--gold-light);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 3px rgba(253, 241, 196, 0.95))
    drop-shadow(0 0 8px rgba(240, 216, 120, 0.7))
    drop-shadow(0 0 16px rgba(201, 168, 76, 0.4));
}

[data-fairy="speaking"] .fairy-sparkle {
  color: var(--gold-pale);
  filter:
    drop-shadow(0 0 4px rgba(255, 235, 160, 1))
    drop-shadow(0 0 12px rgba(240, 216, 120, 0.85))
    drop-shadow(0 0 22px rgba(201, 168, 76, 0.55));
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAIRY STAGE (fairy + glow aura)
   ═══════════════════════════════════════════════════════════════════════════ */

.fairy-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 384px;
  height: 384px;
  margin: 0 auto;
  z-index: 9;
}

/* Conversation state uses a slightly smaller static fairy so a fixed-height
   transcription box + text input fit comfortably on iPhone SE-sized viewports
   without the page ever needing to scroll. The size is one static value for
   the whole conversation — she does NOT resize based on transcript length. */
.state-conversation .fairy-stage {
  width: min(340px, 42vh);
  height: min(340px, 42vh);
}
.state-conversation .fairy {
  width: min(260px, 32vh);
}
.state-conversation .fairy-glow {
  width: min(370px, 46vh);
  height: min(370px, 46vh);
}

.fairy {
  width: 288px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(27, 59, 44, 0.5));
}

.fairy-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 384px;
  height: 384px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(253, 241, 196, 0.35) 0%,
    rgba(240, 216, 120, 0.18) 30%,
    rgba(201, 168, 76, 0.08) 55%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.6s ease;
}

[data-fairy="idle"]      .fairy-glow { opacity: 0.6; }
[data-fairy="speaking"]  .fairy-glow { opacity: 1;   }
[data-fairy="listening"] .fairy-glow { opacity: 0.4; }
[data-fairy="bestowing"] .fairy-glow { opacity: 1;   }


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — celebration title + subtitle
   Solid gold color + text-shadow glow (NOT background-clip — that breaks
   when child spans get transformed during the per-character reveal)
   ═══════════════════════════════════════════════════════════════════════════ */

.header {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 20px;
  max-width: 620px;
  position: relative;
  z-index: 11;
}

.header--small {
  margin-bottom: 18px;
}

.header-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 11vw, 88px);
  line-height: 1.08;
  letter-spacing: 0.5px;
  color: var(--gold-light);
  margin-bottom: 14px;
  padding: 0 4px;
  /* Balance multi-line breaks on modern browsers; falls back silently elsewhere */
  text-wrap: balance;
  /* Simple two-layer shadow: one soft golden glow + one dark drop for legibility.
     Multi-layer glows were creating concentric halo artifacts. */
  text-shadow:
    0 0 14px rgba(240, 216, 120, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.65);
}

/* Word wrappers prevent mid-word line breaks while per-character animation
   still staggers across the whole title via the global --i index. */
.header-title .word {
  display: inline-block;
  white-space: nowrap;
}

.header--small .header-title {
  font-size: clamp(32px, 7.5vw, 48px);
}

.header-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(13px, 3vw, 16px);
  color: var(--cream-muted);
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ─── Per-character reveal animation ───────────────────────────────────── */

.header-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px) scale(0.7);
  filter: blur(3px);
  position: relative;
  /* IMPORTANT: char inherits color from .header-title, not background-clip,
     so animation never breaks the rendering. */
}

body.revealing .header-title .char {
  animation: reveal-char 0.85s cubic-bezier(0.22, 0.85, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 55ms);
}

@keyframes reveal-char {
  0%   { opacity: 0;   transform: translateY(12px) scale(0.7); filter: blur(3px); }
  50%  { opacity: 0.9; filter: blur(1px); }
  100% { opacity: 1;   transform: translateY(0) scale(1);     filter: blur(0); }
}

/* Sparkle burst behind each character — pseudo element */
.header-title .char::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-pale) 0%, var(--gold-light) 40%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  filter: blur(1px);
}

body.revealing .header-title .char::before {
  animation: char-sparkle-burst 1.1s ease-out;
  animation-delay: calc(var(--i) * 55ms);
}

@keyframes char-sparkle-burst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; box-shadow: 0 0 0 0 rgba(240, 216, 120, 0); }
  30%  { transform: translate(-50%, -50%) scale(4); opacity: 0.9; box-shadow: 0 0 12px 3px rgba(240, 216, 120, 0.5); }
  60%  { transform: translate(-50%, -50%) scale(7); opacity: 0.35; box-shadow: 0 0 18px 5px rgba(201, 168, 76, 0.2); }
  100% { transform: translate(-50%, -50%) scale(10); opacity: 0; box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATE: SPLASH (with phased reveal)

   Phases — driven by classes on <body>:
     1. body.phase-hints    → only #loading-hints visible
     2. body.phase-fairy    → hints fade out, fairy fades in + scales up
     3. body.phase-header   → header reveals character-by-character
     4. body.phase-complete → CTA + privacy footer fade in
   ═══════════════════════════════════════════════════════════════════════════ */

.state-splash {
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 16px 20px 24px 20px;
  padding-top: calc(40px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 10;
}

.splash-inner {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

/* Natural spacing between sections — NOT pushed to extremes */
.state-splash .header {
  margin-top: 0;
  margin-bottom: 28px;
}

.state-splash .fairy-stage {
  margin: 0 auto;
  flex-shrink: 0;
}

.splash-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 32px;
}

/* ── PHASE 1 — Loading hints ──
   If JS is running, we hide them by default and only show during phase-hints.
   If JS fails (no .js-ready class), they're hidden entirely since they're a
   loading intro, not persistent content. */

.loading-hints {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 340px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

body.phase-hints .loading-hints {
  opacity: 1;
}

/* If JS never runs, completely remove the hints div so it doesn't block clicks */
body:not(.js-ready) .loading-hints {
  display: none;
}

.loading-hints ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.loading-hints li {
  color: var(--cream);
  font-family: var(--font-body);
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.7;
  padding: 8px 0;
  position: relative;
  padding-left: 24px;
  text-shadow:
    0 0 12px rgba(201, 168, 76, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(8px);
  animation: hint-fade-in 0.8s ease-out forwards;
}

.loading-hints li:nth-child(1) { animation-delay: 0.1s; }
.loading-hints li:nth-child(2) { animation-delay: 0.8s; }
.loading-hints li:nth-child(3) { animation-delay: 1.5s; }

@keyframes hint-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

.loading-hints li::before {
  content: '\2727';
  position: absolute;
  left: 4px;
  top: 10px;
  color: var(--gold-light);
  font-size: 13px;
  text-shadow: 0 0 10px rgba(240, 216, 120, 0.8);
}

/* ── PHASE 2 — Fairy fade-in ──
   Hide only if JS is running. Without JS the fairy shows immediately. */

body.js-ready .state-splash .fairy-stage {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.85, 0.3, 1);
}

body.js-ready.phase-fairy .state-splash .fairy-stage,
body.js-ready.phase-header .state-splash .fairy-stage,
body.js-ready.phase-complete .state-splash .fairy-stage {
  opacity: 1;
  transform: scale(1);
}

/* ── PHASE 3 — Header reveal ── */

.state-splash .header { margin-top: 36px; }

body.js-ready .state-splash .header {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.js-ready.phase-header .state-splash .header,
body.js-ready.phase-complete .state-splash .header {
  opacity: 1;
}

/* ── PHASE 4 — CTA + privacy footer (revealed as one group at the bottom) ── */

body.js-ready .state-splash .splash-bottom {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}

body.js-ready.phase-complete .state-splash .splash-bottom {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATE: CONVERSATION (transcription style)
   ═══════════════════════════════════════════════════════════════════════════ */

.state-conversation {
  /* Locked to exactly one viewport so the page never scrolls. Any overflow
     from children (e.g. long transcription) is handled inside the transcription
     box, not by the page. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 32px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 10;
}

.conversation-inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;          /* critical — allows transcription to bound itself */
  justify-content: center;
  gap: 20px;
}

.status-indicator {
  display: flex;
  gap: 8px;
  align-items: center;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.35);
  transition: background 0.3s ease, transform 0.3s ease;
}

[data-fairy="speaking"]  .status-dot { background: var(--gold-light); }
[data-fairy="listening"] .status-dot { background: rgba(201, 168, 76, 0.55); }

.transcription {
  width: 100%;
  max-width: 480px;
  /* FIXED height (not min/max) so the fairy + input never shift when the
     transcription text changes length. The box is always exactly this tall
     regardless of how much content is inside. */
  height: clamp(120px, 22vh, 180px);
  flex: 0 0 auto;
  padding: 16px 24px;
  text-align: center;
  display: flex;
  /* `safe center` → vertically centers short content, falls back to start
     alignment when content overflows so scroll begins cleanly at the top
     of long utterances instead of mid-way through. */
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide the scrollbar — rare edge case to need it, and it would clash with
     the watercolor aesthetic. Scroll still works via touch/wheel. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.transcription::-webkit-scrollbar { display: none; }

/* System narration (placeholder, errors, status). No quotes, italic, dimmer
   — visually reads as stage direction rather than spoken dialogue. */
.transcription-text[data-role="system"] {
  font-style: italic;
  color: var(--cream-muted);
  opacity: 0.85;
}

.transcription-text {
  font-family: var(--font-body);
  font-size: clamp(17px, 4vw, 21px);
  line-height: 1.55;
  color: var(--cream);
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(27, 59, 44, 0.6);
}

.text-input-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  padding: 12px 0 0 0;
}

.text-input {
  flex: 1;
  background: rgba(29, 59, 44, 0.7);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 26px;
  padding: 14px 20px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.text-input::placeholder {
  color: var(--cream-muted);
  opacity: 0.7;
}

.text-input:focus {
  border-color: rgba(201, 168, 76, 0.75);
  background: rgba(29, 59, 44, 0.85);
}

.text-submit-btn {
  background: var(--gold);
  color: var(--forest-deep);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35);
}

.text-submit-btn:active {
  transform: scale(0.94);
}

.text-submit-btn:hover {
  background: var(--gold-light);
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATE: CONFIRMATION + RETURN
   ═══════════════════════════════════════════════════════════════════════════ */

.state-confirmation,
.state-return {
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 10;
}

.confirmation-inner {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enchanted-scroll {
  background: rgba(29, 59, 44, 0.85);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 18px;
  padding: 32px 24px 28px 24px;
  width: 100%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 38px rgba(0, 0, 0, 0.35);
  margin-bottom: 16px;
}

.scroll-written {
  font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.3;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 0 14px rgba(201, 168, 76, 0.5);
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.25);
}

.guest-titles {
  padding: 12px 0;
}

.guest-title-block {
  text-align: center;
  padding: 14px 8px;
}

.guest-title-block + .guest-title-block {
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  margin-top: 8px;
}

.guest-title-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 28px);
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.guest-title-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 16px);
  color: var(--gold-light);
  line-height: 1.45;
  letter-spacing: 0.3px;
}

.guest-count-extra {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(13px, 3vw, 15px);
  color: var(--cream-muted);
  margin-top: 14px;
  letter-spacing: 0.2px;
  text-align: center;
}

.party-details {
  text-align: center;
  padding: 16px 0;
  margin: 12px 0 8px 0;
  border-top: 1px solid rgba(201, 168, 76, 0.25);
  border-bottom: 1px solid rgba(201, 168, 76, 0.25);
}

.party-date {
  font-family: var(--font-display);
  font-size: clamp(18px, 4.5vw, 22px);
  color: var(--cream);
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.party-time {
  font-size: 14px;
  color: var(--cream-muted);
  margin-bottom: 2px;
}

.party-location {
  font-size: 13px;
  color: var(--cream-muted);
}

.screenshot-prompt {
  text-align: center;
  font-size: 12px;
  color: var(--cream-muted);
  font-style: italic;
  margin-top: 14px;
  padding-top: 8px;
}


/* ─── CALENDAR ACTIONS (Add to Calendar buttons) ─────────────────────────── */

.calendar-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 18px 0 6px 0;
  flex-wrap: wrap;
}

.cal-btn {
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.45);
  color: var(--gold-light);
  padding: 10px 18px;
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  white-space: nowrap;
}

.cal-btn:hover {
  background: rgba(201, 168, 76, 0.22);
  border-color: rgba(201, 168, 76, 0.7);
}

.cal-btn:active {
  transform: scale(0.96);
}

.cal-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.host-contact {
  font-family: var(--font-body);
  font-size: clamp(12px, 2.8vw, 14px);
  color: var(--cream-muted);
  text-align: center;
  margin-top: 16px;
  letter-spacing: 0.2px;
}

.host-contact a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 186, 160, 0.3);
}

.return-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0 4px 0;
}

.return-actions .cta-button {
  width: 100%;
  max-width: 280px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS (CTA, link)
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-button {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: var(--forest-deep);
  border: none;
  padding: 12px 28px;
  border-radius: 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 6px 22px rgba(201, 168, 76, 0.42),
    0 0 0 1px rgba(253, 241, 196, 0.35) inset,
    0 -2px 6px rgba(160, 130, 45, 0.4) inset;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 11;
}

.cta-button:hover {
  filter: brightness(1.08);
  box-shadow:
    0 8px 28px rgba(201, 168, 76, 0.55),
    0 0 0 1px rgba(253, 241, 196, 0.45) inset,
    0 -2px 6px rgba(160, 130, 45, 0.4) inset;
}

.cta-button:active {
  transform: scale(0.97);
}

.cta-button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.link-button {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(201, 168, 76, 0.45);
  padding: 10px 22px;
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.link-button:hover {
  background: rgba(201, 168, 76, 0.1);
}

.link-button:active {
  transform: scale(0.96);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRIVACY FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.privacy-footer {
  color: var(--cream-muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
  margin-top: 16px;
  font-style: italic;
  max-width: 360px;
  padding: 0 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}


/* ═══════════════════════════════════════════════════════════════════════════
   AMBIENT AUDIO — hidden from layout, controlled by JS
   ═══════════════════════════════════════════════════════════════════════════ */

#bg-music,
#bg-birds {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BRIDGE TRANSITION — splash → conversation
   Triggered by body.bridging class (added in CTA click handler).
   Covers the 1.2s while the ElevenLabs SDK warms up audio hardware.
   ═══════════════════════════════════════════════════════════════════════════ */

/* "The garden awakens…" text — floats above the fairy briefly */
.garden-awakens {
  position: fixed;
  top: 64%;
  left: 50%;
  transform: translate(-50%, 10px);
  font-family: var(--font-display);
  font-size: clamp(20px, 4.5vw, 32px);
  letter-spacing: 0.4px;
  color: var(--gold-light);
  text-shadow:
    0 0 16px rgba(240, 216, 120, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 11;
  white-space: nowrap;
  margin: 0;
}

/* During bridge: splash CTA + footer fade out, fairy pulses, sparkles burst */
body.bridging .state-splash .splash-bottom {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease-out !important;
}

body.bridging .garden-awakens {
  animation: garden-awakens-fade 1.2s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  body.bridging .fairy-stage {
    animation: bridge-pulse 1.2s ease-out;
  }

  /* Gold sparkle burst emanating from fairy center */
  body.bridging .fairy-stage::after {
    content: '';
    position: absolute;
    inset: -60%;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(253, 241, 196, 0.55) 0%,
      rgba(240, 216, 120, 0.25) 25%,
      rgba(201, 168, 76, 0.08) 50%,
      transparent 70%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: bridge-burst 1.2s ease-out;
  }

  @keyframes bridge-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); }
    70%  { transform: scale(1.02); }
    100% { transform: scale(1); }
  }

  @keyframes bridge-burst {
    0%   { opacity: 0;    transform: scale(0.4); }
    25%  { opacity: 0.85; transform: scale(1);   }
    65%  { opacity: 0.35; transform: scale(1.6); }
    100% { opacity: 0;    transform: scale(2.2); }
  }

  @keyframes garden-awakens-fade {
    0%   { opacity: 0; transform: translate(-50%, 14px); }
    25%  { opacity: 1; transform: translate(-50%, 0);    }
    70%  { opacity: 1; transform: translate(-50%, -2px); }
    100% { opacity: 0; transform: translate(-50%, -6px); }
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DECKLED MASK (top of stack — frames the viewport)
   ═══════════════════════════════════════════════════════════════════════════ */

.deckled-mask {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — wrapped in prefers-reduced-motion: no-preference
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* ── FAIRY FLOAT ── */
  .fairy-stage {
    animation: fairy-float 4s ease-in-out infinite;
  }
  @keyframes fairy-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  /* ── FAIRY GLOW PULSE (speaking) ── */
  [data-fairy="speaking"] .fairy-glow {
    animation: glow-pulse 2.2s ease-in-out infinite;
  }
  @keyframes glow-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
  }

  /* ── GOLD DOT DRIFT + PULSE ── */
  .gold-dot {
    animation:
      gold-dot-drift var(--drift-duration, 14s) ease-in-out infinite var(--delay, 0s),
      gold-dot-pulse var(--pulse-duration, 4s)  ease-in-out infinite var(--delay, 0s);
  }
  @keyframes gold-dot-drift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(var(--dx, 8px), var(--dy, -12px)); }
  }
  @keyframes gold-dot-pulse {
    0%, 100% { opacity: calc(var(--base-opacity) * 0.4); }
    50%      { opacity: var(--base-opacity); }
  }

  /* ── OVERALL SPARKLE — slow figure-8 drift ── */
  .overall-sparkle {
    animation: overall-sparkle-drift 90s linear infinite;
  }
  @keyframes overall-sparkle-drift {
    0%   { transform: translate(0, 0)       rotate(0deg); }
    25%  { transform: translate(1.5%, -2%)  rotate(0.8deg); }
    50%  { transform: translate(0, -3%)     rotate(0deg); }
    75%  { transform: translate(-1.5%, -2%) rotate(-0.8deg); }
    100% { transform: translate(0, 0)       rotate(0deg); }
  }

  /* ── TOP SPARKLE — gentle breathe ── */
  .top-sparkle {
    animation: top-sparkle-breathe 8s ease-in-out infinite;
  }
  @keyframes top-sparkle-breathe {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50%      { opacity: 0.72; transform: translateY(-4px); }
  }

  /* ── LEAF BRANCH SWAY ── */
  .leaf-branch--left {
    animation: leaf-branch-sway-left 5.5s ease-in-out infinite;
  }
  .leaf-branch--right {
    animation: leaf-branch-sway-right 6s ease-in-out infinite 0.4s;
  }
  @keyframes leaf-branch-sway-left {
    0%, 100% { transform: rotate(-12deg); }
    50%      { transform: rotate(-9deg); }
  }
  @keyframes leaf-branch-sway-right {
    0%, 100% { transform: rotate(8deg) scaleX(-1); }
    50%      { transform: rotate(5deg) scaleX(-1); }
  }

  /* ── FLOWER SWAY ── */
  .scenery-flower {
    animation: flower-sway 4.5s ease-in-out infinite;
    transform-origin: bottom center;
  }
  .scenery-flower--1 { animation-delay: 0s;   }
  .scenery-flower--2 { animation-delay: 0.6s; }
  .scenery-flower--3 { animation-delay: 1.2s; }
  .scenery-flower--4 { animation-delay: 0.3s; }
  .scenery-flower--5 { animation-delay: 0.9s; }

  @keyframes flower-sway {
    0%, 100% { transform: rotate(var(--base-rot, 0deg)) translateX(0); }
    50%      { transform: rotate(calc(var(--base-rot, 0deg) + 3deg)) translateX(2px); }
  }

  .scenery-flower--1 { --base-rot: -8deg; }
  .scenery-flower--2 { --base-rot: 6deg;  }
  .scenery-flower--3 { --base-rot: -12deg; }
  .scenery-flower--4 { --base-rot: 15deg; }
  .scenery-flower--5 { --base-rot: -4deg; }

  /* ── GROUND FLOWER STEM (subtle wobble at top) ── */
  .ground-flower-stem {
    animation: stem-wobble 5s ease-in-out infinite;
    transform-origin: bottom center;
  }
  @keyframes stem-wobble {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1.5deg); }
  }

  /* ── BUTTERFLY FRONT — random wandering drift
       Uses a long looped keyframe with multiple non-linear waypoints to
       simulate unpredictable meandering within a bounded area. Faces viewer
       so motion has no directional bias. ── */
  .butterfly-front {
    animation:
      butterfly-front-wander 22s ease-in-out infinite,
      butterfly-front-flap   0.55s ease-in-out infinite;
  }
  @keyframes butterfly-front-wander {
    0%    { transform: translate(0, 0); }
    8%    { transform: translate(18vw, 6vh); }
    18%   { transform: translate(8vw, 22vh); }
    30%   { transform: translate(-4vw, 14vh); }
    42%   { transform: translate(-2vw, 30vh); }
    54%   { transform: translate(12vw, 38vh); }
    66%   { transform: translate(24vw, 24vh); }
    78%   { transform: translate(30vw, 8vh); }
    88%   { transform: translate(14vw, 2vh); }
    100%  { transform: translate(0, 0); }
  }
  @keyframes butterfly-front-flap {
    0%, 100% { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
    50%      { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)) brightness(1.08); }
  }

  /* ── BUTTERFLY LEFT-FACING — drifts leftward across the top ── */
  .butterfly-side-left {
    animation: butterfly-fly-left 18s ease-in-out infinite;
  }
  @keyframes butterfly-fly-left {
    0%   { transform: translate(0,    0)     scale(1);    opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translate(-22vw, -10px) scale(1.02); }
    50%  { transform: translate(-44vw, 6px)   scale(1);    }
    75%  { transform: translate(-66vw, -8px)  scale(0.98); }
    92%  { opacity: 1; }
    100% { transform: translate(-86vw, 10px)  scale(0.95); opacity: 0; }
  }

  /* ── BUTTERFLY RIGHT-FACING — mirror image, drifts rightward
       scaleX(-1) from base transform, so we bake that into keyframes ── */
  .butterfly-side-right {
    animation: butterfly-fly-right 20s ease-in-out infinite;
    animation-delay: 4s;
  }
  @keyframes butterfly-fly-right {
    0%   { transform: translate(0,    0)     scaleX(-1) scaleY(1);    opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translate(22vw, -8px)  scaleX(-1) scaleY(1.02); }
    50%  { transform: translate(44vw, 8px)   scaleX(-1) scaleY(1);    }
    75%  { transform: translate(66vw, -10px) scaleX(-1) scaleY(0.98); }
    92%  { opacity: 1; }
    100% { transform: translate(86vw, 6px)   scaleX(-1) scaleY(0.95); opacity: 0; }
  }

  /* ── SNAIL — faces RIGHT, creeps rightward over ~3 minutes.
       Starting left: 28vw, drifts to ~left: 86vw. Runs once (not infinite)
       so it doesn't snap back to start visibly. ── */
  .critter-snail {
    animation: snail-creep-right 180s linear 1 forwards;
  }
  @keyframes snail-creep-right {
    0%   { transform: translateX(0); }
    100% { transform: translateX(58vw); }
  }

  /* ── CATERPILLAR — faces LEFT, creeps leftward over ~3 minutes.
       Starting right: 2vw, drifts to ~right: 80vw. Runs once. ── */
  .critter-caterpillar {
    animation: caterpillar-creep-left 200s linear 1 forwards;
  }
  @keyframes caterpillar-creep-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-78vw); }
  }

  /* ── FALLING LEAVES ── */
  .falling-leaf {
    animation: leaf-fall var(--fall-duration, 12s) linear infinite var(--fall-delay, 0s);
  }
  @keyframes leaf-fall {
    0% {
      transform: translateY(-80px) translateX(0) rotate(0deg);
      opacity: 0;
    }
    8%  { opacity: 0.85; }
    92% { opacity: 0.65; }
    100% {
      transform: translateY(110vh) translateX(var(--drift, 60px)) rotate(var(--spin, 240deg));
      opacity: 0;
    }
  }

  /* ── FLOATING HEARTS — drifting up around fairy ── */
  .floating-heart {
    animation: heart-float var(--heart-duration, 7s) ease-in-out infinite var(--heart-delay, 0s);
  }
  @keyframes heart-float {
    0%   { opacity: 0;   transform: translate(0, 0)         rotate(var(--heart-rot, 0deg)) scale(0.6); }
    15%  { opacity: 0.85; }
    50%  { transform: translate(var(--heart-dx, 15px), -90px) rotate(calc(var(--heart-rot, 0deg) + 12deg)) scale(1); }
    85%  { opacity: 0.6; }
    100% { opacity: 0; transform: translate(var(--heart-dx2, -10px), -180px) rotate(calc(var(--heart-rot, 0deg) - 8deg)) scale(0.85); }
  }

  /* ── FAIRY SPARKLES — drift outward + twinkle ──
     Per-sparkle tunables (set inline in app.js):
       --sx / --sy:          drift vector at peak
       --s-peak:             max scale at 50% keyframe (bigger sparkles flare more)
       --twinkle-duration:   total animation length
       --twinkle-delay:      stagger offset */
  .fairy-sparkle {
    animation: fairy-sparkle-twinkle var(--twinkle-duration, 4s) ease-in-out infinite var(--twinkle-delay, 0s);
  }
  @keyframes fairy-sparkle-twinkle {
    0%, 100% { opacity: 0;   transform: translate(0, 0)            scale(0.5) rotate(0deg); }
    25%      { opacity: 0.9; transform: translate(calc(var(--sx, 30px) * 0.5), calc(var(--sy, -30px) * 0.5)) scale(1) rotate(45deg); }
    50%      { opacity: 1;   transform: translate(var(--sx, 30px), var(--sy, -30px)) scale(var(--s-peak, 1.15)) rotate(90deg); }
    75%      { opacity: 0.7; transform: translate(calc(var(--sx, 30px) * 1.3), calc(var(--sy, -30px) * 1.3)) scale(0.9) rotate(120deg); }
  }

  /* ── STATE FADE-IN ── */
  .state {
    animation: state-fade-in 0.6s ease-out;
  }
  @keyframes state-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Larger phones (414+) ── */
@media (min-width: 414px) {
  .fairy { width: 312px; }
  .fairy-glow { width: 432px; height: 432px; }
}

/* ── Tablets and desktop (768+) ── */
@media (min-width: 768px) {
  .fairy-stage { width: 456px; height: 456px; }
  .fairy { width: 348px; }
  .fairy-glow { width: 480px; height: 480px; }

  .scenery-flower { max-width: 85px; }
  .ground-flower-stem { height: 14vh; }
}

/* ── Wide desktop (1024+) ── */
@media (min-width: 1024px) {
  .fairy-stage { width: 528px; height: 528px; }
  .fairy { width: 396px; }
  .fairy-glow { width: 552px; height: 552px; }

  .splash-inner, .conversation-inner, .confirmation-inner {
    max-width: 640px;
  }
}

/* ── Landscape phone — compact ── */
@media (max-height: 500px) and (orientation: landscape) {
  .fairy-stage { width: 200px; height: 200px; }
  .fairy { width: 130px; }
  .fairy-glow { width: 220px; height: 220px; }
  .header-title { font-size: clamp(24px, 5vw, 32px); }
  .splash-hints { margin: 12px 0 16px 0; }
  .top-sparkle { height: 60vh; }
}

/* ── High-contrast / forced colors ── */
@media (forced-colors: active) {
  .cta-button { border: 2px solid ButtonText; }
  .enchanted-scroll { border: 1px solid CanvasText; }
}