/* Layout: satu skrin penuh pada satu masa. Langit malam kampung (canvas) di belakang, kandungan di atasnya.
   Bold di satu tempat: kelip-kelip yang bercahaya dan meterai lilin. Selebihnya senyap. */
:root{
  --sky-top:#090f21;
  --glow:#e6f28a;
  --glow-ink:#1b2208;
  --wax:#b32b3a;
  --wax-hi:#d4505f;
  --wax-lo:#7a1824;
  --paper:#f1e6de;
  --paper-line:#dccdc4;
  --ink:#3b2b33;
  --env-back:#b8948a;
  --env-front:#e4cbc1;
  --env-flap:#d8b9ae;
  --env-flap-in:#bf9b90;
  --text:#efeaf5;
  --muted:#a9a2be;
  --line:rgba(239,234,245,.22);
  --panel:rgba(12,17,38,.66);
  --font-display:'Young Serif',Georgia,'Times New Roman',serif;
  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--sky-top);color:var(--text);font:400 1rem/1.55 var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,textarea,input{font:inherit;color:inherit}
#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

.screen{position:fixed;inset:0;z-index:2;display:flex;overflow-y:auto;overscroll-behavior:contain;
  padding-block:calc(env(safe-area-inset-top,0px) + 60px) calc(env(safe-area-inset-bottom,0px) + 28px);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  animation:appear .6s ease both}
.screen.game{padding:0;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.inner{margin:auto;width:100%;max-width:26rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem;animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes appear{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.eyebrow{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
h1,h2{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.1rem,9.5vw,3.1rem)}
h2{font-size:clamp(1.65rem,7vw,2.25rem)}
.hl{color:var(--glow)}
.lead{margin:0;font-size:1.06rem;max-width:30ch;color:var(--text)}
.muted{margin:0;font-size:.9rem;color:var(--muted);max-width:34ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.8rem 1.7rem;border:0;border-radius:999px;font-weight:700;font-size:1.05rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:focus-visible,.linklike:focus-visible,.seal:focus-visible,#mute:focus-visible,textarea:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
.btn.primary{background:var(--glow);color:var(--glow-ink);box-shadow:0 0 30px rgba(230,242,138,.32)}
.btn.love{background:linear-gradient(180deg,var(--wax-hi),var(--wax) 55%,var(--wax-lo));color:#fff3ee;box-shadow:0 10px 26px rgba(179,43,58,.42)}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.linklike{background:none;border:0;padding:.7rem 0;color:var(--muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:.95rem}

#mute{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 12px);right:max(16px,env(safe-area-inset-right,0px));width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--text)}
#mute svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mute .off{display:none}
#mute[aria-pressed="true"] .on{display:none}
#mute[aria-pressed="true"] .off{display:block}

/* HUD permainan */
.hud{position:fixed;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);left:max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:.85rem;min-height:44px;padding-right:72px}
.hud span.lbl{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hud b{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.pips{display:flex;gap:6px}
.pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line);transition:background .3s,box-shadow .3s,border-color .3s}
.pips i.on{background:var(--glow);border-color:var(--glow);box-shadow:0 0 10px var(--glow)}
.hint{position:fixed;left:0;right:0;z-index:6;top:calc(env(safe-area-inset-top,0px) + 66px);text-align:center;color:var(--muted);font-size:.95rem;pointer-events:none;transition:opacity .6s}
.hint.gone{opacity:0}

/* Sampul dan meterai */
.env{position:relative;width:min(84vw,340px);height:calc(min(84vw,340px)*.68);margin:clamp(4.5rem,17vh,8.5rem) auto 0;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.env>*{position:absolute}
.env-back{inset:0;background:var(--env-back);border-radius:6px;z-index:0}
.peek{left:7%;right:7%;top:6%;height:88%;background:var(--paper);border-radius:3px;z-index:2;padding:.9rem 1rem;font-family:var(--font-hand);font-size:1.5rem;line-height:1.2;color:var(--ink);transition:transform 1.1s cubic-bezier(.3,.9,.3,1) .55s;
  background-image:repeating-linear-gradient(to bottom,transparent 0 1.55rem,var(--paper-line) 1.55rem calc(1.55rem + 1px));background-position:0 .9rem}
.env.reveal .peek{transform:translateY(-7%)}
.env.open .peek{transform:translateY(-62%)}
.env-front{inset:0;background:var(--env-front);border-radius:6px;z-index:3;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.env-flap{left:0;top:0;width:100%;height:54%;background:var(--env-flap);z-index:4;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .7s cubic-bezier(.4,.1,.2,1),background .3s ease .25s}
.env.open .env-flap{transform:perspective(800px) rotateX(180deg);background:var(--env-flap-in)}
.env.behind .env-flap{z-index:1}

.seal{left:50%;top:54%;width:68px;height:68px;margin:-34px 0 0 -34px;z-index:6;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.seal .ring{position:absolute;left:50%;top:50%;width:106px;height:106px;margin:-53px 0 0 -53px;transform:rotate(-90deg);pointer-events:none;overflow:visible}
.ring circle{fill:none;stroke-width:4}
.ring .trk{stroke:rgba(255,255,255,.28)}
.ring .bar{stroke:var(--glow);stroke-linecap:round;stroke-dasharray:0 100;filter:drop-shadow(0 0 4px rgba(230,242,138,.8))}
.seal:not(.holding) .bar{transition:stroke-dasharray .4s ease}
.seal .body{position:absolute;inset:0;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.seal:not(.holding) .body{transition:transform .3s ease}
.half{position:absolute;inset:0;transition:transform .8s cubic-bezier(.3,.7,.3,1),opacity .8s ease}
.half.l{clip-path:polygon(0 0,54% 0,46% 28%,56% 55%,47% 100%,0 100%)}
.half.r{clip-path:polygon(54% 0,100% 0,100% 100%,47% 100%,56% 55%,46% 28%)}
.wax{position:absolute;inset:0;border-radius:52% 48% 50% 50%/50% 52% 48% 50%;background:radial-gradient(circle at 35% 28%,var(--wax-hi),var(--wax) 55%,var(--wax-lo));display:grid;place-items:center}
.wax::before{content:"";position:absolute;inset:11%;border-radius:50%;border:2px solid rgba(60,0,10,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.22)}
.wax svg{width:26px;height:26px;fill:rgba(70,6,16,.55);filter:drop-shadow(0 1px 0 rgba(255,255,255,.28))}
.env.broken .seal{pointer-events:none}
.env.broken .half.l{transform:translate(-30px,26px) rotate(-26deg);opacity:0}
.env.broken .half.r{transform:translate(30px,30px) rotate(24deg);opacity:0}
.env.broken .ring{opacity:0;transition:opacity .4s}

/* Cinematic: surat terjumpa dalam balang */
#scr-seal{overflow-x:hidden}
#scr-seal.busy{overflow:hidden}
#scr-seal.busy .seal{pointer-events:none}
#scr-seal .eyebrow{opacity:0;transform:translateY(12px);transition:opacity .9s ease .15s,transform .9s ease .15s}
#scr-seal h2{opacity:0;transform:translateY(12px);transition:opacity .9s ease 1.6s,transform .9s ease 1.6s}
#scr-seal .muted{opacity:0;transition:opacity .9s ease 2.75s}
#scr-seal.cine .eyebrow,#scr-seal.cine h2,#scr-seal.cine .muted{opacity:1;transform:none}

.env::after{content:"";position:absolute;left:50%;top:50%;width:170%;height:170%;margin:-85% 0 0 -85%;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(230,242,138,.26),rgba(230,242,138,0) 62%)}
.env.reveal{animation:envRise 2s cubic-bezier(.22,.9,.24,1) both}
.env.reveal::after{animation:envGlow 2s ease both}
@keyframes envRise{
  0%{opacity:0;transform:translateY(40vh) scale(.5) rotate(-9deg);filter:drop-shadow(0 20px 26px rgba(0,0,0,.5)) blur(7px)}
  16%{opacity:1}
  64%{transform:translateY(-2.4vh) scale(1.04) rotate(2deg);filter:drop-shadow(0 20px 26px rgba(0,0,0,.5)) blur(0)}
  100%{opacity:1;transform:none;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
}
@keyframes envGlow{0%{opacity:0}40%{opacity:1}100%{opacity:.55}}

.seal-arrow{position:absolute;left:72%;top:-60px;width:62px;height:62px;z-index:7;opacity:0;pointer-events:none;color:var(--glow);
  filter:drop-shadow(0 0 10px rgba(230,242,138,.6))}
.env.reveal .seal-arrow{animation:arrowIn .6s ease 2.6s both,arrowBob 1.7s ease-in-out 3.2s infinite}
@keyframes arrowIn{from{opacity:0}to{opacity:1}}
@keyframes arrowBob{0%,100%{transform:rotate(26deg) translateY(0)}50%{transform:rotate(26deg) translateY(10px)}}

/* Surat */
.paper{--lh:2.15rem;position:relative;width:100%;background:var(--paper);color:var(--ink);border-radius:4px;padding:.55rem 1.3rem 1.2rem 2.6rem;box-shadow:0 26px 50px rgba(0,0,0,.5);transform:rotate(-.5deg);font-family:var(--font-hand);font-size:1.7rem;line-height:var(--lh);font-weight:500;
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--lh) - 1px),var(--paper-line) calc(var(--lh) - 1px) var(--lh));background-position:0 .55rem;cursor:pointer}
.paper::before{content:"";position:absolute;left:2rem;top:0;bottom:0;width:1px;background:rgba(179,43,58,.35)}
.paper p{margin:0 0 var(--lh);opacity:0;animation:ink .9s ease both}
.paper p.sign{text-align:right;margin-bottom:0}
.paper p.date-line{text-align:right;font-size:1.1rem;opacity:0.6;margin-bottom:0}
.paper.all p{animation-duration:.01s;animation-delay:0s!important}
@keyframes ink{from{opacity:0;transform:translateY(6px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}

/* Soalan */
.choices{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
#yes{transform:scale(var(--s,1));transform-origin:left center;transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .2s ease}
.no-slot{position:relative;width:9rem;height:3.25rem}
#no{position:absolute;left:0;top:0;white-space:nowrap;touch-action:none;transition:transform .28s cubic-bezier(.3,1.4,.5,1),background .2s}
#no.away{position:absolute;z-index:40}

/* Balas */
.field{display:flex;flex-direction:column;gap:.5rem;width:100%}
.field textarea{width:100%;resize:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;font-size:1rem;line-height:1.5}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* Tentang aku */
.inner.wide{max-width:31rem}
.gallery{display:flex;flex-direction:column;gap:1.5rem;width:100%;margin-top:.5rem}
.photo-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1rem;overflow:hidden;animation:rise .8s ease both}
.photo-card img{width:100%;border-radius:12px;display:block;margin-bottom:.8rem;box-shadow:0 10px 20px rgba(0,0,0,.3)}
.photo-card p{margin:0;font-family:var(--font-hand);font-size:1.4rem;line-height:1.3;color:var(--text);text-align:center}

.about-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}
.about-list li{position:relative;padding-left:1.45rem;font-size:1rem;color:var(--text)}
.about-list li::before{content:"";position:absolute;left:.15rem;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow)}
.about-h{margin:.8rem 0 0;font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:var(--glow)}
.bio{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.1rem;font-size:.95rem;width:100%}
.bio dt{color:var(--muted);white-space:nowrap}
.bio dd{margin:0}
.note{border-left:2px solid var(--line);padding-left:1.1rem;font-size:1rem;color:var(--text);width:100%}
.note p{margin:0 0 .7rem}
.note p:last-child{margin:0}
.note .sign{text-align:right;font-family:var(--font-hand);font-size:1.6rem;color:var(--glow)}

/* Quiz / soalan last */
.q-text{margin:.2rem 0 0;font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--text)}
.choices.col{flex-direction:column;align-items:stretch;gap:.65rem;width:100%}
.choices.col .btn{width:100%}
.progress-bar{width:100%;height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:.5rem}
#quizBar{height:100%;background:var(--glow);transition:width .4s ease}
.field input[type=date]{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;font-size:1rem}

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