/* Vocabulary crossword: letter grid with typed inputs and a clue list. */

.cw-h2 { font-family: var(--gm-head); font-weight: 800; font-size: 1.1rem; margin-bottom: 0.75rem !important; }
.cw-own { margin-top: 1rem !important; color: var(--gm-muted); font-size: 0.9rem; }
.cw-own a { color: var(--gm-blue); font-weight: 700; }

.cw-play { display: grid; gap: 0.9rem; }
.cw-topic-name { font-size: 1rem; white-space: nowrap; }

.cw-active {
    min-height: 2.9rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--gm-tint);
    border: 1px solid var(--gm-line);
    line-height: 1.45;
}
.cw-active strong { color: var(--gm-blue); margin-right: 0.3rem; }
.cw-active em { color: var(--gm-muted); }

.cw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 1.75rem);
    align-items: start;
}
.cw-grid-wrap { display: grid; gap: 0.75rem; justify-items: center; min-width: 0; }

.cw-grid {
    --cols: 12;
    display: grid;
    gap: 2px;
    width: min(100%, calc(var(--cols) * 2.6rem));
    user-select: none;
}
.cw-block { aspect-ratio: 1; }
.cw-cell {
    position: relative;
    aspect-ratio: 1;
    border-radius: 5px;
    background: var(--gm-card);
    box-shadow: 0 0 0 1.5px #4f6283;
    transition: background-color 0.12s ease;
}
html.dark .cw-cell { box-shadow: 0 0 0 1.5px #6f86ad; }
.cw-cell.is-word { background: #dbe8ff; }
.cw-cell.is-active { background: #ffd970; }
html.dark .cw-cell.is-word { background: #22406f; }
html.dark .cw-cell.is-active { background: #7a5d10; }
.cw-cell.is-wrong input { color: #e5484d; }
.cw-cell.is-right input { color: #1f9d55; }
.cw-cell.is-revealed input { color: #e07a0c; }

.cw-cell input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gm-ink);
    text-align: center;
    text-transform: uppercase;
    font: 800 clamp(0.8rem, 3.2vw, 1.25rem)/1 'Mulish', sans-serif;
    caret-color: transparent;
    outline: none;
    cursor: pointer;
}
.cw-num {
    position: absolute;
    left: 2px;
    top: 1px;
    font: 800 clamp(0.42rem, 1.3vw, 0.6rem)/1 'Mulish', sans-serif;
    color: var(--gm-muted);
    pointer-events: none;
}

.cw-play.is-done .cw-cell { animation: cw-done 0.6s ease both; }
@keyframes cw-done { 40% { background: #b9f6ca; } }

.cw-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.cw-vi-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.cw-vi-toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--gm-blue); }

.cw-clues { display: grid; gap: 1rem; min-width: 0; }
.cw-h3 { font-size: 0.75rem !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-muted); margin-bottom: 0.35rem !important; }
.cw-clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.cw-clues li {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.45rem 0.6rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.4;
    font-size: 0.93rem;
}
.cw-clues li:hover { background: var(--gm-tint); }
.cw-clues li.is-on { background: var(--gm-card); border-color: var(--gm-blue); }
.cw-clue-n { font-weight: 800; color: var(--gm-blue); }
.cw-clue-vi { display: none; color: var(--gm-muted); font-style: italic; }
.show-vi .cw-clue-vi { display: block; }
.cw-clue-len { color: var(--gm-muted); font-size: 0.8rem; }

/* word list in the win dialog */
.cw-review { display: block; margin-top: 0.8rem; text-align: left; }
.cw-review > span { font-weight: 800; color: var(--gm-ink); }
.cw-review ul { margin: 0.3rem 0 0; padding-left: 1.1rem; max-height: 11rem; overflow-y: auto; columns: 2; column-gap: 1.2rem; font-size: 0.9rem; }

@media (max-width: 860px) {
    .cw-layout { grid-template-columns: minmax(0, 1fr); }
    .cw-review ul { columns: 1; }
}

/* full screen: bigger squares */
.gm.is-full .cw-grid { width: min(100%, calc(var(--cols) * 3.2rem)); }