:root {
  --gold: #f4b044;
  --orange: #e0680e;
  --slate: #88a5b7;
  --deep: #112532;
  --night: #090d11;
  --paper: #edf2f1;
  --muted: #b7c8cd;
  --line: #3d5c6a;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
main {
  position: relative;
  z-index: 1;
}
button,
a {
  font: inherit;
}
button {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.ambient,
.night-sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient {
  z-index: 0;
  background:
    radial-gradient(circle at 92% 8%, #112532 0, transparent 28%),
    radial-gradient(circle at 4% 45%, #162f3d 0, transparent 23%),
    radial-gradient(circle at 50% 100%, #1a2d34 0, transparent 35%);
}
.ambient i {
  position: absolute;
  color: var(--gold);
  opacity: 0.2;
  font-style: normal;
  animation: float 11s ease-in-out infinite;
}
.ambient i:nth-child(1) {
  left: 8%;
  top: 18%;
}
.ambient i:nth-child(2) {
  left: 88%;
  top: 30%;
  animation-delay: -3s;
}
.ambient i:nth-child(3) {
  left: 72%;
  top: 78%;
  animation-delay: -6s;
}
.ambient i:nth-child(4) {
  left: 20%;
  top: 70%;
  animation-delay: -1s;
}
.ambient i:nth-child(5) {
  left: 48%;
  top: 9%;
  animation-delay: -8s;
}
.night-sky {
  z-index: 2;
}
.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 3px #f4b04455;
  opacity: 0.35;
  animation: twinkle 5s ease-in-out infinite;
}
.spark-one {
  top: 13%;
  left: 13%;
}
.spark-two {
  top: 44%;
  right: 9%;
  animation-delay: -2s;
}
.spark-three {
  top: 83%;
  left: 8%;
  animation-delay: -4s;
}
.bat {
  position: absolute;
  display: block;
  color: var(--night);
  filter: drop-shadow(0 2px 2px #0008);
  opacity: 0.7;
}
.bat svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}
.bat-still {
  width: 44px;
  top: 17%;
  right: 7%;
  transform: rotate(-7deg);
  animation: bat-hover 7s ease-in-out infinite;
}
.bat-flight {
  width: 35px;
  top: 32%;
  left: -55px;
  animation: bat-fly 25s linear infinite;
  animation-delay: -9s;
}
.bat-drop {
  position: absolute;
  top: 32%;
  left: -55px;
  color: var(--gold);
  font-size: 12px;
  opacity: 0;
  filter: drop-shadow(0 0 4px #f4b04499);
  animation: heart-drop 25s linear infinite;
  animation-delay: -9s;
}
.opening {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px 22px;
}
.opening-copy {
  max-width: 600px;
  animation: appear 0.9s ease both;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 15px;
}
h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(3.1rem, 14vw, 6.5rem);
}
h2 {
  font-size: clamp(2.2rem, 9vw, 4.1rem);
}
h2 span,
.dot {
  color: var(--gold);
}
.lead {
  font-size: clamp(1rem, 3.8vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 560px;
  margin: 20px auto;
}
.aside {
  font-family: "Shadows Into Light", cursive;
  font-size: 1.35rem;
  margin: 26px 0;
  color: var(--slate);
}
.pulse-heart {
  display: block;
  font-size: 2.5rem;
  color: var(--gold);
  text-shadow: 0 0 20px #f4b04477;
  animation: pulse 1.7s infinite;
  margin: 24px;
}
.primary {
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--night);
  font-weight: 700;
  min-height: 50px;
  padding: 12px 25px;
  box-shadow:
    0 0 0 1px #ffd27d66,
    0 10px 25px #f4b04444;
  transition: 0.2s;
}
.primary:hover {
  background: #ffd071;
  transform: translateY(-2px);
  box-shadow: 0 0 25px #f4b04477;
}
.primary.small {
  min-height: 44px;
  font-size: 0.91rem;
  padding: 9px 18px;
}
.chapter {
  max-width: 1100px;
  margin: auto;
  padding: 90px 22px;
  text-align: center;
  scroll-margin-top: 55px;
}
.intro {
  padding-top: 105px;
}
.three-grid {
  display: grid;
  gap: 13px;
  margin: 35px auto 18px;
  max-width: 880px;
}
.choice {
  border: 1px solid var(--line);
  background: #112532e8;
  border-radius: 22px;
  padding: 24px 15px;
  color: var(--paper);
  min-height: 166px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 7px 20px #0005;
  transition: 0.25s;
}
.choice:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 15px 30px #0008;
}
.choice b {
  font-size: 2rem;
  color: var(--gold);
}
.choice span {
  font-family: "Playfair Display";
  font-size: 1.5rem;
  font-weight: 700;
}
.choice small {
  color: var(--slate);
}
.choice.opened {
  border-color: var(--orange);
  box-shadow: 0 0 20px #e0680e33;
}
.unlock-note {
  font-size: 0.86rem;
  color: var(--slate);
}
.unlock-note.unlocked {
  color: var(--gold);
  font-weight: 700;
}
.tone-love,
.tone-sorry,
.tone-mystery {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tone-love {
  background: linear-gradient(135deg, #102a38, #172e38);
  border: 1px solid #31505e;
  border-radius: 36px;
  box-shadow: inset 0 0 70px #f4b0440d;
}
.big-line {
  font-family: "Playfair Display";
  font-size: clamp(2.3rem, 8vw, 4rem);
  margin: 9px 0;
  color: var(--gold);
}
.quiet {
  font-family: "Shadows Into Light";
  font-size: 1.5rem;
  margin: 0 0 25px;
  color: var(--slate);
}
.reason-card {
  background: #0d1c26;
  border: 1px solid #456575;
  border-radius: 24px;
  width: min(100%, 490px);
  padding: 34px 22px;
  box-shadow: 0 16px 35px #0008;
}
.card-heart {
  font-size: 1.8rem;
  color: var(--gold);
}
.reason-card p {
  font-family: "Playfair Display";
  font-size: 1.55rem;
  min-height: 61px;
  display: grid;
  place-items: center;
}
.text-button {
  border: 0;
  background: transparent;
  color: var(--gold);
  font-weight: 700;
  padding: 12px;
}
.closing-line {
  font-size: 1.15rem;
  margin: 25px;
  color: var(--muted);
}
.apology-system {
  background: #0b1319;
  color: var(--paper);
  border: 1px solid #385866;
  border-radius: 22px;
  padding: 22px;
  width: min(100%, 500px);
  text-align: left;
  box-shadow: 0 17px 35px #0008;
}
.apology-system > div {
  font-size: 0.77rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--gold);
}
.system-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  background: var(--orange);
  border-radius: 50%;
  animation: pulse 1s infinite;
}
.apology-system p {
  line-height: 1.7;
}
.generated {
  background: #88a5b71c;
  border-radius: 10px;
  padding: 12px;
  min-height: 70px;
  font-family: "Shadows Into Light";
  font-size: 1.25rem;
}
.sincere {
  max-width: 600px;
  text-align: left;
  margin: 75px auto 0;
  background: #dce7e8;
  color: var(--deep);
  border-left: 4px solid var(--gold);
  padding: 28px;
  border-radius: 0 18px 18px 0;
  line-height: 1.65;
  box-shadow: 0 12px 28px #0005;
}
.signature {
  font-family: "Shadows Into Light";
  font-size: 1.45rem;
  color: var(--orange);
}
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  max-width: 650px;
  margin: 32px auto;
}
.case {
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 145px;
  padding: 15px;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  transition: 0.2s;
}
.case:hover {
  border-color: var(--orange);
}
.case:first-letter {
  font-size: 1.7rem;
}
.case span {
  font-weight: 700;
}
.case small {
  color: var(--slate);
}
.case.checked {
  background: #263d47;
  transform: rotate(-1deg);
}
.final-case {
  grid-column: span 2;
}
.case-result {
  margin: auto;
  background: var(--slate);
  color: var(--night);
  border-radius: 22px;
  padding: 23px;
  width: min(100%, 480px);
  box-shadow: 0 15px 30px #0007;
}
.case-result p {
  font-family: "Playfair Display";
  font-size: 1.6rem;
  margin: 0 0 7px;
}
.case-result span {
  display: block;
  margin-bottom: 17px;
}
.letter-section {
  background: linear-gradient(135deg, #112532, #203c49 55%, #112532);
  max-width: none;
  padding-inline: 22px;
  border-block: 1px solid #456370;
}
.letter {
  position: relative;
  max-width: 690px;
  background: linear-gradient(130deg, #f2f3ec, #d8e2e2);
  color: var(--deep);
  margin: auto;
  padding: 65px 28px 38px;
  text-align: left;
  border-radius: 4px;
  box-shadow: 0 20px 45px #000a;
  font-family: "Playfair Display";
  font-size: 1.1rem;
  line-height: 1.65;
  transform: rotate(-0.5deg);
}
.letter h2 {
  text-align: center;
  font-size: clamp(2rem, 8vw, 3.3rem);
  margin-bottom: 35px;
}
.letter-end {
  font-family: "Shadows Into Light";
  font-size: 1.5rem;
  color: var(--orange);
}
.wax {
  position: absolute;
  right: 23px;
  top: -22px;
  border-radius: 50%;
  height: 47px;
  width: 47px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--gold);
  box-shadow: 0 3px 5px #0008;
}
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  max-width: 850px;
  margin: 30px auto;
}
.memory {
  margin: 0;
  position: relative;
  border: 1px solid #456473;
  border-radius: 16px;
  overflow: hidden;
  min-height: 180px;
  background: linear-gradient(135deg, #274756, var(--slate));
  text-align: left;
  padding: 0;
}
.memory:nth-child(3n) {
  grid-column: span 2;
}
.memory img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.memory span {
  position: absolute;
  inset: auto 0 0;
  background: linear-gradient(transparent, #090d11e8);
  color: white;
  padding: 27px 12px 11px;
  font-size: 0.79rem;
}
.timeline {
  max-width: 610px;
  margin: 35px auto;
  text-align: left;
  border-left: 2px solid var(--slate);
}
.timeline button {
  display: block;
  border: 0;
  background: transparent;
  text-align: left;
  margin: 0 0 25px;
  padding: 0 0 0 25px;
  position: relative;
  color: var(--paper);
}
.timeline button:before {
  content: "♥";
  position: absolute;
  left: -10px;
  top: -3px;
  background: var(--night);
  color: var(--gold);
}
.timeline b {
  display: block;
  font-family: "Playfair Display";
  font-size: 1.35rem;
}
.timeline span {
  display: none;
  color: var(--slate);
  padding-top: 6px;
  line-height: 1.5;
}
.timeline button.active span {
  display: block;
}
.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  max-width: 760px;
  margin: 30px auto;
}
.gift {
  border: 1px solid #f4b04466;
  border-radius: 20px;
  min-height: 150px;
  background: var(--orange);
  color: #fff8ea;
  padding: 15px;
  box-shadow: 0 10px 22px #0006;
  transition: 0.35s;
}
.gift:hover,
.gift.open {
  transform: rotate(-2deg) scale(1.03);
  background: #b9510b;
}
.gift b {
  display: block;
  font-size: 2.3rem;
  color: var(--gold);
}
.gift span {
  display: block;
  font-family: "Playfair Display";
  font-size: 1.15rem;
  margin-top: 8px;
}
.gift small {
  display: block;
  margin-top: 8px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.heart-orbit {
  max-width: 560px;
  height: 380px;
  position: relative;
  margin: 15px auto;
}
.heart-center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 145px;
  height: 125px;
  background: var(--gold);
  clip-path: path(
    "M72 120C-10 67 8 0 48 15c13 5 20 16 24 25 5-9 12-20 25-25 40-15 58 52-25 105Z"
  );
  color: var(--night);
  display: grid;
  place-content: center;
  font-family: "Playfair Display";
  font-size: 1.45rem;
  line-height: 1;
  filter: drop-shadow(0 0 18px #f4b04477);
}
.heart-center span {
  font-size: 1.3rem;
}
.reason-pill {
  position: absolute;
  border: 1px solid #527180;
  background: #112532f2;
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--paper);
  font-size: 0.82rem;
  box-shadow: 0 4px 12px #0006;
}
.promise-grid {
  display: grid;
  gap: 10px;
  max-width: 700px;
  margin: 30px auto;
}
.promise-grid button {
  background: var(--deep);
  border: 1px solid #456575;
  border-radius: 15px;
  min-height: 55px;
  text-align: left;
  padding: 12px 17px;
  color: var(--paper);
  font-weight: 600;
}
.promise-grid button:active {
  background: #294653;
}
.playful {
  background: linear-gradient(135deg, #172b35, #252e2d);
  border: 1px solid #59452e;
  border-radius: 36px;
}
.playful .eyebrow,
.playful h2 {
  color: var(--orange);
}
.question {
  max-width: 600px;
  margin: 28px auto;
}
.question p {
  font-family: "Playfair Display";
  font-size: 1.45rem;
}
.question div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.question button {
  min-height: 44px;
  border: 1px solid #e0680e88;
  border-radius: 999px;
  background: var(--deep);
  padding: 9px 15px;
  color: var(--paper);
  transition: 0.2s;
}
.question button:hover {
  background: var(--orange);
  transform: translateY(-2px);
}
.question output {
  display: block;
  min-height: 25px;
  margin-top: 14px;
  color: var(--gold);
  font-weight: 700;
}
.final {
  padding-bottom: 120px;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.final:before,
.final:after {
  content: "♥";
  position: absolute;
  color: var(--gold);
  opacity: 0.2;
  font-size: 1.1rem;
  animation: float 8s ease-in-out infinite;
}
.final:before {
  top: 18%;
  left: 10%;
}
.final:after {
  right: 9%;
  bottom: 21%;
  animation-delay: -4s;
}
.final-lines p {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  margin: 8px;
  color: var(--slate);
}
.final-lines p:first-child {
  color: var(--gold);
}
.final h3 {
  font-size: clamp(2.2rem, 8vw, 4rem);
  margin: 30px 0 15px;
}
.giant-heart {
  font-size: 6rem;
  color: var(--gold);
  animation: pulse 1.7s infinite;
  text-shadow: 0 0 28px #f4b04477;
}
.final-copy {
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--muted);
}
.final-love {
  font-family: "Shadows Into Light";
  font-size: 2rem;
  color: var(--gold);
}
nav {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  max-width: calc(100% - 20px);
  overflow: auto;
  z-index: 5;
  background: #112532ef;
  border: 1px solid #486978;
  border-radius: 999px;
  padding: 5px;
  backdrop-filter: blur(10px);
  box-shadow: 0 7px 24px #0008;
}
nav a {
  padding: 9px 11px;
  text-decoration: none;
  color: var(--paper);
  font-size: 0.76rem;
  white-space: nowrap;
}
nav a:hover {
  color: var(--gold);
}
.music {
  position: fixed;
  right: 16px;
  top: 15px;
  border: 1px solid #486978;
  background: #112532ef;
  border-radius: 999px;
  color: var(--gold);
  padding: 10px;
  z-index: 5;
  box-shadow: 0 4px 14px #0008;
}
.music span {
  font-size: 0.75rem;
  margin-left: 4px;
}
.toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-15px);
  z-index: 8;
  background: var(--deep);
  color: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 11px 16px;
  opacity: 0;
  transition: 0.25s;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%);
}
dialog {
  border: 1px solid #4b6b79;
  border-radius: 18px;
  max-width: min(92vw, 650px);
  padding: 0;
  overflow: hidden;
  background: var(--deep);
  color: var(--paper);
}
dialog::backdrop {
  background: #090d11d9;
}
dialog img {
  display: block;
  max-height: 75vh;
  width: 100%;
  object-fit: contain;
  background: #203d49;
}
dialog p {
  padding: 0 18px 12px;
}
.modal-close,
.secret > button {
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  background: var(--night);
  color: var(--gold);
  font-size: 1.6rem;
  z-index: 2;
}
.secret {
  position: fixed;
  z-index: 10;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 500px);
  background: var(--deep);
  color: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 24px;
  text-align: center;
  padding: 45px 25px;
  box-shadow: 0 25px 80px #000c;
}
.secret span {
  font-size: 3rem;
  color: var(--gold);
  animation: pulse 1s infinite;
}
.secret h2 {
  font-size: 2rem;
}
.secret p {
  line-height: 1.5;
}
@keyframes pulse {
  50% {
    transform: scale(1.15);
  }
}
@keyframes float {
  50% {
    transform: translateY(-28px) rotate(15deg);
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
  }
}
@keyframes twinkle {
  50% {
    opacity: 0.9;
    transform: scale(1.8);
  }
}
@keyframes bat-hover {
  50% {
    transform: translateY(-9px) rotate(4deg);
  }
}
@keyframes bat-fly {
  0%,
  8% {
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 0.72;
  }
  45% {
    transform: translateX(55vw) translateY(-30px);
    opacity: 0.72;
  }
  57% {
    transform: translateX(75vw) translateY(-8px);
    opacity: 0.72;
  }
  70%,
  100% {
    transform: translateX(112vw) translateY(-35px);
    opacity: 0;
  }
}
@keyframes heart-drop {
  0%,
  44% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  46% {
    opacity: 1;
    transform: translate(58vw, -25px) scale(1);
  }
  56% {
    opacity: 0;
    transform: translate(70vw, 18px) scale(0.55);
  }
  100% {
    opacity: 0;
  }
}
@media (min-width: 650px) {
  .three-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .final-case {
    grid-column: auto;
  }
  .gift-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .memory:nth-child(3n) {
    grid-column: auto;
  }
  .memory:first-child {
    grid-row: span 2;
    min-height: 370px;
  }
  .promise-grid {
    grid-template-columns: 1fr 1fr;
  }
  .letter {
    padding: 70px 65px 55px;
  }
  .chapter {
    padding-top: 115px;
    padding-bottom: 115px;
  }
  .bat-still {
    width: 54px;
    right: 12%;
  }
}
@media (max-width: 390px) {
  .chapter {
    padding-left: 16px;
    padding-right: 16px;
  }
  .music span {
    display: none;
  }
  .heart-orbit {
    transform: scale(0.88);
    margin: -15px auto;
  }
  .letter {
    padding: 55px 20px 30px;
  }
  .choice {
    min-height: 145px;
  }
  .bat-still {
    right: 3%;
    opacity: 0.45;
  }
}
@media (max-width: 480px) {
  .gift-grid {
    grid-template-columns: 1fr;
  }
  .gift {
    min-height: 0;
  }
  .gift.open {
    transform: none;
  }
  .gift small {
    font-size: 0.95rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .bat-flight,
  .bat-drop {
    display: none;
  }
}