/* =====================================================================
   SUDOKA — стили игры «Шахматы»
   Адаптация с CodePen (jak_e) под тёплую палитру сайта.
   Все стили изолированы под .chs-root.
   ===================================================================== */

/* ---------- Локальные переменные ---------- */
.chs-root {
    --chs-board: min(520px, calc(100vw - 3rem), 62vh);
    --chs-tile: calc(var(--chs-board) / 8);
    --chs-border-w: calc(var(--chs-tile) / 60);
    --chs-light: #EFD9B4;
    --chs-dark: #C19660;
    --chs-edge: #A87A45;
    --chs-piece-white: #F8F3E6;
    --chs-piece-black: #3A2E2A;
    --chs-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

.chs-page { max-width: 700px; margin-inline: auto; }

.chs-head { text-align: center; margin-bottom: 1rem; }
.chs-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.chs-head p { color: var(--ink-muted); max-width: 46ch; margin: .35rem auto 0; }

/* ---------- Панель управления ---------- */
.chs-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: .9rem;
}
.chs-turn-indicator {
    font-weight: 800; font-size: 1rem; color: var(--ink);
    display: inline-flex; align-items: center; gap: .4rem;
}
.chs-turn-dot {
    width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink);
    display: inline-block; transition: background .3s;
}
.chs-turn-white .chs-turn-dot { background: #fff; }
.chs-turn-black .chs-turn-dot { background: var(--ink); }

.chs-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
}
.chs-ctrl-group {
    display: inline-flex; align-items: center; gap: .4rem;
}
.chs-ctrl-label {
    font-weight: 800; font-size: .82rem; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem;
}
.chs-chk, .chs-radio {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .88rem; font-weight: 700; color: var(--ink-muted);
    cursor: pointer; opacity: .55; transition: opacity .15s, color .15s;
}
.chs-chk:hover, .chs-radio:hover { color: var(--terracotta-d); }
.chs-chk input, .chs-radio input {
    position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.chs-chk:has(input:checked), .chs-radio:has(input:checked) {
    opacity: 1; color: var(--ink); font-weight: 800;
}
.chs-king-icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: middle; }

.chs-king-icon {
    --fill: var(--chs-piece-black);
    --stroke: transparent;
    fill: var(--fill);
    width: 1.2em; height: 1.2em;
    display: inline-block; vertical-align: middle;
}
.chs-king-icon.chs-white { --fill: #E8DCC8; --stroke: var(--ink); }
.chs-king-icon.chs-black { --fill: var(--ink); }

/* ---------- Обёртка доски ---------- */
.chs-board-wrap {
    display: flex; justify-content: center; align-items: center;
    perspective: 1000px;
}

/* ---------- Доска ---------- */
.chs-view {
    width: var(--chs-board); height: var(--chs-board);
    position: relative;
    border-radius: var(--radius-sm);
    box-shadow:
        0 0 0 calc(var(--chs-border-w) * 3) var(--chs-dark),
        0 0 0 calc(var(--chs-border-w) * 6) var(--chs-edge),
        var(--shadow-lg);
    overflow: hidden;
}

.chs-board-el {
    display: flex; flex-direction: column-reverse;
    height: 100%; width: 100%;
}
.chs-board-el .chs-row {
    display: flex; height: var(--chs-tile); width: 100%;
}

.chs-perspective-black .chs-board-el .chs-row { flex-direction: row-reverse; }
.chs-perspective-black .chs-board-el { flex-direction: column; }

/* ---------- Клетки ---------- */
.chs-tile {
    background-color: currentcolor;
    border: none;
    box-shadow: inset 0 0 0 var(--chs-border-w) rgba(255, 255, 255, .15);
    display: flex; flex-direction: column;
    height: var(--chs-tile);
    justify-content: space-between;
    padding: 0; position: relative;
    transition: background-color 350ms var(--chs-ease);
    width: var(--chs-tile);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Шахматная раскраска */
.chs-perspective-black .chs-board-el .chs-row:nth-child(even) .chs-tile:nth-child(odd),
.chs-perspective-black .chs-board-el .chs-row:nth-child(odd) .chs-tile:nth-child(even),
.chs-perspective-white .chs-board-el .chs-row:nth-child(even) .chs-tile:nth-child(even),
.chs-perspective-white .chs-board-el .chs-row:nth-child(odd) .chs-tile:nth-child(odd) {
    color: var(--chs-dark);
}
.chs-perspective-black .chs-board-el .chs-row:nth-child(even) .chs-tile:nth-child(even),
.chs-perspective-black .chs-board-el .chs-row:nth-child(odd) .chs-tile:nth-child(odd),
.chs-perspective-white .chs-board-el .chs-row:nth-child(even) .chs-tile:nth-child(odd),
.chs-perspective-white .chs-board-el .chs-row:nth-child(odd) .chs-tile:nth-child(even) {
    color: var(--chs-light);
}

/* ---------- Индикаторы ходов на клетках ---------- */
.chs-tile .chs-move-dot,
.chs-tile .chs-moves,
.chs-tile .chs-captures {
    box-sizing: border-box;
    display: flex; flex-wrap: wrap;
    height: var(--chs-tile); width: var(--chs-tile);
    justify-content: center;
    left: 0; top: 0;
    padding: calc(var(--chs-tile) * 0.025);
    position: absolute; z-index: 9;
    pointer-events: none;
}
.chs-tile .chs-move-dot,
.chs-tile .chs-moves {
    align-content: center; align-items: center;
}
.chs-tile .chs-captures {
    align-items: flex-start; justify-content: space-between;
}
.chs-tile:not(.chs-occupied) .chs-captures {
    align-items: center; justify-content: center;
}

/* SVG внутри индикаторов (--fill/--stroke используются спрайтом) */
.chs-tile > div > svg {
    --fill: var(--chs-edge);
    --stroke: transparent;
    box-sizing: border-box;
    height: var(--chs-dot-di);
    width: var(--chs-dot-di);
    fill: var(--fill);
}
.chs-tile .chs-move-dot svg {
    --chs-dot-di: calc(var(--chs-tile) / 4);
}
.chs-tile .chs-moves svg,
.chs-tile .chs-captures svg {
    --chs-dot-di: calc(var(--chs-tile) / 4);
    opacity: 0.4;
}

.chs-tile.chs-occupied .chs-captures svg { position: absolute; }
.chs-tile.chs-occupied .chs-captures svg:nth-child(1) { top: 0; left: 0; }
.chs-tile.chs-occupied .chs-captures svg:nth-child(2) { top: 0; right: 0; }
.chs-tile.chs-occupied .chs-captures svg:nth-child(3) { bottom: calc(var(--chs-dot-di) * 0.1); left: 0; }
.chs-tile.chs-occupied .chs-captures svg:nth-child(4) { bottom: calc(var(--chs-dot-di) * 0.1); right: 0; }
.chs-tile.chs-occupied .chs-captures svg:nth-child(5) { top: calc(50% - var(--chs-dot-di) * 0.55); left: 0; }
.chs-tile.chs-occupied .chs-captures svg:nth-child(6) { top: calc(50% - var(--chs-dot-di) * 0.55); right: 0; }
.chs-tile.chs-occupied .chs-captures svg:nth-child(7) { top: 0; left: calc(50% - var(--chs-dot-di) * 0.5); }
.chs-tile.chs-occupied .chs-captures svg:nth-child(8) { bottom: calc(var(--chs-dot-di) * 0.1); left: calc(50% - var(--chs-dot-di) * 0.5); }

/* Скрытие индикаторов в зависимости от состояния */
.chs-touching .chs-tile .chs-moves,
.chs-touching .chs-tile .chs-captures {
    display: none;
}
.chs-tile[class*="chs-highlight-"] .chs-moves,
.chs-tile[class*="chs-highlight-"] .chs-captures {
    display: none;
}

button.chs-tile:focus {
    outline: none; position: relative; z-index: 9;
}

/* ---------- Фигуры (слой поверх клеток) ---------- */
.chs-pieces {
    display: block;
    height: var(--chs-board); width: var(--chs-board);
    left: 0; top: 0;
    pointer-events: none;
    position: absolute; z-index: 99;
}

.chs-piece {
    --pos-col: 3.5;
    --pos-row: -1;
    --scale: 0;
    --transition-delay: 0ms;
    --transition-duration: 200ms;
    bottom: 0; display: block;
    height: var(--chs-tile); width: var(--chs-tile);
    position: absolute; left: 0;
    transform:
        translate(calc(var(--pos-col) * 100%), calc(var(--pos-row) * -100%))
        translateZ(0);
    transform-origin: 50% 50%;
    transition: all var(--transition-duration) var(--chs-ease) var(--transition-delay);
}
.chs-perspective-black .chs-piece {
    transform:
        translate(calc((7 - var(--pos-col)) * 100%), calc((7 - var(--pos-row)) * -100%))
        translateZ(0);
}

.chs-piece svg {
    --fill: var(--chs-piece-black);
    --stroke: var(--chs-edge);
    fill: var(--fill);
    display: block;
    height: calc(var(--chs-tile) * 0.666);
    width: calc(var(--chs-tile) * 0.666);
    left: 50%; top: 50%;
    position: absolute;
    stroke-linejoin: round;
    transform: translate(-50%, -50%) translateZ(0) scale(var(--scale));
    transform-origin: 50% 50%;
    transition:
        transform var(--transition-duration) var(--chs-ease),
        fill var(--transition-duration) var(--chs-ease);
}
.chs-piece svg.chs-white { --fill: var(--chs-piece-white); }
.chs-piece svg.chs-black { --fill: var(--chs-piece-black); }

/* Приглушенные фигуры не своего хода */
.chs-turn-white .chs-piece:not(.chs-highlight-capture) svg.chs-black,
.chs-turn-black .chs-piece:not(.chs-highlight-capture) svg.chs-white,
.chs-turn-black .chs-piece:not(.chs-can-move):not(.chs-can-capture) svg.chs-black,
.chs-turn-white .chs-piece:not(.chs-can-move):not(.chs-can-capture) svg.chs-white {
    opacity: 0.8;
}

/* ---------- Анимации подсветки фигур ---------- */
@keyframes chs-wobble {
    0%, 50%, 100% { transform: translate(-50%, -50%) translateZ(0) scale(1) rotate(0deg); }
    25% { transform: translate(-50%, -50%) translateZ(0) scale(1.1) rotate(-2deg); }
    75% { transform: translate(-50%, -50%) translateZ(0) scale(1.1) rotate(2deg); }
}

.chs-piece.chs-highlight-active svg {
    animation: chs-wobble 500ms linear infinite;
    --stroke: var(--sage);
}

.chs-piece.chs-highlight-capture svg {
    --stroke: var(--danger);
}

/* Подсветка клеток */
.chs-tile.chs-highlight-move {
    box-shadow: inset 0 0 0 calc(var(--chs-border-w) * 4) rgba(123, 158, 107, .5);
}
.chs-tile.chs-highlight-capture {
    box-shadow: inset 0 0 0 calc(var(--chs-border-w) * 4) rgba(178, 58, 72, .5);
}

/* ---------- Подсказка ---------- */
.chs-help {
    text-align: center; color: var(--ink-muted); font-size: .88rem;
    margin-top: 1rem; line-height: 1.5;
}

/* ---------- Финальное окно ---------- */
.chs-modal {
    position: fixed; inset: 0;
    background: rgba(58, 46, 42, .45);
    display: flex; align-items: center; justify-content: center;
    z-index: 999; visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .3s, visibility .3s;
    padding: 1rem;
}
.chs-modal.show { visibility: visible; opacity: 1; pointer-events: auto; }

.chs-result {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 92vw;
}
.chs-result-msg { font-size: 1.8rem; line-height: 1.15; margin-bottom: .4rem; }
.chs-result-msg.chs-win { color: var(--sage-d); }
.chs-result-msg.chs-lose { color: var(--danger); }
.chs-result-msg.chs-draw { color: var(--ink-muted); }
.chs-result-detail { color: var(--ink-muted); margin-bottom: 1.25rem; font-weight: 700; }
.chs-result .btn { margin-top: .25rem; }

/* ---------- Адаптив ---------- */
@media (max-width: 560px) {
    .chs-toolbar { flex-direction: column; align-items: stretch; }
    .chs-controls { justify-content: center; }
    .chs-ctrl-group { flex-wrap: wrap; justify-content: center; }
}