/* Word search (Pages/Games/WordSearch, wwwroot/js/wordsearch.js): a grid of letters; the buttons of the sudoku toolbar are reused. */
.wordsearch { max-width: 34rem; }

.ws-board {
    display: grid;
    margin: 1.25rem auto .75rem;
    width: min(calc(100% - 1.5rem), 32rem);
    aspect-ratio: 1;
    border: 3px solid #212529;
    border-radius: .5rem;
    overflow: hidden;
    /* White cells on a panel a little lighter than the theme, with a frame, so the board stays readable on a dark page. */
    background: #fff;
    color: #212529;
    box-shadow: 0 0 0 .75rem var(--game-panel);
    outline: 2px solid var(--game-frame);
    outline-offset: .75rem;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;   /* a finger drawing a line must not scroll the page */
}

.ws-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-right: 1px solid #adb5bd;
    border-bottom: 1px solid #adb5bd;
    font-size: clamp(.95rem, 4.6vw, 1.7rem);
    font-weight: 700;
    line-height: 1;
}
.ws-cell.ws-pick { background: color-mix(in srgb, var(--bs-primary) 38%, transparent); box-shadow: inset 0 0 0 2px var(--bs-primary); }
.ws-cell.ws-hint { background: color-mix(in srgb, var(--bs-warning) 55%, transparent); }
/* Found words keep one of a few soft colours, so crossing words stay readable. */
.ws-cell.ws-found-0 { background: color-mix(in srgb, #198754 35%, transparent); }
.ws-cell.ws-found-1 { background: color-mix(in srgb, #0d6efd 32%, transparent); }
.ws-cell.ws-found-2 { background: color-mix(in srgb, #fd7e14 38%, transparent); }
.ws-cell.ws-found-3 { background: color-mix(in srgb, #d63384 32%, transparent); }
.ws-cell.ws-wrong { background: color-mix(in srgb, var(--bs-danger) 25%, transparent); }

.ws-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem .6rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.ws-words li {
    padding: .2rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.ws-words li.ws-done { text-decoration: line-through; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }