/* =====================================================================
   QUEST OF TWO HEARTS — Retro RPG Wedding Invitation
   Stylesheet — Part 1: Foundations + Boot Terminal
===================================================================== */

:root{
  /* ---- palette: navy pixel-night ---- */
  --navy-950:#0a0e1f;
  --navy-900:#0e1430;
  --navy-800:#161d40;
  --navy-700:#202a55;
  --navy-600:#2c3970;

  /* ---- palette: parchment ---- */
  --parch-100:#f7ecd2;
  --parch-200:#efe0bb;
  --parch-300:#e6d2a0;
  --parch-400:#d9bf81;
  --parch-ink:#4a3623;
  --parch-ink-soft:#6b5640;
  --parch-edge:#b9986a;

  /* ---- accents ---- */
  --gold:#e8c34a;
  --gold-soft:#f3da82;
  --rose:#d97a8e;
  --rose-deep:#b5536c;
  --leaf:#6f9156;
  --leaf-deep:#4c6b3a;
  --sky:#8fb6d9;

  --font-pixel-title:'Press Start 2P', monospace;
  --font-pixel-body:'VT323', monospace;
  --font-fantasy:'MedievalSharp', cursive;
  --font-serif:'Cormorant Garamond', serif;
  --font-script:'Great Vibes', cursive;

  --radius-pixel: 0px;
}

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

html{ scroll-behavior:auto; }

body{
  margin:0;
  padding:0;
  background:var(--navy-950);
  color:var(--parch-ink);
  font-family:var(--font-serif);
  overflow-x:hidden;
  image-rendering:pixelated;
  -webkit-font-smoothing:antialiased;
}

img{ image-rendering:pixelated; max-width:100%; }
svg{ image-rendering:pixelated; }

button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

.hidden{ display:none !important; }

::selection{ background:var(--gold); color:var(--navy-950); }

/* =====================================================================
   BACKGROUND PIXEL NOISE CANVAS
===================================================================== */
#bg-noise{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  background:var(--navy-950);
}

/* =====================================================================
   PHASE 1 — BOOT TERMINAL
===================================================================== */
.boot-screen{
  position:fixed;
  inset:0;
  z-index:100;
  background:
    radial-gradient(ellipse at 50% 30%, var(--navy-800) 0%, var(--navy-950) 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.boot-screen.boot-fade-out{
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
}

/* subtle pixel grain */
.boot-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}

.crt-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.18) 0px,
      rgba(0,0,0,0.18) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode:multiply;
  z-index:3;
}

.scanline{
  position:absolute;
  left:0; right:0;
  height:90px;
  background:linear-gradient(
    to bottom,
    rgba(143,182,217,0) 0%,
    rgba(143,182,217,0.07) 50%,
    rgba(143,182,217,0) 100%
  );
  animation:scanline-move 6s linear infinite;
  z-index:4;
  pointer-events:none;
}
@keyframes scanline-move{
  0%{ top:-90px; }
  100%{ top:100%; }
}

.boot-inner{
  position:relative;
  z-index:5;
  width:min(640px, 92vw);
  text-align:left;
}

.boot-header{
  font-family:var(--font-pixel-title);
  font-size:10px;
  letter-spacing:2px;
  color:var(--gold-soft);
  text-align:center;
  margin-bottom:28px;
  opacity:0.85;
}
.boot-header-deco{
  color:var(--rose);
  margin:0 8px;
}

.boot-terminal{
  font-family:var(--font-pixel-body);
  font-size:20px;
  line-height:1.65;
  color:#bfe6c8;
  min-height:260px;
  text-shadow:0 0 6px rgba(140,255,170,0.25);
  white-space:pre-wrap;
}
.boot-terminal .line-good{ color:#9ff0b3; }
.boot-terminal .line-gold{ color:var(--gold-soft); }
.boot-terminal .line-rose{ color:var(--rose); }
.boot-terminal .cursor-blink{
  display:inline-block;
  width:10px;
  background:#bfe6c8;
  margin-left:2px;
  animation:blink-cursor 0.9s steps(1) infinite;
}
@keyframes blink-cursor{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

.boot-skip{
  position:absolute;
  bottom:-30px;
  right:0;
  left:0;
  text-align:center;
  font-family:var(--font-pixel-body);
  font-size:14px;
  color:rgba(191,230,200,0.45);
  letter-spacing:1px;
}

/* ----- item acquired sequence ----- */
.item-acquired{
  text-align:center;
  animation:ia-pop-in 0.5s ease both;
}
@keyframes ia-pop-in{
  0%{ opacity:0; transform:translateY(16px) scale(0.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

.ia-banner{
  font-family:var(--font-pixel-title);
  font-size:14px;
  color:var(--gold);
  letter-spacing:2px;
  margin-bottom:22px;
  animation:ia-banner-glow 1.6s ease-in-out infinite;
}
@keyframes ia-banner-glow{
  0%,100%{ text-shadow:0 0 6px rgba(232,195,74,0.5); }
  50%{ text-shadow:0 0 18px rgba(232,195,74,0.95), 0 0 30px rgba(232,195,74,0.4); }
}

.scroll-item-wrap{
  position:relative;
  width:120px;
  height:120px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.scroll-item-glow{
  position:absolute;
  inset:-20px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,195,74,0.45) 0%, rgba(232,195,74,0) 70%);
  animation:item-glow-pulse 2.2s ease-in-out infinite;
}
@keyframes item-glow-pulse{
  0%,100%{ transform:scale(0.85); opacity:0.7; }
  50%{ transform:scale(1.15); opacity:1; }
}
.scroll-item-img{
  position:relative;
  width:96px;
  height:96px;
  z-index:2;
  animation:item-float 2.4s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
@keyframes item-float{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-10px) rotate(2deg); }
}

.ia-name{
  font-family:var(--font-fantasy);
  font-size:22px;
  color:var(--parch-100);
  letter-spacing:1px;
  margin-bottom:30px;
  text-shadow:0 0 10px rgba(247,236,210,0.25);
}

/* ----- pixel button base (shared) ----- */
.pixel-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-pixel-body);
  font-size:18px;
  letter-spacing:1px;
  color:var(--navy-950);
  background:var(--gold-soft);
  border:none;
  padding:12px 26px;
  position:relative;
  box-shadow:
    inset -4px -4px 0 0 rgba(0,0,0,0.25),
    inset 4px 4px 0 0 rgba(255,255,255,0.4),
    0 6px 0 0 #8a6a1c,
    0 8px 12px rgba(0,0,0,0.4);
  transition:transform 0.12s ease, box-shadow 0.12s ease;
  text-transform:uppercase;
}
.pixel-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset -4px -4px 0 0 rgba(0,0,0,0.25),
    inset 4px 4px 0 0 rgba(255,255,255,0.5),
    0 8px 0 0 #8a6a1c,
    0 12px 16px rgba(0,0,0,0.45);
}
.pixel-btn:active{
  transform:translateY(3px);
  box-shadow:
    inset -3px -3px 0 0 rgba(0,0,0,0.25),
    inset 3px 3px 0 0 rgba(255,255,255,0.4),
    0 2px 0 0 #8a6a1c,
    0 3px 6px rgba(0,0,0,0.4);
}
.pixel-btn-arrow{
  animation:arrow-nudge 1.1s ease-in-out infinite;
}
@keyframes arrow-nudge{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(4px); }
}

.open-scroll-btn{ margin-top:4px; }

/* =====================================================================
   PHASE 0 — PLAYER NAME MODAL
===================================================================== */
.player-modal{
  position:fixed;
  inset:0;
  z-index:110;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  transition:opacity 0.4s ease;
}
.player-modal.modal-fade-out{
  opacity:0;
  pointer-events:none;
}
.player-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(10,14,31,0.92);
}
.player-modal-box{
  position:relative;
  z-index:2;
  width:min(420px, 92vw);
  background:var(--navy-900);
  border:3px solid var(--gold);
  box-shadow:
    inset 0 0 0 3px var(--navy-950),
    0 8px 0 #5a4314,
    0 16px 30px rgba(0,0,0,0.5);
  padding:30px 28px;
  text-align:center;
  animation:player-modal-pop 0.4s ease both;
}
@keyframes player-modal-pop{
  0%{ opacity:0; transform:scale(0.9) translateY(10px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.player-modal-header{
  font-family:var(--font-pixel-title);
  font-size:12px;
  letter-spacing:2px;
  color:var(--gold-soft);
  margin-bottom:22px;
}
.player-modal-deco{ color:var(--rose); margin:0 6px; }
.player-modal-prompt{
  font-family:var(--font-pixel-body);
  font-size:19px;
  color:var(--parch-200);
  margin:0 0 18px;
}
.player-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.player-name-input{
  text-align:center;
  font-family:var(--font-pixel-body);
  font-size:20px;
  letter-spacing:1px;
}
.player-name-input:disabled{
  opacity:0.6;
  cursor:default;
}
.player-confirm-btn{ justify-content:center; }
.player-modal-hint{
  margin:18px 0 0;
  font-family:var(--font-pixel-body);
  font-size:13px;
  color:rgba(232,224,200,0.45);
}

/* player name shown inside boot terminal */
.boot-terminal .line-player{
  color:var(--gold-soft);
}

/* =====================================================================
   PHASE 2 — SCROLL UNROLL TRANSITION
===================================================================== */
.unroll-stage{
  position:fixed;
  inset:0;
  z-index:95;
  background:var(--navy-950);
  overflow:hidden;
}

.unroll-rod{
  position:absolute;
  left:0; right:0;
  height:46px;
  background:
    linear-gradient(180deg, #6b4a26 0%, #4a3015 50%, #2e1c0c 100%);
  box-shadow:0 0 0 3px #1c1106 inset, 0 6px 14px rgba(0,0,0,0.5);
  z-index:3;
}
.unroll-rod::before,
.unroll-rod::after{
  content:"";
  position:absolute;
  top:50%;
  width:30px; height:30px;
  background:radial-gradient(circle at 35% 35%, #c79a52, #6b4a26 65%, #2e1c0c 100%);
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.unroll-rod::before{ left:-6px; }
.unroll-rod::after{ right:-6px; }

.unroll-rod-top{ top:50%; transform:translateY(-50%); }
.unroll-rod-bottom{ top:50%; transform:translateY(-50%); }

.unroll-parchment-fill{
  position:absolute;
  left:0; right:0;
  top:50%;
  height:0;
  transform:translateY(-50%);
  background:
    linear-gradient(180deg, var(--parch-200), var(--parch-100) 50%, var(--parch-200)),
    repeating-radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 0, rgba(0,0,0,0.025) 1px, transparent 2px, transparent 6px);
  background-blend-mode:normal, multiply;
  z-index:2;
}

.unroll-flash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,247,214,0.9) 0%, rgba(255,247,214,0) 60%);
  opacity:0;
  pointer-events:none;
  z-index:5;
}

/* =====================================================================
   PHASE 3 — MAIN SCROLL / PARCHMENT BODY
===================================================================== */
.scroll-main{
  position:relative;
  z-index:10;
  min-height:100vh;
  background:var(--navy-950);
  padding:0 0 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.music-toggle{
  position:fixed;
  top:18px;
  right:18px;
  z-index:50;
  width:46px;
  height:46px;
  border:3px solid var(--gold);
  background:var(--navy-900);
  color:var(--gold-soft);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 0 #5a4314, 0 6px 10px rgba(0,0,0,0.4);
}
.music-toggle.is-playing .music-icon{
  animation:music-bounce 0.7s ease-in-out infinite;
}
@keyframes music-bounce{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.25); }
}

/* wooden scroll rods (top & bottom caps) */
.scroll-rod{
  width:min(820px, 94vw);
  display:flex;
  align-items:center;
  position:relative;
  z-index:12;
}
.rod-bar{
  flex:1;
  height:34px;
  background:
    linear-gradient(180deg, #8a6234 0%, #5e3e1c 45%, #3a2410 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.15),
    inset 0 -3px 0 rgba(0,0,0,0.3),
    0 8px 16px rgba(0,0,0,0.45);
  position:relative;
}
.rod-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 14px);
}
.rod-cap{
  width:38px;
  height:50px;
  background:radial-gradient(circle at 35% 30%, #c79a52, #6b4a26 60%, #2e1c0c 100%);
  border-radius:10px;
  box-shadow:0 6px 10px rgba(0,0,0,0.5);
  z-index:2;
}
.rod-cap-left{ margin-right:-6px; }
.rod-cap-right{ margin-left:-6px; }

.scroll-rod-top{ margin-top:26px; }
.scroll-rod-bottom{ margin-bottom:26px; }

/* the parchment itself */
.parchment-column{
  position:relative;
  width:min(820px, 94vw);
  background:
    repeating-radial-gradient(circle at 12% 8%, rgba(120,90,40,0.05) 0, transparent 3px),
    repeating-radial-gradient(circle at 80% 60%, rgba(120,90,40,0.04) 0, transparent 4px),
    linear-gradient(180deg, var(--parch-100) 0%, var(--parch-200) 100%);
  box-shadow:
    0 0 0 1px rgba(74,54,35,0.15),
    0 25px 60px rgba(0,0,0,0.55),
    inset 0 0 80px rgba(140,100,40,0.08);
  padding:10px 0 10px 0;
}

/* torn / deckled paper edges using clipped pseudo strips, layered */
.parchment-column::before,
.parchment-column::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:14px;
  background:inherit;
  z-index:1;
}
.parchment-column::before{
  top:-7px;
  clip-path:polygon(
    0% 100%, 2% 30%, 5% 80%, 9% 20%, 13% 70%, 17% 10%, 21% 60%, 25% 25%,
    29% 75%, 33% 15%, 37% 65%, 41% 30%, 45% 85%, 49% 10%, 53% 55%, 57% 20%,
    61% 70%, 65% 35%, 69% 80%, 73% 15%, 77% 60%, 81% 25%, 85% 75%, 89% 20%,
    93% 65%, 97% 30%, 100% 100%
  );
}
.parchment-column::after{
  bottom:-7px;
  clip-path:polygon(
    0% 0%, 2% 70%, 5% 20%, 9% 80%, 13% 30%, 17% 90%, 21% 40%, 25% 75%,
    29% 25%, 33% 85%, 37% 35%, 41% 70%, 45% 15%, 49% 90%, 53% 45%, 57% 80%,
    61% 30%, 65% 65%, 69% 20%, 73% 85%, 77% 40%, 81% 75%, 85% 25%, 89% 80%,
    93% 35%, 97% 70%, 100% 0%
  );
}

/* faint aged stains */
.parchment-column{ position:relative; }

/* vine rails — decorative side borders that "grow" on scroll */
.vine-rail{
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  pointer-events:none;
  z-index:2;
  background-repeat:repeat-y;
  background-size:34px 140px;
  opacity:0.5;
}
.vine-rail-left{
  left:6px;
  background-image:radial-gradient(circle, var(--leaf) 0 3px, transparent 4px);
}
.vine-rail-right{
  right:6px;
  background-image:radial-gradient(circle, var(--rose) 0 3px, transparent 4px);
}

/* =====================================================================
   CHAPTERS — shared layout
===================================================================== */
.chapter{
  position:relative;
  z-index:3;
  padding:54px 56px;
  text-align:center;
  color:var(--parch-ink);
}
@media (max-width:600px){
  .chapter{ padding:42px 22px; }
}

.chapter-label{
  font-family:var(--font-pixel-body);
  font-size:16px;
  letter-spacing:3px;
  color:var(--rose-deep);
  text-transform:uppercase;
  margin:0 0 18px;
  opacity:0.9;
}

.event-heading{
  font-family:var(--font-fantasy);
  font-size:clamp(22px,4vw,30px);
  color:var(--parch-ink);
  margin:0 0 28px;
}

.chapter-divider{
  text-align:center;
  color:var(--gold);
  font-size:18px;
  letter-spacing:14px;
  padding:6px 0;
  position:relative;
  z-index:3;
  opacity:0.85;
}
.chapter-divider span{ margin:0 2px; }

/* ================= 1. OPENING ================= */
.chapter-opening{ padding-top:64px; }
.top-deco{
  font-family:var(--font-fantasy);
  color:var(--leaf-deep);
  font-size:18px;
  margin-bottom:8px;
  letter-spacing:2px;
}
.opening-title{
  font-family:var(--font-fantasy);
  font-size:clamp(30px,6vw,46px);
  color:var(--parch-ink);
  margin:6px 0 4px;
  letter-spacing:1px;
}
.opening-sub{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:18px;
  color:var(--parch-ink-soft);
  margin:0 0 26px;
}
.opening-emblem{ margin:18px 0; }
.pixel-heart-big{
  width:46px; height:46px;
  color:var(--rose);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,0.15));
  animation:emblem-beat 1.8s ease-in-out infinite;
}
@keyframes emblem-beat{
  0%,100%{ transform:scale(1); }
  15%{ transform:scale(1.18); }
  30%{ transform:scale(1); }
}
.opening-text{
  font-family:var(--font-serif);
  font-size:19px;
  line-height:1.85;
  color:var(--parch-ink);
  max-width:520px;
  margin:18px auto 0;
}

/* ================= 2. HERO NAMES ================= */
.hero-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,4vw,40px);
  margin:10px 0 18px;
  flex-wrap:wrap;
}
.hero-block{ text-align:center; }
.hero-frame{
  width:78px; height:78px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--parch-200);
  border:3px solid var(--parch-ink);
  box-shadow:
    inset 0 0 0 3px var(--parch-100),
    0 5px 0 var(--parch-edge),
    0 7px 10px rgba(0,0,0,0.25);
  position:relative;
  overflow:hidden;
}
.hero-frame::before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px dashed var(--gold);
  opacity:0.6;
  pointer-events:none;
  z-index:2;
}
.pixel-icon{ width:38px; height:38px; color:var(--rose-deep); }
.hero-block:first-child .pixel-icon{ color:var(--navy-700); }
.hero-frame-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:sepia(0.08) contrast(1.03);
}

.hero-name{
  font-family:var(--font-fantasy);
  font-size:clamp(22px,3.4vw,30px);
  margin:0 0 4px;
  color:var(--parch-ink);
}
.hero-title{
  font-family:var(--font-pixel-body);
  font-size:15px;
  letter-spacing:2px;
  color:var(--parch-ink-soft);
  margin:0;
  text-transform:uppercase;
}
.hero-link{ font-size:26px; }
.link-heart{
  color:var(--rose);
  display:inline-block;
  animation:emblem-beat 1.8s ease-in-out infinite;
}
.names-sub{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--parch-ink-soft);
  font-size:16px;
  margin-top:18px;
}

/* ================= 3. QUOTE ================= */
.quote-box{
  position:relative;
  max-width:560px;
  margin:0 auto;
  padding:30px 36px;
  border-top:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
}
.quote-mark{
  font-family:var(--font-fantasy);
  font-size:38px;
  color:var(--gold);
  position:absolute;
  opacity:0.7;
}
.quote-mark-open{ top:6px; left:6px; }
.quote-mark-close{ bottom:-2px; right:6px; }
.quote-text{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(18px,2.6vw,22px);
  line-height:1.7;
  color:var(--parch-ink);
  margin:0;
}

/* ================= 4. STORY LETTER ================= */
.story-letter{
  max-width:560px;
  margin:0 auto;
  text-align:left;
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.95;
  color:var(--parch-ink);
}
.story-letter p{
  margin:0 0 18px;
  opacity:0;
  transform:translateY(10px);
}
.story-letter p:first-child::first-letter{
  font-family:var(--font-fantasy);
  font-size:46px;
  color:var(--rose-deep);
  float:left;
  line-height:0.8;
  padding:6px 8px 0 0;
}
.story-stamp{
  margin-top:30px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  font-family:var(--font-pixel-body);
  font-size:14px;
  letter-spacing:1px;
  color:var(--leaf-deep);
}
.story-stamp span{
  border:2px dashed var(--leaf);
  padding:6px 12px;
  transform:rotate(-2deg);
  opacity:0.85;
}
.story-stamp span:nth-child(2){ transform:rotate(1.5deg); color:var(--rose-deep); border-color:var(--rose); }

/* ================= 5. EVENT INFO ================= */
.quest-board{
  max-width:520px;
  margin:0 auto;
  background:var(--parch-200);
  border:3px solid var(--parch-ink);
  box-shadow:inset 0 0 0 3px var(--parch-100), 0 6px 0 var(--parch-edge);
  padding:22px 26px;
  text-align:left;
}
.quest-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px 0;
  border-bottom:1px dashed var(--parch-edge);
}
.quest-row:last-child{ border-bottom:none; }
.quest-icon{ font-size:22px; line-height:1.4; }
.quest-row-text{ display:flex; flex-direction:column; gap:2px; }
.quest-row-label{
  font-family:var(--font-pixel-body);
  font-size:14px;
  letter-spacing:1.5px;
  color:var(--rose-deep);
  text-transform:uppercase;
}
.quest-row-value{
  font-family:var(--font-serif);
  font-size:18px;
  color:var(--parch-ink);
}
.map-btn{ margin-top:26px; }

/* ================= 6. COUNTDOWN ================= */
.countdown-hud{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,2vw,16px);
  flex-wrap:wrap;
}
.cd-unit{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.cd-frame{
  width:clamp(58px,14vw,76px);
  height:clamp(58px,14vw,76px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy-900);
  border:3px solid var(--gold);
  box-shadow:inset 0 0 0 3px var(--navy-950), 0 5px 0 #5a4314;
}
.cd-frame span{
  font-family:var(--font-pixel-title);
  font-size:clamp(16px,3.2vw,22px);
  color:var(--gold-soft);
  text-shadow:0 0 8px rgba(232,195,74,0.4);
}
.cd-label{
  font-family:var(--font-pixel-body);
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--parch-ink-soft);
}
.cd-sep{
  font-family:var(--font-pixel-title);
  font-size:20px;
  color:var(--rose-deep);
  margin-bottom:24px;
}
.countdown-flavor{
  margin-top:26px;
  font-family:var(--font-pixel-body);
  font-size:16px;
  color:var(--leaf-deep);
  letter-spacing:0.5px;
}

/* ================= 7. GALLERY ================= */
.gallery-sub{
  font-family:var(--font-pixel-body);
  font-size:15px;
  color:var(--parch-ink-soft);
  margin:-14px 0 30px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:18px;
  max-width:620px;
  margin:0 auto;
}
.memory-frame{
  position:relative;
  aspect-ratio:1/1;
  background:var(--navy-900);
  border:4px solid var(--parch-ink);
  box-shadow:
    inset 0 0 0 3px var(--gold-soft),
    0 6px 0 var(--parch-edge),
    0 8px 14px rgba(0,0,0,0.3);
  cursor:pointer;
  overflow:hidden;
  transition:transform 0.18s ease;
}
.memory-frame:hover{ transform:translateY(-4px) scale(1.03); }
.memory-frame img{
  width:100%; height:100%;
  object-fit:cover;
  filter:sepia(0.12) contrast(1.02);
}
.memory-frame-label{
  position:absolute;
  bottom:0; left:0; right:0;
  background:rgba(10,14,31,0.72);
  color:var(--parch-100);
  font-family:var(--font-pixel-body);
  font-size:13px;
  text-align:center;
  padding:4px 2px;
  letter-spacing:0.5px;
}
.memory-frame-fallback img{ display:none; }
.memory-frame-fallback::before{
  content:"✦";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:var(--gold);
  background:
    repeating-linear-gradient(45deg, var(--navy-800) 0 8px, var(--navy-900) 8px 16px);
}

/* ================= 8. RSVP ================= */
.rsvp-window{
  max-width:460px;
  margin:0 auto;
  background:var(--navy-900);
  border:3px solid var(--gold);
  box-shadow:inset 0 0 0 3px var(--navy-950), 0 8px 0 #5a4314, 0 12px 20px rgba(0,0,0,0.4);
  padding:28px 26px;
  text-align:left;
}
.rsvp-row{ margin-bottom:20px; }
.rsvp-row label{
  display:block;
  font-family:var(--font-pixel-body);
  font-size:15px;
  letter-spacing:1px;
  color:var(--gold-soft);
  margin-bottom:8px;
}
.pixel-input{
  width:100%;
  background:var(--parch-100);
  border:3px solid var(--parch-ink);
  box-shadow:inset 0 0 0 2px var(--parch-200);
  font-family:var(--font-serif);
  font-size:17px;
  color:var(--parch-ink);
  padding:10px 12px;
}
.pixel-input:focus{
  outline:none;
  border-color:var(--gold);
}
.pixel-textarea{ resize:vertical; font-family:var(--font-serif); }

.rsvp-options{ display:flex; gap:10px; flex-wrap:wrap; }
.rsvp-option-btn{
  font-family:var(--font-pixel-body);
  font-size:16px;
  color:var(--parch-200);
  background:var(--navy-800);
  border:2px solid var(--navy-600);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:6px;
}
.rsvp-option-btn .rsvp-cursor{ opacity:0; transition:opacity 0.15s ease; color:var(--gold); }
.rsvp-option-btn.active{
  border-color:var(--gold);
  color:var(--gold-soft);
  background:var(--navy-700);
}
.rsvp-option-btn.active .rsvp-cursor{ opacity:1; }

.rsvp-submit-btn{ width:100%; justify-content:center; margin-top:6px; }
.rsvp-success{
  margin-top:16px;
  text-align:center;
  font-family:var(--font-pixel-body);
  font-size:16px;
  color:#9ff0b3;
}

/* ================= 9. GIFT ================= */
.gift-flavor{
  max-width:460px;
  margin:0 auto 26px;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:17px;
  line-height:1.7;
  color:var(--parch-ink-soft);
}
.treasure-chest-wrap{ text-align:center; }
.treasure-chest{
  width:140px;
  margin:0 auto;
  cursor:pointer;
  transition:transform 0.15s ease;
}
.treasure-chest:hover{ transform:scale(1.06); }
.treasure-chest.opened{
  animation:chest-pop 0.4s ease;
  cursor:default;
}
@keyframes chest-pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.15) rotate(-2deg); }
  100%{ transform:scale(1); }
}
.chest-svg{ width:100%; height:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.35)); }
.chest-hint{
  font-family:var(--font-pixel-body);
  font-size:14px;
  color:var(--parch-ink-soft);
  margin-top:10px;
}
.gift-card{
  max-width:420px;
  margin:26px auto 0;
  background:var(--parch-200);
  border:3px solid var(--parch-ink);
  box-shadow:inset 0 0 0 3px var(--parch-100), 0 6px 0 var(--parch-edge);
  padding:22px 24px;
  text-align:left;
  animation:gift-card-reveal 0.5s ease both;
}
@keyframes gift-card-reveal{
  0%{ opacity:0; transform:translateY(-10px); }
  100%{ opacity:1; transform:translateY(0); }
}
.gift-card-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px dashed var(--parch-edge);
  font-family:var(--font-pixel-body);
  font-size:16px;
}
.gift-card-row:last-of-type{ border-bottom:none; }
.gift-card-label{ color:var(--rose-deep); letter-spacing:1px; }
.gift-card-value{ color:var(--parch-ink); text-align:right; }
.copy-btn{ width:100%; justify-content:center; margin-top:16px; font-size:15px; }
.copy-toast{
  margin-top:10px;
  text-align:center;
  font-family:var(--font-pixel-body);
  font-size:14px;
  color:#3a7a4a;
}

/* ================= EASTER EGG ACHIEVEMENTS ================= */
.achievement-board{
  max-width:420px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ach-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--navy-900);
  border:2px solid var(--gold);
  padding:10px 16px;
  font-family:var(--font-pixel-body);
  font-size:14px;
  color:var(--parch-200);
  text-align:left;
  opacity:0;
  transform:translateX(-16px);
}
.ach-row strong{ color:var(--gold-soft); }
.ach-icon{ font-size:18px; }

/* ================= 10. CLOSING ================= */
.chapter-closing{ padding-bottom:80px; }
.end-of-story{
  font-family:var(--font-pixel-title);
  font-size:14px;
  letter-spacing:4px;
  color:var(--rose-deep);
  margin-bottom:26px;
}
.closing-thanks{
  font-family:var(--font-fantasy);
  font-size:clamp(20px,3.6vw,28px);
  color:var(--parch-ink);
  margin:0 0 10px;
}
.closing-sub{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:17px;
  color:var(--parch-ink-soft);
  margin:0 0 30px;
}
.signature-wrap{ max-width:340px; margin:0 auto; }
.signature-svg{ width:100%; height:auto; }
.signature-path{
  fill:none;
  stroke:var(--navy-700);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.signature-names{
  font-family:var(--font-script);
  font-size:26px;
  color:var(--parch-ink);
  margin-top:6px;
}
.closing-final-deco{
  margin-top:30px;
  color:var(--gold);
  font-family:var(--font-fantasy);
  letter-spacing:4px;
}
.closing-credit{
  margin-top:16px;
  font-family:var(--font-pixel-body);
  font-size:13px;
  color:var(--parch-ink-soft);
  opacity:0.7;
}

/* ================= COUPLE PORTRAITS ================= */
.portrait-duo{
  display:flex;
  gap:clamp(12px, 3vw, 28px);
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  max-width:640px;
  margin:0 auto;
}
.portrait-card{
  flex:1 1 0;
  /*min-width:160px;*/
  max-width:280px;
  text-align:center;
}
.portrait-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/4;
  background:var(--navy-900);
  border:5px solid var(--parch-ink);
  box-shadow:
    inset 0 0 0 4px var(--gold-soft),
    0 7px 0 var(--parch-edge),
    0 10px 16px rgba(0,0,0,0.3);
  overflow:hidden;
}
.portrait-frame::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dashed rgba(232,195,74,0.5);
  pointer-events:none;
  z-index:2;
}
.portrait-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:sepia(0.08) contrast(1.03);
}
.portrait-name{
  font-family:var(--font-fantasy);
  font-size:clamp(18px,2.6vw,22px);
  color:var(--parch-ink);
  margin:14px 0 2px;
}
.portrait-role{
  font-family:var(--font-pixel-body);
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--parch-ink-soft);
  text-transform:uppercase;
  margin:0;
}
@media (max-width:480px){
  .portrait-duo{ gap:14px; }
  .portrait-card{ min-width:130px; }
}

/* =====================================================================
   LIGHTBOX
===================================================================== */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,14,31,0.88);
}
.lightbox-frame{
  position:relative;
  z-index:2;
  max-width:min(560px, 92vw);
  background:var(--parch-100);
  border:4px solid var(--gold);
  box-shadow:0 0 0 4px var(--navy-950), 0 20px 50px rgba(0,0,0,0.6);
  padding:18px;
  text-align:center;
  animation:lightbox-pop 0.25s ease;
}
@keyframes lightbox-pop{
  0%{ opacity:0; transform:scale(0.92); }
  100%{ opacity:1; transform:scale(1); }
}
.lightbox-frame img{
  max-width:100%;
  max-height:60vh;
  object-fit:contain;
  border:2px solid var(--parch-ink);
  filter:sepia(0.1);
}
.lightbox-caption{
  font-family:var(--font-pixel-body);
  font-size:16px;
  color:var(--parch-ink-soft);
  margin:12px 0 16px;
  letter-spacing:0.5px;
}
.lightbox-close-btn{ font-size:14px; padding:10px 20px; }

/* =====================================================================
   RESPONSIVE TUNING
===================================================================== */
@media (max-width:480px){
  .boot-terminal{ font-size:17px; min-height:220px; }
  .hero-card{ gap:14px; }
  .hero-link{ order:3; width:100%; }
  .quest-row-value{ font-size:16px; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}