/* Countdowns, events, and the Read-Alouds player (countdown.js runs them). */

/* ---------- the clock: four little tombstones with creepy numbers ---------- */
.countdown { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 1rem auto; }
.cd-lead { font-family: var(--spooky); font-size: clamp(1.15rem, 3.6vw, 1.5rem); color: var(--gold); letter-spacing: .02em; text-align: center; }
.cd-clock { display: flex; gap: clamp(.35rem, 1.6vw, .7rem); justify-content: center; }
.cd-clock[hidden] { display: none; }
.cd-unit {
  display: flex; flex-direction: column; align-items: center; min-width: clamp(58px, 17vw, 82px); padding: .55rem .3rem .45rem;
  border-radius: 40px 40px 8px 8px; /* tombstone */
  background: var(--grain), linear-gradient(180deg, #2b2650, #15102e); border: 2px solid rgba(185, 211, 240, .28);
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .45);
}
.cd-unit b {
  font-family: var(--creep); font-weight: 400; font-size: clamp(2rem, 8vw, 3rem); line-height: 1; letter-spacing: .04em; color: var(--lime);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 16px rgba(198, 244, 50, .45); font-variant-numeric: tabular-nums;
}
.cd-unit small { font-family: var(--type); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(.62rem, 2vw, .75rem); color: var(--muted); margin-top: .2rem; }
.countdown-big .cd-unit { min-width: clamp(64px, 19vw, 104px); }
.countdown-big .cd-unit b { font-size: clamp(2.3rem, 9.5vw, 3.8rem); }
.countdown-big .cd-lead { font-family: var(--creep); font-size: clamp(1.7rem, 6vw, 2.6rem); text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 22px rgba(226, 168, 69, .4); }

/* the last 10 seconds: the numbers flicker like a candle in a draft */
.cd-candle .cd-unit { border-color: rgba(255, 170, 60, .7); animation: candle-box 1.7s steps(1, end) infinite; }
.cd-candle .cd-unit b { color: #ffcf6a; animation: candle 1.3s linear infinite; }
.cd-candle .cd-unit:nth-child(2) b { animation-delay: -.4s; }
.cd-candle .cd-unit:nth-child(3) b { animation-delay: -.9s; }
.cd-candle .cd-unit:nth-child(4) b { animation-delay: -.2s; animation-duration: .9s; }
.cd-candle .cd-lead { animation: candle 1.6s linear infinite; }
@keyframes candle {
  0%, 100% { opacity: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 10px #ff9a2e, 0 0 26px rgba(255, 120, 30, .8); }
  9% { opacity: .55; text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 4px #ff9a2e; }
  14% { opacity: .95; }
  31% { opacity: .7; text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 14px #ffb347, 0 0 34px rgba(255, 140, 40, .9); }
  38% { opacity: 1; }
  57% { opacity: .4; text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 3px #ff9a2e; }
  61% { opacity: .9; }
  80% { opacity: .75; transform: translateY(-1px); }
  86% { opacity: 1; transform: none; }
}
@keyframes candle-box { 0%, 100% { box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 140, 40, .55); } 40% { box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .45), 0 0 10px rgba(255, 140, 40, .25); } 70% { box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .45), 0 0 34px rgba(255, 160, 60, .7); } }
@media (prefers-reduced-motion: reduce) {
  .cd-candle .cd-unit, .cd-candle .cd-unit b, .cd-candle .cd-lead { animation: none; }
  .cd-candle .cd-unit b { text-shadow: 0 0 12px #ff9a2e; }
}
.cd-done .cd-clock { display: none; }
.cd-done .cd-lead { font-family: var(--creep); font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--lime); animation: cd-pop .6s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes cd-pop { from { transform: scale(.6); opacity: 0; } }
.cd-finished .cd-lead { font-family: var(--spooky); font-size: clamp(1.1rem, 3.6vw, 1.4rem); }

/* ---------- "Add to My Calendar" ---------- */
.cal-menu { position: relative; display: inline-block; }
.cal-menu summary { list-style: none; cursor: pointer; }
.cal-menu summary::-webkit-details-marker { display: none; }
.cal-choices { position: absolute; z-index: 20; left: 50%; top: calc(100% + .4rem); transform: translateX(-50%); min-width: 240px; display: grid; gap: .25rem; padding: .45rem;
  background: var(--grain), #1d1640; border: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.cal-choices a { display: block; padding: .7rem .9rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 700; text-align: left; }
.cal-choices a:hover, .cal-choices a:focus-visible { background: rgba(226, 168, 69, .18); color: var(--gold); }

/* ---------- Events page ---------- */
.event-list { display: grid; gap: clamp(1.4rem, 4vw, 2.2rem); }
.event-list > [hidden] { display: none; }
.event-list .event-card { width: 100%; }
.event-time { display: block; margin-top: .25rem; color: var(--muted); }
.event-card .btn-row { margin-top: .8rem; }
.events-empty { margin-top: 2.5rem; }
.events-empty[hidden] { display: none; }

/* ---------- home page banners ---------- */
.event-banner, .chapter-banner { margin-bottom: 1.4rem; }
.event-banner[hidden], .chapter-banner[hidden] { display: none; }
.banner-text { flex: 1 1 300px; }
.banner-side { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 0 auto; }
.banner-side .countdown { margin: 0; }
.banner-side .cd-lead { font-size: 1.05rem; }
.event-when { margin-top: .5rem !important; font-family: var(--type); letter-spacing: .08em; color: var(--muted); }
.event-when:empty { display: none; }
.chapter-banner { border-color: var(--lime); }
.chapter-banner h3 { color: var(--lime); }
@media (max-width: 640px) { .banner-text { text-align: center; } }

/* ---------- Read-Alouds: player, next-chapter countdown, episode list ---------- */
.read-aloud .wrap { max-width: 900px; }
.ra-player { margin: 0 auto 1.6rem; }
.ra-player[hidden] { display: none; }
.ra-heading { text-align: center; margin: 0 0 .9rem; font-family: var(--spooky); font-size: 1.5rem; color: var(--gold); }
.ra-heading .stamp-inline { font-size: 1rem; margin-right: .4rem; }
.ra-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 3px solid rgba(226, 168, 69, .7); box-shadow: 0 20px 44px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 140, 40, .18); background: #000; }
.ra-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ra-poster { position: absolute; inset: 0; width: 100%; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, rgba(10, 6, 30, .15), rgba(10, 6, 30, .75)), url("/img/fireside.webp") center / cover; font: inherit; text-align: center; padding: 1rem; }
.ra-play { width: clamp(64px, 16vw, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(1.8rem, 5vw, 2.6rem); padding-left: .25em;
  color: var(--night-1); background: linear-gradient(180deg, #f2c776, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 0 6px rgba(0, 0, 0, .35), 0 0 34px rgba(255, 190, 70, .8); transition: transform .2s; }
.ra-poster:hover .ra-play, .ra-poster:focus-visible .ra-play { transform: scale(1.08); }
.ra-poster-label { font-family: var(--creep); font-size: clamp(1.6rem, 5.5vw, 2.6rem); letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0, 0, 0, .8), 0 0 18px rgba(0, 0, 0, .8); }
.ra-wait { cursor: default; }
.ra-wait small { font-size: 1.05rem; text-shadow: 0 2px 6px #000; }
.ra-next { text-align: center; margin: 0 auto clamp(2rem, 6vw, 3rem); padding: clamp(1.2rem, 4vw, 2rem) 1rem; border-radius: var(--radius); border: 2px dashed rgba(198, 244, 50, .45);
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 140, 40, .16), transparent 60%), rgba(10, 6, 30, .35); }
.ra-next .countdown { margin: 0 auto; }
.next-when { margin: .7rem 0 0; font-family: var(--type); letter-spacing: .08em; color: var(--muted); }
.next-when:empty { display: none; }
.ra-list-title { text-align: center; font-size: clamp(2rem, 6vw, 2.8rem); color: var(--gold); margin-bottom: 1rem; }
.ra-episodes { list-style: none; margin: 0 auto 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .8rem; }
.episode { position: relative; }
.episode button, .episode.locked { width: 100%; min-height: 72px; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: 6px 14px 8px 8px; text-align: left; font: inherit; }
.episode button { cursor: pointer; color: var(--ink); background: var(--grain), linear-gradient(180deg, #2b2650, #1a1438); border: 2px solid rgba(226, 168, 69, .55); transition: transform .15s, border-color .15s, box-shadow .15s; }
.episode button:hover, .episode button:focus-visible { transform: translateY(-3px) rotate(-.5deg); border-color: var(--gold); box-shadow: 0 0 20px rgba(226, 168, 69, .35); }
.episode.on button { border-color: var(--lime); box-shadow: 0 0 22px rgba(198, 244, 50, .35); }
.ep-icon { font-size: 1.5rem; width: 1.8rem; text-align: center; flex: none; }
.ep-text { display: flex; flex-direction: column; }
.ep-text b { font-family: var(--spooky); font-size: 1.3rem; color: var(--gold); }
.episode.on .ep-text b { color: var(--lime); }
.ep-text small { font-family: var(--type); letter-spacing: .06em; color: var(--muted); font-size: .85rem; }
/* upcoming chapters: a locked manila case file */
.episode.locked { color: var(--paper-ink); background: var(--grain), linear-gradient(170deg, #d9c595, #bfa66e); border: 2px solid rgba(90, 67, 32, .4); overflow: hidden; filter: saturate(.8); }
.episode.locked .ep-text b { color: #4a3a20; }
.episode.locked .ep-text small { color: #5c4a2b; }
.ep-stamp { position: absolute; right: .55rem; top: .5rem; transform: rotate(-8deg); font-family: var(--type); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem;
  color: rgba(184, 50, 43, .8); border: 2px solid currentColor; border-radius: 4px; padding: .1rem .45rem 0; }
.ra-memo { max-width: 640px; margin: 0 auto 1.2rem; }