@font-face {
    font-family: 'Playwrite DE Grund';
    src: url('../fonts/playwrite_de_grund/playwrite-de-grund-v11-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

.dictation-text {
    font-family: 'Playwrite DE Grund', cursive;
    font-size: 1.4rem;
    line-height: 2.2;
}

/* Clickable word/phrase blocks inside a sentence */
.dictation-block {
    display: inline;
    border: 1.5px solid #ccc;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                color 0.2s ease, text-shadow 0.2s ease;
}

.dictation-block:hover {
    border-color: #888;
}

.dictation-block--active {
    border-color: #2e53e6;
    background-color: #b3c0ff;
}

/* Blur only the text inside blocks, not the borders */
.dictation-text.blurred {
    user-select: none;
}

.dictation-text.blurred .dictation-block {
    color: transparent;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.85);
}

.dictation-text.blurred .dictation-block * {
    color: transparent;
}

/* Card highlight during sequence playback */
.card.card--playing {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.04);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Recorder UI */
.btn-xs {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.2rem;
}

.recorder-controls {
    vertical-align: middle;
}

.sentence-number {
    font-size: 1rem;
    color: #ccc !important;
}

.dictation-text.blurred .no-blur {
    color: initial !important;
    text-shadow: none !important;
}

.dictation-text.blurred .no-blur .btn,
.dictation-text.blurred .no-blur .btn * {
    color: inherit !important;
    text-shadow: none !important;
}

.dictation-text.blurred .no-blur .btn-primary,
.dictation-text.blurred .no-blur .btn-primary * {
    color: #fff !important;
}