/* BothSay — pre-reveal lives in a quiet warm-paper register; saturation
   arrives only at reveal. Colour is state, not decoration.

   Theming: every colour flows through the tokens below. A theme is a
   [data-theme=...] block overriding them (theme.js applies the saved choice
   before first paint; "auto" resolves to light/dark from the system).
   To add a theme — seasonal ones included — add a block here and one entry
   to THEMES in theme.js. */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f3efe7;
  --card: #fbf8f1;
  --ink: #241f19;
  --muted: #877e6f;
  --line: #ddd5c5;
  --seal: #c8bda9;
  --focus: #4a443b;
  --error: #a03024;
  --bw: 1.5px; /* base border width; high contrast thickens it */
  /* reveal-moment particle effect, read by app.js:
     confetti | hearts | snow | fireworks | petals | leaves | sparkles | none */
  --reveal-effect: confetti;
  /* participant hues — only visible post-reveal */
  --h1: #e04f39;
  --h2: #148f7f;
  --h3: #d3921f;
  --h4: #7457ce;
  --h5: #d64e92;
  --h6: #5e9c33;
  --h7: #3b76d4;
  --h8: #a9532b;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1b1813;
  --card: #262117;
  --ink: #ece5d8;
  --muted: #a3987f;
  --line: #3d362a;
  --seal: #5f5641;
  --focus: #d8d0bf;
  --error: #e77c6c;
  /* hues brightened to hold up on the dark ground */
  --h1: #f0664f;
  --h2: #2cb4a1;
  --h3: #e8ab35;
  --h4: #977ee8;
  --h5: #ea6ba8;
  --h6: #7fc04f;
  --h7: #5d95e8;
  --h8: #c96f45;
}

:root[data-theme="contrast"] {
  color-scheme: light;
  --reveal-effect: none;
  --paper: #ffffff;
  --card: #ffffff;
  --ink: #000000;
  --muted: #3d3d3d;
  --line: #000000;
  --seal: #000000;
  --focus: #0000d6;
  --error: #b00000;
  --bw: 2px;
  /* hues darkened so hue-coloured text passes 4.5:1 on white */
  --h1: #b3311d;
  --h2: #00695c;
  --h3: #8a5a00;
  --h4: #4c2fae;
  --h5: #a51e63;
  --h6: #33691e;
  --h7: #0d47a1;
  --h8: #7c3a17;
}

/* ---- seasons ---- */

:root[data-theme="spring"] {
  color-scheme: light;
  --reveal-effect: petals;
  --paper: #eff5e9;
  --card: #f9fcf4;
  --ink: #253018;
  --muted: #75855f;
  --line: #d8e4cb;
  --seal: #a8c391;
  --focus: #43602b;
  --error: #a03024;
}

:root[data-theme="summer"] {
  color-scheme: light;
  --reveal-effect: sparkles;
  --paper: #fdf5df;
  --card: #fffbef;
  --ink: #2c2310;
  --muted: #8f8155;
  --line: #eee0b4;
  --seal: #d9bb66;
  --focus: #6d5716;
  --error: #a03024;
}

:root[data-theme="autumn"] {
  color-scheme: light;
  --reveal-effect: leaves;
  --paper: #f5ecdf;
  --card: #fbf5ea;
  --ink: #2e2214;
  --muted: #97785a;
  --line: #e7d5b9;
  --seal: #c99659;
  --focus: #6f4a1e;
  --error: #a03024;
}

:root[data-theme="winter"] {
  color-scheme: light;
  --reveal-effect: snow;
  --paper: #edf2f7;
  --card: #f8fafd;
  --ink: #1b2531;
  --muted: #64778a;
  --line: #d3deea;
  --seal: #a3b9cd;
  --focus: #2f4f70;
  --error: #a03024;
}

/* ---- holidays ---- */

:root[data-theme="valentines"] {
  color-scheme: light;
  --reveal-effect: hearts;
  --paper: #f9ecef;
  --card: #fdf6f7;
  --ink: #3a1b24;
  --muted: #9c7181;
  --line: #ecd2d9;
  --seal: #d8a4b5;
  --focus: #8c2f4d;
  --error: #a03024;
  --h1: #d6386b;
}

:root[data-theme="easter"] {
  color-scheme: light;
  --reveal-effect: eggs;
  --paper: #f5f2e9;
  --card: #fbf9f2;
  --ink: #2f2a33;
  --muted: #837a8c;
  --line: #e2dcd0;
  --seal: #c3b3d6;
  --focus: #5a4a73;
  --error: #a03024;
}

:root[data-theme="christmas"] {
  color-scheme: dark;
  --reveal-effect: snow;
  --paper: #142019;
  --card: #1d2c22;
  --ink: #efe9db;
  --muted: #9bb09e;
  --line: #2e4234;
  --seal: #5b7a63;
  --focus: #e8d9b0;
  --error: #ef8a7a;
  --h1: #e85c4a;
  --h2: #3fae8c;
  --h3: #e8b54a;
  --h4: #a58ae0;
  --h5: #e87aa0;
  --h6: #8cc05a;
  --h7: #6f9fdf;
  --h8: #cf7a4a;
}

:root[data-theme="newyears"] {
  color-scheme: dark;
  --reveal-effect: fireworks;
  --paper: #14121d;
  --card: #1e1b2b;
  --ink: #f0ead7;
  --muted: #a09677;
  --line: #363050;
  --seal: #7d7052;
  --focus: #e6d391;
  --error: #ef8a7a;
  --h1: #f0664f;
  --h2: #2cb4a1;
  --h3: #ecc23f;
  --h4: #a58ae0;
  --h5: #ea6ba8;
  --h6: #8cc05a;
  --h7: #6f9fdf;
  --h8: #cf7a4a;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- brand + question ---- */

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

.brand-mark {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--seal);
  transition: background 0.6s ease;
}

body[data-phase="revealed"] .brand-mark { background: var(--h1); }

.theme-picker {
  margin-left: auto;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
}

.question {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.lede {
  color: var(--muted);
  margin: 0 0 2rem;
  max-width: 34ch;
}

/* ---- forms ---- */

.stack { display: flex; flex-direction: column; gap: 0.75rem; }

.field-label {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.text-input {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: 14px;
  padding: 0.875rem 1rem;
  resize: vertical;
}

.text-input:focus { border-color: var(--focus); outline: none; }

.btn {
  font: inherit;
  font-weight: 600;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  padding: 0.95rem 1.25rem;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.08s ease;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary { background: var(--ink); color: var(--paper); }

.btn-quiet {
  border-color: var(--line);
  color: var(--muted);
  font-weight: 500;
}

.form-error { color: var(--error); margin: 0; }

/* ---- hold-to-lock answer button: same gesture language as the reveal ---- */

.lock-btn {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lock-btn .lock-fill {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 24%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.lock-btn.is-holding .lock-fill {
  transition: transform 1s linear;
  transform: scaleX(1);
}

.lock-btn .lock-label { position: relative; z-index: 1; }

.lock-btn.is-holding {
  animation: lock-charge 1s ease-in forwards;
  box-shadow: 0 0 2rem color-mix(in srgb, var(--seal) 65%, transparent);
}

@keyframes lock-charge {
  0% { transform: scale(1); }
  40% { transform: scale(1.01) rotate(-0.2deg); }
  70% { transform: scale(1.02) rotate(0.25deg); }
  100% { transform: scale(1.03); }
}

/* your words seal away while you hold */
body.holding .text-input {
  opacity: 0.5;
  transition: opacity 0.9s ease;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stepper output {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  min-width: 2ch;
  text-align: center;
}

.stepper-btn {
  font: inherit;
  font-size: 1.3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: var(--bw) solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

/* ---- status line under the question ---- */

.status-line {
  color: var(--muted);
  margin: 0 0 1.5rem;
  min-height: 1.5em;
}

/* ---- participant chips ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 1.6rem 0 0; /* headroom for blurbs */
  list-style: none;
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: var(--bw) solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.chip.is-you { border-color: var(--seal); }

.chip .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: var(--bw) solid var(--seal);
  background: transparent;
  flex: none;
}

.chip.is-present .dot { background: var(--ink); border-color: var(--ink); }

.chip .check { font-size: 0.85rem; }

/* mini hold ring inside a chip */
.chip .mini-ring { width: 1.1rem; height: 1.1rem; flex: none; }
.chip .mini-ring circle {
  fill: none;
  stroke: var(--seal);
  stroke-width: 3;
}
.chip .mini-ring .mini-fill {
  stroke: var(--ink);
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  transform: rotate(-90deg);
  transform-origin: center;
}
.chip.is-holding .mini-fill {
  transition: stroke-dashoffset 1s linear;
  stroke-dashoffset: 0;
}
.chip.is-locked .mini-fill { stroke-dashoffset: 0; transition: none; }

/* ---- peer activity blurbs + celebrations ---- */

.blurb {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
}

.blurb::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink);
}

.blurb.quiet { background: var(--seal); color: var(--card); }
.blurb.quiet::after { border-top-color: var(--seal); }

.blurb.pop { animation: blurb-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35); }

@keyframes blurb-in {
  from { transform: translateX(-50%) translateY(6px) scale(0.6); opacity: 0; }
}

/* answered / ready: a wink of their reveal colour, gone in a second */
.chip.flash { animation: chip-flash 1s ease; }

@keyframes chip-flash {
  25% {
    border-color: var(--hue);
    color: color-mix(in srgb, var(--hue) 70%, var(--ink));
    background: color-mix(in srgb, var(--hue) 16%, var(--card));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--hue) 22%, transparent);
    transform: scale(1.06);
  }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.chip.pop-anim { animation: chip-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4); }

@keyframes chip-pop { 40% { transform: scale(1.12); } }

.chip.shake { animation: chip-shake 0.45s ease; }

@keyframes chip-shake {
  20% { transform: translateX(-3px) rotate(-1deg); }
  45% { transform: translateX(3px) rotate(1deg); }
  70% { transform: translateX(-2px); }
}

/* ---- sealed answer cards (waiting state) ---- */

.seals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.seal-card {
  border-radius: 16px;
  border: var(--bw) solid var(--line);
  background: var(--card);
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  transition: opacity 0.3s ease;
}

.seal-card.is-empty { border-style: dashed; background: transparent; }

.seal-emblem {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--seal);
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
}

.seal-card.is-empty .seal-emblem {
  background: transparent;
  border: var(--bw) dashed var(--seal);
  color: var(--seal);
}

/* a peer's answer landing: the seal stamps down with a wink of their colour */
.seal-card.stamp { animation: seal-flash 1s ease; }
.seal-card.stamp .seal-emblem { animation: stamp 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.35); }

@keyframes stamp {
  from { transform: scale(1.7) rotate(-10deg); opacity: 0.4; }
}

@keyframes seal-flash {
  25% {
    border-color: var(--hue);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--hue) 20%, transparent);
  }
}

/* ---- share block ---- */

.share-block {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ---- hold-to-reveal ---- */

.hold-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

.hold-btn {
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.hold-btn svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hold-btn .ring-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 5;
}

.hold-btn .ring-fill {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.2s ease;
}

.hold-btn.is-holding .ring-fill {
  transition: stroke-dashoffset 1s linear;
  stroke-dashoffset: 0;
}

.hold-btn.is-locked { color: var(--muted); }
.hold-btn.is-locked .ring-fill { stroke-dashoffset: 0; transition: none; }

.hold-label { position: relative; z-index: 1; pointer-events: none; }

/* Holding is a powerful gesture: the button charges and the rest of the room
   leans away. Everything below builds over the 1s hold and reverts on release. */

.hold-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 0 0 transparent;
}

.hold-btn.is-holding {
  animation: hold-charge 1s ease-in forwards;
  box-shadow: 0 0 2.5rem color-mix(in srgb, var(--seal) 65%, transparent);
  transition: box-shadow 1s ease;
}

@keyframes hold-charge {
  0% { transform: scale(1); }
  35% { transform: scale(1.03) rotate(-0.5deg); }
  55% { transform: scale(1.05) rotate(0.6deg); }
  75% { transform: scale(1.06) rotate(-0.7deg); }
  90% { transform: scale(1.08) rotate(0.5deg); }
  100% { transform: scale(1.09); }
}

.hold-btn.is-locked { animation: lock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4); }

@keyframes lock-pop {
  0% { transform: scale(1.09); }
  60% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* the rest of the page recedes while you hold */
body.holding .question,
body.holding .brand,
body.holding .status-line,
body.holding .chips,
body.holding .auto-reveal-note {
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}

body.holding .question { opacity: 0.35; filter: blur(1.5px); transform: scale(0.98); }
body.holding .brand, body.holding .auto-reveal-note { opacity: 0.25; }
body.holding .status-line { opacity: 0.4; }
body.holding .chips { opacity: 0.55; filter: saturate(0.6); }

/* vignette drawing the eye to the hold zone */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: radial-gradient(
    ellipse 120% 75% at 50% 62%,
    transparent 35%,
    color-mix(in srgb, var(--ink) 14%, var(--paper)) 100%
  );
  transition: opacity 0.9s ease;
}

body.holding::before { opacity: 1; }

.question, .brand, .status-line, .chips, .auto-reveal-note {
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.auto-reveal-note { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---- reveal countdown overlay ---- */

.countdown {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  z-index: 10;
}

.countdown .num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 8rem;
  font-weight: 600;
  animation: count-pop 0.9s ease both;
}

@keyframes count-pop {
  from { transform: scale(1.35); opacity: 0; }
  20% { transform: scale(1); opacity: 1; }
  to { transform: scale(0.98); opacity: 1; }
}

/* ---- revealed answers: colour arrives ---- */

.answers {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.reveal-wrap { position: relative; perspective: 900px; }

.answer-card {
  border-radius: 16px;
  border: 2px solid var(--hue);
  background: color-mix(in srgb, var(--hue) 12%, var(--card));
  padding: 1rem 1.125rem;
}

.answer-card .who {
  font-weight: 600;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--hue) 72%, var(--ink));
  margin: 0 0 0.35rem;
}

.answer-card .what {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 60ch;
}

/* the sealed flap that opens off each card */
.flap {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: var(--bw) solid var(--line);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: top center;
  backface-visibility: hidden;
  z-index: 2;
}

.reveal-wrap.open .flap {
  transition: transform 0.7s cubic-bezier(0.3, 0.6, 0.3, 1.05), opacity 0.45s ease 0.3s;
  transform: rotateX(-115deg);
  opacity: 0;
  pointer-events: none;
}

.answer-card { transform: scale(0.97); }
.reveal-wrap.open .answer-card {
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.1) 0.1s;
  transform: scale(1);
}

.reveal-wrap.settled .flap { display: none; }
.reveal-wrap.settled .answer-card { transform: none; }

/* ---- holiday scenes (mounted by scenes.js; decorative only) ---- */

#scene { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#app { position: relative; z-index: 1; }
#scene .sc { position: absolute; opacity: 0.9; }
#scene .sc-bl { left: 0; bottom: 0; }
#scene .sc-br { right: 0; bottom: 0; }
#scene .sc-tr { right: 0.25rem; top: 3.25rem; }

@keyframes sc-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
#scene .twinkle { animation: sc-twinkle 2.2s ease-in-out infinite; }
#scene .t2 { animation-delay: 0.7s; }
#scene .t3 { animation-delay: 1.3s; }
#scene .t4 { animation-delay: 1.8s; }

@keyframes sc-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
#scene .sway { animation: sc-sway 3.4s ease-in-out infinite; transform-origin: 50% 90%; transform-box: fill-box; }

@keyframes sc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
#scene .bob { animation: sc-bob 3.2s ease-in-out infinite; }

/* the bunny hides behind the egg, then peeks (no peeking!) */
@keyframes sc-peek { 0%, 52%, 100% { transform: translateY(30px); } 62%, 86% { transform: translateY(0); } }
#scene .peek { animation: sc-peek 7s ease-in-out infinite; transform: translateY(30px); }

@keyframes sc-beat { 0%, 28%, 100% { transform: scale(1); } 8% { transform: scale(1.09); } 18% { transform: scale(1.04); } }
#scene .beat { animation: sc-beat 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

@keyframes sc-burst { 0% { transform: scale(0.1); opacity: 0; } 12% { opacity: 1; } 40% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
#scene .burst { animation: sc-burst 5s ease-out infinite; transform-origin: center; transform-box: fill-box; opacity: 0; }
#scene .b2 { animation-delay: 2.4s; }

@keyframes sc-rise { 0% { translate: 0 0; opacity: 0; } 12% { opacity: 0.9; } 88% { translate: 0 -78px; opacity: 0; } 100% { opacity: 0; } }
#scene .rise { animation: sc-rise 7s ease-in infinite; opacity: 0; }
#scene .r2 { animation-delay: 2.3s; }
#scene .r3 { animation-delay: 4.6s; }

/* ---- themed reveal flaps: the seal wears the holiday ---- */

:root[data-theme="christmas"] .flap {
  background:
    linear-gradient(#c94f3d, #c94f3d) 50% 0 / 16px 100% no-repeat,
    linear-gradient(#c94f3d, #c94f3d) 0 50% / 100% 16px no-repeat,
    repeating-linear-gradient(45deg, #1d2c22 0 14px, #24382b 14px 28px);
  border-color: #c94f3d;
}
:root[data-theme="christmas"] .flap .seal-emblem { background: #c94f3d; color: #fff; }

:root[data-theme="easter"] .flap {
  background:
    radial-gradient(circle 5px at 22% 30%, #fff 4px, transparent 5px),
    radial-gradient(circle 4px at 74% 22%, #f2b8c6 3px, transparent 4px),
    radial-gradient(circle 4px at 40% 72%, #9fc5e8 3px, transparent 4px),
    radial-gradient(circle 5px at 82% 64%, #f6dd8f 4px, transparent 5px),
    #f5f0e4;
  border-color: #c3b3d6;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 96%, 84% 88%, 76% 96%, 68% 88%, 60% 96%, 52% 88%, 44% 96%, 36% 88%, 28% 96%, 20% 88%, 12% 96%, 4% 88%, 0 96%);
  border-radius: 16px 16px 0 0;
}

:root[data-theme="valentines"] .flap {
  background: #fbe9ee;
  border-color: #d8a4b5;
}
:root[data-theme="valentines"] .flap::before {
  content: "❤";
  position: absolute;
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: #d6386b;
  font-size: 0.9rem;
}
:root[data-theme="valentines"] .flap .seal-emblem { background: #d6386b; color: #fff; }

:root[data-theme="newyears"] .flap {
  background:
    radial-gradient(circle 1.5px at 18% 28%, #e6d391 1px, transparent 1.5px),
    radial-gradient(circle 1px at 70% 18%, #f0ead7 0.8px, transparent 1px),
    radial-gradient(circle 1.5px at 84% 60%, #e6d391 1px, transparent 1.5px),
    radial-gradient(circle 1px at 34% 74%, #f0ead7 0.8px, transparent 1px),
    radial-gradient(circle 1px at 55% 45%, #e6d391 0.8px, transparent 1px),
    #171427;
  border-color: #e6d391;
}
:root[data-theme="newyears"] .flap .seal-emblem { background: #e6d391; color: #171427; }

.message-body { color: var(--muted); }

.ask-another {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ---- reveal particles (theme-driven via --reveal-effect) ---- */

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

.particle {
  position: absolute;
  top: -5vh;
  font-size: 1.3rem;
  animation: particle-fall var(--dur, 2s) ease-in var(--delay, 0s) forwards;
  opacity: 0;
}

.particle.rise {
  top: auto;
  bottom: 20vh;
  animation-name: particle-rise;
  animation-timing-function: ease-out;
}

.particle.confetto {
  width: 0.55rem;
  height: 0.9rem;
  border-radius: 2px;
  background: var(--pc);
  font-size: 0;
}

@keyframes particle-fall {
  0% { transform: translateY(0) rotate(0) translateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(var(--spin, 300deg)) translateX(var(--sway, 0px)); opacity: 0; }
}

@keyframes particle-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-70vh) translateX(var(--sway, 0px)) scale(1.1) rotate(var(--spin, 40deg)); opacity: 0; }
}

/* ---- reduced motion: the moment still lands, it just doesn't move ---- */

@media (prefers-reduced-motion: reduce) {
  .countdown .num { animation: none; }
  .btn:active { transform: none; }
  .reveal-wrap.open .flap {
    transition: opacity 0.5s ease;
    transform: none;
  }
  .answer-card, .reveal-wrap.open .answer-card {
    transform: none;
    transition: none;
  }
  /* the hold still dims the room (functional feedback) but nothing moves */
  .hold-btn.is-holding, .hold-btn.is-locked { animation: none; box-shadow: none; }
  .lock-btn.is-holding { animation: none; box-shadow: none; }
  body.holding .question { transform: none; filter: none; }
  body.holding .chips { filter: none; }
  .particles { display: none; }
  /* blurbs still appear (they're information) but without motion */
  .blurb.pop, .chip.flash, .chip.pop-anim, .chip.shake,
  .seal-card.stamp, .seal-card.stamp .seal-emblem { animation: none; }
  /* holiday scenes freeze; loop-only elements (bursts, rising hearts) hide */
  #scene * { animation: none !important; }
  #scene .burst, #scene .rise { display: none; }
  #scene .peek { transform: translateY(30px); }
}