:root{
  --bg:#120824;
  --purple:#7c3aed;
  --purple2:#a855f7;
  --lav:#e9d5ff;
  --white:#fff;
  --text:#f8f5ff;
  --muted:#cfc5dd;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;background:var(--bg);color:var(--text)}
body{overflow-x:hidden}
button{font:inherit}
.screen{display:none;min-height:100svh;padding:22px;position:relative;overflow:hidden}
.screen.active{display:flex}
#welcome{align-items:center;justify-content:center;background:
radial-gradient(circle at 20% 20%,rgba(168,85,247,.28),transparent 34%),
radial-gradient(circle at 80% 80%,rgba(124,58,237,.22),transparent 32%),
linear-gradient(160deg,#0e061d,#1d0b37 60%,#10051f)}
.glow{position:absolute;border-radius:50%;filter:blur(18px);opacity:.65}
.glow-a{width:220px;height:220px;background:#7c3aed;top:-80px;left:-100px}
.glow-b{width:250px;height:250px;background:#c026d3;bottom:-120px;right:-130px}
.glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 70px rgba(0,0,0,.32);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.welcome-card{position:relative;z-index:2;width:min(100%,430px);padding:28px 22px;border-radius:28px;text-align:center}
.mini-heart{font-size:34px;filter:drop-shadow(0 0 15px rgba(192,132,252,.7))}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:#d8b4fe;margin:4px 0 10px}
h1{font-size:clamp(38px,9vw,58px);line-height:.96;margin:10px 0 14px;letter-spacing:-.04em}
h1 span{color:#d8b4fe}
.subtitle{margin:0 0 18px;color:var(--muted)}
.cover-photo-wrap{width:175px;height:175px;border-radius:28px;padding:5px;margin:18px auto;background:linear-gradient(135deg,#c084fc,#6d28d9);box-shadow:0 16px 40px rgba(124,58,237,.35);transform:rotate(-2deg)}
.cover-photo{width:100%;height:100%;object-fit:cover;border-radius:23px;display:block}
.primary-btn{border:0;border-radius:16px;padding:15px 22px;background:linear-gradient(135deg,#a855f7,#6d28d9);color:white;font-weight:800;box-shadow:0 10px 30px rgba(124,58,237,.35);min-width:210px}
.primary-btn:active{transform:scale(.98)}
.hint{font-size:12px;color:#bdb0ca;margin:12px 0 0}
.music-btn{position:fixed;z-index:50;right:16px;top:calc(env(safe-area-inset-top) + 14px);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(32,11,58,.82);color:white;font-size:20px;box-shadow:0 8px 25px rgba(0,0,0,.3)}
.hidden{display:none!important}

#game{flex-direction:column;background:linear-gradient(180deg,#140724,#251041 65%,#160827);padding-top:calc(env(safe-area-inset-top) + 26px)}
.game-header{display:flex;align-items:center;justify-content:space-between;max-width:620px;width:100%;margin:0 auto 8px}
.game-header h2{margin:0;font-size:31px}
.moves-box{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:8px 14px;text-align:center;min-width:76px}
.moves-box span{display:block;font-size:11px;color:#c9bed5}
.moves-box strong{font-size:22px}
.progress-track{height:8px;border-radius:99px;background:rgba(255,255,255,.09);max-width:620px;width:100%;margin:8px auto 0;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#a855f7,#e879f9);border-radius:inherit;transition:width .35s ease}
.stage-subtitle{max-width:620px;width:100%;margin:12px auto 17px;color:#cabed7;font-size:14px}
.memory-grid{width:100%;max-width:620px;margin:0 auto;display:grid;gap:9px;grid-template-columns:repeat(4,1fr);padding-bottom:28px}
.card{position:relative;aspect-ratio:1/1.16;perspective:900px;cursor:pointer}
.card-inner{position:absolute;inset:0;transition:transform .48s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.card-front{display:grid;place-items:center;background:linear-gradient(145deg,#7e22ce,#4c1d95);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.card-front::after{content:"💜";font-size:25px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.card-back{transform:rotateY(180deg);border:2px solid rgba(216,180,254,.7);background:#25113d}
.card-back img{width:100%;height:100%;object-fit:cover;display:block}
.card.matched .card-back{box-shadow:0 0 0 2px rgba(233,213,255,.5),0 0 25px rgba(168,85,247,.65)}
.modal{position:fixed;inset:0;z-index:30;background:rgba(9,3,17,.72);display:flex;align-items:center;justify-content:center;padding:22px}
.modal-card{width:min(100%,380px);padding:28px;border-radius:26px;text-align:center}
.big-emoji{font-size:52px}
.modal-card h3{font-size:28px;margin:10px 0}
.modal-card p{color:#d6c9df;margin:0 0 22px}

#surprise{align-items:center;justify-content:center;text-align:center;background:
radial-gradient(circle at center,rgba(126,34,206,.36),transparent 45%),#10051f}
.surprise-card{width:min(100%,430px);padding:34px 26px;border-radius:28px}
.surprise-card h2{font-size:36px;margin:5px 0 12px}
.surprise-card p{color:#d1c3dc;line-height:1.6;margin:0 0 24px}

#finale{display:none;min-height:100svh;background:radial-gradient(circle at top,#361255,#12051e 55%,#08030d);padding:0}
#finale.active{display:block}
#heartsCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.final-content{position:relative;z-index:2;width:min(100%,650px);margin:auto;text-align:center;padding:calc(env(safe-area-inset-top) + 54px) 18px 70px}
.love-title{font-size:clamp(42px,10vw,68px);line-height:.95;margin:8px 0 28px;background:linear-gradient(90deg,#f5d0fe,#c084fc,#fff,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.035);filter:drop-shadow(0 0 18px rgba(192,132,252,.35))}}
.slideshow{width:min(82vw,330px);aspect-ratio:4/5;margin:0 auto 28px;border-radius:26px;padding:5px;background:linear-gradient(145deg,#e879f9,#7c3aed);box-shadow:0 18px 60px rgba(126,34,206,.38);transform:rotate(1deg)}
.slideshow img{width:100%;height:100%;object-fit:cover;border-radius:21px;display:block;transition:opacity .65s ease,transform .65s ease}
.letter{text-align:left;padding:25px 22px;border-radius:25px;line-height:1.85}
.letter h3{text-align:center;font-size:25px;margin:0 0 15px;color:#ead7ff}
.letter p{margin:0;color:#f1eafa;font-size:15px;white-space:normal}
.signature{text-align:right;margin-top:18px;color:#d8b4fe;font-weight:800}

@media (max-width:390px){
  .screen{padding:16px}
  .memory-grid{gap:7px}
  .card-face{border-radius:11px}
}
@media (min-width:620px){
  .memory-grid{gap:12px}
}