/* =========================================
   CSS DARTBOARD & GAME PLAY - SCORE DARTS (Neon Steel)
   ========================================= */

/* ===================
   GRILLE DE SCORES (5+ joueurs)
   =================== */

/* 5 joueurs : ligne 1 = 3 joueurs, ligne 2 = 2 joueurs */
.score-grid[data-player-count="5"] {
    grid-template-columns: repeat(6, 1fr);
}
.score-grid[data-player-count="5"] .score-player:nth-child(-n+3) {
    grid-column: span 2;
}
.score-grid[data-player-count="5"] .score-player:nth-child(n+4) {
    grid-column: span 3;
}

/* 6 joueurs : 3 colonnes par ligne */
.score-grid[data-player-count="6"] {
    grid-template-columns: repeat(3, 1fr);
}

/* 7 joueurs : ligne 1 = 4 joueurs, ligne 2 = 3 joueurs */
.score-grid[data-player-count="7"] {
    grid-template-columns: repeat(12, 1fr);
}
.score-grid[data-player-count="7"] .score-player:nth-child(-n+4) {
    grid-column: span 3;
}
.score-grid[data-player-count="7"] .score-player:nth-child(n+5) {
    grid-column: span 4;
}

/* 8 joueurs : 4 colonnes par ligne */
.score-grid[data-player-count="8"] {
    grid-template-columns: repeat(4, 1fr);
}

/* ===================
   SCORE REMAINING SPÉCIFIQUE
   =================== */
.score-remaining.winner-score {
    color: var(--color-success);
    font-size: var(--text-xl);
}

.score-remaining.checkout-available::after {
    content: '*';
    color: var(--color-success);
    margin-left: var(--space-1);
    font-size: var(--text-2xl);
}

/* ===================
   CIBLE
   =================== */
.dartboard-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto var(--space-4);
    aspect-ratio: 1;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.dartboard-svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-dart-black);
    border: var(--border-w-thick) solid var(--color-border);
    box-shadow: var(--shadow-brutal);
}

/* Zones de la cible */
.dart-segment {
    cursor: pointer;
    transition: opacity var(--transition-default), filter var(--transition-default);
    stroke: var(--color-dart-wire);
    stroke-width: 1;
    touch-action: manipulation;
}

.dart-segment:hover {
    opacity: 0.8;
    filter: brightness(1.2);
}

.dart-segment:active {
    filter: brightness(0.9);
}

/* Couleurs standard de la cible (indépendantes du thème) */
.segment-black { fill: var(--color-dart-black); }
.segment-white { fill: var(--color-dart-cream); }
.segment-red { fill: var(--color-dart-red); }
.segment-green { fill: var(--color-dart-green); }
.segment-bull { fill: var(--color-dart-green); }
.segment-bullseye { fill: var(--color-dart-red); }
.segment-miss { fill: #374151; }

/* Textes sur la cible */
.dart-number {
    fill: var(--color-bg-white);
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: var(--font-bold);
    pointer-events: none;
    user-select: none;
}

/* ===================
   CHECK-OUT SUGGESTIONS
   =================== */
.checkout-suggestions {
    background: var(--color-success-bg);
    border: var(--border-w) solid var(--color-border);
    border-left: var(--border-w-heavy) solid var(--color-success);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.checkout-suggestions.hidden {
    display: none;
}

.checkout-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-success-text);
    margin-bottom: var(--space-3);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.checkout-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.checkout-option {
    background: var(--color-bg-white);
    border: var(--border-w) solid var(--color-border);
    padding: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-bold);
    text-align: center;
    white-space: nowrap;
}

/* ===================
   FINISH BUTTON
   =================== */
.finish-game-btn {
    flex: 1;
    background-color: var(--color-success);
    color: var(--color-bg-white);
    border: var(--border-w-thick) solid var(--color-border);
    box-shadow: var(--shadow-brutal-sm);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.finish-game-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-brutal);
}

.finish-game-btn:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-brutal-active);
}

.finish-game-btn.hidden {
    display: none;
}

/* ===================
   RESPONSIVE
   =================== */
@media (max-width: 640px) {
    .dartboard-container {
        margin-bottom: var(--space-2);
    }

    .dart-number {
        font-size: 20px;
    }

    .checkout-suggestions {
        padding: var(--space-2);
        margin-bottom: var(--space-2);
    }

    .checkout-title {
        font-size: var(--text-xs);
        margin-bottom: var(--space-2);
    }

    .checkout-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .checkout-option {
        padding: var(--space-1) var(--space-2);
        font-size: 0.65rem;
    }

    .finish-game-btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
}