/* ============ BASE ============ */
:root{
  --paper:#F7F1E8; --paper2:#EFE5D6; --card:#FFFCF6;
  --wine:#6B1E2E; --wine2:#8A2B3E; --rose:#D8A7A7; --rose-soft:#EBC3BE;
  --sage:#8A9A7B; --gold:#B8925A; --ink:#2B2024; --ink-soft:#6E5D60; --line:#E3D6C3;
  --display:'Fraunces', Georgia, serif;
  --sans:'Instrument Sans', system-ui, -apple-system, sans-serif;
  --hand:'Homemade Apple', cursive;
  --shadow:0 1px 2px rgba(43,32,36,.06), 0 14px 34px -14px rgba(43,32,36,.25);
  --shadow-lg:0 2px 4px rgba(43,32,36,.06), 0 30px 60px -24px rgba(43,32,36,.35);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--rose-soft);color:var(--ink)}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:380;line-height:1.05;letter-spacing:-.012em;margin:0;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic;color:var(--wine);font-weight:340}
.kicker{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.hand{font-family:var(--hand);color:var(--wine);font-size:1.05rem;line-height:1.9}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bouquet,.spray{width:100%;height:auto;display:block;overflow:visible}
.seal{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 4px rgba(62,12,23,.3))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.04em;padding:.85rem 1.7rem;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn-wine{background:var(--wine);color:var(--paper);box-shadow:0 8px 20px -10px rgba(107,30,46,.7)}
.btn-wine:hover{background:var(--wine2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--wine);border-color:var(--wine)}
.btn-ghost:hover{background:rgba(107,30,46,.06);transform:translateY(-2px)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ============ GATE ============ */
body.locked{overflow:hidden;height:100vh}
body.locked main,body.locked .topnav,body.locked .player{visibility:hidden}
.gate{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(ellipse at 50% 40%,var(--card) 0%,var(--paper) 55%,var(--paper2) 100%)}
.gate-card{width:min(440px,94vw);text-align:center;position:relative}
.gate-bouquet{width:170px;margin:0 auto}
.gate-seal{width:92px;margin:-58px auto 1.2rem;position:relative;z-index:2;transition:transform .6s var(--ease),opacity .6s}
.gate-title{font-size:clamp(2rem,5vw,2.7rem);margin:.7rem 0 0}
#gateForm{display:grid;gap:1rem;margin-top:1.8rem;justify-items:center}
#gateForm input{width:100%;max-width:300px;text-align:center;font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--wine);padding:.6rem;outline:none;transition:border-color .25s}
#gateForm input:focus{border-bottom-color:var(--gold)}
#gateForm input::placeholder{color:#B3A49C}
.gate-hint{font-size:.88rem;color:var(--ink-soft);margin:1.4rem 0 0}
.gate-hint span{font-family:var(--display);font-style:italic}
.gate-msg{font-family:var(--hand);color:var(--wine);min-height:2em;margin:.8rem 0 0;font-size:.95rem}
.gate-card.shake{animation:shake .5s}
.gate.unlocking .gate-seal{transform:scale(1.25) rotate(-12deg);opacity:0}
.gate.unlocking{animation:gateOut 1s .45s forwards}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes gateOut{to{opacity:0;visibility:hidden;transform:scale(1.03)}}

/* ============ NAV ============ */
.topnav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,3rem);transition:background .3s,box-shadow .3s}
.topnav.scrolled{background:rgba(247,241,232,.94);box-shadow:0 1px 0 var(--line)}
.monogram{font-family:var(--display);font-style:italic;color:var(--wine);letter-spacing:.14em;text-decoration:none;font-size:1.05rem}
.navlinks a{font-size:.82rem;color:var(--ink-soft);text-decoration:none;margin-left:1.7rem;letter-spacing:.03em;background:linear-gradient(var(--wine),var(--wine)) 0 100%/0 1px no-repeat;transition:background-size .3s,color .3s;padding-bottom:2px}
.navlinks a:hover{color:var(--wine);background-size:100% 1px}

/* ============ HERO ============ */
.hero{min-height:100vh;position:relative;display:grid;place-items:center;padding:6rem 1.5rem 4rem;overflow:hidden}
.hero-flowers{position:absolute;width:clamp(220px,30vw,430px);pointer-events:none;z-index:1}
.hero-flowers.left{left:-34px;bottom:-24px}
.hero-flowers.right{right:-34px;top:-24px;transform:rotate(180deg)}
.hero-flowers .spray{animation:sway 10s ease-in-out infinite;transform-origin:0 100%}
.hero-flowers.right .spray{animation-delay:-4s}
@keyframes sway{50%{transform:rotate(1.6deg)}}
.petals{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.petal{position:absolute;top:-30px;opacity:.75;animation:fall linear infinite}
@keyframes fall{to{transform:translate3d(var(--dx,40px),112vh,0) rotate(560deg)}}
.hero-inner{position:relative;z-index:2;width:100%}
.banner-wrap{text-align:center}
.hero-kicker{margin-bottom:1.6rem}
.banner-float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.banner{display:block;width:100%;max-width:780px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:clamp(2.2rem,5vw,3.6rem) clamp(1.5rem,5vw,4.2rem);cursor:pointer;position:relative;box-shadow:var(--shadow-lg);text-align:center;transition:transform .4s var(--ease),box-shadow .4s}
.banner::before{content:"";position:absolute;inset:10px;border:1px solid var(--gold);opacity:.45;border-radius:2px;pointer-events:none}
.banner:hover{transform:translateY(-4px) rotate(-.4deg)}
.b-orn{display:block;width:90px;height:12px;margin:0 auto 1.4rem;position:relative;background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat}
.b-orn::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;background:var(--card);border:1px solid var(--gold);transform:translate(-50%,-50%) rotate(45deg)}
.b-line1{display:block;font-family:var(--display);font-weight:360;font-size:clamp(2.6rem,6.6vw,5.1rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.b-line1 em{font-style:italic;color:var(--wine)}
.b-line2{display:block;font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--wine);margin:1rem 0 1.1rem}
.b-line3{display:block;font-size:1.02rem;color:var(--ink-soft);max-width:34rem;margin:0 auto;line-height:1.65}
.banner-cue{font-family:var(--hand);color:var(--wine);margin-top:1.8rem;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.banner-wrap.burst .banner{animation:burst .6s var(--ease) forwards}
.banner-wrap.burst .banner-cue,.banner-wrap.burst .hero-kicker{transition:opacity .3s;opacity:0}
@keyframes burst{35%{transform:scale(1.06)}100%{transform:scale(.3);opacity:0;filter:blur(8px)}}
.after-burst{text-align:center;animation:rise 1s var(--ease)}
.after-burst h2{font-size:clamp(2.8rem,7.5vw,5.8rem);margin-top:1rem}
.after-burst .hand{font-size:1.15rem;margin:1rem 0 2.2rem}
.after-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}

/* ============ CLOCKS ============ */
.clocks{padding:1rem 1.5rem 3rem}
.clock-row{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem}
.clock{display:flex;align-items:center;gap:1.1rem}
.clock.right{flex-direction:row-reverse;text-align:right}
.clock-face{width:66px;height:66px;flex:none}
.clock-face svg{width:100%;height:100%}
.clock-city{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.clock-time{font-family:var(--display);font-size:2.1rem;line-height:1.1;margin:.15rem 0;font-variant-numeric:tabular-nums}
.clock-day{font-size:.85rem;color:var(--ink-soft);margin:0}
.clock-mid{text-align:center}
.clock-mid svg{width:150px;display:block;margin:0 auto}
.clock-gap{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem}
.clock-note{text-align:center;font-family:var(--hand);color:var(--wine);margin:1.8rem auto 0;min-height:2em;max-width:36rem}

/* ============ SECTIONS ============ */
.divider{width:230px;margin:0 auto;opacity:.9}
.divider svg{width:100%;height:auto;display:block}
.section{padding:clamp(4rem,9vw,7rem) 1.5rem}
.wrap{max-width:1120px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:clamp(2.6rem,5vw,4rem)}
.sec-head h2{font-size:clamp(2.4rem,5.2vw,3.9rem);margin:.8rem 0 1rem}
.sec-sub{font-size:1.05rem;color:var(--ink-soft);max-width:35rem;margin:0 auto;line-height:1.65}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ GALLERY ============ */
.gallery-grid{columns:4 230px;column-gap:2.2rem}
.polaroid{break-inside:avoid;display:inline-block;width:100%;margin:0 0 2.4rem;background:var(--card);padding:12px 12px 0;border:0;box-shadow:var(--shadow);transform:rotate(var(--r,0deg));transition:transform .45s var(--ease),box-shadow .45s;cursor:zoom-in;position:relative;text-align:center;opacity:0}
.polaroid.in{opacity:1;transition:transform .45s var(--ease),box-shadow .45s,opacity .9s}
.polaroid:hover{transform:rotate(0) translateY(-6px) scale(1.025);box-shadow:var(--shadow-lg);z-index:2}
.pol-img{width:100%;height:auto;background:var(--paper2);min-height:120px}
.pol-cap{display:block;font-family:var(--hand);color:var(--wine);font-size:.92rem;line-height:1.7;padding:.9rem .4rem 1.1rem}
.tape{position:absolute;top:-12px;left:50%;width:92px;height:25px;transform:translateX(-50%) rotate(var(--t,-3deg));background:rgba(216,167,167,.55);box-shadow:0 1px 2px rgba(0,0,0,.05);
  -webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0)}
.tape.sage{background:rgba(138,154,123,.42)}
.tape.gold{background:rgba(184,146,90,.35)}
.pol-flower{position:absolute;width:52px;right:-16px;bottom:-16px;pointer-events:none}
.gallery-empty{column-span:all;text-align:center;border:1px dashed var(--line);border-radius:6px;padding:3.5rem 1.5rem;color:var(--ink-soft)}
.gallery-empty .hand{display:block;font-size:1.1rem;margin-bottom:.4rem}

/* ============ LETTER ============ */
.letter-stage{position:relative;max-width:740px;margin:0 auto;text-align:center}
.envelope{width:min(450px,90vw);aspect-ratio:1.6;position:relative;margin:0 auto;display:block;border:0;background:none;padding:0;cursor:pointer;filter:drop-shadow(0 18px 24px rgba(43,32,36,.18));transition:transform .4s var(--ease);perspective:900px}
.envelope:hover{transform:translateY(-4px) rotate(-.8deg)}
.env-peek{position:absolute;inset:0;background:#E2CCAB;border-radius:4px}
.env-front{position:absolute;inset:0;background:#EEDFC8;border-radius:4px;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);z-index:2}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;background:#E8D5B8;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s var(--ease);z-index:3}
.env-seal{position:absolute;left:50%;top:56%;width:78px;transform:translate(-50%,-50%);z-index:4;transition:transform .5s var(--ease),opacity .5s}
.env-to{position:absolute;left:0;right:0;bottom:12%;z-index:3;font-size:1.05rem}
.letter-cue{font-family:var(--hand);color:var(--wine);margin-top:1.4rem;animation:pulse 2.4s ease-in-out infinite}
.letter-stage.open .env-flap{transform:rotateX(180deg);z-index:1}
.letter-stage.open .env-seal{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-20deg)}
.letter-stage.open .envelope{animation:envAway .9s .55s forwards}
.letter-stage.open .letter-cue{opacity:0}
@keyframes envAway{to{opacity:0;transform:translateY(40px) scale(.94)}}
.letter-paper{display:none;position:relative;text-align:left;background:radial-gradient(ellipse at 50% 0%,#FFFDF8,var(--card) 60%,#F8EFE1);border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:clamp(2.4rem,6vw,4.6rem);border-radius:3px}
.letter-stage.revealed .letter-paper{display:block;animation:unfold 1.2s var(--ease)}
@keyframes unfold{from{opacity:0;transform:perspective(1200px) rotateX(-14deg) translateY(30px)}}
.lp-flower{position:absolute;width:160px;pointer-events:none}
.lp-flower.tl{top:-56px;left:-56px;transform:scaleY(-1)}
.lp-flower.br{bottom:-56px;right:-56px;transform:scaleX(-1)}
.lp-date{font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-align:right;margin:0}
.lp-greet{font-style:italic;font-size:2.1rem;color:var(--wine);margin:1.4rem 0 1.5rem;font-weight:340}
.lp-body p{font-family:var(--display);font-size:1.18rem;font-weight:350;line-height:1.85;margin:0 0 1.15rem}
.lp-body p:first-child::first-letter{float:left;font-size:3.7rem;line-height:.82;color:var(--wine);padding:.35rem .55rem 0 0;font-style:italic}
.lp-empty{text-align:center;color:var(--ink-soft);font-family:var(--hand)}
.lp-sign{margin:2.4rem 0 0;text-align:right;font-family:var(--display);font-style:italic;color:var(--ink-soft);font-size:1.1rem}
.lp-sign .hand{display:block;font-size:1.9rem;margin-top:.3rem}

/* ============ OPEN WHEN ============ */
.ow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2.2rem 1.8rem;max-width:980px;margin:0 auto}
.ow-card{border:0;background:none;padding:0;cursor:pointer;text-align:center;transition:transform .4s var(--ease)}
.ow-card:hover{transform:translateY(-7px) rotate(var(--r,-1deg))}
.ow-env{position:relative;aspect-ratio:1.55;background:var(--env,#EEDFC8);border-radius:3px;box-shadow:var(--shadow);overflow:hidden}
.ow-env::before{content:"";position:absolute;left:0;right:0;top:0;height:58%;background:rgba(0,0,0,.05);clip-path:polygon(0 0,100% 0,50% 100%)}
.ow-env::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(0,0,0,.05) 50%,transparent 50.4%),linear-gradient(to top left,transparent 49.6%,rgba(0,0,0,.05) 50%,transparent 50.4%)}
.ow-seal{position:absolute;left:50%;top:58%;width:50px;transform:translate(-50%,-50%);z-index:2;transition:opacity .4s}
.ow-card:nth-child(3n+1) .ow-env{--env:#EEDFC8}
.ow-card:nth-child(3n+2) .ow-env{--env:#EBD3CC}
.ow-card:nth-child(3n) .ow-env{--env:#DCE0D0}
.ow-label{margin-top:1.1rem}
.ow-pre{display:block;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ow-when{display:block;font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--ink);margin-top:.2rem}
.ow-status{display:block;font-family:var(--hand);font-size:.8rem;color:var(--ink-soft);min-height:1.8em;margin-top:.3rem}
.ow-card.opened .ow-seal{opacity:.45}

/* ============ QUESTIONS ============ */
.quiz{max-width:740px;margin:0 auto}
.q-card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:clamp(1.8rem,5vw,3.4rem);box-shadow:var(--shadow);position:relative;overflow:hidden}
.q-card.anim{animation:qin .55s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateX(24px)}}
.q-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem}
.q-chapter{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.q-count{font-size:.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.q-progress{height:3px;background:var(--paper2);border-radius:3px;overflow:hidden;margin-bottom:2.2rem}
.q-progress i{display:block;height:100%;width:0;background:var(--wine);transition:width .6s var(--ease)}
.q-text{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.22;margin:0 0 1.6rem;font-weight:370}
.q-input{width:100%;min-height:150px;font-family:var(--display);font-size:1.15rem;line-height:1.7;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1rem 1.15rem;resize:vertical;outline:none;transition:border-color .25s,box-shadow .25s}
.q-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,146,90,.16)}
.q-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;gap:1rem;flex-wrap:wrap}
.q-links{display:flex;gap:1.2rem;align-items:center}
.q-link{background:none;border:0;padding:0;cursor:pointer;font-size:.9rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.q-link:hover{color:var(--wine);text-decoration-color:var(--wine)}
.q-hint{font-size:.76rem;color:var(--ink-soft);margin:1rem 0 0}
.q-saved{font-size:.78rem;color:var(--sage);margin:0}
.q-chapter-card{text-align:center}
.q-chap-num{font-family:var(--display);font-style:italic;font-size:4.2rem;color:var(--gold);opacity:.7;line-height:1}
.q-chapter-card h3{font-size:clamp(2rem,4vw,2.6rem);margin:.6rem 0 .9rem}
.q-chapter-card p{color:var(--ink-soft);max-width:28rem;margin:0 auto 2rem}
.q-done{text-align:center}
.q-done h3{font-size:clamp(2rem,4vw,2.7rem);margin:.6rem 0 1rem}
.q-done p{color:var(--ink-soft);max-width:30rem;margin:0 auto 1.4rem}
.q-status{font-size:.85rem;color:var(--ink-soft);min-height:1.5em;margin-top:1rem}

/* ============ GAMES ============ */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.7rem}
.game-card{display:flex;flex-direction:column;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:0;cursor:pointer;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s}
.game-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.game-art{display:grid;place-items:center;aspect-ratio:1.35;background:radial-gradient(circle at 50% 60%,#F5EADB,#E8D7BF)}
.game-art svg{width:48%;transition:transform .5s var(--ease)}
.game-card:hover .game-art svg{transform:scale(1.07) rotate(-3deg)}
.game-art.dark{background:radial-gradient(circle at 50% 55%,#7A2A3A,#3A0E19)}
.game-text{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.4rem 1.5rem;flex:1}
.gc-title{font-family:var(--display);font-size:1.5rem;color:var(--ink)}
.gc-title em{color:var(--wine)}
.gc-desc{font-size:.92rem;color:var(--ink-soft);line-height:1.55;flex:1}
.game-go{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--wine);margin-top:.6rem}
.game-go::after{content:" \2192";transition:margin .3s}
.game-card:hover .game-go::after{margin-left:.35rem}

/* ============ FOOTER ============ */
.footer{text-align:center;padding:5rem 1.5rem 8rem}
.footer-bouquet{width:210px;margin:0 auto}
.footer h2{font-size:clamp(2.7rem,6vw,4.5rem);margin:1.2rem 0 .3rem}
.footer .hand{font-size:1.25rem}
.footer-seal{width:70px;margin:2.2rem auto 1rem}
.footer small{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ============ OVERLAYS ============ */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(30,20,22,.9);display:grid;place-items:center;padding:2rem;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.lb-fig{margin:0;text-align:center}
#lbImg{max-width:84vw;max-height:74vh;margin:0 auto;border:10px solid var(--card);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);animation:fade .4s}
.lb-cap{font-family:var(--hand);color:#F3D9C9;font-size:1.25rem;margin-top:1.3rem}
.lb-count{font-size:.72rem;letter-spacing:.2em;color:rgba(255,255,255,.45);text-transform:uppercase;margin:.4rem 0 0}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(247,241,232,.08);color:var(--paper);border:1px solid rgba(247,241,232,.25);display:grid;place-items:center;cursor:pointer;transition:background .25s}
.lb-btn:hover{background:rgba(247,241,232,.2)}
.lb-btn svg{width:22px;height:22px}
.lb-prev{left:2rem;top:50%;transform:translateY(-50%)}
.lb-next{right:2rem;top:50%;transform:translateY(-50%)}
.lb-close{top:1.5rem;right:1.5rem}

.modal{position:fixed;inset:0;z-index:90;background:rgba(43,32,36,.45);display:grid;place-items:center;padding:1.5rem;animation:fade .3s}
.note{background:var(--card);width:min(570px,100%);padding:clamp(2.4rem,6vw,3.8rem);border-radius:4px;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);animation:pop .55s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}}
.note-flower{position:absolute;width:140px;top:-62px;left:-52px;transform:scaleY(-1);pointer-events:none}
.note h3{font-style:italic;font-size:1.9rem;color:var(--wine);margin:0 0 1.3rem;font-weight:340}
.note p{font-family:var(--display);font-size:1.15rem;font-weight:350;line-height:1.85;margin:0}
.note-sign{text-align:right;margin:1.6rem 0 0;font-size:1.2rem}
.x-btn{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:color .25s,border-color .25s}
.x-btn:hover{color:var(--wine);border-color:var(--wine)}
.x-btn svg{width:18px;height:18px}

.stage{position:fixed;inset:0;z-index:95;background:rgba(43,32,36,.6);display:grid;place-items:center;padding:2vh 2vw;animation:fade .3s}
.stage-box{background:var(--paper);width:min(1220px,100%);height:min(880px,96vh);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.6);animation:pop .5s var(--ease)}
.stage-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.4rem;border-bottom:1px solid var(--line);background:var(--card)}
.stage-head h3{font-size:1.4rem}
.stage-head .x-btn{position:static}
.stage-body{flex:1;overflow:auto;position:relative}
.stage-body iframe{width:100%;height:100%;border:0;display:block}

/* ============ PLAYER ============ */
.player{position:fixed;left:1.4rem;bottom:1.4rem;z-index:60;display:flex;align-items:center;gap:.85rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.5rem .6rem .5rem .55rem;box-shadow:var(--shadow-lg);animation:rise .6s var(--ease)}
.disc{width:40px;height:40px;border-radius:50%;flex:none;animation:spin 4s linear infinite;
  background:radial-gradient(circle,var(--paper) 0 3px,var(--wine) 4px 10px,transparent 11px),repeating-radial-gradient(circle,#2B2024 0 2px,#3A2B30 2px 3px)}
.player.paused .disc{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.p-meta{display:flex;flex-direction:column;min-width:0;width:190px}
.p-label{font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.p-title{font-family:var(--display);font-style:italic;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-bar{display:block;height:2px;background:var(--paper2);margin-top:.35rem;border-radius:2px;overflow:hidden}
.p-bar i{display:block;height:100%;width:0;background:var(--wine)}
.p-btn{width:36px;height:36px;border-radius:50%;border:0;background:var(--paper2);color:var(--wine);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .25s}
.p-btn:hover{background:var(--rose-soft)}
.p-btn svg{width:16px;height:16px;fill:currentColor}

.toast{position:fixed;left:50%;bottom:1.6rem;z-index:160;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);font-size:.9rem;padding:.8rem 1.4rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--ease);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  .navlinks{display:none}
  .hero-flowers{width:190px;opacity:.9}
  .clock-row{grid-template-columns:1fr;justify-items:center}
  .clock.right{flex-direction:row;text-align:left}
  .clock-mid svg{display:none}
  .lb-prev{left:.5rem}.lb-next{right:.5rem}
  .player{left:.8rem;right:.8rem;bottom:.8rem}
  .p-meta{flex:1;width:auto}
  .lp-flower{width:110px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .petals{display:none}
  .reveal,.polaroid{opacity:1;transform:none}
}

/* ============ BRIGHTER & MORE FLORAL ============ */
:root{
  --paper:#FFF9F5; --paper2:#F9EDE7; --card:#FFFFFF;
  --wine:#8E2C42; --wine2:#A63B53; --rose:#E9B3B9; --rose-soft:#F8D9DA;
  --sage:#93A884; --gold:#C29A5B; --ink:#3A292D; --ink-soft:#7B6467; --line:#F0E1D8;
}
body{background:
  radial-gradient(900px 520px at 8% 4%,rgba(248,217,218,.55),transparent 65%),
  radial-gradient(800px 600px at 96% 22%,rgba(233,240,224,.6),transparent 60%),
  radial-gradient(900px 700px at 50% 100%,rgba(250,226,214,.45),transparent 65%),
  var(--paper);background-attachment:fixed}
body::before{opacity:.28}
.gate{background:radial-gradient(ellipse at 50% 38%,#FFFFFF 0%,#FFF6F2 45%,#F9E3E1 100%)}
.hero::before{content:"";position:absolute;left:50%;top:48%;width:min(1000px,110vw);height:640px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(248,217,218,.75),rgba(255,249,245,0) 68%);pointer-events:none;z-index:0}
.banner{border-color:#F3D6D6;box-shadow:0 2px 4px rgba(142,44,66,.06),0 34px 70px -28px rgba(142,44,66,.35)}
.banner::before{border-color:var(--rose);opacity:.75}
.topnav.scrolled{background:rgba(255,249,245,.94)}
.polaroid,.q-card,.game-card,.note,.letter-paper{border-color:#F3E2DA}
.game-art{background:radial-gradient(circle at 50% 60%,#FFF4EF,#F8E1DA)}
.section{position:relative}
.section > .wrap{position:relative;z-index:1}
.sec-flower{position:absolute;top:10px;width:clamp(150px,17vw,250px);pointer-events:none;z-index:0;opacity:.9}
.sec-flower.l{left:-46px;transform:scaleY(-1)}
.sec-flower.r{right:-46px;transform:scale(-1,-1)}
.sec-flower svg{width:100%;height:auto;display:block}
.sec-head{position:relative}
.head-bloom{position:absolute;top:-.5rem;width:46px;pointer-events:none}
.head-bloom svg{width:100%;height:auto;display:block}
.head-bloom.a{left:calc(50% - 200px);transform:rotate(-18deg)}
.head-bloom.b{right:calc(50% - 200px);transform:rotate(14deg)}
@media (max-width:760px){.sec-flower{width:120px;opacity:.6}.head-bloom{display:none}}

/* ============ MORE BLUSH PINK ============ */
:root{--paper:#FFF7F4;--paper2:#FBEBE8;--line:#F2DEDA}

/* a big pink glow behind every section, alternating left and right */
.section::before{content:"";position:absolute;top:-40px;left:50%;width:min(1100px,125vw);height:760px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(248,208,212,.75) 0%,rgba(250,224,226,.38) 40%,rgba(255,247,244,0) 70%);pointer-events:none;z-index:0}
.section:nth-of-type(odd)::before{left:30%}
.section:nth-of-type(even)::before{left:70%}

/* a smaller, softer glow lower down on the opposite side */
.section::after{content:"";position:absolute;bottom:-140px;width:640px;height:560px;
  background:radial-gradient(circle,rgba(246,200,208,.45),rgba(255,247,244,0) 68%);pointer-events:none;z-index:0}
.section:nth-of-type(odd)::after{right:-180px}
.section:nth-of-type(even)::after{left:-180px}

/* the clocks and the footer get one too */
.clocks,.footer{position:relative}
.clocks > *,.footer > *{position:relative;z-index:1}
.clocks::before,.footer::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);height:520px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(248,208,212,.6),rgba(255,247,244,0) 66%);pointer-events:none;z-index:0}

/* a second glow in the landing area so the pink spreads wider */
.hero::after{content:"";position:absolute;left:-10%;bottom:-15%;width:720px;height:620px;
  background:radial-gradient(circle,rgba(246,200,208,.55),rgba(255,247,244,0) 66%);pointer-events:none;z-index:0}

/* keep the little flower dividers sitting on top of the glows */
.divider{position:relative;z-index:1}

/* no captions on photos */
.pol-cap{font-size:0;padding:.6rem 0 1.6rem}
.lb-cap{display:none}


/* ============ MOBILE ============ */
html{-webkit-text-size-adjust:100%}
@media (max-width:760px){
  body{background-attachment:scroll}
  .hero,.clocks,.section,.footer{overflow-x:clip}

  /* password screen */
  .gate-bouquet{width:130px}
  .gate-seal{width:76px;margin-top:-48px}
  .gate-title{font-size:1.9rem}

  /* landing + banner */
  .hero{min-height:100vh;min-height:100svh;padding:5rem 1rem 3rem}
  .hero-flowers{width:140px;opacity:.75}
  .hero-flowers.right{top:40px}
  .banner{padding:1.8rem 1.2rem}
  .banner::before{inset:7px}
  .b-orn{margin-bottom:1rem}
  .b-line1{font-size:2.3rem}
  .b-line2{font-size:1.15rem;margin:.8rem 0}
  .b-line3{font-size:.92rem}
  .after-burst h2{font-size:2.6rem}
  .after-actions .btn{flex:1 1 100%}

  /* clocks */
  .clock-face{width:54px;height:54px}
  .clock-time{font-size:1.7rem}
  .clock-note{font-size:.9rem;padding:0 .5rem}

  /* sections */
  .section{padding:3.5rem 1.1rem}
  .sec-head h2{font-size:2.1rem}
  .sec-sub{font-size:.98rem}
  .sec-flower{width:105px;opacity:.5}
  .divider{width:170px}

  /* gallery: 2 columns */
  .gallery-grid{columns:2;column-gap:.9rem}
  .polaroid{padding:7px 7px 0;margin-bottom:1.3rem}
  .pol-cap{padding:.4rem 0 1.1rem}
  .tape{width:58px;height:18px;top:-9px}
  .pol-flower{width:34px;right:-10px;bottom:-10px}

  /* photo viewer: arrows at the bottom */
  #lbImg{max-width:92vw;max-height:68vh;border-width:6px}
  .lb-prev,.lb-next{top:auto;bottom:1.4rem;transform:none}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
  .lb-close{top:1rem;right:1rem}

  /* letter */
  .envelope{width:88vw}
  .letter-paper{padding:2.2rem 1.3rem}
  .lp-flower{width:90px}
  .lp-flower.tl{top:-30px;left:-24px}
  .lp-flower.br{bottom:-30px;right:-24px}
  .lp-greet{font-size:1.7rem}
  .lp-body p{font-size:1.05rem;line-height:1.75}
  .lp-body p:first-child::first-letter{font-size:3rem}
  .lp-sign .hand{font-size:1.5rem}

  /* open when: 2 columns */
  .ow-grid{grid-template-columns:1fr 1fr;gap:1.4rem .9rem}
  .ow-seal{width:38px}
  .ow-pre{font-size:.6rem;letter-spacing:.14em}
  .ow-when{font-size:1.05rem}
  .note{padding:2.2rem 1.3rem;max-height:86vh;overflow:auto}
  .note-flower{width:96px;top:-36px;left:-24px}
  .note h3{font-size:1.5rem}
  .note p{font-size:1.05rem;line-height:1.75}

  /* questions */
  .q-card{padding:1.5rem 1.1rem}
  .q-text{font-size:1.35rem}
  .q-input{min-height:130px;font-size:1.05rem}
  .q-actions .btn{flex:1 1 100%}
  .q-hint{display:none}
  .q-chap-num{font-size:3.2rem}

  /* game cards as compact rows */
  .games-grid{grid-template-columns:1fr;gap:1rem}
  .game-card{flex-direction:row}
  .game-art{width:36%;aspect-ratio:auto;flex:none}
  .game-text{padding:1rem 1rem 1.1rem;gap:.35rem}
  .gc-title{font-size:1.2rem}
  .gc-desc{font-size:.84rem}

  /* games open full screen */
  .stage{padding:0}
  .stage-box{width:100%;height:100vh;height:100dvh;border-radius:0}
  .stage-head{padding:.6rem 1rem}
  .stage-head h3{font-size:1.1rem}

  /* café on a phone */
  .stage