/* Poker planning : la vue « poker » d'une réunion (public/js/poker.js). Une table au tapis violet
   de Smappen, les caméras rondes autour, sa main de cartes en éventail, le banc en pixel art. */

/* --- Le sélecteur de vue : la quatrième place (le curseur suit --view-i, posé par ui.js) --- */
/* Une table attend dans la salle : le bouton poker pulse doucement (hors de la vue poker). */
.view-switch button.pk-ping::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--glass-strong);
  animation: pk-ping 1.8s var(--ease-out) infinite;
}
@keyframes pk-ping {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
}

/* --- La vue : le fond voilé de la vue réunion, la carte et les vignettes s'effacent --- */
.app.poker-view .meeting-bg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 420ms var(--ease-out);
}
.app.poker-view .minimap,
.app.poker-view .zoom,
.app.poker-view .recenter,
.app.poker-view .hint,
.app.poker-view .follow-chip {
  opacity: 0;
  pointer-events: none;
}
/* Les vignettes restent là (elles jouent le son des voix), invisibles : la table a ses caméras. */
.app.poker-view #videos .tile {
  opacity: 0 !important;
  pointer-events: none !important;
}

.poker {
  --felt: #5a2f9c;
  --felt-deep: #3b1c6c;
  --ink: #3a1f6b;
  --card-paper: #fffdf8;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition:
    opacity 380ms var(--ease-out),
    transform 480ms var(--ease-sheet),
    visibility 0s 380ms;
  color: #fff;
  font-family: var(--font);
}
.poker.shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 380ms var(--ease-out),
    transform 480ms var(--ease-sheet);
}
.poker > * {
  position: absolute;
  left: 0;
  top: 0;
}

/* --- La table : un rail sombre et rembourré, le tapis violet en dessous --- */
.pk-table {
  border-radius: 999px;
  background: linear-gradient(180deg, #3d2a57, #24163a 55%, #1b1029);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 40px 80px -30px rgba(0, 0, 0, 0.75),
    0 14px 30px -12px rgba(0, 0, 0, 0.5);
  transition:
    translate var(--dur-sheet) var(--ease-sheet),
    width var(--dur-sheet) var(--ease-sheet),
    height var(--dur-sheet) var(--ease-sheet);
}
.pk-felt {
  position: absolute;
  inset: var(--rail, 12px);
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(255, 255, 255, 0.1), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, var(--felt) 0%, #4b2585 58%, var(--felt-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 10px 28px rgba(0, 0, 0, 0.42),
    inset 0 -6px 18px rgba(0, 0, 0, 0.25);
}

/* Où chaque carte se pose : un pointillé discret sur le tapis. */
.pk-spots {
  width: 0;
  height: 0;
}
.pk-spot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  border-radius: calc(var(--cw) * 0.14);
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  transition: translate var(--dur-sheet) var(--ease-sheet);
}

/* --- Les cartes --- */
.pk-cards {
  width: 0;
  height: 0;
}
.pk-card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  perspective: 700px;
  transition: translate var(--dur-sheet) var(--ease-sheet);
}
.pk-cards .pk-card {
  pointer-events: auto;
}
.pk-cards .pk-card.mine {
  cursor: pointer;
}
.poker.revealed .pk-cards .pk-card.mine {
  cursor: default;
}
.pk-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(0.3, 1.25, 0.5, 1);
}
.pk-card.down .pk-flip {
  transform: rotateY(180deg);
}
.pk-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cw) * 0.14);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.pk-front {
  background: linear-gradient(165deg, var(--card-paper), #f2ecfb);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(121, 68, 192, 0.18),
    inset 0 0 0 calc(var(--cw) * 0.06) #fff,
    inset 0 0 0 calc(var(--cw) * 0.06 + 1px) rgba(121, 68, 192, 0.22),
    0 2px 6px rgba(20, 10, 40, 0.35),
    0 10px 22px -10px rgba(20, 10, 40, 0.55);
}
.pk-front.special {
  background: linear-gradient(165deg, #f6f0ff, #e6dbf8);
}
.pk-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 calc(var(--cw) * 0.5) / 1 ui-rounded, "SF Pro Rounded", var(--font);
  letter-spacing: -0.03em;
}
.pk-value.two {
  font-size: calc(var(--cw) * 0.4);
}
.pk-value.word {
  padding: 0 8%;
  font-size: calc(var(--cw) * 0.19);
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0;
  text-wrap: balance;
}
.pk-front.special .pk-value {
  color: #7944c0;
}
.pk-corner {
  position: absolute;
  font: 800 calc(var(--cw) * 0.16) / 1 ui-rounded, "SF Pro Rounded", var(--font);
  color: rgba(58, 31, 107, 0.7);
}
.pk-corner.tl {
  top: 10%;
  left: 12%;
}
.pk-corner.br {
  bottom: 10%;
  right: 12%;
  rotate: 180deg;
}
/* Jeu « Impact » : une petite jauge sous le mot. */
.pk-meter {
  position: absolute;
  left: 50%;
  bottom: 16%;
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--cw) * 0.035);
}
.pk-meter i {
  width: calc(var(--cw) * 0.06);
  border-radius: 2px;
  background: rgba(121, 68, 192, 0.22);
}
.pk-meter i:nth-child(1) {
  height: calc(var(--cw) * 0.08);
}
.pk-meter i:nth-child(2) {
  height: calc(var(--cw) * 0.12);
}
.pk-meter i:nth-child(3) {
  height: calc(var(--cw) * 0.16);
}
.pk-meter i:nth-child(4) {
  height: calc(var(--cw) * 0.2);
}
.pk-meter i:nth-child(5) {
  height: calc(var(--cw) * 0.24);
}
.pk-meter i.on {
  background: #7944c0;
}
/* Le verso : violet Smappen, un treillis fin et l'épingle de Smapville au milieu. */
.pk-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 calc(var(--cw) * 0.2), transparent calc(var(--cw) * 0.2 + 0.5px)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.09) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.09) 0 1.5px, transparent 1.5px 7px),
    linear-gradient(160deg, #8d58db, #5d2da3 58%, #45207f);
  box-shadow:
    inset 0 0 0 calc(var(--cw) * 0.055) #fdfbff,
    inset 0 0 0 calc(var(--cw) * 0.055 + 1.5px) rgba(93, 45, 163, 0.5),
    0 2px 6px rgba(20, 10, 40, 0.35),
    0 10px 22px -10px rgba(20, 10, 40, 0.55);
}
.pk-back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cw) * 0.24);
  height: calc(var(--cw) * 0.3);
  translate: -50% -54%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1C5.9 1 1 5.6 1 11.4 1 18.7 12 29 12 29s11-10.3 11-17.6C23 5.6 18.1 1 12 1Z' fill='%237944c0'/%3E%3Cpath d='M6.5 12.5 12 8l5.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='8.3' y='11.6' width='7.4' height='6' rx='1' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Posée : un petit tassement. Retenue après le retournement : un halo doré. */
.pk-card.land .pk-flip {
  animation: pk-land 380ms var(--ease-out);
}
@keyframes pk-land {
  0% {
    transform: rotateY(180deg) scale(1.08);
  }
  55% {
    transform: rotateY(180deg) scale(0.96);
  }
  100% {
    transform: rotateY(180deg) scale(1);
  }
}
/* Posée face visible (une carte changée après le retournement) : le même tassement, sans se retourner. */
.pk-card.land:not(.down) .pk-flip {
  animation-name: pk-land-up;
}
@keyframes pk-land-up {
  0% {
    transform: scale(1.08);
  }
  55% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}
.pk-card.kept .pk-front {
  box-shadow:
    inset 0 0 0 1px rgba(121, 68, 192, 0.18),
    inset 0 0 0 calc(var(--cw) * 0.06) #fff,
    0 0 0 3px #ffcc00,
    0 0 22px 2px rgba(255, 204, 0, 0.55),
    0 10px 22px -10px rgba(20, 10, 40, 0.55);
}

/* Cartes en vol (de la main à la table, de la table à la main) et moitiés déchirées. */
.pk-fly {
  width: 0;
  height: 0;
  z-index: 6;
}
.pk-card.flyer {
  transform-origin: 50% 50%;
  will-change: transform;
}
.pk-half.left .pk-face {
  clip-path: polygon(0 0, 54% 0, 50% 9%, 56% 18%, 49% 29%, 55% 40%, 48% 52%, 54% 63%, 47% 75%, 53% 86%, 48% 100%, 0 100%);
}
.pk-half.right .pk-face {
  clip-path: polygon(54% 0, 100% 0, 100% 100%, 48% 100%, 53% 86%, 47% 75%, 54% 63%, 48% 52%, 55% 40%, 49% 29%, 56% 18%, 50% 9%);
}

/* --- Les sièges : la caméra (ou l'avatar) dans un médaillon, le nom sur une étiquette --- */
.pk-seats {
  width: 0;
  height: 0;
}
.pk-seat {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--seat);
  height: var(--seat);
  pointer-events: auto;
  transition:
    translate var(--dur-sheet) var(--ease-sheet),
    opacity var(--dur-base) var(--ease-out),
    scale var(--dur-slow) var(--ease-spring);
}
.pk-seat.entering,
.pk-seat.leaving {
  opacity: 0;
  scale: 0.6;
}
.pk-avatar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #4a3a6e, #2a2140);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 0 0 4px rgba(31, 23, 53, 0.4),
    0 12px 26px -8px rgba(0, 0, 0, 0.6);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.pk-avatar video,
.pk-avatar canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: opacity var(--dur-base) var(--ease-out);
}
.pk-avatar canvas {
  image-rendering: pixelated;
}
.pk-seat.cam .pk-avatar canvas,
.pk-seat:not(.cam) .pk-avatar video {
  opacity: 0;
}
.pk-seat.mirror .pk-avatar video {
  transform: scaleX(-1);
}
.pk-seat.speaking .pk-avatar {
  box-shadow:
    0 0 0 3px var(--green),
    0 0 0 7px rgba(52, 199, 89, 0.3),
    0 12px 26px -8px rgba(0, 0, 0, 0.6);
}
.pk-seat.away .pk-avatar {
  filter: grayscale(0.7) brightness(0.75);
}
.pk-seat.me .pk-avatar {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--accent),
    0 12px 26px -8px rgba(0, 0, 0, 0.6);
}
.pk-seat.me.speaking .pk-avatar {
  box-shadow:
    0 0 0 3px var(--green),
    0 0 0 7px rgba(52, 199, 89, 0.3),
    0 12px 26px -8px rgba(0, 0, 0, 0.6);
}
.pk-seat.cheer .pk-avatar {
  animation: pk-hop 520ms var(--ease-out) 3;
}
@keyframes pk-hop {
  0%,
  100% {
    translate: 0 0;
  }
  40% {
    translate: 0 -8px;
  }
}
.pk-plate {
  position: absolute;
  left: 50%;
  top: calc(100% - 9px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 150px;
  padding: 3px 9px 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(22, 15, 38, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: var(--glass-blur, blur(10px));
  backdrop-filter: var(--glass-blur, blur(10px));
  white-space: nowrap;
  font-size: var(--fs-footnote);
}
.pk-plate b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 650;
}
.pk-state {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.pk-state svg {
  width: 12px;
  height: 12px;
}
.pk-state.done {
  color: #5ce17f;
}
.pk-state.elsewhere,
.pk-state.gone {
  color: rgba(255, 255, 255, 0.5);
}
/* Qui réfléchit encore : trois points qui respirent. */
.pk-state.thinking span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: pk-think 1.2s ease-in-out infinite;
}
.pk-state.thinking span:nth-child(2) {
  animation-delay: 0.15s;
}
.pk-state.thinking span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes pk-think {
  0%,
  60%,
  100% {
    opacity: 0.3;
    translate: 0 0;
  }
  30% {
    opacity: 1;
    translate: 0 -2px;
  }
}
/* Une bulle au-dessus du siège : les extrêmes ont la parole, ou « lui confier la partie ? ». */
.pk-say {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  translate: -50% 4px;
  padding: 5px 10px;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-footnote);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
  opacity: 0;
  scale: 0.8;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    scale var(--dur-slow) var(--ease-spring),
    translate var(--dur-slow) var(--ease-spring);
}
.pk-say::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% -50%;
  rotate: 45deg;
  width: 9px;
  height: 9px;
  background: inherit;
  border-radius: 2px;
}
.pk-seat.extreme .pk-say {
  opacity: 1;
  scale: 1;
  translate: -50% 0;
}

/* --- Le milieu de la table : qui a joué, puis le résultat --- */
.pk-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  text-align: center;
  pointer-events: auto;
  transition:
    translate var(--dur-sheet) var(--ease-sheet),
    width var(--dur-sheet) var(--ease-sheet),
    height var(--dur-sheet) var(--ease-sheet);
}
.pk-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  width: 100%;
}
.pk-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sub);
  color: rgba(255, 255, 255, 0.78);
}
.pk-dots {
  display: inline-flex;
  gap: 4px;
}
.pk-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition:
    background var(--dur-base) var(--ease-out),
    scale var(--dur-slow) var(--ease-spring);
}
.pk-dots i.on {
  background: #5ce17f;
  scale: 1.15;
}
.pk-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--fs-sub);
  font-weight: 650;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.pk-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}
.pk-btn:active {
  transform: scale(0.96);
}
.pk-btn svg {
  width: 15px;
  height: 15px;
}
.pk-btn span {
  display: contents;
}
.pk-btn.small {
  height: 26px;
  padding: 0 10px;
  font-size: var(--fs-footnote);
}
.pk-btn.primary {
  height: 40px;
  padding: 0 20px;
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 750;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.55);
}
.pk-btn.primary:hover {
  background: #f3edff;
}
.pk-btn.primary:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
/* Tout le monde a joué : le bouton respire. */
.pk-btn.primary.ready {
  animation: pk-ready 1.6s var(--ease-out) infinite;
}
@keyframes pk-ready {
  0%,
  100% {
    box-shadow:
      0 8px 22px -8px rgba(0, 0, 0, 0.55),
      0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow:
      0 8px 22px -8px rgba(0, 0, 0, 0.55),
      0 0 0 8px rgba(255, 255, 255, 0);
  }
}
/* Compte à rebours : 3, 2, 1, en grand au milieu de la table. */
.pk-count {
  position: absolute;
  translate: -50% -50%;
  font: 800 clamp(64px, 12vh, 120px) / 1 ui-rounded, "SF Pro Rounded", var(--font);
  color: #fff;
  text-shadow:
    0 6px 30px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(180, 140, 242, 0.6);
  pointer-events: none;
  animation: pk-count 600ms var(--ease-out) forwards;
}
@keyframes pk-count {
  0% {
    opacity: 0;
    scale: 1.6;
  }
  25% {
    opacity: 1;
    scale: 1;
  }
  80% {
    opacity: 1;
    scale: 0.92;
  }
  100% {
    opacity: 0;
    scale: 0.7;
  }
}
.pk-body.counting {
  min-height: 60px;
}

/* Le résultat : le chiffre qui compte, puis la répartition des cartes. */
.pk-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 420ms var(--ease-out),
    translate 520ms var(--ease-sheet);
}
.pk-result.in {
  opacity: 1;
  translate: 0 0;
}
.pk-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.pk-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
}
.pk-big {
  font: 800 clamp(32px, 6vh, 52px) / 1 ui-rounded, "SF Pro Rounded", var(--font);
  letter-spacing: -0.03em;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
}
@keyframes pk-pop {
  0% {
    scale: 0.4;
  }
  100% {
    scale: 1;
  }
}
.pk-note {
  max-width: 180px;
  font-size: var(--fs-sub);
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
  color: #ffd84a;
}
.pk-caption {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.pk-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-callout);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.pk-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: pk-spin 0.8s linear infinite;
}
@keyframes pk-spin {
  to {
    rotate: 360deg;
  }
}

/* --- Ma main : l'éventail en bas, une carte se soulève au survol --- */
.pk-hand {
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.pk-hand.off {
  opacity: 0;
}
.pk-hand.off .pk-hand-card {
  pointer-events: none;
  translate: var(--x) calc(var(--y) + 120%);
}
.pk-hand-card {
  --lift: 0px;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--hw);
  height: var(--hh);
  margin-left: calc(var(--hw) / -2);
  padding: 0;
  border: 0;
  background: none;
  border-radius: calc(var(--hw) * 0.14);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 130%;
  translate: var(--x) calc(var(--y) - var(--lift));
  rotate: var(--r);
  transition:
    translate 340ms var(--ease-sheet),
    rotate 340ms var(--ease-sheet),
    scale 200ms var(--ease-out),
    filter var(--dur-base) var(--ease-out);
}
.pk-hand-card .pk-card {
  --cw: var(--hw);
  --ch: var(--hh);
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  translate: none;
}
.pk-hand-card:hover,
.pk-hand-card:focus-visible {
  --lift: 26px;
  scale: 1.05;
  z-index: 50 !important;
}
.pk-hand-card:focus-visible {
  outline: none;
}
.pk-hand-card:focus-visible .pk-front {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--accent),
    0 10px 22px -10px rgba(20, 10, 40, 0.55);
}
.pk-hand-card:active {
  scale: 0.98;
}
.pk-hand-card.arriving {
  visibility: hidden;
}
.pk-hand.locked .pk-hand-card {
  cursor: default;
  filter: saturate(0.6) brightness(0.8);
  --lift: -18px;
}
.pk-hand.locked .pk-hand-card:hover {
  scale: 1;
}

/* --- Le banc des spectateurs : pixel art LimeZu, dans le coin --- */
.pk-bench {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  pointer-events: auto;
  transition: translate var(--dur-sheet) var(--ease-sheet);
}
.pk-bench-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 6px;
  font-size: var(--fs-footnote);
  color: rgba(255, 255, 255, 0.7);
}
.pk-bench-title b {
  font-weight: 650;
}
.pk-bench-canvas {
  image-rendering: pixelated;
  flex: none;
}
.pk-bench-names {
  position: relative;
  height: 18px;
  width: 100%;
}
.pk-bench-name {
  position: absolute;
  top: 0;
  translate: -50% 0;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: rgba(22, 15, 38, 0.7);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.85);
}
.pk-bench-name.me {
  background: var(--accent);
  color: #fff;
}
.pk-bench .pk-more {
  font-size: var(--fs-footnote);
  color: rgba(255, 255, 255, 0.7);
}
/* Sur un écran étroit : un rang de visages en haut. */
.pk-bench.compact {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.pk-faces-row {
  display: flex;
  align-items: center;
}
.pk-face-chip canvas {
  display: block;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid #2a2140;
  background: #4a3a6e;
}
.pk-face-chip:first-child canvas {
  margin-left: 0;
}

/* --- La barre de la vue : le jeu de cartes, sa place (à la table ou sur le banc) --- */
.pk-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--r-lg);
  pointer-events: auto;
  color: var(--text);
}
.pk-bar:empty {
  display: none;
}
.pk-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--hairline);
}
.pk-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--fill);
}
.pk-seg button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(var(--r-md) - 2px);
  background: none;
  color: var(--text-2);
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.pk-seg button,
.pk-btn {
  white-space: nowrap;
}
.poker .short {
  display: none;
}
.pk-seg button[aria-checked="true"] {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(31, 23, 53, 0.16);
}
/* Confettis de la fête (dessinés seulement pendant la fête). */
.pk-confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
}

/* --- La fête du consensus --- */
/* Une onde dorée part du milieu et traverse le tapis. */
.pk-felt {
  overflow: hidden;
}
.pk-felt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, rgba(255, 214, 90, 0.5) 63%, rgba(255, 236, 160, 0.18) 68%, transparent 72%);
  opacity: 0;
  scale: 0.04;
  pointer-events: none;
}
.pk-table.wave .pk-felt::after {
  animation: pk-wave 1.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes pk-wave {
  0% {
    opacity: 1;
    scale: 0.04;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    scale: 1;
  }
}
.pk-table.wave .pk-felt {
  animation: pk-glow 1.5s var(--ease-out);
}
@keyframes pk-glow {
  30% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 214, 90, 0.4),
      inset 0 0 60px rgba(255, 204, 0, 0.35),
      inset 0 10px 28px rgba(0, 0, 0, 0.42);
  }
}
/* Les cartes et les médaillons se dorent. */
.pk-card.gold .pk-front {
  background: linear-gradient(165deg, #fffaf0, #fff1c9);
  box-shadow:
    inset 0 0 0 calc(var(--cw) * 0.06) #fff,
    inset 0 0 0 calc(var(--cw) * 0.06 + 1.5px) rgba(214, 150, 20, 0.6),
    0 0 0 2px #f5c542,
    0 0 18px 2px rgba(255, 204, 0, 0.5),
    0 10px 22px -10px rgba(20, 10, 40, 0.55);
}
.pk-seat.gold .pk-avatar {
  box-shadow:
    0 0 0 3px #ffd84a,
    0 0 0 7px rgba(255, 204, 0, 0.35),
    0 0 26px 6px rgba(255, 204, 0, 0.4);
  animation: pk-hop 520ms var(--ease-out) 3;
}

/* La carte d'or : dorée à la feuille, avec un reflet holographique qui suit le pointeur. */
.pk-result.consensus {
  flex-direction: row;
  gap: 16px;
}
.pk-gold {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 30%;
  flex: none;
  width: calc(var(--cw) * 1.35);
  height: calc(var(--cw) * 1.35 * 1.4);
  perspective: 700px;
  animation: pk-gold-in 900ms var(--ease-spring) both;
  pointer-events: auto;
}
@keyframes pk-gold-in {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.3) rotate(-12deg);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.pk-gold-card {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cw) * 0.16);
  overflow: hidden;
  color: #6b4500;
  background: linear-gradient(135deg, #fff6c2 0%, #f6cf5a 22%, #d99b1c 46%, #ffe48a 64%, #c88a12 86%, #f7d773 100%);
  box-shadow:
    inset 0 0 0 calc(var(--cw) * 0.07) rgba(255, 250, 225, 0.55),
    inset 0 0 0 calc(var(--cw) * 0.07 + 1.5px) rgba(150, 95, 0, 0.45),
    0 0 0 1px rgba(120, 70, 0, 0.35),
    0 0 30px 4px rgba(255, 204, 0, 0.45),
    0 14px 30px -10px rgba(0, 0, 0, 0.6);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 500ms var(--ease-out);
}
.pk-gold.hover .pk-gold-card {
  transition: transform 90ms linear;
}
.pk-gold-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 calc(var(--cw) * 0.66) / 1 ui-rounded, "SF Pro Rounded", var(--font);
  letter-spacing: -0.03em;
  text-shadow:
    0 1px 0 rgba(255, 250, 220, 0.9),
    0 -1px 0 rgba(120, 70, 0, 0.35);
}
.pk-gold-value.word {
  padding: 0 10%;
  font-size: calc(var(--cw) * 0.26);
  line-height: 1.1;
  text-align: center;
}
.pk-gold-corner {
  position: absolute;
  font: 800 calc(var(--cw) * 0.2) / 1 ui-rounded, var(--font);
  color: rgba(107, 69, 0, 0.75);
}
.pk-gold-corner.tl {
  top: 9%;
  left: 11%;
}
.pk-gold-corner.br {
  bottom: 9%;
  right: 11%;
  rotate: 180deg;
}
/* Le reflet : un éclat qui suit le pointeur, et des bandes irisées (le « holo » des cartes rares). */
.pk-gold-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(115deg, rgba(255, 90, 170, 0.22) 0 8%, rgba(90, 220, 255, 0.22) 8% 16%, rgba(255, 240, 90, 0.22) 16% 24%, rgba(140, 255, 160, 0.2) 24% 32%);
  background-size:
    100% 100%,
    220% 220%;
  background-position:
    0 0,
    var(--mx) var(--my);
  mix-blend-mode: overlay;
  animation: pk-shine 3.2s ease-in-out infinite;
}
.pk-gold.hover .pk-gold-shine {
  animation: none;
}
@keyframes pk-shine {
  0%,
  100% {
    background-position:
      0 0,
      0% 0%;
  }
  50% {
    background-position:
      0 0,
      100% 100%;
  }
}
.pk-gold-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.pk-gold-text .pk-btn {
  margin-top: 6px;
}
.pk-result.consensus .pk-caption {
  font: 800 clamp(22px, 4vh, 30px) / 1.1 ui-rounded, "SF Pro Rounded", var(--font);
  color: #ffd84a;
  text-shadow:
    0 0 22px rgba(255, 204, 0, 0.5),
    0 3px 14px rgba(0, 0, 0, 0.35);
}
.pk-cheer {
  font-size: var(--fs-sub);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.85);
}
.pk-streak {
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #ff9f0a, #ff375f);
  color: #fff;
  font-size: var(--fs-footnote);
  font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(255, 55, 95, 0.7);
  animation: pk-pop 600ms var(--ease-spring);
}

/* --- L'écran partagé (poker-ecran.js) : le groupe de boutons de la barre --- */
.pk-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pk-share-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  height: 30px;
  padding: 0 4px 0 2px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: 650;
}
button.pk-share-name {
  padding: 0 8px 0 6px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
button.pk-share-name:hover {
  background: var(--fill);
}
.pk-share-name b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: inherit;
}
.pk-share-icon,
.pk-screen-icon {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--accent);
}
.pk-share-icon svg,
.pk-screen-icon svg {
  width: 16px;
  height: 16px;
}
.pk-seg.icons button {
  display: grid;
  place-items: center;
  width: 34px;
  padding: 0;
}
.pk-seg.icons svg {
  width: 17px;
  height: 17px;
}
.pk-seg button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --- L'écran partagé : en vignette (qu'on déplace, qu'on agrandit), à côté de la table, en grand --- */
.pk-screen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--r-xl);
  pointer-events: auto;
  color: var(--text);
  transition:
    translate var(--dur-sheet) var(--ease-sheet),
    width var(--dur-sheet) var(--ease-sheet),
    height var(--dur-sheet) var(--ease-sheet);
}
.pk-screen[hidden] {
  display: none;
}
.pk-screen.jump,
.pk-screen.dragging {
  transition: none;
}
.pk-screen-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 30px;
  padding-left: 6px;
  font-size: var(--fs-sub);
  font-weight: 650;
  user-select: none;
}
/* (La vue scindée aussi : tirer son titre la détache en vignette.) */
.pk-screen.float .pk-screen-head,
.pk-screen.split .pk-screen-head {
  cursor: grab;
}
.pk-screen.dragging .pk-screen-head {
  cursor: grabbing;
}
.pk-screen-head b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-screen-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-2);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.pk-screen-btn:hover {
  background: var(--glass-strong);
  color: var(--text);
}
.pk-screen-btn svg {
  width: 15px;
  height: 15px;
}
.pk-screen-box {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: calc(var(--r-xl) - 6px);
  overflow: hidden;
  background: rgba(12, 8, 24, 0.62);
}
.pk-screen-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pk-screen-box:fullscreen {
  border-radius: 0;
  background: #000;
}
/* Les coins de la vignette : on la tire par l'un d'eux pour l'agrandir ou la réduire (la marque, en
   bas à droite, sur l'image). */
.pk-screen-grip {
  display: none;
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
}
.pk-screen.float .pk-screen-grip {
  display: block;
}
.pk-screen-grip.tl {
  left: 0;
  top: 0;
  cursor: nwse-resize;
}
.pk-screen-grip.tr {
  right: 0;
  top: 0;
  cursor: nesw-resize;
}
.pk-screen-grip.bl {
  left: 0;
  bottom: 0;
  cursor: nesw-resize;
}
.pk-screen-grip.br {
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  cursor: nwse-resize;
}
.pk-screen-grip.br::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 0 0 3px 0;
}
/* En grand : pas de cadre de verre ; le nom sur l'image, comme la scène de la vue réunion. */
.pk-screen.stage {
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 1.25rem 3rem -1rem rgba(0, 0, 0, 0.55);
}
.pk-screen.stage .pk-screen-box {
  border-radius: var(--r-xl);
  background: none;
}
.pk-screen.stage .pk-screen-head {
  position: absolute;
  left: 12px;
  bottom: 11px;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 0 3px 0 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  -webkit-backdrop-filter: var(--glass-blur, blur(10px));
  backdrop-filter: var(--glass-blur, blur(10px));
}
/* Sans l'effet verre (app.css) : plus sombre, l'écran partagé ne s'efface plus derrière. */
:root[data-glass="off"] .pk-screen.stage .pk-screen-head {
  background: rgba(0, 0, 0, 0.7);
}
.pk-screen.stage .pk-screen-icon {
  color: #fff;
}
.pk-screen.stage .pk-screen-btn {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.pk-screen.stage .pk-screen-btn.hide {
  display: none;
}

/* --- Plein écran : les caméras en vignettes, la carte de chacun à son coin, la table en bande --- */
.poker.stage .pk-seat {
  width: var(--seat-w);
  height: var(--seat-h);
}
.poker.stage .pk-avatar {
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 12px 28px -10px rgba(0, 0, 0, 0.55);
}
.poker.stage .pk-seat.me .pk-avatar {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--accent),
    0 12px 28px -10px rgba(0, 0, 0, 0.55);
}
.poker.stage .pk-seat.speaking .pk-avatar {
  box-shadow:
    0 0 0 3px var(--green),
    0 12px 28px -10px rgba(0, 0, 0, 0.55);
}
/* L'avatar en pixel art reste carré, au milieu de la vignette. */
.poker.stage .pk-avatar canvas {
  left: 50%;
  right: auto;
  width: auto !important;
  translate: -50% 0;
}
.poker.stage .pk-plate {
  left: 8px;
  top: auto;
  bottom: 8px;
  translate: none;
  max-width: calc(100% - 16px);
  padding: 2px 8px;
}
.poker.stage .pk-say {
  left: 8px;
  top: 8px;
  bottom: auto;
  translate: 0 -4px;
}
.poker.stage .pk-seat.extreme .pk-say {
  translate: 0 0;
}
.poker.stage .pk-say::after {
  display: none;
}
/* Pas encore joué : sa place, en pointillés au coin de la vignette ; jouée, la carte s'y pose
   (par-dessus les vignettes ; la main et les cartes qui volent, encore au-dessus). */
.poker.stage .pk-spots,
.poker.stage .pk-cards {
  z-index: 1;
}
.poker.stage .pk-hand,
.poker.stage .pk-fly {
  z-index: 2;
}
.poker.stage .pk-spot {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(18, 10, 34, 0.35);
}
.poker.stage .pk-cards .pk-card {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}
/* La plaque, dans la bande : en plus petit, sans la phrase de la fête. */
.poker.stage .pk-plaque {
  gap: 4px;
  padding: 4px 8px;
}
.poker.stage .pk-body {
  gap: 6px 12px;
}
.poker.stage .pk-big {
  font-size: 30px;
}
.poker.stage .pk-side {
  flex-direction: row;
  align-items: center;
}
.poker.stage .pk-result.consensus .pk-caption {
  font-size: 18px;
}
.poker.stage .pk-cheer,
.poker.stage .pk-streak {
  display: none;
}
.poker.stage .pk-gold-text {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.poker.stage .pk-gold-text .pk-btn {
  margin-top: 0;
}
.poker.stage .pk-hand-card:hover,
.poker.stage .pk-hand-card:focus-visible {
  --lift: 14px;
}
.poker.stage .pk-bench {
  opacity: 0;
  pointer-events: none;
}

/* --- Écran étroit --- */
.poker.narrow .pk-plaque {
  gap: 6px;
  padding: 6px 8px;
}
.poker.narrow .long {
  display: none;
}
.poker.narrow .short {
  display: inline;
}
.poker.narrow .pk-seg button {
  height: 28px;
  padding: 0 9px;
  font-size: var(--fs-footnote);
}
.poker.narrow .pk-sep {
  margin: 0 1px;
}
/* (Avec le groupe de l'écran partagé, la barre peut passer sur deux lignes ; l'icône seule suffit.) */
.poker.narrow .pk-bar {
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 32px);
}
.poker.narrow .pk-share-name b {
  display: none;
}
.poker.narrow .pk-body {
  flex-direction: column;
  gap: 8px;
}
.poker.narrow .pk-btn.primary {
  height: 32px;
  padding: 0 12px;
}
/* Le résultat, en petit : le chiffre, le bouton ; la carte d'or et « Consensus ! », sans la phrase. */
.poker.narrow .pk-result {
  gap: 8px;
}
.poker.narrow .pk-score {
  min-width: 0;
}
.poker.narrow .pk-big {
  font-size: 30px;
}
.poker.narrow .pk-caption {
  font-size: var(--fs-caption);
}
.poker.narrow .pk-note,
.poker.narrow .pk-cheer,
.poker.narrow .pk-streak {
  display: none;
}
.poker.narrow .pk-gold {
  width: calc(var(--cw) * 1.1);
  height: calc(var(--cw) * 1.1 * 1.4);
}
.poker.narrow .pk-result.consensus .pk-caption {
  font-size: 17px;
}
.poker.narrow .pk-gold-text .pk-btn {
  margin-top: 2px;
}
.poker.narrow .pk-plate {
  max-width: 90px;
  padding: 2px 7px;
  font-size: var(--fs-caption);
}
@media (prefers-reduced-motion: reduce) {
  .poker,
  .pk-screen,
  .pk-seat,
  .pk-card,
  .pk-flip,
  .pk-hand-card,
  .pk-result {
    transition: none;
  }
  .pk-state.thinking span,
  .pk-btn.primary.ready,
  .pk-gold,
  .pk-gold-shine,
  .pk-table.wave .pk-felt,
  .pk-table.wave .pk-felt::after,
  .view-switch button.pk-ping::after {
    animation: none;
  }
}