/* Lily's Garden-inspired shape language, using Rupti's existing palette.
   This presentation layer leaves the original artwork, copy and app logic intact.
   Keep it separate from style.css so the skin can be removed in one step. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/nunito-black.ttf') format('truetype');
}
:root {
  --garden-font: 'Nunito', 'Hind Siliguri', var(--font-body);
  --garden-rim: var(--clr-amethyst-deep);
  --garden-panel-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .07),
    inset 0 0 0 5px rgba(5, 3, 10, .32),
    0 7px 0 var(--clr-burgundy-deep),
    0 14px 26px rgba(0, 0, 0, .55);
  --garden-button-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .34),
    inset 0 -3px 0 rgba(0, 0, 0, .22),
    0 4px 8px rgba(0, 0, 0, .45);
}

/* Rounded, friendly display type. The handwritten letter stays handwritten. */
.hero-title, .popout-title, .section-title, .note-card-title,
.modal-title, .toast-title, .llb-title, .milestone-title, .timer-num {
  font-family: var(--garden-font);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-wrap: balance;
}
.hero-title, .section-title {
  text-shadow: 0 3px 0 var(--clr-amethyst-deep);
}
/* Gradient-clipped type must never carry a text-shadow: the shadow paints
   through the transparent fill and hides the gradient. */
.popout-title,
.gradient-text {
  text-shadow: none;
  filter: drop-shadow(0 2px 0 var(--clr-amethyst-deep));
}
.section-title { font-size: clamp(1.85rem, 4.5vw, 2.7rem); }

/* Broad, bevel-edged controls rather than thin web pills.
   Do not override their existing fills, text colors or gradient stops. */
.btn, .btn-enter-site, .nav-arrow, .nav-random, .hero-actions .btn {
  font-family: var(--garden-font);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.3;
  min-height: 48px;
  min-width: 0;
  max-width: 100%;
  border-width: 2px;
  border-style: solid;
  border-bottom: 5px solid var(--garden-rim);
  border-radius: 18px;
  padding: 12px 20px 11px;
  box-shadow: var(--garden-button-shadow);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary, .btn-enter-site { border-bottom-color: var(--clr-mauve); }
.btn::after, .btn-enter-site::after { display: none; }
/* Glossy top bevel on every game button. Painted behind the label. */
.btn::before,
.btn-enter-site::before,
.nav-arrow::before,
.nav-random::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 3px;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn, .btn-enter-site, .nav-arrow, .nav-random { position: relative; overflow: hidden; }
.btn:hover, .btn:focus-visible, .btn-enter-site:hover, .nav-arrow:hover, .nav-random:hover {
  box-shadow: var(--garden-button-shadow);
  transform: translateY(-1px);
}
.btn:active, .btn-enter-site:active, .nav-arrow:active, .nav-random:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn:focus-visible, .btn-enter-site:focus-visible, .nav-arrow:focus-visible,
.nav-random:focus-visible, .modal-close:focus-visible {
  outline: 3px solid var(--clr-lavender);
  outline-offset: 4px;
}
.btn:disabled { transform: none !important; }
.nav-arrow, .nav-random { font-size: .86rem; padding: 9px 10px; border-radius: 14px; }
.note-card-nav { gap: 8px; flex-wrap: wrap; }
.note-card-nav > button { flex: 1 1 auto; }
.hero-actions .btn { padding: 13px 22px; }

/* The hero CTA breathes a soft lavender halo so it reads as the next tap. */
.hero-actions .btn { animation: garden-cta-glow 2.6s ease-in-out infinite; }
@keyframes garden-cta-glow {
  0%, 100% {
    box-shadow:
      var(--garden-button-shadow),
      0 0 0 1px rgba(216, 180, 254, .18),
      0 0 14px rgba(192, 132, 252, .28);
  }
  50% {
    box-shadow:
      var(--garden-button-shadow),
      0 0 0 3px rgba(216, 180, 254, .14),
      0 0 32px rgba(192, 132, 252, .62);
  }
}
/* The cake CTA carries the longest label; let it wrap instead of clipping. */
#blowCandleBtn {
  white-space: normal;
  line-height: 1.25;
  padding-inline: 14px;
  text-wrap: balance;
}

/* Soft-edged game panels. Existing surface colors remain in style.css. */
.milestone-card, .letter-paper, .polaroid-card, .modal-card,
.note-card, .cake-canvas-wrapper, .toast-card, .llb-card {
  /* Legacy mobile rules use !important on the border shorthand. Override
     only its width; their existing border colors and fills are preserved. */
  border-width: 3px !important;
  border-style: solid;
  border-radius: 28px;
  box-shadow: var(--garden-panel-shadow);
}
.hero-quote-card {
  border-width: 2px;
  border-radius: 26px 26px 26px 8px;
  box-shadow: var(--garden-panel-shadow);
}
.hero-quote-card .quote-mark { opacity: .8; }
.hero-quote-card .open-quote { left: 12px; top: -8px; }
.hero-quote-card .close-quote { right: 12px; bottom: -16px; }

/* Ribbon-shaped chapter labels, using only the existing lavender family. */
.section-tag, .hero-badge, .present-top-badge, .milestone-header,
.llb-card-badge, .note-card-ribbon, .modal-tag {
  position: relative;
  font-family: var(--garden-font);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 12px 12px 16px 16px;
  border-width: 2px;
  border-style: solid;
  box-shadow: 0 4px 0 var(--garden-rim), inset 0 2px 0 rgba(255, 255, 255, .12);
  animation: none;
}
.section-tag {
  padding: 10px 22px;
  margin-bottom: 20px;
  font-size: .95rem;
  border-width: 3px;
  border-radius: 10px 10px 14px 14px;
  box-shadow:
    0 5px 0 var(--garden-rim),
    inset 0 2px 0 rgba(255, 255, 255, .2),
    inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.section-tag::before, .section-tag::after {
  content: '';
  position: absolute;
  top: 7px;
  width: 16px;
  height: 32px;
  background: var(--clr-amethyst-deep);
  pointer-events: none;
  z-index: -1;
  animation: none;
}
.section-tag::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28% 50%); }
.section-tag::after { right: -12px; clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); }
.section-heading { position: relative; isolation: isolate; }
.section-subtitle { max-width: 560px; margin-inline: auto; }

/* A gift-stage frame and a celebratory reward-style popup, not a new flow. */
.present-stage:not(.unwrapped) {
  padding: 24px 12px 18px;
  border: 3px solid var(--border-accent);
  border-radius: 36px;
  background: var(--clr-obsidian-card);
  box-shadow: var(--garden-panel-shadow);
}
.present-top-badge { font-size: .88rem; line-height: 1.4; padding: 10px; }
.present-tap-text {
  font-family: var(--garden-font);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.5;
  border-radius: 16px;
  max-width: 100%;
  padding: 10px 8px;
  animation: none;
}
.present-popout {
  width: 100%;
  max-width: 335px;
  padding: 28px 18px 24px;
  border: 3px solid var(--border-accent);
  border-radius: 32px;
  background: var(--clr-obsidian-card);
  box-shadow: var(--garden-panel-shadow);
  gap: 12px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.popout-title { font-size: clamp(2rem, 8vw, 2.5rem); margin-bottom: 0; }
.popout-subtitle-wrapper { border-radius: 20px; padding: 14px 12px; }
.popout-subtitle { line-height: 1.65; }
.popout-celebration-aura { gap: 10px; }
.btn-enter-site { width: 100%; padding-inline: 10px; }

/* Milestone tiles resemble inset keepsake slots, not tappable buttons. */
.milestone-card { padding: 0 14px 20px; margin-top: 10px; }
.milestone-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  margin: -3px -4px 16px;
  background: var(--clr-amethyst-deep);
  border-color: var(--border-accent);
  font-size: 1rem;
}
.milestone-date-kicker { font-size: .75rem; }
.milestone-timer { gap: 12px; }
.timer-unit {
  border-width: 2px;
  border-radius: 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
  padding: 12px 8px;
}
.timer-num { font-size: 2.05rem; }
.timer-label {
  font-family: var(--garden-font);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 8px;
  border: 0;
  background: none;
}
.milestone-pill { font-family: var(--garden-font); text-transform: none; letter-spacing: 0; }
.milestone-sparkle, .timer-unit::after { animation: none; }
.hero-title { font-size: clamp(1.85rem, 5vw, 3.7rem); }
.hero-title-emoji { display: inline-block; font-size: .72em; }

/* Preserve the handwritten letter and every original photo/crop. */
.letter-paper { padding: 34px 24px 26px; }
.letter-header { gap: 12px; }
.letter-actions { gap: 14px; flex-wrap: wrap; }
.letter-stamp { border-radius: 14px; }
.polaroid-card { padding: 13px 13px 64px; }
.polaroid-image-frame { border-radius: 18px; overflow: hidden; }
.polaroid-sticker, .caption-date {
  font-family: var(--garden-font);
  font-weight: 700;
  letter-spacing: 0;
}
.polaroid-sticker { border-radius: 10px; padding: 6px 10px; }
.caption-title { font-family: var(--garden-font); font-weight: 900; }
.caption-title, .caption-date { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.polaroid-caption { padding-top: 14px; }
.polaroid-overlay span { font-family: var(--garden-font); border-radius: 12px; }

/* Framed photograph popup with a large, recognizable game-style close button. */
.modal-card { padding: 9px; }
.modal-image-wrapper { border-radius: 20px; overflow: hidden; }
.modal-details { padding: 22px 14px 14px; }
.modal-tag { align-self: flex-start; padding: 6px 12px; font-size: .82rem; }
.modal-title { margin-top: 8px; }
.modal-close {
  width: 44px;
  height: 44px;
  top: 14px;
  right: 14px;
  border-radius: 15px;
  border: 2px solid var(--clr-lavender);
  border-bottom-width: 4px;
  background: var(--clr-amethyst-deep);
  font-family: var(--garden-font);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: var(--garden-button-shadow);
}

/* Keep all sixteen notes and the same navigation, inside a ribbon-topped card. */
.note-card { padding: 0 18px 20px; }
.note-card-ribbon {
  display: table;
  top: auto;
  left: auto;
  transform: none;
  margin: -3px auto 20px;
  padding: 8px 20px;
  border-color: var(--border-accent);
  font-size: .95rem;
}
.note-card::after { border-style: solid; border-radius: 20px; }
.note-card-title { font-size: 1.55rem; }
.note-card-text { line-height: 1.75; }
.note-sticker { top: 12px; right: 10px; animation: none; }
.note-card-nav { position: relative; z-index: 1; padding-top: 18px; }
.jar-cute-pill { font-family: var(--garden-font); border-style: solid; border-radius: 12px; }
.tracker-dot { border-radius: 5px; }
.tracker-dot.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

/* The original canvas cake stays untouched inside its new frame. */
.cake-canvas-hint { font-family: var(--garden-font); font-weight: 700; }
.toast-card { padding: 28px 20px; }
.toast-title { line-height: 1.25; }
.llb-card { padding: 28px 20px; }
.llb-card-badge { font-size: .85rem; line-height: 1.4; padding: 10px 12px; }
.llb-icon-emblem { border-width: 3px; }
.llb-title { line-height: 1.2; }
.footer-date { font-family: var(--garden-font); }

/* ─────────────────────────────────────────────
   GAME-UI POLISH — framed cards, medallions, gems
   ───────────────────────────────────────────── */

/* Every card carries an inset picture-frame line in addition to the bevel. */
.letter-paper, .llb-card, .modal-card, .milestone-card, .note-card, .polaroid-card {
  position: relative;
}
.letter-paper::before,
.llb-card::before,
.modal-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(216, 180, 254, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  pointer-events: none;
  z-index: 1;
}
.modal-card::before { inset: 7px; border-radius: 20px; z-index: 2; }

/* Photos and the cake sit in crisp inset frames, like game slots. */
.polaroid-image-frame,
.modal-image-wrapper {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    inset 0 3px 10px rgba(0, 0, 0, .45);
}
.cake-canvas-wrapper::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  border: 1px solid rgba(216, 180, 254, .16);
  pointer-events: none;
  z-index: 1;
}

/* Circular medallions for button and stat icons. */
.btn-icon,
.unit-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(0, 0, 0, .22);
  font-size: .95em;
  line-height: 1;
}
.unit-icon { width: 30px; height: 30px; margin-bottom: 4px; }

/* Gem-like progress dots. */
.tracker-dots { gap: 4px; flex-wrap: nowrap; }
.tracker-dot {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  border: 1px solid rgba(216, 180, 254, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 rgba(0, 0, 0, .35);
}
.tracker-dot.active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 10px rgba(192, 132, 252, .75),
    0 2px 0 rgba(0, 0, 0, .35);
}

/* Wooden/leather game chips, not thin web pills. */
.milestone-pill,
.jar-cute-pill,
.timer-label {
  border-width: 2px;
  border-style: solid;
  border-radius: 11px;
  box-shadow: 0 3px 0 var(--garden-rim), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.milestone-pill { padding: 5px 12px; }
.jar-cute-pill { padding: 5px 16px; }
.timer-label { padding: 3px 12px; }

/* In-game prompt strips. */
.present-tap-text,
.cake-canvas-hint {
  border: 2px solid rgba(216, 180, 254, .22);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--garden-rim), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.cake-canvas-hint { padding: 7px 14px; }

/* A beveled top bar and a sign-board footer. */
.site-header {
  border-bottom: 3px solid var(--clr-amethyst-deep);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .45);
}
.footer-content {
  max-width: 620px;
  margin-inline: auto;
  padding: 24px 20px 20px;
  border: 3px solid var(--border-accent);
  border-radius: 26px;
  box-shadow: var(--garden-panel-shadow);
}

/* Reward medallions. */
.llb-icon-emblem {
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(192, 132, 252, .18), rgba(10, 8, 16, .85) 70%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .14),
    inset 0 -4px 10px rgba(0, 0, 0, .5),
    0 4px 0 var(--garden-rim);
}
.llb-icon-emblem .scales-svg { width: 60px; height: 60px; margin: 0; }
.toast-icon {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 14px;
  border: 2px solid rgba(216, 180, 254, .3);
  background: rgba(192, 132, 252, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 0 var(--garden-rim);
}

/* Game-grade scrollbar and selection (phones hide scrollbars in style.css). */
::selection { background: var(--clr-lavender); color: var(--clr-obsidian); }
@media (min-width: 769px) {
  ::-webkit-scrollbar { width: 14px; }
  ::-webkit-scrollbar-track { background: var(--clr-obsidian-soft); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--clr-lavender), var(--clr-mauve));
    border: 3px solid var(--clr-obsidian-soft);
    border-radius: 9px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--clr-lilac); }
}

/* Mouse drag-to-pan on the mobile polaroid carousel (desktop testing). */
@media (max-width: 768px) {
  .gallery-section .polaroid-grid { cursor: grab; }
  .gallery-section .polaroid-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Round prev/next buttons under the carousel. Shown by app.js only when the
   deck actually overflows; [hidden] keeps them out of the desktop grid. */
.gallery-arrows {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.gallery-arrows[hidden] { display: none !important; }
.gallery-arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(216, 180, 254, .35);
  border-bottom-width: 5px;
  border-bottom-color: var(--clr-amethyst-deep);
  background: linear-gradient(180deg, rgba(38, 24, 60, .95), rgba(18, 11, 30, .95));
  color: var(--clr-lavender);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.gallery-arrow svg { width: 22px; height: 22px; }
.gallery-arrow:hover {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 0 16px rgba(192, 132, 252, .45);
}
.gallery-arrow:active { transform: translateY(3px); }
.gallery-arrow:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.gallery-arrow:focus-visible { outline: 3px solid var(--clr-lavender); outline-offset: 4px; }

@media (min-width: 769px) {
  .hero-section { padding-top: 38px; }
  .milestone-card { padding: 0 24px 24px; }
  .milestone-header { margin-inline: 32px; }
  .letter-paper { padding: 42px; }
  .note-card { padding-inline: 28px; }
  .llb-card { padding: 40px; }
}
@media (max-width: 430px) {
  .hero-title { font-size: 1.85rem; }
  .section-title { font-size: 1.85rem; }
  .hero-quote-card { max-width: 100%; padding: 18px 22px; }
  .note-card-nav { gap: 6px; }
  .nav-arrow, .nav-random { padding-inline: 7px; font-size: .82rem; }
  .letter-paper { padding: 30px 16px 24px; }
  .polaroid-card .polaroid-sticker { font-size: .8rem; }
}
@media (max-height: 580px) {
  .present-stage:not(.unwrapped) { padding-block: 12px; }
  .present-top-badge { margin-bottom: 8px; padding-block: 6px; }
  .present-tap-text { margin-top: 10px; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-enter-site, .nav-arrow, .nav-random { transition: none; }
  .btn:active, .btn-enter-site:active, .nav-arrow:active, .nav-random:active { transform: none !important; }
  .hero-actions .btn {
    animation: none;
    box-shadow: var(--garden-button-shadow), 0 0 18px rgba(192, 132, 252, .4);
  }
}