/* ========== Base ========== */
body {
  font-family: "Special Elite", "Courier New", monospace;
  background: #f8d7e4;
  color: #880e4f;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 1.5rem;
}
body.locked { overflow: hidden; }

/* ========== LOCK SCREEN ========== */
#lock-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #f8d7e4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
}
#lock-text {
  color: #880e4f;
  font-size: 2rem;
  margin-bottom: 1rem;
  white-space: pre-wrap;
  text-align: center;
}
.reveal-link {
  margin-top: 0.6rem;
  color: #d81b60;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.reveal-link:hover { opacity: 0.8; color: #880e4f; }
#lock-screen.fade-out { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }

/* ========== MAIN CONTENT ========== */
#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;       /* fallback */
  height: 100dvh;      /* mobile safe */
  box-sizing: border-box;
  padding: 1rem;
  overflow-y: auto;

  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
#content.fade-in { opacity: 1; }

/* Inputs */
input {
  border: none;
  border-bottom: 1px solid #d81b60;
  background: none;
  color: #880e4f;
  font-family: inherit;
  font-size: 1.6rem;
  padding: 0.5rem;
  text-align: center;
  outline: none;
}
#password::placeholder { color: rgba(136, 14, 79, 0.45); }
.hint { opacity: 0.75; color: #d81b60; font-size: 1.3rem; margin-top: 0.5rem; }
.message { margin-top: 0.5rem; color: #d81b60; }

/* ========== Typewriter cursors ========== */
#lock-text, #birthday-message { font-size: 2.5rem; }
#lock-text::after, #birthday-message::after, #home-heading::after {
  content: "";
  display: inline-block;
  width: 0.6ch;
  height: 1em;
  background-color: currentColor;
  margin-left: 6px;
  border-radius: 1px;
  animation: blink 1s steps(1) infinite;
}
#home-heading {
  font-size: 4rem;
  font-weight: normal;
  color: #d81b60;
  margin-top: 2rem;
}
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* ========== Animations ========== */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-5px); }
  40%,80% { transform: translateX(5px); }
}
.shake { animation: shake 0.3s; }

/* ========== Utilities ========== */
.hidden { display: none; }

/* Timer — always above player */
#timer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 32;           /* above player */
  background: transparent;
}

/* Skip button */
#skip {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 20px; height: 20px;
  background-color: #c2185b;
  cursor: pointer; opacity: 0.6;
  z-index: 5;
}

/* ========== Headings / Poem ========== */
h1 { font-size: 2rem; color: #d81b60; margin: 0 0 1rem; font-weight: normal; }

pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  margin: 0;
}

/* Reserve space so poem never overlaps timer/player */
#poem-text {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding-bottom: calc(220px + env(safe-area-inset-bottom));
  /* 220px ≈ player + timer + breathing room (desktop) */
}

/* Buttons */
button { all: unset; font-family: "Special Elite", monospace; cursor: pointer; }
button:focus { outline: none; }

/* Bottom nav */
#poem-nav {
  position: fixed;
  bottom: calc(5vh + 96px);  /* sits above player */
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 64px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  z-index: 6;
}
.poem-nav-btn { color: #d81b60; text-decoration: none; font-size: 1.2rem; cursor: pointer; }
.poem-nav-btn:hover { text-decoration: underline; }
#back { margin-left: -85px; }
#next { margin-right: -85px; }

/* Pause button (top-right) */
.pause-btn {
  position: fixed;
  top: 20px;
  right: 28px;
  color: #d81b60;
  text-decoration: underline;
  font-size: 1rem;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

/* Butterflies */
.butterfly {
  position: fixed;
  z-index: 3;
  width: 250px; height: 250px;
  opacity: 1; pointer-events: none; will-change: transform;
  top: 0; left: 0;
}

/* ========== Mini audio player ========== */
.ap {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 6px 14px rgba(216,162,180,0.25);
  z-index: 30;           /* above page, below timer */
  backdrop-filter: blur(8px);
  isolation: isolate;
}

.ap-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  pointer-events: auto;  /* keep clicks working */
}

#ap-title {
  position: static;
  text-align: center;
  color: #880e4f;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
}

.ap-ctrl {
  position: relative;
  z-index: 3;            /* ensure above glass */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}

.ap-ctrl button {
  all: unset;
  cursor: pointer;
  font-size: 0.95rem;
  color: #d81b60;
  padding: 6px 8px;      /* comfortable hit area */
}
.ap-ctrl button:hover { opacity: 0.85; }

.ap-bar {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

#ap-elapsed, #ap-duration { font-size: 0.9rem; color: #880e4f; }

#ap-seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: rgba(216,162,180,0.55);
  border-radius: 8px; outline: none;
}
#ap-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #d81b60; cursor: pointer; margin-top: -4px;
  box-shadow: 0 0 6px rgba(216,27,96,0.45);
}
#ap-seek::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%;
  background: #d81b60; cursor: pointer;
  box-shadow: 0 0 6px rgba(216,27,96,0.45);
}

/* ========== MOBILE TUNING (≤ 480px) ========== */
@media (max-width: 480px) {
  html, body { font-size: 15px; }

  #home-heading {
    font-size: clamp(1.8rem, 6.5vw, 2.6rem);
    margin-top: 0.25rem;
  }
  #lock-text { font-size: 1.25rem; }
  #birthday-message { font-size: 1.4rem; }

  /* Poem text: extra space for player + timer */
  #poem-text {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0.5rem;
    padding-bottom: calc(260px + env(safe-area-inset-bottom));
  }

  /* Nav sits above player */
  #poem-nav {
    bottom: calc(env(safe-area-inset-bottom) + 120px);
    width: calc(100vw - 24px);
    gap: 10px;
  }
  .poem-nav-btn { font-size: 0.95rem; }
  #back { margin-left: 0; }
  #next { margin-right: 0; }

  /* Timer just above player */
  #timer {
    bottom: calc(env(safe-area-inset-bottom) + 100px);
    font-size: 0.95rem;
  }

  /* Player: tighter */
  .ap {
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    width: calc(100vw - 16px);
    padding: 8px 10px;
    border-radius: 12px;
  }
  #ap-title { font-size: 0.95rem; }
  .ap-ctrl button { font-size: 0.9rem; padding: 4px 6px; }
  .ap-bar { grid-template-columns: 48px 1fr 48px; gap: 6px; }
  #ap-elapsed, #ap-duration { font-size: 0.85rem; }
  #ap-seek { height: 5px; }

  .pause-btn { top: 12px; right: 14px; font-size: 0.95rem; }

  .butterfly { transform: scale(0.6); opacity: 0.55; }
}

/* ========== Butterfly paths (unchanged) ========== */
.butterfly1  { top: 0;     left: 0;    animation: flutter1 30s linear infinite; }
.butterfly2  { top: 10vh;  left: -5vw; animation: flutter2 35s linear infinite; }
.butterfly3  { top: -5vh;  left: 20vw; animation: flutter3 32s linear infinite; }
.butterfly4  { top: 15vh;  left: 30vw; animation: flutter4 28s linear infinite; }
.butterfly5  { top: -10vh; left: 50vw; animation: flutter5 34s linear infinite; }
.butterfly6  { top: 25vh;  left: 10vw; animation: flutter1 33s linear infinite; }
.butterfly7  { top: 5vh;   left: 60vw; animation: flutter2 29s linear infinite; }
.butterfly8  { top: 30vh;  left: 80vw; animation: flutter3 31s linear infinite; }
.butterfly9  { top: 40vh;  left: 15vw; animation: flutter4 27s linear infinite; }
.butterfly10 { top: 20vh;  left: 70vw; animation: flutter5 36s linear infinite; }
.butterfly11 { top: 50vh;  left: 5vw;  animation: flutter1 30s linear infinite; }
.butterfly12 { top: 45vh;  left: 40vw; animation: flutter2 34s linear infinite; }
.butterfly13 { top: 60vh;  left: 55vw; animation: flutter3 28s linear infinite; }
.butterfly14 { top: 55vh;  left: 75vw; animation: flutter4 32s linear infinite; }
.butterfly15 { top: 65vh;  left: 90vw; animation: flutter5 35s linear infinite; }
.butterfly16 { top: 12vh;  left: 5vw;  animation: flutter1 31s linear infinite; }
.butterfly17 { top: 35vh;  left: 22vw; animation: flutter2 33s linear infinite; }
.butterfly18 { top: 8vh;   left: 42vw; animation: flutter3 29s linear infinite; }
.butterfly19 { top: 50vh;  left: 65vw; animation: flutter4 34s linear infinite; }
.butterfly20 { top: 15vh;  left: 85vw; animation: flutter5 32s linear infinite; }
/* ... (keep the rest of your butterfly classes + keyframes as-is) */

@keyframes flutter1 {
  0% { transform: translate(10vw,10vh) rotate(0); }
  25%{ transform: translate(60vw,20vh) rotate(90deg); }
  50%{ transform: translate(80vw,70vh) rotate(180deg); }
  75%{ transform: translate(20vw,80vh) rotate(270deg); }
  100%{transform: translate(10vw,10vh) rotate(360deg); }
}
@keyframes flutter2 {
  0% { transform: translate(5vw,20vh) rotate(0); }
  25%{ transform: translate(70vw,10vh) rotate(120deg); }
  50%{ transform: translate(85vw,60vh) rotate(200deg); }
  75%{ transform: translate(25vw,75vh) rotate(300deg); }
  100%{transform: translate(5vw,20vh) rotate(360deg); }
}
@keyframes flutter3 {
  0% { transform: translate(15vw,5vh) rotate(0); }
  25%{ transform: translate(55vw,30vh) rotate(100deg); }
  50%{ transform: translate(90vw,55vh) rotate(210deg); }
  75%{ transform: translate(35vw,85vh) rotate(290deg); }
  100%{transform: translate(15vw,5vh) rotate(360deg); }
}
@keyframes flutter4 {
  0% { transform: translate(8vw,15vh) rotate(0); }
  25%{ transform: translate(45vw,35vh) rotate(140deg); }
  50%{ transform: translate(78vw,65vh) rotate(220deg); }
  75%{ transform: translate(22vw,82vh) rotate(280deg); }
  100%{transform: translate(8vw,15vh) rotate(360deg); }
}
@keyframes flutter5 {
  0% { transform: translate(12vw,12vh) rotate(0); }
  25%{ transform: translate(62vw,22vh) rotate(160deg); }
  50%{ transform: translate(82vw,72vh) rotate(240deg); }
  75%{ transform: translate(18vw,78vh) rotate(300deg); }
  100%{transform: translate(12vw,12vh) rotate(360deg); }
}