/* =============================================================================
   Szachy (Chess) — game-specific styles (board grid, highlights, move list).
   Loaded together with games.css via $extraCss. Uses site design tokens for
   the chrome; the squares keep the classic wood palette, like the classic
   in-game palettes in games-2048.css / games-saper.css.
   ============================================================================= */

/* ---------------- Board grid ---------------- */

.sz-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    /* Viewport cap — see games-warcaby.css note (phone overflow guard). */
    max-width: min(560px, calc(100vw - 1.5rem));
    margin: 0.75rem auto;
    border: 3px solid var(--color-gray-400);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.sz-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    margin: 0;
    line-height: 1;
    font-size: clamp(1.5rem, 8vw, 2.75rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sz-cell--light { background: #f0d9b5; }
.sz-cell--dark  { background: #b58863; }

/* Piece colours: crisp glyphs on both square colours. */
.sz-p-w {
    color: #fdfdfd;
    text-shadow: 0 0 1px #333, 0 1px 2px rgba(0, 0, 0, 0.45);
}
.sz-p-b {
    color: #1c1a18;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* ---------------- Highlights ---------------- */

.sz-cell.sz-sel {
    box-shadow: inset 0 0 0 3px var(--color-primary);
}

.sz-cell.sz-last {
    box-shadow: inset 0 0 0 100vmax rgba(246, 200, 60, 0.35);
}

.sz-cell.sz-sel.sz-last {
    box-shadow: inset 0 0 0 3px var(--color-primary),
        inset 0 0 0 100vmax rgba(246, 200, 60, 0.35);
}

/* Legal quiet move: dot marker. */
.sz-cell.sz-target::after {
    content: '';
    position: absolute;
    width: 26%;
    height: 26%;
    border-radius: 50%;
    background: rgba(20, 60, 20, 0.35);
    pointer-events: none;
}

/* Legal capture: ring around the victim. */
.sz-cell.sz-target-cap::after {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 3px solid rgba(160, 30, 30, 0.65);
    pointer-events: none;
}

.sz-cell.sz-check {
    background: radial-gradient(circle at 50% 50%,
        rgba(220, 40, 40, 0.75) 0%, rgba(220, 40, 40, 0.35) 60%, transparent 100%);
}

.sz-cell--light.sz-check { background-color: #f0d9b5; }
.sz-cell--dark.sz-check  { background-color: #b58863; }

/* ---------------- Difficulty selector ---------------- */

.sz-diffs {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sz-diff-btn--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------------- Captured pieces rows ---------------- */

.sz-captured {
    max-width: 560px;
    margin: 0.35rem auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-height: 1.6rem;
}

.sz-captured-label {
    font-size: 0.82rem;
    color: var(--color-gray-500);
    white-space: nowrap;
}

.sz-captured-list {
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--color-gray-700);
}

/* ---------------- Move list ---------------- */

.sz-moves-wrap {
    max-width: 560px;
    margin: 1rem auto 0;
}

.sz-moves-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-gray-700);
    margin: 0 0 0.35rem;
}

.sz-moves {
    max-height: 180px;
    overflow-y: auto;
    margin: 0;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-gray-700);
}

.sz-moves li::marker {
    color: var(--color-gray-400);
}

.sz-best-line {
    margin-top: 0.75rem;
    text-align: center;
}

/* ---------------- Small screens ---------------- */

@media (max-width: 600px) {
    .sz-captured {
        padding: 0 0.25rem;
    }

    .sz-moves {
        max-height: 140px;
    }
}