:root {
    --bg: #e9967e;
    --bg-deep: #d9776a;
    --cream: #fdf6ec;
    --ink: #fdf6ec;
    --red: #d61f45;
    --letter-ink: #6b3a3a;
    --env: #f3d9c9;
    --env-front: #f7e3d6;
    --env-flap: #efcbb8;
    --shadow: 0 10px 24px rgba(120, 30, 30, .22);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg: #b85c56; --bg-deep: #8f3f44; }
  }
  :root[data-theme="dark"] { --bg: #b85c56; --bg-deep: #8f3f44; }

  *, *::before, *::after { box-sizing: inherit; }
  html, body { height: 100%; margin: 0; }
  body {
    background: radial-gradient(circle at 50% 40%, var(--bg) 0%, var(--bg-deep) 100%);
    background-color: var(--bg);
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    overflow: hidden;
    display: grid;
    place-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  #bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

  .stage { position: relative; z-index: 1; text-align: center; padding: 1.5rem; width: 100%; }
  .screen { display: none; }
  .screen.active { display: block; animation: fadeIn .6s ease both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  h1 {
    color: var(--ink);
    font-weight: 800;
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    line-height: 1.08;
    margin: 0 0 2rem;
    text-shadow: 0 3px 12px rgba(120, 30, 30, .25);
  }
  .hint {
    color: var(--ink);
    font-size: clamp(1.15rem, 3.6vw, 1.5rem);
    margin: 0 0 1.4rem;
    text-shadow: 0 2px 8px rgba(120, 30, 30, .2);
  }
  button {
    font: 700 1.15rem/1 "Playfair Display", Georgia, serif;
    color: var(--red);
    background: var(--cream);
    border: 0;
    border-radius: 14px;
    padding: 1.05rem 2.4rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    letter-spacing: .03em;
    transition: transform .15s ease, opacity .4s ease;
  }
  button:hover { transform: scale(1.05); }
  button:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }


  /* Gate */
  .gate-card {
    background: var(--cream);
    width: min(420px, 90vw);
    margin: 0 auto;
    padding: 2.2rem 1.8rem 1.8rem;
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(120, 30, 30, .28);
    position: relative;
  }
  .lock {
    font-size: 2.6rem; display: block; margin: -0.4rem 0 .6rem;
    animation: wiggle 2.4s ease-in-out infinite;
  }
  @keyframes wiggle { 0%,80%,100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
  .gate-card h2 {
    color: var(--red);
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    line-height: 1.15;
    margin: 0 0 .5rem;
  }
  .gate-card .sub {
    font-family: "Caveat", cursive;
    color: var(--letter-ink);
    font-size: 1.35rem;
    margin: 0 0 1.3rem;
  }
  .gate-card input {
    width: 100%;
    font: 700 1.7rem/1.2 "Caveat", cursive;
    color: var(--letter-ink);
    text-align: center;
    background: #fff;
    border: 3px dashed #f4a7b9;
    border-radius: 16px;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .gate-card input:focus { border-color: var(--red); box-shadow: 0 0 0 5px rgba(214,31,69,.12); }
  .gate-card input::placeholder { color: #d9b3b3; }
  .gate-card button { background: var(--red); color: var(--cream); width: 100%; }
  .gate-msg {
    font-family: "Caveat", cursive;
    font-size: 1.4rem;
    color: var(--red);
    min-height: 1.8rem;
    margin: .9rem 0 0;
  }
  .gate-card.wrong { animation: shake .45s ease; }
  @keyframes shake { 20% { transform: translateX(-10px) rotate(-1deg); } 40% { transform: translateX(9px) rotate(1deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
  .gate-card.right { animation: pop .6s cubic-bezier(.2,.8,.3,1.4); }
  .gate-card.right input { border-style: solid; border-color: var(--red); background: #fff0f3; }
  @keyframes pop { 50% { transform: scale(1.06); } }

  /* Envelope */
  .envelope {
    position: relative;
    width: min(320px, 78vw);
    aspect-ratio: 3 / 2;
    margin: 0 auto 2.2rem;
    perspective: 900px;
    animation: float 3s ease-in-out infinite;
  }
  @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .env-back, .env-front, .env-flap, .env-letter { position: absolute; }
  .env-back { inset: 0; background: var(--env); border-radius: 10px; box-shadow: var(--shadow); }
  .env-letter {
    left: 7%; right: 7%; top: 8%; bottom: 5%;
    background: var(--cream)
      repeating-linear-gradient(transparent 0 14px, rgba(214,31,69,.12) 14px 15px);
    background-clip: padding-box;
    border-radius: 6px;
    z-index: 1;
    transition: transform .9s cubic-bezier(.3,.7,.3,1);
  }
  .env-front {
    inset: 0; z-index: 2;
    background: var(--env-front);
    border-radius: 10px;
    clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  }
  .env-flap {
    left: 0; right: 0; top: 0; height: 62%;
    background: var(--env-flap);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transition: transform .6s ease;
    z-index: 3;
  }
  .seal {
    position: absolute; left: 50%; top: 52%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--red); color: var(--cream);
    display: grid; place-items: center;
    font-size: 1.3rem; z-index: 4;
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
    transition: opacity .3s ease;
  }
  .envelope.open { animation: none; }
  .envelope.open .env-flap { transform: rotateX(180deg); }
  .envelope.open .seal { opacity: 0; }
  .envelope.pulled .env-flap { z-index: 0; }
  .envelope.pulled .env-letter { transform: translateY(-58%); }
  .intro.opening .hint, .intro.opening #open { opacity: 0; pointer-events: none; }

  /* Letter */
  .paper {
    background: var(--cream)
      repeating-linear-gradient(transparent 0 33px, rgba(214,31,69,.1) 33px 34px);
    color: var(--letter-ink);
    font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    font-size: clamp(1.35rem, 4.2vw, 1.65rem);
    line-height: 34px;
    text-align: left;
    width: min(460px, 90vw);
    max-height: 68vh;
    overflow-y: auto;
    margin: 0 auto 1.8rem;
    padding: 2rem 2rem 1.6rem;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(120, 30, 30, .28);
    animation: unfold .8s cubic-bezier(.2,.8,.3,1.1) both;
  }
  @keyframes unfold {
    from { opacity: 0; transform: translateY(60px) scale(.6) rotate(-3deg); }
    to { opacity: 1; transform: none; }
  }
  .paper p { margin: 0 0 34px; }
  .paper p:last-child { margin-bottom: 0; font-weight: 700; }
  .paper .greeting { font-weight: 700; font-size: 1.15em; }
  .paper .signoff { margin: 0; text-align: right; font-weight: 700; }
  .letter-screen #continue { animation: fadeIn .6s ease 1s both; }

  /* Question */
  .buttons { display: flex; gap: 1.25rem; justify-content: center; align-items: center; }
  #no { color: #9a7d74; z-index: 5; touch-action: manipulation; }
  #no:hover { transform: none; }
  #no.running {
    position: fixed;
    transition: left .28s cubic-bezier(.2,.8,.3,1.2), top .28s cubic-bezier(.2,.8,.3,1.2);
  }

  .yay h1 { margin-bottom: 1.2rem; }
  .yay p { color: var(--ink); font-size: clamp(1.1rem, 3.5vw, 1.5rem); margin: 0; }

  .gifs { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
  .gifs img {
    height: min(240px, 32vh); width: auto; max-width: 42vw;
    object-fit: cover;
    border: 6px solid var(--cream);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
  .gifs img:first-child { transform: rotate(-3deg); }
  .gifs img:last-child { transform: rotate(3deg); }
  .big-heart {
    font-size: clamp(4rem, 14vw, 7rem);
    display: block; margin-bottom: 1rem;
    animation: beat 1s ease-in-out infinite;
  }
  @keyframes beat { 0%,100% { transform: scale(1); } 20% { transform: scale(1.15); } 40% { transform: scale(1); } 60% { transform: scale(1.1); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  }