#reactionArea {
    width: 700px;
    height: 350px;
    margin: 25px auto;
    border: 2px solid var(--border-color);
    background: var(--surface-bg);
    color: var(--surface-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#reactionText {
    font-size: 28px;
    font-weight: bold;
}

.waiting {
    background: #aa3333 !important;
}

.ready {
    background: #33aa33 !important;
}

.too-soon {
    background: #cc9933 !important;
}

@media (max-width: 800px) {
    #reactionArea {
        width: 90%;
        height: 300px;
    }
}