/* Masquerade — single stylesheet, mobile-first.
   Storybook palette: parchment, antique gold, deep teal & plum. */

/* Self-hosted fonts (offline — no CDN) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --bg: #f3e7cf;          /* parchment */
  --bg-soft: #fbf4e3;     /* card cream */
  --ink: #2f2b24;         /* warm near-black body */
  --ink-soft: #6f6450;
  --gold: #b1873a;        /* antique gold */
  --gold-soft: #d9bd7e;
  --teal: #145b51;        /* deep teal */
  --plum: #5b2b4d;        /* plum */
  --accent: var(--gold);          /* hairlines, flourishes, hares */
  --accent-deep: var(--teal);     /* headings & primary buttons */
  --highlight: #e7cf9a;           /* soft gold glow */
  --rule: rgba(177, 135, 58, 0.30);
  --radius: 14px;
  --shadow: 0 8px 28px rgba(45, 35, 15, 0.12);
  --tap: 56px;
  --font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse at 50% -10%, #f7eed9 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Headings in the display serif */
h1, h2, h3,
.title,
.section h2,
.az-modal-title,
.clue-found-message,
.recap-punch {
  font-family: var(--font-head);
}
.section h2 {
  font-weight: 600;
  letter-spacing: 0.005em;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

/* Top bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
}
.title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0;
  user-select: none;
  cursor: pointer;
}
.iconbtn {
  min-width: var(--tap);
  min-height: var(--tap);
  border: none;
  background: transparent;
  color: var(--accent-deep);
  font-size: 1.4rem;
  border-radius: 50%;
}
.iconbtn[aria-pressed="true"] { opacity: 0.35; }

/* Section container */
.section {
  flex: 1;
  padding: 8px 4px 24px;
  animation: fadein 480ms ease;
  position: relative;
}

/* Hero hare — themed per section (waving / with envelope / with glasses /
   with "?" / in disguise / with suitcase). Sits at the top of each section. */
.hare-hero {
  width: 132px;
  height: 132px;
  margin: 4px auto 10px;
  color: var(--accent-deep);
  display: block;
  background-position: center 60%;
  background-repeat: no-repeat;
  background-size: 78% auto;
  /* gold medallion */
  border-radius: 50%;
  background-color: var(--bg-soft);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 6px var(--bg-soft), inset 0 0 0 7px rgba(177,135,58,0.3), var(--shadow);
}

/* Big hare on the locked screen */
.hare-big {
  width: 150px;
  height: 192px;
  margin: 8px auto 16px;
  color: var(--accent-deep);
  display: block;
  background: url("../assets/img/hare.svg") center/contain no-repeat;
}

/* Hidden-hares hunt — 6 per section, scattered. Subtle until hovered;
   tap to "find". A nod to the original Masquerade book. */
.hare-hidden {
  position: absolute;
  width: 22px;
  height: 26px;
  padding: 0;
  border: none;
  background: url("../assets/img/hare-tiny.svg") center/contain no-repeat;
  color: var(--accent-deep);
  opacity: 0.22;
  cursor: pointer;
  transition: opacity 220ms ease;
  z-index: 2;
}
.hare-hidden:hover,
.hare-hidden:focus-visible { opacity: 0.55; outline: none; }
.hare-hidden.found {
  opacity: 0.95;
  color: var(--accent);
  cursor: default;
}
.hare-hidden.just-found {
  animation: hareFound 600ms ease-out;
}
@keyframes hareFound {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(1); opacity: 0.95; }
}

/* Celebration toast when all 36 hares are found */
.hare-toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  background: var(--accent-deep);
  color: var(--bg);
  padding: 14px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
  z-index: 60;
  max-width: 320px;
  text-align: center;
}
.hare-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Leaping hare that bounds across the screen (gate answered / reveal finale) */
.hop-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 140;
}
.hop-hare {
  position: absolute;
  left: 0;
  width: 92px;
  height: 58px;
  transform: translateX(-140px);
  animation-name: hopTraverse;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes hopTraverse {
  to { transform: translateX(calc(100vw + 140px)); }
}
.hop-hare-inner {
  width: 100%;
  height: 100%;
  background: url("../assets/img/hare-leap.svg") center/contain no-repeat;
  animation: hopBob 0.46s ease-in-out infinite;
}
@keyframes hopBob {
  0%, 100% { transform: translateY(8px) rotate(-3deg); }
  50%      { transform: translateY(-16px) rotate(3deg); }
}

/* Gate hare: a gentle pulse when she tries to move on without finding it */
.gate-hare.nudge {
  animation: gateNudge 1.4s ease-in-out;
}
@keyframes gateNudge {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  20%, 60% { opacity: 0.9; transform: scale(1.5); }
  40%, 80% { opacity: 0.5; transform: scale(1.1); }
}

/* Hidden-hare gate question modal */
.gateq {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.gateq-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 12, 0.78);
  animation: fadein 200ms ease-out;
}
.gateq-card {
  position: relative;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  width: 100%;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(30, 20, 12, 0.5), inset 0 0 0 5px var(--bg-soft), inset 0 0 0 6px rgba(177, 135, 58, 0.35);
  animation: azModalIn 260ms ease-out;
}
.gateq-hare {
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  background: url("../assets/img/hare-tiny.svg") center/contain no-repeat;
}
.gateq-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--gold);
  margin: 0 0 10px;
}
.gateq-question {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--accent-deep);
  margin: 0 0 20px;
}
.gateq-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gateq-option {
  min-height: var(--tap);
  padding: 12px 16px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 140ms ease;
}
.gateq-option:hover { background: rgba(177, 135, 58, 0.1); }

.gateq-tick {
  width: 64px;
  height: 64px;
  margin: 4px auto 10px;
  border-radius: 50%;
  background: var(--accent-deep);
  color: var(--gold-soft);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tickPop 420ms ease-out;
}
.gateq-fragment {
  font-family: var(--font-head);
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--accent-deep);
  margin: 0 0 20px;
}

/* Counter */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hare-counter {
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.hare-counter.complete { color: var(--accent-deep); font-weight: 600; }
@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section h2 {
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--accent-deep);
  margin: 8px 0 18px;
}
.section p { margin: 0 0 14px; }
.section .muted { color: var(--ink-soft); }

/* Primary button — used for "begin", "next paragraph", etc. */
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 26px;
  border: 1px solid rgba(217, 189, 126, 0.55); /* faint gold rim */
  border-radius: var(--radius);
  background: linear-gradient(180deg, #1a6c60, var(--teal));
  color: #fbf4e3;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease;
}
.primary:hover { box-shadow: 0 10px 30px rgba(45, 35, 15, 0.18); }
.primary:active { transform: translateY(1px); }
.primary[disabled] { opacity: 0.4; cursor: default; }

.ghost {
  background: transparent;
  color: var(--accent-deep);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  min-height: var(--tap);
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.ghost:hover { background: rgba(177, 135, 58, 0.08); }

/* Ornamental gold flourish (line with a centred diamond) under headings */
.section-body h2::after {
  content: "";
  display: block;
  width: 116px;
  height: 12px;
  margin-top: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 12'><line x1='0' y1='6' x2='49' y2='6' stroke='%23b1873a' stroke-width='1.5'/><line x1='67' y1='6' x2='116' y2='6' stroke='%23b1873a' stroke-width='1.5'/><path d='M58 1 L63 6 L58 11 L53 6 Z' fill='%23b1873a'/></svg>") left center / contain no-repeat;
}

/* Photo card with placeholder fallback */
.photo {
  width: 100%;
  height: auto;            /* show the whole photo — no cropping */
  max-height: 72vh;        /* but never let a tall one swamp the screen */
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--bg-soft);
  display: block;
  cursor: zoom-in;
}
.choice-card .photo { cursor: pointer; }

/* Photo lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(30, 20, 12, 0.92);
  animation: fadein 200ms ease-out;
}
.lightbox.hidden { display: none; }
.lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-cap {
  color: var(--bg);
  font-size: 1.05rem;
  text-align: center;
  margin: 0;
  max-width: 36ch;
}
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: var(--bg);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}
.photo.missing {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}

/* A–Z modal — tap a letter, photo + caption pop up */
.az-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.az-modal.hidden { display: none; }
.az-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 12, 0.78);
  animation: fadein 200ms ease-out;
}
.az-modal-card {
  position: relative;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 22px 20px 22px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(30, 20, 12, 0.5), inset 0 0 0 5px var(--bg-soft), inset 0 0 0 6px rgba(177, 135, 58, 0.35);
  animation: azModalIn 260ms ease-out;
}
@keyframes azModalIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.az-modal-close {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.az-modal-title {
  margin: 0 0 14px;
  color: var(--accent-deep);
  font-size: 2rem;
  line-height: 1.1;
  padding-right: 36px;
}
.az-modal-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 14px;
}
.az-modal-caption {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
}
.az-modal-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}
.az-nav {
  flex: 1;
  min-height: var(--tap);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--accent-deep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.az-nav:hover:not(:disabled) { background: #fff; }
.az-nav:disabled { opacity: 0.3; cursor: default; }

/* Wishes wall */
.wish-count {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 0 0 6px;
}
.wishwall {
  columns: 2 150px;
  column-gap: 12px;
  margin-top: 16px;
}
.wishnote {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  position: relative;
  margin: 0 0 12px;
  padding: 16px 14px 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.wishnote:hover, .wishnote:focus-visible {
  transform: rotate(0deg) scale(1.03) !important;
  box-shadow: 0 10px 26px rgba(45,35,15,0.18);
  outline: none;
  z-index: 2;
}
.wishnote-pin {
  position: absolute; top: -5px; left: 50%; width: 11px; height: 11px;
  margin-left: -5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 2px 4px rgba(45,35,15,0.35);
}
.wishnote-photo { width: 100%; border-radius: 4px; margin-bottom: 8px; display: block; }
.wishnote-msg { margin: 4px 0 10px; font-size: 0.96rem; line-height: 1.45; }
.wishnote-from { font-weight: 600; color: var(--accent-deep); font-size: 0.9rem; }
.wishnote-rel { font-weight: 400; color: var(--ink-soft); font-style: italic; }

/* tints reused by the wishes wall */
.tint-0 { background: #fff6ec; }
.tint-1 { background: #fdeef0; }
.tint-2 { background: #eef4ee; }
.tint-3 { background: #eef1f6; }
.tint-4 { background: #f7eef7; }

.wish-modal {
  position: fixed; inset: 0; z-index: 115;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wish-modal.hidden { display: none; }
.wish-modal-backdrop { position: absolute; inset: 0; background: rgba(30,20,12,0.72); animation: fadein 200ms ease-out; }
.wish-modal-card {
  position: relative; background: var(--bg-soft); border-radius: var(--radius);
  padding: 30px 22px 22px; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(30,20,12,0.5), inset 0 0 0 5px var(--bg-soft), inset 0 0 0 6px rgba(177,135,58,0.35);
  animation: azModalIn 260ms ease-out;
}
.wish-modal-close {
  position: absolute; top: 4px; right: 8px; width: 40px; height: 40px;
  border: none; background: transparent; font-size: 1.9rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.wish-modal-photo { width: 100%; border-radius: 8px; margin-bottom: 14px; display: block; }
.wish-modal-photo.hidden { display: none; }
.wish-modal-msg { font-size: 1.1rem; line-height: 1.55; white-space: pre-line; margin: 0 0 16px; }
.wish-modal-from { margin: 0; font-weight: 600; color: var(--accent-deep); }

/* A–Z tiles */
.az-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.az-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--accent-deep);
  border: 1px solid var(--rule);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.az-tile.todo { opacity: 0.45; }

/* Guess-who */
.quote {
  font-size: 1.25rem;
  line-height: 1.4;
  font-style: italic;
  padding: 20px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
}
.choices {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.choices .primary { flex: 1; }

/* Reveal */
.reveal-stack > * + * { margin-top: 16px; }
.reveal-card {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow), inset 0 0 0 4px var(--bg-soft), inset 0 0 0 5px rgba(177, 135, 58, 0.22);
}

/* Reveal recap — the five acrostic words line up before the cards */
.reveal-recap { text-align: center; }
.recap-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 22px 0;
}
.recap-word {
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  opacity: 0;
  animation: recapWordIn 0.7s ease-out forwards;
}
@keyframes recapWordIn {
  0%   { opacity: 0; transform: scale(0.55) translateY(14px); }
  60%  { opacity: 1; transform: scale(1.22); text-shadow: 0 0 20px var(--highlight); }
  100% { opacity: 1; transform: scale(1); text-shadow: 0 0 6px var(--highlight); }
}
.recap-punch {
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  animation: fadein 0.8s ease-out forwards;
}
.reveal-recap #recap-next { opacity: 0; animation: fadein 0.8s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .recap-word, .recap-punch, .reveal-recap #recap-next {
    animation-duration: 0.01ms; opacity: 1;
  }
}

/* Clue fragments assembling at the reveal */
.clue-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px 0;
}
.clue-chip {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--ink);
}
/* jumbled state: gently tilted, float in */
.clue-chips.jumbled .clue-chip {
  opacity: 0;
  animation: clueFloatIn 0.5s ease-out forwards;
}
.clue-chips.jumbled .clue-chip:nth-child(odd)  { --rot: -3deg; }
.clue-chips.jumbled .clue-chip:nth-child(even) { --rot: 2.5deg; }
@keyframes clueFloatIn {
  0%   { opacity: 0; transform: translateY(8px) rotate(0deg) scale(0.96); }
  100% { opacity: 0.9; transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .clue-chips.jumbled .clue-chip { animation-duration: 0.01ms; opacity: 0.9; }
}

/* assembled: a flowing line that drops into place word-group by word-group */
.clue-chips.assembled {
  gap: 6px 8px;
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
.clue-chips.assembled .clue-chip {
  background: transparent;
  border: none;
  padding: 2px 2px;
  color: var(--accent-deep);
  opacity: 0;
  animation: clueDrop 0.6s ease-out forwards;
}
@keyframes clueDrop {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(0) scale(1.08); text-shadow: 0 0 16px var(--highlight); }
  100% { opacity: 1; transform: translateY(0) scale(1); text-shadow: 0 0 4px var(--highlight); }
}
.reveal-recap #recap-next { opacity: 0; animation: fadein 0.8s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .clue-chips.assembled .clue-chip, .reveal-recap #recap-next { animation-duration: 0.01ms; opacity: 1; }
}

/* Hotel-choice cards in the reveal */
.choice-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 20px 0 8px;
}
@media (min-width: 560px) {
  .choice-options { grid-template-columns: 1fr 1fr; }
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.choice-card:hover,
.choice-card:focus-visible {
  border-color: var(--accent);
  background: #fff;
  transform: translateY(-2px);
  outline: none;
}
.choice-card:active { transform: translateY(0); }
.choice-card h3 {
  margin: 6px 0 0;
  color: var(--accent-deep);
  font-size: 1.15rem;
}
.choice-card p { margin: 0; font-size: 0.92rem; }
.choice-card .photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: none;
  margin: 0;
}
.reveal-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.playlist-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.countdown {
  text-align: center;
  font-size: 2rem;
  color: var(--accent-deep);
  padding: 24px 0;
}

/* Footer nav */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  gap: 12px;
}
.navbtn {
  min-height: var(--tap);
  min-width: 96px;
  padding: 0 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent-deep);
  font-size: 1rem;
}
.navbtn[disabled] { opacity: 0.3; }
.section-label {
  color: var(--ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Overlay (dad mode) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 40, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.overlay.hidden { display: none; }
.overlay-panel {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 24px;
  width: min(360px, 92vw);
  box-shadow: var(--shadow);
}
.overlay-panel input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  font-size: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink);
  margin: 12px 0;
}
.overlay-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.overlay-actions button {
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--accent-deep);
}
#dad-mode-panel button {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: var(--tap);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  color: var(--ink);
  text-align: left;
  padding: 0 16px;
}

/* Treasure-hunt clue screen */
.clue {
  text-align: center;
  padding: 24px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.clue-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--accent);
  margin: 0;
}
.clue-photo {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.clue-hint {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 32ch;
  white-space: pre-line; /* honour line breaks in the poem strings */
}
.clue-instruction { margin: 0; }
.clue .primary { margin-top: 8px; }

.clue-found-ack { padding: 48px 8px; }
.clue-tick {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-deep);
  color: var(--bg);
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tickPop 420ms ease-out;
}
@keyframes tickPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.clue-found-message {
  font-size: 1.25rem;
  line-height: 1.45;
  max-width: 30ch;
  margin: 0;
}

/* Acrostic reveal — poem reappears, first letters sparkle, word assembles */
.acrostic-reveal { gap: 12px; }
.acr-poem {
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 34ch;
  margin: 0 auto;
}
.acr-line { white-space: pre-wrap; }
.acr-blank { line-height: 0.6; }
.acr-first {
  display: inline-block;
  font-weight: 700;
  transform-origin: center;
  animation: acrSparkle 1.1s ease-out both;
}
@keyframes acrSparkle {
  0%   { color: inherit; text-shadow: none; transform: scale(1); }
  35%  { color: var(--accent-deep); text-shadow: 0 0 14px var(--highlight), 0 0 6px var(--highlight); transform: scale(1.45); }
  100% { color: var(--accent-deep); text-shadow: 0 0 5px var(--highlight); transform: scale(1.12); }
}
.acr-word {
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  margin: 8px 0 4px;
}
.acr-word span {
  display: inline-block;
  opacity: 0;
  animation: acrWordPop 0.6s ease-out forwards;
}
@keyframes acrWordPop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.5); }
  60%  { opacity: 1; transform: translateY(0) scale(1.25); text-shadow: 0 0 16px var(--highlight); }
  100% { opacity: 1; transform: scale(1); text-shadow: 0 0 4px var(--highlight); }
}
@media (prefers-reduced-motion: reduce) {
  .acr-first, .acr-word span { animation-duration: 0.01ms; animation-iteration-count: 1; opacity: 1; }
}

/* Locked screen (before birthday morning) */
.locked {
  text-align: center;
  padding: 48px 8px;
  color: var(--ink-soft);
}
.locked h2 { color: var(--accent-deep); }

.hidden { display: none !important; }