.mascot-dock {
  --mascot-width: 100px;
  --mascot-height: 138px;
  --mascot-peek: 89px;
  position: absolute;
  top: -61px;
  right: 18px;
  width: var(--mascot-width);
  height: var(--mascot-height);
  pointer-events: none;
}
.mascot-still, .mascot-art {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: var(--mascot-height);
  filter: drop-shadow(0 8px 15px #0007);
}
.mascot-still { object-fit: contain; }
.mascot-dock[data-ready] .mascot-still { visibility: hidden; }
.mascot-control {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--mascot-width);
  height: var(--mascot-peek);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #e8fff2;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mascot-control[hidden] { display: none; }
.mascot-control:focus-visible { outline: 2px solid #95fabf; outline-offset: 4px; }
.mascot-control:not([data-mode="dock"]) {
  height: var(--mascot-height);
  transform: translate3d(var(--mascot-x, 0px), var(--mascot-y, 0px), 0);
  will-change: transform;
}
.mascot-control[data-mode="drag"] { position: fixed; z-index: 8; cursor: grabbing; }
.mascot-control[data-mode="roll"] { pointer-events: none; outline: none; }
.mascot-art { pointer-events: none; }
.mascot-control[data-mode="roll"] .mascot-art { transform: scale(var(--mascot-scale, 1)); transform-origin: top left; }
.mascot-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mascot-hint {
  position: absolute;
  top: 15px;
  right: calc(100% + 10px);
  padding: 5px 9px;
  border: 1px solid #3d5b49;
  border-radius: 8px;
  background: #12251c;
  color: #bdfbd4;
  font-size: .75rem;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.mascot-control[data-mode="dock"]:is(:hover, :focus-visible) .mascot-hint {
  opacity: 1;
  transform: translateX(0);
}
.mascot-guide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mascot-puppet { transform-origin: 145px 250px; }
.mascot-eyes, .mascot-eye { transform-box: fill-box; transform-origin: center; }
.mascot-eyes { animation: mascot-blink 7.3s infinite; }
.mascot-wave-arm { transform-origin: 65px 259px; }
.mascot-wave-arm, .mascot-wave-body, .mascot-smile, .mascot-scan, .mascot-sparks,
.mascot-heart, .mascot-orbit, .mascot-signal, .mascot-signal-ring, .mascot-wheel { opacity: 0; }
.mascot-control[data-reaction] .mascot-puppet { animation: mascot-peek 1.5s cubic-bezier(.24,.7,.25,1) both; }
.mascot-control[data-reaction] .mascot-rest { animation: mascot-rest-pose 1.5s steps(1,end) both; }
.mascot-control[data-reaction] .mascot-wave-body { animation: mascot-wave-pose 1.5s steps(1,end) both; }
.mascot-control[data-reaction] .mascot-wave-arm { animation: mascot-wave 1.5s ease-in-out both; }
.mascot-control[data-reaction] .mascot-smile { animation: mascot-smile 1.5s ease both; }
.mascot-control[data-reaction="wink"] .mascot-wink { animation: mascot-wink .36s .43s ease both; }
.mascot-control[data-reaction="scan"] .mascot-scan { animation: mascot-scan .66s .29s ease-in-out both; }
.mascot-control[data-reaction="spark"] .mascot-sparks { animation: mascot-sparks .88s .25s ease-out both; }
.mascot-control[data-reaction="heart"] .mascot-heart {
  transform-origin: 267px 62px;
  animation: mascot-heart 1.04s .17s cubic-bezier(.2,.72,.3,1) both;
}
.mascot-control[data-reaction="orbit"] .mascot-orbit {
  transform-origin: 145px 121px;
  animation: mascot-orbit 1.13s .12s ease-in-out both;
}
.mascot-control[data-reaction="signal"] .mascot-eyes { animation: mascot-visor-swap 1.5s ease both; }
.mascot-control[data-reaction="signal"] .mascot-signal { animation: mascot-signal 1.5s ease both; }
.mascot-control[data-reaction="signal"] .mascot-signal-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: mascot-signal-bar .38s ease-in-out 2 alternate both;
}
.mascot-control[data-reaction="signal"] .mascot-signal-bar:nth-of-type(1) { animation-delay: .3s; }
.mascot-control[data-reaction="signal"] .mascot-signal-bar:nth-of-type(2) { animation-delay: .38s; }
.mascot-control[data-reaction="signal"] .mascot-signal-bar:nth-of-type(3) { animation-delay: .46s; }
.mascot-control[data-reaction="signal"] .mascot-signal-ring {
  transform-origin: 144px 19px;
  animation: mascot-signal-ring .49s .24s ease-out 2;
}
.mascot-control[data-wheel] :is(.mascot-smile, .mascot-wheel) { opacity: 1; }
.mascot-control[data-wheel] .mascot-puppet { transform-origin: 145px 407px; transform: rotate(var(--mascot-tilt, 0deg)); }
.mascot-wheel-spin { transform-origin: 145px 434px; transform: rotate(var(--mascot-spin, 0deg)); }
@keyframes mascot-blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.12); } }
@keyframes mascot-peek {
  0%,100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-50px) rotate(-5deg); }
  35%,76% { transform: translateY(-34px) rotate(-2deg); }
}
@keyframes mascot-rest-pose { 0%,88%,100% { opacity: 1; } 10% { opacity: 0; } }
@keyframes mascot-wave-pose { 0%,88%,100% { opacity: 0; } 10% { opacity: 1; } }
@keyframes mascot-wave {
  0%,9%,88%,100% { opacity: 0; transform: rotate(-106deg) scale(.78); }
  21% { opacity: 1; transform: rotate(-12deg); }
  34% { opacity: 1; transform: rotate(13deg); }
  46% { opacity: 1; transform: rotate(-11deg); }
  58% { opacity: 1; transform: rotate(12deg); }
  70% { opacity: 1; transform: rotate(-7deg); }
}
@keyframes mascot-smile { 0%,100% { opacity: 0; } 21%,80% { opacity: 1; } }
@keyframes mascot-wink { 0%,100% { transform: scaleY(1); } 45%,68% { transform: scaleY(.12); } }
@keyframes mascot-scan { 0% { opacity: 0; transform: translateY(-17px); } 25%,76% { opacity: .85; } 100% { opacity: 0; transform: translateY(22px); } }
@keyframes mascot-sparks { 0% { opacity: 0; transform: translate(-8px, 13px) scale(.96); } 27% { opacity: 1; } 100% { opacity: 0; transform: translate(13px,-37px) scale(1.03); } }
@keyframes mascot-heart {
  0% { opacity: 0; transform: translate(-8px,20px) scale(.45); }
  28% { opacity: 1; transform: translate(0,-2px) scale(1.12); }
  52%,72% { opacity: 1; transform: translate(4px,-10px) scale(.96); }
  100% { opacity: 0; transform: translate(9px,-34px) scale(.86); }
}
@keyframes mascot-orbit {
  0% { opacity: 0; transform: rotate(-19deg) scale(.74); }
  27%,67% { opacity: .96; }
  100% { opacity: 0; transform: rotate(22deg) scale(1.04); }
}
@keyframes mascot-visor-swap { 0%,17%,79%,100% { opacity: 1; } 27%,70% { opacity: 0; } }
@keyframes mascot-signal { 0%,17%,79%,100% { opacity: 0; } 27%,70% { opacity: 1; } }
@keyframes mascot-signal-bar { from { transform: scaleY(.55); } to { transform: scaleY(1.35); } }
@keyframes mascot-signal-ring { from { opacity: .86; transform: scale(.68); } to { opacity: 0; transform: scale(1.58); } }
@media (max-width: 800px) {
  .mascot-dock { --mascot-width: 85px; --mascot-height: 118px; --mascot-peek: 77px; top: -49px; }
}
@media (max-width: 680px) {
  .mascot-dock { --mascot-width: 84px; --mascot-height: 116px; --mascot-peek: 78px; top: -78px; right: 14px; }
}
@media (hover: none) {
  .mascot-control:not(:focus-visible) .mascot-hint { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-control[data-reaction] :is(.mascot-wave-arm, .mascot-wave-body, .mascot-smile) { opacity: 1; }
  .mascot-control[data-reaction] .mascot-rest { opacity: 0; }
}