:root{
  --sky:#A3D8FF;--mint:#94FFD8;--cream:#FDFFC2;--pink:#FF76CE;--lilac:#B1AFFF;--plum:#6F69AC;
  --ink:#3d3870;
  --paper:#FFFDF0; /* beige terang, kontras dengan background biru-kuning */
  --f-title:"Rubik Doodle Shadow","Ruge Boogie",cursive;
  /* --f-sub:"Playfair Display",serif; */
  --f-sub:"Zeyada",serif;
  --f-body:"VT323",monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:var(--f-body);font-size:1.3rem;color:var(--ink);line-height:1.35;
  /* background:linear-gradient(170deg,var(--sky) 0%,var(--lilac) 45%,var(--mint) 100%); */
    background:linear-gradient(170deg,rgba(148, 255, 216, 0.2) 0%,var(--mint) 100%),
    url("assets/background.png") center / cover no-repeat fixed;
  background-attachment:fixed;overflow-x:hidden;min-height:100vh;
}

/* Judul: tanpa gradasi warna-warni, cukup border gelap + bayangan lembut */
.title{
  font-family:"Ruge Boogie",cursive;font-weight:400;color:var(--plum);
  font-size:clamp(3rem,11vw,5.5rem);line-height:1;
  -webkit-text-stroke:1.5px var(--ink);
  text-shadow:0 5px 0 rgba(61,56,112,.18);
}
.sub{font-family:var(--f-body);font-style:italic;color:var(--plum);font-size:clamp(1.5rem,3.6vw,1.6rem)}
h2.sub{font-style:normal;font-weight:700;font-size:clamp(1.5rem,5vw,2.2rem);margin-bottom:.8rem}

/* SATU-SATUNYA gambar di background: overlay.png */
.sparkle{position:fixed;inset:0;pointer-events:none;z-index:0;background:url(assets/overlay.png) center/420px repeat;opacity:.9;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.35}}

main{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:clamp(4rem,10vw,6rem) 1.1rem 9rem;text-align:center}

/* Kotak: beige solid + bayangan, kontras dengan background */
.card{
  background:var(--paper);
  border:3px solid var(--plum);border-radius:26px;
  box-shadow:8px 8px 0 rgba(111,105,172,.35),0 18px 34px rgba(61,56,112,.18);
  padding:1.6rem 1.4rem;margin:3rem 0;position:relative;
}

/* Dekorasi PNG menempel di kotak, bukan di background */
.deco{position:absolute;pointer-events:none;z-index:3;filter:drop-shadow(0 6px 8px rgba(61,56,112,.28))}
.card:has(.deco.leaves){padding-top:3.6rem}
.deco.leaves{top:-140px;left:8%;transform:translateX(-50%);width:min(70%,320px)}
@keyframes sway{50%{transform:rotate(-5deg)}}
@keyframes hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-16px)}}
@keyframes swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.btn{font-family:var(--f-sub);font-weight:700;font-size:1.15rem;color:var(--ink);background:var(--mint);border:3px solid var(--plum);
  border-radius:999px;padding:.75rem 1.6rem;cursor:pointer;box-shadow:4px 4px 0 var(--plum);transition:transform .15s,box-shadow .15s;text-decoration:none;display:inline-block}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--plum)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--plum)}
.btn.pink{background:var(--pink);color:var(--paper)}
.hidden{display:none!important}
.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}}

/* word search */
.words{display:flex;gap:.8rem;justify-content:center;margin:1rem 0;flex-wrap:wrap}
.chip{font-size:1.5rem;padding:.1rem .9rem;border-radius:999px;background:var(--sky);border:2px dashed var(--plum);letter-spacing:.15em}
.chip.found{background:var(--pink);color:var(--paper);border-style:solid;text-decoration:line-through}
.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:min(100%,460px);margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none}
.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(1.4rem,6vw,2rem);background:#fff;border:2px solid var(--lilac);border-radius:10px;cursor:pointer;transition:background .15s,transform .15s;box-shadow:2px 2px 0 rgba(177,175,255,.6)}
.cell.sel{background:var(--cream);border-color:var(--pink);transform:scale(1.08)}
.cell.ok{background:var(--mint);border-color:var(--plum);color:var(--plum)}
.hint{margin-top:.8rem;opacity:.8}

/* playlist */
.track{display:flex;align-items:center;gap:.9rem;text-align:left;padding:.8rem;border-radius:18px;margin:.6rem 0;  background: linear-gradient(
    to right,
    var(--sky) 0%,
    var(--lilac) 50%,
    var(--cream) 100%);border:2px solid var(--lilac);cursor:pointer;flex-wrap:wrap;box-shadow:3px 3px 0 rgba(177,175,255,.5)}
.track.on {
  background: linear-gradient(
    to top,
    var(--mint), var(--sky), var(--lilac)
  );
  background-size: 100% 200%;
  border-color: var(--plum);
  animation: gradientFlow 3s ease infinite, trackPop .4s ease;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}

@keyframes trackPop {
  50% { transform: scale(1.03); }
}
.play{flex:none;width:46px;height:46px;border-radius:50%;border:3px solid var(--plum);background:var(--plum);color:var(--paper);font-size:1.1rem;cursor:pointer}
.track .name{font-family:var(--f-sub);font-weight:700;-webkit-text-stroke: 1px solid var(--plum);font-size:1.4rem;flex:1}
.track .desc{flex-basis:100%;display:none;font-size:1.25rem;padding:.3rem .2rem 0}
.track.on .desc{display:block;animation:pop .4s}
.bars{display:none;gap:3px;height:20px;align-items:flex-end}
.track.on.playing .bars{display:flex}
.bars i{width:4px;background:var(--plum);animation:bar .8s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}
@keyframes bar{0%,100%{height:5px}50%{height:20px}}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}
.photo{background:#fff;padding:.5rem .5rem .3rem;border-radius:8px;border:2px solid var(--plum);cursor:pointer;transition:transform .2s;box-shadow:3px 3px 0 rgba(111,105,172,.3)}
.photo:nth-child(odd){transform:rotate(-3deg)}.photo:nth-child(even){transform:rotate(3deg)}
.photo:hover{transform:rotate(0) scale(1.05)}
.photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:var(--sky)}
.photo span{font-family:"Ruge Boogie",cursive;font-size:1.8rem;color:var(--plum)}

.modal{position:fixed;inset:0;z-index:50;background:rgba(61,56,112,.55);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal .card{max-width:520px;width:100%;max-height:90vh;overflow:auto;position:relative;margin:0}
.modal img{width:100%;max-height:50vh;object-fit:cover;border-radius:14px;background:var(--sky)}
.close{position:absolute;top:.5rem;right:.7rem;background:none;border:none;font-size:2rem;color:var(--plum);cursor:pointer;font-family:var(--f-body)}

.envelope{width:min(280px,80%);aspect-ratio:3/2;margin:1rem auto;position:relative;cursor:pointer;background:var(--pink);border-radius:10px;border:3px solid var(--plum);animation:hop 2.5s infinite;box-shadow:5px 5px 0 rgba(111,105,172,.4)}
.envelope::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.5%,var(--plum) 50%,transparent 51%),linear-gradient(to bottom left,transparent 49.5%,var(--plum) 50%,transparent 51%);background-size:100% 100%}
.envelope::after{content:"♥";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2.6rem;color:var(--cream);background:var(--plum);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.letter{text-align:left;font-size:1.35rem;white-space:pre-wrap;min-height:4rem}
.caret::after{content:"▌";animation:blink 1s steps(1) infinite;color:var(--pink)}
@keyframes blink{50%{opacity:0}}

/* page 3 */
.dialog{max-width:540px;margin:0 auto}
.choices{display:flex;gap:1rem;justify-content:center;margin-top:1.4rem;min-height:60px}
#no{position:relative;transition:left .25s,top .25s}
#no.run{position:fixed;z-index:60}
.moon{font-size:3rem}
.moon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--plum);
  /* border-color:var(--plum); */
}