/* ==========================================================================
   PUISSANCE 4 — plateau natif (Game Hub)
   --------------------------------------------------------------------------
   Deux images fournies par le propriétaire, utilisées telles quelles :
     `assets/images/games/connectfour_board.png`  462×396, 7 colonnes × 6
       rangées de cases de 66 px, trous TRANSPARENTS de 55 px centrés.
     `assets/images/games/connectfour_tokens.png` 112×56, deux jetons de 56 px
       côte à côte (jaune à gauche, rouge à droite).

   Conséquence : le plateau n'est PAS découpé en 42 images. L'image est posée en
   fond, une grille CSS 7 × 6 se superpose, et chaque jeton est un disque de
   55/65 = 84,6 % de la case qui apparaît dans le trou. Une seule variable,
   `--cf-cell`, dimensionne tout (largeur, hauteur, jetons, animation).

   La scène suit le contrat commun : `barre / sièges / plateau 1fr / actions`,
   la rangée d'action étant une RANGÉE de la grille et jamais un `fixed`.
   ========================================================================== */

.cf-stage {
    --cf-cell: 44px;
    --cf-line: rgba(255, 255, 255, .10);
    --cf-soft: rgba(255, 255, 255, .74);
    --cf-dim: rgba(255, 255, 255, .46);
    --cf-blue: #05a8f3;
    --cf-yellow: #f5c518;
    --cf-red: #e0453e;

    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    box-sizing: border-box;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    width: 100%;
    padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px);
    color: #f2f6ff;
    font-size: 14px;
    font-family: inherit;
    background-color: #0a1020;
    background-image:
        radial-gradient(120% 80% at 50% -10%, rgba(5, 168, 243, .20) 0%, transparent 62%),
        radial-gradient(90% 70% at 50% 110%, rgba(245, 197, 24, .12) 0%, transparent 64%),
        linear-gradient(rgba(12, 18, 32, .92), rgba(7, 11, 22, .97));
    border-radius: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* `game.css` réserve `#game-area { padding-top: 175px }` : on cible ID + classe
   pour gagner le combat de spécificité, sinon le plateau flotte sous le header. */
body.in-game #game-area.cf-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    position: relative;      /* la couche StageFeed est en position absolue */
}

body.in-game #view-game.cf-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* Bouton journal du socle : 44 px pour le doigt. */
.cf-host .sf-toggle {
    width: 44px;
    height: 44px;
    font-size: 18px;
    top: 4px;
    right: 4px;
    border-radius: 11px;
}

/* ------------------------------------------------------------------ barre */

.cf-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Le bouton journal occupe le coin haut-droit : on lui réserve sa place. */
    padding-right: 52px;
    min-height: 44px;
}

.cf-turn {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--cf-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-turn.is-mine {
    color: #ffe08a;
    text-shadow: 0 0 14px rgba(245, 197, 24, .45);
}

.cf-chip {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--cf-line);
    color: var(--cf-dim);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ sièges */

.cf-seats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
}

.cf-seat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--cf-line);
    transition: border-color .18s ease, background-color .18s ease;
}

.cf-seat.is-me {
    background: rgba(5, 168, 243, .08);
}

/* Halo du tour : on doit voir « c'est à lui » sans lire (règle du 25/10). */
.cf-seat.is-turn {
    border-color: rgba(245, 197, 24, .55);
    background: rgba(245, 197, 24, .10);
    animation: cf-halo 1.9s ease-in-out infinite;
}

.cf-seat-disc {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-image: url('../images/games/connectfour_tokens.png');
    background-repeat: no-repeat;
    background-size: 200% 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.cf-seat-disc[data-color="yellow"] { background-position: 0% 0; }
.cf-seat-disc[data-color="red"]    { background-position: 100% 0; }

.cf-seat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.cf-seat-name {
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-seat-meta {
    font-size: 12px;
    color: var(--cf-dim);
    white-space: nowrap;
}

.cf-seat-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #ffe08a;
    white-space: nowrap;
}

/* ----------------------------------------------------------------- plateau */

.cf-table {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.cf-boardwrap {
    width: calc(var(--cf-cell) * 7);
    height: calc(var(--cf-cell) * 6);
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
}

.cf-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    width: 100%;
    height: 100%;
    /* Le fond est l'image fournie, étirée à la grille : la géométrie des trous
       (centres à 32 + 66·i, diamètre 55) est exactement celle des cases. */
    background-image: url('../images/games/connectfour_board.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border-radius: calc(var(--cf-cell) * .22);
    overflow: hidden;
    touch-action: manipulation;
}

.cf-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    /* Cible tactile : la case entière, jamais une pastille de 22 px. */
}

.cf-cell.is-playable {
    cursor: pointer;
}

/* Colonne survolée : on éclaire toute la colonne, pas seulement la case. */
.cf-cell.is-target {
    background: rgba(255, 255, 255, .08);
}

/* Case d'arrivée : anneau pointillé, la promesse du coup. */
.cf-cell.is-ghost::before {
    content: "";
    position: absolute;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .55);
    box-sizing: border-box;
}

.cf-disc {
    width: 84.6%;
    height: 84.6%;
    border-radius: 50%;
    background-image: url('../images/games/connectfour_tokens.png');
    background-repeat: no-repeat;
    background-size: 200% 100%;
    will-change: transform;
}

.cf-disc[data-color="yellow"] { background-position: 0% 0; }
.cf-disc[data-color="red"]    { background-position: 100% 0; }

/* Dernier coup : anneau discret, utile quand plusieurs pions se ressemblent. */
.cf-cell.is-last .cf-disc {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}

/* Alignement gagnant : pulsation, jamais un simple contour (on doit le voir
   du coin de l'œil). */
.cf-cell.is-win .cf-disc {
    box-shadow: 0 0 0 3px #fff, 0 0 18px 6px rgba(255, 255, 255, .55);
    animation: cf-win-pulse .9s ease-in-out infinite alternate;
}

/* Chute : départ au-dessus de la colonne, arrivée dans la case. Le nombre de
   rangées traversées est posé par le client (`--cf-drop-rows`). */
.cf-disc.is-dropping {
    animation: cf-drop 430ms cubic-bezier(.34, 1.24, .64, 1) both;
}

@keyframes cf-drop {
    from {
        transform: translateY(calc(var(--cf-drop-rows, 6) * var(--cf-cell) * -1.05));
    }
    to {
        transform: translateY(0);
    }
}

@keyframes cf-win-pulse {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

@keyframes cf-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .0); }
    50%      { box-shadow: 0 0 0 3px rgba(245, 197, 24, .22); }
}

/* ----------------------------------------------------------------- actions */

.cf-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.cf-hint {
    font-size: 13px;
    color: var(--cf-dim);
    line-height: 1.35;
}

.cf-hint.is-wide {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07);
    color: #f2f6ff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 650;
    cursor: pointer;
    transition: transform .12s ease, background-color .18s ease, border-color .18s ease;
}

.cf-btn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.cf-btn:active {
    transform: scale(.97);
}

.cf-btn.is-primary {
    background: linear-gradient(180deg, #22b6f5, #0592d6);
    border-color: rgba(5, 168, 243, .65);
    color: #04121d;
}

.cf-btn.is-ghost {
    margin-left: auto;
}

/* ------------------------------------------------------------ fin de partie */

/* L'annonce de fin vit SOUS le plateau, dans la rangée d'action : aucune
   superposition, donc le pion gagnant, sa chute et la ligne qui pulse restent
   visibles. Une modale par-dessus le plateau avait exactement l'effet inverse
   de celui recherché : on apprenait la victoire sans avoir vu le coup. */
.cf-end {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    animation: cf-end-in 260ms cubic-bezier(.23, 1, .32, 1) both;
}

.cf-end-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cf-end-title {
    font-size: 15.5px;
    font-weight: 750;
    letter-spacing: -.01em;
    color: #ffe08a;
}

.cf-end-sub {
    font-size: 12.5px;
    color: var(--cf-dim);
}

.cf-end-actions {
    display: flex;
    gap: 8px;
}

.cf-end-actions .cf-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
    font-size: 14px;
}

.cf-end-actions .cf-btn.is-ghost {
    margin-left: 0;      /* la règle générale pousse « Quitter » à droite */
}

@keyframes cf-end-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------- bandeau « à vous de jouer » */

/* Le socle pose `#turn-badge` en `position: fixed` à 46 % de la hauteur, donc
   au MILIEU du plateau : sur une grille de 6 rangées, c'est la 3ᵉ rangée qui
   disparaît pendant 2 secondes. Ici le bandeau remonte au-dessus de la grille,
   centré sur elle — position calculée par `fitBoard()`.
   L'animation du socle est remplacée, pas seulement décalée : ses keyframes
   imposent `translate(-50%, -50%)` et le recentreraient verticalement. */
body.cf-game .turn-badge {
    top: var(--cf-badge-top, 96px);
    left: var(--cf-badge-left, 50%);
    transform: translate(-50%, 0);
    padding: 7px 18px;
    font-size: 14.5px;
}

body.cf-game .turn-badge.is-flash {
    animation: cf-turn-pop 2.2s cubic-bezier(.23, 1, .32, 1) forwards;
}

@keyframes cf-turn-pop {
    0%   { opacity: 0; transform: translate(-50%, -8px) scale(.86); }
    9%   { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
    18%  { transform: translate(-50%, 0) scale(1); }
    74%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -6px) scale(.98); }
}

/* ---------------------------------------------------------------- erreurs */

.cf-error,
.cf-waiting {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100% - 24px));
    padding: 16px;
    border-radius: 14px;
    background: rgba(20, 12, 16, .96);
    border: 1px solid rgba(224, 69, 62, .5);
    color: #ffe9e6;
    text-align: center;
    font-size: 14px;
}

.cf-waiting {
    border-color: rgba(255, 255, 255, .16);
    color: var(--cf-soft);
    background: rgba(12, 18, 32, .92);
}

.cf-error-msg {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    word-break: break-word;
}

/* ------------------------------------------------------- écrans courts / paysage */

@media (max-height: 620px) {
    .cf-stage {
        gap: 4px;
        padding: 4px 4px calc(env(safe-area-inset-bottom) + 4px);
    }

    .cf-bar { min-height: 36px; }

    .cf-seat { padding: 5px 8px; }
    .cf-seat-disc { width: 22px; height: 22px; }
    .cf-seat-name { font-size: 13px; }
    .cf-seat-meta { display: none; }   /* le compteur de pions n'est pas une action */

    .cf-actions { min-height: 44px; }
    .cf-btn { min-height: 40px; }       /* jamais sous 40 px, même en paysage */
}

/* En paysage, le plateau est borné par la hauteur : borné par la hauteur, il ne
   faisait que 30 px de case alors que la moitié de la largeur restait vide.
   On place donc les informations dans une COLONNE à droite et le plateau prend
   toute la hauteur restante — mesuré : 30 px → 56 px de case à 844×390. */
@media (orientation: landscape) and (max-height: 620px) {
    .cf-stage {
        grid-template-columns: minmax(0, 1fr) 196px;
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-areas:
            "bar    bar"
            "board  seats"
            "board  actions";
        gap: 5px 8px;
    }

    .cf-bar { grid-area: bar; min-height: 32px; }
    .cf-table { grid-area: board; }

    .cf-seats {
        grid-area: seats;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
    }

    .cf-seat { padding: 4px 7px; }
    .cf-seat-disc { width: 20px; height: 20px; }
    .cf-seat-name { font-size: 13px; }
    .cf-seat-badge { display: none; }

    .cf-actions {
        grid-area: actions;
        flex-direction: column;
        align-items: stretch;
        align-self: end;
        gap: 6px;
        min-height: 0;
    }

    /* L'aide est un texte, pas une action : en paysage elle coûterait trois
       lignes dans une colonne de 196 px. */
    .cf-hint { display: none; }
    /* Colonne de 196 px : « Rejouer » et « Finir la partie » côte à côte
       seraient tronqués, on les empile. */
    .cf-end-actions { flex-direction: column; }
    .cf-btn { min-height: 44px; width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-disc.is-dropping,
    .cf-cell.is-win .cf-disc,
    .cf-seat.is-turn,
    .cf-end {
        animation: none !important;
    }

    .cf-btn {
        transition: none !important;
    }
}