/* KidChess - Детская яркая тема */

:root {
    /* Цвета доски */
    --board-light: #FFE66D;    /* Жёлтый */
    --board-dark: #4ECDC4;     /* Бирюзовый */

    /* Цвета фигур */
    --white-pieces: #FF6B6B;   /* Коралловый */
    --black-pieces: #6C5CE7;   /* Фиолетовый */

    /* Подсветка */
    --highlight-selected: #A8E6CF;   /* Мятный - выбранная клетка */
    --highlight-move: #81C784;       /* Зелёный - возможный ход */
    --highlight-capture: #FF8A80;    /* Красный - взятие */
    --highlight-last: rgba(255, 235, 59, 0.5); /* Последний ход */

    /* Фон */
    --background: #DFE6E9;
    --btn-bg: #74b9ff;
    --btn-active: #0984e3;

    /* Размеры */
    --cell-size: calc(100vw / 8);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--background);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px;
}

/* Контейнер доски */
#board-container {
    position: relative;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Шахматная доска */
#board {
    display: grid;
    grid-template-columns: repeat(8, var(--cell-size));
    grid-template-rows: repeat(8, var(--cell-size));
    max-width: 100vw;
    max-height: 100vw;
}

/* Клетка доски */
.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cell.light {
    background-color: var(--board-light);
}

.cell.dark {
    background-color: var(--board-dark);
}

/* Подсветка клеток */
.cell.selected {
    background-color: var(--highlight-selected) !important;
}

.cell.last-move {
    background-color: var(--highlight-last) !important;
}

/* Индикатор возможного хода */
.cell .move-hint {
    position: absolute;
    width: 35%;
    height: 35%;
    border-radius: 50%;
    background-color: var(--highlight-move);
    opacity: 0.8;
    pointer-events: none;
    animation: pulse 1s ease-in-out infinite;
}

.cell .capture-hint {
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    border: 6px solid var(--highlight-capture);
    opacity: 0.8;
    pointer-events: none;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Шахматные фигуры */
.piece {
    width: 80%;
    height: 80%;
    transition: transform 0.3s ease;
    pointer-events: none;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

.cell:active .piece {
    transform: scale(1.15);
}

/* Анимация хода */
.piece.moving {
    position: absolute;
    z-index: 100;
    transition: left 0.3s ease, top 0.3s ease;
}

/* Анимация взятия */
@keyframes capture {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); }
    100% { transform: scale(0); opacity: 0; }
}

.piece.captured {
    animation: capture 0.3s ease forwards;
}

/* Кнопки управления */
#controls {
    display: flex;
    gap: 20px;
}

.control-btn {
    width: 70px;
    height: 70px;
    border: none;
    border-radius: 50%;
    background: var(--btn-bg);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.control-btn:active {
    transform: scale(0.95);
    background: var(--btn-active);
}

.control-btn svg {
    width: 40px;
    height: 40px;
}

/* Индикатор "думания" AI */
#thinking-indicator {
    display: none;
    gap: 8px;
    padding: 15px 25px;
    background: white;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#thinking-indicator.visible {
    display: flex;
}

#thinking-indicator .dot {
    width: 12px;
    height: 12px;
    background: var(--black-pieces);
    border-radius: 50%;
    animation: thinking 1.4s ease-in-out infinite;
}

#thinking-indicator .dot:nth-child(2) {
    animation-delay: 0.2s;
}

#thinking-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes thinking {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Адаптивность для планшета/компьютера */
@media (min-width: 500px) {
    :root {
        --cell-size: 60px;
    }

    #board {
        max-width: 480px;
        max-height: 480px;
    }
}

@media (min-width: 700px) {
    :root {
        --cell-size: 80px;
    }

    #board {
        max-width: 640px;
        max-height: 640px;
    }
}