.python-snake-character {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.google-snake-canvas {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.google-snake-body-shadow,
.google-snake-body,
.google-snake-head {
    pointer-events: auto;
    cursor: pointer;
}

/* ── Tongue Flicker Animation ── */
.google-snake-tongue {
    transform-origin: 5px 0px;
    animation: googleTongueFlick 1.4s infinite ease-in-out;
    filter: none !important;
}

@keyframes googleTongueFlick {
    0%, 70%, 100% { transform: scaleX(0.1); opacity: 0; }
    73%, 95% { opacity: 1; }
    75%, 87% { transform: scaleX(1.15) translateY(0.2px); }
    80%, 92% { transform: scaleX(0.85) translateY(-0.2px); }
}

/* ── Dialog Speech Bubble (Glassmorphism + Neon Border) ── */
.snake-dialog {
    position: absolute;
    /* Left and Top are updated dynamically by JS */
    left: 0;
    top: 0;
    transform: translate(-50%, -130%) scale(0.85);
    background: #0a1018;
    border: 1.5px solid #386bf6;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65), 0 0 18px rgba(56, 107, 246, 0.35);
    color: #fff;
    padding: 0.75rem 1.1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: 'JetBrains Mono', monospace;
    width: max-content;
    max-width: 240px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 15;
    line-height: 1.35;
}

.python-snake-character.is-hovered .snake-dialog {
    opacity: 1;
    transform: translate(-50%, -130%) scale(1);
}

.snake-dialog::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #386bf6;
}