/* =========================================================================
   GAME KIT — общие переиспользуемые примитивы игровых полей.
   Строится поверх токенов ca-theme.css (грузится после него). Каждый класс —
   минимальный базовый рецепт; конкретная игра может переопределять
   размеры/геометрию локально поверх него (своим инлайновым <style>, который
   подключается позже и по каскаду выигрывает при той же специфичности).

   Словарь (см. аудит «Игровые примитивы платформы»):
   board · cell · tile · piece · socket · wall · hint · panel · card · chip · input
   ========================================================================= */

/* Контейнер поля целиком: рамка + фон + тень. */
.ca-board {
    background: var(--ca-field);
    border: 2px solid var(--ca-line);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-board-shadow);
}

/* Статичная клетка сетки — плоская, без выпуклости. */
.ca-cell {
    background: var(--ca-cell);
    border: 1px solid var(--ca-field-line);
}
.ca-cell.is-alt { background: var(--ca-cell-2); } /* шахматный узор */
.ca-cell.is-hoverable:hover { background: var(--ca-cell-hover); }

/* Подвижная плитка (число/символ/картинка) — выпуклая, приподнимается. */
.ca-tile {
    background: var(--ca-surface);
    border: 1px solid var(--ca-line-soft);
    border-radius: 10px;
    box-shadow: var(--ca-raise);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ca-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--ca-raise-hi);
    background: var(--ca-surface-2);
}

/* Фишка игрока — выпуклая сфера с бликом. Цвет — за игрой/игроком через
   style="--ca-piece-color: #...", не за темой (аналог уже был в quoridor
   как --pcolor — здесь канонизируем имя). */
.ca-piece {
    border-radius: 50%;
    background: var(--ca-piece-color, var(--ca-accent-ink));
    box-shadow: var(--ca-piece-shadow);
    position: relative;
}
.ca-piece::after {
    content: '';
    position: absolute; inset: 0; border-radius: 50%;
    background: var(--ca-piece-gloss);
}
.ca-piece:hover { box-shadow: var(--ca-piece-shadow-hi); }

/* Пустое посадочное место — вдавленная лунка (ждёт фишку/плитку/карту). */
.ca-socket {
    background: transparent;
    box-shadow: var(--ca-inset);
}

/* Стена/перегородка — два подтипа физики, см. токены в ca-theme.css. */
.ca-wall-raised {
    background: var(--ca-line);
    box-shadow: var(--ca-wall-raised-shadow);
    border-radius: 4px;
}
.ca-wall-flat {
    background: var(--ca-wall-flat);
    border-radius: 2px;
}

/* Подсветка допустимого хода — мягкий акцентный фон, не хардкод-цвет. */
.ca-hint {
    background: var(--ca-accent-soft);
}
.ca-hint-dot {
    background: var(--ca-accent);
    opacity: .55;
    border-radius: 50%;
}

/* Статус-бар/панель счёта — самый частый примитив платформы. */
.ca-panel {
    background: var(--ca-surface);
    border: 1px solid var(--ca-line-soft);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-raise);
    color: var(--ca-muted);
}
.ca-panel b, .ca-panel strong { color: var(--ca-text); }

/* Игральная/парная карта — выпуклая, hover-подъём, лицо/рубашка через модификаторы. */
.ca-card {
    background: var(--ca-surface);
    border: 1px solid var(--ca-line-soft);
    border-radius: 8px;
    box-shadow: var(--ca-raise);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ca-card:hover { transform: translateY(-3px); box-shadow: var(--ca-raise-hi); }

/* Числовая фишка-ставка/счёт — круглая пилюля, не сфера. */
.ca-chip {
    background: var(--ca-surface);
    border: 1px solid var(--ca-line);
    border-radius: 999px;
    box-shadow: var(--ca-raise);
}

/* Слот числового/буквенного ввода — вдавленный, с текстом-курсором. */
.ca-input {
    box-shadow: var(--ca-inset);
    color: var(--ca-faint);
}

/* Панели очерёдности хода (см. public/js/components/turn-panels.js) — общий
   для всех игр индикатор «кто ходит»: по одной панели на игрока, строки
   раскладываются JS-компонентом (<=3 — одна строка, иначе балансированные
   ряды). Активная панель отличается ФОНОМ (--gp-turn-active-bg, задаётся
   игрой через prop colors или дефолтную палитру компонента), не текстом.
   thinking-slow — редкое мягкое «подмигивание», если игрок долго не ходит. */
.gp-turn-panels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 16px;
}
.gp-turn-panels__row {
    display: flex;
    gap: 10px;
}
.gp-turn-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    text-align: center;
    border-radius: var(--ca-radius);
    background: var(--ca-surface);
    border: 1px solid var(--ca-line-soft);
    box-shadow: var(--ca-raise);
    color: var(--ca-muted);
    font-weight: 600;
    transition: background-color .3s ease, color .3s ease;
}
.gp-turn-panel.active {
    color: var(--ca-text);
    background: var(--gp-turn-active-bg, var(--ca-accent-soft));
}
.gp-turn-panel.winner {
    box-shadow: var(--ca-raise-hi);
}
.gp-turn-panel.thinking-slow {
    animation: gp-turn-wink 4s ease-in-out infinite;
}
@keyframes gp-turn-wink {
    0%, 85%, 100% { opacity: 1; }
    92% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .gp-turn-panel.thinking-slow { animation: none; }
}