.pet-panel { scroll-margin-top:76px; margin-top:32px; color:#443126; background:#fff0d6; border:0; border-radius:4px; overflow:hidden; font-family:'Lilita One', sans-serif; }
.pet-bar { position:relative; display:grid; grid-template-columns:90px 1fr 90px; align-items:center; gap:8px; padding:25px 28px 0; }
.pet-bar h2 { grid-column:2; margin:0; text-align:center; font:400 clamp(24px,3.1vw,42px)/1.1 'Lilita One',sans-serif; letter-spacing:-.025em; }
.pet-score { grid-column:3; display:flex; align-items:baseline; justify-content:flex-end; gap:5px; letter-spacing:-.03em; white-space:nowrap; }
.pet-score strong { font-size:32px; font-weight:400; font-variant-numeric:tabular-nums; }
.pet-score span { font-size:19px; }
.pet-stage { position:relative; height:clamp(430px,calc(100svh - 195px),680px); isolation:isolate; }
.cat-wrap { position:absolute; inset:0 3% 65px; display:flex; align-items:center; justify-content:center; }
.cat-wrap img { width:100%; height:100%; object-fit:contain; user-select:none; transform-origin:55% 75%; }
.pet-panel:is([data-phase="ready"],[data-phase="pet"]) .cat-wrap img { animation:cat-breathe 4s ease-in-out infinite; }
@keyframes cat-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.012,1.022); } }
.pet-controls { position:absolute; bottom:24px; left:15%; right:15%; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:4; }
.pet-controls p { margin:0; font-size:22px; letter-spacing:0; }
.pet-panel button { border:2px solid #443126; border-radius:12px; padding:12px 27px; background:#ffb64e; color:#443126; box-shadow:0 4px 0 #443126; font:400 20px/1 'Lilita One',sans-serif; letter-spacing:0; cursor:pointer; }
.pet-panel button:hover { background:#ffc974; }
.pet-panel button:active { box-shadow:0 1px 0 #443126; transform:translateY(3px); }
.pet-panel button:focus-visible { outline:3px solid #cb6733; outline-offset:5px; }
.pet-panel .pause-button { grid-column:1; grid-row:1; justify-self:start; padding:5px 10px; border:0; background:none; box-shadow:none; font-size:25px; }
.hand-cursor { position:absolute; width:clamp(66px,8vw,96px); aspect-ratio:120 / 140; transform:translate(-52%,-64%) rotate(-12deg); transform-origin:52% 64%; pointer-events:none; z-index:5; filter:drop-shadow(0 3px 1px #44312620); }
.hand-cursor img { display:block; width:100%; height:100%; user-select:none; }
.pet-error { position:absolute; bottom:95px; left:10%; right:10%; z-index:5; padding:10px; background:#fff0d6ee; text-align:center; color:#9d4026; font-size:17px; }
.pet-panel [hidden] { display:none !important; }
@media(max-width:680px) {
 .pet-bar { grid-template-columns:57px 1fr 57px; gap:4px; padding:20px 13px 0; }
 .pet-bar h2 { font-size:23px; } .pet-score strong { font-size:26px; } .pet-score span { font-size:15px; }
 .pet-stage { height:420px; } .cat-wrap { inset:0 0 65px; }
 .pet-controls { left:8%; right:8%; } .pet-panel button { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { .pet-panel .cat-wrap img { animation:none !important; } }

/* Directional squash follows the stroke; only release has a jelly rebound. */
.cat-wrap { transform-origin:55% 70%; transform:translate(0,0) scale(1,1) skewX(0deg); transition:transform .65s cubic-bezier(.34,1.56,.64,1); }
.cat-wrap.is-stroking { transform:translate(var(--pet-x),var(--pet-y)) scale(var(--pet-sx),var(--pet-sy)) skewX(var(--pet-skew)); transition:transform .09s ease-out; }
.pet-panel:is([data-phase="warning"],[data-phase="over"]) .cat-wrap { transform:none; transition:none; }
@media(prefers-reduced-motion:reduce) { .cat-wrap,.cat-wrap.is-stroking { transform:none !important; transition:none !important; } }

.pet-result { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); z-index:6; width:min(280px,80%); box-sizing:border-box; padding:16px 14px 18px; border:2px solid #443126; border-radius:16px; background:#fff0d6; box-shadow:0 5px 0 #443126; text-align:center; }
.pet-result h3 { margin:0 0 10px; font:400 36px/1.1 'Lilita One',sans-serif; letter-spacing:-.02em; }
.pet-result p { margin:0 0 16px; font-size:20px; line-height:1.3; }
.pet-result strong { font-weight:400; }

.camera-preview { position:absolute; right:18px; bottom:18px; width:clamp(100px,17%,168px); aspect-ratio:4/3; border:2px solid #443126; border-radius:10px; background:#443126; overflow:hidden; z-index:3; pointer-events:none; }
.camera-preview video,.camera-preview canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scaleX(-1); }
.pet-stage { touch-action:none; }
@media(max-width:680px) { .pet-stage { height:clamp(360px,65svh,520px); } .pet-controls { bottom:22px; } }