/* ==========================================================================
   Shock! — plateau natif (Game Hub)
   --------------------------------------------------------------------------
   Feuille de style originale. Elle ne contient aucun code d'une plateforme
   tierce : seules les images de `assets/images/games/shock/` sont découpées
   ici, par calcul de grille.

   Planches et grilles (mesurées sur les fichiers) :
     cards.webp        11 colonnes (rangs 1→11) × 5 lignes
                       lignes 0→3 = jaune, bleu, rouge, vert ; ligne 4 = dos
     chest_cards.webp   6 colonnes × 5 lignes ; ligne 4 = dos (format paysage)
     icons.webp         9 icônes en bandeau
                       bleu, rouge, vert, jaune, joyau, potion,
                       poisonBleu, poisonJaune, poisonRouge

   Découpage : `--c` (colonne) et `--r` (ligne) sont posés en style inline par
   Shock.js ; la position se calcule en pourcentage, ce qui reste juste quelle
   que soit la taille d'affichage.
   ========================================================================== */

.shk-stage {
    --shk-cw: 64px;
    --shk-ch: 89px;
    --shk-radius: 7px;
    --shk-line: rgba(255, 255, 255, .10);
    --shk-soft: rgba(255, 255, 255, .62);
    --shk-dim: rgba(255, 255, 255, .40);
    --shk-accent: #f0b429;
    /* Couleurs d'atout : elles habillent le liseré des cartes posées. */
    --shk-suit-blue: #4a9eff;
    --shk-suit-yellow: #ffd23f;
    --shk-suit-red: #ff5c5c;
    --shk-suit-green: #4bd66f;
    /* Écart entre une carte posée et ses pastilles flottantes (badges au-dessus,
       avatar en dessous). Une seule valeur : les deux côtés respirent pareil. */
    --shk-float-gap: 30px;
    --shk-danger: #e5484d;
    --shk-ok: #46a758;

    position: relative;
    display: grid;
    /* Le BANDEAU et la MAIN gardent leur hauteur naturelle ; c'est la TABLE qui
       absorbe l'espace libre. Sur un grand téléphone le plateau grandit donc
       jusqu'en bas, au lieu de laisser une bande morte entre la main et les
       boutons. La main reste bornée pour ne jamais écraser la table. */
    grid-template-rows: auto auto minmax(96px, 1fr) auto auto;
    gap: 8px;
    box-sizing: border-box;

    /* Plein cadre : la scène remplit le body, sans cadre arrondi ni marge.
       `height: 100%` échouait ici (parent en hauteur automatique) : la scène
       prenait la hauteur de son contenu et laissait des bandes vides. C'est le
       conteneur (`body.in-game .shk-host`) qui lui donne sa hauteur, et
       `flex: 1` la fait grandir jusqu'au bas de l'écran. */
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    width: 100%;
    padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px);
    color: #f2f4f8;
    font-size: 14px;
    font-family: inherit;
    background-color: #0e1119;
    background-image:
        radial-gradient(120% 90% at 50% 0%, rgba(99, 102, 241, .14) 0%, transparent 60%),
        linear-gradient(rgba(10, 13, 20, .82), rgba(10, 13, 20, .94)),
        url("../images/games/shock/background.webp");
    background-size: auto, auto, 420px;
    background-position: center, center, center;
    border-radius: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Le conteneur du jeu devient une colonne qui remplit la vue : la scène n'a
   plus à devoir sa hauteur. Les classes sont posées par Shock.js.
   On cible l'ID + la classe : `game.css` impose `#game-area { padding-top:
   175px; padding-bottom: 40px }` (réserve pour header fixe et zone de dés) et
   une simple classe perdait le combat de spécificité — le plateau flottait
   175 px sous le header, entouré de bandes vides. */
body.in-game #game-area.shk-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

body.in-game #view-game.shk-view {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------- barre haut */
.shk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--shk-line);
    border-radius: 10px;
    font-size: 14px;
}

.shk-bar-round {
    font-weight: 700;
    letter-spacing: -.01em;
}

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

.shk-bar-sep {
    width: 1px;
    height: 18px;
    background: var(--shk-line);
}

.shk-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shk-soft);
}

.shk-bar-item b {
    color: #fff;
    font-weight: 650;
}

.shk-bar-spacer { flex: 1; }

/* Pastilles de la barre d'information : un libellé + une valeur, lisibles. */
.shk-bar-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 64px;
    padding: 4px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    cursor: help;
    user-select: none;
    transition: background .15s ease, border-color .15s ease;
}

.shk-bar-chip:hover,
.shk-bar-chip:focus-visible {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .18);
    outline: none;
}

.shk-bar-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--shk-soft);
    opacity: .78;
    line-height: 1;
}

.shk-bar-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    color: var(--shk-ink, #eef1f6);
    line-height: 1.15;
    white-space: nowrap;
}

.shk-bar-value b { font-weight: 800; }
.shk-bar-value i { font-style: normal; font-weight: 500; opacity: .55; font-size: .85em; }
.shk-bar-value.is-round { gap: 1px; }
.shk-bar-value .shk-icon { width: 16px; height: 16px; }

.shk-bar-chip.is-empty .shk-bar-value { opacity: .6; font-weight: 500; }

/* Bulle d'aide : clic (mobile) ou survol (souris). */
.shk-tip {
    position: fixed;
    z-index: 9999;
    max-width: 270px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(18, 20, 28, .98);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
    color: #eef1f6;
    font-size: 12.5px;
    line-height: 1.45;
    pointer-events: none;
    transform-origin: var(--tip-arrow, 50%) 100%;
    animation: shk-tip-in .16s ease-out;
}

.shk-tip.hidden { display: none; }

.shk-tip.is-below {
    transform-origin: var(--tip-arrow, 50%) 0;
    animation-name: shk-tip-in-down;
}

.shk-tip::after {
    content: "";
    position: absolute;
    left: var(--tip-arrow, 50%);
    bottom: -5px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    background: rgba(18, 20, 28, .98);
    border-right: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    transform: rotate(45deg);
}

.shk-tip.is-below::after {
    bottom: auto;
    top: -5px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid rgba(255, 255, 255, .14);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

@keyframes shk-tip-in {
    from { opacity: 0; transform: translateY(4px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shk-tip-in-down {
    from { opacity: 0; transform: translateY(-4px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.shk-btn-giveup {
    min-height: 34px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #ffd9da;
    background: rgba(229, 72, 77, .16);
    border: 1px solid rgba(229, 72, 77, .45);
    border-radius: 9px;
    cursor: pointer;
    transition: transform .12s cubic-bezier(.23, 1, .32, 1), background .15s;
}

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

/* ------------------------------------------------------------------ sièges */
/* Grille et non flex : à 4 ou 5 joueurs, des boîtes en flex:1 1 0 ne peuvent
   pas descendre sous la largeur de leur contenu et la dernière sortait de
   l'écran à 360 px. La grille impose le nombre de colonnes. */
.shk-seats {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shk-seats.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 4 adversaires (partie à 5) : UNE seule rangée de 4. Deux rangées de deux
   coûteraient ~80 px de table, alors que la boîte du joueur a été retirée
   justement pour gagner de la place. */
.shk-seats.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Dans une boîte étroite (4 colonnes à 360 px), on resserre : nom sur une
   ligne tronquée, compteurs compacts, poisons sur une ligne. */
.shk-seats.n4 .shk-seat { padding: 5px 5px; }
.shk-seats.n4 .shk-seat-name { font-size: 12px; }
.shk-seats.n4 .shk-seat-sub { gap: 2px; font-size: 11.5px; }
.shk-seats.n4 .shk-stat { gap: 2px; }
.shk-seats.n4 .shk-div { display: none; }
.shk-seats.n4 .shk-mini-card { width: 10px; height: 14px; }
.shk-seats.n4 .shk-seat-poisons { gap: 1px; }
.shk-seats.n4 .shk-seat-poison { padding: 0 2px; font-size: 11px; }

.shk-seat {
    position: relative;
    min-width: 0;
    padding: 6px 8px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--shk-line);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s;
}

.shk-seat.is-turn {
    border-color: rgba(240, 180, 41, .75);
    box-shadow: 0 0 0 1px rgba(240, 180, 41, .35), 0 0 18px -4px rgba(240, 180, 41, .55);
    animation: shk-halo 2.1s ease-in-out infinite;
}

.shk-seat.is-out { opacity: .45; }

/* Le siège du joueur qui doit ramasser le pli : c'est son geste qui débloque
   la suite, il doit être repérable d'un coup d'œil. */
.shk-seat.is-collecting {
    border-color: rgba(255, 209, 102, .85);
    box-shadow: 0 0 0 2px rgba(255, 209, 102, .40), 0 0 22px -4px rgba(255, 209, 102, .75);
}

.shk-seat.is-collecting::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 10px;
    border: 1px solid rgba(255, 209, 102, .55);
    animation: shk-collect-halo 1.4s ease-in-out infinite;
    pointer-events: none;
}

.shk-trick-slot.is-winner .shk-card {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 209, 102, .75);
}

.shk-seat-head {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Nombre de cartes, sur la ligne du pseudo (il ne doit jamais rétrécir). */
.shk-seat-cards {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--shk-soft);
}

.shk-seat-cards b { font-weight: 700; color: #fff; }

/* Trait de séparation vertical, commun au plateau et aux boîtes adverses. */
.shk-sep {
    display: inline-block;
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, .22);
    vertical-align: middle;
}

.shk-seat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trois catégories distinctes (cartes / joyaux / points), séparées par un
   filet : sans séparateur les chiffres se lisaient comme une seule suite. */
.shk-seat-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 5px;
    font-size: 13px;
    color: var(--shk-soft);
    font-variant-numeric: tabular-nums;
}

.shk-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
}

.shk-stat b { color: #fff; }

.shk-div {
    flex: 0 0 auto;
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, .16);
}

/* Miniature du dos de carte, découpée dans la même planche que les cartes du
   jeu (colonne 0, ligne 4). Un emoji « 🂠 » ne ressemblait pas à une carte. */
.shk-mini-card {
    display: inline-block;
    flex: 0 0 auto;
    width: 13px;
    height: 18px;
    background-image: url("../images/games/shock/cards.webp");
    background-repeat: no-repeat;
    background-size: 1100% 500%;
    background-position: 0% 100%;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.shk-seat-tag {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--shk-accent);
}

.shk-seat-tag.out { color: var(--shk-danger); }

/* Poisons par couleur, sur le modèle des jetons : trois cases teintées,
   lisibles même à 0. */
.shk-seat-poisons {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}

.shk-seat-poison {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 2px 0;
    border-radius: 5px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.shk-seat-poison .shk-icon {
    width: 13px;
    height: 13px;
}

.shk-seat-poison b { font-weight: 700; }

.shk-seat-poison.p-blue   { background: rgba(8, 137, 203, .30); }
.shk-seat-poison.p-yellow { background: rgba(243, 145, 3, .30); }
.shk-seat-poison.p-red    { background: rgba(217, 17, 27, .30); }

/* ------------------------------------------------------------------- table */
.shk-table {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 6px;
    /* Surface de table explicite : la zone de jeu se lit comme un plateau et
       non comme un trou entre les sièges et la main. */
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(99, 102, 241, .10), transparent 70%),
        rgba(255, 255, 255, .028);
    border: 1px solid var(--shk-line);
    border-radius: 12px;
}

.shk-trick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    /* Place pour les badges qui flottent AU-DESSUS des cartes et pour la
       pastille d'auteur qui flotte SOUS la carte : les deux débordent hors de
       la carte, jamais dessus. */
    padding-top: var(--shk-float-gap);
    padding-bottom: var(--shk-float-gap);
}

.shk-trick-slot:last-child .shk-pot {
    /* La dernière carte est entièrement visible : son badge se centre sur la
       carte, pas sur une bande visible de 55 %. */
    left: 50%;
}

.shk-trick-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Pastille d'auteur, flottant SOUS la carte : l'avatar du joueur (ou son
   initiale) cerclé de SA couleur. Le liseré de la carte, lui, dit l'atout —
   les deux informations ne se confondent plus. */
.shk-trick-who {
    position: absolute;
    /* Symétrique des badges du haut : la pastille est SOUS la carte. */
    bottom: calc(-1 * var(--shk-float-gap));
    left: 27.5%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #10131c;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow:
        0 0 0 2px rgb(var(--pc)),
        0 3px 7px rgba(0, 0, 0, .6);
    z-index: 5;
    pointer-events: none;
}

.shk-trick-slot:last-child .shk-trick-who { left: 50%; }

.shk-trick-who img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shk-who-initial {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
}

.shk-who-initial.is-only { display: flex; }

.shk-table-empty {
    font-size: 14px;
    color: var(--shk-dim);
    text-align: center;
    padding: 0 12px;
}

/* Contenu plus haut que la table : le débordement part vers le BAS (zone du
   joueur), jamais vers les sièges — l'alignement bas le garantit déjà, cette
   classe resserre les marges et réduit la rangée révélée pour que l'ensemble
   tienne dans une table courte. */
.shk-chest-stage.is-tight {
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 2px;
    gap: 5px;
}
.shk-chest-stage.is-tight .shk-chest-hint { display: none; }
.shk-chest-stage.is-tight .shk-chest-revealed { min-height: 70px; padding-top: 4px; }
.shk-chest-stage.is-tight .shk-chest-revealed .shk-chest-card { width: 58px; }

/* Rappel de portée de la potion dans le panneau de choix. */
.shk-potion-scope {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: #ffc46b;
}

/* Le coffre révélé se pose au centre, en paysage. */
.shk-chest-slot {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.shk-chest-card {
    width: 86px;
    aspect-ratio: 312 / 223;
    border-radius: 6px;
    background-image: url("../images/games/shock/chest_cards.webp");
    background-repeat: no-repeat;
    background-size: 600% 500%;
    background-position: calc(var(--c) * 20%) calc(var(--r) * 25%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    animation: shk-flip-in .42s cubic-bezier(.23, 1, .32, 1) backwards;
}

.shk-chest-note {
    font-size: 12px;
    color: var(--shk-dim);
}

/* -------------------------------------------------------------------- moi */
.shk-me {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.shk-me-counters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Mes poisons : mêmes cases que dans les boîtes adverses, mais compactes
   (elles ne doivent pas s'étirer sur toute la largeur de la rangée). */
.shk-me-poisons {
    display: inline-flex;
    gap: 3px;
    flex: 0 0 auto;
}

.shk-me-poisons .shk-seat-poison {
    flex: 0 0 auto;
    padding: 2px 7px;
}

.shk-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--shk-soft);
}

.shk-chip b { color: #fff; font-weight: 700; }

.shk-hand {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 5px;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 45svh;
    /* La réserve du haut laisse la place à la carte sélectionnée, qui se
       soulève de 8 px : sans elle, `overflow-y: auto` la rognait net. */
    padding: 11px 2px 3px;
    overflow-y: auto;
    touch-action: pan-y;
}

/* ------------------------------------------------------------------ cartes */
.shk-card {
    position: relative;
    flex: 0 0 auto;
    width: var(--shk-cw);
    height: var(--shk-ch);
    padding: 0;
    border: 0;
    border-radius: var(--shk-radius);
    background-color: #10131c;
    background-image: url("../images/games/shock/cards.webp");
    background-repeat: no-repeat;
    background-size: 1100% 500%;
    background-position: calc(var(--c) * 10%) calc(var(--r) * 25%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
    cursor: default;
    transition: transform .14s cubic-bezier(.23, 1, .32, 1), box-shadow .14s;
}

.shk-hand .shk-card {
    cursor: pointer;
}

.shk-hand .shk-card:active { transform: translateY(-2px) scale(.97); }

.shk-card.is-playable {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .16);
}

.shk-card.is-blocked {
    filter: brightness(.42) saturate(.6);
    cursor: not-allowed;
}

.shk-card.is-selected {
    transform: translateY(-8px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .55), 0 0 0 2px var(--shk-accent);
}

.shk-card.is-fresh {
    animation: shk-drop-in .38s cubic-bezier(.23, 1, .32, 1) backwards;
    animation-delay: calc(var(--i, 0) * 26ms);
}

/* Dos de carte (colonne 0, ligne 4 de la planche). */
.shk-card.is-back {
    --c: 0;
    --r: 4;
}

/* ------------------------------------------ animations de jeu (Shock!) */
/* Carte posée : elle part de la main ou du siège de son auteur. Le vecteur est
   calculé en JS (--fx/--fy) APRÈS le rendu ; la classe est retirée à la fin de
   l'animation, sinon le trajet se rejouerait au sondage suivant. */
.shk-card.is-dealt {
    animation: shk-deal-in .34s cubic-bezier(.23, 1, .32, 1);
    will-change: transform;
}

/* Clone de carte qui rejoint la boîte du vainqueur à la collecte. */
.shk-card.shk-fly {
    position: absolute;
    z-index: 30;
    margin: 0;
    pointer-events: none;
    animation: shk-fly-away .62s cubic-bezier(.4, 0, .6, 1) forwards;
    will-change: transform, opacity;
}

/* Flash discret du plateau au choc anaphylactique (le visuel SHOCK! reste
   au-dessus, dans .shk-shock-flash). */
.shk-stage.is-shock::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 35;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 50%, rgba(229, 72, 77, .42), transparent 70%);
    animation: shk-shock-pulse .62s ease-out forwards;
}

/* ------------------------------------------------------------------ icônes */
.shk-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-image: url("../images/games/shock/icons.webp");
    background-repeat: no-repeat;
    background-size: 900% 100%;
    background-position: calc(var(--i) * 12.5%) 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}

.shk-icon.suit { --i: 0; }
.shk-icon[data-suit="B"] { --i: 0; }
.shk-icon[data-suit="R"] { --i: 1; }
.shk-icon[data-suit="G"] { --i: 2; }
.shk-icon[data-suit="Y"] { --i: 3; }
.shk-icon.jewel { --i: 4; }
.shk-icon.potion { --i: 5; }
.shk-icon.poison-blue { --i: 6; }
.shk-icon.poison-yellow { --i: 7; }
.shk-icon.poison-red { --i: 8; }

/* ------------------------------------------------------------------ atout */
.shk-trump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shk-trump-rank {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ actions */
.shk-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
    padding-top: 2px;
}

/* `min-width: 0` + retour à la ligne : un libellé internationalisé plus long
   que le français (« Jogar virada para baixo », « Revelar um baú ») passe sur
   deux lignes et grandit en hauteur, plutôt que de déborder de la rangée. */
.shk-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    color: #10131c;
    background: linear-gradient(180deg, #ffd772, #f0b429);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: transform .12s cubic-bezier(.23, 1, .32, 1), opacity .15s;
}

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

.shk-btn.is-secondary {
    color: #f2f4f8;
    background: rgba(255, 255, 255, .09);
    border: 1px solid var(--shk-line);
}

.shk-btn.is-danger {
    color: #ffd9da;
    background: rgba(229, 72, 77, .18);
    border: 1px solid rgba(229, 72, 77, .42);
}

/* Bouton de collecte : c'est l'action attendue, elle doit dominer les autres. */
.shk-btn.is-collect {
    color: #1b1305;
    background: linear-gradient(180deg, #ffe08a, #f0b429);
    box-shadow: 0 0 0 1px rgba(255, 209, 102, .55), 0 8px 20px -6px rgba(240, 180, 41, .8);
    animation: shk-collect-halo 1.6s ease-in-out infinite;
}

.shk-hint.is-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 209, 102, .85);
}

.shk-btn[disabled] {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
}

.shk-hint {
    padding: 2px 2px 0;
    font-size: 14px;
    color: var(--shk-soft);
    text-align: center;
}

/* ------------------------------------------------------------------ choc! */
.shk-shock-flash {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: rgba(8, 10, 16, .55);
    animation: shk-shock-in 1.15s ease-out forwards;
    z-index: 40;
}

.shk-shock-flash img {
    width: min(78%, 420px);
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .7));
    animation: shk-shock-bang .7s cubic-bezier(.23, 1, .32, 1);
}

/* --------------------------------------------------------- fin de partie */
.shk-over {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(8, 10, 16, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.shk-over-card {
    width: min(100%, 380px);
    padding: 18px;
    text-align: center;
    background: rgba(22, 27, 40, .94);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
}

.shk-over-title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -.01em;
}

.shk-over-sub {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--shk-soft);
}

.shk-ranking {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    text-align: left;
}

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

.shk-ranking .pts {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--shk-accent);
}

/* ------------------------------------------------------------ animations */
@keyframes shk-halo {
    0%, 100% { box-shadow: 0 0 0 1px rgba(240, 180, 41, .30), 0 0 14px -4px rgba(240, 180, 41, .45); }
    50%      { box-shadow: 0 0 0 2px rgba(240, 180, 41, .60), 0 0 24px -2px rgba(240, 180, 41, .70); }
}

@keyframes shk-drop-in {
    from { opacity: 0; transform: translateY(-16px) scale(.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shk-flip-in {
    from { opacity: 0; transform: rotateY(-90deg) scale(.9); }
    to   { opacity: 1; transform: rotateY(0) scale(1); }
}

@keyframes shk-shock-in {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    76%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes shk-shock-bang {
    0%   { transform: scale(.55) rotate(-5deg); }
    55%  { transform: scale(1.06) rotate(1.5deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Carte qui vient d'être posée : arrivée depuis --fx/--fy (main ou siège). */
@keyframes shk-deal-in {
    from { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, .92)); opacity: .45; }
    to   { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* Carte du pli ramassé : elle rejoint la boîte du vainqueur. */
@keyframes shk-fly-away {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to   { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.28); opacity: 0; }
}

/* Halo du siège / du bouton qui attend le geste du vainqueur. */
@keyframes shk-collect-halo {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 209, 102, .35), 0 0 12px -5px rgba(255, 209, 102, .55); }
    50%      { box-shadow: 0 0 0 2px rgba(255, 209, 102, .70), 0 0 22px -3px rgba(255, 209, 102, .85); }
}

@keyframes shk-shock-pulse {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    100% { opacity: 0; }
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 400px) {
    .shk-stage { --shk-cw: 58px; --shk-ch: 81px; gap: 6px; padding: 6px; }
    .shk-seat-sub { font-size: 12px; }
    .shk-btn { font-size: 14px; min-height: 44px; padding: 0 10px; }
    .shk-chest-card { width: 72px; }
}

/* Grands téléphones (et tablettes tenues en portrait) : l'espace disponible
   sert aux cartes au lieu de rester vide. Ces règles viennent APRÈS le bloc
   « max-width » pour pouvoir l'emporter à largeur égale. */
@media (min-height: 720px) {
    .shk-stage { --shk-cw: 68px; --shk-ch: 95px; }
    .shk-chest-card { width: 96px; }
}

@media (min-height: 840px) and (min-width: 380px) {
    /* 69 px et non 72 : à 387 px de large, 72 empêchait la 5e carte de tenir
       (5x72 + 4x5 = 380 pour 371 disponibles). La main de 9 cartes se posait
       donc en 4+4+1, avec une carte seule sur une troisième rangée — qui se
       lit comme un doublon. À 69 px : 5+4, deux rangées pleines. */
    .shk-stage { --shk-cw: 69px; --shk-ch: 96px; }
}

@media (min-width: 420px) {
    .shk-stage { --shk-cw: 76px; --shk-ch: 106px; }
    .shk-seats { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .shk-stage *,
    .shk-stage *::before,
    .shk-stage *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   Corrections & confort (26/10/2026) : tailles, halo joueur, animations centre
   ========================================================================== */

/* Le joyau « en sécurité » (sac) est un joyau teinté or. */
.shk-icon.bag {
    --i: 4;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) sepia(1) hue-rotate(-12deg) saturate(2.4) brightness(1.05);
}

/* Petit sac doré (SVG) : forme ET couleur distinctes du joyau blanc « en jeu »,
   pour qu'on ne confonde plus les deux compteurs. */
.shk-bag {
    display: inline-block;
    flex: 0 0 auto;
    color: #f0b429;
    vertical-align: -2px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}

/* Cartes posées sur la table : plus grandes que celles de la main, pour lire
   le nombre de joyaux / les icônes. La découpe est en pourcentages, donc la
   taille ne casse pas l'image. */
.shk-trick .shk-card {
    width: calc(var(--shk-cw) * 1.28);
    height: calc(var(--shk-ch) * 1.28);
}

/* Coffre révélé : plus grand au centre. */
.shk-chest-card {
    width: 120px;
}

/* Le liseré d'une carte posée dit SON ATOUT, plus le joueur : un contour à la
   couleur du joueur faisait croire que c'était la couleur de la carte. Qui a
   joué est désormais dit par la pastille d'avatar sous la carte, cerclée de la
   couleur du joueur (voir .shk-trick-who). */
.shk-trick-slot[data-suit="B"] .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-blue); }
.shk-trick-slot[data-suit="Y"] .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-yellow); }
.shk-trick-slot[data-suit="R"] .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-red); }
.shk-trick-slot[data-suit="G"] .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-green); }
.shk-trick-slot[data-suit=""] .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 255, 255, .22); }
.shk-trick-slot.is-winner .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 3px #ffd166; }
.shk-trick-slot[data-suit="B"].is-winner .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-blue), 0 0 14px 2px rgba(255, 209, 102, .55); }
.shk-trick-slot[data-suit="Y"].is-winner .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-yellow), 0 0 14px 2px rgba(255, 209, 102, .55); }
.shk-trick-slot[data-suit="R"].is-winner .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-red), 0 0 14px 2px rgba(255, 209, 102, .55); }
.shk-trick-slot[data-suit="G"].is-winner .shk-card { box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 2px var(--shk-suit-green), 0 0 14px 2px rgba(255, 209, 102, .55); }

/* Bouton « soigner un poison » (choix de potion). */
.shk-btn.is-cure {
    color: #04180c;
    background: linear-gradient(180deg, #7ce38f, #34a853);
    box-shadow: 0 0 0 1px rgba(70, 200, 100, .45);
}
.shk-btn.is-cure .shk-icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

/* Récapitulatif de fin de manche (affiché dans la zone de table). */
.shk-round-summary {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: min(100%, 300px);
}
.shk-round-title {
    font-size: 16px;
    font-weight: 750;
    text-align: center;
    color: #fff;
    margin-bottom: 2px;
}
.shk-round-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    font-size: 15px;
}
.shk-round-name { color: var(--shk-soft); }
.shk-round-pts {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--shk-accent);
}

/* Icône tournoyante au centre (joyau / poison / potion) avec « +N ». */
.shk-center-effect {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 32;
    pointer-events: none;
    animation: shk-center-fade 2.2s ease-out forwards;
}
.shk-center-effect .shk-icon {
    width: 46px;
    height: 46px;
    animation: shk-center-spin 2.2s cubic-bezier(.23, 1, .32, 1) forwards;
}
.shk-center-effect b {
    font-size: 28px;
    font-weight: 800;
    color: #ffd76a;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
    font-variant-numeric: tabular-nums;
}
@keyframes shk-center-spin {
    0%   { transform: rotate(0deg) scale(.3); opacity: 0; }
    25%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: rotate(360deg) scale(1.15); opacity: 0; }
}
@keyframes shk-center-fade {
    0%   { opacity: 0; transform: translate(-50%, -34%) scale(.5); }
    10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    70%  { opacity: 1; transform: translate(-50%, -56%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -86%) scale(.9); }
}

/* ==========================================================================
   Coffre animé (phase de défi)
   ========================================================================== */

/* Conteneur du pli (rempli hors phase coffre). */
.shk-table-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

/* La scène du coffre recouvre la table pendant le défi. */
.shk-chest-stage {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Collé en BAS de la table : le coffre, son halo et la carte qui en
       jaillit débordaient sur les boîtes adverses quand la scène était
       centrée (le halo du coffre porte 16 px au-dessus de sa boîte). */
    justify-content: flex-end;
    gap: 8px;
    padding: 10px;
    padding-bottom: 6px;
    box-sizing: border-box;
}

.shk-chest-stage.hidden { display: none; }

.shk-chest-stage.is-clickable { cursor: pointer; }

.shk-chest-stage.is-clickable .shk-chest-lottie {
    filter: drop-shadow(0 0 16px rgba(240, 180, 41, .5));
    animation: shk-chest-idle 2.4s ease-in-out infinite;
}

@keyframes shk-chest-idle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.shk-chest-lottie {
    /* Un peu plus gros : la carte doit jaillir du coffre, pas d'à côté.
       `--chest-size` est recalé en JS sur la hauteur RÉELLE de la table, pour
       que le coffre et la carte ne débordent jamais sur les boîtes du haut. */
    width: var(--chest-size, 168px);
    height: var(--chest-size, 168px);
    flex: 0 0 auto;
}

.shk-chest-revealed {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    /* Place pour les badges qui flottent au-dessus des cartes. */
    padding-top: 28px;
    /* Hauteur RÉSERVÉE même vide : sans elle, l'arrivée de la carte agrandit
       la colonne et le coffre remonte de ~60 px au moment où la carte sort. */
    min-height: 116px;
}

/* Carte qui sort du coffre : elle « jaillit » vers le bas après l'ouverture. */
.shk-chest-revealed .shk-chest-card {
    width: 96px;
    animation: none;
}
.shk-chest-revealed .shk-chest-card.is-new {
    animation: shk-card-out .5s cubic-bezier(.23, 1, .32, 1) backwards;
}

.shk-chest-revealed .shk-chest-card.is-poison {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 0 2px rgba(229, 72, 77, .65);
}

@keyframes shk-card-out {
    from { opacity: 0; transform: translateY(-22px) scale(.65) rotate(-7deg); }
    to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.shk-chest-hint {
    font-size: 13px;
    color: var(--shk-soft);
    text-align: center;
    max-width: 250px;
}

@media (max-width: 400px) {
    .shk-chest-revealed .shk-chest-card { width: 78px; }
    .shk-chest-revealed { min-height: 98px; }
}

/* La taille du coffre est calée en JS sur la hauteur réelle de la table
   (`fitChestStage`), pas par une media query : c'est la TABLE qui décide. */

/* ==========================================================================
   Détail des gains (d'où vient chaque joyau)
   ========================================================================== */

.shk-gain {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 5px 2px;
    padding: 7px 10px;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(240, 180, 41, .14), rgba(240, 180, 41, .06));
    border: 1px solid rgba(240, 180, 41, .32);
    animation: shk-gain-in .3s cubic-bezier(.23, 1, .32, 1) backwards;
}

.shk-gain-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #ffd873;
}

.shk-gain-head b { color: #fff; }

.shk-gain-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--shk-soft);
}

.shk-gain-lines span::before {
    content: "·";
    margin-right: 5px;
    color: rgba(240, 180, 41, .7);
}

@keyframes shk-gain-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Carte de coffre + gain personnel (badge AU-DESSUS de la carte). */
.shk-chest-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shk-chest-gain {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: #ffd873;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
    animation:
        shk-pot-in .62s cubic-bezier(.34, 1.4, .64, 1) backwards,
        shk-float 3.4s ease-in-out .62s infinite;
}

.shk-chest-gain.is-poison {
    color: #ff9b9b;
}

/* Le gain de joyaux reste DORÉ, même sur une carte poison (le « +1 » est un
   joyau, pas un effet du poison). */
.shk-gain-jewel {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #ffd873;
}

.shk-chest-gain .shk-icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Joyaux posés sur les cartes du pli (carte à joyau ou carte face cachée)
   ========================================================================== */

.shk-trick-slot {
    position: relative;
    /* Cartes superposées : chacune recouvre la précédente, la dernière est
       au-dessus (z-index posé en ligne = ordre de pose). Bande visible ~55 %,
       pour qu'on voie bien chaque carte derrière. */
    margin-left: calc(var(--shk-cw) * 1.28 * -0.45);
}

.shk-trick-slot:first-child {
    margin-left: 0;
}

.shk-pot {
    position: absolute;
    top: calc(-1 * var(--shk-float-gap));
    /* Centré sur la bande VISIBLE de la carte (les suivantes la recouvrent). */
    left: 27.5%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .65));
    /* Entrée (rebond) puis flottement continu au-dessus de la carte. */
    animation:
        shk-pot-in .62s cubic-bezier(.34, 1.4, .64, 1) backwards,
        shk-float 3.4s ease-in-out .62s infinite;
}

@keyframes shk-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}

.shk-pot .shk-icon {
    width: 24px;
    height: 24px;
}

.shk-pot .shk-icon.jewel {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)) drop-shadow(0 0 4px rgba(255, 255, 255, .5));
}

@keyframes shk-pot-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.5); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.12); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Les badges ne descendent plus SUR la carte sous 400 px : ils gardent le
   même écart que sur grand écran, sinon ils se confondent avec l'illustration. */

/* ==========================================================================
   Carte qui jaillit du coffre : grande au centre, puis rejoint sa place
   ========================================================================== */

.shk-chest-fly {
    position: absolute;
    z-index: 40;
    pointer-events: none;
    transform-origin: center center;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .65));
    will-change: transform, opacity;
}

.shk-chest-fly-card {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: url("../images/games/shock/chest_cards.webp");
    background-repeat: no-repeat;
    background-size: 600% 500%;
    background-position: calc(var(--c) * 20%) calc(var(--r) * 25%);
    box-shadow: 0 0 0 2px rgba(255, 210, 120, .6), 0 12px 34px rgba(0, 0, 0, .62);
}

.shk-chest-fly-badge {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.shk-chest-fly-badge .shk-icon {
    width: 52px;
    height: 52px;
    animation: shk-fly-spin 1.05s cubic-bezier(.45, 0, .55, 1) infinite;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8));
}

@keyframes shk-fly-spin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.15); }
    to   { transform: rotate(360deg) scale(1); }
}

@media (max-width: 400px) {
    .shk-chest-fly-badge .shk-icon { width: 34px; height: 34px; }
}

/* Texte secondaire dans le journal (provenance, détail). */
.sf-sub {
    color: var(--shk-soft);
    font-size: .86em;
    opacity: .92;
}

.shk-hint-out {
    color: #ffc46b;
    background: rgba(240, 180, 41, .08);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12.5px;
    line-height: 1.3;
}

/* ==========================================================================
   Annonce de sortie de manche (élimination / retrait)
   --------------------------------------------------------------------------
   Remplace le gros logo SHOCK! qui s'affichait à chaque élimination : un
   message nominatif, identique pour tous, lisible d'un coup d'œil.
   ========================================================================== */

.shk-announce {
    /* Bandeau HAUT, au-dessus des sièges : il ne recouvre jamais les cartes de
       la table (c'est ce qui rendait l'élimination illisible quand la carte
       de coffre était encore en scène). */
    position: absolute;
    left: 50%;
    /* Sous la barre d'information (Manche / Atout) et au-dessus de la table :
       le bandeau couvre les sièges, jamais les cartes ni la barre. */
    top: 44px;
    transform: translate(-50%, 0);
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 12px 16px;
    max-width: min(92%, 460px);
    border-radius: 14px;
    background: rgba(8, 10, 16, .82);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    animation: shk-announce-in .34s cubic-bezier(.23, 1, .32, 1) backwards,
               shk-announce-out .4s ease-in forwards 2.9s;
}

.shk-announce-row {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    font-size: 15.5px;
    line-height: 1.25;
    color: #fff;
}

.shk-announce-dots { display: inline-flex; gap: 3px; flex: 0 0 auto; }

/* Le nom et le verbe forment UN seul paragraphe : il se coupe proprement en
   deux lignes au lieu d'empiler trois fragments. */
.shk-announce-line { text-align: left; }
.shk-announce-line b { font-weight: 800; }

.shk-announce-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: rgb(var(--pc));
    box-shadow: 0 0 10px rgb(var(--pc));
}

.shk-announce-what { color: rgba(255, 255, 255, .86); }

.shk-announce-why {
    /* Sur la MÊME ligne que le nom : une ligne par groupe, pas une par joueur. */
    flex: 0 0 auto;
    font-size: 12.5px;
    color: #ffb4b4;
}

@keyframes shk-announce-in {
    from { opacity: 0; transform: translate(-50%, -10px) scale(.94); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes shk-announce-out {
    to { opacity: 0; transform: translate(-50%, -8px) scale(.97); }
}

/* ==========================================================================
   Loterie de l'atout en début de manche
   ========================================================================== */

/* ==========================================================================
   Séquence de début de manche : distribution puis retournement de l'atout
   --------------------------------------------------------------------------
   Un seul overlay, dans la table : la pioche au centre (taille de la carte de
   loterie), les cartes partent une à une vers chaque joueur, puis la carte du
   dessus se retourne et rejoint la pastille « Atout ».
   ========================================================================== */

.shk-round-intro {
    position: absolute;
    inset: 0;
    z-index: 46;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 8px;
    background: rgba(8, 10, 16, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: none;
    animation: shk-round-bg .25s ease-out backwards;
}

/* La pioche : trois dos décalés + le compteur de cartes restantes. */
.shk-deal-stack {
    position: relative;
    width: var(--dcw, 128px);
    height: var(--dch, 178px);
}

.shk-deal-stack .shk-card {
    position: absolute;
    inset: 0;
    width: var(--dcw, 128px);
    height: var(--dch, 178px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14);
    transition: box-shadow .25s ease-out;
}

.shk-deal-stack .d2 { transform: translate(3px, -3px) rotate(2deg); opacity: .85; }
.shk-deal-stack .d3 { transform: translate(6px, -6px) rotate(4deg); opacity: .7; }

.shk-deal-stack .shk-card.is-trump {
    box-shadow: 0 0 0 3px #ffd166, 0 16px 38px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 209, 102, .45);
}

/* Message de distribution, sous la pioche : dit explicitement ce qui se passe
   quand on complète les mains en début de manche. */
.shk-deal-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 34px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(8, 10, 16, .8);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
}

.shk-deal-count {
    position: absolute;
    right: -14px;
    bottom: -14px;
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(8, 10, 16, .9);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 800;
    color: #ffd873;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Carte en vol pendant la distribution : posée en absolu dans la scène. */
.shk-deal-fly {
    position: absolute;
    z-index: 48;
    pointer-events: none;
    transform-origin: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}

/* Message d'atout : le LOGO de la couleur, puis le texte. */
.shk-round-caption {
    /* Posé en absolu SOUS la pioche : le paquet reste exactement au centre de
       la table pendant le retournement, le message ne le pousse pas. */
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(8, 10, 16, .86);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 15px;
    line-height: 1.2;
    color: #fff;
    animation: shk-caption-in .26s cubic-bezier(.23, 1, .32, 1) backwards;
}
.shk-round-caption .shk-icon { width: 22px; height: 22px; }
.shk-round-caption b { color: #ffd873; font-weight: 800; }

@keyframes shk-caption-in {
    from { opacity: 0; transform: translate(-50%, 6px) scale(.94); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes shk-round-bg {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* La pastille « Atout » clignote quand la carte vient s'y ranger. */
.shk-bar-chip.is-flash {
    animation: shk-chip-flash .45s ease-out 2;
}

@keyframes shk-chip-flash {
    0%, 100% { background: rgba(255, 255, 255, .04); }
    50%      { background: rgba(255, 209, 102, .28); }
}

/* ==========================================================================
   Scène du coffre maintenue pendant une séquence (carte qui élimine)
   ========================================================================== */

.shk-chest-stage.is-held {
    z-index: 44;
    background: rgba(8, 10, 16, .72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.shk-chest-stage.is-held.is-clickable { cursor: default; }

/* Choix de potion : le nombre de poisons du type et l'avertissement de choc. */
.shk-btn.is-cure b {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: 13px;
}

.shk-cure-warn {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(180, 20, 20, .85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 400px) {
    .shk-announce { padding: 10px 12px; }
    .shk-announce-row { font-size: 14px; }
    .shk-round-caption { font-size: 13.5px; padding: 6px 10px; }
    .shk-deal-count { right: -8px; bottom: -10px; }
}

/* Choix de potion : panneau compact, deux boutons pleine largeur, jamais
   sous la barre du navigateur (la main est masquée pendant le choix). */
.shk-actions.is-potion {
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 6px;
}
.shk-actions.is-potion .shk-btn {
    flex: 1 1 100%;
    min-height: 44px;
    justify-content: center;
}

/* Écran court : le pli doit tenir dans sa rangée (min 96 px) sans rogner la
   pastille d'auteur. On réduit un peu la carte plutôt que de laisser déborder. */
@media (max-height: 620px) {
    .shk-stage { --shk-float-gap: 28px; }
    /* Écran court : le libellé doit rester DANS la table, sinon il recouvre
       les compteurs du joueur (mesuré : 24 px de débordement). */
    .shk-deal-label { margin-top: 6px; font-size: 10.5px; padding: 2px 8px; }
    .shk-trick .shk-card {
        width: calc(var(--shk-cw) * 1.06);
        height: calc(var(--shk-ch) * 1.06);
    }
    .shk-trick-who { width: 22px; height: 22px; }
}

/* Le paquet est vu en perspective : le retournement de l'atout tourne en 3D
   au lieu de s'écraser à plat (effet « saccadé » signalé). */
.shk-deal-stack { perspective: 900px; }

/* Flash de lumière au moment où la face de l'atout apparaît. */
.shk-deal-stack .shk-card.is-trump {
    animation: shk-trump-glow .95s ease-out;
}

@keyframes shk-trump-glow {
    0%   { filter: brightness(1.7) saturate(1.2); }
    100% { filter: brightness(1) saturate(1); }
}

/* Carte distribuée mais pas encore arrivée : invisible, même après un rendu. */
.shk-card.is-pending-deal { visibility: hidden; }

/* La barre d'actions garde sa hauteur même sans bouton : sinon le plateau
   s'agrandit et se rétracte à chaque apparition de bouton. */
.shk-actions { min-height: 48px; }