/* Checkers */

.ck-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    user-select: none;
}

.ck-modes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ck-mode {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ck-mode:hover { border-color: var(--color-primary-dark); }
.ck-mode.active {
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
}

.ck-status {
    font-size: 1.1rem;
    font-weight: 700;
    min-height: 1.5em;
    margin: 0;
    text-align: center;
}

.ck-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: min(420px, 92vw);
    aspect-ratio: 1;
    border: 3px solid #5a4327;
    border-radius: 4px;
    overflow: hidden;
}

.ck-cell {
    border: none;
    padding: 0;
    position: relative;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.ck-cell.light { background: #f0dcb4; }
.ck-cell.dark { background: #a97b4d; }

/* Pieces are inset circles so the square stays the whole hit area. */
.ck-cell.red::after,
.ck-cell.black::after {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.ck-cell.red::after { background: radial-gradient(circle at 35% 30%, #ef6a5c, #c0392b); }
.ck-cell.black::after { background: radial-gradient(circle at 35% 30%, #55555f, #26262e); }

/* A crown ring marks a king without needing a glyph. */
.ck-cell.king::before {
    content: '';
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    z-index: 2;
}

.ck-cell.movable { cursor: pointer; }

.ck-cell.movable::before {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: 4px;
    box-shadow: inset 0 0 0 3px rgba(255, 217, 61, 0.85);
}

/* Keep the crown visible on a king that can also move. */
.ck-cell.king.movable::before {
    inset: 30%;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.6);
}

.ck-cell.selected { box-shadow: inset 0 0 0 4px var(--color-primary-dark); }

/* Where the selected piece may land. */
.ck-cell.target::before {
    content: '';
    position: absolute;
    inset: 32%;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.8);
}

.ck-cell.last { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5); }

.ck-cell:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: -3px;
}

.state-result .ck-cell { pointer-events: none; }

.ck-score {
    display: flex;
    gap: 1.5rem;
    font-weight: 600;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

.ck-btn {
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ck-btn:hover { background: var(--color-primary-dark); }

.ck-mode:focus-visible,
.ck-btn:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}