@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;700;800&display=swap');:root{--ink:#17372d;--paper:#f6f0df;--lime:#cfe66e;--orange:#e9894d;--blue:#79b9be}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#dce5d2;color:var(--ink);font-family:Manrope,system-ui;overscroll-behavior:none}button,input{font:inherit}main{width:min(100%,1000px);height:100svh;margin:auto;padding:max(10px,env(safe-area-inset-top)) 12px max(7px,env(safe-area-inset-bottom));display:grid;grid-template-rows:50px minmax(0,1fr) auto 22px;gap:7px}header,footer{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:800;line-height:1;letter-spacing:.12em}.brand b{font-size:26px}.level{text-align:right;display:flex;gap:8px;align-items:end}.level small,footer,.scene-tip,.name small,.mood,.meters,.actions span{font:500 8px 'DM Mono';letter-spacing:.12em}.level small{color:#6e837b}.level strong{font:500 20px 'DM Mono'}.scene{position:relative;min-height:0;overflow:hidden;border:2px solid var(--ink);border-radius:22px;background:linear-gradient(#b8d5ca,#e3d9b8);box-shadow:4px 5px 0 var(--ink)}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.scene-tip{position:absolute;top:13px;left:50%;transform:translateX(-50%);background:#f6f0dfcc;padding:7px 10px;border-radius:20px;white-space:nowrap;transition:.4s}.scene-tip.hide{opacity:0}.name{position:absolute;left:13px;top:13px;border:0;background:var(--paper);color:var(--ink);padding:8px 31px 8px 10px;text-align:left;border-radius:4px;box-shadow:2px 2px 0 var(--ink)}.name small{display:block;color:#708179}.name strong{font-size:15px}.name i{position:absolute;right:8px;top:13px;font-style:normal}.mood{position:absolute;right:13px;top:13px;background:var(--lime);border:1px solid var(--ink);border-radius:20px;padding:7px 10px}.bubble{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:var(--paper);border:1px solid var(--ink);border-radius:13px 13px 13px 2px;padding:9px 13px;font-size:11px;white-space:nowrap;box-shadow:2px 3px 0 #17372d44;transition:.25s}.bubble.pop{transform:translateX(-50%) scale(1.06)}.sparkles{position:absolute;inset:0;pointer-events:none}.sparkles i{position:absolute;font-style:normal;font-size:18px;animation:fly .9s ease-out forwards}@keyframes fly{to{transform:translateY(-75px) rotate(35deg);opacity:0}}
.care{background:#f6f0df;border:1px solid #8da098;border-radius:17px;padding:11px;display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.meters{display:grid;gap:6px}.meters>div{display:grid;grid-template-columns:57px 1fr 22px;gap:7px;align-items:center}.meters i{height:6px;background:#d1d8cc;border-radius:6px;overflow:hidden}.meters b{display:block;height:100%;width:50%;background:var(--orange);border-radius:6px;transition:.5s}.meters div:nth-child(2) b{background:var(--blue)}.meters div:nth-child(3) b{background:#84b85c}.meters strong{font:500 9px 'DM Mono'}.actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.actions button{min-height:67px;border:1px solid #aeb9ad;background:white;color:var(--ink);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.actions button b{font-size:21px;line-height:1}.actions button:active,.actions button.active{transform:translateY(2px);background:var(--lime);border-color:var(--ink)}footer{color:#71847b}footer button{border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit}.modal{position:fixed;inset:0;z-index:20;background:#10241ecf;display:none;place-items:center;padding:20px}.modal.show{display:grid}.modal form{width:min(340px,100%);background:var(--paper);border:2px solid var(--ink);box-shadow:6px 7px 0 #0006;padding:22px}.modal label{display:block;font:500 9px 'DM Mono';letter-spacing:.13em;margin-bottom:10px}.modal input{width:100%;font-size:25px;font-weight:800;text-transform:uppercase;border:0;border-bottom:2px solid var(--ink);background:transparent;outline:0;padding:8px 0}.modal form button{width:100%;height:45px;margin-top:18px;border:0;background:var(--lime);font-size:10px;font-weight:800;letter-spacing:.1em}
@media(max-width:700px){main{padding-left:7px;padding-right:7px;grid-template-rows:43px minmax(0,1fr) auto 19px;gap:5px}.scene{border-radius:17px;box-shadow:3px 4px 0 var(--ink)}.scene-tip{top:auto;bottom:14px;font-size:6px}.name{top:9px;left:9px}.mood{top:9px;right:9px}.bubble{bottom:42px;font-size:10px}.care{grid-template-columns:1fr;padding:8px;gap:8px}.meters{grid-template-columns:repeat(3,1fr);gap:6px}.meters>div{grid-template-columns:1fr 22px}.meters span{font-size:6px}.meters i{grid-column:1/3;grid-row:2}.actions button{min-height:58px}.actions button b{font-size:19px}.actions span{font-size:6px}}@media(max-height:660px){.actions button{min-height:48px}.care{padding:6px}.bubble{bottom:30px}.scene-tip{display:none}}