/* Style général du fond et de la police */
body {
    background: #0d1b2a;
    color: #ffeccc;
    font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Board container alignment with moderate responsive spacing */
.center-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    margin-top: clamp(32px, 8vh, 120px);
}

/* Design tokens */
:root {
    --token-size: 66px;
    --token-border: 3.5px;
    --board-gap: 14px;
    --selector-gap: 8px; 
    --board-radius: 18px;
    --board-border: 3px;
}

/* Titre principal */
h1 {
    font-family: 'Press Start 2P', 'Fira Mono', 'Consolas', 'Menlo', monospace;
    font-size: 2.6em;
    letter-spacing: 0.08em;
    margin-top: 40px;
    margin-bottom: 18px;
    color: #ffeccc;
    text-shadow: 0 0 2px #fff2, 0 0 8px #00d9ff22, 0 0 18px #00d9ff22;
}

/* Plateau du jeu (tableau) */
.board {
    margin: 30px auto 0 auto;
    border-spacing: var(--board-gap);
    border-collapse: separate;
    background: #0d1b2a;
    margin: auto;
    table-layout: fixed;
    border-radius: var(--board-radius); 
    overflow: hidden; 
    border: var(--board-border) solid transparent; 
    box-shadow: inset 0 8px 14px rgba(0,0,0,0.25), inset 0 -6px 10px rgba(0,0,0,0.18);
    position: relative;
}

/* Wrapper to allow absolute positioning of selector over the board */
.board-wrap {
    position: relative;
    display: inline-block;
    margin-top: 8px; 
    max-width: 100vw;
    overflow-x: auto;
    border-radius: 16px;
    overflow: hidden; 
    box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
}

/* Cases du plateau */
.board td {
    width: 38px;
    height: 38px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    background: none;
    border-radius: 50%;
    border: none;
    position: relative;
    cursor: pointer;
}

/* Jetons */
.token-wrap {
    width: var(--token-size);
    height: var(--token-size);
    margin: 0 auto;
}
.token {
    width: var(--token-size);
    height: var(--token-size);
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: none;
    border: none;
}

/* Jeton rouge */
.red {
    background: #c44536;
    border: var(--token-border) solid #ffeccc;
}

/* Jeton jaune */
.yellow {
    background: #ffe066;
    border: var(--token-border) solid #ffeccc;
}

/* Cercles vides pour cases non jouées */
.board td:empty::after {
    content: '';
    display: block;
    width: var(--token-size); 
    height: var(--token-size); 
    margin: 0 auto;
    border-radius: 50%;
    border: var(--token-border) solid #274472;
    background: none;
}

/* Boutons de sélection de colonne */
.col-btn {
    width: 100%;
    height: 54px;
    font-size: 2.1em;
    background: #16213e;
    color: #ffeccc;
    border: 2.5px solid #274472;
    border-radius: 10px 10px 20px 20px;
    cursor: pointer;
    font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
    margin-top: 8px;
    margin-bottom: 0;
    transition: background 0.15s, color 0.15s;
    box-shadow: none;
}
.col-btn-red {
    background: #c44536;
    color: #ffeccc;
    border: 2.5px solid #ffeccc;
}
.col-btn-yellow {
    background: #ffe066;
    color: #16213e;
    border: 2.5px solid #ffeccc;
}
.col-btn:hover, .col-btn:focus {
    background: #274472;
    color: #ffe066;
}

/* Ligne des contrôles (nouvelle partie) */
.controls {
    margin: 48px 0 0 0;
}
.controls button {
    padding: 10px 26px;
    font-size: 1.3em;
    border-radius: 8px;
    border: 2.5px solid #274472;
    background: #16213e;
    color: #ffeccc;
    font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
    cursor: pointer;
    margin: 0 4px;
    box-shadow: none;
    transition: background 0.15s, color 0.15s;
}
.controls button:hover {
    background: #274472;
    color: #ffe066;
}

/* Jetons gagnants (effet rebond) */
.winner-token {
    box-shadow: none;
    animation: winner-bounce 0.7s cubic-bezier(.4,2,.6,.9) infinite alternate;
    z-index: 2;
}
@keyframes winner-bounce {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

/* Message de victoire */
.winner {
    font-size: 1.6em;
    color: #00e5ff;
    margin: 48px 0 0 0;
    font-family: 'Press Start 2P', monospace;
    animation: winner-flicker 1.2s infinite steps(2, end);
    letter-spacing: 0.06em;
    text-shadow: 0 0 2px #0ff, 0 0 10px #0ff3, 0 0 18px #0ff2;
    text-align: center;
}
@keyframes winner-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.87; }
}

/* Message de match nul */
.draw {
    font-size: 1.2em;
    color: #8ab6ff;
    margin: 48px 0 0 0;
    font-family: 'Press Start 2P', monospace;
    text-align: center;
    text-shadow: 0 0 2px #8ab6ff88;
}

/* Selector token displayed above columns */
.selector {
    position: absolute;
    left: 0; top: 0;
    border-radius: 50%;
    border: var(--token-border) solid #ffeccc; 
    width: var(--token-size); height: var(--token-size);  
    z-index: 5;
    pointer-events: none;
    transform: translate(-50%, -100%); 
}
.selector-red { background: #c44536; }
.selector-yellow { background: #ffe066; }

/* Color selector via wrapper player class */
.board-wrap.p1 #selector { background: #c44536; }
.board-wrap.p2 #selector { background: #ffe066; }

/* Animate the last played token to drop in */
.token-wrap.just-played { animation: drop-in 300ms ease-out; transform-origin: top center; }
@keyframes drop-in {
    0% { transform: translateY(-40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}


/* Highlight the selected column cells */
.board td.col-selected::after {

    border-color: #ffe066;
    box-shadow: 0 0 10px #ffe06655, 0 0 2px #ffeccc88 inset;
}

/* Player-specific selected column border color */
.board-wrap.p1 .board td.col-selected::after {
    border-color: #c44536;
    box-shadow: 0 0 10px #c4453655, 0 0 2px #ffeccc88 inset;
}
.board-wrap.p2 .board td.col-selected::after {
    border-color: #ffe066;
    box-shadow: 0 0 10px #ffe06655, 0 0 2px #ffeccc88 inset;
}

/* New selector row and token styles */
.selector-row {
    margin-bottom: 8px;
}
.selector-token {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eee 60%, #ccc 100%);
    border: 2px solid #bbb;
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.2s;
    box-shadow: 0 2px 4px #0002;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 1.5em;
    color: #274472;
}
.selector-arrow {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1;
    display: block;
    pointer-events: none;
    user-select: none;
    color: #274472;
    text-shadow: 0 1px 2px #fff8;
}
.p1 .selector-token:not(.disabled):hover,
.board-wrap.p1 .selector-token:not(.disabled):hover {
    background: radial-gradient(circle at 60% 40%, #ff4444 80%, #b00 100%);
    border-color: #b00;
    color: #fff;
}
.p2 .selector-token:not(.disabled):hover,
.board-wrap.p2 .selector-token:not(.disabled):hover {
    background: radial-gradient(circle at 60% 40%, #ffe066 80%, #bba600 100%);
    border-color: #bba600;
    color: #16213e;
}
.selector-token.disabled {
    opacity: 0.3;
    cursor: default;
    background: #eee;
    border-color: #ddd;
}

/* Skins */
.skin-classic .board { background: #1e3a5c; border-color: #274472; }
.skin-neon .board { background: #0d0d0d; border-color: #00ffcc; box-shadow: 0 0 0 2px rgba(0,255,204,0.25) inset, inset 0 8px 14px rgba(0,0,0,0.35); }
.skin-neon .token.red {
    background: #ff0066;
    border-color: #ff99cc;
}
.skin-neon .token.yellow {
    background: #ffcc00;
    border-color: #ffff99;
}
.skin-retro .board { background: #3b2f2f; border-color: #9e4b47; }
.skin-retro .token.red {
    background: #d9534f;
    border-color: #f7c6c6;
}
.skin-retro .token.yellow {
    background: #f0ad4e;
    border-color: #fbe8c6;
}

/* Animation de chute */
@keyframes drop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animation de tremblement */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    50% {
        transform: translateX(4px);
    }
    75% {
        transform: translateX(-2px);
    }
}

/* Applique l'animation de chute */
.token-wrap.just-played {
    animation: drop 0.4s ease-out, shake 0.3s ease-in-out 0.4s;
}

/* Animation de surbrillance pour la cellule */
.board td.highlight {
    animation: highlight 0.6s ease-in-out;
}

@keyframes highlight {
    0% {
        box-shadow: 0 0 10px #ffe066;
    }
    100% {
        box-shadow: none;
    }
}