/* Small companion to Bootstrap — only things Bootstrap doesn't already style. */

/* Stops mobile Chrome/Brave from auto-inflating font size inside narrow
   flex/grid columns (stat tiles), which was wrapping text one letter per line. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.option-card {
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.option-card:hover {
    border-color: #0d6efd;
    background-color: #f8faff;
}

.option-card:has(input:checked) {
    border-color: #0d6efd;
    background-color: #e7f1ff;
    box-shadow: inset 0 0 0 1px #0d6efd;
}

.timer {
    font-family: monospace;
    font-size: 1.2rem;
    font-weight: 700;
}

.question-text {
    font-size: 1.15rem;
}

.ws-grid {
    display: grid;
    gap: 2px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.ws-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f5f7;
    border-radius: 3px;
    font-weight: 600;
    font-size: clamp(0.6rem, 2.2vw, 0.95rem);
    color: #333;
}

.ws-cell.ws-selecting {
    background: #cfe2ff;
}

.ws-cell.ws-found {
    background: #198754;
    color: #fff;
}

.ws-cell.ws-wrong {
    background: #f8d7da;
}

.word-badge.bg-success {
    text-decoration: line-through;
}