/* ==========================================================================
   6 qui prend ! — plateau natif (Game Hub)
   --------------------------------------------------------------------------
   Feuille originale. Aucune ligne ne provient d'une plateforme tierce : les
   images de `assets/images/games/sixnimmt/` sont découpées ici par calcul de
   grille (variables `--c` / `--r` posées en style inline par SixNimmt.js).

   Planche cards.webp : 10 colonnes × 11 lignes (66 × 102 px par carte)
     valeur 1→104 : colonne = (v-1) % 10, ligne = ⌊(v-1)/10⌋
     la 11e ligne ne porte que 101→104 ; les 6 cases restantes sont vides.
   Découpage en POURCENTAGES : pas = 100 / (n-1), donc 11,1111 % par colonne
   et 10 % par ligne — juste à toute taille d'affichage.

   card_slot.webp       emplacement vide (voile blanc translucide)
   card_slot_last.webp  tuile du total de la rangée (tête de bison)
   row_icon.webp        flèche « ramasser cette rangée »
   ========================================================================== */

.snim-stage {
    --snim-cw: 52px;
    --snim-ch: calc(var(--snim-cw) * 1.5455);
    --snim-hw: 44px;
    --snim-overlap: 0px;
    --snim-radius: 6px;
    --snim-line: rgba(255, 255, 255, .10);
    --snim-soft: rgba(255, 255, 255, .66);
    --snim-dim: rgba(255, 255, 255, .42);
    --snim-accent: #f2b544;
    --snim-accent-2: #ff7a45;
    --snim-ok: #4bb564;
    --snim-danger: #e5484d;

    position: relative;
    display: grid;
    /* Les 4 rangées sont COMPACTES en haut ; c'est la MAIN qui absorbe la
       hauteur restante (c'est elle qu'on lit et qu'on touche). */
    grid-template-rows: auto 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: #f3f1ea;
    font-size: 14px;
    font-family: inherit;
    background-color: #12100d;
    background-image:
        radial-gradient(120% 85% at 50% 0%, rgba(242, 181, 68, .10) 0%, transparent 60%),
        radial-gradient(90% 70% at 50% 108%, rgba(229, 72, 77, .12) 0%, transparent 62%),
        linear-gradient(rgba(16, 14, 11, .92), rgba(11, 10, 8, .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.snim-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    /* La couche du bandeau/journal commun (StageFeed) est en position absolue :
       elle doit se résoudre contre le plateau, pas contre la page. */
    position: relative;
}

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

/* ------------------------------------------------------------------ bandeau */
.snim-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 10px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--snim-line);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.2;
}

.snim-bar-round {
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.snim-bar-round span {
    color: var(--snim-dim);
    font-weight: 600;
}

.snim-bar-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 15px;
    background: var(--snim-line);
}

.snim-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    white-space: nowrap;
}

.snim-ticker {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--snim-soft);
    font-size: 13.5px;
    padding-right: 34px;   /* place du bouton 📜 du socle */
}

/* Tête de bison en SVG inline : même dessin que la tuile, mais net à
   toute taille et sans requête réseau. */
.snim-bull {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: currentColor;
    color: #d8643f;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4.2c-1.2 0-2 .5-2.6 1.2C8.5 4.4 7 3.9 5.2 4.1c-.6.1-.8.5-.4.9 1.1 1 1.7 2 1.9 3.2-1.2 1.4-1.9 3.1-1.9 5 0 3.4 2.9 6.4 7.2 6.4s7.2-3 7.2-6.4c0-1.9-.7-3.6-1.9-5 .2-1.2.8-2.2 1.9-3.2.4-.4.2-.8-.4-.9-1.8-.2-3.3.3-4.2 1.3C14 4.7 13.2 4.2 12 4.2z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4.2c-1.2 0-2 .5-2.6 1.2C8.5 4.4 7 3.9 5.2 4.1c-.6.1-.8.5-.4.9 1.1 1 1.7 2 1.9 3.2-1.2 1.4-1.9 3.1-1.9 5 0 3.4 2.9 6.4 7.2 6.4s7.2-3 7.2-6.4c0-1.9-.7-3.6-1.9-5 .2-1.2.8-2.2 1.9-3.2.4-.4.2-.8-.4-.9-1.8-.2-3.3.3-4.2 1.3C14 4.7 13.2 4.2 12 4.2z'/></svg>") center/contain no-repeat;
}

/* ------------------------------------------------------------------- sièges */
.snim-seats {
    display: grid;
    /* Une colonne par adversaire : deux boîtes se partagent la largeur au lieu
       d'occuper deux tiers d'une grille de trois et d'écraser leur texte. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
}

/* À partir de 5 adversaires on passe sur plusieurs lignes. */
.snim-seats.is-dense {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.snim-seat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 5px 7px;
    border-radius: 9px;
    border: 1px solid var(--snim-line);
    background: rgba(255, 255, 255, .035);
    transition: border-color .2s, background-color .2s;
}

.snim-seat.is-turn {
    border-color: rgba(242, 181, 68, .55);
    background: rgba(242, 181, 68, .10);
    animation: snim-halo 2s ease-in-out infinite;
}

@keyframes snim-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 181, 68, .0); }
    50% { box-shadow: 0 0 0 3px rgba(242, 181, 68, .16); }
}

.snim-seat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}

.snim-seat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.snim-seat-tag {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.snim-seat-tag.is-ok {
    color: #9fe0ac;
    border-color: rgba(75, 181, 100, .45);
    background: rgba(75, 181, 100, .12);
}

.snim-seat-tag.is-wait {
    color: var(--snim-dim);
    border-color: rgba(255, 255, 255, .12);
}

.snim-seat-tag.is-warn {
    color: #ffd08a;
    border-color: rgba(242, 181, 68, .5);
    background: rgba(242, 181, 68, .14);
}

.snim-seat-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.snim-seat-cards,
.snim-seat-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--snim-soft);
}

.snim-seat-score b {
    color: #f6e7c8;
}

.snim-mini-card {
    display: inline-block;
    width: 9px;
    height: 13px;
    border-radius: 2px;
    border: 1px solid currentColor;
    background: linear-gradient(150deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08));
}

/* ------------------------------------------------------------------ plateau */
.snim-board {
    display: flex;
    flex-direction: column;
    /* Rangées serrées et groupées en haut : l'espace libre va à la main. */
    justify-content: flex-start;
    gap: 5px;
    min-height: 0;
    min-width: 0;
    padding: 2px 0;
    overflow: visible;
}

.snim-board-empty {
    margin: auto;
    max-width: 320px;
    padding: 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--snim-soft);
}

.snim-row {
    display: grid;
    /* Flèche (34 px) puis les 6 cases ; le tout centré dans le plateau. */
    grid-template-columns: 34px auto;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: 0;
    border-radius: 9px;
    transition: background-color .25s;
}

.snim-row.is-taking {
    background: rgba(229, 72, 77, .18);
}

.snim-row-cards {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;   /* filet : aucune carte ne doit sortir de sa rangée */
}

.snim-card {
    position: relative;
    flex: 0 0 auto;
    width: var(--snim-cw);
    height: var(--snim-ch);
    border: 0;
    padding: 0;
    border-radius: var(--snim-radius);
    background-color: #1b1712;
    background-image: url("../images/games/sixnimmt/cards.webp");
    background-size: 1000% 1100%;
    background-position: calc(var(--c) * 11.1111%) calc(var(--r) * 10%);
    background-repeat: no-repeat;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    box-sizing: border-box;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

/* Le dos n'est pas fourni par la planche : dessiné ici. */
.snim-card.is-back {
    background-image:
        repeating-linear-gradient(45deg, #3a2a1c 0 6px, #2c1f14 6px 12px);
    border: 1px solid rgba(255, 255, 255, .12);
}

.snim-slot {
    flex: 0 0 auto;
    width: var(--snim-cw);
    height: var(--snim-ch);
    border-radius: var(--snim-radius);
    background-image: url("../images/games/sixnimmt/card_slot.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: .11;
}

/* Tuile du total : la tête de bison fournie, avec le compte lisible dessus. */
.snim-row-total {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--snim-cw);
    height: var(--snim-ch);
    border-radius: var(--snim-radius);
    background-image: url("../images/games/sixnimmt/card_slot_last.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-weight: 800;
    font-size: calc(var(--snim-cw) * .52);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #2a1208;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 0 3px rgba(255, 255, 255, .9);
    user-select: none;
}

.snim-row-pick {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    visibility: hidden;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.snim-row-pick.is-enabled {
    visibility: visible;
    cursor: pointer;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
}

.snim-row-pick.is-enabled:active {
    transform: scale(.94);
}

.snim-row-pick.is-active {
    background: rgba(229, 72, 77, .28);
    border-color: rgba(255, 140, 120, .8);
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .22);
}

.snim-row-icon {
    display: block;
    width: 26px;
    height: 21px;
    background-image: url("../images/games/sixnimmt/row_icon.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: .55;
}

.snim-row-pick.is-enabled .snim-row-icon { opacity: .95; }
.snim-row-pick.is-active .snim-row-icon { opacity: 1; transform: scale(1.08); }

/* --------------------------------------------------------------------- moi */
.snim-me {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    padding-top: 2px;
}

.snim-me-counters {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.snim-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--snim-line);
    color: var(--snim-soft);
    white-space: nowrap;
}

.snim-chip b { color: #fff; }
.snim-chip.is-round { color: var(--snim-dim); }
.snim-chip.is-round b { color: #f6e7c8; }
.snim-chip.is-total { border-color: rgba(242, 181, 68, .35); }

.snim-hint {
    font-size: 13px;
    line-height: 1.3;
    color: var(--snim-dim);
    /* Deux lignes au maximum : une aide longue ne doit pas manger le plateau
       sur un écran de 560 px de haut. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.snim-hint.is-warn { color: #ffca7a; }

/* Ma carte posée pendant l'attente : une vignette suffit, la carte en pleine
   taille volait la hauteur du plateau à chaque tour. */
.snim-chip.is-chosen {
    gap: 5px;
    border-color: rgba(242, 181, 68, .42);
    color: #f2d9a8;
}

.snim-chosen-card {
    display: inline-block;
    width: 22px;
    height: 34px;
    border-radius: 3px;
    background-image: url("../images/games/sixnimmt/cards.webp");
    background-size: 1000% 1100%;
    background-position: calc(var(--c) * 11.1111%) calc(var(--r) * 10%);
    background-repeat: no-repeat;
    outline: 1px solid rgba(242, 181, 68, .65);
    outline-offset: 1px;
}

.snim-hand {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    align-content: flex-end;
    gap: 4px;
    min-width: 0;
    /* Réserve la place de la carte qui se soulève + son contour. */
    padding-top: 10px;
    overflow: visible;
    /* Largeur bornée au nombre de colonnes choisies : au-delà, la main passe
       sur une deuxième ligne au lieu de rétrécir les cartes. */
    max-width: calc(var(--snim-cols, 5) * var(--snim-hw, 44px) + (var(--snim-cols, 5) - 1) * 4px);
    margin: 0 auto;
}

.snim-card.is-hand {
    width: var(--snim-hw);
    height: auto;
    aspect-ratio: 66 / 102;
    margin-left: var(--snim-overlap);
    cursor: pointer;
    transition: transform .16s cubic-bezier(.23, 1, .32, 1), outline-color .16s;
    outline: 2px solid transparent;
    outline-offset: 1px;
    animation: snim-deal-in .34s cubic-bezier(.23, 1, .32, 1) backwards;
    animation-delay: calc(var(--i, 0) * 32ms);
}

.snim-card.is-hand:first-child { margin-left: 0; }

@keyframes snim-deal-in {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
    to { opacity: 1; transform: none; }
}

.snim-card.is-hand.is-playable:hover { transform: translateY(-4px); }
.snim-card.is-hand.is-playable:active { transform: translateY(-2px) scale(.97); }

.snim-card.is-hand.is-selected {
    transform: translateY(-8px);
    outline-color: var(--snim-accent);
    z-index: 3;
}

.snim-card.is-hand.is-blocked {
    filter: saturate(.65) brightness(.82);
    cursor: default;
}

/* ---------------------------------------------------------------- actions */
.snim-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

.snim-btn {
    flex: 1 1 auto;
    min-height: 34px;
    padding: 6px 14px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #241505;
    background: linear-gradient(180deg, #f7c860, #e6a72f);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .12s cubic-bezier(.23, 1, .32, 1), opacity .12s;
}

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

.snim-btn:disabled {
    opacity: .42;
    cursor: default;
    transform: none;
}

.snim-btn.is-secondary {
    flex: 0 0 auto;
    color: var(--snim-soft);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--snim-line);
    box-shadow: none;
}

/* --------------------------------------------------------- animation du pli */
.snim-card.is-landing {
    animation: snim-land .34s cubic-bezier(.23, 1, .32, 1);
}

@keyframes snim-land {
    from { opacity: .2; transform: translateY(-16px) scale(.9); }
    to { opacity: 1; transform: none; }
}

.snim-fly-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
}

.snim-ghost {
    border-radius: var(--snim-radius);
    will-change: transform, opacity;
}

/* ------------------------------------------------------------- fin de partie */
.snim-over {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(8, 7, 5, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: snim-fade .25s ease-out;
}

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

.snim-over-card {
    width: min(340px, 100%);
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(170deg, rgba(32, 26, 18, .98), rgba(18, 15, 11, .99));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    text-align: center;
}

.snim-over-title {
    margin: 0 0 4px;
    font-size: 21px;
    letter-spacing: -.02em;
}

.snim-over-sub {
    margin: 0 0 2px;
    font-size: 14.5px;
    color: #f2d9a8;
}

.snim-over-note {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--snim-dim);
}

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

.snim-ranking li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    font-size: 14px;
}

.snim-ranking li:first-child {
    background: rgba(242, 181, 68, .16);
    border: 1px solid rgba(242, 181, 68, .4);
}

.snim-ranking .pts {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #f6e7c8;
}

/* Écran court (barre d'URL visible, ~560 px) : le plateau doit garder des
   cartes lisibles. On retire l'aide qui double le bandeau et on tasse les
   sièges ; l'aide de choix de rangée (is-warn) reste, elle est indispensable. */
.snim-stage.is-short .snim-hint:not(.is-warn) {
    display: none;
}

.snim-stage.is-short .snim-seat {
    padding: 3px 6px;
    gap: 1px;
}

.snim-stage.is-short .snim-chip {
    padding: 1px 6px;
    font-size: 12px;
}

.snim-stage.is-short .snim-bar {
    padding: 3px 8px;
    font-size: 13px;
}

/* ------------------------------------------------------------- accessibilité */
.snim-row-pick:focus-visible,
.snim-card.is-hand:focus-visible,
.snim-btn:focus-visible {
    outline: 2px solid #ffd08a;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .snim-card.is-hand,
    .snim-card.is-landing,
    .snim-seat.is-turn,
    .snim-over {
        animation: none !important;
    }
    .snim-card.is-hand.is-playable:hover,
    .snim-card.is-hand.is-playable:active {
        transform: none;
    }
}

/* ------------------------------------------------------------------ gabarits */
@media (max-width: 380px) {
    .snim-stage { gap: 5px; padding-left: 4px; padding-right: 4px; }
    .snim-bar { font-size: 13px; padding: 4px 8px; }
    .snim-seat { padding: 4px 6px; }
    .snim-seat-name { font-size: 13px; }
}

@media (min-width: 620px) {
    .snim-stage { gap: 8px; padding: 8px; }
    .snim-seats { grid-auto-columns: minmax(0, 1fr); }
    .snim-seats.is-dense { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .snim-card.is-hand { max-width: 66px; }
}

/* ==========================================================================
   Couleur des joueurs + annonces de révélation (25/10/2026)
   ========================================================================== */

/* La carte posée garde la couleur de celui qui l'a posée. */
.snim-row .snim-card[data-user] {
    outline: 2px solid rgb(var(--pc, 139 147 167) / .9);
    outline-offset: -2px;
}

.snim-seat {
    border-color: rgb(var(--pc, 139 147 167) / .45);
}

.snim-seat .snim-seat-name {
    color: rgb(var(--pc, 255 255 255));
}

/* Ma main : liseré de MA couleur. */
.snim-hand .snim-card {
    outline: 1.5px solid rgb(var(--pc, 139 147 167) / .5);
    outline-offset: -1px;
}

/* Annonce d'étape dans la rangée d'action (révélation, prise de rangée). */
.snim-callout {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #f3f1ea;
}

.snim-callout.is-warn {
    background: rgba(229, 72, 77, .18);
    border-color: rgba(229, 72, 77, .62);
    color: #ffd9d6;
}