.english .char {
    margin-bottom: 6px;
    margin-right: 3px;
}

.english .char {
    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);
    box-shadow: 0 0 2px rgba(125, 125, 125, .7);
    z-index: 1000;
}

.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 240ms ease-out forwards;
}

@keyframes correct-flash {
    0% {
        transform: translateY(0);
        opacity: 0.88;
    }

    25% {
        transform: translateY(-5px);
        opacity: 1;
    }

    65% {
        transform: translateY(1px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

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

.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;
    }
}