.english .word {
    contain: layout style;
}

.english .char {
    margin-bottom: 6px;
    margin-right: 3px;
    contain: layout style;
    padding: 4px 1px;
    border: 1px solid #f7f7f7;
    border-radius: 5px;
}

/* 未打字字母顏色跟隨主題 */
.english .char .text,
.english .char .code {
    color: var(--theme-text);
}

.english .word .display.current,
.english .char.current {
    border: 1px solid var(--theme-accent, #365A92);
    box-shadow: 0 0 2px rgba(125, 125, 125, .7);
    z-index: 1000;
}

.english .article.compositor-cursor-active:not(.burst-typing) .typing-cursor-shell {
    border: 1px solid var(--theme-accent, #365A92);
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(125, 125, 125, .7);
    outline: none;
    animation: blinking-cursor 1s ease-in-out infinite;
    will-change: opacity;
}

.english .article.burst-typing.compositor-cursor-active .typing-cursor-shell {
    border: none;
    border-radius: 0;
    outline: 1px solid var(--theme-accent, #365A92);
    outline-offset: 0;
    box-shadow: none;
    animation: none;
    opacity: 1;
    will-change: auto;
    background: transparent;
}

.english .article.burst-typing .char.current {
    border: 1px solid #f7f7f7;
    box-shadow: none;
    z-index: auto;
}

.english .article.burst-typing .char.typed.correct {
    animation: none !important;
}

.english-container {
    overflow-y: hidden !important;
}

.font-size-small .english .char .code {
    font-size: 16px !important;
}

.font-size-normal .english .char .code {
    font-size: 22px !important;
}

.font-size-normal .english .char {
    margin-right: 0px;
    /* width: 12px; */
}

.font-size-large .english .char .code {
    font-size: 36px !important;
}


@keyframes wrong-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(2px);
    }
}

.english .char.wrong {
    background: #ff9eaf !important;
    color: #000 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 4px rgba(244, 67, 54, 0.35);
    animation: wrong-shake 120ms ease-out forwards;
}

@keyframes correct-flash {
    0% {
        opacity: 0.88;
    }

    100% {
        opacity: 1;
    }
}

.english .char.correct {
    background: #c7ffb8 !important;
    color: #000 !important;
    border-radius: 5px !important;
    animation: correct-flash 120ms ease-out forwards;
}

.english .article.burst-typing .char.correct {
    animation: none !important;
    transform: none !important;
}

.english .article.burst-typing .char.wrong {
    animation: none !important;
    transform: none !important;
}

.english .char.once-wronged.typed.correct {
    background: #fff4d4 !important;
    color: #000 !important;
    border-radius: 5px !important;
}

@media (prefers-reduced-motion: reduce) {

    .english .char.wrong,
    .english .char.correct {
        animation: none;
    }

    .char.current::after {
        animation: none;
        transform: scaleY(1);
    }

    .typing-cursor-shell {
        animation: none;
        opacity: 1;
        transition: none;
    }

    .typing-cursor-overlay {
        transition: none;
    }

    .article.burst-typing .char.current::after {
        animation: none;
        transform: scaleY(1);
    }
}