/* Fixed 192:208 cells; entire original atlas remains unchanged. */
.pet-button.sprite-ready{--pet-width:192px;width:var(--pet-width);height:calc(var(--pet-width) * 208 / 192);left:calc(50% + var(--pet-offset, 0px));overflow:visible;background:transparent;border-radius:0;box-shadow:none}
.pet-sprite{display:block;width:100%;height:100%;background-repeat:no-repeat;pointer-events:none;image-rendering:auto}
.pet-controls{border-top:1px solid var(--line);padding:0 25px 10px}
.pet-controls summary{min-height:44px;display:list-item;padding:11px 0;font-size:12px;cursor:pointer;list-style-position:inside}
.pet-controls summary:focus-visible,.pet-controls input:focus-visible{outline:3px solid #aa6846;outline-offset:3px}
.pet-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pet-action-grid button{min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:12px}
.pet-gaze-label{display:block;font-size:12px;margin-top:12px}
.pet-controls input[type=range]{width:100%;min-height:36px;accent-color:var(--green)}
.pet-controls p{font-size:11px;color:var(--muted);margin:2px 0 0}
@media(max-width:720px){.pet-button.sprite-ready{--pet-width:163.2px}.pet-controls{padding-left:21px;padding-right:21px}}
@media(prefers-reduced-motion:reduce){.pet-button.sprite-ready{transition:none}}
/* Immersive room: a discreet action drawer, without changing atlas pixels. */
.pet-button.sprite-ready{--pet-width:220px;bottom:14%}
.pet-controls{position:absolute;z-index:10;left:30px;bottom:20px;padding:0;border:0;width:76px}
.pet-controls summary{display:block;list-style:none;min-height:44px;padding:10px 12px;border-radius:22px;background:#fffaf1ad;text-align:center;font-size:12px;box-shadow:0 3px 10px #7a806311}
.pet-controls summary::-webkit-details-marker{display:none}
.pet-controls[open]{width:270px;padding:12px;border:1px solid #d5d7c8;border-radius:18px;background:#fffdf7;box-shadow:0 12px 35px #56644724}
.pet-controls[open] summary{width:76px;margin-bottom:8px;background:#edf0e6;padding:10px 4px}
.pet-controls[open] .pet-action-grid{gap:5px}.pet-controls[open] button{min-height:42px}
.pet-controls p{font-size:10px}
@media(max-width:600px){.pet-button.sprite-ready{--pet-width:176px;bottom:18%}.pet-controls{left:18px;bottom:17px;width:68px}.pet-controls summary{font-size:11px}.pet-controls[open]{width:min(270px,calc(100vw - 36px));max-height:75svh;overflow:auto}}
@media(max-height:650px) and (min-width:601px){.pet-button.sprite-ready{--pet-width:180px}}
/* Flat ring and dot; the 72px pad owns touch dragging. */
.pet-joystick{position:absolute;z-index:8;left:50%;bottom:18px;transform:translateX(-50%)}
.stick-base{position:relative;display:block;width:72px;height:72px;border-radius:50%;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;background:transparent;border:1.5px solid #91a28680;box-shadow:none;cursor:grab}
.stick-base.is-held{cursor:grabbing;border-color:#819674}.stick-base:focus-visible{outline:3px solid #996247;outline-offset:5px}
.stick-knob{position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:#8a9e7dcc;border:0;box-shadow:none;transition:transform 160ms ease-out;pointer-events:none}
.is-held .stick-knob{transition:none;background:#718966}
.pat-button{left:calc(50% + 79px);bottom:37px;width:38px;height:38px;font-size:23px}
@media(max-width:600px){.pet-joystick{bottom:20px}.pat-button{left:calc(50% + 68px);bottom:39px;width:34px;height:34px}.room-hint{display:none}}
@media(prefers-reduced-motion:reduce){.stick-knob{transition:none}}

/* Code ornament based on the user's green companion reference; never an image crop. */
.green-jelly{position:absolute;z-index:7;left:calc(50% + 114px);bottom:14%;width:60px;height:73px;cursor:pointer;text-decoration:none;border-radius:18px}
.green-jelly::before{content:"";position:absolute;inset:-6px;border-radius:20px}
.green-jelly:focus-visible{outline:3px solid var(--green);outline-offset:6px}
.jelly-play-mark{position:absolute;right:-5px;bottom:0;display:grid;place-items:center;width:19px;height:19px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--green);font-size:10px;line-height:1;padding-left:1px;pointer-events:none}
.green-jelly:hover .jelly-play-mark,.green-jelly:focus-visible .jelly-play-mark{background:var(--green);color:var(--paper)}
.green-jelly .jelly-body,.green-jelly .jelly-shadow{pointer-events:none}
.jelly-body{position:absolute;left:0;bottom:3px;width:60px;height:70px;overflow:visible;transform-origin:60% 95%;animation:jelly-sway 5.8s ease-in-out infinite}
.jelly-shadow{position:absolute;left:17px;bottom:1px;width:42px;height:6px;border-radius:50%;background:#81907120;z-index:-1}
@keyframes jelly-sway{0%,30%,70%,100%{transform:rotate(0deg)}38%{transform:rotate(-3deg)}46%{transform:rotate(2.5deg)}54%{transform:rotate(-1.5deg)}62%{transform:rotate(0deg)}}
@media(max-width:600px){.green-jelly{left:calc(50% + 80px);bottom:18%;width:46px;height:57px}.jelly-body{width:46px;height:53.6667px;bottom:3px}.jelly-shadow{left:13px;width:32px;height:5px}}
@media(max-width:359px){.green-jelly{left:calc(50% + 68px);bottom:18%;transform:scale(.9);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.jelly-body{animation:none}}

.pet-game-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;color:var(--green);font-size:12px;text-decoration:none;border-top:1px solid var(--line)}.pet-game-link:focus-visible{outline:3px solid #aa6846;outline-offset:3px}

.pet-button{touch-action:none}.pet-button.is-looking{cursor:grabbing}
@media(max-width:600px){.pet-joystick{bottom:calc(20px + env(safe-area-inset-bottom))}.pet-controls{bottom:calc(17px + env(safe-area-inset-bottom))}.pat-button{bottom:calc(39px + env(safe-area-inset-bottom))}}

.pet-button.early-ready{--pet-width:220px;width:var(--pet-width);height:calc(var(--pet-width) * 208 / 192);left:calc(50% + var(--pet-offset,0px));bottom:14%;border-radius:0;overflow:visible}
.pet-button.early-ready:has(img:not([hidden])){background:transparent;box-shadow:none}
.pet-button.early-ready img{position:static;width:100%;height:100%;object-fit:contain;left:auto;top:auto}
.stick-base:disabled{opacity:.4;cursor:default}
@media(max-width:600px){.pet-button.early-ready{--pet-width:176px;bottom:18%}}
@media(max-height:650px) and (min-width:601px){.pet-button.early-ready{--pet-width:180px}}
.green-jelly.is-blinking .jelly-eye{transform-box:fill-box;transform-origin:center;transform:scaleY(.14)}.green-jelly.is-resting .jelly-body{animation-play-state:paused}

.pet-sprite{transform-origin:50% 88%}.jump-shadow{position:absolute;left:calc(50% - 36px);bottom:calc(5.2884615% - 3.5px);width:72px;height:7px;border-radius:50%;background:#5c6959;opacity:0;pointer-events:none;z-index:-1}.is-soft-jumping .jump-shadow{opacity:var(--jump-shadow-opacity,.18)}

/* Interactive props stay reachable when the pet walks in front of them. */
.room-object{z-index:6}
.pet-retry{position:absolute;z-index:1;left:14px;top:14px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--green);font-size:23px;cursor:pointer}
.pet-retry[hidden]{display:none}.pet-retry:disabled{opacity:.45;cursor:default}.pet-retry:focus-visible{outline:3px solid #996247;outline-offset:3px}
@media(max-height:540px){
 .pet-button.sprite-ready,.pet-button.early-ready{--pet-width:clamp(112px,calc((100dvh - 200px) * 192 / 208),144px);bottom:calc(108px + env(safe-area-inset-bottom))}
 .green-jelly{left:calc(50% + 80px);bottom:calc(108px + env(safe-area-inset-bottom));width:46px;height:57px}
 .green-jelly .jelly-body{width:46px;height:53.6667px}.green-jelly .jelly-shadow{left:13px;width:32px;height:5px}
}

@media(max-width:600px) and (max-height:540px){.green-jelly{left:calc(50% + 35px)}}

/* Keep the pet in front, with transparent cell corners passing clicks through. */
.timer-object,.notebook-object{z-index:4}
.pet-button{pointer-events:none}.pet-hit{position:absolute;inset:0;pointer-events:auto;background:transparent}
#pet-button:focus:not(:focus-visible),#pet-stick:focus:not(:focus-visible),#pet-button[data-pointer-focus]:focus,#pet-stick[data-pointer-focus]:focus{outline:none}

.pet-hit{touch-action:none;user-select:none;-webkit-user-select:none}