/* Photoreal shell with pixel stickers, a live pixel LCD, and pixel button labels. */
#pet-toggle { position:fixed; z-index:var(--z-chrome); left:calc(32px + env(safe-area-inset-left)); bottom:calc(var(--footer-bottom) + 58px); width:54px; height:54px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; color:#fff; background:#1f1f2f94; border:1px solid #ffffff59; box-shadow:1px 2px #1014204d; }
#pet-toggle svg { width:25px; height:25px; } #pet-toggle span { font-size:9px; }
#pet-toggle.needs-care::after { content:''; position:absolute; right:5px; top:5px; width:6px; height:6px; background:#f4c887; }
#capture-screen { bottom:calc(var(--footer-bottom) + 116px); }
#pet-dialog,#pet-dialog[data-popover] { padding:24px 14px 8px; background:transparent; border:0; box-shadow:none; overflow-x:hidden; scrollbar-width:none; color:#f6f3e8; border-radius:0; }
#pet-dialog::backdrop { background:#142021a8; backdrop-filter:none; }
.pet-device { position:relative; width:100%; aspect-ratio:1093 / 1439; filter:drop-shadow(8px 18px 12px #0006); container-type:inline-size; }
.pet-device-shell { display:block; width:100%; height:100%; user-select:none; pointer-events:none; }
#pet-dialog .pet-device-close { position:absolute; right:5px; top:0; z-index:2; display:grid; place-items:center; width:40px; height:40px; color:#fff; background:#15231f70; border:1px solid #ffffff38; border-radius:50%; }
#pet-dialog .pet-device-close svg { width:16px; height:16px; }
.pet-lcd { --lcd-ink:#34452d; position:absolute; left:23.7%; top:30.4%; width:50%; height:34.25%; padding:7px 7px 5px; display:flex; flex-direction:column; overflow:hidden; color:var(--lcd-ink); background:linear-gradient(125deg,#c2c8a22b,#76835b18),repeating-linear-gradient(0deg,transparent 0 2px,#35482a0b 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,#35482a0b 2px 3px),#a9b68a; border-radius:4%; box-shadow:inset 3px 4px 8px #26382566,inset -1px -1px 2px #d4ddae8c; font-family:var(--font); font-size:10px; text-shadow:.5px 1px #34452d20; }
.pet-lcd::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,#ffffff14,transparent 36% 66%,#ffffff08); box-shadow:inset 0 0 5px #26382533; border-radius:inherit; }
.pet-lcd-top { display:flex; justify-content:space-between; gap:4px; align-items:center; min-height:17px; border-bottom:1px solid #34452d44; font-size:9px; }
.pet-lcd-top strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80%; font-weight:normal; }
.pet-lcd-top span { font-size:8px; white-space:nowrap; }
.pet-lcd-menu { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin:4px 0; }
.pet-lcd-menu span { display:grid; place-items:center; padding:2px 0; opacity:.45; }
.pet-lcd-menu span.is-selected { opacity:1; color:#afbc90; background:var(--lcd-ink); box-shadow:1px 1px #34452d50; }
.pet-lcd-menu svg { width:13px; height:13px; fill:currentColor; stroke:none; }
.pet-lcd-page { flex:1; min-height:0; }
#pet-home { display:flex; flex-direction:column; justify-content:center; }
.pet-pixel-room { position:relative; width:100%; flex:1; min-height:0; }
#pet-art { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
#pet-stage { font-size:8px; text-align:center; margin:1px 0; }
#pet-sleep-mark,#pet-reaction { position:absolute; left:60%; top:10%; font-size:14px; }
.pet-lcd-bottom { margin-top:3px; padding-top:4px; border-top:1px solid #34452d55; min-height:36px; }
#pet-selection { font-size:10px; font-weight:normal; display:block; text-align:center; }
#pet-feedback { margin:3px 0 0; font-size:8px; line-height:1.3; min-height:20px; text-align:center; overflow-wrap:anywhere; }
#pet-stats { padding-top:4px; }
.pet-meter { display:grid; grid-template-columns:37px 1fr 18px; align-items:center; gap:3px; margin-bottom:5px; font-size:8px; }
.pet-meter output { text-align:right; }
#pet-dialog progress { display:block; appearance:none; width:100%; height:6px; border:1px solid var(--lcd-ink); border-radius:0; background:transparent; }
#pet-dialog progress::-webkit-progress-bar { background:transparent; }
#pet-dialog progress::-webkit-progress-value { background:var(--lcd-ink); }
#pet-dialog progress::-moz-progress-bar { background:var(--lcd-ink); }
#pet-growth { margin-top:8px; height:4px !important; }
#pet-growth-text { font-size:7px; margin:4px 0; text-align:center; }
#pet-memory { font-size:8px; padding-top:4px; }
#pet-care-count { margin:0 0 5px; }
#pet-history { list-style:none; padding:0; margin:0; }
#pet-history li { display:flex; justify-content:space-between; gap:3px; font-size:7px; line-height:1.6; }
#pet-name-page { padding-top:6px; }
#pet-name-page label { font-size:9px; }
#pet-name-input { width:100%; min-width:0; color:var(--lcd-ink); background:#c7d3a144; border:1px solid var(--lcd-ink); font:inherit; font-size:11px; border-radius:0; padding:5px 3px; margin-top:5px; }
#pet-name-input::placeholder { color:#34452daa; font-size:8px; }
#pet-name-page p { font-size:8px; }
.pet-key { position:absolute; top:72.55%; width:16%; height:13%; padding:0; display:grid; place-items:center; border-radius:50%; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.pet-key-a { left:22.65%; } .pet-key-b { left:41.05%; top:73.55%; } .pet-key-c { left:59.65%; }
.pet-key-cap { width:61%; aspect-ratio:1; display:grid; place-items:center; font:400 11px/1 var(--font); color:#b56989; border:1px solid #f7aacb; border-radius:50%; background:radial-gradient(ellipse at 32% 24%,#ffd3e3 0%,#f5a1c5 42%,#db79a3 80%,#bd608b 100%); box-shadow:inset 1px 2px 3px #ffeaf599,inset -2px -3px 3px #9e3d6c55,0 3px 0 #8d4776,0 6px 5px #38214380; text-shadow:0 1px #ffd8e6b3; transform:translateY(-3px); transition:transform 65ms,box-shadow 65ms; pointer-events:none; }
.pet-key:hover .pet-key-cap { filter:brightness(1.05); }
.pet-key:active .pet-key-cap,.pet-key.is-pressed .pet-key-cap { transform:translateY(1px); box-shadow:inset 1px 2px 4px #ffeaf577,inset -2px -2px 3px #9e3d6c44,0 1px 0 #8d4776,0 2px 2px #38214370; }
.pet-key:focus-visible { outline:2px solid #f9f4d3; outline-offset:-3px; }
.pet-device-foot { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:7px; color:#f2f0db; text-shadow:0 1px 2px #0007; }
#pet-sound-toggle { display:grid; place-items:center; width:36px; height:36px; padding:6px; border:1px solid #ffffff40; border-radius:50%; background:#18302766; }
#pet-sound-toggle svg { width:15px; height:15px; }
#pet-sound-toggle[aria-pressed="false"] { opacity:.45; }
@media (max-width:700px),(max-width:900px) and (max-height:540px) { #pet-toggle { left:calc(12px + env(safe-area-inset-left)); } #capture-screen { bottom:calc(var(--footer-bottom) + 116px); } }
@media (max-width:360px) { #pet-dialog,#pet-dialog[data-popover] { padding-left:4px; padding-right:4px; } .pet-lcd { padding:5px; } .pet-lcd-top { min-height:14px; } .pet-lcd-menu { margin:2px 0; } .pet-lcd-bottom { margin-top:1px; min-height:32px; } #pet-feedback { font-size:7px; } }
@media (prefers-reduced-motion:reduce) { .pet-key-cap { transition:none; } }
/* Keep every status row inside the small LCD, including narrow phones. */
.pet-lcd-page { overflow:hidden; }
.pet-lcd-bottom { flex-shrink:0; }
#pet-stats { padding-top:1px; }
.pet-meter { min-height:12px; line-height:1; margin-bottom:2px; font-size:7px; }
#pet-growth { margin-top:4px; height:3px !important; }
#pet-growth-text { font-size:6px; line-height:1.1; margin:2px 0 0; }
@media (max-width:360px) { .pet-lcd-top { min-height:12px; } .pet-lcd-menu svg { width:11px; height:11px; } #pet-selection { font-size:9px; } }