#hud { position: absolute; inset: 0; pointer-events: none; }

/* ---- year / place pill ---- */
#year-pill {
  position: absolute; top: calc(var(--u) * 2.5); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: calc(var(--u) * .9) calc(var(--u) * 3.2); min-width: calc(var(--u) * 15);
  background: rgba(255, 255, 255, .62); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(40, 20, 50, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: opacity .6s; text-align: center; opacity: 0;
}
#year-main { font: 600 clamp(16px, calc(var(--u) * 3), 34px)/1.1 'Fredoka', sans-serif; letter-spacing: .04em; color: #3b2440; }
#year-sub { font: 500 clamp(11px, calc(var(--u) * 1.55), 16px)/1.2 'Fredoka', sans-serif; color: #6a4a6e; }
#year-sub:empty { display: none; }

/* ---- captions ---- */
#caption {
  position: absolute; left: 50%; top: calc(var(--u) * 12.5); transform: translateX(-50%);
  width: min(92vw, 780px); text-align: center; opacity: 0;
}
#caption.show { animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 16px); filter: blur(4px); } to { opacity: 1; transform: translate(-50%, 0); filter: blur(0); } }
#cap-title {
  margin: 0; font: italic 700 clamp(26px, calc(var(--u) * 5.2), 60px)/1.12 'Playfair Display', Georgia, serif;
  color: #fff; letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(90, 40, 80, .25), 0 6px 26px rgba(20, 8, 30, .45);
}
#cap-text {
  margin: calc(var(--u) * 1) auto 0; max-width: 620px;
  font: 500 clamp(14px, calc(var(--u) * 2), 21px)/1.45 'Fredoka', sans-serif;
  color: #fff; text-shadow: 0 2px 12px rgba(20, 8, 30, .55);
}
#caption.big #cap-title { font-size: clamp(34px, calc(var(--u) * 7.5), 88px); }
/* soft dark halo behind the text so it reads on any sky */
#caption::before {
  content: ""; position: absolute; inset: -22px -40px; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, rgba(40, 18, 60, .42), rgba(40, 18, 60, 0));
}

/* ---- chapter title card ---- */
#chapter-card {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 4) calc(var(--u) * 7); opacity: 0; text-align: center;
  background: radial-gradient(closest-side, rgba(20, 10, 34, .55), rgba(20, 10, 34, 0));
}
#card-num { font: 600 clamp(12px, calc(var(--u) * 1.7), 18px)/1 'Fredoka', sans-serif; letter-spacing: .42em; text-transform: uppercase; color: #ffd9a8; }
.card-rule { width: calc(var(--u) * 14); height: 1px; background: linear-gradient(90deg, transparent, #ffd9a8, transparent); }
#card-title { margin: 0; font: italic 700 clamp(34px, calc(var(--u) * 8), 96px)/1.05 'Playfair Display', Georgia, serif; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .5); }

/* ---- scroll hint ---- */
#hint {
  position: absolute; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%);
  padding: .55em 1.3em; border-radius: 999px; color: #fff; letter-spacing: .08em;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25);
  font: 500 clamp(13px, calc(var(--u) * 1.8), 18px)/1 'Fredoka', sans-serif; transition: opacity .6s;
}
#hint span { display: inline-block; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* ---- progress bar with a tick per chapter ---- */
#bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .22); }
#bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffb27a, #ff5c8a); box-shadow: 0 0 10px rgba(255, 92, 138, .6); }
#bar-heart { position: absolute; bottom: 3px; font-size: 15px; transform: translateX(-50%); line-height: 1; }
.bar-tick { position: absolute; top: -3px; width: 2px; height: 10px; margin-left: -1px; border-radius: 2px; background: rgba(255, 255, 255, .7); }

/* ---- sound button ---- */
#sound {
  position: absolute; right: calc(var(--u) * 2.4); bottom: calc(var(--u) * 2.6); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 20px; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2); transition: transform .2s, background .2s;
}
#sound:hover { transform: scale(1.08); background: rgba(255, 255, 255, .32); }
#sound .off-icon { display: none; }
#sound.off .on { display: none; }
#sound.off .off-icon { display: inline; opacity: .55; text-decoration: line-through; }

/* ---- start screen ---- */
#start {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #1a1238 0%, #05060f 70%); transition: opacity 1.1s ease, visibility 1.1s;
}
#start.gone { opacity: 0; visibility: hidden; }
.start-inner { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; padding: 24px; }
.start-kicker { margin: 0; font: 600 14px/1 'Fredoka', sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #ffd9a8; opacity: .85; }
.start-name { margin: 14px 0 6px; font: italic 700 clamp(54px, 12vw, 124px)/1 'Playfair Display', Georgia, serif; text-shadow: 0 8px 40px rgba(255, 120, 80, .35); }
.start-sub { margin: 0 0 36px; font: 600 clamp(22px, 4vw, 34px)/1.2 'Dancing Script', cursive; color: #ffc9a8; }
#begin {
  font: 600 18px/1 'Fredoka', sans-serif; letter-spacing: .06em; color: #3b1a2e; cursor: pointer;
  padding: 16px 38px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ffd9a8, #ff8fb1);
  box-shadow: 0 10px 30px rgba(255, 120, 140, .4); transition: transform .2s, box-shadow .2s;
}
#begin:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255, 120, 140, .55); }
#begin-quiet { margin-top: 16px; font: 500 14px/1 'Fredoka', sans-serif; color: rgba(255, 255, 255, .6); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.start-tip { margin: 34px 0 0; font: 500 13px/1.4 'Fredoka', sans-serif; color: rgba(255, 255, 255, .45); letter-spacing: .04em; }