:root {
  --companion-width: 108px; --companion-height: 156px;
  --companion-atlas: url("./pet-assets/companion-atlas.png");
  --companion-motion: url("./pet-assets/companion-motion.png");
}
[data-muzi-outfit="student"] {
  --companion-atlas: url("./pet-assets/student-atlas.png");
  --companion-motion: url("./pet-assets/student-motion.png");
}
[data-muzi-outfit="detective"] {
  --companion-atlas: url("./pet-assets/detective-atlas.png");
  --companion-motion: url("./pet-assets/detective-motion.png");
}
.companion, #scout.companion {
  position: fixed; inset: 0 auto auto 0; z-index: 21;
  width: var(--companion-width); height: var(--companion-height);
  padding: 0; border: 0; border-radius: 20px; background: none;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.companion.hidden, body.gated .companion { display: none; }
.companion:focus-visible { outline: 2px dashed var(--blue); outline-offset: 3px; }
.companion-art {
  display: block; position: absolute; pointer-events: none;
  width: var(--companion-height); height: var(--companion-height);
  left: calc((var(--companion-width) - var(--companion-height)) / 2); top: 0;
  /* Per-frame windows align the generated atlas without duplicating image files. */
  background: var(--companion-atlas) 1.794% 4.545% / 300% 300% no-repeat;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 2px 2px #0003);
  animation: companion-breathe var(--breath-duration, 4.5s) ease-in-out var(--breath-delay, 0s) infinite;
}
[data-pose="1"] > .companion-art { background-position: 49.88% 4.545%; }
[data-pose="2"] > .companion-art { background-position: 96.77% 4.545%; animation: companion-speaking .46s steps(1) infinite; }
[data-pose="3"] > .companion-art { background-position: 2.333% 52.392%; }
[data-pose="4"] > .companion-art { background-position: 50.718% 52.512%; }
[data-pose="5"] > .companion-art { background-position: 99.103% 52.392%; }
[data-pose="6"] > .companion-art { background-position: 2.333% 97.129%; }
[data-pose="7"] > .companion-art { background-position: 49.821% 98.804%; }
[data-motion="true"] > .companion-art {
  background-image: var(--companion-motion);
  background-size: 371.282% 278.462%;
  clip-path: inset(4% 0 6.5% 0);
  animation: none;
}
[data-pose="9"] > .companion-art { background-position: 0.662% -1.408%; }
[data-pose="10"] > .companion-art { background-position: 34.026% -1.695%; }
[data-pose="11"] > .companion-art { background-position: 68.384% -1.552%; }
[data-pose="12"] > .companion-art { background-position: 102.457% -1.552%; }
[data-pose="13"] > .companion-art { background-position: -0.662% 49.167%; }
[data-pose="14"] > .companion-art { background-position: 33.648% 49.023%; }
[data-pose="15"] > .companion-art { background-position: 67.297% 49.023%; }
[data-pose="16"] > .companion-art { background-position: 101.938% 49.023%; }
[data-pose="17"] > .companion-art { background-position: 0.814% 101.220%; background-size: 358.416% 268.812%; clip-path: inset(4% 17% 6.5% 0); }
[data-pose="18"] > .companion-art { background-position: 33.908% 101.073%; background-size: 358.416% 268.812%; }
[data-pose="19"] > .companion-art { background-position: 67.864% 101.073%; background-size: 358.416% 268.812%; }
[data-pose="20"] > .companion-art { background-position: 101.580% 101.220%; background-size: 358.416% 268.812%; }
.companion.is-dragging { z-index: 26; cursor: grabbing; }
.companion.is-dragging > .companion-art, .companion.is-moving > .companion-art { animation: none; }
.companion:hover > .companion-art { animation-play-state: paused; }
.companion-paused .companion-art { animation: none; }
.companion .pet-bubble, body.has-private-doors .companion .pet-bubble {
  display: none; top: 0; left: 50%; right: auto; transform: translate(-50%, -100%);
  max-width: 180px; width: max-content; white-space: normal;
}
.companion:hover .pet-bubble:not(.hidden), .companion:focus-visible .pet-bubble:not(.hidden) { display: block; }
.companion-portrait {
  display: block; flex: 0 0 38px; height: 42px; border-radius: 12px;
  background: var(--raised) var(--companion-atlas) 12% 6% / 235px 235px no-repeat;
}
.scout-panel { right: auto; bottom: auto; margin: 0; z-index: 24; }
.scout-panel .pet-head strong { font-size: 16px; }
.scout-panel .pet-msg p { font-size: 14px; line-height: 1.75; }
.scout-panel #scoutQ { font-size: 16px; }
.scout.yard { right: calc(var(--companion-width) + 28px); }
.scout.murdoku-door { right: calc(var(--companion-width) + 28px); }
.companion-settings {
  width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 20px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); color: var(--paper); box-shadow: 0 16px 72px #0005;
}
.companion-settings::backdrop { background: #030b184d; }
.companion-settings-head { display: flex; align-items: center; gap: 8px; }
.companion-settings h2 { margin: 0; font-size: 17px; }
.companion-help { color: var(--dim); font-size: 13px; margin: 14px 0; }
.companion-settings > button {
  display: block; width: 100%; text-align: left; padding: 12px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--raised); cursor: pointer;
}
.companion-settings > button span { display: block; font-size: 14px; }
.companion-settings > button small { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }
.companion-settings > button:hover { border-color: var(--blue); }
.companion-settings > button[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 3px 0 var(--blue); }
.companion-settings > button[aria-pressed="true"] span::after { content: " · 已开启"; color: var(--blue); }
.companion-settings > button:disabled { opacity: .45; cursor: default; }
.companion-setting-status { font-size: 12px; color: var(--dim); min-height: 20px; margin: 12px 0 0; }
@keyframes companion-breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.987); } }
@keyframes companion-speaking { 0%,65% { background-position: 96.77% 4.545%; } 66%,100% { background-position: 1.794% 4.545%; } }
@media(max-width: 600px) { :root { --companion-width: 88px; --companion-height: 128px; } }
@media(prefers-reduced-motion: reduce) { .companion-art { animation: none !important; } }