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

:root { --ink:#31423c; --muted:#7f9189; --cream:#fffaf0; --card:#fffdf8; --sage:#8fb69f; --sage-dark:#5e8971; --peach:#f0a77e; --yellow:#f5c96b; --line:#e9e4d8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Nunito","Noto Sans SC",sans-serif; background:radial-gradient(circle at 20% 0%,#fffef8 0,transparent 35%),#f2eee5; }
button,input { font:inherit; }
button { color:inherit; }
.game-shell { max-width:1450px; margin:auto; padding:28px 34px 34px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.eyebrow,.label { margin:0; color:var(--sage-dark); letter-spacing:.15em; font-size:11px; font-weight:800; text-transform:uppercase; }
h1 { margin:1px 0 0; font-size:28px; letter-spacing:.06em; }
h2 { margin:2px 0; font-size:20px; }
.header-actions { display:flex; gap:12px; align-items:center; }
.account-card { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.72); border:1px solid var(--line); padding:8px 10px; border-radius:15px; font-size:12px; }
.account-card span { color:var(--sage-dark); font-weight:800; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden { display:none !important; }
.day-card { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.7); border:1px solid var(--line); padding:9px 14px; border-radius:15px; font-size:13px; }
.day-card span { color:var(--muted); }.icon-btn { width:41px;height:41px;border-radius:14px;border:1px solid var(--line);background:#fffdf8;cursor:pointer; }
.game-grid { display:grid; grid-template-columns:260px minmax(500px,1fr) 270px; gap:20px; align-items:stretch; }
.panel { background:var(--card); border:1px solid rgba(210,202,187,.8); border-radius:24px; padding:22px; box-shadow:0 15px 40px rgba(76,83,72,.07); }
.name-row,.level-row,.coins,.panel-title { display:flex; align-items:center; justify-content:space-between; }
.text-btn { border:0; padding:5px 9px; border-radius:8px; color:var(--sage-dark); background:#edf5ef; cursor:pointer; font-size:12px; font-weight:800; }
.level-row { margin-top:20px; font-size:12px; color:var(--muted); }.level-row span:first-child{font-weight:800;color:var(--ink)}
.progress { height:8px; border-radius:20px; overflow:hidden; background:#eeeae1; margin-top:7px; }.progress i { display:block;height:100%;width:50%;border-radius:inherit;background:var(--sage);transition:width .5s ease,background .3s; }
.progress.xp { height:6px; }.progress.xp i { background:linear-gradient(90deg,var(--yellow),var(--peach)); }
.stats { display:grid; gap:20px; margin:30px 0; }.stat>div:first-child { display:flex;justify-content:space-between;font-size:13px; }.stat b { font-size:12px; }.stat:nth-child(2) i{background:#e7a2a6}.stat:nth-child(3) i{background:#86baca}.stat:nth-child(4) i{background:#9e9ec8}
.coins { background:#f8f1dd; border-radius:14px; padding:12px 14px; font-size:12px; }.coins strong{font-size:15px}.coins i{font-style:normal}
.scene-wrap { display:flex;flex-direction:column; gap:14px; min-width:0; }.scene { position:relative; overflow:hidden; min-height:510px; height:100%; border-radius:28px; border:1px solid #d9ddd0; background:linear-gradient(#dcebdc 0 66%,#cda982 66%); box-shadow:0 18px 45px rgba(62,92,69,.13); }
.scene:after { content:""; position:absolute; left:0;right:0;top:66%;height:10px;background:#a98462;box-shadow:0 10px 20px rgba(74,51,30,.12); }
.sun { position:absolute;width:85px;height:85px;border-radius:50%;background:rgba(255,243,181,.55);left:6%;top:5%;box-shadow:0 0 50px #fff4b8; }
.cloud{position:absolute;width:80px;height:20px;border-radius:50px;background:rgba(255,255,255,.38)}.cloud:after,.cloud:before{content:"";position:absolute;background:inherit;border-radius:50%;}.cloud:before{width:32px;height:32px;left:14px;bottom:0}.cloud:after{width:40px;height:40px;right:12px;bottom:0}.cloud-one{left:20%;top:16%}.cloud-two{right:9%;top:7%;transform:scale(.7)}
.window { position:absolute; width:125px;height:145px; right:12%;top:15%;border:10px solid #f5eee0;border-radius:60px 60px 5px 5px;background:linear-gradient(#a9d3dd,#e8f3db);box-shadow:0 8px 20px rgba(73,99,91,.13); }.window-cross:before,.window-cross:after{content:"";position:absolute;background:#f5eee0}.window-cross:before{width:8px;height:100%;left:49%}.window-cross:after{height:8px;width:100%;top:48%}
.shelf{position:absolute;left:9%;top:31%;width:135px;height:10px;border-radius:5px;background:#9e7653;box-shadow:0 5px 4px #76583f;display:flex;align-items:flex-end;padding:0 15px;gap:5px}.pot{font-size:35px;transform:translateY(2px)}.book{font-size:35px;color:#77968b;transform:translateY(4px)}.book.peach{color:#d99475}
.rug { position:absolute; width:58%;height:90px;border-radius:50%;background:#efdbc0;bottom:8%;left:21%;box-shadow:inset 0 0 0 7px rgba(255,255,255,.23); }
.plant { position:absolute;bottom:28%;right:6%;font-size:70px;filter:drop-shadow(0 8px 3px rgba(63,80,45,.18)); }.bowl{position:absolute;bottom:15%;left:15%;width:70px;height:35px;border-radius:5px 5px 35px 35px;background:#e89c75;box-shadow:inset 0 6px #f8d0ad,0 5px 5px rgba(70,50,30,.15)}
.speech { position:absolute; z-index:4; left:50%;top:16%;transform:translateX(-50%); background:#fffdf8;padding:10px 16px;border-radius:16px;font-size:13px;font-weight:800;box-shadow:0 8px 25px rgba(51,79,60,.12);opacity:1;transition:.3s;white-space:nowrap; }.speech:after{content:"";position:absolute;left:45%;bottom:-8px;border:8px solid transparent;border-top-color:#fffdf8;border-bottom:0}
.pet { position:absolute; z-index:3; width:190px;height:210px;left:50%;bottom:16%;transform:translateX(-50%);border:0;background:transparent;cursor:pointer;transition:transform .25s; }.pet:hover{transform:translateX(-50%) scale(1.03)}
.pet .body { position:absolute;width:155px;height:166px;bottom:0;left:18px;border-radius:48% 48% 42% 42%;background:#f4e7d2;box-shadow:inset -15px -12px rgba(196,158,119,.18),0 14px 15px rgba(89,68,46,.16); }
.ear { position:absolute;z-index:-1;width:70px;height:95px;top:6px;background:#d7ad83;border-radius:70% 30% 50% 50%; }.ear.left{left:19px;transform:rotate(-24deg)}.ear.right{right:19px;transform:rotate(24deg)}
.face{position:absolute;width:120px;height:90px;left:35px;top:62px}.eye{position:absolute;width:11px;height:15px;background:#39413c;border-radius:50%;top:25px}.eye.left{left:28px}.eye.right{right:28px}.eye:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;top:2px;left:2px}.mouth{position:absolute;left:50%;top:48px;width:15px;height:9px;border-bottom:3px solid #65524b;border-radius:50%;transform:translateX(-50%)}
.blush{position:absolute;width:25px;height:11px;border-radius:50%;background:rgba(226,141,132,.35);top:112px}.blush.left{left:37px}.blush.right{right:37px}.paw{position:absolute;width:45px;height:35px;border-radius:50%;background:#ead6bd;bottom:3px}.paw.left{left:30px;transform:rotate(7deg)}.paw.right{right:30px;transform:rotate(-7deg)}
.pet.happy{animation:hop .65s ease}.pet.sleeping{animation:breathe 2s ease-in-out infinite}.pet.sleeping .eye{height:4px;border-radius:50%;top:33px}.pet.sleeping .mouth{top:50px;width:9px;height:9px;border:2px solid #65524b;border-radius:50%}.pet.grown{transform:translateX(-50%) scale(1.1)}
@keyframes hop{0%,100%{transform:translateX(-50%)}35%{transform:translateX(-50%) translateY(-38px) rotate(-4deg)}65%{transform:translateX(-50%) translateY(-12px) rotate(4deg)}}@keyframes breathe{50%{transform:translateX(-50%) scale(1.03,.98)}}
.sparkle{position:absolute;z-index:5;font-size:23px;animation:float 1s ease-out forwards}@keyframes float{to{transform:translateY(-70px) rotate(30deg);opacity:0}}
.actions { display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.actions button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;text-align:left;column-gap:9px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:17px;padding:12px 14px;cursor:pointer;transition:.2s}.actions button:hover{transform:translateY(-3px);border-color:#b7c9ba;box-shadow:0 8px 18px rgba(60,80,63,.1)}.actions button:active{transform:scale(.97)}.actions span{grid-row:1/3;font-size:24px}.actions b{font-size:13px}.actions small{font-size:10px;color:var(--muted)}
.panel-title>span{font-size:25px}.panel-title.compact{margin-top:17px}.tasks{display:grid;gap:10px;margin-top:18px}.task{display:flex;gap:10px;align-items:center;background:#f5f4ee;border-radius:12px;padding:10px}.task.done{opacity:.6}.task.done .task-check{background:var(--sage);color:white}.task-check{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#e4e7df;font-size:11px}.task p{margin:0;font-size:12px;font-weight:800}.task small{color:var(--muted)}.divider{height:1px;background:var(--line);margin:22px 0 0}.diary{display:grid;gap:10px;margin-top:14px;max-height:157px;overflow:auto}.entry{padding-left:10px;border-left:3px solid #d4dfd6;font-size:11px;color:var(--muted)}.entry b{display:block;color:var(--ink);font-size:12px}.reset-btn{margin-top:18px;width:100%;border:0;background:transparent;color:#a79e90;font-size:10px;cursor:pointer}
.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:rgba(40,54,47,.35);backdrop-filter:blur(5px)}.modal.hidden{display:none}.modal-card{width:min(360px,90vw);background:var(--card);padding:30px;border-radius:24px;text-align:center;box-shadow:0 25px 70px rgba(22,37,29,.25)}.modal-emoji{font-size:40px}.modal-card h2{margin-top:10px}.modal-card p{font-size:12px;color:var(--muted)}.modal-card input{width:100%;padding:12px 15px;margin:12px 0 18px;border:1px solid var(--line);border-radius:12px;outline:none}.modal-card input:focus{border-color:var(--sage)}.modal-card div{display:flex;gap:10px}.modal-card button{flex:1;border:0;border-radius:12px;padding:10px;cursor:pointer}.modal-card button[type=submit]{background:var(--sage-dark);color:white}.modal-card .link-button{margin-top:12px;width:100%;background:transparent;color:var(--sage-dark);font-size:12px;font-weight:800}.toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,30px);background:#35483f;color:#fff;border-radius:30px;padding:10px 18px;font-size:12px;opacity:0;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.game-grid{grid-template-columns:230px 1fr}.diary-panel{grid-column:1/-1}.diary-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}.divider,.reset-btn{display:none}}@media(max-width:760px){.game-shell{padding:18px 14px}.game-grid{grid-template-columns:1fr}.profile-panel{order:2}.scene-wrap{order:1}.diary-panel{order:3;display:block}.scene{min-height:470px}.actions{grid-template-columns:repeat(2,1fr)}.profile-panel .stats{grid-template-columns:1fr 1fr}.profile-panel .coins{margin-top:10px}.topbar h1{font-size:23px}.day-card span{display:none}}