/* Blastling — a self-contained Blast Radius companion with a grounded,
   articulated SVG rig. Shape, colour palette, face, accessory, and temperament
   are chosen from
   closed sets and applied purely through data-* attributes on #pet-panel, so
   meaning is carried by shape + attribute — no inline styles, no external
   assets (CSP-safe). Colour is decoupled from shape: any shape wears any palette.

   Layout rule that matters: the mascot + speech bubble are pointer-events:none
   so the floating pet can NEVER intercept a click meant for the app beneath it.
   Only the small toggle puck and the opt-in stats/builder HUD are interactive,
   and the HUD is collapsed by default so it adds no footprint over the controls. */

#pet-panel{
  position:fixed;bottom:16px;right:16px;z-index:6;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  font-family:var(--mono);color:var(--ink);
  pointer-events:none;              /* container is transparent to clicks */
  max-width:min(280px,68vw);
  /* chrome stays Blast-Radius acid for brand identity */
  --pet-accent:var(--acid);
  --pet-out:#0a1526;
  --pet-screen:#06080f;
  --pet-face:var(--acid);           /* terminal prompt colour */
  --pet-body:#4a9dff;--pet-hi:#aacdff;--pet-sh:#2f6fd0;   /* default palette: codex blue */
}
.pet-stage,.pet-bubble{pointer-events:none}   /* mascot + bubble never block */
.pet-toggle,.pet-move,.pet-hud{pointer-events:auto} /* only explicit controls capture clicks */

/* ---- palettes (decoupled from shape; any shape wears any palette) ---- */
#pet-panel[data-palette="codex"] {--pet-body:#4a9dff;--pet-hi:#aacdff;--pet-sh:#2f6fd0;--pet-out:#0a1526}
#pet-panel[data-palette="acid"]  {--pet-body:#a6e635;--pet-hi:#d6ff87;--pet-sh:#6f9e1c;--pet-out:#12280a}
#pet-panel[data-palette="ember"] {--pet-body:#ff8a3d;--pet-hi:#ffc199;--pet-sh:#d65f1f;--pet-out:#2a1305}
#pet-panel[data-palette="violet"]{--pet-body:#a988ff;--pet-hi:#d8c8ff;--pet-sh:#7a54d6;--pet-out:#1c1233}
#pet-panel[data-palette="slate"] {--pet-body:#9fb0c4;--pet-hi:#d3dde8;--pet-sh:#64748b;--pet-out:#26303c}
#pet-panel[data-palette="bsod"]  {--pet-body:#dbe1ee;--pet-hi:#f3f6fc;--pet-sh:#98a2b6;--pet-out:#1330a8}
#pet-panel[data-face="error"]    {--pet-face:#ff5a4d}

/* ---- collapsible stats / builder HUD (opens above the mascot on click) ---- */
.pet-hud{
  position:absolute;right:0;bottom:42px;
  width:min(252px,calc(100vw - 24px));display:none;flex-direction:column;gap:10px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  border:1px solid color-mix(in srgb,var(--pet-accent) 36%,var(--line));border-radius:14px;padding:12px;
  box-shadow:0 16px 42px rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--pet-accent) 8%,transparent);backdrop-filter:blur(5px);
  max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;
}
#pet-panel[data-open="true"] .pet-hud{display:flex}
#pet-panel[data-hud-x="right"] .pet-hud{right:auto;left:0}
#pet-panel[data-hud-y="below"] .pet-hud{bottom:auto;top:100%}
.pet-meta{display:flex;justify-content:space-between;gap:6px;font-size:10px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
#pet-meta-level{color:var(--pet-accent);font-weight:700}
#pet-meta-name{color:var(--ink);font-weight:700;text-transform:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
progress.pet-xp{width:100%;height:5px;border:0;border-radius:3px;background:var(--line);appearance:none;-webkit-appearance:none}
progress.pet-xp::-webkit-progress-bar{background:var(--line);border-radius:3px}
progress.pet-xp::-webkit-progress-value{background:var(--pet-accent);border-radius:3px}
progress.pet-xp::-moz-progress-bar{background:var(--pet-accent);border-radius:3px}

/* ---- pet builder (closed-enum option chips) ---- */
.pet-builder{display:flex;flex-direction:column;gap:8px}
.pet-opt-row{display:flex;flex-direction:column;gap:4px}
.pet-opt-label{font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.pet-opt-choices{display:flex;flex-wrap:wrap;gap:3px}
.pet-opt{
  background:var(--black);border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:var(--mono);font-size:9.5px;padding:4px 7px 4px 5px;cursor:pointer;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:4px;min-height:27px;
}
.pet-opt::before{content:attr(data-glyph);display:inline-grid;place-items:center;min-width:16px;height:16px;color:var(--pet-accent);font-size:11px;font-weight:700}
.pet-opt:hover{border-color:var(--pet-accent);color:var(--ink)}
.pet-opt[aria-pressed="true"]{border-color:var(--pet-accent);color:var(--black);background:var(--pet-accent)}
.pet-opt[aria-pressed="true"]::before{color:var(--black)}
.pet-opt[data-axis="palette"]{padding-right:6px}
.pet-opt[data-axis="palette"]::before{border:1px solid currentColor;border-radius:50%;font-size:0;background:#4a9dff}
.pet-opt[data-axis="palette"][data-value="acid"]::before{background:#a6e635}
.pet-opt[data-axis="palette"][data-value="ember"]::before{background:#ff8a3d}
.pet-opt[data-axis="palette"][data-value="violet"]::before{background:#a988ff}
.pet-opt[data-axis="palette"][data-value="slate"]::before{background:#9fb0c4}
.pet-opt:focus-visible{outline:2px solid var(--pet-accent);outline-offset:1px}
.pet-name-row{display:flex;gap:4px}
#pet-name{
  flex:1;min-width:0;background:var(--black);border:1px solid var(--line);border-radius:6px;
  color:var(--ink);font-family:var(--mono);font-size:10px;padding:4px 6px;
}
#pet-name:focus-visible{outline:2px solid var(--pet-accent);outline-offset:1px}
.pet-hide-btn{
  align-self:flex-start;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:var(--mono);font-size:10px;padding:4px 6px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
}
.pet-hide-btn:hover{border-color:var(--pet-accent);color:var(--pet-accent)}
.pet-hud-actions{display:flex;flex-wrap:wrap;gap:6px}
.pet-reset-btn{
  background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:var(--mono);font-size:10px;padding:4px 6px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
}
.pet-reset-btn:hover{border-color:var(--pet-accent);color:var(--pet-accent)}
.pet-reset-btn:focus-visible,.pet-hide-btn:focus-visible{outline:2px solid var(--pet-accent);outline-offset:1px}

/* ---- speech bubble (coach line; click-through) ---- */
.pet-bubble{
  position:relative;max-width:230px;
  background:var(--black);border:1px solid var(--line);border-left:2px solid var(--pet-accent);
  border-radius:8px;padding:6px 8px;font-size:11px;line-height:1.35;color:var(--ink);
}
.pet-bubble:empty{display:none}
#pet-bubble-text{display:block}
#pet-panel[data-hud-x="right"] .pet-bubble{align-self:flex-start}

/* ---- mascot ---- */
.pet-stage{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;height:126px;min-width:126px}
.pet-stage::before{content:"";position:absolute;right:9px;bottom:2px;width:104px;height:72px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--pet-body) 15%,transparent),transparent 68%);filter:blur(5px)}
.pet-svg{position:relative;width:118px;height:auto;overflow:visible;filter:drop-shadow(0 8px 8px rgba(0,0,0,.34))}

/* ---- toggle puck (the /pet control: reveals the stats/builder HUD) ---- */
.pet-toggle{
  width:34px;height:34px;flex:0 0 34px;
  background:var(--black);border:1px solid var(--pet-accent);border-radius:9px;
  color:var(--pet-accent);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.02em;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.pet-toggle:hover{box-shadow:0 0 14px color-mix(in srgb,var(--pet-accent) 55%,transparent)}
.pet-toggle:focus-visible,.pet-move:focus-visible{outline:2px solid var(--pet-accent);outline-offset:2px}
.pet-move{
  position:absolute;right:42px;bottom:0;width:34px;height:34px;
  border:1px solid var(--line);border-radius:9px;background:var(--black);color:var(--muted);
  font-family:var(--mono);font-size:15px;font-weight:700;cursor:grab;touch-action:none;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.pet-move:hover{border-color:var(--pet-accent);color:var(--pet-accent)}
.pet-move:active,#pet-panel[data-dragging="true"] .pet-move{cursor:grabbing}

/* dismissed: hide everything except the summon puck */
#pet-panel[data-dismissed="true"] .pet-stage,
#pet-panel[data-dismissed="true"] .pet-bubble,
#pet-panel[data-dismissed="true"] .pet-hud,
#pet-panel[data-dismissed="true"] .pet-move{display:none}
#pet-panel[data-dismissed="true"] .pet-toggle{border-radius:50%}

/* ================= chibi sprite ================= */
.p-out{fill:var(--pet-out)}
.p-body{fill:var(--pet-body)}
.p-hi{fill:var(--pet-hi);fill-opacity:.9}
.p-arm{fill:var(--pet-sh)}
.p-foot{fill:var(--pet-sh)}
.p-screen{fill:var(--pet-screen)}
#pet-panel[data-bsod="true"] .p-screen{fill:#5a0d0d}
.shape-body{fill:var(--pet-body);stroke:var(--pet-out);stroke-width:3;stroke-linejoin:round}
.f-eye{fill:var(--pet-out)}
.f-eyeo{fill:none;stroke:var(--pet-out);stroke-width:1.6}
.f-line{fill:none;stroke:var(--pet-out);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-mouth{fill:none;stroke:var(--pet-out);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-blush{fill:#ff8fa3;fill-opacity:.5}
.ant{stroke:var(--pet-out);stroke-width:3;stroke-linecap:round}
.p-antball{fill:var(--blue)}
.warn{fill:#ffcf3d}
.pet-shadow{fill:rgba(2,7,14,.46);transform-origin:center}
.pet-part{transform-box:fill-box;transform-origin:center}
.pet-shell{transform-origin:center bottom}
.pet-face{transform-origin:center}
.pet-arm-left{transform-origin:right center}
.pet-arm-right{transform-origin:left center}
.pet-foot-left,.pet-foot-right{transform-box:fill-box;transform-origin:center bottom}
.pet-accessory{transform-origin:center bottom}
.pet-status{transform-origin:center}

/* one silhouette shows, chosen by the shape (data-form is the shape; bsod maps to monitor) */
.form{display:none}
#pet-panel[data-form="cloud"]   .form-cloud  {display:block}
#pet-panel[data-form="droplet"] .form-droplet{display:block}
#pet-panel[data-form="rock"]    .form-rock   {display:block}
#pet-panel[data-form="monitor"] .form-monitor{display:block}

/* terminal-screen face: one glyph shown per computed data-face */
.gl{fill:none;stroke:var(--pet-face);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gld{fill:var(--pet-face)}
.face-default,.face-happy,.face-sleepy,.face-think,.face-error{display:none}
#pet-panel[data-face="default"] .face-default{display:block}
#pet-panel[data-face="happy"]   .face-happy  {display:block}
#pet-panel[data-face="sleepy"]  .face-sleepy {display:block}
#pet-panel[data-face="think"]   .face-think  {display:block}
#pet-panel[data-face="error"]   .face-error  {display:block}

/* face-style overlays for the terminal screen (cloud / monitor). "terminal" is the
   default >_ prompt; "dot" swaps in dot-eyes; "visor" shows a scanning bar. */
.fs-dot,.fs-visor{display:none}
.fs-dot .f-eye{fill:var(--pet-face)}
.fs-dot .f-mouth{stroke:var(--pet-face)}
.visor-bar{fill:none;stroke:var(--pet-face);stroke-width:2.4;opacity:.35}
.visor-eye{fill:var(--pet-face)}
#pet-panel[data-face-style="dot"] .gl{display:none!important}
#pet-panel[data-face-style="dot"] .fs-dot{display:block}
#pet-panel[data-face-style="visor"] .gl{display:none!important}
#pet-panel[data-face-style="visor"] .fs-visor{display:block}

/* ---- accessories (one shown per data-accessory) ---- */
.acc{display:none}
#pet-panel[data-accessory="antenna"] .acc-antenna{display:block}
#pet-panel[data-accessory="halo"]    .acc-halo{display:block}
#pet-panel[data-accessory="bowtie"]  .acc-bowtie{display:block}
#pet-panel[data-accessory="shades"]  .acc-shades{display:block}
.acc-wire{stroke:var(--pet-sh);stroke-width:2.4;stroke-linecap:round}
.acc-bulb{fill:var(--pet-accent)}
.acc-ring{fill:none;stroke:#ffd85a;stroke-width:2.6}
.acc-bow{fill:#ff5a7a}
.acc-knot{fill:#c73b58}
.acc-lens{fill:#0b0f18;stroke:var(--pet-sh);stroke-width:1.6}
.acc-bridge{stroke:var(--pet-sh);stroke-width:1.8;stroke-linecap:round}

/* ---- thought bubble status overlays ---- */
.bub-out{fill:var(--pet-out)}
.bub{fill:var(--ink)}
.pet-bubble-ov{display:none}
#pet-panel[data-state="waiting"]  .pet-bubble-ov,
#pet-panel[data-state="anxious"]  .pet-bubble-ov,
#pet-panel[data-state="thinking"] .pet-bubble-ov,
#pet-panel[data-state="done"]     .pet-bubble-ov,
#pet-panel[data-state="hurt"]     .pet-bubble-ov{display:block}
.pet-ov{display:none}
.pet-ov-clock .clk-ring{fill:none;stroke:var(--orange);stroke-width:2}
.pet-ov-clock line{stroke:var(--orange);stroke-width:2;stroke-linecap:round}
.pet-ov-check path{fill:none;stroke:var(--acid);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pet-ov-x line{stroke:var(--orange);stroke-width:3;stroke-linecap:round}
.gld2{fill:var(--blue)}
#pet-panel[data-state="waiting"]  .pet-ov-clock{display:block}
#pet-panel[data-state="anxious"]  .pet-ov-clock{display:block}
#pet-panel[data-state="thinking"] .pet-ov-think{display:block}
#pet-panel[data-state="done"]     .pet-ov-check{display:block}
#pet-panel[data-state="hurt"]     .pet-ov-x{display:block}

/* ================= articulated motion ================= */
.pet-svg{animation:pet-float 4.8s ease-in-out infinite}
.pet-shell{animation:pet-breathe 4.8s ease-in-out infinite}
.pet-shadow{animation:pet-shadow-breathe 4.8s ease-in-out infinite}
#pet-panel[data-face="default"] .face-default line{animation:pet-cursor 1.1s steps(1,end) infinite}
#pet-panel[data-face="think"] .face-think .gld,
#pet-panel[data-state="thinking"] .pet-ov-think .gld2{animation:pet-think 1.2s ease-in-out infinite}
#pet-panel[data-face="think"] .face-think .gld:nth-child(3){animation-delay:.2s}
#pet-panel[data-face="think"] .face-think .gld:nth-child(4){animation-delay:.4s}
#pet-panel[data-face-style="visor"] .visor-eye{animation:pet-scan 1.8s ease-in-out infinite}
#pet-panel[data-idle="look"] .pet-face{animation:pet-look 5.2s ease-in-out}
#pet-panel[data-idle="look"] .pet-accessory{animation:pet-look-accessory 5.2s ease-in-out}
#pet-panel[data-idle="blink"] .pet-face{animation:pet-blink 5.2s steps(1,end)}
#pet-panel[data-idle="scan"] .pet-face{animation:pet-terminal-scan 5.2s ease-in-out}
#pet-panel[data-idle="stretch"] .pet-arm-left{animation:pet-stretch-left 5.2s ease-in-out}
#pet-panel[data-idle="stretch"] .pet-arm-right{animation:pet-stretch-right 5.2s ease-in-out}
#pet-panel[data-state="waiting"] .pet-shell{animation:pet-attention 1.5s ease-in-out infinite}
#pet-panel[data-state="waiting"] .pet-status{animation:pet-status-hover 1.5s ease-in-out infinite}
#pet-panel[data-state="anxious"] .pet-shell{animation:pet-anxious-shell .36s ease-in-out infinite}
#pet-panel[data-state="anxious"] .pet-arm-left{animation:pet-anxious-left .3s ease-in-out infinite alternate}
#pet-panel[data-state="anxious"] .pet-arm-right{animation:pet-anxious-right .3s ease-in-out infinite alternate}
#pet-panel[data-state="thinking"] .pet-face{animation:pet-thought-glance 1.7s ease-in-out infinite}
#pet-panel[data-state="thinking"] .pet-status{animation:pet-status-hover 1.25s ease-in-out infinite}
#pet-panel[data-state="done"] .pet-svg{animation:pet-celebrate .7s cubic-bezier(.2,.8,.3,1)}
#pet-panel[data-state="done"] .pet-arm-left{animation:pet-cheer-left .7s ease-out}
#pet-panel[data-state="done"] .pet-arm-right{animation:pet-cheer-right .7s ease-out}
#pet-panel[data-state="done"] .pet-status{animation:pet-check-pop .5s cubic-bezier(.2,.9,.3,1.3)}
#pet-panel[data-state="hurt"] .pet-svg{animation:pet-recoil .5s ease-in-out}
#pet-panel[data-state="hurt"] .pet-arm-left{animation:pet-slump-left .8s ease-out forwards}
#pet-panel[data-state="hurt"] .pet-arm-right{animation:pet-slump-right .8s ease-out forwards}
#pet-panel[data-bsod="true"] .p-screen{animation:pet-bsod-flicker .35s steps(2) infinite}
#pet-panel[data-state="done"] .pet-ov-check path{animation:pet-pop .4s ease-out}
#pet-panel[data-mood="smug"] .pet-shell{animation:pet-breathe 4.8s ease-in-out infinite,pet-smug 2.4s ease-in-out}
#pet-panel.pet-levelup .pet-svg{animation:pet-float 4.8s ease-in-out infinite,pet-sparkle .8s ease-out}
#pet-panel[data-dragging="true"] .pet-stage{transform:rotate(-3deg) translateY(-2px)}
#pet-panel[data-dragging="true"] .pet-shadow{animation:none;transform:scaleX(.78);opacity:.42}
#pet-panel[data-settling="true"] .pet-stage{animation:pet-settle .42s cubic-bezier(.2,.8,.3,1)}

@keyframes pet-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pet-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018,.985)}}
@keyframes pet-shadow-breathe{0%,100%{transform:scaleX(1);opacity:.72}50%{transform:scaleX(.91);opacity:.52}}
@keyframes pet-cursor{0%,55%{opacity:1}56%,100%{opacity:.15}}
@keyframes pet-think{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes pet-scan{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}
@keyframes pet-look{0%,18%,82%,100%{transform:translateX(0)}30%,62%{transform:translateX(2.4px)}70%{transform:translateX(-1.5px)}}
@keyframes pet-look-accessory{0%,18%,82%,100%{transform:rotate(0)}30%,62%{transform:rotate(2deg)}70%{transform:rotate(-1.5deg)}}
@keyframes pet-blink{0%,44%,49%,100%{transform:scaleY(1)}45%,48%{transform:scaleY(.12)}}
@keyframes pet-terminal-scan{0%,24%,76%,100%{transform:translateX(0)}40%,58%{transform:translateX(3px)}}
@keyframes pet-stretch-left{0%,16%,72%,100%{transform:rotate(0)}31%,52%{transform:rotate(24deg) translate(-2px,-2px)}}
@keyframes pet-stretch-right{0%,16%,72%,100%{transform:rotate(0)}31%,52%{transform:rotate(-24deg) translate(2px,-2px)}}
@keyframes pet-attention{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.98)}}
@keyframes pet-status-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pet-anxious-shell{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes pet-anxious-left{from{transform:rotate(-8deg)}to{transform:rotate(7deg)}}
@keyframes pet-anxious-right{from{transform:rotate(8deg)}to{transform:rotate(-7deg)}}
@keyframes pet-thought-glance{0%,100%{transform:translateX(-1px)}50%{transform:translateX(2px)}}
@keyframes pet-celebrate{0%,100%{transform:translateY(0) scale(1)}38%{transform:translateY(-10px) scale(1.04,.97)}68%{transform:translateY(-2px) scale(.98,1.03)}}
@keyframes pet-cheer-left{0%,100%{transform:rotate(0)}42%{transform:rotate(38deg) translate(-2px,-3px)}}
@keyframes pet-cheer-right{0%,100%{transform:rotate(0)}42%{transform:rotate(-38deg) translate(2px,-3px)}}
@keyframes pet-check-pop{0%{transform:scale(.45);opacity:.2}75%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes pet-recoil{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-2deg)}42%{transform:translateX(4px) rotate(2deg)}65%{transform:translateX(-2px) rotate(-1deg)}}
@keyframes pet-slump-left{to{transform:rotate(-18deg) translateY(2px)}}
@keyframes pet-slump-right{to{transform:rotate(18deg) translateY(2px)}}
@keyframes pet-bsod-flicker{0%{opacity:1}100%{opacity:.8}}
@keyframes pet-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes pet-smug{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes pet-sparkle{0%{filter:drop-shadow(0 0 0 var(--acid))}50%{filter:drop-shadow(0 0 9px var(--acid))}100%{filter:drop-shadow(0 0 0 var(--acid))}}
@keyframes pet-settle{0%{transform:rotate(-3deg) translateY(-2px)}48%{transform:rotate(1.5deg) translateY(1px)}100%{transform:rotate(0) translateY(0)}}

.pet-svg,.pet-ov-check path,.visor-eye{transform-box:view-box;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  .pet-svg,.pet-stage,.pet-face,.pet-part,.pet-shell,.pet-shadow,.pet-foot,.face-default line,.face-think .gld,.pet-ov-think .gld2,.p-screen,.pet-ov-check path,.visor-eye,#pet-panel.pet-levelup .pet-svg,#pet-panel[data-mood="smug"] .pet-shell{animation:none!important;transition:none!important}
}

@media (max-width:520px){
  #pet-panel{bottom:10px;right:10px}
  .pet-hud{width:min(232px,calc(100vw - 24px));max-height:calc(100dvh - 62px)}
  .pet-stage{height:112px;min-width:112px}
  .pet-svg{width:104px}
  .pet-bubble{max-width:min(218px,68vw)}
}

@media (max-height:560px){
  .pet-hud{max-height:calc(100dvh - 24px)}
  .pet-stage{height:104px;min-width:104px}
  .pet-svg{width:98px}
}