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

   Planche cards.webp : 10 colonnes × 6 lignes
     lignes 0→3 = trèfle, pique, cœur, carreau (rangs 1→10)
     ligne  4   = Payoo 1→10 ; ligne 5 = Payoo 11→20
   Aucun dos n'est fourni : il est dessiné en CSS (.pap-card.is-back).

   Découpage en POURCENTAGES (background-size: 1000% 600%), donc juste à toute
   taille d'affichage.
   ========================================================================== */

.pap-stage {
    --pap-cw: 62px;
    --pap-ch: 105px;
    --pap-radius: 7px;
    --pap-line: rgba(255, 255, 255, .10);
    --pap-soft: rgba(255, 255, 255, .62);
    --pap-dim: rgba(255, 255, 255, .40);
    --pap-accent: #ff8a3d;      /* papaye */
    --pap-accent-2: #ffd166;
    --pap-ok: #46a758;
    --pap-danger: #e5484d;

    position: relative;
    display: grid;
    /* Bandeau et main gardent leur hauteur ; la TABLE absorbe l'espace libre. */
    grid-template-rows: auto auto minmax(96px, 1fr) auto auto;
    /* Une colonne bornée : sans `minmax(0, 1fr)`, une main en `nowrap` impose sa
       largeur de contenu à la grille et déborde de l'écran au lieu de défiler. */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    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: #f2f4f8;
    font-size: 14px;
    font-family: inherit;
    background-color: #0b1512;
    background-image:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 138, 61, .12) 0%, transparent 62%),
        radial-gradient(90% 70% at 50% 110%, rgba(70, 167, 88, .16) 0%, transparent 60%),
        linear-gradient(rgba(8, 14, 12, .90), rgba(8, 14, 12, .96)),
        url("../images/games/papayoo/icon-shuffle.svg");
    background-size: auto, auto, auto, 140px;
    background-position: center, center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-blend-mode: normal, normal, normal, soft-light;
    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.pap-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.pap-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

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

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

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

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

.pap-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}

.pap-bar-item.is-muted { color: var(--pap-dim); }

.pap-bar-papayoo {
    color: var(--pap-accent-2);
    font-weight: 650;
}

.pap-bar-spacer { flex: 1 1 auto; }

.pap-bar-dealer {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pap-soft);
    font-size: 13px;
}

.pap-dice-mini {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .28);
}

/* Symboles de couleur : planche suits.webp en 2×2
   (cœur, carreau / pique, trèfle). */
.pap-suit {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-image: url("../images/games/papayoo/suits.webp");
    background-size: 200% 200%;
    background-repeat: no-repeat;
}

.pap-suit[data-suit="H"] { background-position: 0 0; }
.pap-suit[data-suit="D"] { background-position: 100% 0; }
.pap-suit[data-suit="S"] { background-position: 0 100%; }
.pap-suit[data-suit="C"] { background-position: 100% 100%; }
.pap-suit[data-suit="P"] {
    background: radial-gradient(circle at 50% 50%, #444b60, #1b2032 70%);
    border-radius: 4px;
}

/* ------------------------------------------------------------------ sièges */
.pap-seats {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* 5 adversaires et plus : chaque siège tient sur UNE ligne (nom + cartes +
   plis + score). Trois rangées compactes libèrent la hauteur nécessaire au
   pli, qui compterait sinon jusqu'à 8 cartes dans 96 px. */
.pap-seats.is-dense .pap-seat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
}

.pap-seats.is-dense .pap-seat-head {
    flex: 1 1 auto;
    min-width: 0;
}

.pap-seats.is-dense .pap-seat-name { font-size: 13px; }

.pap-seats.is-dense .pap-seat-sub {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 0;
    font-size: 12px;
}

.pap-seats.is-dense .pap-seat-tag { display: none; }

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

.pap-seat.is-turn {
    border-color: rgba(255, 138, 61, .80);
    box-shadow: 0 0 0 1px rgba(255, 138, 61, .35), 0 0 18px -4px rgba(255, 138, 61, .55);
    animation: pap-halo 2.1s ease-in-out infinite;
}

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

.pap-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;
}

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

.pap-seat-tag.is-wait { color: var(--pap-dim); }

.pap-seat-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 5px;
    font-size: 13px;
    color: var(--pap-soft);
    font-variant-numeric: tabular-nums;
}

.pap-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.pap-stat.is-score {
    font-weight: 700;
    color: #fff;
}

.pap-mini-card {
    width: 11px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(150deg, #2b3350, #1a2036);
    border: 1px solid rgba(255, 255, 255, .30);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .18), 2px 0 0 rgba(255, 255, 255, .10);
}

/* ------------------------------------------------------------------- table */
.pap-table {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 8px;
    background:
        radial-gradient(80% 70% at 50% 45%, rgba(34, 84, 56, .55), rgba(12, 28, 20, .85) 72%),
        linear-gradient(#0f2a1e, #0a1c15);
    border: 1px solid rgba(120, 200, 150, .16);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
}

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

.pap-trick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pap-trick-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.pap-trick-who {
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--pap-soft);
}

/* Pli serré (nombreuses cartes) : on masque les prénoms, la place manque et
   l'ordre de jeu reste lisible grâce aux halos et au bandeau. */
.pap-trick.is-compact .pap-trick-who { display: none; }

.pap-trick-slot.is-winner .pap-card {
    box-shadow: 0 0 0 2px rgba(255, 209, 102, .85), 0 6px 14px rgba(0, 0, 0, .45);
}

/* Pli précédent : petit, en retrait, dans la place libre à gauche. */
.pap-last {
    position: absolute;
    left: 8px;
    top: 50%;
    display: flex;
    gap: 2px;
    transform: translateY(-50%) scale(.62);
    transform-origin: left center;
    opacity: .38;
    pointer-events: none;
}

/* Récapitulatif de manche ------------------------------------------------ */
.pap-recap {
    width: min(100%, 340px);
    padding: 6px 4px;
    text-align: center;
}

.pap-recap-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pap-recap-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.pap-recap-list li {
    display: grid;
    grid-template-columns: 1fr 58px 52px;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font-size: 14px;
    border-radius: 6px;
}

.pap-recap-list li:nth-child(even) { background: rgba(255, 255, 255, .04); }

.pap-recap-list li.is-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pap-dim);
}

.pap-recap-list li.is-zero .pts { color: var(--pap-ok); }

.pap-recap-list .pts { font-weight: 700; }
.pap-recap-list .tot { color: var(--pap-soft); }

.pap-recap-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--pap-dim);
}

/* -------------------------------------------------------------- ma zone */
.pap-me {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    min-width: 0;
}

.pap-me-counters {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pap-me-counters::-webkit-scrollbar { display: none; }

.pap-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 13px;
    color: var(--pap-soft);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--pap-line);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

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

.pap-chip.is-total {
    color: #fff;
    border-color: rgba(255, 138, 61, .45);
    background: rgba(255, 138, 61, .14);
}

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

.pap-hint b { color: var(--pap-accent-2); }

.pap-hint.is-warn { color: var(--pap-accent); }

.pap-hand {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 5px;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 40svh;
    /* Réserve pour la carte qui se soulève : sans elle, `overflow` la rogne. */
    padding: 14px 2px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    scrollbar-width: thin;
}

/* Main de 15 à 20 cartes sur un téléphone : plutôt que quatre lignes dont la
   moitié est coupée par le `max-height`, les cartes se chevauchent sur UNE
   ligne. Le rang et la couleur restent dans la tranche visible (coin haut
   gauche), la ligne se fait défiler horizontalement, et la table garde sa
   hauteur. Les valeurs restent lisibles ; rien n'est caché verticalement. */
@media (max-width: 520px) {
    .pap-hand {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 16px 10px 8px;
        gap: 0;
        touch-action: pan-x;
        scrollbar-width: none;
    }

    .pap-hand::-webkit-scrollbar { display: none; }

    .pap-hand .pap-card { margin-left: -20px; }
    .pap-hand .pap-card:first-child { margin-left: 0; }

    /* La carte cochée/sélectionnée passe devant et s'écarte pour rester lisible. */
    .pap-hand .pap-card.is-selected,
    .pap-hand .pap-card.is-playable:hover {
        z-index: 4;
        margin-right: 8px;
    }
}

/* --------------------------------------------------------------- cartes */
.pap-card {
    position: relative;
    flex: 0 0 auto;
    width: var(--pap-cw);
    height: var(--pap-ch);
    padding: 0;
    border: 0;
    border-radius: var(--pap-radius);
    background-color: #10131c;
    background-image: url("../images/games/papayoo/cards.webp");
    background-size: 1000% 600%;
    background-position: calc(var(--c, 0) * 11.1111%) calc(var(--r, 0) * 20%);
    background-repeat: no-repeat;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .14);
    transition: transform .16s cubic-bezier(.23, 1, .32, 1), box-shadow .16s;
    cursor: pointer;
}

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

.pap-card.is-playable {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 209, 102, .55);
}

.pap-card.is-blocked {
    filter: brightness(.5) saturate(.55);
    cursor: not-allowed;
}

.pap-card.is-selectable { cursor: pointer; }

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

.pap-card.is-static { cursor: default; }

/* Dos dessiné en CSS (aucun dos dans la planche fournie). */
.pap-card.is-back {
    background-image:
        radial-gradient(circle at 50% 42%, rgba(255, 209, 102, .16), transparent 58%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .07) 0 2px, transparent 2px 7px),
        linear-gradient(150deg, #2a3047, #161a29);
    background-size: auto, auto, auto;
}

.pap-card.is-back::after {
    content: "PAYOO";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .30);
    transform: rotate(-90deg);
}

.pap-card-tag {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--pap-accent);
    color: #1a1205;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

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

.pap-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #1a1205;
    background: linear-gradient(180deg, var(--pap-accent-2), var(--pap-accent));
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: transform .12s cubic-bezier(.23, 1, .32, 1), opacity .12s;
    box-shadow: 0 4px 12px -4px rgba(255, 138, 61, .55);
}

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

.pap-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.pap-btn.is-secondary {
    color: #f2f4f8;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--pap-line);
    box-shadow: none;
}

/* --------------------------------------------------------------- fin */
.pap-over {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(5, 8, 12, .74);
    backdrop-filter: blur(10px) saturate(140%);
    animation: pap-fade .24s ease-out both;
}

.pap-over-card {
    width: min(100%, 360px);
    padding: 18px 16px;
    background: rgba(18, 24, 38, .94);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.pap-over-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pap-accent-2);
}

.pap-over-sub { margin: 0; font-size: 15px; font-weight: 650; }

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

.pap-ranking {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.pap-ranking li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 7px;
}

.pap-ranking li:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.pap-ranking li:first-child { color: var(--pap-accent-2); font-weight: 700; }

.pap-ranking .pts { font-weight: 700; }

/* ------------------------------------------------------------ animations */
@keyframes pap-halo {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 138, 61, .30), 0 0 14px -6px rgba(255, 138, 61, .45); }
    50%      { box-shadow: 0 0 0 2px rgba(255, 138, 61, .55), 0 0 22px -4px rgba(255, 138, 61, .70); }
}

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

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

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

@media (prefers-reduced-motion: reduce) {
    .pap-card.is-fresh,
    .pap-seat.is-turn,
    .pap-over {
        animation: none;
    }
    .pap-card,
    .pap-btn {
        transition: none;
    }
}

/* --------------------------------------------------------------- écrans */
@media (min-width: 420px) {
    .pap-stage {
        --pap-cw: 68px;
        --pap-ch: 115px;
    }
}

@media (min-width: 640px) {
    .pap-stage {
        --pap-cw: 74px;
        --pap-ch: 125px;
        padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
        gap: 10px;
    }
    .pap-seats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pap-seats.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Écrans très bas en paysage : la main ne doit pas manger la table. La règle ne
   s'applique PAS au portrait étroit, où la main est déjà sur une seule ligne
   défilante (sinon `max-height` la rognerait). */
@media (max-height: 560px) and (min-width: 521px) {
    .pap-hand { max-height: 34svh; }
    .pap-stage { grid-template-rows: auto auto minmax(72px, 1fr) auto auto; }
}

/* Téléphone courant, en portrait : on récupère quelques pixels pour la table
   en réduisant légèrement les cartes de la main. */
@media (max-height: 640px) and (min-width: 340px) {
    .pap-stage { --pap-cw: 58px; --pap-ch: 98px; }
}

/* Une carte sélectionnée ne doit jamais être rognée par le conteneur de main. */
.pap-hand .pap-card.is-selected { padding-bottom: 0; }


/* ==========================================================================
   Mise en scène : journal, vol des cartes, bandeau du pli, dé
   --------------------------------------------------------------------------
   Toutes les animations sont en `transform`/`opacity` (composited) et
   désactivées sous `prefers-reduced-motion`.
   ========================================================================== */

.pap-bar { gap: 7px; }

.pap-bar-round { flex: 0 0 auto; }
.pap-bar-papayoo, .pap-bar-item { flex: 0 0 auto; }

/* Dernier événement : une ligne, toujours visible, sans consommer de hauteur. */
.pap-ticker {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--pap-soft);
}

.pap-ticker.is-empty { color: var(--pap-dim); }

/* --------------------------------------------------------------------------
   Bandeau + journal communs (assets/js/engine/StageFeed.js)
   --------------------------------------------------------------------------
   Le bouton 📜 du composant occupe le coin haut-droit : la barre lui réserve la
   place (sinon la ligne d'état passerait dessous), et le bandeau se pose SOUS
   la barre pour ne pas masquer la manche ni la couleur du Papayoo.
   ========================================================================== */
.pap-host .pap-bar { padding-right: 42px; }

.pap-host .sf-layer .sf-banner {
    top: 42px;
    left: 6px;
    right: 6px;
}

/* Carte jouée : elle vole depuis la main ou le siège de son auteur. */
.pap-card.is-arriving {
    z-index: 6;
    animation: pap-fly-in .42s cubic-bezier(.23, 1, .32, 1) both;
}

@keyframes pap-fly-in {
    0%   { transform: translate(var(--fx, 0), var(--fy, 0)) scale(1.10) rotate(-4deg); opacity: .35; }
    60%  { opacity: 1; }
    100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
}

/* Calque des clones qui partent vers le camp vainqueur. */
.pap-fly-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.pap-ghost {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .55);
    will-change: transform, opacity;
}

/* Le camp qui ramasse est signalé, puis « encaisse ». */
.pap-seat.is-taking {
    border-color: rgba(255, 209, 102, .90);
    box-shadow: 0 0 0 2px rgba(255, 209, 102, .35), 0 0 20px -4px rgba(255, 209, 102, .65);
}

.pap-seat.is-gain,
.pap-me-counters.is-gain {
    animation: pap-gain .5s ease-out 2;
}

@keyframes pap-gain {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Dé à 8 faces : quatre triangles (4 couleurs × 2 faces sur le vrai dé),
   il tourne puis s'arrête sur la couleur tirée. */
.pap-die-ov {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: radial-gradient(circle at 50% 45%, rgba(8, 14, 20, .70), rgba(8, 14, 20, .93));
    animation: pap-fade .2s ease-out both;
}

.pap-die-ov.is-out { animation: pap-fade-out .26s ease-in both; }

.pap-die {
    position: relative;
    width: 104px;
    height: 104px;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
    animation: pap-die-spin 1.25s cubic-bezier(.2, .7, .25, 1) both;
}

.pap-die.is-landed {
    animation: pap-die-bounce .45s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes pap-die-spin {
    0%   { transform: rotate(-30deg) scale(.55); opacity: 0; }
    12%  { opacity: 1; }
    70%  { transform: rotate(calc(720deg + var(--land, 0deg))) scale(1.10); }
    100% { transform: rotate(calc(1000deg + var(--land, 0deg))) scale(1); }
}

@keyframes pap-die-bounce {
    0%   { transform: rotate(calc(1000deg + var(--land, 0deg))) scale(1); }
    45%  { transform: rotate(calc(1000deg + var(--land, 0deg))) scale(1.12); }
    100% { transform: rotate(calc(1000deg + var(--land, 0deg))) scale(1); }
}

.pap-die-face {
    position: absolute;
    inset: 0;
    display: block;
    transition: filter .2s;
}

.pap-die-face[data-suit="C"] {
    clip-path: polygon(50% 50%, 0 0, 100% 0);
    background: linear-gradient(160deg, #e9d64f, #b9a521);
}
.pap-die-face[data-suit="S"] {
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    background: linear-gradient(200deg, #3b7fc4, #23507f);
}
.pap-die-face[data-suit="H"] {
    clip-path: polygon(50% 50%, 100% 100%, 0 100%);
    background: linear-gradient(20deg, #ef6a9f, #b33263);
}
.pap-die-face[data-suit="D"] {
    clip-path: polygon(50% 50%, 0 100%, 0 0);
    background: linear-gradient(340deg, #f09a52, #c1621f);
}

.pap-die-face .pap-suit {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

.pap-die-face[data-suit="C"] .pap-suit { left: 50%; top: 22%; }
.pap-die-face[data-suit="S"] .pap-suit { left: 78%; top: 50%; }
.pap-die-face[data-suit="H"] .pap-suit { left: 50%; top: 78%; }
.pap-die-face[data-suit="D"] .pap-suit { left: 22%; top: 50%; }

.pap-die-face.is-win {
    filter: brightness(1.35) saturate(1.2) drop-shadow(0 0 10px rgba(255, 209, 102, .95));
    z-index: 2;
}

.pap-die-txt {
    max-width: 90%;
    font-size: 13px;
    color: #f2f4f8;
    text-align: center;
    line-height: 1.4;
}

.pap-die-txt b { color: var(--pap-accent-2); }

.pap-die-txt .pap-suit {
    display: inline-block;
    vertical-align: -3px;
    margin: 0 1px;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .pap-card.is-arriving,
    .pap-die,
    .pap-die.is-landed,
    .pap-seat.is-gain,
    .pap-me-counters.is-gain {
        animation: none !important;
    }
    .pap-card.is-arriving { transform: none; }
}

/* ==========================================================================
   Ordre de jeu lisible + couleur des joueurs (25/10/2026)
   --------------------------------------------------------------------------
   Le pli est un éventail serré : la carte qui vient d'être posée est la plus
   grande et porte le prénom, les précédentes se chevauchent de 30 % pour que
   l'ordre se lise de gauche à droite. Chaque carte est cerclée de la couleur
   de son auteur ; le pli remporté n'est plus affiché en fantôme (il part dans
   la pile du joueur, comptée en fin de manche).
   ========================================================================== */

.pap-trick {
    gap: 0;
    flex-wrap: nowrap;
    align-items: flex-end;
}

.pap-trick-slot {
    margin-left: calc(var(--pap-cw, 62px) * -0.30);
    transform: translateY(calc(var(--i, 0) * 2px));
}

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

/* La couleur de l'auteur, en liseré (l'ombre reste disponible pour les états). */
.pap-trick-slot[data-user] .pap-card {
    outline: 2px solid rgb(var(--pc, 139 147 167) / .9);
    outline-offset: -2px;
}

/* Les prénoms sous toutes les cartes se chevauchaient : seul le dernier parle. */
.pap-trick-slot .pap-trick-who {
    display: none;
}

.pap-trick-slot.is-current {
    z-index: 6;
}

.pap-trick-slot.is-current .pap-card {
    transform: scale(1.22) translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 0 0 3px rgba(255, 209, 102, .9);
    z-index: 6;
}

.pap-trick-slot.is-current .pap-trick-who {
    display: block;
    max-width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--pc, 255 255 255));
}

/* Sièges : cadre et prénom à la couleur du joueur. */
.pap-seat {
    border-color: rgb(var(--pc, 139 147 167) / .55);
}

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

/* Ma main : liseré de MA couleur (posée sur la scène). */
.pap-hand .pap-card {
    outline: 2px solid rgb(var(--pc, 139 147 167) / .85);
    outline-offset: -2px;
}

.pap-me-counters .pap-chip.is-total {
    border-color: rgb(var(--pc, 255 209 102) / .6);
}