.home-pet-ui { --pet-ink: #303955; --pet-muted: #75819a; --pet-glass: rgba(247,250,255,.85); --pet-line: rgba(131,157,211,.25); color: var(--pet-ink); font-family: inherit; }
[data-theme="dark"] .home-pet-ui { --pet-ink: #edf2ff; --pet-muted: #a7b5d1; --pet-glass: rgba(26,35,57,.88); --pet-line: rgba(166,192,245,.22); }
.home-pet-ui button, .home-pet-ui input { font: inherit; }
.home-pet-ui button { cursor: pointer; color: inherit; }
.pet-settings-open { position: fixed; z-index: 70; right: max(18px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--pet-line); background: var(--pet-glass); backdrop-filter: blur(20px); box-shadow: 0 6px 28px #35446c15; font-size: 12px!important; }
.pet-settings-open > :first-child { color: #719aed; font-size: 17px; }
.pet-settings { width: min(380px, calc(100vw - 32px)); margin: auto; padding: 26px; box-sizing: border-box; color: var(--pet-ink); border: 1px solid var(--pet-line); border-radius: 28px; background: var(--pet-glass); backdrop-filter: blur(28px); box-shadow: 0 26px 90px #182b5540; }
.pet-settings::backdrop { background: #111b3633; backdrop-filter: blur(5px); }
.pet-settings[open] { animation: pet-settings-enter .25s ease-out; }
.pet-settings form { margin: 0; }
.pet-settings header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.pet-settings header small { font-size: 10px; letter-spacing: .14em; color: var(--pet-muted); }
.pet-settings h2 { font-size: 24px; margin: 7px 0 0; }
.pet-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #94a7d21c; font-size: 24px!important; }
.pet-switch-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--pet-line); border-bottom: 1px solid var(--pet-line); }
.pet-switch-row strong { display: block; font-size: 15px; }
.pet-switch-row small { display: block; color: var(--pet-muted); font-size: 12px; margin-top: 6px; }
#pet-visible { appearance: none; width: 44px; height: 26px; padding: 3px; border-radius: 999px; background: #8898b866; cursor: pointer; flex-shrink: 0; transition: background .2s; }
#pet-visible::before { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 4px #1e325533; transition: transform .2s; }
#pet-visible:checked { background: #729bea; }
#pet-visible:checked::before { transform: translateX(18px); }
.pet-size-label { display: flex; justify-content: space-between; margin: 23px 0 12px; font-size: 14px; }
.pet-size-label output { color: var(--pet-muted); font-size: 12px; }
#pet-size { width: 100%; accent-color: #739beb; }
.pet-help { color: var(--pet-muted); font-size: 12px; line-height: 1.7; margin: 19px 0; }
.pet-reset { width: 100%; padding: 11px; border: 1px solid var(--pet-line); border-radius: 999px; background: #94a7d21c; font-size: 13px!important; }
.pet-settings footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 22px; padding: 0; font-size: 10px; color: var(--pet-muted); }
.pet-settings footer a { color: inherit; }
.home-pet { --pet-height: 210px; position: fixed; z-index: 69; width: calc(var(--pet-height) * .72); height: var(--pet-height); border: 0; padding: 0; background: transparent!important; box-shadow: none!important; touch-action: none; user-select: none; cursor: grab!important; }
.home-pet[hidden] { display: none!important; }
.home-pet video { position: absolute; height: 100%; width: calc(var(--pet-height) * 1.778); max-width: none; left: 50%; top: 0; transform: translateX(-50%); pointer-events: none; object-fit: contain; }
.home-pet.is-dragging { cursor: grabbing!important; }
.home-pet.is-walking video { transform: translateX(-50%) scaleX(var(--pet-facing,1)); }
.pet-bubble { position:absolute; bottom:85%; left:50%; transform:translateX(-50%); width:150px; padding:12px 14px; border-radius:18px 18px 5px 18px; border:1px solid var(--pet-line); background:var(--pet-glass); backdrop-filter:blur(20px); color:var(--pet-ink); font-size:12px; line-height:1.6; box-shadow:0 8px 30px #273b6920; pointer-events:none; }
.pet-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pet-action-grid button, #pet-activity { border:1px solid var(--pet-line); border-radius:999px; background:#8aa6de15; color:var(--pet-ink); padding:9px 12px; font-size:12px; }
#pet-roam { width:19px; height:19px; accent-color:#739beb; }
.pet-settings { max-height:calc(100dvh - 32px); overflow-y:auto; }
.home-pet:focus-visible { outline: 2px dashed #739beb; outline-offset: 3px; border-radius: 40%; }
@keyframes pet-settings-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pet-settings[open] { animation: none; } #pet-visible, #pet-visible::before { transition: none; } }