/* =============================================================================
   WYKREŚLANKA / WORD SEARCH — game-specific styles
   Loaded together with games.css via $extraCss. Uses site design tokens.
   ============================================================================= */

.ws-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

/* ---------------- Grid ---------------- */

.ws-grid {
    display: grid;
    gap: 2px;
    flex: 0 1 560px;
    max-width: 560px;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 0.5rem;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.ws-grid[data-size="10"] { grid-template-columns: repeat(10, 1fr); }
.ws-grid[data-size="13"] { grid-template-columns: repeat(13, 1fr); }
.ws-grid[data-size="16"] { grid-template-columns: repeat(16, 1fr); }

.ws-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--border-radius-sm);
    background: var(--color-gray-100);
    color: var(--color-gray-800);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: clamp(0.7rem, 2.4vw, 1.1rem);
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ws-grid[data-size="13"] .ws-cell { font-size: clamp(0.62rem, 2vw, 1rem); }
.ws-grid[data-size="16"] .ws-cell { font-size: clamp(0.55rem, 1.7vw, 0.9rem); }

.ws-cell:hover {
    background: var(--color-gray-200);
}

.ws-cell:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
}

/* live drag selection / two-click anchor */
.ws-cell.is-sel,
.ws-cell.is-anchor {
    background: var(--color-primary);
    color: var(--color-white);
}

/* permanently found cells */
.ws-cell.is-found {
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* slight per-word variation so crossing found words stay readable */
.ws-cell.is-found.ws-f1,
.ws-cell.is-found.ws-f3,
.ws-cell.is-found.ws-f5 {
    background: var(--color-success);
    color: var(--color-white);
}

/* a found cell being re-selected still shows the live highlight */
.ws-cell.is-found.is-sel,
.ws-cell.is-found.is-anchor {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* ---------------- Word list panel ---------------- */

.ws-panel {
    flex: 1 1 220px;
    min-width: 180px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
}

.ws-panel-title {
    font-size: 1rem;
    color: var(--color-gray-900);
    margin-bottom: 0.6rem;
}

.ws-words {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.25rem 0.75rem;
}

.ws-word {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-gray-700);
    letter-spacing: 0.03em;
    padding: 0.15rem 0;
}

.ws-word.is-found {
    text-decoration: line-through;
    color: var(--color-gray-400);
    font-weight: 400;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 600px) {
    .ws-layout {
        flex-direction: column;
        gap: 1rem;
    }

    .ws-grid {
        flex-basis: auto;
        max-width: 100%;
        padding: 0.35rem;
        gap: 1px;
    }

    .ws-panel {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    .ws-words {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }

    .ws-word {
        font-size: 0.85rem;
    }
}