#pet-container:focus-visible { outline: 2px solid var(--accent); border-radius: 20px; }
#pet-container #pet-svg, #pet-container .pet-artwork {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none;
}
#pet-actions { width: min(360px, 88vw); max-height: 75dvh; overflow: auto; margin: auto; padding: 18px;
  border: 1px solid var(--mint); border-radius: 22px; color: var(--text); background: var(--card-solid);
  box-shadow: 0 12px 45px #0003; font: inherit; }
#pet-actions::backdrop { background: #0005; }
#pet-actions header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#pet-actions header button { min-width: 44px; min-height: 44px; font-size: 24px; }
#pet-actions p { margin: 8px 0 14px; font-size: 12px; color: var(--text2); line-height: 1.7; }
#pet-actions button { border: 1px solid var(--mint); border-radius: 14px; background: var(--card);
  color: var(--text); font: inherit; min-height: 44px; padding: 9px; cursor: pointer; }
#pet-actions button:active { background: var(--mint-light); }
#pet-actions button:focus-visible { outline: 2px solid var(--accent); }
.pet-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#pet-actions footer { margin-top: 14px; font-size: 11px; color: var(--text3); }
#pet-actions footer a { color: inherit; }

/* Task captions are readable on touchscreens without a hover or a held tap. */
#pet-container { bottom: calc(var(--tab-h) + var(--safe-bottom) + 20px); }
#pet-container.has-label #pet-state-label { opacity: 1; }
#pet-container #pet-state-label { max-width: 120px; text-align: center; }
#pet-container.mini { bottom: calc(var(--tab-h) + var(--safe-bottom) + 20px); }
#pet-actions .pet-character-picker { display: flex; gap: 8px; margin: 12px 0; }
#pet-actions .pet-character-picker button { flex: 1; }
#pet-actions [data-character][aria-pressed="true"] { background: var(--mint-light); border-color: var(--accent); }
#pet-container #pet-cookie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#pet-container[data-character="cookie"] { filter: drop-shadow(0 2px 3px #00000010); }
#pet-container[data-character="cookie"] #pet-svg,
#pet-container[data-character="cookie"] .pet-artwork,
#pet-container[data-character="clawd"] #pet-cookie { display: none; }

#pet-cookie .cookie-arms, #pet-cookie .cookie-sleep-legs, #pet-cookie .cookie-blush,
#pet-cookie .cookie-keyboard, #pet-cookie .cookie-thought, #pet-cookie .cookie-anger,
#pet-cookie .cookie-surprise, #pet-cookie .cookie-sparkles, #pet-cookie .cookie-zzz,
#pet-cookie .cookie-sign, #pet-cookie .cookie-hug, #pet-cookie .cookie-flower,
#pet-cookie .cookie-door, #pet-cookie .cookie-love-hearts { display: none; }
#pet-cookie .cookie-person { transform-origin: 60px 98px; animation: cookie-breathe 3.6s ease-in-out infinite; }
#pet-cookie[data-pose="idle"] .cookie-arms-rest,
#pet-cookie[data-pose="thinking"] .cookie-arms-think,
#pet-cookie[data-pose="thinking"] .cookie-thought,
#pet-cookie[data-pose="typing"] .cookie-keyboard,
#pet-cookie[data-pose="happy"] .cookie-arms-up,
#pet-cookie[data-pose="happy"] .cookie-sparkles,
#pet-cookie[data-pose="shy"] .cookie-arms-shy,
#pet-cookie[data-pose="shy"] .cookie-blush,
#pet-cookie[data-pose="angry"] .cookie-arms-angry,
#pet-cookie[data-pose="angry"] .cookie-anger,
#pet-cookie[data-pose="surprised"] .cookie-arms-up,
#pet-cookie[data-pose="surprised"] .cookie-surprise,
#pet-cookie[data-pose="sleeping"] .cookie-sleep-legs,
#pet-cookie[data-pose="sleeping"] .cookie-arms-rest,
#pet-cookie[data-pose="sleeping"] .cookie-zzz,
#pet-cookie[data-pose="drag"] .cookie-arms-drag,
#pet-cookie[data-pose="love-sign"] .cookie-arms-sign,
#pet-cookie[data-pose="love-sign"] .cookie-sign,
#pet-cookie[data-pose="heart"] .cookie-hug,
#pet-cookie[data-pose="heart"] .cookie-love-hearts,
#pet-cookie[data-pose="flower"] .cookie-arms-flower,
#pet-cookie[data-pose="flower"] .cookie-flower,
#pet-cookie[data-pose="wave"] .cookie-arms-wave,
#pet-cookie[data-pose="wave"] .cookie-door,
#pet-cookie[data-pose="lean-left"] .cookie-arms-rest,
#pet-cookie[data-pose="lean-right"] .cookie-arms-rest { display: inline; }
#pet-cookie[data-pose="thinking"] .cookie-person { animation: cookie-think 3s ease-in-out infinite; }
#pet-cookie .cookie-dot { animation: cookie-dot 1.5s ease-in-out infinite; }
#pet-cookie .cookie-dot:nth-child(2) { animation-delay: .2s; }
#pet-cookie .cookie-dot:nth-child(3) { animation-delay: .4s; }
#pet-cookie[data-pose="typing"] .cookie-person { animation: cookie-type-body .7s ease-in-out infinite; }
#pet-cookie .cookie-type-left, #pet-cookie .cookie-type-right { animation: cookie-tap .32s ease-in-out infinite alternate; }
#pet-cookie .cookie-type-right { animation-delay: -.32s; }
#pet-cookie[data-pose="happy"] .cookie-person { animation: cookie-hop 1.1s ease-in-out infinite; }
#pet-cookie[data-pose="shy"] .cookie-person { animation: cookie-shy 2.6s ease-in-out infinite; }
#pet-cookie[data-pose="shy"] .cookie-blush { animation: cookie-blush 2.6s ease-in-out infinite; }
#pet-cookie[data-pose="angry"] .cookie-person { animation: cookie-huff .9s ease-in-out infinite; }
#pet-cookie[data-pose="surprised"] .cookie-person { animation: cookie-startle 1.8s ease-in-out infinite; }
#pet-cookie[data-pose="sleeping"] .cookie-legs { display: none; }
#pet-cookie[data-pose="sleeping"] .cookie-person { transform-origin: 60px 96px; animation: cookie-sleep 4s ease-in-out infinite; }
#pet-cookie .cookie-zzz { animation: cookie-zzz 3s ease-in-out infinite; }
#pet-cookie[data-pose="drag"] .cookie-shadow { opacity: 0; }
#pet-cookie[data-pose="drag"] .cookie-person { transform-origin: 60px 32px; animation: cookie-dangle .9s ease-in-out infinite; }
#pet-cookie[data-pose="drag"] .cookie-leg-left { transform-origin: 49px 92px; animation: cookie-kick .4s ease-in-out infinite alternate; }
#pet-cookie[data-pose="drag"] .cookie-leg-right { transform-origin: 71px 92px; animation: cookie-kick .4s ease-in-out -.4s infinite alternate; }
#pet-cookie[data-pose="love-sign"] .cookie-person { animation: cookie-sign-hold 2.8s ease-in-out infinite; }
#pet-cookie[data-pose="heart"] .cookie-person { animation: cookie-shy 3.2s ease-in-out infinite; }
#pet-cookie .cookie-hug-heart { transform-origin: 60px 85px; animation: cookie-heartbeat 1.8s ease-in-out infinite; }
#pet-cookie .cookie-love-hearts { animation: cookie-heart-float 2.8s ease-in-out infinite; }
#pet-cookie .cookie-flower-stem { transform-origin: 106px 74px; animation: cookie-flower-nod 2.2s ease-in-out infinite; }
#pet-cookie[data-pose="wave"] .cookie-person { transform-origin: 60px 108px; animation: cookie-peek 3s ease-in-out infinite; }
#pet-cookie .cookie-wave-hand { transform-origin: 91px 65px; animation: cookie-wave .7s ease-in-out infinite; }
/* A double tap or an idle glance: leans to one side, holds, and comes back. */
#pet-cookie[data-pose="lean-left"] .cookie-person { transform-origin: 60px 110px; animation: cookie-lean-left 2s ease-in-out both; }
#pet-cookie[data-pose="lean-right"] .cookie-person { transform-origin: 60px 110px; animation: cookie-lean-right 2s ease-in-out both; }
@keyframes cookie-breathe { 50% { transform: translateY(-1.5px); } }
@keyframes cookie-think { 50% { transform: rotate(-5deg); } }
@keyframes cookie-dot { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes cookie-type-body { 50% { transform: translateY(1px); } }
@keyframes cookie-tap { to { transform: translateY(-3px); } }
@keyframes cookie-hop { 45% { transform: translateY(-5px) rotate(-3deg); } 75% { transform: translateY(0) rotate(2deg); } }
@keyframes cookie-shy { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes cookie-blush { 50% { opacity: .65; } }
@keyframes cookie-huff { 30% { transform: translateY(-2px) rotate(-2deg); } 65% { transform: rotate(2deg); } }
@keyframes cookie-startle { 15%,35% { transform: translateY(-7px) rotate(-7deg); } 60%,100% { transform: none; } }
@keyframes cookie-sleep { 0%,100% { transform: translate(0,9px) rotate(15deg); } 50% { transform: translate(0,8px) rotate(16deg); } }
@keyframes cookie-zzz { 50% { opacity: .4; transform: translateY(-3px); } }
@keyframes cookie-dangle { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes cookie-kick { to { transform: rotate(22deg); } }
@keyframes cookie-sign-hold { 50% { transform: translateY(-1px); } }
@keyframes cookie-heartbeat { 15%,45% { transform: scale(1.035); } 30%,60%,100% { transform: scale(1); } }
@keyframes cookie-heart-float { 0%,100% { opacity: .35; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes cookie-flower-nod { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes cookie-peek { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes cookie-wave { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(6deg); } }
@keyframes cookie-lean-left { 20%,80% { transform: translateX(-4px) rotate(-11deg); } }
@keyframes cookie-lean-right { 20%,80% { transform: translateX(4px) rotate(11deg); } }
@media (prefers-reduced-motion: reduce) {
  #pet-cookie * { animation: none !important; }
  #pet-cookie[data-pose="sleeping"] .cookie-person { transform: translateY(8px) rotate(15deg); }
  #pet-cookie[data-pose="lean-left"] .cookie-person { transform: rotate(-8deg); }
  #pet-cookie[data-pose="lean-right"] .cookie-person { transform: rotate(8deg); }
}