:root{color-scheme:dark;font-family:"Yu Gothic UI","Meiryo",sans-serif;color:#f1e9dc;background:#191c30;font-size:12px;--muted:#a4a4b6;--mint:#a9caba;--peach:#dfb69b}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit;color:inherit;border:1px solid #ffffff17;border-radius:9px;background:#ffffff08;cursor:pointer;transition:background .18s}button:hover,select:hover{background:#ffffff16}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}button{padding:8px 12px}button:disabled{opacity:.45;cursor:default}header{height:58px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;-webkit-app-region:drag;background:#202237}header nav{-webkit-app-region:no-drag;display:flex;gap:4px}header nav button{width:30px;height:29px;padding:0;color:#bcb9c9;border:0;font-size:20px}header nav button.active{color:var(--mint);background:#a9caba17}.brand{display:flex;align-items:center;gap:9px;font-family:Georgia,serif;letter-spacing:2.4px;font-size:16px}.brandmoon{font-size:32px;line-height:1;color:#e8c995}.brand small{display:block;font-family:"Yu Gothic UI",sans-serif;letter-spacing:2px;font-size:9px;margin-top:3px;color:var(--muted)}main{height:calc(100vh - 58px);display:flex;flex-direction:column}#stage{flex:1;min-height:160px;position:relative;overflow:hidden;background:#242f42}#sky,#stars,#stage>canvas.webgl{position:absolute;inset:0;width:100%;height:100%}#sky{background:linear-gradient(#101727,#434d65)}#skyMoon,#sun{position:absolute;width:42px;height:42px;top:12%;left:72%;opacity:.9;pointer-events:none}#sun{border-radius:50%;width:35px;height:35px;background:#ffe8ad;box-shadow:0 0 42px #ffce7377}.sky-label{position:absolute;left:18px;top:14px;z-index:3;color:#e7e8f0;display:flex;flex-direction:column;gap:3px;font-size:10px;letter-spacing:1px;pointer-events:none}.sky-label time{font-family:Georgia,serif;font-size:23px;letter-spacing:2px}.stage-actions{position:absolute;right:12px;top:12px;display:flex;gap:6px;z-index:3}.stage-actions button{font-size:10px;padding:6px 8px;background:#191c3060;backdrop-filter:blur(12px)}.pet-status{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 13px;border:1px solid #ffffff13;border-radius:20px;background:#171e30b0;color:#e3e0da;font-size:11px;z-index:2;backdrop-filter:blur(12px)}.dot{width:5px;height:5px;display:inline-block;background:var(--mint);border-radius:50%;margin-right:7px}#loading{position:absolute;inset:0;display:grid;place-items:center;z-index:2;background:#202237;color:#c7bdad}.dashboard{padding:16px 20px 17px;background:#202237;border-top:1px solid #ffffff0b;flex:none}.sky-info{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #ffffff0d}.eyebrow{font-size:9px;letter-spacing:1.5px;color:var(--muted)}p{margin:6px 0 0}.sky-info p{font-size:11px;color:#dad0c4}.moon-info{display:flex;align-items:center;gap:9px}.moon-info canvas{width:31px;height:31px}.moon-info strong{font-size:11px;font-weight:500}.moon-info small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.care-head{display:flex;justify-content:space-between;align-items:center;margin:14px 0 10px;font-size:11px}.toggle{display:flex;align-items:center;gap:7px;color:var(--mint);cursor:pointer;font-size:10px}.toggle input{position:absolute;opacity:0}.toggle>span{height:16px;width:28px;background:#4a4d60;border-radius:16px;position:relative}.toggle>span:after{content:"";position:absolute;left:3px;top:3px;width:10px;height:10px;background:#e3e8e1;border-radius:50%;transition:transform .2s}.toggle input:checked+span{background:#617e71}.toggle input:checked+span:after{transform:translateX(12px)}.toggle input:focus-visible+span{outline:2px solid white}.care-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.care-card{background:#ffffff04;border:1px solid #ffffff0b;border-radius:12px;padding:11px 12px}.care-card>div{display:flex;justify-content:space-between;font-size:10px;color:#c2b7ac}.care-card strong{font-size:10px;font-weight:400;color:var(--peach)}meter{display:block;width:100%;height:5px;margin:9px 0 11px;border:0;background:#ffffff10;border-radius:9px}meter::-webkit-meter-bar{background:#ffffff0b;border:0;height:5px}meter::-webkit-meter-optimum-value{background:var(--peach);border-radius:9px}.water meter::-webkit-meter-optimum-value{background:#a8bed4}.water strong{color:#a8bed4}.care-card button{width:100%;padding:7px;font-size:10px;background:#dfb69b0c;color:#e5c4af;border-color:#dfb69b17}.water button{background:#a8bed40c;color:#bdcedf;border-color:#a8bed417}.hint{font-size:10px;color:var(--muted);line-height:1.7;margin-top:9px}.bottom-row{display:flex;justify-content:space-between;gap:12px;margin-top:13px;align-items:center}.bottom-row button{border:0;background:none;padding:3px 0;font-size:11px}.bottom-row button span{font-size:10px;color:var(--muted);margin-left:8px}select{font-size:10px;padding:6px;max-width:150px;background:#272a40}option{background:#272a40}dialog{width:min(460px,94vw);max-height:85vh;border:1px solid #ffffff20;background:#282b42;color:#eee7dc;border-radius:18px;padding:24px;box-shadow:0 24px 100px #0007}dialog::backdrop{background:#090c18a0;backdrop-filter:blur(6px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head small{font-size:9px;letter-spacing:2px;color:var(--mint)}h2{font-size:15px;font-weight:500;margin:7px 0}.dialog-head button{font-size:20px;border:0}dialog>p{font-size:11px;line-height:1.8;color:#b7b7c5}#furniture{display:grid;gap:8px;margin-top:16px}.furniture-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#ffffff04;border-radius:10px}.furniture-item strong{font-size:11px;font-weight:500}.furniture-item small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.furniture-item button{font-size:10px}#toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%,20px);opacity:0;transition:.2s;padding:11px 17px;background:#e4ded0;color:#292d3c;border-radius:30px;z-index:10;pointer-events:none;font-size:11px;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}#error{position:fixed;inset:auto 12px 12px;z-index:20;background:#753e4b;color:white;padding:15px;line-height:1.7;border-radius:10px}.compact .dashboard{display:none}.compact header{height:44px;padding:6px 10px}.compact main{height:calc(100vh - 44px)}.compact .brand{font-size:12px}.compact .brand small{display:none}.compact .brandmoon{font-size:25px}.compact .sky-label time{font-size:18px}.compact .stage-actions button{font-size:9px}.compact .stage-actions{top:auto;bottom:12px;right:10px}.compact .pet-status{left:12px;transform:none;font-size:9px;bottom:12px}.compact #zoom{display:none}@media(max-height:620px){body:not(.compact) .dashboard{padding:10px 16px}body:not(.compact) .sky-info{padding-bottom:8px}body:not(.compact) .care-head{margin:8px 0}body:not(.compact) .hint{margin-top:5px}body:not(.compact) .bottom-row{margin-top:6px}body:not(.compact) .care-card{padding:8px 10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.pet-identity{position:absolute;top:76px;left:18px;z-index:3;max-width:calc(100% - 36px);color:#e4dfd6}
.pet-identity button{display:flex;align-items:center;max-width:190px;padding:3px 6px;margin-left:-6px;border-color:transparent;background:#191c3020;font-size:12px}
#petName{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pet-identity button>span+span{flex:none;color:#bab7bc;font-size:10px}
.pet-identity small{display:block;font-size:9px;letter-spacing:.4px;margin-top:3px;color:#c6c8cd;pointer-events:none}
.compact .pet-identity{top:65px;left:12px}.compact .pet-identity button{font-size:10px}
#nameForm label{display:block;margin:18px 0 8px;color:var(--muted);font-size:11px}
#nameInput{box-sizing:border-box;width:100%;border:1px solid #ffffff25;border-radius:9px;padding:11px;background:#1d2033;color:inherit;font:inherit}
.save-name{display:block;margin:18px 0 0 auto;color:var(--mint)}

.treat-options{display:grid;gap:9px;margin-top:18px}.treat-options button{display:flex;align-items:center;gap:14px;text-align:left;padding:12px}.treat-options img{width:40px;height:40px;image-rendering:auto}#treatHelp:not([hidden]){position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:12px;max-width:95vw;width:max-content;background:#30394a;border:1px solid #bacaba55;border-radius:14px;padding:8px 12px;box-shadow:0 8px 30px #0005;font-size:11px}#cancelTreat{white-space:nowrap;color:var(--mint)}@media(max-width:480px){.stage-actions{gap:3px;right:8px}.stage-actions button{padding:6px}.compact .stage-actions{max-width:50%;flex-wrap:wrap;justify-content:flex-end}}

.touch-treat{position:absolute;width:40px;height:40px;transform:translate(-50%,-50%);pointer-events:none;z-index:4}