@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&family=Inter:wght@200;300&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: #00000f;
  font-family: 'Cormorant Garamond', serif;
  user-select: none;
  touch-action: none;
}

/* start-page rotate hint: portrait phones only, gone once merged.
   Sits under the title at the TOP, so it never piles up on the hint,
   music player and status text at the bottom on phones. */
#rotateHint {
  display: none;
  position: fixed;
  top: clamp(58px, 9vh, 88px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 88vw;
  max-width: 420px;
  pointer-events: none;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(.68rem, 2vw, .8rem);
  font-weight: 300;
  letter-spacing: .16em;
  line-height: 1.5;
  color: #ffb3dd;
  text-shadow: 0 0 14px #ff1493, 0 2px 10px rgba(0, 0, 0, 1);
}

@media (orientation: portrait) {
  #rotateHint {
    display: block;
  }
}

body.merged #rotateHint {
  display: none;
}

/* short landscape phones: shrink everything so nothing overlaps or gets cut */
@media (orientation: landscape) and (max-height: 500px) {
  #ui {
    padding-top: 10px;
  }

  #title {
    font-size: clamp(.95rem, 3vh, 1.2rem);
  }

  #lyrics {
    gap: 2px;
    padding: 0 16px;
  }

  #lyrics p {
    font-size: clamp(.8rem, 3.2vh, 1rem);
    line-height: 1.25;
  }

  #hint {
    bottom: 12px;
    font-size: .65rem;
  }

  #finale {
    gap: 4px;
    padding: 12px 16px;
  }

  #finale .text-group {
    gap: 4px;
    padding: 10px 20px 12px;
  }

  #finale .line2 {
    font-size: clamp(1.4rem, 7vh, 2.4rem);
  }

  #finale .line2-ar {
    font-size: clamp(1.1rem, 5vh, 1.8rem);
  }

  .vn-section {
    margin-top: 6px;
  }

  .vn-heading {
    font-size: clamp(.95rem, 4vh, 1.2rem);
    margin-bottom: 6px;
  }

  .vn-player,
  .vn-captions {
    margin-top: 8px;
  }

  .music-player {
    padding: 8px 12px;
  }
}

/* very narrow phones: keep players inside the screen */
@media (max-width: 380px) {
  .music-player {
    width: min(230px, 82vw);
  }

  .vn-player {
    width: min(300px, 88vw);
  }

  #hint {
    letter-spacing: .22em;
    white-space: normal;
    width: 90vw;
  }
}

canvas#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

canvas#heartCanvas {
  display: none;
}

#ui {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(18px, 4vh, 38px);
}

#title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 4vw, 1.55rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .2em;
  color: rgba(235, 220, 255, .97);
  text-shadow:
    0 0 18px rgba(167, 139, 250, .65),
    0 1px 8px rgba(0, 0, 0, .95);
  transition: opacity 1s;
  animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {

  0%,
  100% {
    color: rgba(225, 210, 255, .9);
    text-shadow:
      0 0 14px rgba(167, 139, 250, .5),
      0 1px 8px rgba(0, 0, 0, .95);
  }

  50% {
    color: rgba(245, 232, 255, 1);
    text-shadow:
      0 0 28px rgba(200, 160, 255, .8),
      0 1px 8px rgba(0, 0, 0, .95);
  }
}

/* days-together badge: pastel pink heart with a little calendar,
   top-right, always visible — never fades with the finale texts */
#daysBadge {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 10px));
  right: max(12px, env(safe-area-inset-right, 12px));
  z-index: 30;
  width: 84px;
  height: 80px;
  pointer-events: none;
}

#daysBadge .days-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 84px;
  line-height: 1;
  color: #ffc9e3;
  text-shadow: 0 0 18px rgba(255, 20, 147, .55), 0 2px 10px rgba(0, 0, 0, .6);
}

#daysBadge .days-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  font-family: 'Inter', sans-serif;
  color: #a4135a;
  text-align: center;
}

#daysBadge .days-cal {
  font-size: 11px;
  line-height: 1;
}

#daysBadge .days-num {
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.1;
}

#daysBadge .days-label {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}

/* narrow phones: smaller badge + shift the title left so it never
   sits under the badge */
@media (max-width: 500px) {
  #daysBadge {
    width: 68px;
    height: 64px;
  }

  #daysBadge .days-heart {
    font-size: 68px;
  }

  #daysBadge .days-num {
    font-size: 1rem;
  }

  #ui {
    padding-right: 76px;
    padding-left: 12px;
  }
}

/* pre-merge lyrics: blue + red, turning purple — shown until they kiss */
#lyrics {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 22px;
  pointer-events: none;
  text-align: center;
  transition: opacity 1.2s ease;
}

#lyrics.hidden {
  opacity: 0;
}

#lyrics p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.95rem, 3.6vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: .04em;
}

#lyrics .ly-blue {
  color: #7db4ff;
  text-shadow: 0 0 16px rgba(59, 130, 246, .9), 0 2px 8px rgba(0, 0, 0, 1);
}

#lyrics .ly-purple {
  color: #d8b4fe;
  text-shadow: 0 0 16px rgba(168, 85, 247, .9), 0 2px 8px rgba(0, 0, 0, 1);
}

/* purple wash over everything once they kiss */
#purpleGlow {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  background: radial-gradient(ellipse at center, rgba(147, 51, 234, .28) 0%, rgba(88, 28, 135, .45) 60%, rgba(30, 0, 60, .6) 100%);
}

body.merged #purpleGlow {
  opacity: 1;
}

body.merged #title {
  color: #e9d5ff;
  text-shadow: 0 0 18px rgba(168, 85, 247, .9), 0 0 40px rgba(147, 51, 234, .7), 0 2px 10px rgba(0, 0, 0, 1);
}

#hint {
  position: fixed;
  bottom: clamp(18px, 3.5vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  font-size: clamp(.72rem, 2vw, .86rem);
  font-weight: 300;
  letter-spacing: .34em;
  color: rgba(255, 255, 255, .95);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 1.2s;
  text-shadow:
    0 0 14px rgba(200, 160, 255, .75),
    0 1px 8px rgba(0, 0, 0, .95);
  animation: hintPulse 2.8s ease-in-out infinite;
}

@keyframes hintPulse {

  0%,
  100% {
    opacity: .80;
  }

  50% {
    opacity: 1;
  }
}

#finale {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  gap: 10px;
  padding: 28px 24px;
  opacity: 0;
  transition: opacity 2.2s ease;
  text-align: center;
}

#finale.visible {
  opacity: 1;
}

/* dark scrim sits behind all text lines */
#finale .text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 32px 22px;
  border-radius: 18px;
  background: transparent;
}

#finale .line1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(.78rem, 2.4vw, .95rem);
  font-weight: 200;
  letter-spacing: .48em;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
}

#finale .line2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 7.5vw, 4.2rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  line-height: 1.1;
  letter-spacing: .02em;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 1),
    0 0 30px rgba(249, 168, 212, .9),
    0 0 60px rgba(167, 139, 250, .5);
  animation: tpulse 3s ease-in-out infinite;
}

#finale .line2-ar {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 5.5vw, 3rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.3;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 1),
    0 0 30px rgba(249, 168, 212, .9),
    0 0 60px rgba(167, 139, 250, .5);
}

#finale .line3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(.7rem, 2vw, .88rem);
  font-weight: 200;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
}

#finale .line5 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(.62rem, 1.8vw, .78rem);
  font-weight: 200;
  letter-spacing: .34em;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
  margin-top: 6px;
}

@keyframes tpulse {

  0%,
  100% {
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9), 0 0 30px rgba(249, 168, 212, .8), 0 0 60px rgba(167, 139, 250, .4);
  }

  50% {
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9), 0 0 50px rgba(249, 168, 212, 1), 0 0 100px rgba(167, 139, 250, .7);
  }
}

.replay-btn {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  right: max(24px, env(safe-area-inset-right, 24px));
  z-index: 30;
  pointer-events: none;
  background: rgba(0, 0, 10, .55);
  border: 1px solid rgba(210, 190, 255, .4);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 1.4rem;
  color: rgba(210, 190, 255, .85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 1.6s ease, border-color .25s, color .25s, transform .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.replay-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.replay-btn:hover,
.replay-btn:active {
  color: #fff;
  border-color: rgba(249, 168, 212, .8);
  transform: rotate(-40deg) scale(1.1);
}

#finale.visible .replay-btn {
  opacity: 1;
}

/* ---- 2 of Us upgrades: video background, music button, highlighted text ---- */
#bgVideo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}

body.show-video #bgVideo {
  opacity: 1;
}

canvas#c {
  transition: opacity 1.8s ease;
}

body.show-video canvas#c {
  opacity: 0;
}

.music-btn {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  left: max(24px, env(safe-area-inset-left, 24px));
  z-index: 30;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(249, 168, 212, .55);
  background: rgba(20, 4, 16, .6);
  color: #ffd7ec;
  font-size: 1.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(255, 20, 147, .35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.music-btn.playing {
  animation: musicPulse 1.8s ease-in-out infinite;
}

.music-btn:not(.playing) #musicNote {
  opacity: .65;
}

@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 20, 147, .35); }
  50% { box-shadow: 0 0 30px rgba(255, 20, 147, .75); }
}

/* highlighted text: readable over the video background */
#finale .text-group {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0) 78%);
}

#finale .line1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 22px rgba(167, 139, 250, .9);
}

#finale .line2 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 40px rgba(249, 168, 212, 1), 0 0 90px rgba(167, 139, 250, .8);
}

#finale .line3 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 22px rgba(249, 168, 212, .8);
}

#title {
  text-shadow: 0 0 24px rgba(167, 139, 250, .9), 0 2px 10px rgba(0, 0, 0, 1);
}

#hint {
  text-shadow: 0 0 20px rgba(200, 160, 255, .95), 0 2px 10px rgba(0, 0, 0, 1);
}

/* neon pink text while the dance video is the background */
body.show-video #title {
  color: #ff6ec7;
  text-shadow: 0 0 12px #ff1493, 0 0 34px #ff1493, 0 2px 10px rgba(0, 0, 0, 1);
  animation: none;
}

body.show-video #hint {
  color: #ffb3dd;
  text-shadow: 0 0 14px #ff1493, 0 0 34px #ff2e9a, 0 2px 10px rgba(0, 0, 0, 1);
}

body.show-video #finale .line1 {
  color: #ff9ecd;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 24px #ff1493;
}

body.show-video #finale .line2 {
  color: #ff5eb0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 30px #ff1493, 0 0 70px #ff1493;
  animation: none;
}

body.show-video #finale .line2-ar {
  color: #ff5eb0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 30px #ff1493, 0 0 70px #ff1493;
}

body.show-video #finale .line3 {
  color: #ff9ecd;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 24px #ff1493;
}

body.show-video #finale .line5 {
  color: #ff9ecd;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 24px #ff1493;
}

#finale .line4 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(.62rem, 1.8vw, .78rem);
  font-weight: 200;
  letter-spacing: .34em;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
  margin-top: 6px;
}

body.show-video #finale .line4 {
  color: #ff9ecd;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 24px #ff1493;
}

/* voice note section: appears WITH the finale texts after merging, not
   late after the video + audio download finish. Only hidden if the
   vn file actually errors. */
.vn-section {
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
  margin-top: 14px;
}

#finale.visible .vn-section {
  opacity: 1;
  pointer-events: auto;
}

.vn-section.vn-error {
  opacity: 0 !important;
  pointer-events: none !important;
}

.vn-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 20, 147, .6);
  background: rgba(20, 4, 16, .55);
  color: #ffd7ec;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(255, 20, 147, .35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.vn-btn.playing {
  animation: musicPulse 1.8s ease-in-out infinite;
}

/* vn seek player: time + draggable pointer */
.vn-player {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  width: min(340px, 86vw);
}

.vn-time {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  letter-spacing: .08em;
  color: #ffb3dd;
  text-shadow: 0 0 10px #ff1493, 0 2px 8px rgba(0, 0, 0, 1);
  min-width: 34px;
  text-align: center;
}

.vn-seek-track {
  position: relative;
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.vn-seek-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 110, 199, .35);
}

.vn-seek-fill {
  position: absolute;
  left: 0;
  height: 4px;
  width: 0%;
  border-radius: 999px;
  background: #ff6ec7;
  box-shadow: 0 0 10px rgba(255, 20, 147, .7);
  pointer-events: none;
}

/* little rabbit runs + jumps along the track instead of a dot */
.vn-rabbit {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 20, 147, .8));
  z-index: 2;
}

.vn-rabbit.running {
  animation: rabbitHop .55s ease-in-out infinite;
}

@keyframes rabbitHop {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 9px)); }
}

/* heading on top of the vn */
.vn-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 4.2vw, 1.5rem);
  letter-spacing: .06em;
  color: #ff6ec7;
  text-shadow: 0 0 12px #ff1493, 0 0 34px #ff1493, 0 2px 10px rgba(0, 0, 0, 1);
  margin-bottom: 10px;
  text-align: center;
}

/* every text fades out 10s after it shows — EXCEPT the vn heading
   ("For my favourite person My Rahma") and all vn texts/button/captions,
   which stay. Music player + status text are controls, not story texts,
   so they stay too. */
#finale .text-group {
  transition: opacity 1.5s ease;
}

#finale.texts-hidden .text-group {
  opacity: 0;
}

body.texts-hidden #title,
body.texts-hidden #lyrics {
  opacity: 0;
}

/* hint fix: its pulse animation animates opacity, which beats a plain
   opacity:0 — so hiding it needs animation:none + !important, otherwise
   "drag the souls together" stays visible forever */
#hint.hint-hidden,
body.texts-hidden #hint {
  opacity: 0 !important;
  animation: none !important;
}

/* status TEXT (not a button): above the music player, bottom-left,
   so it never sits on top of the centered hint on narrow phones */
.vn-status {
  position: fixed;
  bottom: max(142px, calc(env(safe-area-inset-bottom, 24px) + 118px));
  left: max(24px, env(safe-area-inset-left, 24px));
  z-index: 30;
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffb3dd;
  text-shadow: 0 0 10px #ff1493, 0 2px 8px rgba(0, 0, 0, 1);
  pointer-events: none;
  white-space: nowrap;
}

/* lil music player hide / unhide */
.vn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vn-content.collapsed {
  display: none;
}

.vn-toggle-btn {
  pointer-events: auto;
  margin-top: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 20, 147, .5);
  background: rgba(20, 4, 16, .55);
  color: #ffd7ec;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 14px rgba(255, 20, 147, .3);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* lil MUSIC player (not vn) with hide / unhide */
.music-player {
  position: fixed;
  bottom: max(64px, calc(env(safe-area-inset-bottom, 24px) + 40px));
  left: max(24px, env(safe-area-inset-left, 24px));
  z-index: 30;
  width: min(260px, 78vw);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(249, 168, 212, .4);
  background: rgba(20, 4, 16, .6);
  color: #ffd7ec;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(255, 20, 147, .3);
}

.music-player.hidden {
  display: none;
}

.music-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.music-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.2;
  color: #ff6ec7;
  text-shadow: 0 0 10px #ff1493;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-hide-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 20, 147, .5);
  background: transparent;
  color: #ffd7ec;
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.music-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.music-play-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 20, 147, .6);
  background: rgba(255, 20, 147, .15);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.music-time {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  letter-spacing: .08em;
  color: #ffb3dd;
  text-shadow: 0 0 10px #ff1493;
}

.music-show-btn {
  position: fixed;
  bottom: max(64px, calc(env(safe-area-inset-bottom, 24px) + 40px));
  left: max(24px, env(safe-area-inset-left, 24px));
  z-index: 30;
  display: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 20, 147, .5);
  background: rgba(20, 4, 16, .6);
  color: #ffd7ec;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.music-show-btn.visible {
  display: inline-flex;
}

/* neon pink captions below the voice note, synced to the audio */
.vn-captions {
  opacity: 0;
  transition: opacity .6s ease;
  margin-top: 14px;
  text-align: center;
  pointer-events: none;
  max-width: 92vw;
}

.vn-captions.on {
  opacity: 1;
}

.vn-cap-en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  line-height: 1.25;
  color: #ff6ec7;
  text-shadow: 0 0 12px #ff1493, 0 0 34px #ff1493, 0 2px 10px rgba(0, 0, 0, 1);
}

.vn-cap-ar {
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  line-height: 1.5;
  margin-top: 2px;
  color: #ffb3dd;
  text-shadow: 0 0 12px #ff1493, 0 0 30px #ff2e9a, 0 2px 10px rgba(0, 0, 0, 1);
}