/* ════════════════════════════════════════════════════════
   BUDDY — a per-theme guide (official stickers: Paimon / Pom-Pom /
   En-Nah) docked bottom-right with a speech bubble, plus cameos that
   peek over the project art. With a mouse, each buddy follows the
   cursor in character; on touch it docks. Script: BUDDY. Hidden during intros.
═════════════════════════════════════════════════════════ */
.buddy { position: fixed; right: 18px; bottom: 14px; z-index: 50; pointer-events: none; }
.buddy[hidden], html.intro .buddy, html.intro .cameo { display: none; }
.buddy > * { pointer-events: auto; }
.buddy-pic { position: relative; width: 76px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer; }
.buddy-pic { touch-action: none; cursor: grab; }
.buddy-pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); -webkit-user-drag: none; user-select: none; }
.buddy[data-state="held"] .buddy-pic { cursor: grabbing; }
@keyframes struggle { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
@keyframes plop { 0% { scale: 1.1 .85; } 50% { scale: .92 1.08; } 100% { scale: 1; } }
.buddy-x {
  position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
  font: 700 13px/20px var(--body); color: var(--text); background: var(--bg); box-shadow: 0 0 0 1px var(--line); opacity: 0; transition: opacity .15s;
}
.buddy:hover .buddy-x, .buddy-x:focus-visible { opacity: 1; }
.buddy-say {                                                       /* floats above the sticker (below it while chasing) */
  position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content;
  max-width: min(260px, calc(100vw - 40px)); padding: 9px 13px; font: 500 .86rem/1.45 var(--body);
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); opacity: 0; translate: 0 6px; transition: opacity .2s, translate .2s;
}
.buddy-say.on { opacity: 1; translate: 0 0; }
.buddy-say:not(.on) { pointer-events: none; }
.buddy-say b { display: block; font: 700 .72rem var(--display); letter-spacing: .04em; color: var(--accent); margin-bottom: 2px; }
/* motion per character: Paimon floats, Pom-Pom sways, En-Nah hops */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="genshin"] .buddy-pic img { animation: float 2.6s ease-in-out infinite; }
  html[data-theme="hsr"] .buddy-pic img { animation: sway 3s ease-in-out infinite; transform-origin: 50% 90%; }
  html[data-theme="zzz"] .buddy-pic img { animation: hop .9s ease-in-out infinite; }
}
@keyframes float { 50% { translate: 0 -7px; } }
@keyframes sway { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes hop { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
.buddy { --lean: 9deg; } .buddy.left { --lean: -9deg; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="genshin"] .buddy.running .buddy-pic img { animation: fly .42s ease-in-out infinite; }
  html[data-theme="hsr"] .buddy.running .buddy-pic img { animation: waddle .3s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes fly { 0%, 100% { rotate: var(--lean); translate: 0 0; } 50% { rotate: var(--lean); translate: 0 -6px; } }
@keyframes waddle { 0%, 100% { rotate: -10deg; translate: 0 0; } 50% { rotate: 10deg; translate: 0 -5px; } }
.buddy.pop .buddy-pic { animation: pop .35s ease-out; }          /* on the button, so the image's float keeps running */
@keyframes pop { 40% { scale: 1.15; } }
/* ZZZ chase: the whole buddy is moved by transform from the script */
.buddy.chase { right: auto; bottom: auto; left: 0; top: 0; }
.buddy.chase .buddy-say { right: auto; left: 0; bottom: auto; top: calc(100% + 6px); }
.buddy.chase.low .buddy-say { top: auto; bottom: calc(100% + 6px); }
.buddy.chase.edge .buddy-say { left: auto; right: 0; }
html[data-theme="zzz"] .buddy.chase .buddy-pic img { animation: none; }   /* Run! sticker carries the motion */
/* per-state motion; after the per-character rules so it wins */
html[data-theme] .buddy[data-state="held"] .buddy-pic img { animation: struggle .2s linear infinite; filter: drop-shadow(0 14px 10px rgba(0,0,0,.3)); }   /* dangling */
html[data-theme] .buddy.plop .buddy-pic img { animation: plop .4s ease-out; }   /* one-shot, then the theme's float/sway resumes */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] .buddy[data-state="fidget"] .buddy-pic img { animation: look 3.4s ease-in-out infinite; }
  html[data-theme] .buddy[data-state="idle"] .buddy-pic img { animation: breathe 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes look { 0%, 30%, 100% { scale: 1 1; } 38%, 62% { scale: -1 1; } 70% { scale: 1 1; rotate: 6deg; } 78% { rotate: 0deg; } }
@keyframes breathe { 50% { scale: 1.04 .95; } }
.buddy.flip .buddy-pic img { scale: -1 1; }
/* per-theme bubbles, after each game's dialogue box */
html[data-theme="genshin"] .buddy-say { background: var(--cream); border-color: var(--gold); color: #495366; }
html[data-theme="genshin"] .buddy-say b { color: #b08a4a; }
html[data-theme="hsr"] .buddy-say { background: rgba(13,19,48,.94); border-color: var(--accent); border-radius: 2px; }
html[data-theme="zzz"] .buddy-say { background: #0b0b0c; border: 2px solid var(--accent); border-radius: 18px; font-style: italic; }
.cameo { position: absolute; z-index: 40; width: 64px; height: 64px; pointer-events: none; overflow: hidden; }
.cameo img { width: 100%; height: 100%; object-fit: contain; translate: 0 100%; }
@media (max-width: 640px) { .buddy-pic { width: 56px; height: 56px; } }