.answer-area {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;

    width: min(100%, 640px);

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

    padding-inline: 12px;
}

.answer-row {
    display: flex;

    justify-content: center;
    align-items: center;

    gap:
        clamp(
            6px,
            1vw,
            10px
        );

    width: 100%;
}

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

    flex:
        0 0
        clamp(
            30px,
            5vw,
            44px
        );

    aspect-ratio: 1 / 1;

    border:
        1px solid
        rgba(221, 177, 88, 0.78);

    border-radius: 7px;

    background:
        rgba(3, 12, 23, 0.42);

    color: #ffffff;

    box-shadow:
        inset 0 0 12px
        rgba(67, 155, 216, 0.08);

    font-weight: 700;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.answer-row .slot.is-filled {
    border-color:
        rgba(98, 199, 255, 0.95);

    background:
        rgba(26, 95, 146, 0.42);

    box-shadow:
        0 0 16px
        rgba(75, 182, 255, 0.20);

    transform:
        translateY(-1px);
}

@media (max-width: 520px) {
    .answer-area {
        gap: 9px;
    }

    .answer-row {
        gap: 5px;
    }

    .answer-row .slot {
        flex-basis:
            clamp(
                26px,
                8vw,
                36px
            );
    }
}