:root{
  --bg:#f7efe8;
  --paper:#fffaf5;
  --ink:#332a2a;
  --muted:#7f7070;
  --rose:#f18c8e;
  --rose-dark:#d96870;
  --mint:#8ac8b1;
  --gold:#f6c56a;
  --sky:#9cc8e8;
  --shadow:0 18px 50px rgba(76,50,44,.14);
  --soft:0 10px 24px rgba(76,50,44,.10);
  --radius:28px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:linear-gradient(180deg,#fbf6f1 0%,#f4ebe5 100%);color:var(--ink);font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,sans-serif}
button,input{font:inherit}
button{border:0;cursor:pointer}
.app-shell{min-height:100vh;display:flex;justify-content:center}
.screen{width:min(100%,560px);min-height:100vh;padding:20px 18px calc(28px + var(--safe-b));position:relative;overflow:hidden}
.screen:before,.screen:after{content:"";position:absolute;border-radius:999px;filter:blur(2px);z-index:-1}
.screen:before{width:260px;height:260px;background:rgba(241,140,142,.16);top:-100px;right:-90px}
.screen:after{width:220px;height:220px;background:rgba(138,200,177,.14);bottom:30px;left:-120px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.brand-mark{width:42px;height:42px;border-radius:16px;background:linear-gradient(135deg,var(--rose),#f7b6a5);box-shadow:var(--soft);display:grid;place-items:center;font-size:23px}
.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:1.5px;font-weight:800;color:var(--rose-dark)}
h1,h2,h3,p{margin-top:0}.hero-title{font-size:clamp(34px,9vw,52px);line-height:1.03;margin:26px 0 14px;letter-spacing:-1.5px}.subtitle{color:var(--muted);font-size:16px;line-height:1.55}
.card{background:rgba(255,250,245,.94);border:1px solid rgba(126,95,85,.08);box-shadow:var(--shadow);border-radius:var(--radius)}
.hero-card{padding:22px;margin-top:22px}
.cta{width:100%;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,var(--rose),#f5a596);color:white;font-weight:900;font-size:17px;box-shadow:0 10px 22px rgba(217,104,112,.26);transition:.2s transform,.2s filter}
.cta:active{transform:scale(.985)}.cta.secondary{background:#fff;color:var(--ink);box-shadow:var(--soft);border:1px solid rgba(70,50,50,.08)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.choice{padding:18px;border-radius:22px;background:white;border:2px solid transparent;box-shadow:var(--soft);text-align:center;transition:.2s}.choice.selected{border-color:var(--rose);transform:translateY(-2px)}.choice .emoji{font-size:38px;display:block;margin-bottom:8px}.choice small{display:block;color:var(--muted);margin-top:4px}
.name-input{width:100%;padding:16px 18px;border-radius:18px;border:1px solid rgba(70,50,50,.12);background:white;outline:none;font-size:17px;margin:10px 0 16px}.name-input:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(241,140,142,.12)}
.cat-stage{position:relative;min-height:335px;display:grid;place-items:center;margin:8px -6px 0;background:radial-gradient(circle at 50% 65%,rgba(255,255,255,.9),rgba(255,255,255,0) 58%)}
.cat-wrap{position:relative;width:min(78vw,340px);animation:float 4s ease-in-out infinite}.cat-wrap.happy{animation:hop .55s ease}.cat-wrap.feed{animation:nibble .55s ease}.cat-wrap.pet{animation:squish .45s ease}.cat-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 16px rgba(94,65,57,.16))}.cat-tail{transform-origin:81% 67%;animation:tail 2s ease-in-out infinite}.cat-ear{transform-origin:center bottom;animation:ear 3.5s ease-in-out infinite}.cat-eye{transform-origin:center;animation:blink 5s infinite}.heart-pop{position:absolute;left:52%;top:17%;font-size:24px;opacity:0;pointer-events:none}.heart-pop.show{animation:heart 1s ease forwards}
@keyframes float{50%{transform:translateY(-7px)}}@keyframes tail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}@keyframes ear{0%,92%,100%{transform:rotate(0)}95%{transform:rotate(5deg)}}@keyframes blink{0%,46%,49%,100%{transform:scaleY(1)}47%,48%{transform:scaleY(.08)}}@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-18px) rotate(-2deg)}70%{transform:translateY(-4px) rotate(2deg)}}@keyframes nibble{0%,100%{transform:translateY(0)}30%,70%{transform:translateY(4px) scale(.985)}}@keyframes squish{0%,100%{transform:scale(1)}50%{transform:scale(1.035,.97)}}@keyframes heart{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-45px) scale(1.2)}}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.level-pill{padding:9px 13px;border-radius:999px;background:#fff;box-shadow:var(--soft);font-size:13px;font-weight:900}.icon-btn{width:42px;height:42px;border-radius:15px;background:white;box-shadow:var(--soft);font-size:18px}
.pet-name{font-size:28px;margin:4px 0 2px}.pet-stage-label{color:var(--muted);font-size:14px;margin:0}
.progress-card{padding:16px 16px 15px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.metric{font-weight:900}.bar{height:12px;background:#efe5df;border-radius:999px;overflow:hidden;margin-top:10px}.bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--rose),var(--gold));transition:width .35s ease}.mini-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}.mini{background:#fff;border-radius:16px;padding:10px 11px;border:1px solid rgba(60,40,40,.06)}.mini label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:800}.mini .bar{height:7px;margin-top:6px}.mini:nth-child(2) .bar>span{background:var(--mint)}.mini:nth-child(3) .bar>span{background:var(--sky)}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.action{background:#fff;border-radius:20px;padding:13px 8px;box-shadow:var(--soft);font-weight:900;color:var(--ink)}.action span{font-size:25px;display:block;margin-bottom:4px}.action small{display:block;color:var(--muted);font-weight:700;margin-top:3px}
.section{margin-top:18px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.section h3{font-size:19px;margin:0}.section-head button{background:none;color:var(--rose-dark);font-weight:900}
.task-list{display:grid;gap:10px}.task{background:#fff;border-radius:20px;padding:14px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;box-shadow:var(--soft)}.task-icon{width:44px;height:44px;border-radius:15px;background:#fbf0eb;display:grid;place-items:center;font-size:21px}.task strong{display:block}.task p{font-size:12px;color:var(--muted);margin:3px 0 0}.reward{font-size:12px;font-weight:900;color:var(--rose-dark);white-space:nowrap}.task.done{opacity:.62}.task button{padding:9px 11px;border-radius:12px;background:var(--rose);color:white;font-weight:900;font-size:12px}.task.done button{background:#cfc5bf}
.bottom-nav{position:sticky;bottom:10px;margin-top:20px;padding:8px;background:rgba(255,250,245,.94);backdrop-filter:blur(10px);border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);z-index:4}.navbtn{background:transparent;padding:9px 4px;border-radius:15px;color:var(--muted);font-weight:800;font-size:11px}.navbtn span{display:block;font-size:20px;margin-bottom:3px}.navbtn.active{background:#fbebe7;color:var(--rose-dark)}
.sheet{position:fixed;inset:0;background:rgba(45,34,34,.28);display:flex;align-items:flex-end;justify-content:center;z-index:20;padding:12px}.sheet.hidden{display:none}.sheet-card{width:min(100%,560px);max-height:82vh;overflow:auto;background:var(--paper);border-radius:30px;padding:20px;box-shadow:0 -20px 70px rgba(42,30,30,.25)}.grab{width:46px;height:5px;border-radius:99px;background:#dfd3cc;margin:0 auto 18px}.inventory-grid,.achievement-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inv,.ach{background:white;border-radius:19px;padding:14px;box-shadow:var(--soft)}.inv .big,.ach .big{font-size:30px}.inv button{width:100%;margin-top:10px;padding:10px;border-radius:13px;background:#fbebe7;color:var(--rose-dark);font-weight:900}.ach.locked{filter:grayscale(1);opacity:.5}.ach small{color:var(--muted);display:block;margin-top:4px}.timeline{display:grid;gap:10px}.stage-row{background:white;border-radius:18px;padding:13px 14px;display:flex;gap:12px;align-items:center;box-shadow:var(--soft)}.stage-num{width:36px;height:36px;border-radius:13px;background:#f3e9e3;display:grid;place-items:center;font-weight:900}.stage-row.active{outline:2px solid var(--rose)}.stage-row.locked{opacity:.45}.stage-row b{display:block}.stage-row small{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(22px + var(--safe-b));transform:translate(-50%,20px);background:#2f2929;color:white;padding:12px 16px;border-radius:999px;font-weight:800;font-size:13px;opacity:0;pointer-events:none;z-index:50;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}.confetti i{position:absolute;top:-20px;font-style:normal;animation:fall 1.8s linear forwards}@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media (min-width:700px){body{padding:20px}.screen{min-height:calc(100vh - 40px);border-radius:34px;background:rgba(255,255,255,.28);box-shadow:var(--shadow)}}