.answer-area {
    position: relative;

    display: grid;
    gap: 10px;

    width: min(100%, 620px);

    margin:
        clamp(18px, 4vh, 34px)
        auto
        0;

    padding-inline: 12px;
}

.answer-row {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: clamp(6px, 1.4vw, 11px);

    min-height: 42px;
}

.answer-row .slot {
    display: inline-grid;
    place-items: center;

    width: clamp(28px, 7vw, 46px);
    aspect-ratio: 1 / 1;

    border: 0;
    border-bottom:
        2px solid
        rgba(244, 216, 158, 0.74);

    color: #ffffff;

    font-weight: 700;
    font-size:
        clamp(0.9rem, 3.6vw, 1.25rem);
}

.answer-row .slot.is-filled {
    border-bottom-color:
        rgba(120, 204, 255, 0.94);

    text-shadow:
        0 0 12px
        rgba(91, 184, 255, 0.72);
}

.current-word {
    position: relative;

    width: min(100%, 620px);

    margin:
        clamp(18px, 3vh, 28px)
        auto
        0;

    padding-inline: 12px;

    text-align: center;
}
