.pet-page,.pet-walk,.pet-guest,.pet-feed,.pet-confirm { display:grid; gap:12px; min-width:0 }
.pet-card { position:relative; isolation:isolate; display:grid; justify-items:center; min-height:248px; padding:14px 12px 19px;
  overflow:hidden; text-align:center; border-radius:22px; border:1px solid #e9b77855; color:#fff5df }
.pet-background-bed { background:linear-gradient(#73574c 0%,#ac886b 68%,#613b31 69%,#382b29 100%) }
.pet-background-porch { background:linear-gradient(#355f55 0%,#75a170 65%,#856048 66%,#4d342c 100%) }
.pet-card header { z-index:1; text-shadow:0 2px 8px #2f1b16; min-width:0; max-width:100% }
.pet-card h2 { margin:0 0 3px; font-size:clamp(20px,6vw,34px); overflow-wrap:anywhere }
.pet-card header small { color:#fff0cd }
.pet-backdrop { position:absolute; inset:0; pointer-events:none; z-index:-1 }
.pet-background-uploaded { background:#44362e }
.pet-background-uploaded .pet-backdrop { isolation:isolate }
.pet-background-uploaded .pet-backdrop::after { content:""; position:absolute; inset:0;
  background:linear-gradient(#1c1715b3,transparent 46%,#1c17154d) }
.pet-backdrop i { position:absolute; display:block }
.pet-background-bed .pet-backdrop i:first-child { width:86px; height:67px; right:9%; top:13%; border:7px solid #694138; border-radius:40px 40px 4px 4px;
  background:linear-gradient(90deg,transparent 47%,#694138 47% 53%,transparent 53%),linear-gradient(155deg,#fff1bb,#97a580); box-shadow:0 0 21px #f9c68a60 }
.pet-background-bed .pet-backdrop i:nth-child(2) { inset:auto 6% 0; height:34%; opacity:.39; border-radius:50%;
  background:repeating-radial-gradient(ellipse at center,#aa664f 0 8px,#edc180 9px 12px) }
.pet-background-bed .pet-backdrop i:nth-child(3),.pet-background-porch .pet-backdrop i:nth-child(3) {
  left:50%; bottom:6%; width:min(70%,310px); height:25%; transform:translateX(-50%); border-radius:50% 50% 32% 32%;
  background:linear-gradient(#d7a07b 14%,#96585d 58%,#573a41); box-shadow:0 5px 15px #261a2a8a,inset 0 0 0 5px #e5bb895e }
.pet-background-porch .pet-backdrop i:first-child { inset:6% auto 28% 10%; width:20%; border:5px solid #4c4135; border-radius:60px 60px 4px 4px;
  background:repeating-linear-gradient(90deg,#977953 0 12px,#785b43 13px 14px) }
.pet-background-porch .pet-backdrop i:nth-child(2) { right:-4%; width:36%; top:0; height:72%; border-radius:52% 42% 32% 74%;
  background:radial-gradient(circle at 26% 19%,#a0b974 4%,transparent 26%),radial-gradient(circle at 61% 47%,#82a165,#355946); opacity:.8 }
.pet-background-porch .pet-backdrop i:nth-child(3) { background:linear-gradient(#b1bf8a,#557557 70%,#394943); border-radius:34% }
.pet-portrait { position:relative; align-self:end; display:grid; place-items:end center;
  width:min(100%,200px); height:clamp(112px,35vw,176px); min-height:0; z-index:0 }
.pet-image { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none }
.pet-portrait .pet-image { width:100%; min-height:0; filter:drop-shadow(0 7px 10px #21161b81) }
.pet-emoji { display:grid; place-items:center; font-size:clamp(59px,17vw,103px); line-height:1 }
.pet-z { position:absolute; left:9%; top:8%; font-size:clamp(28px,8vw,43px); line-height:1;
  filter:drop-shadow(0 2px 4px #21161b81); animation:workshop-bob 1.5s infinite alternate }
.pet-card-compact { min-height:168px; padding:8px 10px 10px }
.pet-card-compact h2 { font-size:clamp(16px,4vw,22px) }
.pet-card-compact .pet-portrait { width:min(100%,122px); height:104px }
.pet-card-compact .pet-emoji { font-size:64px }
.pet-card-compact .pet-z { font-size:29px }
.pet-card-open { position:absolute; inset:0; width:100%; z-index:2; background:none; border:0; cursor:pointer }
.pet-card-open:focus-visible { outline-offset:-5px }
.pet-metrics,.pet-actions,.pet-backgrounds,.pet-skins { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.pet-actions .btn { min-height:44px; min-width:0; padding:6px 4px; font-size:clamp(11px,3vw,15px); overflow-wrap:anywhere }
.pet-customize { grid-template-columns:repeat(2,minmax(0,1fr)) }
.pet-customize > :only-child { grid-column:1/-1 }
.pet-metrics > div,.pet-bond,.pet-empty,.pet-skin-choice { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:9px }
.pet-metrics > div { display:grid; gap:5px; text-align:center; min-width:0 }
.pet-metrics progress { width:100%; accent-color:#92c077 }
.pet-bond { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:13px }
.pet-gift-emoji { font-size:32px }
.pet-help { margin:0; color:var(--muted); text-align:center }
.pet-feed,.pet-confirm,.pet-empty { justify-items:center; text-align:center }
.pet-feed > [data-pet-feed-target] { width:100% }
.pet-feed .workshop-basket { margin-top:4px }
.pet-confirm input { font-size:16px; width:100%; padding:10px; border-radius:9px; color:inherit; background:var(--panel); border:1px solid var(--line) }
.pet-confirm > .pet-image { width:92px; height:92px }
.pet-empty { display:grid; gap:10px }
.pet-empty > span { font-size:62px }
.pet-backgrounds { grid-template-columns:repeat(2,minmax(0,1fr)) }
.pet-backgrounds .pet-card { height:100% }
.pet-backgrounds > div { display:grid; grid-template-rows:1fr auto auto; min-width:0; text-align:center }
.pet-backgrounds > div > strong { margin-top:6px; overflow-wrap:anywhere }
.pet-backgrounds .btn { width:100%; margin-top:5px }
.pet-skin-choice { display:grid; justify-items:center; gap:5px; color:inherit; cursor:pointer; min-width:0; overflow-wrap:anywhere }
.pet-skin-choice[aria-pressed=true] { border-color:var(--accent) }
.pet-skin-choice .pet-image { height:clamp(44px,16vw,84px); font-size:clamp(34px,11vw,65px) }
.pet-field { position:relative; overflow:hidden; margin:auto; width:min(100%,475px); aspect-ratio:1; isolation:isolate;
  border-radius:20px; border:1px solid #aec585; background:radial-gradient(ellipse at 69% 30%,#b5ca79,#75a067 66%,#416b54); cursor:pointer }
.pet-field::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background:repeating-linear-gradient(35deg,transparent 0 26px,#d6daa813 27px 28px) }
.pet-field-road { position:absolute; z-index:-1; width:33%; height:150%; left:34%; top:-25%; rotate:40deg; border-inline:3px solid #bd9671;
  background:repeating-linear-gradient(#dcc1a0 0 20px,#c3a78e 21px 22px); box-shadow:0 0 15px #535a3780 }
.pet-field i { position:absolute; font-style:normal; font-size:clamp(20px,7vw,42px); pointer-events:none; filter:drop-shadow(0 4px 3px #36573d6e) }
.pet-field .t1 { top:6%;left:7% }.pet-field .t2 { bottom:7%;right:10% }.pet-field .t3 { bottom:15%;left:6% }
.pet-field-bench { top:30%;right:12% }.pet-field-flower { top:9%;right:25% }.pet-field-lamp { bottom:18%;right:26% }
.pet-field [data-pet-owner],.pet-field [data-pet-runner],.pet-field [data-pet-disc] { position:absolute; transform:translate(-50%,-50%); pointer-events:none;
  transition:left .32s ease,top .32s ease; filter:drop-shadow(0 3px 4px #253b386b) }
.pet-field [data-pet-owner] { font-size:clamp(26px,8vw,43px); z-index:3 }
.pet-field [data-pet-runner] { width:clamp(32px,12vw,68px); height:clamp(32px,12vw,68px); z-index:2 }
.pet-field [data-pet-runner] .pet-emoji { font-size:clamp(25px,7vw,38px) }
.pet-field [data-pet-disc] { z-index:4; font-size:21px }
.pet-field.is-fetching > span { transition:none }
.pet-aim { position:relative; height:20px; border-radius:999px; border:1px solid #b29891; overflow:hidden;
  background:linear-gradient(90deg,#974c46 65%,#66aa64 65% 87%,#974c46 87%) }
.pet-aim i { position:absolute; width:4px; height:100%; background:#fff1bd; transform:translateX(-50%); box-shadow:0 0 6px #000 }
@media(prefers-reduced-motion:reduce) { .pet-z { animation:none }.pet-field > span { transition:none } }