/* Brief local asides float next to Kevin; the mascot keeps its transparent canvas. */
.kevin-play-bubble {
    position: fixed; z-index: 1101; box-sizing: border-box; margin: 0;
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: hidden;
    padding: 13px 16px; border: 1px solid #dae4ff35; border-radius: 17px 17px 5px 17px;
    background: #182840f2; color: #f0f5ff; box-shadow: 0 9px 28px #1b294b26;
    font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.5;
    overflow-wrap: anywhere; pointer-events: none; user-select: none;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    opacity: 0; transform: translateY(5px) scale(.98); transform-origin: right bottom;
    transition: opacity .22s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.kevin-play-bubble[data-visible=true] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style { .kevin-play-bubble[data-visible=true] { opacity: 0; transform: translateY(5px) scale(.98); } }
.kevin-play-bubble[hidden] { display: none !important; }
html.kevin-reduced-motion .kevin-play-bubble { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    html:not(.kevin-full-motion) .kevin-play-bubble { transition: none !important; transform: none !important; }
}
@media (max-width: 600px) { .kevin-play-bubble { padding: 11px 14px; font-size: 11px; } }