/* Crossword (Pages/Games/Crossword, wwwroot/js/crossword.js): a grid of one-letter inputs, black blocks between the words. */
.crossword { max-width: 40rem; }

.cw-active {
    min-height: 3.2rem;
    margin: .25rem 0 .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

/* The board has its own panel (a little lighter than the theme) with a frame and white cells, so it stays readable on a dark page; the empty fields show the panel. */
.cw-panel {
    padding: .75rem;
    border: 2px solid var(--game-frame);
    border-radius: .75rem;
    background: var(--game-panel);
    overflow-x: auto;
}

.cw-board {
    display: grid;
    margin: 0 auto;
    width: min(100%, calc(var(--cw-cols, 10) * 2.6rem));
    user-select: none;
    -webkit-user-select: none;
}

.cw-block { aspect-ratio: 1; }

.cw-cell {
    position: relative;
    aspect-ratio: 1;
    background: #fff;
    /* A real 2 px border (it is snapped to whole pixels, a fractional shadow is not) and a 1 px overlap with the neighbours:
       every line, inner or outer, is exactly 2 px thick. */
    border: 2px solid #212529;
    margin: -1px;
    box-sizing: border-box;
}
.cw-cell input {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #212529;
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(1rem, 4.6vw, 1.6rem);
    font-weight: 700;
    caret-color: transparent;
}
.cw-cell input:focus { outline: 0; }
.cw-num {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: .6rem;
    font-weight: 600;
    line-height: 1;
    color: #6c757d;
    pointer-events: none;
}
.cw-cell.cw-word { background: color-mix(in srgb, var(--bs-primary) 16%, #fff); }
.cw-cell.cw-current { background: color-mix(in srgb, var(--bs-primary) 42%, #fff); box-shadow: inset 0 0 0 3px var(--bs-primary); z-index: 1; }
.cw-cell.cw-wrong input { color: var(--bs-danger); }
.cw-cell.cw-wrong { background: color-mix(in srgb, var(--bs-danger) 14%, #fff); }
.cw-cell.cw-hinted input { color: var(--bs-success); }

.cw-clues { margin: 0; padding-left: 1.6rem; }
.cw-clues li { margin-bottom: .35rem; cursor: pointer; }
/* A letter shown in a cell of the static crossword on the Demo page (the game has an input there). */
.cw-letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #198754;
    font-size: clamp(.8rem, 1.6vw, 1.15rem);
    font-weight: 700;
    text-transform: uppercase;
}

/* Where the question comes from (a topic of the bank), under the clue. */
.cw-section { display: block; font-size: .72rem; font-weight: 400; line-height: 1.2; color: var(--bs-secondary-color); }
.cw-clues li.cw-clue-active { font-weight: 700; color: var(--bs-primary); }
.cw-clues li.cw-clue-done { text-decoration: line-through; color: var(--bs-secondary-color); }