/* ============================================================
   JEUX — variables communes
   ============================================================ */
:root {
    --c4-red: #ff4757;
    --c4-red-dark: #c0392b;
    --c4-yellow: #ffc93c;
    --c4-yellow-dark: #a67c00;
    --c4-board: #4a69dd;
    --c4-board-dark: #3b53b0;
    --c4-hole: #eef2ff;
}

/* ============================================================
   HUB JEUX — boutons d'entrée
   ============================================================ */
.games-entry-btn,
.c4-entry-btn {
    border-color: var(--purple);
    background: linear-gradient(135deg, #f8f4ff, #f1e9ff);
}

/* ============================================================
   PUISSANCE 4 — plateau
   ============================================================ */
.c4-container {
    background: var(--card-bg);
    border-radius: 1.5rem;
    padding: clamp(0.75rem, 3vw, 1.5rem);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    backdrop-filter: blur(10px);
}

.c4-header {
    text-align: center;
    margin-bottom: 0.75rem;
}

.c4-title {
    color: var(--text);
    font-size: clamp(1.2rem, 5vw, 1.6rem);
}

.c4-score {
    margin-top: 0.25rem;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

.c4-turn {
    text-align: center;
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    font-weight: 700;
    padding: 0.6rem;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--primary-light);
    color: var(--text);
    transition: background 0.25s;
}

.c4-turn-p1 { background: #ffe0e3; color: var(--c4-red-dark); }
.c4-turn-p2 { background: #fff5d6; color: var(--c4-yellow-dark); }
.c4-turn-over { background: var(--success-light); color: #14713a; }

.c4-board {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(3px, 1.2vw, 8px);
    padding: clamp(4px, 1.5vw, 10px);
    max-width: 420px;
    margin: 0 auto;
    background: linear-gradient(160deg, var(--c4-board), var(--c4-board-dark));
    border-radius: 0.9rem;
    box-shadow: 0 10px 24px rgba(59, 83, 176, 0.35);
}

.c4-col {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: clamp(3px, 1.2vw, 8px);
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.c4-col:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Colonne non jouable : ni curseur ni indice de survol, mais l'apparence du
   plateau ne change pas (pas d'opacité, la grille reste lisible). */
.c4-col:disabled {
    cursor: default;
}

/* Sur écran étroit, les 7 colonnes se disputent la largeur : on rend au
   plateau les pixels des paddings horizontaux plutôt que de rétrécir les
   cellules, qui portent la cible tactile. Le gap reste à 3px : en dessous,
   la grille cesse de se lire comme un Puissance 4.
   Le seuil des 44px n'est pas atteignable sous ~382px de large : 7 colonnes
   à 44px réclament 308px, or un écran de 320px n'offre que 288px utiles hors
   safe-area. Mesuré après ce correctif : ~35px à 320px, 43px à 375px,
   45px à 390px. La colonne reste haute de 263px, sans zone morte. */
@media (max-width: 480px) {
    .c4-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .c4-board {
        padding: 4px;
        gap: 3px;
    }

    .c4-col {
        gap: 3px;
    }
}

.c4-cell {
    aspect-ratio: 1;
    background: var(--c4-hole);
    border-radius: 50%;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.22);
}

.c4-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow:
        inset 0 -3px 6px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Le rendu se fait depuis l'état complet du plateau : seul le dernier jeton
   posé porte cette classe, sinon tous les jetons rejoueraient leur chute. */
.c4-disc-drop {
    animation: c4Drop 0.35s cubic-bezier(0.5, 0, 0.75, 0.4);
}

.c4-p1 { background: radial-gradient(circle at 35% 30%, #ff8a93, var(--c4-red)); }
.c4-p2 { background: radial-gradient(circle at 35% 30%, #ffe6a1, var(--c4-yellow)); }

@keyframes c4Drop {
    from { transform: translateY(calc(var(--c4-fall, 1) * -115%)); }
    to   { transform: translateY(0); }
}

.c4-disc-win {
    animation: c4Pulse 0.9s ease-in-out infinite;
    box-shadow:
        0 0 0 3px #fff,
        0 0 16px 4px rgba(255, 255, 255, 0.9);
}

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

.c4-actions {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.c4-rematch-status {
    min-height: 1.25rem;
    text-align: center;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

/* Paysage court : l'habillage occupait 325px des 360px disponibles, dont 137px
   pour la seule pile d'actions. On la met en rangée et on resserre les marges
   verticales. Le plateau n'est volontairement PAS borné par la hauteur : un
   plateau de 6 rangées entièrement visible imposerait des colonnes d'environ
   28px, sous la cible tactile. La page défile donc encore verticalement en
   paysage — jamais horizontalement. */
@media (max-height: 500px) and (orientation: landscape) {
    .c4-container {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .c4-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 0.5rem;
    }

    /* .play-again-btn est en width:100% et partagé par d'autres écrans :
       on ne le dé-étire que dans la rangée d'actions du plateau, sinon il
       occupe une ligne entière et repousse « ← Retour » en dessous. */
    .c4-actions .play-again-btn {
        width: auto;
        padding: 0.75rem 1.25rem;
    }

    /* order: -1 remonte le statut au-dessus des boutons. Sans lui, sa
       flex-basis de 100% s'intercale entre « Nouvelle partie » et
       « ← Retour » et force le retour à la ligne que la rangée cherche
       justement à éviter. */
    .c4-rematch-status {
        flex-basis: 100%;
        min-height: 0;
        order: -1;
    }
}

/* ============================================================
   HOVER — pointeur fin uniquement (jamais sur tactile)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .games-entry-btn:hover,
    .c4-entry-btn:hover {
        border-color: var(--purple);
        transform: translateX(5px) scale(1.02);
        box-shadow: 0 8px 25px rgba(165, 94, 234, 0.35);
    }

    .c4-hint-p1 .c4-col:not(:disabled):hover { background: rgba(255, 71, 87, 0.30); }
    .c4-hint-p2 .c4-col:not(:disabled):hover { background: rgba(255, 201, 60, 0.35); }
}