.word-search-preview { margin-top: 9px; color: #71808c; font-size: 13px; }
.word-search-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.word-search-options select { width: 100%; }
.word-search-directions { margin: 18px 0 0; padding: 0; border: 0; }
.word-search-directions legend { padding: 0 0 8px; font-weight: 600; color: #233445; }
.word-search-checkbox { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #233445; font-weight: normal; }
.word-search-checkbox input { margin: 0; }
.word-search-secondary { background: #fff; color: #247da8; border: 1px solid #3c9ac7; }
.word-search-error { min-height: 18px; margin: 10px 0 0; color: #b42318; }
.word-search-result h2 { margin-top: 0; color: #233445; font-size: 22px; }

.word-search-grid-wrap { max-width: 100%; overflow-x: auto; padding: 4px 0 8px; }
.word-search-grid { border-collapse: collapse; margin: 0 auto; background: #fff; }
.word-search-grid td.word-search-cell {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid #dce5eb;
    text-align: center;
    vertical-align: middle;
    font-family: "Courier New", monospace;
    font-weight: 700;
    font-size: 14px;
    color: #233445;
    -webkit-user-select: none;
    user-select: none;
}
.word-search-grid td.word-search-cell-hit {
    background: #ffe6a3;
    color: #7a4a00;
    outline: 2px solid #d98c00;
    outline-offset: -2px;
}

.word-search-wordlist-block { margin-top: 22px; }
.word-search-wordlist-block h3 { margin: 0 0 8px; color: #233445; font-size: 17px; }
.word-search-wordlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin: 0; padding-left: 20px; color: #233445; }
.word-search-word-missing { color: #b42318; }
.word-search-word-missing-note { font-size: 12px; }

.word-search-unplaced { margin: 14px 0 0; padding: 10px 14px; border: 1px solid #f0c7a0; border-radius: 4px; background: #fff6ea; color: #8a4b00; }
.word-search-status { min-height: 20px; margin: 12px 0 0; color: #247da8; }
.word-search-result-actions { flex-wrap: wrap; }

.word-search-solution { margin-top: 22px; padding-top: 14px; border-top: 1px dashed #dce5eb; }
.word-search-solution h3 { margin: 0 0 6px; color: #233445; font-size: 17px; }
.word-search-solution-list { margin: 10px 0 0; padding-left: 20px; color: #233445; line-height: 1.6; }
.word-search-solution-list li + li { margin-top: 6px; }

.word-search-explanation { max-width: 760px; }
.word-search-explanation h3 { margin-top: 20px; color: #233445; font-size: 17px; }
.word-search-faq dt { margin-top: 12px; font-weight: 600; color: #233445; }
.word-search-faq dd { margin: 4px 0 0; color: #465461; }

@media (max-width: 700px) {
    .word-search-options { grid-template-columns: 1fr; }
    .word-search-wordlist { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .word-search-grid td.word-search-cell { width: 22px; height: 22px; min-width: 22px; font-size: 12px; }
}

@media print {
    .front-navbar, .front-footer, .front-breadcrumbs, .front-tools-sidebar, .front-tools-local-note,
    .word-search-form, .word-search-result-actions, .word-search-status, .word-search-explanation,
    .word-search-unplaced { display: none !important; }
    .front-tools-layout { display: block; }
    .word-search-result:not([hidden]) { display: block; border: 0; padding: 0; margin: 0; }
    .word-search-grid td.word-search-cell { border-color: #999; color: #000; }
    .word-search-grid td.word-search-cell-hit { background: #ddd !important; outline: 1px solid #000; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* "Print task" mode: solution must never be printable, even if it happens
       to be shown on screen. */
    body.word-search-print-task .word-search-solution { display: none !important; }
    body.word-search-print-task .word-search-grid td.word-search-cell-hit { background: none !important; outline: none !important; color: #000; }

    /* "Print key" mode: solution is forced visible regardless of the on-screen
       toggle state (the script also forces it via JS before calling print). */
    body.word-search-print-key .word-search-solution[hidden] { display: block !important; }
}