/* AbildskovUndervisning - abildskovundervisning.dk */
/* Læs - Danske ord */

.addition-number-options.reading-five,
.addition-question-count-options.reading-five {
    grid-template-columns: repeat(5, 1fr);
}

.reading-menu-body {
    display: contents;
}

.addition-number-options.reading-two {
    grid-template-columns: repeat(2, 1fr);
}

.addition-number-options.reading-three {
    grid-template-columns: repeat(3, 1fr);
}

.reading-level-description {
    margin: 6px 0 0;
    text-align: center;
    color: #cccccc;
    font-size: 0.85rem;
}

.reading-board {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2vh, 18px);
    text-align: center;
    min-height: 0;
}

.reading-info {
    color: #ff6666;
    font-size: clamp(0.9rem, 3vh, 1.3rem);
}

.reading-word {
    min-height: 1.2em;
    max-width: 100%;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.2;
    font-size: clamp(2.2rem, min(20vh, 9vw), 9rem);
    overflow-wrap: anywhere;
}

.reading-time {
    min-height: 1.4em;
    color: #ffcc66;
    font-size: clamp(1.2rem, 5vh, 2.2rem);
    font-variant-numeric: tabular-nums;
}

.reading-hint {
    color: #cccccc;
    font-size: clamp(1rem, 3.4vh, 1.5rem);
}

.reading-result {
    gap: clamp(6px, 2vh, 14px);
}

.reading-times {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 420px);
    margin: 0 auto;
}

.reading-time-row {
    display: flex;
    justify-content: space-between;
    padding: clamp(6px, 1.6vh, 12px) 18px;
    border: 1px solid #770000;
    border-radius: 8px;
    background: #140404;
    color: #ffffff;
    font-size: clamp(1.1rem, 4vh, 1.8rem);
}

.reading-time-row.best {
    border-color: #22aa44;
    background: #06200c;
}

.reading-time-value {
    font-variant-numeric: tabular-nums;
}