@import url('https://fonts.googleapis.com/css2?family=Mali:wght@300;400;500;600;700&display=swap');

:root{
  --pink:#E986A4;
  --pink2:#F7B8C9;
  --lav:#B89AE8;
  --lav2:#E8DDFC;
  --cream:#FFF9FB;
  --ink:#5B4050;
  --muted:#8A6C7A;
  --white:#fff;
  --shadow:0 14px 34px rgba(120,76,103,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-family:'Mali',cursive;color:var(--ink);background:var(--cream)}
body{
  min-height:100dvh;
  background:
    radial-gradient(circle at 12% 16%,rgba(232,221,252,.82),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(247,184,201,.72),transparent 26%),
    linear-gradient(145deg,#fff7fa,#fff 46%,#f8f2ff);
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
a{color:inherit}
.page-center{min-height:calc(100dvh - 44px);display:flex;align-items:center;justify-content:center}
.card{width:min(92vw,680px);background:rgba(255,255,255,.94);border:2px solid rgba(233,134,164,.58);border-radius:28px;padding:34px;box-shadow:var(--shadow);text-align:center;backdrop-filter:blur(8px)}
.eyebrow{font-size:.86rem;color:var(--lav);font-weight:700;letter-spacing:.04em;margin-bottom:8px}
h1,h2{line-height:1.35}h1{font-size:clamp(1.65rem,5vw,2.45rem);margin-bottom:10px}h2{font-size:clamp(1.25rem,4vw,1.8rem)}
.sub{font-size:clamp(.95rem,3vw,1.08rem);line-height:1.8;color:var(--muted);margin:8px auto 20px;max-width:560px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;text-decoration:none;cursor:pointer;font:600 1rem 'Mali',cursive;background:linear-gradient(135deg,var(--pink),var(--lav));color:#fff;box-shadow:0 9px 22px rgba(181,123,164,.26);transition:.18s ease}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn.soft{background:#fff;color:var(--ink);border:1.5px solid var(--pink2);box-shadow:none}
.hero-emoji{font-size:clamp(5rem,22vw,9rem);filter:drop-shadow(0 10px 16px rgba(110,79,100,.15));margin:8px 0 12px;user-select:none}
.note{margin-top:18px;font-size:.82rem;color:#ad8d9b;line-height:1.6}
.sparkles{font-size:1.1rem;letter-spacing:.32rem;color:var(--lav)}
.topbar{width:min(94vw,900px);margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{display:inline-flex;text-decoration:none;background:rgba(255,255,255,.86);border:1.5px solid var(--pink2);padding:9px 14px;border-radius:999px;font-size:.9rem}

/* menu */
.menu-wrap{width:min(94vw,860px);margin:auto;text-align:center;padding:30px 0}
.menu-title{margin:4px 0 8px}.menu-sub{color:var(--muted);margin-bottom:25px}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.menu-item{min-height:180px;background:#fff;border:2px solid rgba(233,134,164,.46);border-radius:28px;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:var(--shadow);padding:24px;transition:.2s ease}
.menu-item:hover{transform:translateY(-4px)}.menu-icon{font-size:3rem}.menu-item strong{font-size:1.05rem}.menu-item small{color:var(--muted);line-height:1.45}

/* OTP */
.otp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:22px auto 12px;max-width:420px}.otp{width:100%;aspect-ratio:1/1;border-radius:14px;border:2px solid #efc2d1;background:#fff;text-align:center;font:700 1.35rem 'Mali',cursive;color:var(--pink);outline:none}.otp:focus{border-color:var(--lav);box-shadow:0 0 0 4px rgba(184,154,232,.14)}.error{height:22px;color:#c75578;font-size:.88rem;opacity:0;transition:.2s}.error.show{opacity:1}@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}.shake{animation:shake .34s}

/* love days */
.days-big{font-size:clamp(3.4rem,15vw,6.4rem);font-weight:700;line-height:1;color:var(--pink);margin:18px 0 4px}.photo-slot{width:min(76vw,330px);aspect-ratio:4/3;object-fit:cover;border-radius:22px;border:2px solid #efb0c3;box-shadow:var(--shadow);margin:18px auto}.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.time-box{background:linear-gradient(145deg,#f99fba,#bda2ea);color:#fff;border-radius:18px;padding:13px 8px;font-weight:700}.time-box span{font-size:1.25rem}.time-box small{display:block;font-size:.72rem;margin-top:2px;font-weight:500}

/* quiz */
.quiz{width:min(94vw,700px);margin:auto}.quiz-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.badge{white-space:nowrap;background:#fff;border:1.5px solid var(--pink2);border-radius:999px;padding:7px 11px;font-weight:700}.progress{height:10px;flex:1;background:#f5e7ed;border-radius:999px;overflow:hidden}.progress>div{height:100%;background:linear-gradient(90deg,var(--pink),var(--lav));width:0;transition:.25s}.question{font-size:1.1rem;font-weight:700;margin:8px 0 14px}.choices{display:grid;gap:10px}.choice{width:100%;text-align:left;border:1.6px solid #edbfd0;border-radius:16px;background:#fff;padding:12px 14px;font:500 .98rem 'Mali',cursive;color:var(--ink);cursor:pointer;transition:.15s}.choice:hover{transform:translateY(-1px)}.choice.selected{border-color:var(--lav);background:#f7f2ff}.choice.correct{border-color:#71b78a;background:#edf9f1}.choice.wrong{border-color:#d97793;background:#fff0f4}.feedback{min-height:54px;margin-top:12px;color:var(--muted);font-size:.92rem;line-height:1.55}.quiz-actions{margin-top:12px}.result{padding:18px 4px}.result-score{font-size:3rem;font-weight:700;color:var(--pink);margin:10px 0}

/* memories */
.memory-wrap{width:min(94vw,860px);margin:auto;padding:24px 0 50px}.memory-head{text-align:center;margin-bottom:24px}.memory-card{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:center;background:#fff;border:2px solid rgba(233,134,164,.4);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin-bottom:18px}.memory-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:17px}.memory-card h2{font-size:1.13rem;margin-bottom:7px}.memory-card p{color:var(--muted);line-height:1.8;font-size:.94rem}

/* letter */
.letter{width:min(92vw,760px);margin:auto;background:rgba(255,255,255,.95);border:2px solid rgba(233,134,164,.48);border-radius:30px;padding:clamp(24px,6vw,46px);box-shadow:var(--shadow)}.letter h1{text-align:center;margin-bottom:8px}.letter .date{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:24px}.letter p{line-height:2;color:#674b59;font-size:clamp(.96rem,3vw,1.08rem);white-space:pre-line}.letter-sign{text-align:right;margin-top:24px;font-weight:600;color:var(--pink)}

@media(max-width:600px){.menu-grid{grid-template-columns:1fr 1fr;gap:12px}.menu-item{min-height:150px;padding:16px;border-radius:22px}.menu-icon{font-size:2.4rem}.memory-card{grid-template-columns:1fr;gap:13px}.memory-card img{max-height:260px}.time-grid{grid-template-columns:repeat(2,1fr)}.card{padding:26px 20px}.otp-row{gap:6px}.otp{border-radius:11px;font-size:1.1rem}}
@media(max-width:360px){.menu-grid{grid-template-columns:1fr 1fr}.menu-item{min-height:135px}.menu-item small{display:none}.otp-row{gap:5px}.card{padding:22px 15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}