/* public/css/crossword.css — public-facing crossword styling.
 * CSS Grid for the board (responsive), flex for clues, native <details>
 * for help menu. All dark-theme aware via the existing CSS vars.
 */

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

.xw-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;
}
.xw-active-clue {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.45;
    min-height: 22px;
}
.xw-active-clue em { color: var(--text-light); font-style: normal; }
.xw-active-arrow {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 4px;
    line-height: 1;
    vertical-align: -2px;
}
.xw-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.xw-btn-check, .xw-btn-help, .xw-btn-timer {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.xw-btn-check:hover { border-color: var(--primary-color); }
.xw-btn-help {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: 600;
}
.xw-btn-help:hover { background: var(--secondary-color, #1d4ed8); }
.xw-tokens-badge {
    padding: 6px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    margin-left: auto;
}
.xw-tokens-badge strong { color: var(--primary-color); }

.xw-result {
    padding: 14px 18px;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 15px;
}
.xw-share-result {
    margin-left: 12px;
    padding: 6px 12px;
    border: 1px solid #065f46;
    background: #fff;
    color: #065f46;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.xw-share-result:hover { background: #065f46; color: #d1fae5; }
[data-theme="dark"] .xw-share-result { background: transparent; color: #a7f3d0; border-color: #a7f3d0; }
[data-theme="dark"] .xw-share-result:hover { background: #a7f3d0; color: #052e16; }
[data-theme="dark"] .xw-result { background: rgba(16, 185, 129, 0.12); color: #a7f3d0; border-color: rgba(16, 185, 129, 0.35); }

/* Layout — grid left, clues right on desktop; stacked on mobile */
.xw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 768px) {
    .xw-layout { grid-template-columns: 1fr; }
}

/* The grid itself */
.xw-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 1px;
    background: #374151;
    border: 2px solid #111827;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1;
    user-select: none;
}
.xw-cell {
    position: relative;
    background: #fff;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xw-cell.xw-block { background: #111827; }
.xw-num {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 9px;
    font-weight: 600;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}
.xw-letter {
    font-size: clamp(14px, 4vw, 22px);
    font-weight: 600;
    color: #111827;
    text-transform: uppercase;
}
.xw-input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: clamp(14px, 4vw, 22px);
    font-weight: 600;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    color: #111827;
    caret-color: var(--primary-color);
}
.xw-cell.xw-highlight { background: #dbeafe; }
.xw-cell.xw-active    { background: #93c5fd; }
.xw-cell.xw-correct   { background: #a7f3d0; }
.xw-cell.xw-wrong     { background: #fecaca; }
.xw-cell.xw-revealed  { background: #fde68a; }
/* Overlay active/highlight on top of correct/wrong */
.xw-cell.xw-active.xw-correct   { background: #6ee7b7; }
.xw-cell.xw-highlight.xw-correct { background: #86efac; }

/* Dark theme — grid stays black & white like a newspaper crossword.
   Only the status tints (highlight / correct / wrong) shift to dark-mode
   variants; the base cell, block, numbers and letters all keep their
   light-theme colours so the grid looks like ink on paper. */
[data-theme="dark"] .xw-grid { background: #374151; border-color: #000; }
[data-theme="dark"] .xw-cell { background: #fff; color: #111827; }
[data-theme="dark"] .xw-cell.xw-block { background: #111827; }
[data-theme="dark"] .xw-num { color: #374151; }
[data-theme="dark"] .xw-letter { color: #111827; }
[data-theme="dark"] .xw-input  { color: #111827; caret-color: var(--primary-color); }
[data-theme="dark"] .xw-cell.xw-highlight { background: #dbeafe; }
[data-theme="dark"] .xw-cell.xw-active    { background: #93c5fd; }
[data-theme="dark"] .xw-cell.xw-correct   { background: #a7f3d0; }
[data-theme="dark"] .xw-cell.xw-wrong     { background: #fecaca; }
[data-theme="dark"] .xw-cell.xw-revealed  { background: #fde68a; }

/* Clues */
.xw-clues {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) { .xw-clues { grid-template-columns: 1fr; } }
.xw-clues h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 4px;
}
.xw-clues ol {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}
.xw-clue {
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-color);
    transition: background 100ms ease;
}
.xw-clue:hover { background: var(--card-hover-bg); }
.xw-clue.xw-clue-active {
    background: #dbeafe;
    font-weight: 500;
}
[data-theme="dark"] .xw-clue.xw-clue-active { background: #1e3a8a; }
.xw-clue-n { color: var(--text-light); margin-right: 2px; }
.xw-clue-len { color: var(--text-light); font-style: normal; font-size: 12px; }
.xw-clue-tier-medium .xw-clue-text { color: #b45309; }
.xw-clue-tier-easy   .xw-clue-text { color: #065f46; font-weight: 500; }

/* Help menu popover */
.xw-help-menu {
    position: absolute;
    z-index: 900;
    min-width: 240px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xw-help-menu button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}
.xw-help-menu button:hover:not(:disabled) { background: var(--card-hover-bg); }
.xw-help-menu button:disabled { opacity: 0.45; cursor: not-allowed; }
.xw-help-menu button small { color: var(--text-light); font-weight: 400; }

/* Crossword list on hub page */
.crossword-list { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.crossword-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;
}
.crossword-list-item:hover { border-color: var(--primary-color); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.crossword-list-title { display: flex; flex-direction: column; text-decoration: none; color: var(--primary-color); flex: 1 1 auto; }
.crossword-list-title:hover strong { text-decoration: underline; }
.crossword-list-title strong { font-size: 15px; }
.crossword-list-title small { font-size: 11px; color: var(--text-light); margin-top: 2px; font-weight: 400; }
.crossword-list-answers {
    font-size: 12px;
    color: var(--text-light);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    white-space: nowrap;
}
.crossword-list-answers::before { content: "→ "; }
.crossword-list-answers:hover { color: var(--primary-color); border-color: var(--primary-color); }

/* Print */
@media print {
    .xw-controls, .xw-btn-check, .xw-btn-help, .xw-btn-timer, .xw-help-menu, .xw-result { display: none !important; }
    .xw-grid { border: 2px solid #000; background: #000; }
    .xw-cell { background: #fff !important; }
    .xw-cell.xw-block { background: #000 !important; }
    .xw-input { color: transparent !important; }   /* leave empty for paper solving */
    .xw-puzzle-answers .xw-letter { color: #000 !important; }
    .xw-layout { grid-template-columns: 1fr 1fr; }
}