* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: black;
  font-family: "Courier New", monospace;
}

.start-screen {
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background:
    radial-gradient(circle at center, #141414 0%, #000000 70%);
}

.lockbox {
  width: 340px;

  padding: 30px;

  border-radius: 24px;

  background:
    linear-gradient(145deg, #1c1c1c, #050505);

  border: 1px solid #333;

  box-shadow:
    0 0 40px rgba(255,255,255,0.05),
    inset 0 0 20px rgba(255,255,255,0.04);

  text-align: center;
}

.top-section h1 {
  margin: 0;
  color: white;

  font-size: 20px;
  letter-spacing: 2px;
}

.japanese {
  margin-bottom: 8px;

  color: #888;

  font-size: 14px;
  letter-spacing: 2px;
}

.screen {
  margin-top: 24px;
  margin-bottom: 18px;

  padding: 14px;

  border-radius: 10px;

  background: #031109;

  border: 1px solid #1d5b38;

  color: #41ff95;

  font-size: 15px;
  letter-spacing: 3px;

  box-shadow:
    inset 0 0 15px rgba(65,255,149,0.15);
}

.code-display {
  height: 45px;

  margin-bottom: 20px;

  padding: 10px;

  border-radius: 10px;

  background: #0b0b0b;

  border: 1px solid #222;

  color: #ddd;

  font-size: 22px;
  letter-spacing: 6px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.keypad {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;
}

.keypad button {
  padding: 15px;

  border: 1px solid #333;

  border-radius: 10px;

  background: #161616;

  color: white;

  font-size: 18px;

  cursor: pointer;

  transition: 0.15s;
}

.keypad button:hover {
  background: #252525;

  transform: translateY(-2px);
}

.keypad button:active {
  transform: scale(0.96);
}

.hint {
  margin-top: 18px;

  color: #666;

  font-size: 12px;

  letter-spacing: 2px;
}

.screen.wrong {
  color: #ff3b3b;
  border-color: #ff3b3b;
  box-shadow: inset 0 0 15px rgba(255, 59, 59, 0.3);
}

.screen.granted {
  color: #41ff95;
  border-color: #41ff95;
}

.screen.granted {
  color: #41ff95;

  border-color: #41ff95;

  box-shadow:
    inset 0 0 20px rgba(65,255,149,0.25),
    0 0 25px rgba(65,255,149,0.25);

  transition: 0.3s;
}

.fade-out {
  animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* =========================
   LANDING PAGE
========================= */

.hidden {
  display: none !important;
}

.landing-screen {
  min-height: 100vh;

  background:
    radial-gradient(circle at 50% 35%,
      rgba(65, 95, 180, 0.35) 0%,
      rgba(10, 18, 45, 0.95) 35%,
      #02040b 75%,
      #000000 100%);

  position: relative;
  overflow: hidden;
  color: white;
}

/* starry sky layer */
.landing-screen::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(1px 1px at 5% 8%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 20% 12%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 28% 22%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 35% 8%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 44% 18%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 52% 10%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 61% 22%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 70% 12%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 82% 18%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 92% 9%, rgba(255,255,255,0.85), transparent),

    radial-gradient(1px 1px at 8% 38%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 17% 46%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 26% 34%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 36% 45%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 48% 38%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 58% 48%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 67% 34%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 77% 45%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 96% 47%, rgba(255,255,255,0.85), transparent),

    radial-gradient(1px 1px at 4% 68%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 14% 74%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 24% 62%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 33% 78%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 43% 65%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 55% 72%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 66% 82%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 76% 68%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 86% 77%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 95% 64%, rgba(255,255,255,0.85), transparent);

  opacity: 1;
  pointer-events: none;

  animation: backgroundTwinkle 1s infinite ease-in-out;
}

/* milky way / soft diagonal star band */
.landing-screen::after {
  content: "";

  position: absolute;
  inset: -30%;

  background:
    linear-gradient(
      120deg,
      transparent 28%,
      rgba(140, 160, 255, 0.25) 42%,
      rgba(255, 255, 255, 0.35) 50%,
      rgba(160, 140, 255, 0.25) 58%,
      transparent 72%
    ),
    radial-gradient(circle at 25% 30%,
      rgba(120, 140, 255, 0.12),
      transparent 28%),
    radial-gradient(circle at 75% 65%,
      rgba(180, 120, 255, 0.10),
      transparent 30%);

  filter: blur(40px);
  transform: rotate(-8deg);

  pointer-events: none;
  opacity: 0.9;
}

.landing-header,
.constellation {
  position: relative;
  z-index: 1;
}

.landing-header {
  text-align: center;
  padding-top: 60px;
}

.landing-subtitle {
  color: #9eb3ff;
  letter-spacing: 4px;
  font-size: 12px;
}

.landing-header h1 {
  margin-top: 10px;
  font-size: 40px;
  font-weight: normal;
}

.constellation {
  position: relative;
  width: 100%;
  height: 70vh;
}

/* =========================
   STARS
========================= */

.star-node {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  color: white;
}

.star-dot {
  display: block;

  width: 18px;
  height: 18px;

  border-radius: 50%;
  background: white;

  box-shadow:
    0 0 10px white,
    0 0 22px rgba(160, 180, 255, 0.95),
    0 0 40px rgba(110, 140, 255, 0.45);

  transition: 0.25s;

  
}

.star-label {
  display: block;
  margin-top: 10px;

  font-size: 14px;
  color: #d5dcff;
  white-space: nowrap;

  text-shadow: 0 0 10px rgba(120, 150, 255, 0.5);
}

.star-node:hover .star-dot {
  transform: scale(1.4);

  box-shadow:
    0 0 15px white,
    0 0 35px #9eb3ff,
    0 0 60px rgba(120, 150, 255, 0.7);
}

/* =========================
   ANIMATIONS
========================= */


@keyframes backgroundTwinkle {
  0% {
    opacity: 0.65;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.65;
  }
}


/* =========================
   SHOOTING STAR
========================= */

.shooting-star {
  position: absolute;
  top: 18%;
  left: -120px;

  width: 4px;
  height: 4px;

  background: white;
  border-radius: 50%;

  box-shadow:
    0 0 8px white,
    0 0 18px rgba(180,220,255,0.9),
    -35px 10px 18px rgba(255,255,255,0.35),
    -70px 20px 30px rgba(255,255,255,0.18);

  z-index: 1;

  animation: shootingStar 9s infinite ease-in-out;
}

@keyframes shootingStar {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0);
  }

  6% {
    opacity: 1;
  }

  14% {
    opacity: 0.9;
    transform: translateX(1800px) translateY(500px);
  }

  18% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateX(1800px) translateY(500px);
  }
}

/* =========================
   STAR POSITIONS
========================= */

.star-1 {
  top: 15%;
  left: 50%;
}

.star-2 {
  top: 35%;
  left: 75%;
}

.star-3 {
  top: 65%;
  left: 65%;
}

.star-4 {
  top: 70%;
  left: 30%;
}

.star-5 {
  top: 35%;
  left: 15%;
}

/* =========================
   CHAPTER PAGES
========================= */

.chapter {
  min-height: 100vh;

  position: relative;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(65, 95, 180, 0.22) 0%,
      rgba(10, 18, 45, 0.96) 40%,
      #02040b 80%,
      #000000 100%
    );

  color: white;

  padding: 60px;
}

.chapter-content {
  max-width: 900px;

  margin: 0 auto;

  padding-top: 100px;

  text-align: center;
}

.chapter-number {
  color: #9eb3ff;

  letter-spacing: 4px;

  font-size: 12px;

  margin-bottom: 10px;
}

.chapter h1 {
  font-size: 42px;

  font-weight: normal;

  margin-top: 0;
}

.chapter-content p {
  color: #d5dcff;

  line-height: 1.7;
}

.back-button {
  position: absolute;

  top: 30px;
  left: 30px;

  background: transparent;

  border: 1px solid rgba(255,255,255,0.25);

  color: white;

  padding: 10px 16px;

  border-radius: 8px;

  font-family: "Courier New", monospace;

  cursor: pointer;

  transition: 0.25s;
}

.back-button:hover {
  background: rgba(255,255,255,0.08);

  border-color: rgba(255,255,255,0.5);
}

/* =========================
   TIME REWIND TRANSITION
========================= */

.rewind-transition {
  position: fixed;
  inset: 0;

  background: transparent;

  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none;
}


/* =========================
   VISUAL CONTAINER
========================= */

.rewind-visuals {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 140px;

  opacity: 0;

  transform: scale(1.08);

  filter: blur(2px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease,
    filter 1.2s ease;
}

.rewind-transition.active .rewind-visuals {
  opacity: 0.28;

  transform: scale(1);

  filter: blur(1px);
}


.rewind-transition.active .rewind-visuals {
  opacity: 1;

  transform: scale(1);
}


/* =========================
   OLD CALENDAR
========================= */

.calendar {
  width: 220px;

  background: rgba(70, 62, 50, 0.35);

  border-radius: 3px;

  overflow: hidden;

  box-shadow:
    0 0 35px rgba(0, 0, 0, 0.7);

  transform: rotate(2deg);

  opacity: 0.7;
}


.calendar-top {
  height: 55px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(70, 25, 25, 0.35);

  color: rgba(220, 210, 190, 0.55);

  font-size: 14px;
  letter-spacing: 4px;
}

.calendar-page {
  height: 170px;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  color: rgba(225, 215, 195, 0.55);

  font-family: Georgia, serif;

  font-size: 58px;
  font-weight: bold;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.12),
      transparent 20%,
      transparent 80%,
      rgba(0,0,0,0.12)
    ),
    rgba(60, 55, 45, 0.28);

  transform-origin: top center;
}


/* little paper texture */

.calendar-page::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.2;

  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(80,60,40,0.08) 4px
    );

  pointer-events: none;
}


/* paper gets torn / thrown away */

.calendar-page.tear-page {
  animation: tearCalendarPage 0.42s ease-in forwards;
}


@keyframes tearCalendarPage {

  0% {
    opacity: 1;

    transform:
      translateY(0)
      rotate(0deg);
  }

  35% {
    transform:
      translateY(10px)
      rotate(-3deg);
  }

  100% {
    opacity: 0;

    transform:
      translateY(130px)
      translateX(-40px)
      rotate(-16deg);
  }

}


/* =========================
   CLOCK
========================= */

.rewind-clock {
  width: 220px;
  height: 220px;

  position: relative;

  border-radius: 50%;

  border: 8px solid rgba(113, 73, 37, 0.78);

  background:
    radial-gradient(
      circle at center,
      rgba(205, 178, 135, 0.42) 0%,
      rgba(139, 95, 54, 0.34) 55%,
      rgba(65, 39, 20, 0.45) 100%
    );

  box-shadow:
    0 0 30px rgba(80, 50, 25, 0.25),
    inset 0 0 28px rgba(0, 0, 0, 0.5),
    inset 0 0 6px rgba(255, 220, 170, 0.15);

  opacity: 0.72;
}


/* inner clock ring */

.rewind-clock::before {
  content: "";

  position: absolute;

  inset: 14px;

  border-radius: 50%;

  border: 2px solid rgba(214, 184, 138, 0.35);

  pointer-events: none;
}


/* CLOCK NUMBERS */

.clock-number {
  position: absolute;

  color: rgba(238, 211, 167, 0.85);

  font-family: Georgia, serif;

  font-size: 21px;

  font-weight: bold;

  text-shadow:
    0 1px 3px rgba(0,0,0,0.9);
}


.clock-12 {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.clock-3 {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.clock-6 {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.clock-9 {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}


/* CLOCK HANDS */

.clock-hand {
  position: absolute;

  left: 50%;
  bottom: 50%;

  transform-origin: bottom center;

  border-radius: 4px;

  z-index: 3;

  box-shadow:
    0 0 4px rgba(0,0,0,0.8);
}


.hour-hand {
  width: 5px;
  height: 58px;

  background: rgba(235, 205, 155, 0.9);
}


.minute-hand {
  width: 3px;
  height: 82px;

  background: rgba(245, 220, 180, 0.95);
}


.clock-center {
  width: 14px;
  height: 14px;

  background: #a8743d;

  border: 2px solid #5c351c;

  border-radius: 50%;

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 4;

  box-shadow:
    0 0 5px rgba(0,0,0,0.7);
}


/* reverse spinning */

.rewind-transition.active .hour-hand {
  animation: rewindHour 3.5s linear forwards;
}


.rewind-transition.active .minute-hand {
  animation: rewindMinute 3.5s linear forwards;
}


@keyframes rewindHour {

  from {
    transform: rotate(60deg);
  }

  to {
    transform: rotate(-660deg);
  }

}


@keyframes rewindMinute {

  from {
    transform: rotate(200deg);
  }

  to {
    transform: rotate(-1960deg);
  }

}


/* =========================
   CONSTELLATION REWIND EFFECT
========================= */

.landing-screen.rewind-start .star-node:not(.star-1) {
  opacity: 0;

  transition: opacity 1.2s ease;
}


.landing-screen.rewind-start .landing-header {
  opacity: 0;

  transition: opacity 1.2s ease;
}


.landing-screen.rewind-start::before {
  opacity: 0.1;

  transition: opacity 2.5s ease;
}


.landing-screen.rewind-start::after {
  opacity: 0;

  transition: opacity 2.5s ease;
}


/* selected star brightens */

.star-1.rewind-selected .star-dot {

  transform: scale(2);

  box-shadow:
    0 0 20px white,
    0 0 50px rgba(200,220,255,1),
    0 0 100px rgba(130,160,255,0.8);

  transition:
    transform 0.8s ease,
    box-shadow 0.8s ease;
}

/* =========================
   BIRTHDAY DESK
========================= */

.birthday-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #28170d;
  color: #493322;
}

.birthday-screen,
.birthday-screen * {
  box-sizing: border-box;
}

.birthday-screen .birthday-desk {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
}

/* WOOD SURFACE */

.birthday-screen .desk-surface {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    /* Uneven patches in the wood */
    radial-gradient(
      ellipse at 18% 35%,
      rgba(174, 104, 43, 0.16),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 78% 80%,
      rgba(12, 5, 2, 0.38),
      transparent 55%
    ),

    /* Fine grain */
    repeating-linear-gradient(
      2deg,
      transparent 0,
      rgba(16, 7, 2, 0.2) 1px,
      transparent 2px,
      transparent 7px
    ),
    repeating-linear-gradient(
      -1deg,
      rgba(210, 145, 75, 0.06) 0,
      transparent 2px,
      transparent 5px,
      rgba(15, 6, 2, 0.13) 6px,
      transparent 8px,
      transparent 15px
    ),

    /* Wider grain bands */
    repeating-linear-gradient(
      0deg,
      #482715 0,
      #58321b 24px,
      #613a20 46px,
      #492916 70px,
      #3e2213 73px,
      #512e19 110px
    );
}

/* Subtle seams between wooden boards */
.birthday-screen .desk-surface::after {
  content: "";
  position: absolute;
  inset: 0;

  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 239px,
    rgba(10, 4, 1, 0.4) 240px,
    rgba(209, 143, 79, 0.1) 242px,
    transparent 244px,
    transparent 480px
  );
}

/* Warm illumination and darkened edges */
.birthday-screen .desk-lighting {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 9% 10%,
      rgba(255, 182, 82, 0.16),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 50% 45%,
      transparent 25%,
      rgba(12, 5, 2, 0.42) 100%
    );
}

/* =========================
   SHEET MUSIC
========================= */

.birthday-screen .desk-sheet-music {
  position: absolute;
  left: -3%;
  top: 27%;
  z-index: 1;

  width: clamp(210px, 25vw, 370px);
  height: clamp(310px, 48vh, 490px);
  padding: 32px 24px;

  transform: rotate(-13deg);
  color: #493b2c;

  background:
    linear-gradient(
      105deg,
      rgba(104, 64, 27, 0.15),
      transparent 30%,
      rgba(255, 255, 255, 0.18) 65%,
      rgba(96, 57, 24, 0.13)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(100, 73, 40, 0.025) 0,
      rgba(100, 73, 40, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    #d9c39c;

  border: 1px solid rgba(87, 55, 28, 0.25);

  box-shadow:
    3px 9px 14px rgba(0, 0, 0, 0.35),
    inset 0 0 35px rgba(115, 74, 33, 0.14);
}

.birthday-screen .music-paper-heading {
  margin-bottom: 35px;
  text-align: center;
  font-size: 20px;
  font-style: italic;
}

.birthday-screen .music-staff {
  position: relative;
  height: 42px;
  margin-bottom: 42px;

  background: repeating-linear-gradient(
    to bottom,
    rgba(64, 49, 32, 0.7) 0,
    rgba(64, 49, 32, 0.7) 1px,
    transparent 1px,
    transparent 10px
  );

  background-size: 100% 41px;
  background-repeat: no-repeat;
}

.birthday-screen .music-clef {
  position: absolute;
  top: -17px;
  left: 0;
  font-size: 52px;
}

.birthday-screen .music-notes {
  position: absolute;
  left: 42px;
  top: -7px;

  font-size: 31px;
  letter-spacing: 8px;
  white-space: nowrap;
}

/* =========================
   CANDLE — OVERHEAD VIEW
========================= */

.birthday-screen .desk-candle {
  position: absolute;
  left: 4%;
  top: 3%;
  z-index: 3;

  width: clamp(100px, 12vw, 175px);
  aspect-ratio: 1;
}

.birthday-screen .candle-halo {
  position: absolute;
  inset: -95%;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255, 170, 50, 0.25),
    rgba(244, 133, 30, 0.09) 38%,
    transparent 68%
  );

  pointer-events: none;
}

.birthday-screen .candle-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 10%;

  background:
    conic-gradient(
      from 20deg,
      #ab733b,
      #f4d4a0,
      #77502e,
      #e6bf80,
      #805333,
      #f8d9a3,
      #ab733b
    );

  box-shadow:
    8px 13px 18px rgba(0, 0, 0, 0.38),
    inset 0 0 0 3px rgba(255, 238, 200, 0.4),
    0 0 28px rgba(255, 180, 70, 0.15);
}

.birthday-screen .candle-wax {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  background: radial-gradient(
    circle at 46% 44%,
    #fff1bd 0,
    #f4d891 33%,
    #d8ad65 72%,
    #a77636 100%
  );

  box-shadow:
    inset 0 2px 7px rgba(109, 65, 20, 0.45),
    inset 0 0 15px rgba(255, 239, 177, 0.5);
}

.birthday-screen .candle-wick {
  position: absolute;
  left: 49%;
  top: 47%;
  width: 4px;
  height: 13px;
  border-radius: 50%;
  background: #443024;
  transform: rotate(-15deg);
}

.birthday-screen .candle-flame {
  position: absolute;
  left: 43%;
  top: 29%;
  width: 19%;
  height: 33%;

  border-radius: 65% 35% 55% 45%;
  transform: rotate(-20deg);

  background: radial-gradient(
    ellipse at 50% 70%,
    #ffffff 0,
    #fffce8 28%,
    #ffe7a0 55%,
    #ffbf4a 80%,
    transparent 100%
  );

  box-shadow:
    0 0 15px rgba(255, 218, 130, 0.85),
    0 0 35px rgba(255, 177, 54, 0.6);
}

/* =========================
   TEA — OVERHEAD VIEW
========================= */

.birthday-screen .desk-tea {
  position: absolute;
  right: 3%;
  top: -3%;
  z-index: 3;

  width: clamp(160px, 21vw, 310px);
  aspect-ratio: 1;

  transform: rotate(14deg);
}

.birthday-screen .tea-saucer {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    #cbbfa6 0,
    #e9dfca 47%,
    #b8a78c 50%,
    #f5ead6 54%,
    #e6d8bd 66%,
    #b88a45 67%,
    #eed8ae 69%,
    #9c7137 70%,
    #e7d8bb 72%
  );

  box-shadow:
    9px 15px 22px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.55);
}

.birthday-screen .tea-handle {
  position: absolute;
  right: 0;
  top: 40%;
  z-index: 1;

  width: 28%;
  height: 22%;

  border: 10px solid #dfd0b2;
  border-left-width: 8px;
  border-radius: 45%;

  box-shadow:
    3px 5px 6px rgba(0, 0, 0, 0.28),
    inset 1px 1px 3px rgba(69, 43, 20, 0.4);
}

.birthday-screen .tea-cup {
  position: absolute;
  inset: 13%;
  z-index: 2;

  padding: 8%;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    #aa9270 58%,
    #f8eedc 65%,
    #fff6e5 69%,
    #bc9456 72%,
    #e9d3a8 74%,
    #c9b797 80%
  );

  box-shadow:
    5px 8px 12px rgba(0, 0, 0, 0.3),
    inset 0 2px 3px rgba(255, 255, 255, 0.75);
}

.birthday-screen .tea-liquid {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 35% 25%,
      rgba(233, 160, 54, 0.42),
      transparent 50%
    ),
    radial-gradient(
      circle at 52% 56%,
      #8f460c,
      #713007 65%,
      #3e1a06 100%
    );

  box-shadow: inset 3px 7px 13px rgba(31, 12, 2, 0.65);
}

.birthday-screen .tea-reflection {
  position: absolute;
  left: 12%;
  top: 10%;
  width: 46%;
  height: 15%;
  border-radius: 50%;

  background: rgba(255, 222, 160, 0.16);
  filter: blur(5px);
  transform: rotate(-30deg);
}

/* =========================
   SAKURA PETALS
========================= */

.birthday-screen .desk-petals {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.birthday-screen .sakura-petal {
  position: absolute;
  width: 27px;
  height: 37px;

  border-radius: 75% 35% 65% 35%;

  background:
    linear-gradient(
      120deg,
      rgba(255, 248, 240, 0.65),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 70% 85%,
      #ba7a78,
      #dbaba5 45%,
      #ecd0c3 90%
    );

  box-shadow:
    2px 3px 3px rgba(35, 13, 5, 0.28),
    inset 1px 0 2px rgba(255, 239, 225, 0.65);
}

.birthday-screen .petal-1 {
  left: 26%;
  top: 17%;
  transform: rotate(25deg);
}

.birthday-screen .petal-2 {
  left: 20%;
  top: 48%;
  transform: rotate(110deg) scale(0.8);
}

.birthday-screen .petal-3 {
  left: 31%;
  bottom: 13%;
  transform: rotate(-40deg);
}

.birthday-screen .petal-4 {
  right: 23%;
  bottom: 19%;
  transform: rotate(70deg) scale(0.85);
}

.birthday-screen .petal-5 {
  right: 27%;
  top: 24%;
  transform: rotate(-80deg) scale(0.7);
}

/* =========================
   MUSICAL PROGRAMME
========================= */

.birthday-screen .desk-programme {
  position: absolute;
  right: -2%;
  bottom: -7%;
  z-index: 2;

  width: clamp(190px, 23vw, 330px);
  height: clamp(270px, 39vh, 410px);
  padding: 17px;

  transform: rotate(16deg);

  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.2) 0,
      transparent 12px,
      rgba(190, 64, 33, 0.08) 24px,
      rgba(0, 0, 0, 0.24) 38px
    ),
    linear-gradient(110deg, #24120f, #51221a 50%, #1b100e);

  border: 2px solid #8c6843;

  box-shadow:
    5px 10px 17px rgba(0, 0, 0, 0.45),
    inset 0 0 25px rgba(0, 0, 0, 0.65);
}

.birthday-screen .programme-border {
  height: 100%;
  padding: 35px 12px;
  border: 1px solid rgba(190, 153, 90, 0.55);
  text-align: center;
}

.birthday-screen .programme-small {
  display: block;
  color: #ba9b6d;
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
}

.birthday-screen .programme-title {
  display: block;
  margin-top: 24px;

  color: #dac08a;
  font-size: clamp(25px, 3vw, 43px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 3px;

  text-shadow: 0 2px 3px #100806;
}

.birthday-screen .programme-rule {
  width: 65%;
  height: 1px;
  margin: 25px auto 0;
  background: #ad8952;
}

/* =========================
   FOUNTAIN PEN
========================= */

.birthday-screen .desk-pen {
  position: absolute;
  left: 18%;
  bottom: 6%;
  z-index: 4;

  width: 24px;
  height: clamp(170px, 25vh, 260px);

  transform: rotate(-35deg);
  filter: drop-shadow(5px 7px 4px rgba(0, 0, 0, 0.5));
}

.birthday-screen .pen-barrel {
  position: absolute;
  inset: 0;
  border-radius: 12px 12px 9px 9px;

  background: linear-gradient(
    90deg,
    #080807,
    #292923 25%,
    #535047 35%,
    #151612 47%,
    #050605 85%,
    #24241e
  );
}

.birthday-screen .pen-cap {
  position: absolute;
  inset: 0 0 auto;
  height: 43%;

  border-radius: 12px 12px 3px 3px;
  border-top: 5px solid #b89953;

  background: linear-gradient(
    90deg,
    #0a0a08,
    #35342c 32%,
    #0c0d0a 55%,
    #030403
  );
}

.birthday-screen .pen-band {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 42%;
  z-index: 2;
  height: 9px;

  background: linear-gradient(
    90deg,
    #725021,
    #f3d58e 35%,
    #b18941 65%,
    #64451c
  );
}

.birthday-screen .pen-clip {
  position: absolute;
  top: 5%;
  left: 7px;
  z-index: 3;
  width: 5px;
  height: 30%;
  border-radius: 3px;

  background: linear-gradient(90deg, #9e7834, #f3dba1, #8c662c);
}

/* =========================
   CLOSED ENVELOPE
========================= */

.birthday-screen .birthday-envelope-area {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 5;

  width: min(46vw, 650px);
  aspect-ratio: 1.55;

  transform: translate(-50%, -50%) rotate(-5deg);
}

.birthday-screen .birthday-envelope {
  position: relative;
  width: 100%;
  height: 100%;

  filter: drop-shadow(4px 12px 8px rgba(20, 9, 3, 0.48));
}

.birthday-screen .envelope-back {
  position: absolute;
  inset: 0;
  z-index: 0;

  border-radius: 2px;
  background: #d8c3a0;
  border: 1px solid #baa17a;
}

/* Paper folds, with fine texture */
.birthday-screen .envelope-front {
  position: absolute;
  inset: 0;
  z-index: 2;

  border: 1px solid rgba(134, 106, 69, 0.4);
  border-radius: 2px;

  background:
    /* Diagonal seam lines */
    linear-gradient(
      33deg,
      transparent 49.6%,
      rgba(142, 112, 74, 0.28) 49.9%,
      rgba(255, 248, 226, 0.4) 50.1%,
      transparent 50.4%
    ),
    linear-gradient(
      -33deg,
      transparent 49.6%,
      rgba(142, 112, 74, 0.23) 49.9%,
      rgba(255, 248, 226, 0.4) 50.1%,
      transparent 50.4%
    ),

    /* Fine paper texture */
    repeating-linear-gradient(
      0deg,
      rgba(104, 79, 46, 0.025) 0,
      rgba(104, 79, 46, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),

    linear-gradient(125deg, #efe1c5, #dfccaa 65%, #d5bf98);

  box-shadow:
    inset 0 1px 2px rgba(255, 252, 232, 0.8),
    inset 0 -2px 3px rgba(116, 83, 45, 0.12);
}

/* Wrapper supplies the flap's shadow */
.birthday-screen .envelope-flap {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 61%;

  transform-origin: top center;
  filter: drop-shadow(0 2px 1px rgba(97, 66, 32, 0.3));
}

.birthday-screen .envelope-flap::before {
  content: "";
  position: absolute;
  inset: 0;

  clip-path: polygon(0 0, 100% 0, 50% 100%);

  background:
    repeating-linear-gradient(
      20deg,
      rgba(117, 89, 53, 0.025) 0,
      rgba(117, 89, 53, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(160deg, #f1e4c9, #e5d3b2 65%, #d6bd94);

  box-shadow: inset 0 1px rgba(255, 250, 226, 0.8);
}

.birthday-screen .envelope-address {
  position: absolute;
  inset: 0;
  z-index: 4;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding-top: 12%;
  pointer-events: none;
  color: #4b3728;
}

.birthday-screen .envelope-recipient {
  font-family: "Segoe Script", "Snell Roundhand", cursive;
  font-size: clamp(25px, 3.5vw, 51px);
  font-weight: normal;
  line-height: 1.4;
}

.birthday-screen .envelope-occasion {
  margin-top: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 1.4vw, 19px);
  font-style: italic;
  letter-spacing: 1px;
}

/* =========================
   LETTER — HIDDEN FOR NOW
========================= */

.birthday-screen .birthday-letter[hidden] {
  display: none !important;
}

.birthday-screen .birthday-letter {
  position: absolute;
  inset: 5%;
  z-index: 1;
  padding: 8%;

  color: #443225;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(105, 79, 43, 0.025) 0,
      rgba(105, 79, 43, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(120deg, #f5ead2, #e9d9b9);

  box-shadow: 0 3px 8px rgba(35, 19, 7, 0.2);
}

.birthday-screen .letter-content {
  font-size: 18px;
  line-height: 1.8;
}

.birthday-screen .letter-greeting,
.birthday-screen .letter-signature {
  font-family: "Segoe Script", "Snell Roundhand", cursive;
  font-size: 27px;
}

/* =========================
   SMALLER SCREENS
========================= */

@media (max-width: 700px) {
  .birthday-screen .birthday-envelope-area {
    width: 78vw;
    top: 52%;
    transform: translate(-50%, -50%) rotate(-4deg);
  }

  .birthday-screen .envelope-recipient {
    font-size: clamp(27px, 7vw, 42px);
  }

  .birthday-screen .envelope-occasion {
    font-size: 14px;
  }

  .birthday-screen .desk-candle {
    width: 110px;
    left: -3%;
    top: 4%;
  }

  .birthday-screen .desk-tea {
    width: 170px;
    right: -12%;
    top: 1%;
  }

  .birthday-screen .desk-sheet-music {
    width: 200px;
    height: 310px;
    left: -120px;
    top: 27%;
    transform: rotate(-16deg);
  }

  .birthday-screen .desk-programme {
    width: 190px;
    height: 270px;
    right: -70px;
    bottom: -70px;
  }

  .birthday-screen .programme-title {
    font-size: 27px;
  }

  .birthday-screen .desk-pen {
    left: 15%;
    bottom: 4%;
    height: 160px;
    width: 21px;
  }

  .birthday-screen .petal-1 {
    left: 35%;
    top: 22%;
  }

  .birthday-screen .petal-3 {
    left: 36%;
    bottom: 22%;
  }

  .birthday-screen .petal-5 {
    right: 20%;
    top: 31%;
  }
}

/* Replace the coded wood with a realistic texture */
.birthday-screen .desk-surface {
  background: #482715 url("Wood/wood.png")
    center / cover no-repeat;
}

/* Remove the artificial board lines */
.birthday-screen .desk-surface::after {
  display: none;
}

/* Realistic sakura branch */
.birthday-screen .desk-sakura-branch {
  position: absolute;
  top: -7%;
  left: 14%;
  z-index: 3;

  width: clamp(220px, 27vw, 420px);
  height: auto;

  transform: rotate(65deg);
  transform-origin: center;

  /* Blend with the desk's warm lighting */
  filter:
    brightness(0.88)
    sepia(0.12)
    drop-shadow(3px 5px 3px rgba(25, 12, 5, 0.35));

  pointer-events: none;
  user-select: none;
}

@media (max-width: 700px) {
  .birthday-screen .desk-sakura-branch {
    width: 220px;
    top: 8%;
    left: 20%;
    transform: rotate(75deg);
  }
}
@media (min-width: 701px) {
  .birthday-screen .desk-sakura-branch {
    left: 25%;
  }
}

/* Actual Senbonzakura sheet music */
.birthday-screen .desk-sheet-music {
  height: auto;
  padding: 0;
  background: #e8d6b3;
}

.birthday-screen .sheet-music-image {
  display: block;
  width: 100%;
  height: auto;

  /* Give the white page a warm paper tone */
  mix-blend-mode: multiply;

  user-select: none;
  pointer-events: none;
}

/* Autodrop beside the envelope */
.birthday-screen .desk-autodrop {
  position: absolute;
  right: 3%;
  top: 34%;
  z-index: 3;

  width: clamp(110px, 13vw, 200px);
  height: auto;

  transform: rotate(12deg);

  filter:
    brightness(0.9)
    sepia(0.08)
    drop-shadow(4px 7px 5px rgba(25, 12, 5, 0.4));

  pointer-events: none;
  user-select: none;
}

@media (max-width: 700px) {
  .birthday-screen .desk-autodrop {
    width: 100px;
    right: 1%;
    top: 27%;
  }
}
/* Musical script on paper */
.birthday-screen .desk-programme {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(100, 73, 40, 0.025) 0,
      rgba(100, 73, 40, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    #e8d6b3;

  border: 1px solid rgba(87, 55, 28, 0.25);

  box-shadow:
    3px 9px 14px rgba(0, 0, 0, 0.35),
    inset 0 0 25px rgba(115, 74, 33, 0.08);
}

/* Remove the decorative cover border */
.birthday-screen .programme-border {
  border-color: transparent;
}

/* Printed ink instead of gold lettering */
.birthday-screen .programme-small,
.birthday-screen .programme-title {
  color: #493b2c;
  text-shadow: none;
}

.birthday-screen .programme-rule {
  background: rgba(73, 59, 44, 0.5);
}

/* =========================
   DEEP BLUE ENVELOPE
========================= */

.birthday-screen .envelope-back {
  background: #293c54;
  border-color: #1e2e43;
}

.birthday-screen .envelope-front {
  border-color: rgba(18, 30, 47, 0.65);

  background:
    linear-gradient(
      33deg,
      transparent 49.6%,
      rgba(12, 23, 39, 0.4) 49.9%,
      rgba(171, 190, 212, 0.22) 50.1%,
      transparent 50.4%
    ),
    linear-gradient(
      -33deg,
      transparent 49.6%,
      rgba(12, 23, 39, 0.35) 49.9%,
      rgba(171, 190, 212, 0.22) 50.1%,
      transparent 50.4%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(222, 231, 241, 0.035) 0,
      rgba(222, 231, 241, 0.035) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(
      125deg,
      #49617d,
      #344b68 65%,
      #293d57
    );

  box-shadow:
    inset 0 1px 2px rgba(196, 211, 231, 0.25),
    inset 0 -2px 3px rgba(9, 18, 31, 0.3);
}

.birthday-screen .envelope-flap {
  filter: drop-shadow(0 2px 2px rgba(8, 16, 28, 0.5));
}

.birthday-screen .envelope-flap::before {
  background:
    repeating-linear-gradient(
      20deg,
      rgba(222, 231, 241, 0.035) 0,
      rgba(222, 231, 241, 0.035) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(
      160deg,
      #536c88,
      #405976 65%,
      #304761
    );

  box-shadow: inset 0 1px rgba(196, 211, 231, 0.3);
}

.birthday-screen .envelope-address {
  color: #f3e7cf;
  text-shadow: 0 1px 1px rgba(12, 23, 39, 0.3);
}

/* Multiple loose sheets beneath the script cover */
.birthday-screen .desk-programme {
  isolation: isolate;
  overflow: visible;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* Individual full-size sheets */
.birthday-screen .script-page {
  position: absolute;
  inset: 0;
  border: 1px solid #baae98;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(65, 57, 46, 0.23) 0 1px,
      transparent 1px 9px
    ) center 30px / 78% 78% no-repeat,
    #eee7d9;

  box-shadow: 3px 5px 7px rgba(25, 15, 7, 0.28);
  transform-origin: 50% 75%;
}

.birthday-screen .script-page-1 {
  z-index: 0;
  transform: translate(-35px, -22px) rotate(-12deg);
}

.birthday-screen .script-page-2 {
  z-index: 1;
  transform: translate(22px, -17px) rotate(9deg);
  background-color: #e5dccb;
}

.birthday-screen .script-page-3 {
  z-index: 2;
  transform: translate(-16px, -9px) rotate(-5deg);
}

/* Your existing front page sits above the loose sheets */
.birthday-screen .programme-border {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(100, 73, 40, 0.025) 0 1px,
      transparent 1px 3px
    ),
    #e8d6b3;

  border: 1px solid rgba(87, 55, 28, 0.25);

  box-shadow:
    2px 4px 6px rgba(25, 15, 7, 0.24),
    inset 0 0 25px rgba(115, 74, 33, 0.08);
}

/* Slightly larger, uncapped fountain pen */
.birthday-screen .desk-pen {
  display: block;
  scale: 1.1;
  overflow: visible;
}

/* Main pen body */
.birthday-screen .desk-pen .pen-barrel {
  position: absolute;
  inset: 23% 0 0;
  width: 100%;
  height: auto;
  border-radius: 4px 4px 9px 9px;

  background: linear-gradient(
    90deg,
    #111 0%,
    #34332e 30%,
    #171715 55%,
    #080808 100%
  );

  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.35);
}

/* Exposed gold nib */
.birthday-screen .desk-pen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 24%;

  background: linear-gradient(
    90deg,
    #987039,
    #f1d895 40%,
    #c29a50 70%,
    #89612e
  );

  clip-path: polygon(
    50% 0,
    95% 58%,
    80% 100%,
    20% 100%,
    5% 58%
  );
}

/* Fine split down the nib */
.birthday-screen .desk-pen::after {
  content: "";
  position: absolute;
  top: 3%;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 15%;
  background: #69502d;
}

/* Gold ring at the grip */
.birthday-screen .desk-pen .pen-band {
  position: absolute;
  inset: 25% -2% auto;
  width: 104%;
  height: 3%;
  background: linear-gradient(90deg, #92703c, #ead398, #a27d42);
}

/* Detached cap beside the pen */
.birthday-screen .desk-pen .pen-cap {
  position: absolute;
  inset: 48% auto auto 180%;
  width: 110%;
  height: 48%;
  transform: rotate(8deg);
  border-radius: 8px 8px 3px 3px;

  background: linear-gradient(
    90deg,
    #10100f,
    #393831 35%,
    #171715 65%,
    #080808
  );

  border-bottom: 4px solid #b99a5b;
  box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.35);
}

/* Gold clip attached to the detached cap */
.birthday-screen .desk-pen .pen-clip {
  display: none;
}

.birthday-screen .desk-pen .pen-cap::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 30%;
  width: 15%;
  height: 62%;
  border-radius: 3px;

  background: linear-gradient(90deg, #98753d, #ead598, #af894a);
}
/* Photo replacement for the tea */
.birthday-screen .desk-tea-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  filter: drop-shadow(5px 8px 7px rgba(25, 14, 6, 0.35));

  pointer-events: none;
  user-select: none;
}

/* =========================
   OPEN THE BIRTHDAY LETTER
========================= */

.birthday-screen .birthday-envelope {
  cursor: pointer;
}

.birthday-screen .birthday-envelope:focus-visible {
  outline: 2px solid #f3e7cf;
  outline-offset: 12px;
}

.birthday-screen .envelope-flap {
  transition:
    transform 800ms ease,
    z-index 0ms 400ms;
}

.birthday-screen .envelope-address {
  transition: opacity 300ms ease;
}

/* Fold the flap away */
.birthday-screen .birthday-envelope.is-open .envelope-flap {
  transform: perspective(1000px) rotateX(180deg);
  z-index: 0;
}

.birthday-screen .birthday-envelope.is-open .envelope-address {
  opacity: 0;
}

.birthday-screen .birthday-envelope.is-open {
  cursor: default;
}

/* Paper inside the envelope */
.birthday-screen .birthday-letter {
  position: absolute;
  inset: 5%;
  z-index: 1;
  margin: 0;
  padding: 7%;
  overflow: auto;
  cursor: auto;

  color: #443225;
  background: linear-gradient(135deg, #fff9ed, #eee2ca);
  border: 1px solid rgba(130, 105, 70, 0.25);
  box-shadow: 0 5px 15px rgba(25, 14, 6, 0.25);

  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.7;
  text-align: left;
}

/* Wait for the flap, then lift and bring the paper forward */
.birthday-screen .birthday-envelope.is-open .birthday-letter {
  animation: birthday-letter-out 1600ms ease-in-out 850ms both;
}

@keyframes birthday-letter-out {
  0% {
    transform: translateY(0);
    z-index: 1;
  }

  55% {
    transform: translateY(-65%);
    z-index: 1;
  }

  56% {
    transform: translateY(-65%);
    z-index: 5;
  }

  100% {
    transform: translateY(-8%);
    z-index: 5;
  }
}

.birthday-screen .letter-greeting {
  margin: 0 0 18px;
}

.birthday-screen .letter-message {
  margin: 0 0 20px;
}

.birthday-screen .letter-signature {
  margin: 20px 0 0;
  font-style: italic;
}

/* Show the finished state immediately if reduced motion is enabled */
@media (prefers-reduced-motion: reduce) {
  .birthday-screen .envelope-flap,
  .birthday-screen .envelope-address {
    transition: none;
  }

  .birthday-screen .birthday-envelope.is-open .birthday-letter {
    animation: none;
    transform: translateY(-8%);
    z-index: 5;
  }
}
.birthday-screen .envelope-flap {
  transition:
    transform 1120ms ease,
    z-index 0ms 560ms;
}

.birthday-screen .envelope-address {
  transition: opacity 420ms ease;
}

.birthday-screen .birthday-envelope.is-open .birthday-letter {
  animation-duration: 2240ms;
  animation-delay: 1190ms;
}

@media (prefers-reduced-motion: reduce) {
  .birthday-screen .envelope-flap,
  .birthday-screen .envelope-address {
    transition: none;
  }
}

/* Temporary birthday holding page */
.birthday-soon {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 30px;
  background: #080709;
  color: #f5ead9;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
}

.soon-message {
  position: relative;
  z-index: 2;
  max-width: 620px;
  animation: soon-reveal 1.8s ease both;
}

.soon-eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: 5px;
  color: #c8ab79;
}

.soon-message h1 {
  margin: 0 0 28px;
  font-size: clamp(38px, 7vw, 76px);
  font-weight: normal;
  line-height: 1.15;
}

.soon-personal {
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.9;
  color: #d1c6bb;
}

.soon-status {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 20px;
  border-top: 1px solid #725b3c;
  border-bottom: 1px solid #725b3c;
  color: #d8bd8b;
  font-size: 15px;
  letter-spacing: 2px;
}

.soon-signature {
  margin-top: 28px;
  color: #ad9c8c;
  font-style: italic;
}

/* Two red birthday balloons */
.soon-balloon {
  position: absolute;
  top: 22%;
  width: clamp(65px, 10vw, 130px);
  aspect-ratio: 0.8;
  border-radius: 50% 50% 47% 47%;
  background:
    radial-gradient(
      ellipse at 30% 25%,
      rgba(255, 226, 218, 0.6),
      transparent 25%
    ),
    radial-gradient(
      circle at 35% 30%,
      #d15b63,
      #a5293c 55%,
      #541420
    );
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.25);
  animation: balloon-float 5s ease-in-out infinite;
}

.soon-balloon::before {
  content: "";
  position: absolute;
  bottom: -7px;
  left: calc(50% - 6px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #962b3b;
}

.soon-balloon::after {
  content: "";
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  width: 18px;
  height: 180px;
  border-left: 1px solid rgba(230, 209, 179, 0.5);
  border-radius: 50%;
}

.balloon-left {
  left: 10%;
  rotate: -12deg;
}

.balloon-right {
  right: 10%;
  top: 32%;
  rotate: 12deg;
  animation-delay: -2.5s;
}

@keyframes balloon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes soon-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .soon-balloon {
    top: 8%;
    width: 65px;
    opacity: 0.8;
  }

  .balloon-left { left: 5%; }
  .balloon-right { right: 5%; top: 12%; }

  .soon-balloon::after {
    height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soon-message,
  .soon-balloon {
    animation: none;
  }
}

.code-display {
  white-space: nowrap;
  letter-spacing: 3px;
}

/* Fine black handwriting on the envelope */
.birthday-screen .envelope-address .envelope-name,
.birthday-screen .envelope-address .envelope-birthday {
  display: block;
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
  color: #141313;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.birthday-screen .envelope-address .envelope-name {
  font-size: clamp(38px, 4.5vw, 86px);
  line-height: 1.15;
}

.birthday-screen .envelope-address .envelope-birthday {
  margin-top: 10px;
  font-size: clamp(22px, 2.2vw, 42px);
  line-height: 1.2;
}

/* Replace the coded candle with an image */
.birthday-screen .desk-candle {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.birthday-screen .desk-candle::before,
.birthday-screen .desk-candle::after {
  content: none;
}

.birthday-screen .desk-candle .candle-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(5px 8px 7px rgba(0, 0, 0, 0.35));
}

/* Make the whole pen 30% bigger */
.birthday-screen .desk-pen {
  scale: 1.5;
  transform-origin: center;
}

/* Continue button inside the birthday letter */
.birthday-screen #birthday-continue {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin-top: 20px;
  padding: 10px 16px;

  border: 1px solid #75614d;
  border-radius: 4px;
  background: transparent;
  color: #403326;

  font: 16px Georgia, serif;
  letter-spacing: normal;
  cursor: pointer;
}

.birthday-screen #birthday-continue:hover {
  background: rgba(117, 97, 77, 0.1);
}

/* Tea transition screen */
#tea-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 32px 20px;
  box-sizing: border-box;

  background: #100e13;
  color: #eee2cf;
  text-align: center;
}

#tea-transition.hidden {
  display: none;
}

#tea-transition .tea-transition-content {
  width: min(100%, 680px);
  animation: tea-text-arrives 1.4s ease both;
}

#tea-transition .tea-line {
  margin: 0;
  font: clamp(24px, 4vw, 40px) / 1.6 Georgia, serif;
}

#tea-transition .tea-story {
  margin: 24px 0 36px;
  color: #c3b5a5;
  font: clamp(17px, 2.5vw, 23px) / 1.6 Georgia, serif;
}

#tea-transition #enter-story {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 12px 22px;

  border: 1px solid #b8a17e;
  border-radius: 4px;
  background: transparent;
  color: #eee2cf;

  font: 17px Georgia, serif;
  letter-spacing: normal;
  cursor: pointer;
}

#tea-transition #enter-story:hover {
  background: rgba(184, 161, 126, 0.12);
}

@keyframes tea-text-arrives {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tea-transition .tea-transition-content {
    animation: none;
  }
}

#tea-transition {
  background: #000;
}

#tea-transition .tea-transition-content {
  transition: opacity 2.5s ease;
}

#tea-transition.is-leaving .tea-transition-content {
  opacity: 0;
  pointer-events: none;
}

.landing-screen.story-arrival {
  animation: story-arrival 2s ease both;
}

@keyframes story-arrival {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#tea-transition .tea-transition-content {
  transition: opacity var(--tea-fade-duration, 8s) linear;
}

#tea-transition .tea-transition-content {
  animation: none;
  opacity: 1;
  transition: opacity var(--tea-fade-duration, 8s) linear;
}

#tea-transition.is-leaving .tea-transition-content {
  opacity: 0;
  pointer-events: none;
}

/* Stardust text reveal */
#tea-transition .tea-line {
  transition: opacity 0.8s ease;
}

#tea-transition.is-revealing .tea-line {
  opacity: 0;
}

#tea-transition.is-revealing.dust-text-ready .tea-line {
  opacity: 1;
}

#tea-transition.is-revealing .tea-story,
#tea-transition.is-revealing #enter-story {
  opacity: 0;
  visibility: hidden;
}

#tea-transition .tea-dust-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

#tea-transition .tea-story {
  transition: opacity 0.8s ease;
}

#tea-transition.is-revealing .tea-story {
  opacity: 0;
  visibility: visible;
}

#tea-transition.is-revealing.dust-text-ready .tea-story {
  opacity: 1;
}

#tea-transition #enter-story {
  transition: opacity 0.6s ease;
}

/* Stars appearing through the darkness */
#tea-transition .early-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease-in;
  z-index: 1;
}

#tea-transition .early-stars.is-visible {
  opacity: 1;
}

#tea-transition .early-star {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #e5edff;
  opacity: var(--star-brightness);
  box-shadow: 0 0 7px 2px rgba(190, 211, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  #tea-transition .early-stars {
    transition: none;
  }
}

/* MOBILE DESK AND LETTER FIX */
@media (max-width: 700px) {

  /* Smaller objects, positioned within the phone screen */
  .birthday-screen .desk-candle {
    width: 21vw;
    left: 4%;
    top: 5%;
  }

  .birthday-screen .desk-tea {
    width: 28vw;
    right: 3%;
    top: 4%;
  }

  .birthday-screen .desk-sakura-branch {
    width: 42vw;
    left: 25%;
    top: 12%;
  }

  .birthday-screen .desk-sheet-music {
    width: 30vw;
    height: auto;
    left: 2%;
    top: 33%;
    transform: rotate(-12deg);
  }

  .birthday-screen .desk-autodrop {
    width: 23vw;
    right: 4%;
    top: 30%;
  }

  .birthday-screen .desk-programme {
    width: 32vw;
    height: auto;
    aspect-ratio: 0.7;
    right: 7%;
    bottom: 5%;
  }

  .birthday-screen .programme-border {
    padding: 20px 8px;
  }

  .birthday-screen .programme-small {
    font-size: 9px;
  }

  .birthday-screen .programme-title {
    font-size: 20px;
    margin-top: 14px;
    letter-spacing: 1px;
  }

  .birthday-screen .programme-rule {
    margin-top: 16px;
  }

  .birthday-screen .script-page-1 {
    transform: translate(-12px, -8px) rotate(-12deg);
  }

  .birthday-screen .script-page-2 {
    transform: translate(8px, -6px) rotate(9deg);
  }

  .birthday-screen .script-page-3 {
    transform: translate(-6px, -3px) rotate(-5deg);
  }

  .birthday-screen .desk-pen {
    width: 12px;
    height: 28vw;
    left: 18%;
    bottom: 10%;
    scale: 1.1;
  }

  .birthday-screen .sakura-petal {
    width: 12px;
    height: 17px;
  }

  /* Slightly smaller envelope */
  .birthday-screen .birthday-envelope-area {
    width: 72vw;
    top: 48%;
  }

  .birthday-screen .envelope-address .envelope-name {
    font-size: 10vw;
  }

  .birthday-screen .envelope-address .envelope-birthday {
    font-size: 6vw;
    margin-top: 6px;
  }

  /* Taller letter with room for its button */
  .birthday-screen .birthday-letter {
    inset: auto;
    top: 5%;
    left: 5%;
    right: 5%;
    height: 60vh;
    height: min(420px, 60svh);
    padding: 18px;
    overflow: hidden;
  }

  .birthday-screen .letter-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.55;
  }

  .birthday-screen .letter-greeting {
    flex-shrink: 0;
    font-size: 24px;
    margin: 0 0 12px;
  }

  /* Longer messages scroll while signature and button stay visible */
  .birthday-screen .letter-message {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
  }

  .birthday-screen .letter-signature {
    flex-shrink: 0;
    font-size: 22px;
    margin: 12px 0 0;
  }

  .birthday-screen #birthday-continue {
    flex-shrink: 0;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* Keep the taller paper's movement within the screen */
  .birthday-screen .birthday-envelope.is-open .birthday-letter {
    animation-name: mobile-letter-out;
  }

  @keyframes mobile-letter-out {
    0% {
      transform: translateY(0);
      z-index: 1;
    }

    55% {
      transform: translateY(-35%);
      z-index: 1;
    }

    56% {
      transform: translateY(-35%);
      z-index: 5;
    }

    100% {
      transform: translateY(-30%);
      z-index: 5;
    }
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .birthday-screen .birthday-envelope.is-open .birthday-letter {
    animation: none;
    transform: translateY(-30%);
    z-index: 5;
  }
}

/* Fit the starry landing page onto a phone screen */
@media (max-width: 700px) {
  .landing-screen {
    position: fixed;
    inset: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;

    display: flex;
    flex-direction: column;
  }

  .landing-screen .landing-header {
    flex-shrink: 0;
    padding: 28px 20px 12px;
  }

  .landing-screen .landing-header h1 {
    margin: 0;
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.35;
  }

  .landing-screen .constellation {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  /* Centre each label beneath its star and allow wrapping */
  .landing-screen .star-node {
    width: 44%;
    max-width: 170px;
    padding: 8px;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .landing-screen .star-label {
    white-space: normal;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 12px;
  }

  .landing-screen .star-1 {
    left: 50%;
    top: 12%;
  }

  .landing-screen .star-2 {
    left: 76%;
    top: 36%;
  }

  .landing-screen .star-5 {
    left: 24%;
    top: 36%;
  }

  .landing-screen .star-3 {
    left: 72%;
    top: 70%;
  }

  .landing-screen .star-4 {
    left: 28%;
    top: 76%;
  }
}

/* CLEAN PAPER EXTRACTION */
.birthday-screen .birthday-letter {
  inset: auto;
  top: 5%;
  left: 5%;
  right: 5%;
  height: 90%;
}

.birthday-screen .birthday-envelope.is-open .birthday-letter {
  animation: clean-letter-out 2240ms ease-in-out 1190ms both;
}

@keyframes clean-letter-out {
  0% {
    transform: translateY(0);
    z-index: 1;
  }

  /* Fully clear the envelope before changing layers */
  45% {
    transform: translateY(-112%);
    z-index: 1;
  }

  46% {
    transform: translateY(-112%);
    z-index: 5;
  }

  65% {
    transform: translateY(-112%);
    z-index: 5;
  }

  100% {
    transform: translateY(-8%);
    z-index: 5;
  }
}

/* Phone: grow the paper only after it has come out */
@media (max-width: 700px) {
  .birthday-screen .birthday-envelope.is-open .birthday-letter {
    animation-name: clean-mobile-letter-out;
  }

  @keyframes clean-mobile-letter-out {
    0% {
      height: 90%;
      transform: translateY(0);
      z-index: 1;
    }

    45% {
      height: 90%;
      transform: translateY(-112%);
      z-index: 1;
    }

    46% {
      height: 90%;
      transform: translateY(-112%);
      z-index: 5;
    }

    65% {
      height: 90%;
      transform: translateY(-112%);
      z-index: 5;
    }

    100% {
      height: min(420px, 60svh);
      transform: translateY(-30%);
      z-index: 5;
    }
  }
}

/* Skip movement when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  .birthday-screen .birthday-envelope.is-open .birthday-letter {
    animation: none;
    transform: translateY(-8%);
    z-index: 5;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .birthday-screen .birthday-envelope.is-open .birthday-letter {
    height: min(420px, 60svh);
    transform: translateY(-30%);
  }
}

/* READING POSITION */
.birthday-screen .letter-reading-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
}

.birthday-screen .letter-reading-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  animation: letter-desk-dim 900ms ease both;
}

@keyframes letter-desk-dim {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.birthday-screen .birthday-letter.is-reading {
  position: fixed;
  inset: auto;
  z-index: 1;
  margin: 0;
  padding: clamp(20px, 4vw, 42px);
  overflow: hidden;
  animation: none !important;
  transform-origin: center;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.45);
}

.birthday-screen .birthday-letter.is-reading .letter-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
}

.birthday-screen .birthday-letter.is-reading .letter-greeting {
  flex-shrink: 0;
  font-size: 28px;
  margin: 0 0 20px;
}

.birthday-screen .birthday-letter.is-reading .letter-message {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
}

.birthday-screen .birthday-letter.is-reading .letter-signature {
  flex-shrink: 0;
  font-size: 25px;
  margin: 20px 0 0;
}

.birthday-screen .birthday-letter.is-reading #birthday-continue {
  flex-shrink: 0;
  align-self: flex-start;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .birthday-screen .letter-reading-backdrop {
    animation: none;
  }
}

/* Unfinished chapters */
.landing-screen .star-node.chapter-locked {
  cursor: default;
}

.landing-screen .chapter-locked .star-dot {
  opacity: 0.55;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.5),
    0 0 18px rgba(160, 180, 255, 0.35);
}

.landing-screen .chapter-locked:hover .star-dot {
  transform: none;
}

.landing-screen .chapter-locked .star-label {
  color: #aab3ce;
}

.landing-screen .star-coming-later {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #929bb5;
  letter-spacing: 0.5px;
}

/* Comfortable reading layout */
.birthday-screen .birthday-letter.is-reading .letter-content {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
  text-align: left;
}

.birthday-screen .birthday-letter.is-reading .letter-message {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding-right: 8px;

  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #b5a184 transparent;
}

.birthday-screen .birthday-letter.is-reading .letter-message p {
  margin: 0 0 1em;
}

.birthday-screen .birthday-letter.is-reading .letter-message p:last-child {
  margin-bottom: 0;
}

.birthday-screen .birthday-letter.is-reading .letter-message:focus-visible {
  outline: 1px solid #927959;
  outline-offset: 3px;
}

.birthday-screen .birthday-letter.is-reading .letter-greeting {
  flex-shrink: 0;
  margin: 0 0 18px;
}

.birthday-screen .birthday-letter.is-reading .letter-signature {
  flex-shrink: 0;
  margin: 16px 0 0;
}

.birthday-screen .birthday-letter.is-reading #birthday-continue {
  flex-shrink: 0;
  align-self: flex-start;
  max-width: 100%;
  min-height: 44px;

  margin-top: 14px;
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.4;
  white-space: normal;
}

@media (max-width: 700px) {
  .birthday-screen .birthday-letter.is-reading {
    padding: 24px 20px;
  }

  .birthday-screen .birthday-letter.is-reading .letter-content {
    font-size: 16px;
    line-height: 1.65;
  }

  .birthday-screen .birthday-letter.is-reading .letter-greeting {
    font-size: 26px;
    margin-bottom: 14px;
  }

  .birthday-screen .birthday-letter.is-reading .letter-signature {
    font-size: 23px;
    margin-top: 12px;
  }
}

/* Keep space for Continue, but hide it until reading time has passed */
.birthday-screen #birthday-continue {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.birthday-screen #birthday-continue.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .birthday-screen #birthday-continue {
    transition: none;
  }
}

/* Handwritten burgundy invitation */
.birthday-screen .birthday-letter.is-reading #birthday-continue {
  position: relative;
  align-self: flex-start;
  margin-top: 16px;
  padding: 6px 2px 12px;

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  color: #781f32;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(28px, 4.5vw, 34px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
}

/* Slightly uneven pen underline */
.birthday-screen .birthday-letter.is-reading #birthday-continue::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 12px;
  bottom: 5px;
  height: 1px;

  background: currentColor;
  opacity: 0.65;
  transform: rotate(-1deg);
  border-radius: 50%;
}

.birthday-screen .birthday-letter.is-reading #birthday-continue:hover {
  background: transparent;
  color: #962c43;
}

.birthday-screen .birthday-letter.is-reading #birthday-continue:focus-visible {
  outline: 1px dashed #781f32;
  outline-offset: 5px;
}

/* Gently reveal the birthday desk */
.birthday-screen:not(.hidden) {
  animation: birthday-desk-arrival 700ms ease-out both;
}

@keyframes birthday-desk-arrival {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-screen:not(.hidden) {
    animation: none;
  }
}


/* Flowing handwriting for the tea quote */
#tea-transition .tea-line {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(34px, 5.5vw, 50px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: normal;
  color: #f0e7da;
}

/* Simple supporting text and button */
#tea-transition .tea-story,
#tea-transition #enter-story {
  font-family: Georgia, serif;
  font-weight: 400;
  font-style: normal;
}

/* Slightly trim the handwriting against the black background */
#tea-transition .tea-line {
  -webkit-text-stroke: 0.2px #000;
}

/* Keep the writing hidden while the paper comes out */
.birthday-screen .birthday-letter .letter-content {
  opacity: 0;
}

/* Reveal it after the 900ms movement to the reading position */
.birthday-screen .birthday-letter.is-reading .letter-content {
  opacity: 1;
  transition: opacity 650ms ease 900ms;
}

@media (prefers-reduced-motion: reduce) {
  .birthday-screen .birthday-letter.is-reading .letter-content {
    transition: none;
  }
}