/* Pocket Pet: original egg-shaped keychain pet styling. */
.pet-app{display:flex;flex-direction:column;min-height:100%;font:12px Tahoma,Arial,sans-serif;background:var(--chrome);outline:none;box-sizing:border-box}
.pet-app [hidden]{display:none!important}
.pet-app .app-menubar{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pet-app .pet-confirm{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:1px 4px;background:#fff6c8;border:1px solid #9c8a3a}
.pet-main{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;padding:10px}
.pet-device{position:relative;isolation:isolate;margin-top:10px;width:260px;max-width:100%;box-sizing:border-box;padding:34px 26px 26px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:radial-gradient(circle at 32% 24%,#ffd9c7 0,#f2a48f 30%,#d9735f 70%,#a84c3f 100%);box-shadow:inset -6px -8px 0 #0002,inset 4px 5px 0 #fff5,2px 4px 0 #0005;display:flex;flex-direction:column;align-items:center;gap:10px}
.pet-device::before{content:"";position:absolute;top:-12px;left:50%;width:22px;height:22px;margin-left:-11px;border:5px solid #a3a7ad;border-radius:50%;box-sizing:border-box;z-index:-1}
.pet-brand{font:bold 11px/1 "Courier New",monospace;letter-spacing:2px;color:#5d2219}
.pet-screen{width:100%;padding:8px;box-sizing:border-box;background:#4b3a35;border-radius:14px;box-shadow:inset 0 2px 0 #0006,0 1px 0 #fff5}
.pet-screen canvas{display:block;width:100%;height:auto;aspect-ratio:32/22;image-rendering:pixelated;border-radius:4px;background:#a7b78f}
.pet-keys{display:flex;justify-content:center;gap:22px;margin-top:2px}
.pet-keys span{display:flex;flex-direction:column;align-items:center;gap:3px}
.pet-keys span:nth-child(2){margin-top:10px}
.pet-keys small{font:bold 10px Tahoma,Arial,sans-serif;color:#4a1a14}
.pet-key{width:38px;height:38px;border-radius:50%;border:2px solid #6b2a20;background:radial-gradient(circle at 35% 30%,#fff7d6,#e7c467 60%,#b88d2e);color:#4a1a14;font:bold 13px Tahoma,Arial,sans-serif;cursor:pointer;box-shadow:0 3px 0 #6b2a20;padding:0}
.pet-key:active{transform:translateY(2px);box-shadow:0 1px 0 #6b2a20}
.pet-key:focus-visible,.pet-app .bevel-button:focus-visible{outline:2px dotted #000;outline-offset:2px}
.pet-panel{flex:1 1 220px;max-width:300px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pet-info{min-height:1.4em}
.pet-meters{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.pet-meter{display:flex;justify-content:space-between;gap:4px;padding:3px 5px;background:#fff;border:1px solid #888;border-color:#808080 #fff #fff #808080}
.pet-meter b{color:#b23a3a;letter-spacing:1px;font-weight:normal;white-space:nowrap}.pet-meter i{color:#999;font-style:normal}
.pet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pet-actions .bevel-button,.pet-game .bevel-button{min-height:32px;padding:2px 4px}
.pet-actions .pet-sel{outline:2px solid #1d4fa8;outline-offset:1px;font-weight:bold}
.pet-actions .pet-needed::after{content:" !";color:#b23a3a;font-weight:bold}
.pet-game{display:grid;grid-template-columns:1fr 1fr;gap:5px}.pet-game p{grid-column:1/-1;margin:0}.pet-game [data-pet=stop]{grid-column:1/-1}
.pet-status{margin:0;padding:4px 12px 10px;line-height:1.5;min-height:3em}
@media(max-width:600px){.pet-main{padding:8px 6px;gap:10px}.pet-device{width:min(250px,100%);padding:30px 22px 22px}.pet-panel{flex-basis:100%;max-width:340px}}
@media(prefers-reduced-motion:reduce){.pet-key:active{transform:none}}