/* public/css/word-search.css — public-facing word-search solver.
 * Same design language as the crossword solver: grid on left, sidebar
 * with word list and status on the right, stacks on mobile. Uses the
 * existing CSS custom properties (--primary-color, --card-bg, etc.)
 * so light + dark themes both work without extra rules here.
 */

.ws-puzzle { margin: 16px 0; }

.ws-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 14px;
}
.ws-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    font-size: 14px;
    color: var(--text-color);
}
.ws-timer {
    padding: 4px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.04em;
}
.ws-progress strong { color: var(--primary-color); }
.ws-btn-reset {
    margin-left: auto;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 4px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.ws-btn-reset:hover { border-color: var(--primary-color); }
.ws-muted-note {
    margin: 0;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.4;
}

/* Layout — grid + sidebar */
.ws-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 768px) {
    .ws-layout { grid-template-columns: 1fr; }
}

/* Grid itself */
.ws-grid-host {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.ws-grid {
    display: grid;
    grid-template-columns: repeat(var(--ws-cols), minmax(0, 1fr));
    gap: 1px;
    background: #9ca3af;
    border: 2px solid #111827;
    aspect-ratio: 1;
    touch-action: none;   /* required so drag-to-select works on touch */
    user-select: none;
}
.ws-cell {
    position: relative;
    background: #fff;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 2.6vw, 20px);
    font-weight: 700;
    text-transform: uppercase;
    color: #111827;
    cursor: pointer;
    transition: background 80ms ease;
}
.ws-cell:hover { background: #eef2ff; }
/* While dragging, selected cells show this state */
.ws-cell.ws-cell-selecting { background: #93c5fd; }
/* Permanently marked — a cell is part of at least one found word */
.ws-cell.ws-cell-found     { background: #a7f3d0; }
/* Answers page: cells that are part of any placed word */
.ws-cell.ws-cell-placed    { background: #fde68a; }

/* SVG overlay draws colored lines across found words. */
.ws-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.ws-overlay line {
    stroke-width: 0.7;
    stroke-linecap: round;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* Dark theme */
[data-theme="dark"] .ws-grid { background: #475569; border-color: #0f172a; }
[data-theme="dark"] .ws-cell { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] .ws-cell:hover { background: #334155; }
[data-theme="dark"] .ws-cell.ws-cell-selecting { background: #2563eb; }
[data-theme="dark"] .ws-cell.ws-cell-found     { background: #065f46; color: #d1fae5; }
[data-theme="dark"] .ws-cell.ws-cell-placed    { background: #92400e; color: #fef3c7; }

/* Sidebar */
.ws-sidebar {
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.ws-sidebar-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 4px;
}
.ws-wordlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    font-size: 13px;
    line-height: 1.6;
}
@media (max-width: 768px) { .ws-wordlist { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
.ws-word {
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--text-color);
    letter-spacing: 0.03em;
}
.ws-word.ws-word-found {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--text-light);
    opacity: 0.65;
}

/* Answers page summary line */
.ws-answers-summary {
    margin-top: 14px;
    padding: 10px 14px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}
[data-theme="dark"] .ws-answers-summary { background: rgba(252, 211, 77, 0.12); color: #fcd34d; border-color: rgba(252, 211, 77, 0.35); }

/* Hub listing */
.ws-list { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ws-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.ws-list-item:hover { border-color: var(--primary-color); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ws-list-title { display: flex; flex-direction: column; text-decoration: none; color: var(--text-color); }
.ws-list-title strong { font-size: 14px; }
.ws-list-title small  { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.ws-list-answers { font-size: 12px; color: var(--text-light); text-decoration: none; }
.ws-list-answers:hover { color: var(--primary-color); }
.ws-list-empty { padding: 20px; text-align: center; color: var(--text-light); font-size: 14px; }

/* Nav strip */
.ws-nav {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px 10px;
    margin: 14px 0;
    padding: 8px 10px;
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}
.ws-nav a, .ws-nav span.ws-nav-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 4px;
    text-decoration: none;
}
.ws-nav a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.ws-nav-hub { flex: 1 1 auto; text-align: center; font-weight: 600; }
.ws-nav-toggle { background: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; font-weight: 600; }
.ws-nav-disabled { opacity: 0.4; cursor: not-allowed; }

/* Print */
@media print {
    .ws-controls, .ws-btn-reset, .ws-nav { display: none !important; }
    .ws-grid { border: 2px solid #000; background: #000; }
    .ws-cell { background: #fff !important; color: #000 !important; }
    .ws-cell.ws-cell-placed { background: #fff !important; }  /* clean print grid */
    .ws-overlay { display: none !important; }
    .ws-layout { grid-template-columns: 1fr 200px; }
}