.mascot-stage {
    position: fixed;
    inset: 0;
    z-index: 8;
    overflow: clip;
    pointer-events: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --mascot-width: 132px;
}

.mascot-stage[hidden] { display: none; }

.mascot {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--mascot-width);
    height: calc(var(--mascot-width) * 1.125);
    will-change: transform;
}

.mascot-grab {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 40%;
    background: none;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mascot-grab:active { cursor: grabbing; }
.mascot-grab:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }

.mascot-sprite {
    display: block;
    width: 100%;
    height: 100%;
    background-size: 400% 500%;
    background-repeat: no-repeat;
    transform-origin: 50% 88%;
    pointer-events: none;
}

.mascot-close {
    position: absolute;
    top: -8px;
    right: -6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--background);
    color: var(--ink);
    font: 20px/1 system-ui, sans-serif;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
}

.mascot:hover .mascot-close,
.mascot:focus-within .mascot-close {
    pointer-events: auto;
    opacity: 1;
}

.mascot-help {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mascot[data-state='idle'] .mascot-sprite { animation: mascot-breathe 3.8s ease-in-out infinite; }
.mascot[data-state='walk'] .mascot-sprite { transform: translateY(var(--step-lift, 0px)); }
.mascot[data-state='sketch'] .mascot-sprite { animation: mascot-think 1.4s ease-in-out infinite; }
.mascot[data-state='coffee'] .mascot-sprite { animation: mascot-think 2.2s ease-in-out infinite; }
.mascot[data-state='sleep'] .mascot-sprite { animation: mascot-breathe 3s ease-in-out infinite; }
.mascot-stage.is-paused .mascot-sprite { animation-play-state: paused; }

@keyframes mascot-breathe {
    50% { transform: translateY(-2px) scaleY(1.012); }
}
@keyframes mascot-think {
    50% { transform: rotate(-2deg) translateY(1px); }
}

@media (max-width: 767px) {
    .mascot-stage { --mascot-width: 104px; }
    .mascot-close { width: 24px; height: 24px; right: 0; }
}

.mascot-props {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mascot-ball {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: radial-gradient(circle at 30% 24%, #fff, #e0eaf2 68%, #adc1d3);
    box-shadow: inset -2px -3px 5px #6f8eac22, 0 2px 5px #56182b18;
    opacity: 0;
    will-change: transform;
}
.mascot-ball:nth-child(2) { background: radial-gradient(circle at 30% 24%, #fff, #f4dde1 68%, #d9a1b0); }
.mascot-ball:nth-child(3) { background: radial-gradient(circle at 30% 24%, #fff, #dbefe8 68%, #a7cdbf); }
.mascot-ball img { display: block; width: 62%; height: 62%; object-fit: contain; }
.mascot[data-state='juggle'] .mascot-close { right: -10px; }
@media (pointer: coarse) {
    .mascot-close { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .mascot-sprite { animation: none !important; }
}
@media (forced-colors: active) {
    .mascot-close { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
}
@media print {
    .mascot-stage { display: none; }
}