/* Darshil & Suchi - Netflix-style kankotri. Mobile first; on wide screens the
   whole thing sits in a phone-width column. */

:root {
  --red: #e50914;
  --maroon: #6e0a0e;
  --gold: #f0d49a;
  --gold-2: #e2b25e;
  --cream: #f6e7c8;
  --muted: #a8a8a8;
  --ui: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --brush: 'Satisfy', 'Brush Script MT', cursive;
  --guj: 'Noto Serif Gujarati', serif;
  --app-w: min(100vw, 480px);
  --app-l: max(0px, calc((100vw - 480px) / 2));
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { background: #000; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
body.in-intro, body.playing { overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }

html, body { overflow-x: hidden; }
#app { position: relative; max-width: 480px; min-height: 100vh; margin: 0 auto; background: #000; overflow-x: clip; }
@media (min-width: 481px) {
  body { background: radial-gradient(70% 60% at 50% 30%, #1a0204, #000 70%); }
  #app { box-shadow: 0 0 80px rgba(0, 0, 0, 0.9); }
}

.screen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--app-l);
  width: var(--app-w);
  z-index: 50;
  background: #000;
  overflow: hidden;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.12s ease, opacity 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; }
.btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.btn-white { background: #fff; color: #000; }
.btn-red { background: var(--red); color: #fff; }
.btn-ghost { background: rgba(109, 109, 110, 0.55); color: #fff; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 13.5px; }
.btn-sm svg { width: 18px; height: 18px; }
.btn-block { display: flex; width: 100%; height: 50px; font-size: 16px; margin-top: 10px; }
.link { background: none; border: 0; color: #9a9a9a; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; cursor: pointer; padding: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pill svg { width: 16px; height: 16px; fill: currentColor; }
.pill--white { background: #fff; color: #000; height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- the DS monogram ---------- */
.ds-logo { display: block; overflow: visible; }
.ds-logo--gate { height: 150px; width: auto; margin: 0 auto 10px; filter: drop-shadow(0 6px 24px rgba(229, 9, 20, 0.4)); }
.ds-logo--mark { height: 15px; width: auto; }
@media (max-height: 640px) { .ds-logo--gate { height: 110px; } }

/* ---------- 0. gate ---------- */
#gate {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(120% 70% at 50% 40%, #2b0306 0%, #070000 62%, #000 100%);
}
.gate-in { padding: 24px; }
.gate-kicker { margin: 0; color: var(--red); font-weight: 800; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; }
.gate-title { margin: 8px 0 6px; font-family: var(--brush); font-weight: 400; font-size: 54px; line-height: 1.05; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); }
.gate-title span { font-size: 0.6em; color: #ddd; }
.gate-sub { margin: 0 0 26px; color: #bdbdbd; font-size: 14px; }
.gate-sound { margin: 14px 0 2px; color: #7d7d7d; font-size: 12px; }

/* ---------- 1. intro ---------- */
#intro { background: #000; }
.intro-logo { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; }
.intro-logo .ds-logo { width: min(68vw, 300px); height: auto; will-change: transform, opacity; }
.intro-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vw;
  max-width: 560px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(229, 9, 20, 0.33) 0%, rgba(229, 9, 20, 0.08) 38%, transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.intro-streaks { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 2. You are watching ---------- */
#profiles { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 24px; text-align: center; }
.pf-title { margin: 0; font-weight: 500; font-size: 26px; letter-spacing: 0.01em; }
.pf-list { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pf { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; }
.pf img { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color 0.15s; }
.pf:focus-visible img { outline-color: #fff; }
@media (hover: hover) { .pf:hover img { outline-color: #fff; } }
.pf:focus { outline: none; }
.pf-name { font-size: 21px; }
.pf-line { max-width: 270px; color: #a9a9a9; font-size: 13px; line-height: 1.35; }
.pf-hint { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #6f6f6f; font-size: 12px; }
.pf-timer { display: block; width: 96px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.14); }
.pf-timer b { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-height: 690px) {
  #profiles { gap: 20px; }
  .pf-list { gap: 18px; }
  .pf img { width: 96px; height: 96px; }
}

/* ---------- 3. browse ---------- */
#browse {
  position: relative;
  min-height: 100vh;
  padding-bottom: calc(64px + var(--safe-b));
  background: linear-gradient(180deg, #870c10 0%, #5e080b 22%, #330506 46%, #141414 72%, #0b0b0b 100%);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(var(--safe-t) + 12px) 16px 10px;
  transition: background 0.25s, box-shadow 0.25s;
}
.topbar.solid { background: rgba(48, 4, 6, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.for { margin: 0; font-size: 22px; font-size: clamp(16px, 5.6vw, 22px); font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.icons { display: flex; flex: none; align-items: center; gap: 4px; }
@media (max-width: 360px) { .icons { gap: 0; } .icon-btn { width: 36px; } .icon-btn svg { width: 23px; height: 23px; } }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; }
.icon-btn svg { width: 25px; height: 25px; fill: currentColor; }
.icon-btn .i-off { display: none; }
.icon-btn.is-muted .i-on { display: none; }
.icon-btn.is-muted .i-off { display: block; }
.chips { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  white-space: nowrap;
}
.chip svg { width: 18px; height: 18px; fill: currentColor; margin-right: -6px; }

.hero-wrap { padding: 8px 16px 0; }
.hero {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #2a0506;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.9) 100%); }
.hero-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 18px; text-align: center; }
.series { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.34em; color: #f2f2f2; }
.series-mark { display: inline-block; }
.hero-title { margin: 0; font-family: var(--brush); font-weight: 400; font-size: clamp(40px, 12.4vw, 56px); line-height: 1.12; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.7); }
.hero-title .and-tag {
  display: inline-block;
  margin: 0 0.22em;
  padding: 0.05em 0.22em 0.12em;
  font-size: 0.34em;
  line-height: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  vertical-align: 0.5em;
}
.hero-sub { margin: 0 0 12px; font-size: 13.5px; color: #ececec; }
.hero-tags { margin: 0 0 14px; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.hero-tags i { font-style: normal; margin: 0 0.45em; color: #cfcfcf; }
.btn-play { width: min(260px, 78%); height: 44px; font-size: 18px; border-radius: 6px; }

.row { margin-top: 20px; }
.row-title { margin: 0 0 10px; padding: 0 16px; font-size: 17.5px; font-weight: 600; }
.row-scroller {
  display: flex;
  gap: 8px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.row-scroller::-webkit-scrollbar { display: none; }
.card {
  position: relative;
  flex: 0 0 auto;
  width: min(31vw, 136px);
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #222;
  cursor: pointer;
  scroll-snap-align: start;
}
.card img { width: 100%; height: 100%; object-fit: cover; }
.card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.82) 100%); }
.card-info { position: absolute; left: 8px; right: 8px; bottom: 9px; display: flex; flex-direction: column; text-align: left; }
.card-info b { font-size: 12.5px; line-height: 1.2; }
.card-info small { font-size: 10.5px; color: #d8d8d8; margin-top: 1px; }
.card-play {
  position: absolute;
  left: 50%;
  top: 44%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(118, 10, 14, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.card-play svg { width: 22px; height: 22px; fill: #ffd8d8; margin-left: 3px; }
.card-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.22); }
.card-bar i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; }

.details { padding: 22px 16px 4px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: #d6d6d6; }
.match { color: #46d369; font-weight: 700; }
.badge { padding: 0 5px; border: 1px solid #8c8c8c; border-radius: 3px; font-size: 11.5px; line-height: 17px; }
.top10 { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; font-size: 15.5px; font-weight: 700; }
.t10 { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 26px; height: 28px; background: var(--red); border-radius: 3px; font-size: 7px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.t10 b { font-size: 13px; letter-spacing: 0; }
.synopsis { margin: 0 0 10px; font-size: 14.5px; line-height: 1.48; color: #ebebeb; }
.credits { margin: 0 0 3px; font-size: 13px; color: #a3a3a3; }
.credits b { font-weight: 600; color: #bdbdbd; }
.sec-title { display: flex; align-items: center; gap: 10px; margin: 26px 0 8px; font-size: 20px; font-weight: 700; }
.sec-title span { padding: 3px 9px; border: 1px solid #5a5a5a; border-radius: 4px; font-size: 12.5px; font-weight: 500; color: #c4c4c4; }
.sec-sub { margin: -2px 0 14px; font-size: 13.5px; color: #a3a3a3; }
.ep-list { list-style: none; margin: 0; padding: 0; }
.ep-item { padding: 14px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ep-row { display: flex; align-items: center; gap: 12px; }
.ep-thumb { position: relative; flex: none; width: 132px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #222; cursor: pointer; }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.mini-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; transform: translate(-50%, -50%); border: 1.5px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.mini-play svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
.ep-head b { display: block; margin-bottom: 4px; font-size: 15.5px; }
.ep-head span { font-size: 12.5px; color: #b3b3b3; }
.ep-desc { margin: 10px 0 8px; font-size: 13.5px; line-height: 1.45; color: #d4d4d4; }
.ep-sched { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.ep-sched li { display: flex; justify-content: space-between; gap: 12px; padding-left: 9px; border-left: 2px solid var(--red); font-size: 13px; color: #d4d4d4; }
.ep-sched b { color: #fff; }
.ep-where { margin: 0; font-size: 12.5px; line-height: 1.45; color: #a9a9a9; }
.ep-where b { color: #e6e6e6; font-weight: 600; }
.ep-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.coming {
  margin: 26px 16px 8px;
  padding: 20px 16px;
  border-radius: 12px;
  text-align: center;
  background: radial-gradient(90% 120% at 50% 0%, rgba(229, 9, 20, 0.28), rgba(229, 9, 20, 0) 70%), #161616;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.coming-kicker { margin: 0; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; }
.coming-title { margin: 6px 0 16px; font-size: 17px; font-weight: 600; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.countdown div { padding: 10px 0 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); }
.countdown b { display: block; font-size: 25px; font-variant-numeric: tabular-nums; }
.countdown small { display: block; margin-top: 2px; font-size: 10px; letter-spacing: 0.14em; color: #9d9d9d; text-transform: uppercase; }
.cd-live { grid-column: 1 / -1; margin: 0; font-weight: 700; color: var(--gold); }

.venues { padding: 6px 0 4px; }
.venues .sec-title, .venues .sec-sub { padding: 0 16px; }
.venue-scroller { display: flex; gap: 12px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.venue-scroller::-webkit-scrollbar { display: none; }
.venue { flex: 0 0 86%; max-width: 384px; overflow: hidden; border-radius: 12px; background: #1b1b1b; border: 1px solid rgba(255, 255, 255, 0.06); scroll-snap-align: center; }
.venue-map { position: relative; height: 176px; background: #262626; }
.venue-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.4s; }
.venue-map.ready iframe { opacity: 1; }
.map-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #777; font-size: 12px; }
.map-ph svg { width: 26px; height: 26px; fill: var(--red); }
.venue-body { padding: 14px 15px 16px; }
.venue-ev { margin: 0; color: #ff4b54; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.venue-body h4 { margin: 5px 0 4px; font-size: 19px; }
.venue-addr { margin: 0; font-size: 13px; line-height: 1.42; color: #c6c6c6; }
.venue-time { margin: 6px 0 14px; font-size: 13px; color: #fff; }

.rsvp { padding: 6px 16px 8px; }
.rsvp-form { padding: 18px 16px 16px; border-radius: 12px; background: #161616; border: 1px solid rgba(255, 255, 255, 0.06); }
.f-row { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.f-label { display: block; margin: 0 0 8px; padding: 0; font-size: 13.5px; font-weight: 600; color: #e9e9e9; }
.f-label span { font-weight: 400; color: #8d8d8d; }
.rsvp-form input[type='text'], .rsvp-form input[type='tel'], .rsvp-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  background: #2b2b2b;
  color: #fff;
  font: 16px/1.35 var(--ui);
  outline: none;
  transition: border-color 0.15s;
}
.rsvp-form textarea { resize: vertical; min-height: 88px; }
.rsvp-form input:focus, .rsvp-form textarea:focus { border-color: #fff; }
.rsvp-form ::placeholder { color: #7a7a7a; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg--3 { grid-template-columns: repeat(3, 1fr); }
.seg label, .chips-pick label { position: relative; cursor: pointer; }
.seg input, .chips-pick input { position: absolute; opacity: 0; pointer-events: none; }
.seg span, .chips-pick span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 6px;
  border: 1px solid #484848;
  border-radius: 8px;
  background: #262626;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.seg input:checked + span { background: #fff; border-color: #fff; color: #000; }
.chips-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips-pick b { font-size: 13px; }
.chips-pick small { margin-top: 3px; font-size: 11px; font-weight: 500; color: #9a9a9a; }
.chips-pick input:checked + span { background: var(--red); border-color: var(--red); }
.chips-pick input:checked + span small { color: rgba(255, 255, 255, 0.88); }
.seg input:focus-visible + span, .chips-pick input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid #484848; border-radius: 999px; background: #262626; }
.stepper button { width: 46px; height: 44px; border: 0; background: none; font-size: 22px; cursor: pointer; }
.stepper output { min-width: 34px; text-align: center; font-size: 18px; font-weight: 700; }
.f-err { margin: 7px 0 0; color: #ff7a7a; font-size: 12.5px; line-height: 1.35; }
.f-err:empty { display: none; }
.f-err--form { text-align: center; }
.f-count { margin: 5px 0 0; text-align: right; font-size: 11.5px; color: #8d8d8d; }
.f-count:empty { display: none; }
.f-count.over { color: #ff7a7a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rsvp-done { padding: 26px 18px 22px; border-radius: 12px; background: #161616; text-align: center; border: 1px solid rgba(255, 255, 255, 0.06); }
.rsvp-done h4 { margin: 0 0 6px; font-size: 19px; }
.rsvp-done p { margin: 0 0 6px; color: #d0d0d0; font-size: 14px; }
.rsvp-done .done-soft { color: #9a9a9a; margin-bottom: 16px; }
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.done-badge { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: #46d369; color: #062b10; font-size: 28px; font-weight: 800; }
.done-badge--soft { background: var(--red); color: #fff; }

.note {
  margin: 20px 16px 10px;
  padding: 20px 18px;
  border-radius: 12px;
  text-align: center;
  background: radial-gradient(100% 120% at 50% 0%, rgba(226, 178, 94, 0.2), rgba(226, 178, 94, 0) 70%), #161616;
  border: 1px solid rgba(240, 212, 154, 0.18);
}
.note-title { margin: 0 0 4px; font-family: var(--script); font-size: 40px; line-height: 1.15; color: var(--gold); }
.note p { margin: 0; color: #d8d8d8; font-size: 14px; line-height: 1.45; }
.foot { padding: 18px 16px 26px; text-align: center; color: #8a8a8a; font-size: 12.5px; }
.foot p { margin: 0 0 4px; }
.foot .foot-tag { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: 0.01em; }

.tabbar {
  position: fixed;
  left: var(--app-l);
  width: var(--app-w);
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 7px 0 calc(7px + var(--safe-b));
  background: rgba(12, 12, 12, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #8a8a8a; font-size: 10.5px; text-decoration: none; }
.tabbar svg { width: 24px; height: 24px; fill: currentColor; }
.tabbar img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; opacity: 0.75; }
.tabbar a.on { color: #fff; }
.tabbar a.on img { opacity: 1; outline: 1.5px solid #fff; outline-offset: 1px; }
body.playing .tabbar { visibility: hidden; }

/* ---------- sheet + toast ---------- */
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0); transition: background 0.25s; }
.sheet.open { background: rgba(0, 0, 0, 0.6); }
.sheet-card {
  position: absolute;
  left: var(--app-l);
  width: var(--app-w);
  bottom: 0;
  padding: 22px 18px calc(20px + var(--safe-b));
  border-radius: 16px 16px 0 0;
  background: #1f1f1f;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet.open .sheet-card { transform: translateY(0); }
.sheet-card h4 { margin: 0 0 6px; font-size: 18px; padding-right: 30px; }
.sheet-sub { margin: 0 0 10px; color: #a9a9a9; font-size: 13px; line-height: 1.5; }
.sheet-x { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border: 0; background: none; color: #bbb; font-size: 28px; cursor: pointer; }
.toast {
  position: fixed;
  left: calc(var(--app-l) + 16px);
  width: calc(var(--app-w) - 32px);
  bottom: calc(78px + var(--safe-b));
  z-index: 90;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- swipe-up hint (js/hint.js) ---------- */
.scroll-hint {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--app-l);
  width: var(--app-w);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: calc(var(--safe-b) + 104px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.scroll-hint.on { opacity: 1; }
.scroll-hint.on .sh-text, .scroll-hint.on .sh-sub { animation: sh-rise 0.5s 0.15s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
.scroll-hint.on .sh-sub { animation-delay: 0.25s; }
@keyframes sh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sh-gesture { position: relative; width: 70px; height: 132px; margin-bottom: 14px; }
/* the finger starts at the bottom and slides up; the trail follows the fingertip */
.sh-hand { position: absolute; left: 4px; bottom: 0; width: 62px; height: 62px; fill: #fff; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); animation: sh-swipe 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.sh-trail { position: absolute; left: 32px; bottom: 42px; width: 6px; height: 72px; margin-left: -3px; border-radius: 3px; background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75)); transform-origin: 50% 100%; animation: sh-trail 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes sh-swipe {
  0% { transform: translateY(0) scale(1.12); opacity: 0; }
  12%, 18% { transform: translateY(0) scale(1); opacity: 1; }
  66% { transform: translateY(-72px) scale(1); opacity: 1; }
  82%, 100% { transform: translateY(-80px) scale(0.96); opacity: 0; }
}
@keyframes sh-trail {
  0%, 18% { transform: scaleY(0); opacity: 0.9; }
  66% { transform: scaleY(1); opacity: 0.9; }
  86%, 100% { transform: scaleY(1); opacity: 0; }
}
.sh-text { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.01em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.sh-sub { margin: 6px 0 0; font-size: 14.5px; color: #d6d6d6; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
@media (prefers-reduced-motion: reduce) {
  .sh-hand { animation: none; transform: translateY(-36px); }
  .sh-trail { animation: none; transform: scaleY(0.5); opacity: 0.6; }
  .scroll-hint.on .sh-text, .scroll-hint.on .sh-sub { animation: none; }
}

/* ---------- player ---------- */
.player { position: fixed; top: 0; bottom: 0; left: var(--app-l); width: var(--app-w); z-index: 60; }
.pl-frame { position: absolute; overflow: hidden; background: #000; will-change: left, top, width, height; }
.pl-stage { position: absolute; left: 0; top: 0; width: var(--pw, 100%); height: var(--ph, 100%); }
.pl-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pl-bigplay {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: rgba(112, 8, 12, 0.95);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.pl-bigplay svg { width: 40px; height: 40px; fill: #ffe1e1; margin-left: 5px; }
.pl-ui { position: absolute; inset: 0; pointer-events: none; }
.pl-ui > * { pointer-events: auto; }
.pl-bars { position: absolute; top: calc(var(--safe-t) + 8px); left: 10px; right: 10px; display: flex; gap: 4px; pointer-events: none; }
.pl-bars i { flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.28); }
.pl-bars b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.pl-top { position: absolute; top: calc(var(--safe-t) + 16px); left: 14px; right: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.pl-title { margin: 0; font-size: 13px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.pl-close { pointer-events: auto; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.35); cursor: pointer; }
.pl-close svg { width: 22px; height: 22px; fill: #fff; }
.pl-bottom { position: absolute; left: 14px; right: 14px; bottom: calc(var(--safe-b) + 18px); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.pl-bottom > * { pointer-events: auto; }
.pl-pause { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.38); cursor: pointer; }
.pl-pause svg { width: 22px; height: 22px; fill: #fff; }
.pl-pause .i-play, .pl-pause.is-paused .i-pause { display: none; }
.pl-pause.is-paused .i-play { display: block; }
.pl-next { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.92); color: #000; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pl-next svg { width: 18px; height: 18px; fill: #000; }
.pl-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 4px solid rgba(229, 9, 20, 0.22);
  border-top-color: var(--red);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: spin 0.8s linear infinite;
  transition: opacity 0.2s;
}
.pl-spinner.on { opacity: 1; }
/* pause / next only respond while an episode is actually running; close always works */
.player:not(.live) .pl-pause, .player:not(.live) .pl-next { pointer-events: none; }
.player.loading .pl-ui { opacity: 1 !important; }
.player.loading .pl-bottom, .player.loading .pl-bars { visibility: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- episodes (shared) ---------- */
.ep { position: absolute; inset: 0; overflow: hidden; background: #000; container-type: size; }
.ep .fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fit { transform: scale(var(--fit, 1)); transform-origin: 50% 50%; }
.ep p, .ep h3 { margin: 0; }
/* a 2:3 painting that covers the screen */
.cover {
  --bw: max(var(--pw), calc(var(--ph) * 2 / 3));
  --bh: max(var(--ph), calc(var(--pw) * 1.5));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bw);
  height: var(--bh);
  margin-left: calc(var(--bw) / -2);
  margin-top: calc(var(--bh) / -2);
  container-type: inline-size;
}
.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- E1 Grah Shanti ---------- */
.gs-sky { --sky: 0; position: absolute; inset: 0; background: linear-gradient(180deg, #05060f 0%, #09092a 70%, #0a0a27 100%); }
.gs-sky::after { content: ''; position: absolute; inset: 0; opacity: var(--sky); background: linear-gradient(180deg, #070000 0%, #150101 70%, #170101 100%); }
.gs-art {
  --aw: min(calc(var(--pw) * 1.12), calc(var(--ph) * 2 / 3));
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--aw);
  aspect-ratio: 2 / 3;
  margin-left: calc(var(--aw) / -2);
  transform-origin: 50% 84%;
  container-type: inline-size;
}
.gs-art > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-moon { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 48, 0.55), rgba(8, 10, 48, 0.3) 70%, rgba(8, 10, 48, 0.42)); mix-blend-mode: multiply; pointer-events: none; }
.gs-lamp {
  position: absolute;
  width: 7%;
  aspect-ratio: 1;
  margin: -3.5% 0 0 -3.5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 150, 0.95) 0%, rgba(255, 160, 50, 0.5) 30%, rgba(255, 120, 20, 0) 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: lampflick 2.2s ease-in-out infinite alternate;
}
.gs-lamp:nth-child(3n) { animation-duration: 1.7s; animation-delay: -0.6s; }
.gs-lamp:nth-child(3n + 1) { animation-duration: 2.6s; animation-delay: -1.3s; }
@keyframes lampflick { 0% { filter: brightness(0.85); } 45% { filter: brightness(1.15); } 70% { filter: brightness(0.95); } 100% { filter: brightness(1.08); } }
.gs-glow {
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  margin: -32% 0 0 -32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 100, 0.8) 0%, rgba(255, 140, 45, 0.36) 26%, rgba(255, 100, 20, 0) 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.gs-flame { position: absolute; width: 3.6%; height: 7%; margin: -6.4% 0 0 -1.8%; transform-origin: 50% 92%; pointer-events: none; }
.gs-flame i { position: absolute; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%; }
.fl-outer { inset: 0; background: radial-gradient(ellipse at 50% 76%, #fff6d0 0%, #ffd56a 24%, #ff8f1c 56%, rgba(255, 80, 0, 0) 76%); filter: blur(0.6px); animation: flick 0.13s ease-in-out infinite alternate; transform-origin: 50% 95%; }
.fl-core { inset: 38% 30% 10% 30%; background: radial-gradient(ellipse at 50% 70%, #fffdf2 0%, #fff0b8 55%, rgba(255, 240, 184, 0) 100%); animation: flick 0.17s ease-in-out infinite alternate-reverse; transform-origin: 50% 95%; }
.fl-blue { inset: 76% 34% -2% 34%; background: radial-gradient(ellipse, rgba(110, 150, 255, 0.7), rgba(110, 150, 255, 0) 70%); }
@keyframes flick { 0% { transform: scale(1, 1) skewX(0deg); } 40% { transform: scale(0.94, 1.07) skewX(2.5deg); } 100% { transform: scale(1.04, 0.95) skewX(-2deg); } }
.gs-ripple { position: absolute; width: 12%; aspect-ratio: 1; margin: -6% 0 0 -6%; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; opacity: 0; pointer-events: none; }
.gs-tap { position: absolute; width: 24%; aspect-ratio: 1; margin: -12% 0 0 -12%; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 3; }
.gs-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 86px); text-align: center; font-family: var(--serif); font-style: italic; font-size: 18px; color: #ece0c4; text-shadow: 0 2px 10px #000; pointer-events: none; }
.gs-text { position: absolute; left: 20%; width: 60%; top: 25%; height: 53%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cream); }
.gs-text .t-kicker { font-family: var(--serif); font-style: italic; font-size: 13px; font-size: 3cqw; color: #e7d7b4; }
.gs-text .t-couple { margin-top: 0.15em; font-family: var(--script); font-size: 30px; font-size: 7.4cqw; line-height: 1.15; color: var(--gold); }
.gs-text .t-couple span { font-size: 0.7em; }
.t-orn { color: var(--gold-2); line-height: 0; margin: 0.6em 0 !important; }
.t-orn svg { width: 26cqw; height: auto; }
.t-orn--sm svg { width: 18cqw; }
.gs-text .t-small { font-family: var(--serif); font-style: italic; font-size: 12.5px; font-size: 2.9cqw; color: #d9c8a5; }
.gs-text .t-title { font-family: var(--script); font-weight: 400; font-size: 46px; font-size: 11cqw; line-height: 1.1; color: #ffe1a1; text-shadow: 0 0 22px rgba(255, 170, 60, 0.45); }
.gs-text .t-tag { font-family: var(--serif); font-size: 14px; font-size: 3.3cqw; font-weight: 500; color: #f2e2c2; margin-bottom: 0.7em !important; }
.gs-text .t-date { font-family: var(--serif); font-weight: 600; font-size: 13px; font-size: 3cqw; letter-spacing: 0.16em; text-transform: uppercase; color: #fff1d2; }
.gs-text .t-time { font-family: var(--serif); font-size: 14px; font-size: 3.3cqw; font-weight: 500; color: #f2e2c2; }
.gs-text .t-venue { font-family: var(--serif); font-weight: 700; font-size: 15px; font-size: 3.5cqw; color: #fff1d2; }
.gs-text .t-addr { font-family: var(--serif); font-size: 12.5px; font-size: 2.9cqw; line-height: 1.3; color: #dccaa6; }

/* ---------- E2 wedding ---------- */
.ep-wed { background: #8e1016; }
.wed-door-scene { position: absolute; inset: 0; overflow: hidden; background: #8e1016; }
.wed-track { position: absolute; inset: 0; will-change: transform; }
.wed-art {
  --bw: max(var(--pw), calc(var(--ph) * 2 / 3));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bw);
  height: calc(var(--bw) * 1.5);
  margin-left: calc(var(--bw) / -2);
  margin-top: calc(var(--bw) * -0.75);
  will-change: transform;
}
.wed-art > img.wed-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.wed-behind { position: absolute; z-index: 1; background: radial-gradient(ellipse at 50% 62%, #ffe6ab 0%, #e6ab55 16%, #b3241e 46%, #6e0a10 100%); }
.wed-leaves { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.leaf { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wed-red {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + max(var(--pw), calc(var(--ph) * 2 / 3)) * 0.75);
  height: 90%;
  background: radial-gradient(120% 60% at 50% 0%, #a3151c, #8e1016 60%, #7a0c12);
}
.wed-crest { position: absolute; left: 50%; top: 0; width: min(calc(var(--pw) * 0.62), 270px); margin-left: calc(min(calc(var(--pw) * 0.62), 270px) / -2); transform-origin: 50% 50%; }
.crest-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35)); }
.crest-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--gold); }
.crest-mono { margin: 0; font-family: var(--script); font-size: min(calc(var(--pw) * 0.17), 74px); line-height: 1; display: flex; align-items: center; gap: 0.16em; }
.crest-mono span { display: block; width: 1px; height: 0.7em; background: currentColor; opacity: 0.7; }
.crest-names { margin: 4px 0 0; font-family: var(--serif); font-weight: 600; font-size: min(calc(var(--pw) * 0.042), 18px); letter-spacing: 0.08em; }
.crest-date { margin: 2px 0 0; font-family: var(--serif); font-size: min(calc(var(--pw) * 0.032), 14px); letter-spacing: 0.3em; opacity: 0.85; }
.wed-card-scene { position: absolute; inset: 0; }
/* The text uses the painting's whole red panel: between the side trees (20% to 80%
   across) and between the wisteria and the flower bed (9% to 88% down). Sizes are cqw
   of that box, so the card looks the same on every phone; fit() shrinks it if needed. */
.wed-text { position: absolute; left: 20%; width: 60%; top: 9%; height: 79%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cream); container-type: inline-size; }
.wed-text .fit { width: 100%; }
.w-ganesha { width: 50px; width: 19cqw; height: auto; margin: 0 auto 0.2em; filter: drop-shadow(0 0 10px rgba(255, 200, 110, 0.35)); }
.w-shloka { font-family: var(--guj); font-size: 15px; font-size: 6cqw; color: var(--gold); letter-spacing: 0.02em; }
.w-head { margin-top: 0.35em !important; font-family: var(--serif); font-weight: 700; font-size: 14px; font-size: 5.6cqw; letter-spacing: 0.36em; text-transform: uppercase; color: #ffe3a6; }
.w-invite { margin-top: 0.35em !important; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px; font-size: 6.1cqw; line-height: 1.2; color: #f1dfbd; }
.w-name { font-family: var(--script); font-size: 46px; font-size: 18.5cqw; line-height: 1.05; color: #ffe1a1; text-shadow: 0 2px 10px rgba(60, 0, 0, 0.45); }
.w-parents { font-family: var(--serif); font-size: 15px; font-size: 5.9cqw; font-style: italic; font-weight: 500; line-height: 1.2; color: #f0ddba; }
.w-amp { font-family: var(--script); font-size: 26px; font-size: 10cqw; line-height: 0.9; color: var(--gold); margin: 0.1em 0 -0.05em !important; }
.w-orn { color: var(--gold-2); line-height: 0; margin: 0.5em 0 0.4em !important; }
.w-orn svg { width: 40cqw; height: auto; }
.w-date { font-family: var(--serif); font-weight: 700; font-size: 15px; font-size: 6cqw; letter-spacing: 0.12em; text-transform: uppercase; color: #fff0d0; }
.w-sched { margin: 0.35em auto 0.45em; width: 92%; }
.w-sched p { display: flex; align-items: baseline; gap: 6px; margin: 0.1em 0 !important; font-family: var(--serif); font-weight: 500; font-size: 15px; font-size: 6cqw; color: #f4e3c4; }
.w-sched span { white-space: nowrap; }
.w-sched i { flex: 1; border-bottom: 1px dotted rgba(240, 212, 154, 0.55); transform: translateY(-0.25em); }
.w-sched b { font-weight: 700; color: #ffe8b8; white-space: nowrap; }
.w-venue { font-family: var(--serif); font-weight: 700; font-size: 17px; font-size: 7cqw; line-height: 1.2; color: #fff0d0; }
.w-addr { font-family: var(--serif); font-weight: 500; font-size: 14px; font-size: 5.5cqw; line-height: 1.25; color: #ead6b0; }
.w-bless-h { margin-top: 0.6em !important; font-family: var(--serif); font-weight: 700; font-size: 11px; font-size: 4.5cqw; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.w-bless { font-family: var(--serif); font-weight: 600; font-size: 14px; font-size: 5.6cqw; line-height: 1.3; color: #f6e5c4; }
.w-bless span { display: block; }

/* ---------- E3 reception ---------- */
.ep-rec { background: #170102; }
.rec-art { position: absolute; inset: 0; will-change: transform; }
.rec-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.rec-text { position: absolute; left: 6%; right: 6%; top: calc(var(--safe-t) + var(--ph) * 0.09); height: calc(var(--ph) * 0.46); display: flex; align-items: flex-start; justify-content: center; text-align: center; color: var(--cream); z-index: 2; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75); }
.r-kicker { font-family: var(--serif); font-style: italic; font-size: 15px; font-size: 4cqw; color: #ecd9b4; }
.r-couple { margin-top: 0.05em !important; font-family: var(--script); font-size: 44px; font-size: 12cqw; line-height: 1.12; color: #ffe1a1; }
.r-couple span { font-size: 0.72em; }
.r-small { font-family: var(--serif); font-style: italic; font-size: 14px; font-size: 3.7cqw; color: #dcc8a2; }
.r-title { font-family: var(--serif); font-weight: 600; font-size: 26px; font-size: 7.4cqw; letter-spacing: 0.34em; text-transform: uppercase; color: #ffe8b8; margin: 0.1em 0 0.1em 0.3em !important; }
.r-tag { font-family: var(--serif); font-weight: 600; font-size: 14px; font-size: 3.9cqw; color: #f4e3c4; letter-spacing: 0.04em; }
.r-line { font-family: var(--serif); font-style: italic; font-size: 14px; font-size: 3.8cqw; color: #e7d3ad; }
.r-orn { color: var(--gold-2); line-height: 0; margin: 0.7em 0 0.5em !important; }
.r-orn svg { width: 30cqw; height: auto; }
.r-date { font-family: var(--serif); font-weight: 700; font-size: 13px; font-size: 3.6cqw; letter-spacing: 0.16em; text-transform: uppercase; color: #fff0d0; }
.r-time { font-family: var(--serif); font-size: 14px; font-size: 3.9cqw; font-weight: 600; color: #f4e3c4; }
.r-venue { margin-top: 0.45em !important; font-family: var(--serif); font-weight: 700; font-size: 16px; font-size: 4.4cqw; color: #fff0d0; }
.r-addr { font-family: var(--serif); font-size: 12.5px; font-size: 3.35cqw; line-height: 1.32; color: #e3cfaa; max-width: 88%; margin: 0 auto !important; }
.rec-curtain { position: absolute; top: 0; bottom: 0; width: 50.4%; overflow: hidden; z-index: 3; will-change: transform; }
.rec-curtain--l { left: 0; transform-origin: 0 50%; }
.rec-curtain--r { right: 0; transform-origin: 100% 50%; }
.rec-curtain div { position: absolute; top: 0; height: 100%; width: var(--pw); background: url('../assets/img/curtains.webp') 50% 50% / cover no-repeat; }
.rec-curtain--l div { left: 0; }
.rec-curtain--r div { right: 0; }
.fx-glitter { z-index: 4; pointer-events: auto !important; touch-action: none; }
.fx-dust { z-index: 1; }
.rec-hint { position: absolute; left: 0; right: 0; bottom: 30%; z-index: 5; text-align: center; pointer-events: none; color: var(--gold); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.rec-hint p { font-family: var(--script); font-size: 30px; font-size: 8.4cqw; line-height: 1.2; padding: 0 8%; }
.rec-hint small { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 15px; color: #f3dfb8; }

@media (prefers-reduced-motion: reduce) {
  .fl-outer, .fl-core, .gs-lamp { animation: none; }
}