.pet-actions{flex-wrap:wrap}.pet-actions .small-button.interact-button{flex:1 0 100%;background:#7f956a;color:#fffdf3;border-color:#7f956a;font-size:12px;padding:12px}.pet-actions .small-button.interact-button:hover{background:#6c8356}.pet-actions .small-button:nth-child(2){flex:1}
#interact-dialog{width:min(440px,calc(100% - 28px));max-width:440px;max-height:calc(100dvh - 28px);overflow:auto;padding:20px 24px 22px;border-radius:26px;background:#fffcf3}#interact-dialog .cuddle-top{display:flex;justify-content:space-between;align-items:center;gap:12px}#interact-dialog .cuddle-top button{border:0;background:#edf0e1;color:#81906c;font:24px 'DM Sans',sans-serif;border-radius:50%;width:36px;height:36px;margin:0;padding:0;flex-shrink:0}#interact-dialog h2{font-size:30px;margin:12px 0 5px;overflow-wrap:anywhere}#interact-kind{font-size:10px!important;margin:0 0 12px;color:#969d88!important}.cuddle-scene{position:relative;height:300px;isolation:isolate;background:radial-gradient(ellipse at 50% 85%,#e4ebd1,transparent 65%),linear-gradient(#edf2e9,#f7f5e7);border:1px solid #e6eadc;border-radius:22px;overflow:hidden}.cuddle-scene:before{content:'✧';position:absolute;color:#c7bc88;top:45px;left:35px;font-size:25px}.cuddle-scene:after{content:'✦';position:absolute;color:#c1b4d0;top:80px;right:30px;font-size:17px}.cuddle-cloud{position:absolute;width:60px;height:20px;border-radius:30px;background:#ffffff9c;z-index:-1}.cuddle-cloud:before{content:'';position:absolute;width:28px;height:30px;bottom:0;left:14px;border-radius:50%;background:inherit}.cloud-one{top:40px;left:30px}.cloud-two{top:65px;right:30px;scale:.8}#pet-canvas{position:relative;width:100%;height:100%;display:block;touch-action:none;cursor:grab;z-index:1}#pet-canvas:active{cursor:grabbing}.cuddle-tip{position:absolute;bottom:12px;left:0;right:0;color:#9ba68c;font-size:9px;pointer-events:none;z-index:2}.cuddle-hearts{color:#c58d96;font-size:29px;letter-spacing:6px;margin:16px 0 3px}#interact-bond{font-size:10px!important;margin:0 0 10px}.cuddle-progress{height:5px;max-width:180px;margin:auto;background:#eee4df;border-radius:10px;overflow:hidden}#interact-progress{height:100%;background:#d4a6a8;border-radius:10px;transition:width .2s}#interact-reaction{font-size:11px!important;line-height:1.7;min-height:38px;margin:13px 0 0;color:#84916f}#interact-dialog #pat-pet{margin-top:8px;padding:14px;font-size:12px}#interact-ready{font-size:9px!important;margin:10px 0 0;color:#a0a68e}#cuddle-particles{position:absolute;inset:0;pointer-events:none;z-index:3}.cuddle-heart{position:absolute;top:38%;font-size:29px;color:#cb8d9b;animation:cuddle-float 1.3s ease-out forwards;text-shadow:0 2px 0 #fff8}#pet-fallback{position:absolute;inset:0;width:100%;margin:0!important;border:0;background:transparent!important;font-size:115px!important;color:inherit;padding:0;touch-action:manipulation;z-index:1}.pet-pop{animation:pet-pop .55s ease-out}@keyframes cuddle-float{from{transform:translateY(0) rotate(-10deg);opacity:1}to{transform:translateY(-110px) rotate(15deg);opacity:0}}@keyframes pet-pop{30%{transform:translateY(-18px) rotate(-6deg)}65%{transform:translateY(0) rotate(5deg)}}@media(max-width:540px){#interact-dialog{padding:16px 18px 20px}.cuddle-scene{height:270px}}@media(max-height:720px){.cuddle-scene{height:220px}#interact-dialog h2{font-size:25px;margin-top:8px}.cuddle-hearts{margin-top:10px}#interact-reaction{margin-top:8px;min-height:32px}}@media(prefers-reduced-motion:reduce){.cuddle-heart,.pet-pop{animation:none;opacity:1}}

.view-controls{display:flex;justify-content:center;align-items:center;gap:7px;margin:10px 0}.view-controls button{min-width:44px;min-height:44px;padding:7px;border:1px solid #d9dfcb;border-radius:12px;background:#edf0e1;color:#657953;font-size:18px;cursor:pointer}.view-controls #pet-view-reset{font-size:11px;flex:1;max-width:110px}.view-controls button:focus-visible{outline:3px solid #a3b78b;outline-offset:2px}

.pet-face,#hatch-fallback{position:relative}.rainbow-art{filter:drop-shadow(0 0 6px #ff98da) drop-shadow(0 0 12px #87e4ef)}.view-controls[hidden]{display:none}

/* Give the 2D portrait a definite scene-sized box, including room for its pat bounce. */
#cuddle-scene #pet-fallback{position:absolute;inset:12px 12px 30px;width:calc(100% - 24px);height:calc(100% - 42px);display:block;min-width:0;min-height:0;padding:0;margin:0;line-height:0;border-radius:0}
#cuddle-scene #pet-fallback[hidden]{display:none}
#cuddle-scene #pet-fallback .fallback-pet-art{display:block;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;object-fit:contain;object-position:center}