.buddy-teacher {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.guest-teacher.buddy-teacher {
    position: relative;
}

.teacher-wrap.buddy-teacher {
    position: absolute;
}

.buddy-teacher:focus-visible {
    outline: 3px solid rgba(32, 118, 184, .25);
    outline-offset: 5px;
    border-radius: 20px;
}

.buddy-teacher img {
    transform-origin: 50% 64%;
    will-change: transform;
}

.buddy-teacher:hover img,
.buddy-teacher.is-tickled img {
    animation: buddy-tickle .72s ease-in-out;
}

.buddy-speech {
    z-index: 2;
    width: max-content;
    max-width: 210px;
    white-space: normal;
    text-align: center;
}

.buddy-speech::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: -8px;
    width: 14px;
    height: 14px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    transform: rotate(45deg);
}

.guest-teacher .buddy-speech {
    position: absolute;
    top: 5%;
    left: 61%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    color: var(--brown);
    font: 700 12px/1.25 ui-sans-serif, system-ui;
    box-shadow: 0 7px 18px rgba(58, 102, 130, .1);
}

.teacher-wrap .buddy-speech {
    top: 22px;
    left: 118px;
    max-width: 190px;
}

@keyframes buddy-tickle {
    0%, 100% { transform: rotate(0) translateX(0) scale(1); }
    14% { transform: rotate(-2.4deg) translateX(-2px) scale(1.01); }
    28% { transform: rotate(2.8deg) translateX(3px) scale(1.015); }
    42% { transform: rotate(-2deg) translateX(-2px) scale(1.01); }
    58% { transform: rotate(2.2deg) translateX(2px) scale(1.012); }
    74% { transform: rotate(-1.2deg) translateX(-1px) scale(1.005); }
}

@media (max-width: 850px) {
    .teacher-wrap .buddy-speech {
        display: block;
        top: 15px;
        left: 94px;
        max-width: 160px;
        font-size: 10px;
    }
}

@media (max-width: 600px) {
    .guest-teacher .buddy-speech {
        top: 4%;
        left: 55%;
        max-width: 145px;
        font-size: 10px;
    }

    .teacher-wrap .buddy-speech {
        top: 8px;
        left: 76px;
        max-width: 138px;
        padding: 6px 8px;
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .buddy-teacher:hover img,
    .buddy-teacher.is-tickled img {
        animation: none;
    }
}