/* ==========================================================================
   TRIO — plateau natif (Game Hub)
   --------------------------------------------------------------------------
   Feuille originale. Aucune ligne ne provient de Board Game Arena : la planche
   `assets/images/games/trio/cards.webp` (5 colonnes × 3 lignes) est découpée ici
   par calcul de position, avec les variables `--trio-col` / `--trio-row` posées
   en style inline par Trio.js.

     case 0 = dos ; valeurs 1→12 ligne par ligne : col = v % 5, row = ⌊v / 5⌋
     pas horizontal = 100 / (5-1) = 25 %, pas vertical = 100 / (3-1) = 50 %

   Hauteurs : la barre et les sièges sont compacts, le CENTRE prend la place
   restante (c'est la table qu'on lit), la main garde sa hauteur naturelle.
   ========================================================================== */

.trio-stage {
    --trio-cw: 64px;                       /* largeur d'une carte du centre */
    --trio-hw: 56px;                       /* largeur d'une carte de ma main */
    --trio-sw: 20px;                       /* vignette dans une boîte adverse */
    --trio-radius: 7px;
    --trio-line: rgba(255, 255, 255, .10);
    --trio-soft: rgba(255, 255, 255, .72);
    --trio-dim: rgba(255, 255, 255, .44);
    --trio-accent: #f2b544;
    --trio-hot: #e5277f;
    --trio-ok: #37c17a;

    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto 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: #f7f2ea;
    font-size: 14px;
    font-family: inherit;
    background-color: #150f14;
    background-image:
        radial-gradient(120% 80% at 50% -10%, rgba(229, 39, 127, .18) 0%, transparent 62%),
        radial-gradient(90% 70% at 50% 110%, rgba(242, 181, 68, .14) 0%, transparent 64%),
        linear-gradient(rgba(20, 14, 20, .90), rgba(12, 9, 13, .96));
    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.trio-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.trio-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

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

.trio-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Le bouton journal du socle occupe le coin haut-droit : on lui réserve sa
       place, sinon la pastille « Centre : N » passe dessous. */
    padding-right: 52px;
    min-height: 44px;
}

/* Bouton journal agrandi pour le doigt (socle partagé : on ne le change QUE
   pour Trio, les autres jeux gardent leur 30 px mesuré). */
.trio-host .sf-toggle {
    width: 44px;
    height: 44px;
    font-size: 18px;
    top: 4px;
    right: 4px;
    border-radius: 11px;
}

.trio-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: rgba(242, 181, 68, .16);
    border: 1px solid rgba(242, 181, 68, .38);
    color: #ffd98a;
    white-space: nowrap;
}

.trio-chip.is-hot {
    background: rgba(229, 39, 127, .18);
    border-color: rgba(229, 39, 127, .46);
    color: #ff9ec7;
}

.trio-chip.is-quiet {
    background: rgba(255, 255, 255, .05);
    border-color: var(--trio-line);
    color: var(--trio-dim);
    font-weight: 600;
    text-transform: none;
    margin-left: auto;
}

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

.trio-turn.is-mine {
    color: #ffe08a;
    text-shadow: 0 0 14px rgba(242, 181, 68, .45);
}

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

.trio-seats {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Défilement à bords perdus : la boîte suivante affleure, on comprend qu'on
       peut faire glisser quand il y a beaucoup d'adversaires. */
    margin: 0 -6px;
    padding: 0 6px 2px;
    scroll-snap-type: x proximity;
}

.trio-seats::-webkit-scrollbar { display: none; }

.trio-seat {
    flex: 1 1 0;
    /* 96 px : la largeur minimale qui laisse tenir deux boutons de 44 px. */
    min-width: 96px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 5px 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--trio-line);
    box-sizing: border-box;
}

.trio-seat.is-turn {
    border-color: rgba(242, 181, 68, .55);
    background: rgba(242, 181, 68, .10);
    box-shadow: 0 0 0 1px rgba(242, 181, 68, .18) inset, 0 0 16px rgba(242, 181, 68, .16);
}

.trio-seat-name {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgb(var(--pc, 235 235 235));
}

.trio-seat.pc-on .trio-seat-name { color: rgb(var(--pc)); }

.trio-seat-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 16px;
    flex-wrap: wrap;
}

.trio-seat-cards {
    font-size: 11px;
    color: var(--trio-dim);
    white-space: nowrap;
}

.trio-seat-taken {
    display: flex;
    gap: 2px;
    min-height: 0;
}

.trio-seat-taken .trio-card {
    width: var(--trio-sw);
    border-radius: 3px;
}

.trio-seat-picks {
    display: flex;
    gap: 6px;
}

/* --------------------------------------------------------- boutons ▼ / ▲ */

.trio-pick {
    flex: 1 1 0;
    /* CIBLE TACTILE : 44 × 44 px minimum (recommandation tactile). */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--trio-line);
    background: rgba(255, 255, 255, .05);
    color: var(--trio-dim);
    font-size: 15px;
    line-height: 1;
    cursor: default;
    touch-action: manipulation;
    transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
}

.trio-pick.is-on {
    cursor: pointer;
    color: #ffe9b0;
    border-color: rgba(242, 181, 68, .45);
    background: rgba(242, 181, 68, .14);
}

.trio-pick.is-on:hover { background: rgba(242, 181, 68, .22); }
.trio-pick.is-on:active { transform: scale(.94); }


/* ------------------------------------------------------------------ table */

.trio-table {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 5px;
    min-height: 0;
    padding: 6px 7px;
    border-radius: 12px;
    background:
        radial-gradient(90% 70% at 50% 40%, rgba(255, 255, 255, .05) 0%, transparent 70%),
        rgba(255, 255, 255, .03);
    border: 1px solid var(--trio-line);
    overflow: hidden;
}

.trio-table-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.trio-table-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--trio-dim);
    font-weight: 700;
}

.trio-target {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffe08a;
    white-space: nowrap;
}

.trio-center {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
}

.trio-slot {
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--trio-radius);
    width: var(--trio-cw);
    cursor: default;
    position: relative;
    display: block;
    transition: transform 140ms ease, filter 160ms ease;
}

.trio-slot.is-gone {
    height: calc(var(--trio-cw) * 1.565);
    border: 1px dashed rgba(255, 255, 255, .13);
    border-radius: var(--trio-radius);
}

.trio-slot.is-clickable { cursor: pointer; }
.trio-slot.is-clickable:hover { transform: translateY(-3px); filter: brightness(1.12); }
.trio-slot.is-clickable:active { transform: scale(.96); }

.trio-slot.is-revealed { z-index: 2; }

.trio-slot.is-revealed .trio-card {
    box-shadow:
        0 0 0 2px rgba(242, 181, 68, .92),
        0 0 20px rgba(242, 181, 68, .45),
        0 6px 14px rgba(0, 0, 0, .5);
}

.trio-hint {
    font-size: 12px;
    line-height: 1.3;
    color: var(--trio-soft);
    text-align: center;
    min-height: 16px;
}

.trio-hint.is-wide { text-align: left; }

.trio-center-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px dashed rgba(255, 255, 255, .16);
    color: var(--trio-soft);
    font-size: 12px;
    text-align: center;
}

.trio-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 120px;
    text-align: center;
    color: var(--trio-soft);
    font-size: 13px;
    padding: 12px;
}

/* ------------------------------------------------------------------- main */

.trio-me {
    display: grid;
    grid-template-rows: auto auto;
    /* COLONNE CONTRAINTE OBLIGATOIRE : sans `minmax(0, 1fr)`, la colonne
       implicite se dimensionne sur le contenu — la main s'élargissait donc
       elle-même (403 px pour 360) et débordait de l'écran. */
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-height: 0;
}

.trio-me-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}

.trio-me-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--trio-dim);
    font-weight: 700;
    white-space: nowrap;
}

.trio-me-trios { margin-left: auto; }

.trio-me-body {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 0;
}

.trio-hand {
    display: flex;
    align-items: flex-end;
    flex: 0 1 auto;
    min-width: 0;
    padding-bottom: 6px;
}

.trio-hand-card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    touch-action: manipulation;
}

/* Deux cartes seulement sont demandables : un liseré doré + un chevron disent
   lesquelles, et c'est TOUTE la carte qui répond au doigt. */
.trio-edge-badge {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 7px;
    border-radius: 7px;
    background: rgba(242, 181, 68, .94);
    color: #2a1b00;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* Deux lignes quand cela agrandit vraiment les cartes (décidé par fitBoard). */
.trio-hand.is-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    flex: 1 1 auto;
    padding-bottom: 4px;
}

.trio-hand.is-wrap .trio-hand-card + .trio-hand-card { margin-left: 0; }

.trio-hand-card + .trio-hand-card {
    margin-left: calc(var(--trio-hw) * -0.22);
}

.trio-hand-card .trio-card {
    width: var(--trio-hw);
    border-radius: var(--trio-radius);
}

.trio-hand-card.is-edge .trio-card {
    box-shadow: 0 0 0 1px rgba(242, 181, 68, .45), 0 4px 10px rgba(0, 0, 0, .5);
}

.trio-hand-card.is-clickable { cursor: pointer; }
.trio-hand-card.is-clickable:hover .trio-card { filter: brightness(1.1); }
.trio-hand-card.is-clickable:active .trio-card { transform: scale(.96); }

.trio-me-taken {
    display: flex;
    gap: 3px;
    margin-left: auto;
    padding-bottom: 8px;
}

.trio-me-taken .trio-card {
    width: 34px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(242, 181, 68, .5);
}

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

.trio-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}

.trio-btn {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid var(--trio-line);
    background: rgba(255, 255, 255, .06);
    color: #f7f2ea;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
}

.trio-btn:hover { background: rgba(255, 255, 255, .10); }
.trio-btn:active { transform: scale(.97); }

.trio-btn.is-primary {
    background: linear-gradient(180deg, #f7c65f, #e8a41f);
    border-color: rgba(255, 220, 140, .65);
    color: #2a1b00;
}

.trio-btn.is-primary:hover { background: linear-gradient(180deg, #ffd375, #f0ae28); }

.trio-btn.is-ghost {
    flex: 0 0 auto;
    background: transparent;
    color: var(--trio-dim);
}

body.is-my-turn .trio-actions .trio-btn.is-primary {
    animation: trio-pulse 1.6s ease-in-out infinite;
}

@keyframes trio-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 181, 68, .45); }
    50% { box-shadow: 0 0 0 6px rgba(242, 181, 68, 0); }
}

/* ------------------------------------------------------------------ cartes */

.trio-card {
    display: block;
    width: 100%;
    aspect-ratio: 200 / 313;
    border-radius: var(--trio-radius);
    background-image: url("../images/games/trio/cards.webp");
    background-repeat: no-repeat;
    background-size: 500% 300%;
    background-position: calc(var(--trio-col, 0) * 25%) calc(var(--trio-row, 0) * 50%);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .45);
    transition: transform 140ms ease, box-shadow 180ms ease, filter 160ms ease;
}

.trio-slot .trio-card { width: var(--trio-cw); }

/* ------------------------------------------------------- fiche « mes trios » */

.trio-trios {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.trio-trio {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 5px 1px 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--trio-line);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--trio-soft);
}

.trio-trio.is-linked {
    border-color: rgba(229, 39, 127, .6);
    background: rgba(229, 39, 127, .16);
    color: #ff9ec7;
}

.trio-mini {
    width: 7px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(160deg, #f2b544, #e5277f);
    opacity: .85;
}

.trio-trio b {
    margin-left: 2px;
    font-size: 11px;
}

.trio-trios-empty {
    font-size: 11px;
    color: var(--trio-dim);
}

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

.trio-render-error {
    position: absolute;
    inset: 8px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 12px;
    background: rgba(28, 12, 16, .94);
    border: 1px solid rgba(229, 72, 77, .55);
    color: #ffd7d9;
    font-size: 13px;
}

/* ------------------------------------------------------------------- fin */

.trio-over {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 6, 9, .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: trio-fade 220ms ease both;
}

@keyframes trio-fade { from { opacity: 0; } to { opacity: 1; } }

.trio-over-card {
    width: min(360px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: 18px 16px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(38, 26, 36, .98), rgba(20, 14, 20, .99));
    border: 1px solid rgba(242, 181, 68, .28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    text-align: center;
}

.trio-over-title {
    margin: 0 0 4px;
    font-size: 20px;
    letter-spacing: -.01em;
    color: #ffe08a;
}

.trio-over-sub {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 650;
    color: #f7f2ea;
}

.trio-over-note {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--trio-soft);
}

.trio-ranking {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trio-ranking li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    font-size: 13px;
}

.trio-ranking .pts {
    font-weight: 700;
    color: #ffe08a;
    white-space: nowrap;
}

.trio-ranking .pts small {
    font-weight: 600;
    font-size: 11px;
    opacity: .75;
}

/* ------------------------------------------------------- écrans courts/larges */

/* Écran court : on COMPRESSE, on ne supprime jamais une action.
   Masquer les boutons ▼/▲ retirait au joueur la possibilité de demander le
   plus petit / le plus grand d'un adversaire — c'est-à-dire une règle du jeu. */
@media (max-height: 620px) {
    .trio-stage { gap: 4px; padding: 4px 5px calc(env(safe-area-inset-bottom) + 4px); }
    .trio-bar { min-height: 44px; }
    .trio-table { padding: 3px 4px; }
    .trio-center { gap: 4px; }
    .trio-hint { font-size: 12px; line-height: 1.22; }

    /* SIÈGES SUR UNE SEULE LIGNE : nom + compteur + les deux boutons côte à
       côte, soit ~48 px de haut au lieu de 88. Mesuré : sans ce gain, la rangée
       du centre tombait à 120 px et les cartes à 35 × 55 (sous la cible
       tactile). Les boutons gardent 44 × 44 ; la ligne défile s'il y a beaucoup
       d'adversaires. */
    .trio-seats { gap: 4px; }
    .trio-seat {
        flex-direction: row;
        align-items: center;
        gap: 5px;
        min-width: 148px;
        padding: 2px 4px;
    }
    .trio-seat-name { flex: 1 1 auto; font-size: 11.5px; }
    .trio-seat-meta { flex: 0 0 auto; min-height: 0; }
    .trio-seat-cards { font-size: 10.5px; }
    .trio-seat-taken { display: none; }        /* vignettes décoratives */
    .trio-seat-picks { flex: 0 0 auto; }
    .trio-pick { min-width: 44px; min-height: 44px; }

    .trio-actions { min-height: 48px; }
    .trio-btn { min-height: 48px; font-size: 15px; }
    .trio-me-title, .trio-table-title { font-size: 10px; }
}

@media (min-width: 760px) {
    .trio-stage {
        --trio-cw: 86px;
        --trio-hw: 78px;
        --trio-sw: 26px;
        padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
        gap: 8px;
    }
    .trio-seat { min-width: 96px; padding: 7px 8px 6px; }
    .trio-seat-name { font-size: 13px; }
    .trio-seat-cards { font-size: 12px; }
    /* Jamais moins de 44 px : en paysage (844 × 390) cette règle « grand
       écran » s'appliquait et rabaissait les boutons à 30 px. */
    .trio-pick { min-height: 44px; }
    .trio-table { padding: 10px 12px; }
    .trio-hint { font-size: 13px; }
}

/* ------------------------------------------------- rotation (portrait requis)
   Constat mesuré : sur un téléphone en paysage (844 × 390), la rangée du centre
   tombe à 22 px de haut — neuf cartes n'y tiennent pas avec des boutons de
   44 px. Le manifeste déclare `portrait` : on demande donc de tourner, au lieu
   d'afficher un plateau illisible. Aucun filtre « pointer » : la hauteur est la
   seule contrainte réelle, et `pointer: coarse` n'est pas simulable en recette
   (il rendait le comportement invérifiable). */
.trio-rotate {
    display: none;
}

@media (orientation: landscape) and (max-height: 520px) {
    .trio-rotate {
        position: absolute;
        inset: 0;
        z-index: 55;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgba(12, 9, 13, .96);
        text-align: center;
    }
}

.trio-rotate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 380px;
    padding: 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(242, 181, 68, .3);
    background: rgba(28, 20, 26, .96);
    color: #f7f2ea;
    font-size: 14px;
    line-height: 1.4;
}

.trio-rotate-icon {
    font-size: 34px;
    line-height: 1;
    transform: rotate(90deg);
}

.trio-rotate-card strong { font-size: 16px; color: #ffe08a; }

/* --------------------------------------------------------- accessibilité */

.trio-slot:focus-visible,
.trio-pick:focus-visible,
.trio-btn:focus-visible,
.trio-hand-card:focus-visible {
    outline: 2px solid #ffe08a;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .trio-slot,
    .trio-card,
    .trio-btn,
    .trio-pick,
    .trio-over {
        transition: none !important;
        animation: none !important;
    }
    body.is-my-turn .trio-actions .trio-btn.is-primary { animation: none; }
}