:root{color-scheme:light}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{min-height:100dvh;background:#e8c49a}.stage{position:relative;min-height:100dvh;overflow:hidden}.notice{position:absolute;z-index:3;top:calc(.75rem + env(safe-area-inset-top));left:50%;width:min(92vw,28rem);margin:0;padding:.6rem .8rem;transform:translate(-50%);border-radius:.6rem;background:#fff8ecf0;color:#3a2a22;font-size:.9rem;line-height:1.45;text-align:center;white-space:pre-line}.floor{position:absolute;left:50%;bottom:8%;width:min(70vw,36rem);height:16vh;transform:translate(-50%);background:radial-gradient(ellipse at center,rgba(255,248,236,.45),transparent 70%);pointer-events:none}.scene{position:relative;z-index:1;display:grid;place-items:center;min-height:100dvh}.pet{position:relative;width:min(100%,92dvh,720px);aspect-ratio:1}.shadow{position:absolute;left:50%;width:38%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,#482a1c61,#482a1c00 72%);transform:translate(-50%,-50%);pointer-events:none}.shadow.is-asleep{width:62%;height:5.5%}.sprite{position:absolute;inset:0;transition:opacity .22s linear}.sprite.is-settling{opacity:0}.sprite.is-asleep{transform:translateY(var(--sleep-shift, 0%))}.sprite.is-bounce{animation:pet-bounce 1.1s ease-in-out}.sprite.is-stretch{animation:pet-stretch 1.1s ease-in-out}.sprite.is-sway{animation:pet-sway 1.1s ease-in-out}.sprite.is-tilt{animation:pet-tilt 1.1s ease-in-out}.sprite.is-yawn{animation:pet-yawn 3.5s ease-in-out}.shadow.is-yawn{animation:shadow-yawn 3.5s ease-in-out}.shadow.is-greeting{animation:shadow-greeting 1.1s ease-in-out}@keyframes pet-bounce{0%,to{transform:translateY(0) scale(1)}30%{transform:translateY(-2.2%) scale(.99,1.015)}58%{transform:translateY(.35%) scale(1.012,.985)}}@keyframes pet-stretch{0%,to{transform:scaleY(1)}42%{transform:scaleY(1.035)}}@keyframes pet-sway{0%,to{transform:rotate(0)}35%{transform:rotate(-2.2deg)}70%{transform:rotate(2.2deg)}}@keyframes pet-yawn{0%,to{transform:scaleY(1)}38%{transform:scaleY(1.028)}68%{transform:scaleY(.988)}}@keyframes shadow-yawn{0%,to{transform:translate(-50%,-50%) scaleX(1)}38%{transform:translate(-50%,-50%) scaleX(.94)}68%{transform:translate(-50%,-50%) scaleX(1.05)}}@keyframes pet-tilt{0%,to{transform:rotate(0)}42%{transform:rotate(-3.2deg)}}@keyframes shadow-greeting{0%,to{transform:translate(-50%,-50%) scaleX(1)}40%{transform:translate(-50%,-50%) scaleX(.92)}70%{transform:translate(-50%,-50%) scaleX(1.05)}}.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.layer.closed{opacity:0;transition:opacity .1s linear}.layer.closed.is-on,.layer.face.is-on{opacity:1}.layer.face,.layer.drowsy,.layer.peek{opacity:0}.layer.drowsy{transition:opacity .2s linear}.layer.peek{transition:opacity .7s ease-in-out}.layer.drowsy.is-on,.layer.peek.is-on{opacity:1}.layer.aside{opacity:0;transition:opacity .4s linear}.layer.aside.is-on{opacity:1}.grade{position:absolute;inset:0;z-index:2;pointer-events:none;background-color:transparent}.ripple{position:absolute;z-index:4;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border:2px solid rgba(255,248,236,.9);border-radius:50%;pointer-events:none;animation:tap-ripple .55s ease-out forwards}.whisper{position:absolute;z-index:4;top:18%;left:50%;margin:0;padding:.35rem .7rem;transform:translate(-50%);border-radius:999px;background:#fff8eceb;color:#3a2a22;font-size:.95rem;letter-spacing:.08em;pointer-events:none;animation:tap-whisper 1.1s ease-out forwards}@keyframes tap-ripple{0%{opacity:.85;transform:scale(.35)}to{opacity:0;transform:scale(1.8)}}@keyframes tap-whisper{0%{opacity:1;transform:translate(-50%) translateY(.25rem)}15%{transform:translate(-50%) translateY(0)}72%{opacity:1}to{opacity:0}}.stage.is-live{transition:background 12s linear}.stage.is-live .grade{transition:background-color 12s linear}.pet.is-fallback .sprite,.pet.is-fallback .shadow{display:none}.pet.is-fallback:before{content:"";display:block;width:42%;height:42%;margin:30% auto 0;border-radius:50%;background:#f0d2ad}@media(prefers-reduced-motion:reduce){.stage.is-live,.stage.is-live .grade{transition:none}}.stage.is-reduced .sprite,.stage.is-reduced .shadow{animation:none}.settings-open{position:absolute;z-index:4;top:calc(.75rem + env(safe-area-inset-top));right:calc(.75rem + env(safe-area-inset-right));width:2.5rem;height:2.5rem;padding:.45rem;border:0;border-radius:999px;background:#fff8ece0;color:#6a4632;cursor:pointer}.settings-open svg{display:block;width:100%;height:100%;fill:currentColor}.settings{position:absolute;z-index:4;top:calc(3.6rem + env(safe-area-inset-top));right:calc(.75rem + env(safe-area-inset-right));width:min(18rem,calc(100vw - 1.5rem));max-height:min(70dvh,32rem);overflow:auto;padding:.9rem 1rem 1rem;border-radius:.8rem;background:#fff8ecf5;color:#3a2a22;box-shadow:0 .4rem 1.2rem #3a2a221f}.settings h2{margin:0 0 .7rem;font-size:1rem;font-weight:600}.settings label{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin:.45rem 0;font-size:.92rem}.settings input[type=time]{font:inherit;color:inherit;background:#fff;border:1px solid #e0c7a8;border-radius:.4rem;padding:.25rem .4rem}.settings-check{justify-content:flex-start}.settings-note,.settings-error{margin:.4rem 0 0;font-size:.82rem;line-height:1.4}.settings-error{color:#8a3d32}.settings-actions{display:flex;gap:.5rem;margin-top:.8rem}.settings-actions button,.debug-actions button{font:inherit;color:#3a2a22;background:#f3ddc4;border:0;border-radius:.45rem;padding:.4rem .75rem;cursor:pointer}.debug{margin-top:.9rem;padding-top:.7rem;border-top:1px solid #e7d3b8}.debug h3{margin:0;font-size:.95rem;font-weight:600}.debug-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
