:root {
  color-scheme: dark;
  --paper: #fff3ee;
  --muted: #f2d7d8;
  --cyan: #59ecff;
  --pink: #ff66b8;
  --purple: #c68aff;
  --gold: #ffd485;
  --glass: rgba(26, 12, 28, .79);
  --edge: rgba(255, 196, 231, .28);
  font-family: ui-rounded, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #150c13; }
body { min-height: 100dvh; color: var(--paper); }
button { font: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
[hidden] { display: none !important; }
.forest { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; }
.forest-photo, .forest-light { position: absolute; inset: 0; pointer-events: none; }
.forest-photo { background: #641c0d url("./assets/autumn_den.jpg") center center / cover no-repeat; transform: scale(1.012); }
.forest-light { background: linear-gradient(180deg,rgba(17,7,19,.53) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 66%,rgba(21,8,10,.57) 100%); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; z-index: 1; }
.glass { background: var(--glass); border: 1px solid var(--edge); box-shadow: 0 10px 40px rgba(0,0,0,.21),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(17px) saturate(1.15); -webkit-backdrop-filter: blur(17px) saturate(1.15); }
.hud { position: absolute; z-index: 4; top: calc(11px + env(safe-area-inset-top)); left: 12px; right: 12px; max-width: 680px; margin: auto; padding: 11px 13px 10px; border-radius: 21px; }
.hud-heading { display: flex; gap: 9px; align-items: center; justify-content: space-between; }
.brand { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.brand-kicker { font-size: 9px; font-weight: 800; letter-spacing: .16em; color: #ffe7f5; white-space: nowrap; }
.brand-digi { font-family: Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: .025em; background: linear-gradient(95deg,#ff83e8,#93e6ff); color: transparent; background-clip: text; -webkit-background-clip: text; font-size: 12px; }
.heading { font-size: clamp(14px,4.2vw,19px); letter-spacing: -.025em; font-weight: 800; line-height: 1.17; }
.install-button { color: #f5faff; padding: 9px 10px; flex-shrink: 0; border: 1px solid rgba(99,238,255,.82); border-radius: 999px; background: rgba(45,39,69,.85); font-size: 11px; font-weight: 850; white-space: nowrap; }
.install-button span:first-child { font-size: 16px; vertical-align: -1px; }
.mood-line { display:flex; align-items:center; min-height:21px; gap: 5px; margin: 6px 0 7px; color:#ffe4d9; font-size: 11px; line-height: 1.3; }
.mood-icon { font-size: 17px; }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.stat { min-width: 0; text-align: center; }
.stat-caption { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: clamp(8px,2.35vw,10px); font-weight: 900; white-space: nowrap; }
.stat .track { width: 100%; height: 6px; overflow: hidden; border-radius: 99px; margin: 6px 0 2px; background: rgba(12,10,23,.72); border: 1px solid rgba(255,255,255,.07); }
.stat .track i { display:block; width:0%; height:100%; border-radius: 99px; transition: width 420ms ease; }
.stat-full i { background: linear-gradient(90deg,#ff50a2,#ff8cdd);box-shadow:0 0 11px #ff64b7; }
.stat-clean i { background: linear-gradient(90deg,#15bbfb,#72f3ff);box-shadow:0 0 11px #72f3ff; }
.stat-happy i { background: linear-gradient(90deg,#a14cff,#df8cff);box-shadow:0 0 11px #b874ff; }
.stat-energy i { background: linear-gradient(90deg,#ef9b29,#ffe18a);box-shadow:0 0 11px #ffc779; }
.stat output { color: #fff0ea; display: block; font-size: 10px; line-height: 1.15; font-weight: 750; font-variant-numeric: tabular-nums; }
.dock { position: absolute; z-index:4; bottom:calc(13px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: 680px; margin: auto; border-radius: 22px; padding: 9px 10px 10px; }
.dock-tip { text-align: center; font-size: 11px; line-height:1.3; min-height: 17px; color: #fff0e8; font-weight: 650; margin-bottom: 8px; }
.action-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.action-button { min-height: 62px; border-radius: 15px; padding: 7px 2px; color: white; display: flex; flex-direction:column; justify-content:center; align-items:center; gap: 2px; background: linear-gradient(158deg,rgba(74,47,81,.76),rgba(32,22,50,.9)); border: 1px solid rgba(238,198,255,.27); font-size:12px; font-weight: 850; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.action-button:active { transform:scale(.95); }
.action-button.active { outline:2px solid var(--cyan); box-shadow:0 0 19px rgba(48,210,244,.35); }
.action-emoji { font-size:24px; line-height:1.1; }
.action-feed { border-color:rgba(255,98,174,.48); }
.action-bath { border-color:rgba(71,209,255,.49); }
.action-fetch { border-color:rgba(181,119,255,.49); }
.action-sleep { border-color:rgba(255,216,127,.44); }
.messes { position:absolute; z-index: 3; left: 15%; right: 15%; bottom:calc(142px + env(safe-area-inset-bottom)); height:52px; pointer-events:none; }
.mess { position:absolute; bottom:0; padding: 6px 7px; font-size:clamp(22px,6vw,28px); border:0; background: transparent; transform:translateX(-50%); pointer-events:auto; filter:drop-shadow(0 4px 4px rgba(0,0,0,.65)); animation:mess-pop .3s ease-out both; }
@keyframes mess-pop {from{transform:translateX(-50%) scale(.25)}to{transform:translateX(-50%) scale(1)}}
.speech { position:absolute; z-index:5; top:36%; left:50%; transform:translateX(-50%); max-width:min(83vw,340px); background:rgba(27,11,35,.9); border:1px solid rgba(255,185,226,.6); box-shadow:0 7px 25px #0006; border-radius:18px; padding:12px 17px; font-size:13px; line-height:1.45; text-align:center; font-weight:750; pointer-events:none; animation:appear .18s ease-out; }
@keyframes appear {from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.mini-prompt { position:absolute; z-index:3; top:44%; left:50%; transform:translateX(-50%); border-radius:99px; border:1px solid #d7efff88; padding:6px 13px; color:#fff; font-size:12px; font-weight:850; background:#211526bc; white-space:nowrap; pointer-events:none; text-align:center; }
.find-panel { position:absolute; z-index:6; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:25px; width:min(86vw,390px); padding:23px 19px 20px; text-align:center; }
.find-paws { font-size:31px; }
.find-panel h2 { font-size:23px; margin:10px 0 6px; }
.find-panel p { font-size:14px; line-height:1.5; color:var(--muted); margin:5px 0 19px; }
.find-button { border-radius:17px; width:100%; min-height:48px; border:0; color:#271126; font-weight:850; font-size:14px; background:linear-gradient(105deg,#ff89cc,#dba3ff,#90e8ff); box-shadow:0 7px 26px #451d4d99; }
.install-dialog { position:fixed; margin:auto; width:min(90vw,400px); color:#fff; padding:23px; border-radius:23px; text-align:center; z-index: 10; }
.install-dialog::backdrop { background:rgba(7,3,12,.72); backdrop-filter:blur(5px); }
.install-dialog h2 { margin:6px 0 8px; font-size:23px; }
.install-dialog p { line-height:1.5; font-size:14px; color:#f3dbe9; }
.dialog-icon { font-size:35px; }
.dialog-close { position:absolute; right:13px; top:7px; border:0; background:transparent; color:white; font-size:29px; }
.install-dialog .dialog-note { color:#d4bfcf; font-size:12px; }
.noscript { position:absolute; z-index:9; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; background:#1b0c19; padding:18px; border-radius:12px; }
@media (min-width:750px) {
 .hud,.dock { left:50%; right:auto; width:min(500px,calc(100vw - 24px)); transform:translateX(-50%); }
 .hud { top:20px; }
 .dock { bottom:20px; }
 .forest-photo { background-position:center 49%; }
}
@media (max-height:690px) {
 .hud { padding:8px 12px; }
 .mood-line { margin: 4px 0 5px; }
 .dock { padding:7px 8px; }
 .action-button { min-height:53px; }
 .action-emoji { font-size:20px; }
 .messes { bottom: 118px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; } }