/* =====================================================================
   PALIFICUP · PERUDO — thème « table de jeu »
   Feuille de style autonome : tokens + composants de la table.
   Préfixe de toutes les classes : .pp-  (aucun conflit avec l'existant)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:wght@400;600;700;800&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Fond et texte, repris du site palificup.fr */
  --pp-cream:        #FDF5EC;   /* fond de page                        */
  --pp-cream-2:      #FFF8F0;   /* en-tête, fonds de boutons clairs    */
  --pp-peach:        #FDE8D0;   /* pastilles d'info                    */
  --pp-peach-2:      #FFF1E0;   /* boutons ronds                       */
  --pp-line:         #F0D0B0;   /* bordures                            */
  --pp-ink:          #1A0800;   /* texte principal                     */
  --pp-ink-dim:      #7A4E28;   /* texte secondaire                    */
  --pp-label:        #B04F00;   /* petits libellés en capitales        */
  --pp-orange-dark:  #C05A00;   /* titre du logo, intertitres          */

  /* Orange Perudo (rail de la table, bouton principal) */
  --pp-orange:       #E85500;
  --pp-orange-hi:    #FF8E33;
  --pp-orange-lo:    #B43E00;

  /* Bleu du dé du logo (tapis, bouton Annoncer) */
  --pp-blue:         #0645D9;
  --pp-blue-hi:      #2D6BF0;
  --pp-blue-lo:      #04309A;

  /* Jaune du dé du logo (liseré, halos, chiffres) */
  --pp-yellow:       #FFD40C;
  --pp-yellow-soft:  #FFE27A;
  --pp-gold:         #F2B705;
  --pp-gold-hi:      #FFE45C;
  --pp-gold-lo:      #D99A00;

  /* Rouge « Perudo ! » et états */
  --pp-red:          #E8340E;
  --pp-red-hi:       #FF6A2E;
  --pp-red-lo:       #A81E06;
  --pp-danger:       #CC2020;
  --pp-coral:        #FFB59E;   /* « X perd un dé » sur le tapis       */

  /* Les 7 couleurs des lettres du logo P-A-L-I-F-I-C-U-P */
  --pp-logo-green:   #419021;
  --pp-logo-blue:    #0645D9;
  --pp-logo-magenta: #CE0DA4;
  --pp-logo-orange:  #F26F09;
  --pp-logo-red:     #ED2B08;
  --pp-logo-yellow:  #FFD40C;
  --pp-logo-purple:  #921AD7;
  --pp-stripe: linear-gradient(90deg,
      var(--pp-logo-green) 0% 14.28%, var(--pp-logo-blue) 14.28% 28.57%,
      var(--pp-logo-magenta) 28.57% 42.85%, var(--pp-logo-orange) 42.85% 57.14%,
      var(--pp-logo-red) 57.14% 71.42%, var(--pp-logo-yellow) 71.42% 85.71%,
      var(--pp-logo-purple) 85.71% 100%);

  /* Tapis (par défaut : bleu Palificup) */
  --pp-felt-hi:      #2D6BF0;
  --pp-felt:         #0F48D6;
  --pp-felt-lo:      #08277F;

  /* Typo */
  --pp-font-display: 'Fredoka', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  --pp-font-body:    'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Variantes de tapis : <body data-tapis="vert"> ou <body data-tapis="violet"> */
[data-tapis="vert"]   { --pp-felt-hi: #2A9A55; --pp-felt: #137A3E; --pp-felt-lo: #07431F; }
[data-tapis="violet"] { --pp-felt-hi: #9A3BE0; --pp-felt: #6E1DB8; --pp-felt-lo: #3A0B6B; }

/* ── PAGE ───────────────────────────────────────────────────────────── */
.pp-page {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 56px;
  overflow-x: clip;
  color: var(--pp-ink);
  font-family: var(--pp-font-body);
  background:
    radial-gradient(ellipse 62% 40% at 50% 30%, #FFFFFF 0%, rgba(255,255,255,0) 72%),
    radial-gradient(circle at 2px 2px, rgba(232,85,0,.10) 1.4px, rgba(232,85,0,0) 1.9px) 0 0 / 26px 26px,
    var(--pp-cream);
}
.pp-page *, .pp-page *::before, .pp-page *::after { box-sizing: border-box; }
.pp-page button { font: inherit; }
.pp-page :where(button, a, summary):focus-visible { outline: 3px solid var(--pp-blue); outline-offset: 3px; }
.pp-main { max-width: 1240px; margin: 0 auto; padding: 0 max(16px, 3vw); }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── EN-TÊTE (même construction que le site) ────────────────────────── */
.pp-header { background: var(--pp-cream-2); border-bottom: 3px solid var(--pp-orange); padding: 0 max(16px, 3vw); }
.pp-header__inner {
  max-width: 1240px; margin: 0 auto; min-height: 76px; padding: 6px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.pp-brand { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.pp-brand__logo { width: 96px; height: 96px; margin: -14px -12px -14px -18px; object-fit: contain; }
.pp-brand__text { display: flex; flex-direction: column; gap: 2px; }
.pp-brand__title { font: 700 21px/1.1 var(--pp-font-display); letter-spacing: .1em; color: var(--pp-orange-dark); }
.pp-brand__sub { font: 800 10.5px/1.2 var(--pp-font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--pp-label); }
.pp-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-chip {
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--pp-line);
  background: #FFFFFF; color: var(--pp-label); font: 700 14px/1 var(--pp-font-body); cursor: pointer;
}
.pp-chip:hover { background: var(--pp-peach); color: var(--pp-ink); }
.pp-avatar {
  min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0;
  background: var(--pp-orange); color: #FFFFFF; font: 600 15px/1 var(--pp-font-display); letter-spacing: .08em;
  cursor: pointer; box-shadow: 0 4px 10px rgba(232,85,0,.3);
}

/* ── TABLE ──────────────────────────────────────────────────────────── */
/* Toutes les tailles internes sont en cqw (1 % de la largeur du conteneur),
   donc la table entière se met à l'échelle avec son conteneur. */
.pp-table-wrap { container-type: inline-size; position: relative; padding: 38px max(16px, 4%) 24px; }
.pp-table {
  --u: 1cqw;   /* unité de la table : 1 % de la largeur (agrandie sur mobile) */
  position: relative; aspect-ratio: 1.95 / 1; border-radius: 999px;
  background:
    radial-gradient(ellipse 55% 30% at 50% 3%, rgba(255,232,204,.5), rgba(255,232,204,0) 70%),
    linear-gradient(180deg, var(--pp-orange-hi) 0%, var(--pp-orange) 42%, var(--pp-orange-lo) 100%);
  box-shadow:
    0 46px 80px -26px rgba(130,50,0,.55), 0 18px 30px rgba(130,50,0,.25),
    inset 0 2px 1px rgba(255,235,210,.65), inset 0 -8px 16px rgba(90,25,0,.45);
}
.pp-table__stitch { position: absolute; inset: calc(1.1 * var(--u)); border-radius: 999px; border: 1.5px dashed rgba(255,244,228,.6); pointer-events: none; }
.pp-table__stitch--inner { inset: calc(2.55 * var(--u)); border-width: 1px; border-color: rgba(255,244,228,.32); }
.pp-table__track {
  position: absolute; inset: calc(3.2 * var(--u)); border-radius: 999px;
  background: linear-gradient(180deg, var(--pp-gold-hi) 0%, var(--pp-gold) 52%, var(--pp-gold-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(120,70,0,.5), 0 0 0 1px rgba(120,50,0,.35);
}
.pp-felt {
  position: absolute; inset: calc(4.3 * var(--u)); border-radius: 999px; overflow: hidden;
  background: radial-gradient(ellipse 72% 78% at 50% 42%, var(--pp-felt-hi) 0%, var(--pp-felt) 46%, var(--pp-felt-lo) 100%);
  box-shadow: 0 0 0 1.5px rgba(80,40,0,.55), inset 0 12px 40px rgba(0,0,30,.5), inset 0 0 140px rgba(0,0,40,.4);
}
.pp-felt__weave { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.025) 2px 4px); }
.pp-felt__line { position: absolute; inset: 15% 8.5%; border-radius: 999px; border: 2px dashed rgba(255,212,12,.55); }
.pp-felt__line--inner { inset: calc(15% + 8px) calc(8.5% + 8px); border: 1px solid rgba(255,255,255,.12); }
.pp-felt__logo { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); opacity: .08; filter: brightness(0) invert(1); pointer-events: none; }

/* ── CENTRE DU TAPIS (annonce en cours / résultat) ──────────────────── */
.pp-center {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 2;
  width: min(calc(48 * var(--u)), 580px); display: flex; flex-direction: column; align-items: center; gap: calc(.75 * var(--u)); text-align: center;
}
.pp-center::before {
  content: ""; position: absolute; inset: -16% -10%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(4,18,70,.45), rgba(4,18,70,0));
}
.pp-center p { margin: 0; }
.pp-center__label {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; --s: 1.7em;
  font: 800 clamp(10px, calc(1 * var(--u)), 12.5px)/1.25 var(--pp-font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--pp-yellow-soft);
}
.pp-center__big {
  display: flex; align-items: center; gap: .2em; --s: .8em;
  font: 700 clamp(40px, calc(7.4 * var(--u)), 96px)/1 var(--pp-font-display); color: #FFFFFF; text-shadow: 0 4px 0 rgba(0,0,40,.3);
}
.pp-center__big .pp-x { font-size: .5em; font-weight: 500; color: var(--pp-yellow); }
.pp-center__big--count { color: var(--pp-yellow); }
.pp-center__big--count .pp-x { color: #FFFFFF; opacity: .8; }
.pp-center__by { font: 500 clamp(14px, calc(1.7 * var(--u)), 21px)/1.3 var(--pp-font-display); color: #DCE6FF; }
.pp-center__line { font: 600 clamp(13px, calc(1.35 * var(--u)), 17px)/1.4 var(--pp-font-body); color: #FFFFFF; }
.pp-center__verdict { font: 600 clamp(17px, calc(2.1 * var(--u)), 27px)/1.2 var(--pp-font-display); color: #FFFFFF; text-wrap: balance; }
.pp-center__out { font: 800 clamp(10px, calc(1 * var(--u)), 12.5px)/1.2 var(--pp-font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--pp-coral); }
.pp-center__turn {
  display: flex; align-items: center; gap: 10px;
  font: 800 clamp(10.5px, calc(1.05 * var(--u)), 13px)/1.2 var(--pp-font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--pp-yellow);
}
.pp-center__turn::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pp-yellow);
  box-shadow: 0 0 12px rgba(255,212,12,.9); animation: pp-pulse 1.6s ease-in-out infinite;
}
/* Séparateur : 7 pastilles aux couleurs du logo */
.pp-dots { display: flex; align-items: center; gap: 7px; margin: calc(.2 * var(--u)) 0; }
.pp-dots i { width: 7px; height: 7px; border-radius: 50%; }
.pp-dots i:nth-child(1) { background: var(--pp-logo-green); }
.pp-dots i:nth-child(2) { background: #FFFFFF; }
.pp-dots i:nth-child(3) { background: var(--pp-logo-magenta); }
.pp-dots i:nth-child(4) { background: var(--pp-logo-orange); }
.pp-dots i:nth-child(5) { background: var(--pp-logo-red); }
.pp-dots i:nth-child(6) { background: var(--pp-logo-yellow); }
.pp-dots i:nth-child(7) { background: #B36BFF; }

/* ── PLACE D'UN JOUEUR (point d'ancrage = centre de la bouche du gobelet) ─ */
.pp-seat { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 3; }

/* Halo « c'est ton tour » */
.pp-turn-ring {
  display: none; position: absolute; left: 0; top: 0; width: calc(9.8 * var(--u)); height: calc(3.4 * var(--u)); border-radius: 50%;
  border: 2px solid rgba(255,212,12,.95); box-shadow: 0 0 22px rgba(255,212,12,.6), inset 0 0 14px rgba(255,212,12,.35);
  transform: translate(-50%, -50%); animation: pp-turn 1.8s ease-in-out infinite;
}
.pp-seat.is-turn .pp-turn-ring { display: block; }

/* Ombre du gobelet sur le tapis */
.pp-cup-shadow {
  position: absolute; left: calc(-4 * var(--u)); top: calc(-1.1 * var(--u)); width: calc(8 * var(--u)); height: calc(2.4 * var(--u)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,40,.55), rgba(0,0,40,0));
  transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .65s;
}

/* Dés révélés sous le gobelet */
.pp-hand {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; gap: calc(.6 * var(--u));
  --s: clamp(16px, calc(3.1 * var(--u)), 40px); opacity: 0; transition: opacity .35s .3s;
}
.pp-seat.is-revealed .pp-hand { opacity: 1; }

/* ── GOBELET EN CUIR (couleur = --cup) ──────────────────────────────── */
.pp-cup {
  --stitch: rgba(255,244,228,.5);
  --shade: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.14) 15%, rgba(255,255,255,.28) 31%, rgba(255,255,255,.05) 44%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.6) 100%);
  position: absolute; left: calc(-3.2 * var(--u)); top: calc(-6.62 * var(--u)); width: calc(6.4 * var(--u)); height: calc(7.2 * var(--u)); z-index: 2;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 calc(.8 * var(--u)) calc(.7 * var(--u)) rgba(0,0,40,.5));
  transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .65s, opacity .4s;
}
.pp-cup--light { --stitch: rgba(26,8,0,.45); }   /* gobelets clairs : coutures foncées */
.pp-cup i { position: absolute; display: block; }
.pp-cup__body {
  left: 4%; right: 4%; top: 10%; bottom: 8%; clip-path: polygon(11% 0%, 89% 0%, 100% 100%, 0% 100%);
  background: var(--shade), linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.22)), var(--cup);
}
.pp-cup__mouth {
  left: 4%; right: 4%; bottom: 0; height: 16%; border-radius: 50%;
  background: var(--shade), linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.4)), var(--cup);
}
.pp-cup__band {
  left: 5.3%; right: 5.3%; bottom: 10.5%; height: 15%; border-radius: 50%; border-bottom: 2px solid var(--pp-gold);
  background: var(--shade), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.2)), var(--cup);
}
.pp-cup__stitch-low { left: 4.6%; right: 4.6%; bottom: 4.6%; height: 15.5%; border-radius: 50%; border-bottom: 1px dashed var(--stitch); }
.pp-cup__stitch-top { left: 13%; right: 13%; top: 9%; height: 14%; border-radius: 50%; border-bottom: 1px dashed var(--stitch); }
.pp-cup__base {
  left: 14%; right: 14%; top: 3%; height: 14%; border-radius: 50%; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
  background: radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.3), rgba(0,0,0,.04) 55%, rgba(0,0,0,.4) 100%), var(--cup);
}
.pp-cup__ring { inset: 16% 10%; border-radius: 50%; border: 1px dashed var(--stitch); }
.pp-cup__dip { inset: 32% 24%; border-radius: 50%; background: rgba(0,0,0,.16); }

/* États du gobelet */
.pp-cup.is-shaking { animation: pp-shake .9s ease-in-out; }
.pp-cup.is-slam { animation: pp-slam .3s ease-out; }
.pp-seat.is-revealed .pp-cup {
  transform: translate(var(--lift-x, calc(7.4 * var(--u))), var(--lift-y, calc(-1.6 * var(--u)))) rotate(var(--lift-rot, 13deg));
  filter: drop-shadow(0 calc(1.8 * var(--u)) calc(1.3 * var(--u)) rgba(0,0,40,.45));
}
.pp-seat.is-revealed .pp-cup-shadow { transform: translateX(var(--lift-x, calc(7.4 * var(--u)))); opacity: .8; }
.pp-seat.is-out .pp-cup { opacity: .3; filter: grayscale(.9); }

/* ── DÉ (valeur = data-v, couleur = --die, taille = --s héritée) ────── */
.pp-die {
  --pip: #FFFFFF;
  position: relative; flex: none; display: inline-grid; vertical-align: middle;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  width: var(--s, 30px); height: var(--s, 30px); padding: calc(var(--s, 30px) * .12); border-radius: calc(var(--s, 30px) * .22);
  background:
    radial-gradient(120% 120% at 28% 20%, rgba(255,255,255,.4), rgba(255,255,255,0) 46%),
    linear-gradient(150deg, var(--die, #1F1A17), color-mix(in srgb, var(--die, #1F1A17) 75%, #000));
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.45), 0 3px 7px rgba(0,0,0,.35);
  transition: opacity .3s, box-shadow .3s;
}
.pp-die--light { --pip: #1C1714; }   /* dés clairs (jaune, blanc, bleu ciel) : points foncés */
.pp-die > i { display: block; width: 76%; height: 76%; place-self: center; border-radius: 50%; }
.pp-die[data-v="2"] > i:nth-child(3), .pp-die[data-v="2"] > i:nth-child(7),
.pp-die[data-v="3"] > i:nth-child(3), .pp-die[data-v="3"] > i:nth-child(5), .pp-die[data-v="3"] > i:nth-child(7),
.pp-die[data-v="4"] > i:nth-child(1), .pp-die[data-v="4"] > i:nth-child(3), .pp-die[data-v="4"] > i:nth-child(7), .pp-die[data-v="4"] > i:nth-child(9),
.pp-die[data-v="5"] > i:nth-child(1), .pp-die[data-v="5"] > i:nth-child(3), .pp-die[data-v="5"] > i:nth-child(5), .pp-die[data-v="5"] > i:nth-child(7), .pp-die[data-v="5"] > i:nth-child(9),
.pp-die[data-v="6"] > i:nth-child(1), .pp-die[data-v="6"] > i:nth-child(3), .pp-die[data-v="6"] > i:nth-child(4), .pp-die[data-v="6"] > i:nth-child(6), .pp-die[data-v="6"] > i:nth-child(7), .pp-die[data-v="6"] > i:nth-child(9) {
  background: var(--pip); box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}
/* Le paco (face 1) : étoile */
.pp-die[data-v="1"]::after {
  content: ""; position: absolute; left: 21%; top: 20%; width: 58%; height: 58%; background: var(--pip);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pp-die.is-match {   /* dé qui compte pour l'annonce à la révélation */
  box-shadow: 0 0 0 2.5px var(--pp-yellow), 0 0 18px rgba(255,212,12,.85), inset 0 -2px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.45), 0 3px 7px rgba(0,0,0,.35);
}
.pp-die.is-dim { opacity: .55; }   /* dé qui ne compte pas */

/* ── BULLE D'ANNONCE ────────────────────────────────────────────────── */
.pp-bubble {
  position: absolute; top: 0; left: var(--bubble-offset, calc(7 * var(--u))); translate: 0 -50%; z-index: 5; --s: 1.1em;
  display: flex; align-items: center; gap: 8px; padding: 8px 18px 9px; border-radius: 999px; white-space: nowrap;
  background: #FFFFFF; color: var(--pp-ink); font: 700 clamp(15px, calc(1.65 * var(--u)), 22px)/1 var(--pp-font-display);
  box-shadow: 0 10px 22px rgba(0,0,40,.35); animation: pp-pop .35s cubic-bezier(.2,1.4,.4,1);
}
.pp-bubble .pp-x { font-weight: 500; color: var(--pp-orange); }
.pp-bubble--left { left: auto; right: var(--bubble-offset, calc(3.2 * var(--u))); }
.pp-bubble--above { left: 0; top: calc(-7.9 * var(--u)); translate: -50% -100%; }
.pp-bubble--above::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px;
  translate: -50% 0; rotate: 45deg; background: #FFFFFF;
}
.pp-bubble--call {   /* « Perudo ! » et « Calza ! » */
  background: linear-gradient(180deg, var(--pp-red-hi) 0%, var(--pp-red) 60%, #C2240A 100%); color: #FFFFFF;
  letter-spacing: .02em; padding: 9px 20px 10px; box-shadow: 0 10px 22px rgba(0,0,40,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.pp-bubble--call.pp-bubble--above::after { background: var(--pp-red); }
.pp-bubble--thinking { color: var(--pp-ink-dim); font-weight: 600; }   /* « … » pendant que l'ordinateur réfléchit */

/* ── PLAQUE DE NOM SUR LE RAIL ──────────────────────────────────────── */
.pp-plate {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 7px; white-space: nowrap;
  border-radius: 999px; border: 2px solid #FFFFFF; background: #FFFDF8; box-shadow: 0 6px 14px rgba(90,30,0,.35);
}
.pp-plate.is-turn, .pp-plate.is-winner {
  box-shadow: 0 0 0 3px var(--pp-yellow), 0 0 24px rgba(255,212,12,.7), 0 6px 14px rgba(90,30,0,.35);
}
.pp-plate__dot {
  width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--pp-line);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%), var(--player);
}
.pp-plate__info { display: flex; flex-direction: column; gap: 4px; }
.pp-plate__name {
  display: flex; align-items: center; gap: 8px;
  font: 800 12px/1 var(--pp-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-ink);
}
.pp-plate__tag { font-size: 9.5px; letter-spacing: .16em; padding: 3px 6px; border-radius: 4px; background: var(--pp-orange); color: #FFFFFF; }
.pp-plate__tag--out { background: var(--pp-danger); }
.pp-plate__pips { display: flex; gap: 4px; }
.pp-plate__pips i { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(26,8,0,.28); }
.pp-plate__pips i.is-full { background: var(--player); box-shadow: 0 0 0 1px rgba(26,8,0,.25); }
.pp-plate.is-out .pp-plate__name { color: #6E5440; }
.pp-plate.is-out .pp-plate__dot { filter: grayscale(.6); }

/* ── CARTES SOUS LA TABLE ───────────────────────────────────────────── */
.pp-card { margin-top: 10px; border-radius: 20px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--pp-line); box-shadow: 0 18px 40px -18px rgba(130,50,0,.35); }
.pp-card__stripe { height: 7px; background: var(--pp-stripe); }
.pp-card__body { padding: 22px clamp(18px, 3vw, 36px) 28px; display: flex; flex-direction: column; gap: 20px; }
.pp-eyebrow { margin: 0; font: 800 11.5px/1.2 var(--pp-font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--pp-label); }
.pp-title { margin: 0; font: 700 clamp(28px, 3.2vw, 42px)/1.08 var(--pp-font-display); color: var(--pp-ink); text-wrap: balance; }
.pp-muted { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pp-ink-dim); }

/* Fin de partie */
.pp-victory { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; }
.pp-victory__main { display: flex; align-items: center; gap: 22px; min-width: 0; flex: 1 1 420px; }
.pp-victory__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-medal {
  position: relative; width: 78px; height: 78px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFF09A 0%, var(--pp-yellow) 42%, #E6AC00 100%);
  box-shadow: 0 0 0 5px var(--pp-peach), 0 10px 20px rgba(130,70,0,.3), inset 0 -4px 8px rgba(150,90,0,.35), inset 0 2px 2px rgba(255,255,255,.7);
}
.pp-medal::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(160,90,0,.45); }
.pp-medal::after {
  content: ""; position: absolute; left: 22px; top: 21px; width: 34px; height: 34px; background: var(--pp-logo-red);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pp-actions-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Ton tour */
.pp-turn-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.pp-status { margin: 0; font: 600 clamp(21px, 2.2vw, 28px)/1.2 var(--pp-font-display); color: var(--pp-ink); text-wrap: balance; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tag { padding: 7px 12px; border-radius: 999px; background: var(--pp-peach); font: 800 11px/1 var(--pp-font-body); letter-spacing: .16em; text-transform: uppercase; color: #9A4300; }
.pp-tag--blue { background: var(--pp-blue); color: #FFFFFF; }
.pp-tag--palifico { background: var(--pp-logo-magenta); color: #FFFFFF; }
.pp-turn-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 22px 30px; }
.pp-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-col--tray { flex: 1 1 240px; }
.pp-col--composer { flex: 2 1 430px; }
.pp-col--actions { flex: 1 1 250px; justify-content: flex-end; gap: 12px; }
.pp-tray {
  flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 80px; padding: 16px 18px; border-radius: 16px; --s: 46px;
  background: radial-gradient(ellipse at 50% 30%, var(--pp-felt-hi), var(--pp-felt-lo));
  box-shadow: inset 0 4px 14px rgba(0,0,40,.45), 0 0 0 3px var(--pp-gold);
}
.pp-composer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.pp-stepper { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
.pp-stepper__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--pp-line); background: var(--pp-peach-2);
  color: var(--pp-orange-dark); font: 600 26px/1 var(--pp-font-display); cursor: pointer;
}
.pp-stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.pp-stepper__value { min-width: 1.3ch; text-align: center; font: 600 54px/1 var(--pp-font-display); font-variant-numeric: tabular-nums; color: var(--pp-ink); }
.pp-times { font: 500 32px/1 var(--pp-font-display); color: var(--pp-orange); }
.pp-faces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; --s: 38px; }
.pp-face {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 52px; padding: 6px;
  border-radius: 12px; border: 0; cursor: pointer; background: var(--pp-cream-2); box-shadow: inset 0 0 0 1.5px var(--pp-line);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pp-face[aria-pressed="true"] { background: #FFE7CC; box-shadow: inset 0 0 0 2.5px var(--pp-orange), 0 6px 14px rgba(232,85,0,.22); transform: translateY(-2px); }
.pp-face:disabled { opacity: .35; cursor: not-allowed; }
.pp-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pp-ink-dim); }
.pp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ── BOUTONS ────────────────────────────────────────────────────────── */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  border-radius: 12px; border: 0; font: 600 18px/1 var(--pp-font-display); cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.pp-btn:hover { filter: brightness(1.05); }
.pp-btn:active { transform: translateY(3px); }
.pp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.pp-btn--orange { background: linear-gradient(180deg, #FF7A1F 0%, var(--pp-orange) 100%); color: #FFFFFF; box-shadow: 0 6px 0 var(--pp-orange-lo), 0 12px 20px rgba(232,85,0,.3); }
.pp-btn--blue { min-height: 56px; padding: 0 22px; --s: 24px; background: linear-gradient(180deg, var(--pp-blue-hi) 0%, var(--pp-blue) 100%); color: #FFFFFF; box-shadow: 0 6px 0 var(--pp-blue-lo), 0 12px 20px rgba(6,69,217,.28); }
.pp-btn--blue .pp-bid { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; }
.pp-btn--blue .pp-x { font-weight: 500; color: var(--pp-yellow); }
.pp-btn--perudo { min-height: 54px; padding: 0 14px; font-weight: 700; font-size: 21px; background: linear-gradient(180deg, var(--pp-red-hi) 0%, var(--pp-red) 100%); color: #FFFFFF; box-shadow: 0 6px 0 var(--pp-red-lo), 0 12px 20px rgba(232,52,14,.28); }
.pp-btn--ghost { background: #FFFFFF; color: var(--pp-label); border: 1.5px solid var(--pp-line); }
.pp-btn--ghost.pp-btn--small { min-height: 54px; padding: 0 14px; }

/* ── COULEUR DES DÉS + HISTORIQUE ───────────────────────────────────── */
.pp-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.pp-panel { flex: 1 1 340px; min-width: 0; border-radius: 16px; border: 1px solid var(--pp-line); background: #FFFFFF; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.pp-panel--wide { flex: 2 1 440px; padding: 8px 22px; }
.pp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-swatch {
  width: 36px; height: 36px; border-radius: 10px; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 52%), var(--c);
  box-shadow: inset 0 0 0 1px rgba(26,8,0,.12), 0 4px 10px rgba(130,50,0,.2); transition: transform .15s, box-shadow .15s;
}
.pp-swatch[aria-pressed="true"] { transform: translateY(-2px); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4.5px var(--pp-orange), 0 4px 10px rgba(130,50,0,.2); }
.pp-log summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none;
  font: 800 11.5px/1.2 var(--pp-font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--pp-label);
}
.pp-log summary::-webkit-details-marker { display: none; }
.pp-log summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--pp-orange); border-bottom: 2px solid var(--pp-orange); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.pp-log[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.pp-log ol { list-style: none; margin: 0; padding: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--pp-ink-dim); }
.pp-log li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; --s: 20px; }
.pp-log b { font-weight: 800; color: var(--pp-ink); }
.pp-log .pp-log__round { display: block; font: 600 16px/1.3 var(--pp-font-display); color: var(--pp-orange-dark); }
.pp-log .pp-log__round + li { margin-top: 0; }
.pp-log .pp-call { font: 700 1em/1 var(--pp-font-display); color: #D52A0A; }

/* ── ANIMATIONS ─────────────────────────────────────────────────────── */
@keyframes pp-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-3px, -6px) rotate(-7deg); }
  20% { transform: translate(4px, -10px) rotate(6deg); }
  30% { transform: translate(-4px, -8px) rotate(-8deg); }
  40% { transform: translate(3px, -12px) rotate(7deg); }
  50% { transform: translate(-3px, -9px) rotate(-6deg); }
  60% { transform: translate(4px, -11px) rotate(8deg); }
  70% { transform: translate(-2px, -8px) rotate(-5deg); }
  80% { transform: translate(2px, -12px) rotate(4deg); }
  90% { transform: translate(0, -14px) rotate(0); }
}
@keyframes pp-slam { 0% { transform: translateY(-14px); } 60% { transform: translateY(1px) scale(1.04, .96); } 100% { transform: none; } }
@keyframes pp-turn { 0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes pp-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pp-pop { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pp-page *, .pp-page *::before, .pp-page *::after { animation: none !important; transition: none !important; }
}

/* ── PETITS ÉCRANS ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Table plus haute et éléments agrandis pour rester lisibles sur téléphone */
  .pp-table { --u: 1.7cqw; aspect-ratio: 1.05 / 1; }
  .pp-center { width: 62cqw; gap: 4px; }
  .pp-center__label { letter-spacing: .12em; font-size: 9.5px; }
  .pp-center__by, .pp-center__line { font-size: 13px; }
  .pp-center__verdict { font-size: 16px; }
  .pp-bubble { font-size: 13px; }
  .pp-dots, .pp-center__turn { display: none; }   /* le tour est déjà indiqué sous la table */
}
@media (max-width: 760px) {
  /* Les plaques des places latérales quittent le rail pour se poser sous le gobelet */
  .pp-plate--side { left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .pp-plate { gap: 7px; padding: 4px 10px 4px 5px; }
  .pp-plate__dot { width: 20px; height: 20px; }
  .pp-plate__name { font-size: 10.5px; letter-spacing: .1em; }
  .pp-bubble { padding: 6px 12px 7px; }
}