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

:root{
  --cream:#fffaf4; --pink:#f7d9df; --pink2:#f4c3cf; --sage:#dcebdc;
  --blue:#dcecf4; --lav:#e9e0f4; --brown:#66535a; --dark:#40353c;
  --white:#ffffff; --shadow:0 18px 45px rgba(101,83,90,.12);
}
*{box-sizing:border-box} body{margin:0;background:linear-gradient(135deg,#fffaf4,#f7eef2 48%,#edf6f2);font-family:Nunito,sans-serif;color:var(--dark)}
button{font:inherit;cursor:pointer;border:0}.app{max-width:1050px;margin:auto;min-height:100vh;padding:22px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;color:#a27b88}.topbar h1{font-size:24px;margin:5px 0 0}.stats{display:flex;gap:10px}.stats div{background:#fff8;border:1px solid #fff;padding:9px 14px;border-radius:16px;box-shadow:var(--shadow);min-width:82px}.stats span{display:block;font-size:11px;color:#8a7880}.stats b{font-size:18px}
.screen{display:none}.screen.active{display:block}.card{background:#fffffff0;border:1px solid #fff;border-radius:28px;box-shadow:var(--shadow)}
.hero{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:390px}.hero-art{position:relative;background:linear-gradient(160deg,var(--pink),var(--lav));display:flex;align-items:center;justify-content:center;overflow:hidden}.building{font-size:130px;filter:drop-shadow(0 12px 5px #8b728230)}.moon{position:absolute;right:30px;top:25px;font-size:50px;color:#fff}.cloud{position:absolute;background:#fff8;border-radius:50px;width:120px;height:35px}.c1{top:65px;left:25px}.c2{bottom:65px;right:25px}.flower{position:absolute;font-size:34px}.f1{bottom:25px;left:35px}.f2{bottom:25px;right:40px}.hero-copy{padding:48px;display:flex;flex-direction:column;justify-content:center}.pill{display:inline-block;width:max-content;padding:7px 12px;border-radius:999px;background:var(--pink);color:#8c5d6a;font-size:11px;font-weight:800;letter-spacing:1px}.hero-copy h2{font-size:36px;line-height:1.12;margin:17px 0 12px}.hero-copy p,.section-head p{color:#81747b;line-height:1.7}.primary{margin-top:18px;padding:14px 20px;border-radius:16px;background:var(--dark);color:white;font-weight:800;box-shadow:0 10px 20px #40353c22}.primary:hover{transform:translateY(-2px)}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px}.mini{padding:22px;display:grid;gap:5px}.mini span{font-size:30px}.mini small{color:#91848a}
.section-head{text-align:center;margin:45px 0 25px}.section-head h2{font-size:34px;margin:12px 0 5px}.character-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:760px;margin:auto}.character{padding:30px;text-align:center;transition:.2s;background:#fff}.character:hover{transform:translateY(-5px)}.avatar{width:150px;height:150px;margin:auto;border-radius:45%;display:grid;place-items:center;font-size:90px}.girl{background:var(--pink)}.boy{background:var(--blue)}.character h3{margin:18px 0 5px;font-size:22px}.character p{color:#8a7c83}
.gamebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.profile{display:flex;align-items:center;gap:10px}.profile span{display:block;font-size:11px;color:#91848a}.profile b{font-size:17px}.small-avatar{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--pink);font-size:28px}.day{background:#fff;padding:10px 16px;border-radius:14px;box-shadow:var(--shadow)}.progress{height:8px;background:#fff;border-radius:99px;margin-bottom:18px;overflow:hidden}.progress div{height:100%;width:20%;background:#d2a8b5;border-radius:99px;transition:.4s}
.event{max-width:800px;margin:auto;text-align:center;padding:38px}.event-icon{font-size:55px;margin-bottom:10px}.event h2{font-size:31px;margin:12px 0 8px}.event p{color:#7d7077;line-height:1.6;max-width:620px;margin:0 auto 25px}.choices{display:grid;gap:11px;text-align:left}.choice{padding:15px 18px;border-radius:17px;background:#fbf5f7;border:2px solid transparent;color:var(--dark);font-weight:700;transition:.2s}.choice:hover{border-color:#d8aeba;background:#fff}.choice small{display:block;color:#9b8d93;margin-top:3px;font-weight:600}
.status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:800px;margin:15px auto}.status{padding:15px}.status span{font-size:12px;font-weight:800}.meter{height:8px;background:#eee7e9;border-radius:99px;margin-top:9px;overflow:hidden}.meter i{display:block;height:100%;width:50%;background:#b9d6c1;border-radius:99px;transition:.3s}
.result{max-width:600px;margin:70px auto;text-align:center;padding:50px}.result-icon{font-size:65px}.result h2{font-size:35px;margin:15px 0 8px}.result p{color:#81747b;line-height:1.7}.final-score{margin:25px auto;padding:18px;border-radius:20px;background:var(--sage);display:flex;justify-content:space-between;align-items:center;max-width:300px}.final-score b{font-size:30px}.secondary{display:block;margin:12px auto 0;background:transparent;color:#81747b;font-weight:700}
footer{text-align:center;color:#9a8c92;font-size:12px;padding:30px 0 10px}

@media(max-width:700px){.app{padding:14px}.topbar{align-items:flex-start}.topbar h1{font-size:19px}.stats{display:none}.hero{grid-template-columns:1fr}.hero-art{min-height:230px}.hero-copy{padding:30px}.hero-copy h2{font-size:29px}.features,.status-row{grid-template-columns:1fr}.character-grid{grid-template-columns:1fr}.character{padding:24px}.event{padding:27px 18px}.event h2{font-size:25px}.result{margin:35px auto;padding:35px 22px}}
