@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=IBM+Plex+Mono:wght@400;600&family=Anonymous+Pro&display=swap');

.dialogue-container {
    background: #e8f4ea;
    border: 2px solid #008080;
    border-left: 4px solid #008080;
    padding: 16px 20px;
    max-width: 600px;
    position: relative;
    font-family: 'IBM Plex Mono', 'Courier Prime', monospace;
    font-size: 16px;
    line-height: 1.65;
    color: #004d4d;
    box-shadow: 2px 2px 0 rgba(0, 128, 128, 0.3);
    margin: 1.5em 0;
}

.dialogue-container::before {
    content: '▶';
    position: absolute;
    left: 6px;
    top: 16px;
    color: #ff6b6b;
    font-size: 14px;
}

.dialogue-text {
    padding-left: 16px;
    margin: 0;
}

.glitch {
    animation: glitch 3s infinite;
}

@keyframes glitch {
    0%, 90%, 100% {
        transform: translate(0);
    }
    92% {
        transform: translate(-2px, 1px);
    }
    94% {
        transform: translate(2px, -1px);
    }
    96% {
        transform: translate(-1px, 1px);
    }
}