/* FiFi — app.css (ported from mockups/v2, plus gate + media styles) */

:root {
  --ink: #f6efdf;
  --muted: #adb6cb;
  --caption: #dfe5f0;
  --gold: #ffd98a;
  --gold-dim: #d9ae66;
  --card: #24304e;
  --card-2: #1c2643;
  --paper: #f4ecdb;
  --paper-ink: #3a2f24;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --dusk: linear-gradient(180deg,
      #14203e 0%,
      #1e3a63 26%,
      #2f5b83 46%,
      #5c86a0 62%,
      #a97f92 66%,
      #c98d78 73%,
      #eeb07f 79%,
      #f7d197 86%,
      #fbe3ad 94%,
      #fbe3ad 100%);
}

html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
  overflow-x: hidden;
  background: var(--dusk);
  background-attachment: fixed;
}

button { touch-action: manipulation; }
.word-btn, .quiet-link, .btn, .envelope, .ember {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- the gate ---------- */
.gate {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  box-sizing: border-box;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(2rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(2rem, env(safe-area-inset-left));
  background: var(--dusk);
  transition: opacity 1.1s ease;
}
.gate[hidden] { display: none; }
.gate.leaving { opacity: 0; pointer-events: none; }
.gate .eyebrow { margin-bottom: 1.4rem; }
.gate-intro {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  text-wrap: balance;
}
.gate-hint {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--gold);
  margin: 0 0 1.8rem;
  text-shadow: 0 0 24px rgba(255, 217, 138, 0.35);
}
.gate-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}
.gate-form input {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.35em;
  width: min(60vw, 12rem);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 217, 138, 0.45);
  border-radius: 0;
  color: var(--ink);
  padding: 0.4rem 0.2rem;
  transition: color 0.6s ease;
}
.gate-form input:focus-visible { outline: none; border-bottom-color: var(--gold); }
/* a wrong guess just fades away — no shakes, no red, no scolding */
.gate-form input.fading { color: transparent; }

/* ---------- painted sky ---------- */
#sky-canvas, #fly-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#sky-canvas { z-index: 1; }
#fly-canvas { z-index: 4; }

.moon {
  position: fixed;
  top: 9svh; right: 13vw;
  width: 46px; height: 46px;
  border-radius: 50%;
  box-shadow: 14px -7px 0 0 #f4e8c8;
  /* above .scene, which is z-index 4 and covers the whole viewport: while
     the moon was decorative this did not matter, but a tap has to reach it */
  z-index: 6;
  /* it is a button now, but it must not look like one */
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.moon:focus-visible { outline: 1px solid var(--gold); outline-offset: 12px; }
/* the lit crescent is the box-shadow, offset up and to the right, and an
   outer shadow never paints under its own element, which is exactly what
   carves the crescent. so the part she can see is NOT where the button is.
   this gives the button a hit area covering both circles, big enough to
   tap comfortably in the dark. */
.moon::before {
  content: "";
  position: absolute;
  inset: -14px -22px -8px -8px;
}
.moon::after {
  content: "";
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(circle at 78% 38%, rgba(244, 232, 200, 0.22), transparent 62%);
  /* the glow is 138px across; only the moon itself should be tappable */
  pointer-events: none;
}

/* ---------- painted land (silhouette layers) ---------- */
.landscape, .grass {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  pointer-events: none;
  display: block;
}
.landscape { height: 32svh; z-index: 2; }
.grass {
  height: 12svh;
  z-index: 3;
  transform-origin: 50% 100%;
}
.grass.front { animation: sway 6s ease-in-out infinite alternate; }
.grass.back { animation: sway 7.5s ease-in-out infinite alternate-reverse; animation-delay: -3s; }
@keyframes sway {
  from { transform: skewX(-3.5deg); }
  to { transform: skewX(4deg); }
}

.tree {
  position: fixed;
  bottom: 21svh; left: 5vw;
  width: 104px; height: 110px;
  z-index: 2;
  pointer-events: none;
}
.house {
  position: fixed;
  bottom: 19.5svh; left: 73vw;
  width: 34px; height: 26px;
  z-index: 3;
  pointer-events: none;
}
.home-light {
  position: fixed;
  bottom: 20.2svh; left: calc(73vw + 19px);
  width: 5px; height: 6px;
  background: #ffd98a;
  border-radius: 1px;
  box-shadow: 0 0 14px 4px rgba(255, 217, 138, 0.5);
  z-index: 3;
  pointer-events: none;
}

/* ---------- scene / scattered words ---------- */
.scene {
  position: relative;
  z-index: 4;
  min-height: 100svh;
}

.heading {
  position: absolute;
  top: 4.5svh; left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 30rem);
  text-align: center;
}
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 0.8rem;
}
.intro {
  font-size: 1.04rem;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  text-wrap: balance;
}

.word-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--serif);
  color: var(--ink);
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 1.2rem;
  background: radial-gradient(ellipse at center, rgba(12, 20, 42, 0.55), transparent 72%);
}
.word-btn .bob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  animation: bob 7s ease-in-out infinite;
}
.word-btn .w {
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(12, 20, 42, 0.75), 0 2px 18px rgba(12, 20, 42, 0.6);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.word-btn .c {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--caption);
  text-shadow: 0 1px 2px rgba(12, 20, 42, 0.8), 0 1px 10px rgba(12, 20, 42, 0.7);
  transition: color 0.35s ease;
}
.word-btn:focus-visible .w {
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 217, 138, 0.55);
}
.word-btn:focus-visible .c { color: var(--gold-dim); }
.word-btn:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: 6px; border-radius: 3px; }

/* scattered like lanterns let loose */
.word-who   { top: 20svh; left: 7vw;  transform: rotate(-3deg); }
.word-who .w   { font-size: clamp(2.8rem, 11vw, 4.2rem); }
.word-what  { top: 29svh; right: 7vw; transform: rotate(2deg); }
.word-what .w  { font-size: clamp(2rem, 8vw, 3.1rem); }
.word-what .bob { animation-duration: 8.5s; animation-delay: -2s; }
.word-when  { top: 43svh; left: 12vw; transform: rotate(1.5deg); }
.word-when .w  { font-size: clamp(2.2rem, 8.5vw, 3.3rem); }
.word-when .bob { animation-duration: 6.2s; animation-delay: -4s; }
.word-where { top: 54svh; right: 10vw; transform: rotate(-2deg); }
.word-where .w { font-size: clamp(1.9rem, 7.5vw, 2.9rem); }
.word-where .bob { animation-duration: 9s; animation-delay: -1s; }
.word-why   { top: 63svh; left: 34vw; transform: rotate(1deg); }
.word-why .w   { font-size: clamp(2rem, 8vw, 3rem); }
.word-why .bob { animation-duration: 7.6s; animation-delay: -3s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ---------- quiet links resting on the hills ---------- */
.quiet-row {
  position: absolute;
  bottom: max(5.5svh, env(safe-area-inset-bottom) + 1rem);
  /* a full-width row, not left:50% + translateX(-50%). an absolutely
     positioned box anchored only at the midpoint is shrink-to-fit and can
     never exceed half the viewport, so a third link squeezed the row and
     broke "the jar" onto two lines. right padding keeps it clear of the
     breathe firefly in the corner. */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem 2.2rem;
  align-items: center;
  padding: 0 3.6rem;
  box-sizing: border-box;
  z-index: 5;
}
.quiet-link {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: #cdd2b8;
  white-space: nowrap;   /* "the jar" is one label, never two lines */
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(205, 210, 184, 0.35);
  padding: 0.8rem 0.6rem;
  margin: -0.8rem -0.6rem;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  text-shadow: 0 1px 8px rgba(8, 14, 12, 0.7);
}
.quiet-link:focus-visible { color: var(--gold); text-decoration-color: var(--gold-dim); outline: none; }

/* ---------- the moon: Ember's overlay ----------
   deliberately unlike every other modal: a whole painted night of its
   own. a full moon rises, thin clouds drift across its face, little
   lights float up from the sleeping hills, and her sister's words sit
   in the moonlight. no card, no border, no row of buttons. */
.moon-overlay {
  background: linear-gradient(180deg, #060a18 0%, #0d1730 44%, #1b2c50 78%, #23395c 100%);
}
.moon-scene-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* the moon itself, full and painted, with rings of haze */
.mo-moon {
  position: absolute;
  top: 11svh;
  left: 50%;
  width: min(58vw, 300px);
  height: min(58vw, 300px);
  margin-left: calc(min(58vw, 300px) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #fdf6df 0%, #f6ead0 52%, #eddfc0 100%);
  box-shadow:
    0 0 40px 6px rgba(246, 236, 212, 0.38),
    0 0 130px 40px rgba(246, 236, 212, 0.16),
    0 0 260px 90px rgba(246, 236, 212, 0.07);
}
/* craters, barely there, like the storybook moons */
.mo-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 66% 28%, rgba(205, 188, 155, 0.28) 0 6%, transparent 7%),
    radial-gradient(circle at 30% 58%, rgba(205, 188, 155, 0.22) 0 9%, transparent 10%),
    radial-gradient(circle at 58% 70%, rgba(205, 188, 155, 0.18) 0 5%, transparent 6%),
    radial-gradient(circle at 44% 22%, rgba(205, 188, 155, 0.16) 0 4%, transparent 5%);
}
/* thin night clouds that cross the moon's face */
.mo-cloud {
  position: absolute;
  height: 30px;
  border-radius: 999px;
  background: rgba(214, 222, 240, 0.16);
  filter: blur(10px);
}
.mo-c1 { top: calc(11svh + 60px); width: 46vw; animation: mo-drift 64s linear infinite; }
.mo-c2 { top: calc(11svh + 150px); width: 34vw; height: 22px; animation: mo-drift 88s linear infinite; animation-delay: -30s; opacity: 0.8; }
.mo-c3 { top: 52svh; width: 52vw; height: 26px; animation: mo-drift 110s linear infinite; animation-delay: -70s; opacity: 0.55; }
@keyframes mo-drift {
  from { transform: translateX(-60vw); }
  to   { transform: translateX(120vw); }
}
/* little lights rising from the hills, the way fireflies wander up */
.mo-light {
  position: absolute;
  bottom: 10svh;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 12px 3px rgba(255, 233, 168, 0.55);
  opacity: 0;
  animation: mo-float 11s ease-in infinite;
}
.mo-l1 { left: 12%; animation-delay: 0s; }
.mo-l2 { left: 26%; animation-delay: 3.4s; animation-duration: 13s; }
.mo-l3 { left: 41%; animation-delay: 7s; }
.mo-l4 { left: 58%; animation-delay: 1.6s; animation-duration: 14s; }
.mo-l5 { left: 71%; animation-delay: 5.2s; }
.mo-l6 { left: 84%; animation-delay: 8.8s; animation-duration: 12s; }
.mo-l7 { left: 49%; animation-delay: 10.4s; animation-duration: 15s; }
@keyframes mo-float {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  12%  { opacity: 0.9; }
  55%  { opacity: 0.55; transform: translateY(-34svh) translateX(2vw); }
  100% { opacity: 0; transform: translateY(-58svh) translateX(-1.5vw); }
}
/* the hills, asleep */
.mo-hills {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 22svh;
}
.moon-card {
  position: relative;
  max-width: 30rem;
  width: 100%;
  margin-top: 26svh; /* the words sit beneath the moon, in its light */
  padding: 2rem 2.4rem;
  text-align: center;
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
}
.moon-kicker {
  margin: 0 0 1.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(246, 236, 212, 0.6);
}
.moon-quote {
  margin: 0 0 2.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.5;
  color: #fbf3dd;
  text-shadow: 0 0 34px rgba(246, 236, 212, 0.4);
  text-wrap: balance;
}
.moon-close {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  color: rgba(246, 236, 212, 0.5);
  transition: color 0.3s ease;
}
.moon-close:focus-visible { outline: 1px solid rgba(246, 236, 212, 0.6); outline-offset: 2px; }
@media (hover: hover) { .moon-close:hover { color: rgba(246, 236, 212, 0.85); } }

/* it should arrive the way moonrise does, not the way a dialog does */
@media (prefers-reduced-motion: no-preference) {
  .moon-overlay.open .mo-moon { animation: mo-rise 2.6s cubic-bezier(0.16, 0.8, 0.32, 1) both; }
  .moon-overlay.open .moon-kicker { animation: moon-rise 1.2s ease-out 0.9s both; }
  .moon-overlay.open .moon-quote { animation: moon-rise 1.5s ease-out 1.1s both; }
  .moon-overlay.open .moon-close { animation: moon-rise 1.1s ease-out 1.9s both; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-cloud, .mo-light { animation: none; }
  .mo-light { opacity: 0.5; }
}
@keyframes mo-rise {
  from { opacity: 0; transform: translateY(9svh) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes moon-rise {
  from { opacity: 0; transform: translateY(0.7rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- breathe firefly ---------- */
.ember {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right) + 0.75rem);
  bottom: max(2.4rem, env(safe-area-inset-bottom) + 1.2rem);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(255, 230, 150, 0.95), rgba(217, 174, 102, 0.25) 60%, transparent 75%);
  box-shadow: 0 0 26px rgba(255, 217, 138, 0.35);
  animation: ember-pulse 5s ease-in-out infinite;
  z-index: 40;
}
.ember-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cdd2b8;
  text-shadow: 0 1px 8px rgba(8, 14, 12, 0.7);
  pointer-events: none;
}
.ember:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
@keyframes ember-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.14); opacity: 1; }
}

/* hover states only where hover exists — avoids sticky states on touch */
@media (hover: hover) {
  .word-btn:hover .w { color: var(--gold); text-shadow: 0 0 30px rgba(255, 217, 138, 0.55); }
  .word-btn:hover .c { color: var(--gold-dim); }
  .quiet-link:hover { color: var(--gold); text-decoration-color: var(--gold-dim); }
  .btn-gold:hover { background: rgba(255, 217, 138, 0.24); }
  .btn-ghost:hover { color: var(--ink); }
  .paper-card .btn-ghost:hover { color: var(--paper-ink); }
  .paper-card .btn-gold:hover { background: rgba(122, 94, 52, 0.17); }
  .envelope:hover { background: rgba(255, 217, 138, 0.1); border-color: rgba(255, 217, 138, 0.4); }
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(12, 16, 32, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding:
    max(1.4rem, env(safe-area-inset-top))
    max(1.4rem, env(safe-area-inset-right))
    max(1.4rem, env(safe-area-inset-bottom))
    max(1.4rem, env(safe-area-inset-left));
  z-index: 50;
  box-sizing: border-box;
}
.overlay.open { display: flex; }

/* freeze the world behind an open overlay */
.overlay-open .grass,
.overlay-open .word-btn .bob,
.overlay-open .ember { animation-play-state: paused; }

.card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid rgba(255, 217, 138, 0.2);
  border-radius: 8px;
  max-width: 34rem;
  width: 100%;
  max-height: 86svh;
  overflow-y: auto;
  padding: 2.4rem 2.2rem 2rem;
  box-sizing: border-box;
  box-shadow: 0 30px 80px rgba(4, 8, 20, 0.6);
}
.card:focus, .breathe-scene:focus { outline: none; }
.card .kicker {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 1.3rem;
}
.card .body {
  font-size: 1.16rem;
  line-height: 1.75;
  margin: 0 0 1.4rem;
  white-space: pre-line;
}
.card .source {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1.8rem;
}
.card-actions {
  display: flex;
  gap: 0.7rem 1rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
/* keeps card-actions a two-child row when a card needs three controls:
   "back" sits alone on the left, the rest group together on the right */
.actions-right { display: flex; gap: 1rem; align-items: center; }
/* back + another + close is three tap targets. at phone widths they need
   tighter padding to stay on one line, but never a smaller tap target:
   .btn keeps its 44px min-height. */
@media (max-width: 430px) {
  .card-actions { gap: 0.6rem; }
  .actions-right { gap: 0.6rem; }
  .card-actions .btn { padding: 0.6rem 0.85rem; font-size: 0.9rem; }
}

.btn {
  appearance: none;
  font-family: var(--serif);
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 5px;
  min-height: 44px;
  padding: 0.6rem 1.3rem;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-gold {
  background: rgba(255, 217, 138, 0.14);
  border: 1px solid rgba(255, 217, 138, 0.45);
  color: var(--gold);
}
.btn-ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
}
.btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* ---------- entry & letter media ---------- */
.entry-media:empty, .letter-media:empty { display: none; }
.entry-media, .letter-media { margin: 0 0 1.4rem; }
.entry-media img, .letter-media img {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(4, 8, 20, 0.5);
}
.entry-media video {
  display: block;
  width: 100%;
  border-radius: 4px;
  background: #0c1020;
}
.entry-media audio, .letter-media audio {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
}
.letter-media img { box-shadow: 0 4px 18px rgba(58, 47, 36, 0.25); }

/* quiet context line under a letter's title, e.g. who a poem is really by */
.letter-note {
  font-style: italic;
  font-size: 0.92rem;
  margin: -0.9rem 0 1.3rem;
}
.paper-card .letter-note { color: #7d6c55; }
.letter-note[hidden] { display: none; }

/* ---------- letters shelf ---------- */
.shelf { display: flex; flex-direction: column; gap: 0.7rem; margin: 0 0 1.6rem; }
.shelf-empty {
  font-style: italic;
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0;
}
/* quiet divider between Dad's letters and the ones from her family */
.shelf-head {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0.2rem 0 0.9rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 217, 138, 0.14);
}
.shelf-head[hidden] { display: none; }
.envelope {
  appearance: none; cursor: pointer; text-align: left;
  font-family: var(--serif);
  background: rgba(244, 236, 219, 0.05);
  border: 1px solid rgba(244, 236, 219, 0.16);
  border-radius: 5px;
  color: var(--ink);
  font-size: 1.02rem;
  padding: 0.85rem 1.1rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.envelope:focus-visible { background: rgba(255, 217, 138, 0.1); border-color: rgba(255, 217, 138, 0.4); outline: none; }
.envelope .seal { color: var(--gold-dim); font-style: italic; font-size: 0.85rem; display: block; }

/* an opened letter reads on paper */
.paper-card {
  background: var(--paper);
  color: var(--paper-ink);
  border: none;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(4, 8, 20, 0.65);
}
.paper-card .kicker { color: #8a6f4b; }
.paper-card .source { color: #7d6c55; }
.paper-card .btn-ghost { color: #7d6c55; }
/* the gold button is pale gold for the dark card, which all but vanishes on
   paper. on a letter it takes the same deeper brown the paper card uses for
   its own headings. */
.paper-card .btn-gold {
  background: rgba(122, 94, 52, 0.09);
  border-color: rgba(122, 94, 52, 0.42);
  color: #7a5e34;
}

/* ---------- jar ----------
   every win is a firefly in the glass. the jar fills as she adds them,
   and shaking it lets one out. never a number anywhere: the only measure
   of the jar is how brightly it glows. */
.jar-scene {
  position: relative; /* anchors the falling win under the inverted mouth */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem 0 0.4rem;
}
.jar-wrap { width: min(200px, 52vw); }
/* shaking the jar tips it all the way over, gives it a jiggle while it is
   upside down so one firefly can find the mouth, then rights it. scaled
   down slightly mid-flip so the swing stays inside the card. */
.jar-wrap.shaking { animation: jar-tip 1.8s ease-in-out; transform-origin: 50% 50%; }
@keyframes jar-tip {
  0%   { transform: rotate(0); }
  30%  { transform: rotate(-172deg) scale(0.92); }
  40%  { transform: rotate(-166deg) scale(0.92); }
  50%  { transform: rotate(-174deg) scale(0.92); }
  60%  { transform: rotate(-168deg) scale(0.92); }
  74%  { transform: rotate(-171deg) scale(0.92); }
  100% { transform: rotate(0); }
}
/* the win that falls out while the jar hangs upside down */
.jar-drop {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 14px 4px rgba(255, 233, 168, 0.55);
  opacity: 0;
  pointer-events: none;
}
.jar-scene.dropping .jar-drop { animation: win-fall 0.85s ease-in 0.62s both; }
@keyframes win-fall {
  0%   { opacity: 0; transform: translateY(0); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(96px); }
}
@media (prefers-reduced-motion: reduce) {
  .jar-wrap.shaking { animation: none; }
  .jar-scene.dropping .jar-drop { animation: none; }
}
.jar-svg { display: block; width: 100%; height: auto; }
.jar-lid { fill: #b98d4f; }
.jar-lid-rim { fill: #93703e; }
.jar-glass {
  fill: rgba(214, 226, 244, 0.08);
  stroke: rgba(214, 226, 244, 0.42);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.jar-shine {
  fill: none;
  stroke: rgba(244, 248, 255, 0.28);
  stroke-width: 4;
  stroke-linecap: round;
}
.jar-orb { fill: #ffe9a8; }
.jar-orb-glow { fill: rgba(255, 233, 168, 0.16); }
@media (prefers-reduced-motion: no-preference) {
  #jar-orbs .jar-orb { animation: orb-breathe 4.6s ease-in-out infinite; }
}
@keyframes orb-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.5; }
}
.jar-empty {
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.9rem 0 0;
  text-align: center;
}
.jar-empty[hidden] { display: none; }
/* the win the jar shook out, resting on paper like the slip it is */
.jar-reveal {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 2px;
  padding: 1rem 1.2rem 0.9rem;
  margin: 1.2rem 0 0.4rem;
  transform: rotate(-0.6deg);
  box-shadow: 0 6px 18px rgba(4, 8, 20, 0.45);
}
.jar-reveal[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .jar-reveal { animation: moon-rise 0.7s ease-out both; }
}
.jar-win {
  font-size: 1.08rem;
  line-height: 1.6;
  margin: 0 0 0.4rem;
}
.jar-win-date {
  font-style: italic;
  font-size: 0.85rem;
  color: #7d6c55;
  margin: 0;
}
#jar-overlay .card-actions { margin-top: 1.3rem; }
.jar-form { display: flex; gap: 0.7rem; }
.jar-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1rem;
  background: rgba(244, 236, 219, 0.07);
  border: 1px solid rgba(244, 236, 219, 0.22);
  border-radius: 5px;
  color: var(--ink);
  padding: 0.55rem 0.9rem;
}
.jar-form input::placeholder { color: var(--muted); font-style: italic; }
.jar-form input:focus-visible { outline: 1px solid var(--gold-dim); }

/* ---------- breathe overlay ---------- */
.breathe-scene {
  display: flex; flex-direction: column; align-items: center; gap: 2.6rem;
  text-align: center;
  padding: 1rem;
}
.breathe-circle {
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 230, 150, 0.55), rgba(217, 174, 102, 0.14) 65%, transparent 78%);
  box-shadow: 0 0 60px rgba(255, 217, 138, 0.3);
  animation: breathe 11s ease-in-out infinite;
}
/* 11s cycle = 4s in, 1s hold, 6s out — matches the words exactly */
@keyframes breathe {
  0%, 100% { transform: scale(0.72); }
  36.4% { transform: scale(1.18); }
  45.5% { transform: scale(1.18); }
}
.breathe-line { font-size: 1.15rem; font-style: italic; color: var(--ink); margin: 0; }
.breathe-sub { font-size: 0.92rem; color: var(--muted); margin: 0.4rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ember, .word-btn .bob, .grass { animation: none; }
  .word-btn .w, .word-btn .c { transition: none; }
  .gate { transition: none; }
  /* the pacer survives Reduce Motion as a scale-free glow on the same cadence */
  .breathe-circle { animation: breathe-dim 11s ease-in-out infinite; }
}
@keyframes breathe-dim {
  0%, 100% { opacity: 0.35; }
  36.4%, 45.5% { opacity: 1; }
}