/* ============================================================
   GameBase — design system clair & épuré, mobile-first paysage
   ============================================================ */

:root {
  /* Surfaces & texte */
  --bg: #eef3f0;
  --bg-2: #e3ece8;
  --surface: #ffffff;
  --surface-2: #f4f9f6;
  /* Surfaces FLOTTANTES (modales, tiroir, menu profil, toasts) : toujours OPAQUE.
     Les thèmes sombres redéfinissent --surface en rgba(255,255,255,.05) — parfait pour des
     panneaux posés dans le flux, illisible pour ce qui flotte au-dessus du contenu. */
  --overlay: #ffffff;
  /* Variante plus sourde pour le tiroir latéral : plein écran en hauteur, il doit peser moins
     visuellement qu'une modale. */
  --overlay-2: #f7faf9;
  --border: #e0eae5;
  --border-strong: #c9d8d1;
  --text: #182420;
  --muted: #6f8079;
  --muted-2: #93a49c;

  /* Accent — émeraude / teal */
  --primary: #0d9e6e;
  --primary-strong: #067a55;
  --primary-soft: #e4f6ee;
  --primary-border: #b7e6d1;
  --ring: rgba(13, 158, 110, 0.32);

  /* Feedback */
  --ok: #15a34a;
  --ok-soft: #e6f7ec;
  --danger: #e11d48;
  --warn: #d97706;

  /* Couleurs cartes UNO */
  --uno-red: #ef4444;
  --uno-red-d: #b91c1c;
  --uno-yellow: #f5b90a;
  --uno-yellow-d: #b47c05;
  --uno-green: #22c55e;
  --uno-green-d: #15803d;
  --uno-blue: #3b82f6;
  --uno-blue-d: #1d4ed8;

  /* Rayons & ombres */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(20, 28, 56, 0.06), 0 1px 3px rgba(20, 28, 56, 0.08);
  --shadow-md: 0 6px 16px rgba(20, 28, 56, 0.10);
  --shadow-card: 0 8px 20px rgba(20, 28, 56, 0.18);

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Jamais de scroll horizontal (les tiroirs/overlays glissés hors-écran ne doivent pas élargir la page). */
html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 100% -10%, #dff5ea 0%, transparent 55%),
    radial-gradient(1000px 500px at -10% 110%, #e7f7ec 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------ Top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
}

.brand-logo {
  flex: none;
  filter: drop-shadow(0 3px 5px rgba(6, 122, 85, 0.18));
}

.brand-name { line-height: 1; }
.brand-accent { color: var(--primary); }

.nav-actions {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.topbar .actions {
  margin-left: auto;
}

/* ------------------------------------------------------------ Buttons */

button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  line-height: 1.1;
}

button:hover {
  background: var(--primary-strong);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

button.secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

button.secondary:hover {
  background: var(--surface-2);
  border-color: var(--muted-2);
}

button.ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding: 7px 10px;
}

button.ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-actions button {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding: 7px 12px;
  border-radius: 999px;
}

.nav-actions button:hover {
  background: var(--surface-2);
  color: var(--text);
}

button.nav-active {
  background: var(--primary-soft) !important;
  color: var(--primary-strong) !important;
  border: 1px solid var(--primary-border);
}

/* ------------------------------------------------------------ Layout */

.app-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
}

.status-line {
  margin: 0 0 12px;
}

#status {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-block;
  box-shadow: var(--shadow-sm);
}

.page {
  display: none;
  animation: fade-in 0.18s ease;
}

.page.active {
  display: block;
}

/* Fondu à l'opacité uniquement : pas de `transform`, qui ferait de `.page` un bloc conteneur
   pour les descendants `position: fixed` (ex. le tiroir "Salon") et les empêcherait de se
   positionner par rapport au viewport. */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.panel + .panel {
  margin-top: 14px;
}

h1, h2, h3 {
  margin-top: 0;
  letter-spacing: -0.02em;
}

h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

.muted {
  color: var(--muted);
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------ Forms & tables */

input,
select {
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 12px;
}

form.grid {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px;
  border-radius: var(--r-md);
  font-size: 13px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
  font-weight: 700;
}

th,
td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 9px 8px;
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--surface-2);
}

.card {
  width: min(560px, calc(100vw - 32px));
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------ Game page shell */

.page-game.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* HUD : bandeau de statut + actions rapides */
.game-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
}

.turn-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
/* Nom de l'adversaire dont c'est le tour, mis en avant */
.turn-badge strong {
  font-weight: 800;
  color: var(--text);
}

.turn-badge .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted-2);
}

.turn-badge.is-mine {
  background: var(--ok-soft);
  border-color: #bff0cf;
  color: var(--ok);
}
/* Mon tour : bandeau plus gros et affirmé */
.turn-badge.is-mine.big {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.turn-badge.finished {
  opacity: 0.75;
}

.turn-badge.is-mine .dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0.04); }
}

.hud-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12.5px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.chip .swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.hud-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Table de jeu */
.table {
  position: relative;
  flex: 1;
  min-height: 340px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--surface-2) 75%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
}

/* Rangée des adversaires */
.seat-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.seat {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.seat.is-me {
  background: var(--primary-soft);
  border-color: var(--primary-border);
}

/* Joueur actif : bien plus visible (fond vert, halo pulsé, léger relief) — placé APRÈS .is-me
   pour que l'état "actif" l'emporte visuellement, y compris sur mon propre siège. */
.seat.active,
.seat.is-me.active {
  border-color: var(--ok);
  background: var(--ok-soft);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22);
  transform: translateY(-1px) scale(1.03);
}
.seat.active .avatar {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
  animation: pulse 1.4s infinite;
}
/* Pastille "à son tour" / "à toi" */
.seat-turn {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--ok);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #0e7490);
  flex: none;
}

.seat-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.seat-name {
  font-weight: 700;
  font-size: 13px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-sub {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mini-back {
  width: 13px;
  height: 18px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, var(--primary) 0 3px, var(--primary-strong) 3px 6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: inline-block;
}

/* Zone centrale (piles) */
.center-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.pile-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.pile-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.pile-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
}

.pile-count {
  font-size: 11px;
  color: var(--muted);
}

/* ------------------------------------------------------------ Playing cards */

.pcard {
  --w: 74px;
  width: var(--w);
  height: calc(var(--w) * 1.5);
  border-radius: calc(var(--w) * 0.14);
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--card-bg, var(--uno-blue));
  box-shadow: var(--shadow-card);
  border: none;
  padding: 0;
  user-select: none;
  flex: none;
  overflow: hidden;
}

/* pastille blanche ovale centrale, signature UNO */
.pcard::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50% / 42%;
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(-24deg);
}

.pcard .pc-center {
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: calc(var(--w) * 0.5);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  letter-spacing: -0.02em;
}

.pcard .pc-center.sym {
  /* Symboles d'action (Skip ⊘, Reverse ⇄, Wild ★) plus gros et pleins : ils étaient nettement plus
     petits que les chiffres et se remarquaient mal. */
  font-size: calc(var(--w) * 0.46);
  font-weight: 900;
}

.pcard .pc-corner {
  position: absolute;
  z-index: 2;
  font-weight: 800;
  font-size: calc(var(--w) * 0.2);
  line-height: 1;
}

.pcard .pc-corner.tl { top: 7%; left: 9%; }
.pcard .pc-corner.br { bottom: 7%; right: 9%; transform: rotate(180deg); }
/* Index miroir (coin bas pivoté) estompé sur les cartes "plain" (LE JEU) et Mille Bornes : le grand
   chiffre central y domine, le doublon retourné était lu comme du bruit. Reste un rappel discret.
   (UNO conserve ses deux index bien lisibles.) */
.pcard--plain .pc-corner.br,
.mb-board .pcard .pc-corner.br { opacity: 0.4; }

.pcard--red { --card-bg: linear-gradient(150deg, var(--uno-red) 0%, var(--uno-red-d) 100%); }
.pcard--yellow { --card-bg: linear-gradient(150deg, var(--uno-yellow) 0%, var(--uno-yellow-d) 100%); }
.pcard--green { --card-bg: linear-gradient(150deg, var(--uno-green) 0%, var(--uno-green-d) 100%); }
.pcard--blue { --card-bg: linear-gradient(150deg, var(--uno-blue) 0%, var(--uno-blue-d) 100%); }
.pcard--wild {
  --card-bg: #24304a;
  color: #fff;
}
.pcard--wild::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50% / 42%;
  transform: rotate(-24deg);
  background: conic-gradient(var(--uno-red) 0 90deg, var(--uno-blue) 90deg 180deg, var(--uno-green) 180deg 270deg, var(--uno-yellow) 270deg 360deg);
  z-index: 1;
}
.pcard--wild::before { display: none; }
.pcard--wild .pc-center,
.pcard--wild .pc-corner { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }

/* carte neutre (The Game / générique) */
.pcard--plain {
  --card-bg: #ffffff;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.pcard--plain::before {
  background: var(--surface-2);
  inset: 8%;
  border-radius: 10%;
  transform: none;
}
.pcard--plain .pc-center { text-shadow: none; }
.pcard--plain .pc-corner { color: var(--muted); text-shadow: none; }

/* Dos de carte (pioche) */
.pcard--back {
  background: linear-gradient(135deg, #10b981, #065f46);
}
.pcard--back::before {
  inset: 10%;
  border-radius: 10%;
  transform: none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 6px, transparent 6px 12px);
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.pcard--back .pc-center {
  font-size: calc(var(--w) * 0.28);
  opacity: 0.9;
}

/* pile de dépôt (drop target) */
.drop-pile {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, outline-color 0.12s ease;
  outline: 3px solid transparent;
  outline-offset: 3px;
}

.drop-pile.drag-over,
.drop-pile.droppable {
  outline-color: var(--primary);
  box-shadow: var(--shadow-card), 0 0 0 6px var(--ring);
}

.drop-pile.droppable {
  animation: bob 1s ease-in-out infinite;
}

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

.pile-empty {
  border: 2px dashed var(--border-strong);
  background: var(--surface-2);
  color: var(--muted-2);
  box-shadow: none;
}
.pile-empty::before { display: none; }

/* ------------------------------------------------------------ Ma main (hand dock) */

.hand-dock {
  /* Pleine largeur (et non "align-self: end" qui rétrécissait le dock à la largeur des cartes
     et débordait l'écran) : la main scrolle horizontalement DANS le dock via .hand overflow-x. */
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

.hand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.hand-head .label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
}

.hand {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: clip;
  /* Marge haute : quand une carte se soulève, elle reste dans la zone visible (pas coupée). */
  padding: 26px 4px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.hand::-webkit-scrollbar { height: 6px; }
.hand::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

.hand .pcard {
  scroll-snap-align: center;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.hand .pcard:hover,
.hand .pcard.playable:hover,
.hand .pcard.selected {
  z-index: 7;
}

.hand .pcard:hover {
  transform: translateY(-10px);
}

.hand .pcard.selected {
  transform: translateY(-16px);
  box-shadow: var(--shadow-card), 0 0 0 4px var(--ring);
}

.hand .pcard[draggable="true"] { cursor: grab; }
.hand .pcard:active { cursor: grabbing; }

.hand-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 18px;
}

/* ------------------------------------------------------------ Room drawer */

/* Le tiroir "Salon" est un overlay latéral coulissant à TOUTES les tailles (accessible via le
   bouton "Salon" du HUD). Le laisser dans le flux (ancien comportement desktop) gonflait la hauteur
   de .table-view et poussait l'.action-dock (positionné en absolu) bien en dessous de l'écran. */
.room-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  display: flex;
  flex-direction: column;
  /* Opaque : le tiroir passe AU-DESSUS du plateau, un fond translucide laissait les cartes
     et le tapis transparaître derrière la liste des joueurs. Plus sombre qu'une modale
     (--overlay-2) : il occupe toute la hauteur, il ne doit pas éclairer l'écran. */
  background: var(--overlay-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transform: translateX(102%);
  transition: transform 0.25s ease;
  z-index: 40;
  overflow-y: auto;
}
.room-drawer.open { transform: none; }

.player-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.player-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
}

/* Badge d'état de partie */
.game-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.game-state-pill.won { background: var(--ok-soft); color: var(--ok); border-color: #bff0cf; }
.game-state-pill.lost { background: #fdeaee; color: var(--danger); border-color: #f6c9d3; }

/* ------------------------------------------------------------ Modals */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 28, 48, 0.45);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 16px;
  /* Au-dessus de .toast-stack (z-index 300) : une modale bloquante (résultat, fin de manche, quitter…)
     ne doit jamais être recouverte par les toasts transitoires. Sinon le titre « Résultat de la
     partie » / « TU ES MORT » disparaît sous la pile de toasts (bug vu canabis, que_ca_a_faire…). */
  z-index: 400;
  animation: fade-in 0.15s ease;
  /* Filet de sécurité si la carte dépasse malgré son max-height (écran très bas). */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-card {
  width: min(420px, 92vw);
  background: var(--overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
  /* Jamais plus haute que l'écran : le contenu défile DANS la carte. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-card h3 { font-size: 20px; margin-bottom: 8px; }

#wildColorChoices {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

#wildColorChoices button {
  min-width: 84px;
  min-height: 74px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#wildColorChoices .wc-shape { font-size: 22px; line-height: 1; }
#wildColorChoices .wc-lbl { line-height: 1; }
#wildColorChoices button[data-wild-color="RED"] { background: var(--uno-red); }
#wildColorChoices button[data-wild-color="YELLOW"] { background: var(--uno-yellow); }
#wildColorChoices button[data-wild-color="GREEN"] { background: var(--uno-green); }
#wildColorChoices button[data-wild-color="BLUE"] { background: var(--uno-blue); }
#wildColorChoices button:hover { transform: translateY(-2px) scale(1.04); }

.hidden { display: none !important; }

/* ------------------------------------------------------------ Rotation hint */

.rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  place-items: center;
  text-align: center;
  padding: 24px;
}

.rotate-hint .phone {
  width: 64px;
  height: 100px;
  border: 3px solid var(--primary);
  border-radius: 12px;
  margin: 0 auto 18px;
  animation: rotate-phone 1.8s ease-in-out infinite;
}

@keyframes rotate-phone {
  0%, 40% { transform: rotate(0); }
  60%, 100% { transform: rotate(-90deg); }
}

.rotate-hint h2 { color: var(--text); }
.rotate-hint p { color: var(--muted); max-width: 320px; }

/* ------------------------------------------------------------ Responsive : téléphone en paysage */

/* Sur petits écrans en paysage : on maximise la table de jeu. */
@media (max-height: 560px) and (orientation: landscape) {
  .topbar { padding: 6px 12px; }
  .brand { font-size: 15px; }
  .nav-actions button,
  .topbar .actions button { padding: 6px 10px; font-size: 13px; }
  .app-shell { padding: 8px 12px; }
  .status-line { display: none; }

  .page-game.active { height: calc(100dvh - 52px); gap: 8px; }
  .game-hud { padding: 6px 10px; }
  .table { min-height: 0; padding: 10px; gap: 8px; border-radius: var(--r-lg); }
  .pcard { --w: 58px; }
  .hand .pcard { --w: 64px; }
  .seat { padding: 3px 10px 3px 3px; }
  .avatar { width: 26px; height: 26px; }
  .hand { padding: 22px 4px 8px; }

}

/* Portrait sur mobile : les jeux de cartes se jouent en paysage → on affiche l'invite à tourner
   l'écran. (Les optimisations mobile ci-dessous — barre masquée, tailles, anti-débordement —
   s'appliquent surtout en paysage, où le jeu est réellement utilisé.) */
@media (max-width: 720px) and (orientation: portrait) {
  body.in-game .rotate-hint { display: grid; }
}

/* Desktop large : lobby en colonnes confortables */
@media (min-width: 900px) {
  .lobby-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }
}

/* Le tiroir "Salon" étant désormais un overlay à toutes les tailles, son bouton est toujours visible. */
.drawer-toggle { display: inline-flex; }

/* ============================================================
   Améliorations UX — lots 1 à 4
   ============================================================ */

/* ---- Lot 1 : cartes jouables / injouables + feedback ---- */

.hand .pcard.playable {
  box-shadow: var(--shadow-card), 0 0 0 3px rgba(22, 163, 74, 0.55);
}
.hand .pcard.playable::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
  z-index: 3;
}
.hand .pcard.playable:hover {
  transform: translateY(-12px);
}

/* on ne grise que pendant mon tour, pour distinguer les coups légaux */
.hand.turn-mine .pcard.unplayable {
  filter: grayscale(0.55) brightness(0.94);
  opacity: 0.6;
  cursor: not-allowed;
}
.hand.turn-mine .pcard.unplayable:hover {
  transform: none;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-5px) rotate(-1.5deg); }
  80% { transform: translateX(5px) rotate(1.5deg); }
}
.pcard.shake {
  animation: shake 0.4s ease;
}

/* pioche cliquable */
.pile-draw {
  position: relative;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pile-draw:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), 0 0 0 4px var(--ring);
}
.pile-draw.actionable::after {
  content: "Piocher";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17, 20, 34, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.14s ease;
  pointer-events: none;
}
.pile-draw.actionable:hover::after {
  opacity: 1;
}
.pile-draw.actionable {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---- Lot 2 : toasts + indicateur de connexion ---- */

.toast-stack {
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: min(440px, calc(100vw - 24px));
}

.toast {
  pointer-events: auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--overlay);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  animation: toast-in 0.2s ease both;
}
.toast.leaving {
  animation: toast-out 0.25s ease forwards;
}
.toast::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
.toast.success::before { background: var(--ok); }
.toast.error::before { background: var(--danger); }
.toast.error { border-color: #f6c9d3; }
.toast.success { border-color: #bff0cf; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px); }
}

.conn-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.conn-dot .led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.conn-dot.online .led {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.conn-dot.offline .led {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.16);
}
.conn-dot .conn-text { display: inline; }
@media (max-width: 560px) {
  .conn-dot .conn-text { display: none; }
}

/* ---- Lot 3 : lobby en cartes de jeux ---- */

.game-cards {
  display: grid;
  /* auto-fit (pas auto-fill) : avec peu de jeux, les colonnes vides doivent se refermer pour que les
     cartes reelles occupent toute la largeur disponible, sinon elles restent coincees a la largeur mini
     (230px) meme sur un ecran large, le texte de description passe alors sur beaucoup de lignes et pousse
     le bouton tout en bas de la carte. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.game-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.game-card__cover {
  height: 84px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.game-card__cover.uno {
  background: linear-gradient(120deg, var(--uno-red), var(--uno-yellow) 45%, var(--uno-green) 70%, var(--uno-blue));
}
.game-card__cover.thegame {
  background: linear-gradient(120deg, #1f2937, var(--primary));
}
.game-card__cover.generic {
  background: linear-gradient(120deg, var(--muted-2), var(--muted));
}
.game-card__title {
  font-weight: 800;
  font-size: 16px;
}
.game-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.game-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  flex: 1;
}
.game-card button {
  width: 100%;
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
}
.avatar-stack .avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #0e7490);
  border: 2px solid var(--surface);
  margin-left: -8px;
}
.avatar-stack .avatar-sm:first-child { margin-left: 0; }

.empty-state {
  text-align: center;
  padding: 26px 16px;
  color: var(--muted);
}
.empty-state .emoji {
  font-size: 30px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.8;
}

/* ---- Lot 4 : animations de cartes ---- */

@keyframes pop-in {
  0% { transform: scale(0.7) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.pcard.play-pop {
  animation: pop-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* carte fantôme animée qui vole vers la défausse */
.fly-card {
  position: fixed;
  z-index: 250;
  pointer-events: none;
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.34s ease;
  will-change: transform, opacity;
}

/* flèche de sens de jeu (UNO) */
.turn-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.turn-dir .arrow {
  font-size: 16px;
  color: var(--primary);
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .pcard.play-pop,
  .pcard.shake,
  .drop-pile.droppable,
  .turn-badge.is-mine .dot { animation: none; }
  .fly-card { transition: none; }
}

/* ============================================================
   Restructurations R1–R4
   ============================================================ */

/* La ligne de statut technique n'est plus affichée (toasts + point de connexion la remplacent). */
.status-line,
#status[hidden] { display: none !important; }

/* ---- R1 : profil + accueil hub ---- */

.profile-wrap { position: relative; }

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
.profile-chip:hover { background: var(--surface-2); }
.profile-chip .avatar { width: 26px; height: 26px; font-size: 12px; }
.profile-chip .caret { color: var(--muted-2); font-size: 11px; }

.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 40;
  display: grid;
  gap: 2px;
}
.profile-menu[hidden] { display: none; }
.profile-menu__email {
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  word-break: break-all;
}
.menu-item {
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  font-weight: 600;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: #fdeaee; }

.hub { display: grid; gap: 18px; }
.hub-head h1 { margin: 0 0 2px; font-size: 30px; }
.hub .mk-sub { margin: 0; }
.hub h2 { margin: 0 0 12px; }

.resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--primary-soft), #fff);
  border: 1px solid var(--primary-border);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tile-cover {
  height: 96px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 26px;
}
.tile-cover.uno { background: linear-gradient(120deg, var(--uno-red), var(--uno-yellow) 45%, var(--uno-green) 70%, var(--uno-blue)); }
.tile-cover.thegame { background: linear-gradient(120deg, #1f2937, var(--primary)); }
.tile-cover.generic { background: linear-gradient(120deg, var(--muted-2), var(--muted)); }
.tile-body { display: grid; gap: 2px; padding: 14px; }
.tile-title { font-weight: 800; font-size: 16px; }

.hero { text-align: center; display: grid; gap: 14px; place-items: center; }
.hero h1 { font-size: 30px; margin: 0; }
.hero-games { display: flex; gap: 12px; }
.hero-cover {
  width: 130px; height: 82px; border-radius: var(--r-md);
  display: grid; place-items: center; color: #fff; font-weight: 900;
}
.hero-cover.uno { background: linear-gradient(120deg, var(--uno-red), var(--uno-yellow) 45%, var(--uno-green) 70%, var(--uno-blue)); }
.hero-cover.thegame { background: linear-gradient(120deg, #1f2937, var(--primary)); }

/* ---- R2 : modale de création ---- */

.modal-card--form { text-align: left; width: min(460px, 94vw); }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input { width: 100%; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.modal-card--form form button[type="submit"] { margin-top: 4px; }

/* ---- R3 : salle d'attente ---- */

.waiting-room { }
.wr { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.wr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wr-title { font-size: 24px; margin: 0; }
.wr-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.wr-player {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.wr-player.ready { border-color: #bff0cf; background: var(--ok-soft); }
.wr-player__info { display: flex; flex-direction: column; }
.wr-player__name { font-weight: 700; font-size: 14px; }
.wr-player__state { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.wr-player.ready .wr-player__state { color: var(--ok); }
.wr-foot { display: flex; justify-content: center; }
.wr-cta { font-size: 15px; padding: 12px 26px; }

/* ---- R4 : table + dock d'actions ---- */

.table-view { position: relative; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; max-width: 100%; }
/* Les enfants du plateau ne doivent jamais forcer une largeur > écran (sinon scroll horizontal). */
.table-view > * { min-width: 0; max-width: 100%; }
.table-view[hidden] { display: none; }
.waiting-room[hidden] { display: none; }

.action-dock {
  position: absolute;
  right: 14px;
  bottom: 108px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
}
.action-dock:empty { display: none; }
.game-hud #roomDrawerBtn { margin-left: auto; }

/* En partie, la barre du haut (sticky, z-index élevé) ne doit jamais rester posée par-dessus le
   plateau qui défile : sur mobile elle est déjà masquée, sur desktop on la remet dans le flux. */
body.in-game .topbar { position: static; }

/* Desktop en partie : la vue de jeu tient dans la hauteur de l'écran et c'est le plateau qui
   scrolle en interne (comme sur mobile), au lieu de faire défiler toute la page derrière la barre
   du haut — sinon le bandeau et le haut du plateau se recouvrent. */
@media (min-width: 721px) {
  body.in-game .page-game.active { height: calc(100dvh - 88px); min-height: 0; }
  body.in-game .table-view { min-height: 0; }
  body.in-game .table { min-height: 0; overflow-y: auto; }
}

/* Desktop : densifier les plateaux (l'audit signalait de grands vides).
   IMPORTANT : on exige aussi min-height:561px. Sinon un grand téléphone en PAYSAGE (ex. 932×430)
   dépasse 900px de large et héritait de --w:104px → cartes centrales énormes sur petit écran.
   min-height:561 exclut les paysages courts (qui restent gérés par le mode compact). */
@media (min-width: 900px) and (min-height: 561px) {
  /* Jeux à racine unique (Mille Bornes, Belote, Trio) : occupent toute la hauteur du plateau pour
     que la main descende en bas (hand-dock a margin-top:auto) au lieu de laisser une rangée vide
     sous le contenu (le grid .table = auto / 1fr / auto ne recevait qu'un seul enfant en rangée 1). */
  body.in-game .table > .mb-board,
  body.in-game .table > .belote-board,
  body.in-game .table > .trio-board { grid-row: 1 / -1; height: 100%; min-height: 0; }

  /* THE GAME / UNO : agrandir les pièces centrales, trop petites dans un grand espace. */
  body.in-game .center-zone { gap: 26px; }
  body.in-game .center-zone .pcard { --w: 104px; }
}

/* [hidden] doit primer sur les display: grid/flex explicites */
#browseGrid[hidden] { display: none; }
.action-dock button {
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: var(--shadow-md);
}
.action-dock .chip { box-shadow: var(--shadow-sm); }

@media (max-height: 560px) and (orientation: landscape) {
  .action-dock { bottom: 92px; right: 10px; }
  .action-dock button { padding: 10px 14px; }
  .wr-title { font-size: 20px; }
}

/* ============================================================
   Passe UX/UI de l'écran d'accueil + finitions charte
   ============================================================ */

.app-shell { padding: 20px 16px 40px; }

/* En-tête d'accueil plus posé */
.hub-head h1 { font-size: 26px; margin: 0 0 2px; }
#browseIntro { margin-bottom: 18px; }

/* Accueil sur une seule colonne : la rangée de jeux respire, les salons en pleine largeur */
#browseGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.panel { padding: 20px; }
.panel h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* Cartes de jeux : plus compactes, plus nettes.
   Flex centré (et non grid) : avec 5 jeux, une grille laissait la 5e carte seule alignée à gauche
   avec un grand vide à droite ("orpheline"). En flex wrap + justify-content:center, la dernière
   rangée incomplète se centre proprement sous les autres. */
.game-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.game-card { flex: 1 1 260px; max-width: 340px; padding: 14px; gap: 12px; }
.game-card__cover {
  height: 76px;
  font-size: 22px;
  letter-spacing: 0.06em;
  position: relative;
  overflow: hidden;
}
/* Motif discret de cartes en fond de la cover */
.game-card__cover::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -22px;
  width: 60px;
  height: 78px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(18deg);
  box-shadow: -16px 4px 0 rgba(255, 255, 255, 0.1);
}
.game-card__title { font-size: 15px; }
.game-card__desc { font-size: 12.5px; line-height: 1.5; }

/* Landing (déconnecté) recentré */
.hero { padding: 34px 22px; gap: 16px; }
.hero h1 { font-size: 28px; }

/* Salutation : petit dégradé de marque en filigrane */
.hub-head h1 {
  background: linear-gradient(90deg, var(--text) 60%, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Boutons : légère profondeur de la couleur de marque */
button:not(.secondary):not(.ghost):not(.menu-item) {
  box-shadow: 0 2px 6px rgba(6, 122, 85, 0.18);
}

/* Puce de couleur active plus lisible sur charte verte */
.turn-badge.is-mine {
  background: var(--ok-soft);
  border-color: var(--primary-border);
}

/* ============================================================
   Mille Bornes — "1 000 000 mètres"
   ============================================================ */

/* Bannières de jeu (carte lobby + accueil) : thème route / course automobile.
   Asphalte sombre + bande de route + ligne médiane jaune pointillée + drapeau à damier
   collé à droite (la ligne d'arrivée : atteindre 1 000 000 m). Bien plus lisible et thématique
   que l'ancien dégradé rouge/orange/vert. */
.game-card__cover.millebornes,
.hero-cover.millebornes {
  position: relative;
  overflow: hidden;
  background-color: #23272e;
  background-image:
    /* ligne médiane jaune pointillée (dans la bande de route, en bas) */
    repeating-linear-gradient(90deg, #fbbf24 0 20px, rgba(251, 191, 36, 0) 20px 44px),
    /* bande de route (asphalte un peu plus clair) */
    linear-gradient(#333a43, #2b313a),
    /* asphalte + halo lumineux en haut */
    radial-gradient(140% 130% at 50% -30%, #3d444e 0%, #20242a 68%, #16191e 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size:
    calc(100% - 26px) 4px,
    100% 38%,
    100% 100%;
  background-position:
    left 76%,
    left bottom,
    center;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
/* Drapeau à damier collé au bord droit = ligne d'arrivée */
.game-card__cover.millebornes::after,
.hero-cover.millebornes::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 100%;
  background: repeating-conic-gradient(#f1f5f9 0 25%, #10151c 0 50%) 0 0 / 13px 13px;
  transform: none;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.4);
  border-radius: 0;
  opacity: 0.95;
}

.mb-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tableaux de bord des joueurs */
.mb-dashboards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.mb-dash {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 8px;
}
.mb-dash.is-me {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}
.mb-dash.active {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.mb-dash__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.mb-dash__name {
  font-weight: 800;
  font-size: 14px;
}
.mb-dash__km {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary-strong);
}
.mb-progress {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--bg-2);
  overflow: visible;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}
/* Repère d'arrivée : un petit drapeau à damier en bout de course, pour rythmer la progression. */
.mb-progress::after {
  content: "🏁";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.mb-progress > span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399 0%, var(--primary) 55%, var(--primary-strong) 100%);
  box-shadow: 0 0 8px rgba(13, 158, 110, 0.4);
  transition: width 0.35s ease;
}
.mb-dash__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.chip.warn {
  background: #fff7ed;
  border-color: #fed7aa;
  color: var(--warn);
}
.mb-safeties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* Bottes affichées avec leur nom (icône + libellé) sur une puce dorée */
.mb-safety {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(160deg, #fef9c3, #fde047);
  border: 1px solid #facc15;
  color: #713f12;
}

/* Ligne "dernières cartes jouées / subies" sur chaque tableau de bord */
.mb-dash__last {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.mb-dash__last:empty {
  display: none;
}

/* Cible de dépôt (glisser-déposer) : surbrillance quand une carte survole */
.mb-dash.drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
  background: var(--ok-soft);
}

/* Pioche + défausse en tête de plateau */
.mb-piles {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.mb-pile-slot {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.mb-pile-slot .pile-label {
  font-size: 11px;
  color: var(--muted);
}
.mb-hint {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
/* Défausse = cible de dépôt (glisser pour défausser) */
.mb-discard {
  border-radius: var(--r-sm);
  padding: 4px;
  transition: background 0.15s ease, outline-color 0.15s ease;
  cursor: pointer;
}
.mb-discard.drag-over {
  outline: 2px dashed var(--danger);
  outline-offset: 2px;
  background: #fff1f2;
}

/* Mini-carte (dernières cartes, défausse, pioche) : on redéfinit --w pour que TOUTES les tailles
   calculées (police, rayon) se réduisent proportionnellement, sinon les nombres 100/200 débordent. */
.pcard--mini {
  --w: 36px;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  min-width: var(--w);
  box-shadow: none;
  cursor: default;
}
/* Taille de texte fixe qui garantit que "100"/"200" tiennent (bat .pc-center.sym par spécificité). */
.pcard--mini .pc-center,
.pcard--mini .pc-center.sym {
  font-size: 13px;
  letter-spacing: -0.04em;
}
.pcard--mini .pc-corner {
  display: none;
}
.pcard--mini::before {
  display: none;
}
/* Cartes de la main : curseur "grab" quand glissables */
.mb-board .hand .pcard[draggable="true"] {
  cursor: grab;
}
.mb-board .hand .pcard[draggable="true"]:active {
  cursor: grabbing;
}

/* Cartes Mille Bornes (couleurs par type) */
.pcard--mb-distance {
  background: linear-gradient(160deg, #eef2ff, #c7d2fe);
  color: #1e3a8a;
  border: 1px solid #a5b4fc;
}
.pcard--mb-hazard {
  background: linear-gradient(160deg, #fee2e2, #fca5a5);
  color: #7f1d1d;
  border: 1px solid #f87171;
}
.pcard--mb-remedy {
  background: linear-gradient(160deg, #dcfce7, #86efac);
  color: #14532d;
  border: 1px solid #4ade80;
}
.pcard--mb-safety {
  background: linear-gradient(160deg, #fef9c3, #fde047);
  color: #713f12;
  border: 1px solid #facc15;
}

/* Nom lisible affiché sous l'icône/valeur sur les cartes MB (on sait quelle carte on joue). */
.pcard .pc-name {
  position: relative;
  z-index: 2;
  margin-top: 3px;
  max-width: 94%;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  color: inherit;
  text-shadow: none;
  overflow-wrap: anywhere;
}
/* Icône un peu plus compacte pour laisser respirer le nom sur les cartes de la main. */
.mb-board .hand .pcard .pc-center.sym {
  font-size: 22px;
}
/* Libellés de cartes Mille Bornes sur UNE ligne : "overflow-wrap:anywhere" cassait "Prioritaire"
   en plein mot ("Prioritair e"). On force le non-retour + ellipse et une taille qui laisse tenir le
   plus long libellé. Scopé au plateau MB pour ne pas toucher aux autres jeux. */
.mb-board .pcard .pc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  font-size: 8px;
  letter-spacing: -0.2px;
  max-width: 100%;
}

/* Menu d'actions de la carte sélectionnée */
.mb-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.mb-chooser button {
  padding: 8px 12px;
  font-size: 13px;
}

/* Bannière de réaction Coup Fourré */
.mb-reaction {
  border: 2px solid var(--danger);
  border-radius: var(--r-md);
  background: #fff1f2;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  animation: mb-pulse 1.2s ease-in-out infinite;
}
.mb-reaction.waiting {
  border-style: dashed;
  border-color: var(--warn);
  background: #fff7ed;
  color: var(--warn);
  font-weight: 600;
  animation: none;
}
.mb-reaction__title {
  font-weight: 800;
  color: var(--danger);
}
.mb-reaction__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mb-coup-btn {
  background: var(--danger);
  color: #fff;
  font-weight: 800;
}
@keyframes mb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.28); }
  50% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); }
}

/* ============================================================
   Belote et Rebelote
   ============================================================ */

/* Couverture de la carte de jeu dans le lobby */
.game-card__cover.belote,
.tile-cover.belote,
.hero-cover.belote {
  background: linear-gradient(120deg, #0f5132 0%, #14532d 45%, #7f1d1d 100%);
  letter-spacing: 0.12em;
}

/* Cartes de belote : recto blanc, pips rouges/noirs (bat le rendu coloré UNO par spécificité) */
.pcard--belote {
  background: linear-gradient(160deg, #ffffff, #eef2f5);
  color: #111827;
  border: 1px solid var(--border-strong);
}
.pcard--belote::before { display: none; }
.pcard--belote .pc-center,
.pcard--belote .pc-corner {
  color: inherit;
  text-shadow: none;
}
.pcard--belote-red { color: #dc2626; }
.pcard--belote-black { color: #111827; }
.belote-suit-red { color: #dc2626; }
.belote-suit-black { color: #111827; }

/* Face : gros rang + symbole de couleur (double codage rang + symbole pour le daltonisme) */
.belote-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
}
.belote-face .belote-rank {
  font-weight: 900;
  font-size: calc(var(--w) * 0.42);
}
.belote-face .belote-suit {
  font-size: calc(var(--w) * 0.34);
}
.pcard--belote.pcard--mini .belote-face .belote-rank { font-size: 15px; }
.pcard--belote.pcard--mini .belote-face .belote-suit { font-size: 13px; }
.pcard--belote .pc-name {
  color: var(--muted);
  font-weight: 700;
}

/* Atout mis en évidence */
.pcard--belote.belote-trump {
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-card);
  border-color: var(--primary);
}
/* Carte gagnante du dernier pli résolu */
.pcard--belote.belote-trick-winner {
  box-shadow: 0 0 0 2px var(--ok), var(--shadow-card);
}

.belote-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bandeau de scores (atout, plis, preneur) */
.belote-scoreboard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.belote-atout .belote-suit-red,
.belote-atout .belote-suit-black { font-weight: 900; }
.belote-tricks--us { border-color: var(--primary-border); background: var(--primary-soft); color: var(--primary-strong); }
.belote-tricks--them { border-color: var(--border-strong); }

/* Bannière d'enchères (calquée sur l'esprit de la bannière Mille Bornes) */
.belote-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid var(--primary-border);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  padding: 12px 14px;
}
.belote-banner__title {
  font-weight: 800;
  color: var(--primary-strong);
  margin-bottom: 8px;
}
.belote-bid__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.belote-bid__actions button { padding: 8px 14px; font-size: 14px; }
.belote-bid__waiting { color: var(--muted); font-weight: 600; }
.belote-retourne {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.belote-retourne__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
}

/* Table 4 joueurs : sièges autour, pli au centre */
.belote-table {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
}
.belote-table__seats { display: contents; }
.belote-table__center {
  grid-area: 1 / 1;
  z-index: 1;
}

.belote-seat {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  min-width: 118px;
  z-index: 2;
}
.belote-seat.active {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.belote-seat--top { align-self: start; }
.belote-seat--bottom { align-self: end; }
.belote-seat--left { justify-self: start; }
.belote-seat--right { justify-self: end; }
.belote-seat__head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.belote-seat__name { font-weight: 800; font-size: 14px; }
.belote-seat__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.belote-team {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
}
.belote-team--us { background: var(--primary-soft); color: var(--primary-strong); border: 1px solid var(--primary-border); }
.belote-team--them { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-strong); }
.belote-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.belote-badge--preneur { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.belote-badge--belote { background: linear-gradient(160deg, #fef9c3, #fde047); color: #713f12; border-color: #facc15; }
.belote-badge--turn { background: var(--ok-soft); color: var(--ok); border-color: #bff0cf; }

/* Éventail de dos de cartes pour les mains adverses */
.belote-back-fan {
  display: flex;
  gap: 2px;
  min-height: 20px;
  align-items: center;
}
.belote-back {
  width: 12px;
  height: 18px;
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, #1d4ed8 0 3px, #1e40af 3px 6px);
  border: 1px solid #1e3a8a;
}
.belote-back.is-empty { opacity: 0.25; background: var(--muted-2); }

/* Pli central : une carte par siège, placée dans une grille 3x3 */
.belote-trick {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 82px);
  place-items: center;
  gap: 4px;
  /* Un vrai "tapis" : la croix de pli était minuscule et flottait dans le vide. Fond teinté + relief. */
  padding: 10px;
  border-radius: 18px;
  background: var(--primary-soft);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06);
}
.belote-trick__slot { display: grid; place-items: center; }
.belote-trick__slot--top { grid-column: 2; grid-row: 1; }
.belote-trick__slot--left { grid-column: 1; grid-row: 2; }
.belote-trick__slot--right { grid-column: 3; grid-row: 2; }
.belote-trick__slot--bottom { grid-column: 2; grid-row: 3; }
.belote-trick__center { grid-column: 2; grid-row: 2; display: grid; place-items: center; }
.belote-trick__atout { font-size: 30px; font-weight: 900; opacity: 0.55; }
.belote-trick__empty {
  width: 44px;
  height: 62px;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
}

/* Main du joueur */
.belote-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.belote-dock .label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Modale de fin de donne enrichie */
.belote-result { display: grid; gap: 12px; text-align: center; }
.belote-result__headline { font-size: 20px; font-weight: 900; }
.belote-result__headline.won { color: var(--ok); }
.belote-result__headline.lost { color: var(--danger); }
.belote-result__contract { font-weight: 700; color: var(--text); }
.belote-result__grid {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--surface-2);
}
.belote-result__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.belote-result__row > span:first-child { text-align: left; color: var(--muted); }
.belote-result__row--head { font-weight: 800; color: var(--text); }
.belote-result__row--head > span:first-child { color: var(--text); }
.belote-result__big { font-size: 22px; font-weight: 900; }
/* Total de la PARTIE (cumul des donnes) : détaché des points de la donne par un filet. */
.belote-result__row--total {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 6px;
}
.belote-result__row--total > span:first-child { color: var(--text); font-weight: 800; }

/* Progression vers l'objectif de la partie (501) — affichée en fin de donne. */
.belote-goal { display: grid; gap: 6px; }
.belote-goal__row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.belote-goal__label { text-align: left; font-weight: 800; font-size: 13px; }
.belote-goal__track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.belote-goal__fill { display: block; height: 100%; border-radius: 999px; }
.belote-goal__fill--us { background: linear-gradient(90deg, var(--primary), var(--ok)); }
.belote-goal__fill--them { background: linear-gradient(90deg, var(--muted-2), var(--muted)); }
.belote-goal__value { font-weight: 900; font-size: 13px; }
.belote-goal__target { color: var(--muted); font-weight: 700; }
.belote-goal__foot { font-size: 12.5px; color: var(--muted); }

/* Historique donne par donne (fin de partie). */
.belote-history {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  background: var(--surface-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  max-height: 132px;
  overflow-y: auto;
}
.belote-history__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.belote-history__row > span:first-child { text-align: left; color: var(--muted); }
.belote-history__row--head { font-weight: 800; color: var(--text); }
.belote-history__row--head > span:first-child { color: var(--text); }

.belote-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.belote-chip--belote {
  background: linear-gradient(160deg, #fef9c3, #fde047);
  border-color: #facc15;
  color: #713f12;
}

/* Compacte la table en écrans étroits / portrait */
@media (max-width: 720px) {
  .belote-seat { min-width: 96px; padding: 6px 8px; }
  .belote-seat__name { font-size: 12px; }
  .belote-trick {
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(3, 54px);
  }
  .belote-table { min-height: 260px; }
}

/* ============================================================
   Groupe de trois (TRIO) — thème néon violet → cyan
   ============================================================ */

/* Cover (carte lobby / accueil) : dégradé néon + gros 7·7·7 en filigrane */
.game-card__cover.trio,
.tile-cover.trio,
.hero-cover.trio {
  background: radial-gradient(120% 120% at 15% 10%, #7c3aed 0%, #6d28d9 40%, #0e7490 100%);
  color: #f5f3ff;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.game-card__cover.trio::after {
  background: rgba(34, 211, 238, 0.28);
  box-shadow: -16px 4px 0 rgba(168, 85, 247, 0.3);
}

/* Carte néon */
.pcard--trio {
  --card-bg: linear-gradient(155deg, #a855f7 0%, #7c3aed 45%, #0891b2 100%);
  color: #fff;
  box-shadow: var(--shadow-card), 0 0 14px rgba(124, 58, 237, 0.45);
}
.pcard--trio::before {
  background: rgba(255, 255, 255, 0.16);
  inset: 10%;
  border-radius: 14%;
  transform: none;
}
.pcard--trio .pc-center { text-shadow: 0 0 8px rgba(34, 211, 238, 0.55), 0 2px 2px rgba(0, 0, 0, 0.35); }
.pcard--trio.pcard--mini { --w: 46px; }

/* États de la zone de révélation */
.pcard--trio-match { outline: 3px solid #22d3ee; outline-offset: 2px; box-shadow: var(--shadow-card), 0 0 16px rgba(34, 211, 238, 0.7); }
.pcard--trio-fail {
  --card-bg: linear-gradient(155deg, #64748b 0%, #475569 100%);
  outline: 3px solid #ef4444; outline-offset: 2px; box-shadow: var(--shadow-card), 0 0 16px rgba(239, 68, 68, 0.6);
}
.pcard--trio-trio {
  --card-bg: linear-gradient(155deg, #fbbf24 0%, #f59e0b 55%, #a855f7 100%);
  outline: 3px solid #fde047; outline-offset: 2px;
  box-shadow: var(--shadow-card), 0 0 22px rgba(253, 224, 71, 0.85);
}
@keyframes trio-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Animations de révélation (le "retournement") — jouées une seule fois via des classes ponctuelles. */
@keyframes trio-flip-in { from { transform: rotateY(-90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes trio-flip-out { from { transform: rotateY(0); opacity: 1; } to { transform: rotateY(90deg); opacity: 0; } }
@keyframes trio-collect { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-28px) scale(0.65); opacity: 0; } }
@keyframes trio-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.trio-flip-in { animation: trio-flip-in 0.32s ease-out backwards; }
.trio-flip-out { animation: trio-flip-out 0.3s ease-in forwards; }
.trio-collect { animation: trio-collect 0.32s ease-in forwards; }
.trio-celebrate .pcard--trio-trio { animation: trio-pop 0.42s ease; }
.trio-oops .pcard--trio-fail { animation: trio-shake 0.4s ease; }

.trio-board { display: flex; flex-direction: column; gap: 14px; }

/* Bandeau (tour + objectif) */
.trio-banner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.16), rgba(8, 145, 178, 0.16));
  border: 1px solid rgba(124, 58, 237, 0.35);
}
.trio-banner__turn { font-size: 15px; }
.trio-banner__goal { font-size: 12.5px; color: var(--muted); }
.trio-banner.trio-stage--resolved_trio { border-color: #fde047; background: linear-gradient(90deg, rgba(251, 191, 36, 0.22), rgba(168, 85, 247, 0.18)); }
.trio-banner.trio-stage--resolved_fail { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }

/* Centre : révélation + fosse */
.trio-center {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 720px) { .trio-center { grid-template-columns: 1.2fr 1fr; } }

.trio-reveal {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px; border-radius: 16px;
  background: rgba(15, 23, 42, 0.06); border: 1px dashed rgba(124, 58, 237, 0.4);
}
.trio-reveal__slots { display: flex; gap: 12px; justify-content: center; }
.trio-reveal-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.trio-reveal-slot.empty { opacity: 0.5; }
.trio-reveal-slot.empty .trio-reveal-ghost {
  width: 74px; height: 111px; border-radius: 12px;
  border: 2px dashed var(--border-strong); display: grid; place-items: center;
  /* Libellé compact et borné : sans ça "à révéler" (30px) débordait de la carte de 74px
     et se superposait au slot voisin ("révélerréveler"). */
  font-size: 12px; line-height: 1.15; text-align: center; padding: 6px;
  overflow: hidden; color: var(--muted);
}
.trio-reveal-origin { font-size: 11px; color: var(--muted); }

.trio-resolve {
  padding: 10px 18px; font-size: 15px; font-weight: 700; border-radius: 12px;
}
.trio-resolve--trio {
  background: linear-gradient(90deg, #f59e0b, #a855f7); color: #fff;
  box-shadow: 0 0 18px rgba(253, 224, 71, 0.6);
}

/* La fosse */
.trio-pit {
  padding: 14px; border-radius: 16px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(124, 58, 237, 0.16), rgba(8, 145, 178, 0.1));
  border: 1px solid rgba(8, 145, 178, 0.35);
}
.trio-pit__label { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; text-align: center; }
.trio-pit__cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.trio-pit-card { --w: 52px; position: relative; }
/* Carte de la fosse retournée sur place : même gabarit que les dos, pour ne pas décaler la rangée. */
.pcard--trio-pit { --w: 52px; }
.trio-pit-slot {
  position: absolute; z-index: 3; inset: auto auto 6px 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.85);
}
.trio-pit-card--live { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.trio-pit-card--live:hover,
.trio-pit-card--live:focus-visible {
  transform: translateY(-4px); outline: none;
  box-shadow: var(--shadow-card), 0 0 0 4px var(--ring), 0 0 14px rgba(34, 211, 238, 0.7);
}

/* Panneaux joueurs */
.trio-players {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.trio-player {
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-1); display: flex; flex-direction: column; gap: 7px;
}
.trio-player.is-me { border-color: var(--primary-border); background: var(--primary-soft); }
.trio-player.active { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34, 211, 238, 0.4); border-color: #22d3ee; }
.trio-player__head { display: flex; align-items: center; gap: 7px; }
.trio-player__head .avatar { width: 26px; height: 26px; font-size: 12px; }
.trio-player__name { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trio-player__count { font-size: 12px; font-weight: 700; color: var(--primary-strong); }
.trio-player__hand { font-size: 12px; color: var(--muted); }
.trio-trophies { display: flex; flex-wrap: wrap; gap: 4px; }
.trio-trophy {
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: rgba(124, 58, 237, 0.16); color: #6d28d9; border: 1px solid rgba(124, 58, 237, 0.35);
}
.trio-trophy--seven { background: linear-gradient(90deg, #fde047, #f59e0b); color: #7c2d12; border-color: #f59e0b; }
.trio-trophy--empty { background: transparent; border-style: dashed; color: var(--muted); font-weight: 600; }
.trio-reveal-btns { display: flex; gap: 6px; }
.trio-reveal-btn {
  flex: 1; padding: 6px 8px; font-size: 12.5px; font-weight: 700; border-radius: 10px;
  background: linear-gradient(90deg, #7c3aed, #0891b2); color: #fff; box-shadow: none;
}
.trio-reveal-btn:hover { filter: brightness(1.08); }

.trio-hand { flex-wrap: wrap; }

@media (max-width: 560px) {
  .trio-reveal-slot.empty .trio-reveal-ghost { width: 58px; height: 87px; }
  .pcard--trio { --w: 60px; }
}

/* Trio — puce "valeur cherchée" + bloc latéral du bandeau */
.trio-banner__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.trio-target {
  font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(34, 211, 238, 0.16); color: #0e7490; border: 1px solid rgba(34, 211, 238, 0.5);
}
.trio-target strong { font-size: 14px; }

/* Respect de la préférence "réduire les animations" : on désactive les effets Trio. */
@media (prefers-reduced-motion: reduce) {
  .trio-flip-in, .trio-flip-out, .trio-collect,
  .trio-celebrate .pcard--trio-trio, .trio-oops .pcard--trio-fail { animation: none !important; }
}

/* ============================================================
   Mobile en partie — récupérer l'espace + éviter les débordements
   ============================================================ */

/* On masque la barre du haut pendant la partie sur petit écran : elle mange une place précieuse
   et l'essentiel (statut de tour, actions, salon) est déjà dans la vue de jeu. */
/* Traitement compact en partie : petits écrans (mobile portrait/paysage) ET tout écran court en
   paysage. Les téléphones en paysage dépassent souvent 720px de large (844, 852, 896, 926…) et
   rataient ce bloc : ils tombaient alors dans les règles "desktop" (topbar visible, page-game
   height calc(100dvh - 88px)) qui débordaient la main sous l'écran. On déclenche donc aussi sur
   (max-height:560px) and (orientation:landscape), quelle que soit la largeur. */
@media (max-width: 720px), (max-height: 560px) and (orientation: landscape) {
  body.in-game .topbar { display: none; }
  body.in-game .status-line { display: none; }
  body.in-game .app-shell { padding: 4px; max-width: 100%; }
  body.in-game .page-game.active { height: calc(100dvh - 8px); gap: 6px; }

  body.in-game .game-hud { padding: 5px 8px; gap: 4px 6px; border-radius: var(--r-lg); }
  body.in-game .turn-badge { font-size: 12px; padding: 4px 9px; }
  body.in-game .turn-badge.is-mine.big { font-size: 12.5px; padding: 5px 10px; }
  body.in-game .hud-meta { font-size: 11px; }

  /* .table-view doit pouvoir rétrécir sous la hauteur de son contenu (min-height:auto par défaut)
     pour que .page-game (hauteur bornée) la contienne et que .table scrolle en interne au lieu de
     pousser la main hors de l'écran (paysage court). */
  body.in-game .table-view { min-height: 0; }

  /* Le plateau prend la hauteur restante et scrolle en interne si nécessaire (la main reste
     atteignable) plutôt que de faire déborder la page. */
  body.in-game .table { min-height: 0; padding: 8px; gap: 8px; border-radius: var(--r-lg); overflow-y: auto; }

  /* Les enfants de grille/flex doivent pouvoir rétrécir sous leur taille de contenu (min-width:auto
     par défaut), sinon un plateau plus large que sa cellule déborde de ~20px (Mille Bornes, etc.). */
  body.in-game .table > * { min-width: 0; max-width: 100%; }
  body.in-game .mb-board,
  body.in-game .mb-dashboards,
  body.in-game .mb-dash,
  body.in-game .mb-piles,
  body.in-game .hand-dock { min-width: 0; }
  /* Tableaux de bord Mille Bornes empilés en une colonne sur mobile (le min de 200px débordait). */
  body.in-game .mb-dashboards { grid-template-columns: 1fr; }

  /* Cartes plus compactes partout pour tenir dans la largeur. */
  .pcard { --w: 50px; }
  .hand .pcard { --w: 54px; }
  .pcard--mini { --w: 40px; }

  /* Sièges / rangées d'adversaires plus serrés. */
  .seat { padding: 3px 9px 3px 3px; gap: 6px; }
  .seat-row { gap: 6px; }
  .avatar { width: 26px; height: 26px; font-size: 12px; }

  /* Trio : la grille des joueurs passe volontiers sur 2 colonnes étroites. */
  .trio-players { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .trio-banner { padding: 8px 10px; }
  .trio-pit-card { --w: 44px; }
  .pcard--trio-pit { --w: 44px; }

  /* Belote : bannière d'enchère + table compactes en paysage court, pour que la croix ET la main
     tiennent sans avoir à trop scroller (la table imposait 300px de haut). */
  .belote-banner { padding: 6px 10px; gap: 8px; }
  .belote-banner__title { margin-bottom: 2px; }
  .belote-table { min-height: 0; }
  .belote-retourne .pcard { --w: 44px; }
}

/* ============================================================
   Noms trop longs : troncature systématique (…) au lieu de déborder
   ============================================================ */
.seat-name,
.seat-info,
.mb-dash__name,
.belote-seat__name,
.wr-player__name,
.trio-player__name,
.trio-reveal-origin,
#profileName {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Les conteneurs flexibles doivent autoriser le rétrécissement pour que l'ellipsis s'applique. */
.seat { max-width: 220px; }
.seat-info { display: flex; flex-direction: column; min-width: 0; }
.wr-player,
.player-list li { min-width: 0; }
.wr-player__info { min-width: 0; overflow: hidden; }
.profile-chip { max-width: 46vw; }

/* ============================================================
   Petite passe UI (finition) — additive, sans changer la structure
   ============================================================ */

/* Accessibilité : anneau de focus clavier cohérent partout (aucun avant cette passe). */
:where(button, a[href], [tabindex], .pcard[draggable="true"], [data-mb-card-id], [data-belote-card-id], [data-trio-action-index]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Panneaux joueurs : légère élévation au survol pour signaler qu'ils sont vivants/cibles. */
.seat, .mb-dash, .trio-player, .belote-seat {
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.seat:hover, .mb-dash:hover, .trio-player:hover, .belote-seat:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Le HUD de tour respire un peu mieux : la puce "À TON TOUR" garde une taille contenue et le
   bouton Salon s'aligne proprement à droite (déjà via margin-left:auto). Simple affinage d'ombre. */
.turn-badge.is-mine.big { box-shadow: 0 2px 10px rgba(13, 158, 110, 0.28); }

/* Cartes de la main : uniformise le curseur + une transition douce (certaines l'avaient déjà). */
.hand .pcard { transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }

/* Pastilles de comptage (mains adverses, plis) : contraste texte légèrement renforcé. */
.pile-count, .hud-meta { color: var(--muted-2, var(--muted)); }

/* ============================================================
   UNO — table ronde : joueurs autour, sens de jeu visible
   ============================================================ */
.uno-table {
  position: relative;
  grid-row: 1 / 3;          /* occupe la zone flexible du plateau, au-dessus de la main */
  align-self: stretch;
  min-height: 320px;
  display: grid;
  place-items: center;
}
.uno-center {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.uno-sens { align-self: center; }
.uno-seat-pos { position: absolute; transform: translate(-50%, -50%); z-index: 2; }

/* Repère de sens : un chevron qui ORBITE autour du centre, dans la direction du jeu. */
.uno-dir {
  position: absolute;
  left: 50%; top: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  z-index: 1;
  pointer-events: none;
}
.uno-dir__marker {
  position: absolute;
  left: 50%; top: -7px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 13px solid var(--primary);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}
.uno-table.dir-cw .uno-dir  { animation: uno-orbit 9s linear infinite; }
.uno-table.dir-ccw .uno-dir { animation: uno-orbit 9s linear infinite reverse; }
@keyframes uno-orbit { to { transform: rotate(360deg); } }

@media (max-height: 560px) and (orientation: landscape) {
  .uno-table { min-height: 250px; }
  .uno-dir { width: 196px; height: 196px; margin: -98px 0 0 -98px; }
}

/* ============================================================
   Animations de cartes — micro-interactions (fluidité, sans re-render intempestif)
   ============================================================ */
.hand .pcard:active { transform: translateY(-2px) scale(0.98); }
.pile-draw.actionable:active,
.drop-pile:active { transform: scale(0.97); }
/* La "pose" d'une carte sur une pile réutilise le pop existant (déclenché seulement au changement). */
.drop-pile .pcard.play-pop { animation: pop-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); }

@media (prefers-reduced-motion: reduce) {
  .uno-table .uno-dir { animation: none; }
  .hand .pcard:active,
  .pile-draw.actionable:active,
  .drop-pile:active { transform: none; }
}
/* ============================================================
   Thème de jeu (dark-first) — suit les maquettes ux-design/mockups/
   Redéfinit les tokens sous body.in-game : tout le plateau bascule en
   sombre sans réécrire chaque règle. L'accent (--primary/--accent) et
   le motif changent par jeu via body.in-game[data-game="<definition_id>"].
   ============================================================ */
body.in-game {
  --bg: #0b0f14; --bg-2: #0e141b;
  --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.08);
  --overlay: #141b23; --overlay-2: #0c1117;
  --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18);
  --text: #eaf0f6; --muted: #9aa7b4; --muted-2: #6b7986;
  --primary: #7c5cff; --primary-strong: #6a49f0;
  --primary-soft: rgba(124,92,255,.16); --primary-border: rgba(124,92,255,.42);
  --ring: rgba(124,92,255,.45);
  --ok: #22c55e; --ok-soft: rgba(34,197,94,.16); --danger: #ef4444; --warn: #f59e0b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 8px 22px rgba(0,0,0,.5);
  --shadow-card: 0 16px 44px rgba(0,0,0,.55);
  --accent: var(--primary); --accent-2: #22d3ee; --on-accent: #0b0f14;
  --glass-brd: var(--border); --glass-brd-strong: var(--border-strong);
}
body.in-game { background: radial-gradient(120% 90% at 50% -10%, #0e141b, #0b0f14 62%); }
/* Voile de modale assorti au plateau sombre : le voile clair par défaut (rgba(23,28,48,.45))
   laissait trop lire les cartes derrière. */
body.in-game .modal-backdrop {
  background: rgba(4, 8, 12, .78);
  backdrop-filter: blur(6px);
}
body.in-game .page-game.active {
  background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
}

/* Accent par jeu (l'âme de chaque jeu) */
body.in-game[data-game="the-game"]         { --primary:#7c5cff; --accent:#7c5cff; --accent-2:#22d3ee; }
body.in-game[data-game="mille-bornes"]     { --primary:#14a85a; --accent:#14a85a; --accent-2:#ffcc00; }
body.in-game[data-game="uno-classic"]      { --primary:#ef4444; --accent:#ef4444; --accent-2:#3b82f6; }
body.in-game[data-game="trio-classic"]     { --primary:#d946ef; --accent:#d946ef; --accent-2:#22d3ee; }
body.in-game[data-game="belote-classique"] { --primary:#10b981; --accent:#10b981; --accent-2:#d4af37; }
body.in-game[data-game="tarot"]            { --primary:#9d4edd; --accent:#9d4edd; --accent-2:#e8c468; }
body.in-game[data-game="yahtzee"]          { --primary:#e3a33b; --accent:#e3a33b; --accent-2:#b5533f; }
body.in-game[data-game="code_du_nom"]      { --primary:#e0a82e; --accent:#e0a82e; --accent-2:#5b6b7a; }
body.in-game[data-game="lettre_amour"]     { --primary:#e5397d; --accent:#e5397d; --accent-2:#8b0e2e; --on-accent:#ffffff; }
/* Tokens dérivés recalculés depuis --primary, pour chaque jeu */
body.in-game[data-game] {
  --primary-strong: color-mix(in srgb, var(--primary) 78%, #000);
  --primary-soft:   color-mix(in srgb, var(--primary) 16%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 42%, transparent);
  --ring:           color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ============================================================
   Structure 3 zones (suit les maquettes) : la main sort du conteneur
   scrollable → bandeau bas FIXE, jamais coupée. Seul .board-scroll
   (plateau+joueurs) peut défiler. Scopé body.in-game pour primer sur
   les règles .table existantes (grid) et les media desktop.
   ============================================================ */
body.in-game .table {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
}
body.in-game .board-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.in-game .hand-dock { flex: 0 0 auto; }

/* ============================================================
   LE JEU (the-game) — motif « monolithes lumineux » (suit ux-design/mockups/the-game.html)
   4 piles = blocs verticaux, ASC halo CYAN froid / DESC halo AMBRE chaud, chiffre géant.
   ============================================================ */
body.in-game[data-game="the-game"] {
  --asc: #22d3ee; --desc: #f59e0b; --genius: #7c5cff;
}
/* Plateau : grille 4 colonnes + séparateur médian 2 montantes | 2 descendantes */
body.in-game[data-game="the-game"] .center-zone { height: 100%; align-items: center; }
body.in-game[data-game="the-game"] .pile-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  align-items: center; justify-items: center; position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
}
body.in-game[data-game="the-game"] .pile-grid::before {
  content: ""; position: absolute; top: 8%; bottom: 22%; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
}
body.in-game[data-game="the-game"] .pile-slot { gap: 7px; }
/* Libellé de direction coloré (par la direction du zone-id) */
body.in-game[data-game="the-game"] .pile-slot:has([data-pile-zone-id^="ascending"]) .pile-label { color: var(--asc); }
body.in-game[data-game="the-game"] .pile-slot:has([data-pile-zone-id^="descending"]) .pile-label { color: var(--desc); }
body.in-game[data-game="the-game"] .pile-label { font-weight: 800; letter-spacing: .06em; }

/* LE MONOLITHE : la carte de tête de pile devient un bloc vertical lumineux */
body.in-game[data-game="the-game"] .drop-pile { display: block; }
body.in-game[data-game="the-game"] .center-zone .drop-pile .pcard {
  --w: 82px; width: var(--w); height: calc(var(--w) * 1.5); aspect-ratio: auto;
  border-radius: 16px; border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow: var(--shadow-card); position: relative; display: grid; place-items: center;
}
body.in-game[data-game="the-game"] .center-zone .drop-pile .pc-center {
  font-size: 42px; font-weight: 800; color: var(--text); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
body.in-game[data-game="the-game"] .center-zone .drop-pile .pc-corner { color: var(--muted); font-size: 15px; font-weight: 800; }
/* ASC = halo cyan froid (lumière du bas) + flèche ▲ en bas */
body.in-game[data-game="the-game"] .drop-pile[data-pile-zone-id^="ascending"] .pcard {
  border-color: color-mix(in srgb, var(--asc) 45%, var(--border-strong));
  box-shadow: var(--shadow-card), 0 0 30px -6px color-mix(in srgb, var(--asc) 55%, transparent),
    inset 0 -30px 42px -22px color-mix(in srgb, var(--asc) 75%, transparent);
}
body.in-game[data-game="the-game"] .drop-pile[data-pile-zone-id^="ascending"] .pcard::after {
  content: "▲"; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--asc); text-shadow: 0 0 10px var(--asc);
}
/* DESC = halo ambre chaud (lumière du haut) + flèche ▼ en haut */
body.in-game[data-game="the-game"] .drop-pile[data-pile-zone-id^="descending"] .pcard {
  border-color: color-mix(in srgb, var(--desc) 45%, var(--border-strong));
  box-shadow: var(--shadow-card), 0 0 30px -6px color-mix(in srgb, var(--desc) 55%, transparent),
    inset 0 30px 42px -22px color-mix(in srgb, var(--desc) 75%, transparent);
}
body.in-game[data-game="the-game"] .drop-pile[data-pile-zone-id^="descending"] .pcard::after {
  content: "▼"; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--desc); text-shadow: 0 0 10px var(--desc);
}
/* Pile surlignée (droppable, carte sélectionnée) : liseré violet du coup de génie */
body.in-game[data-game="the-game"] .drop-pile.droppable .pcard {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--genius), 0 0 26px -2px color-mix(in srgb, var(--genius) 60%, transparent);
}
body.in-game[data-game="the-game"] .pile-count { font-size: 10.5px; color: var(--muted-2); }

/* Cartes de MAIN : chiffre géant, jouable = halo vert + pastille, ±10 = accent violet */
body.in-game[data-game="the-game"] .hand .pcard { --w: 58px; }
body.in-game[data-game="the-game"] .hand .pc-center { font-size: 28px; font-weight: 800; color: #0b0f14; font-variant-numeric: tabular-nums; }
body.in-game[data-game="the-game"] .hand .pcard.playable {
  box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--ok) 80%, transparent),
    0 0 20px -4px color-mix(in srgb, var(--ok) 55%, transparent);
}
body.in-game[data-game="the-game"] .hand .pcard.unplayable { filter: grayscale(.6) brightness(.82); opacity: .5; }

/* Compaction verticale en jeu : la main et la rangée du haut ne doivent pas écraser le plateau
   (sinon monolithes/plateau coupés). La main reste haute mais avec moins de marges. */
body.in-game .hand { padding: 12px 6px 6px; }
body.in-game .hand-head { margin-bottom: 3px; }
body.in-game .seat-row { gap: 8px; align-items: center; }
body.in-game .seat-row .seat { padding: 4px 8px; }
body.in-game .seat-row .avatar { width: 28px; height: 28px; font-size: 12px; }
/* Monolithes LE JEU un peu plus courts pour tenir avec la rangée pioche/joueur, sans scroll */
body.in-game[data-game="the-game"] .center-zone .drop-pile .pcard { --w: 74px; }
body.in-game[data-game="the-game"] .hand .pcard { --w: 54px; }

/* Ajustement fit LE JEU : rentrer sans scroll (la rangée pioche/joueur prend la place que la maquette
   met dans le HUD → on raccourcit un peu les monolithes et on compacte la rangée du haut). */
body.in-game[data-game="the-game"] .center-zone .drop-pile .pcard { --w: 62px; }
body.in-game[data-game="the-game"] .center-zone .drop-pile .pc-center { font-size: 34px; }
body.in-game[data-game="the-game"] .seat-row { transform: scale(.92); transform-origin: left center; }
body.in-game .hand { padding: 9px 6px 5px; }
body.in-game[data-game="the-game"] .pile-slot { gap: 5px; }

/* ============================================================
   LE JEU — éléments fidèles à la maquette (bandeau info, en-têtes de pile,
   pastilles d'indice, carte coup de génie). Complète le motif monolithes.
   ============================================================ */
/* Bandeau info en haut du plateau : pioche + compteurs adversaires (comme le HUD de la maquette) */
body.in-game[data-game="the-game"] .jeu-info {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center;
  padding: 2px 4px 0; margin-top: 26px; /* dégage le HUD flottant "À TON TOUR" */
}
body.in-game[data-game="the-game"] .ipill {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border-radius: var(--r-lg); font-size: 11px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
}
body.in-game[data-game="the-game"] .ipill b { color: var(--accent-2); font-weight: 800; }
body.in-game[data-game="the-game"] .ipill.active { border-color: transparent; box-shadow: 0 0 0 2px var(--primary), 0 0 16px -4px var(--primary); }
body.in-game[data-game="the-game"] .ipill--draw b { color: var(--warn); }

/* Grille des 4 monolithes : remonte, plus compacte, laisse la place aux pieds */
body.in-game[data-game="the-game"] .center-zone { align-items: start; padding-top: 2px; }
body.in-game[data-game="the-game"] .pile-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* En-tête MONTANTE / DESCENDANTE coloré */
body.in-game[data-game="the-game"] .pile-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 5px;
}
body.in-game[data-game="the-game"] .pile-slot.asc  .pile-head { color: var(--asc); }
body.in-game[data-game="the-game"] .pile-slot.desc .pile-head { color: var(--desc); }

/* Pied de pile : nb posées + pastille d'indice (règle + coup de génie) */
body.in-game[data-game="the-game"] .pile-foot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
body.in-game[data-game="the-game"] .posees { font-size: 10px; color: var(--muted-2); }
body.in-game[data-game="the-game"] .hint {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2px 9px; white-space: nowrap;
}
body.in-game[data-game="the-game"] .hint .g10 { color: var(--genius); font-weight: 800; }

/* Monolithes un peu plus courts pour laisser la place au bandeau + pieds */
body.in-game[data-game="the-game"] .center-zone .drop-pile .pcard { --w: 58px; }
body.in-game[data-game="the-game"] .center-zone .drop-pile .pc-center { font-size: 32px; }

/* Carte de MAIN "coup de génie" ±10 : accent violet dédié + soulèvement fort + badge */
body.in-game[data-game="the-game"] .hand .pcard.genius {
  transform: translateY(-16px) rotate(-2deg); border: 1px solid var(--genius);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--genius), 0 0 24px -2px color-mix(in srgb, var(--genius) 70%, transparent);
}
body.in-game[data-game="the-game"] .hand .pcard.genius::before {
  content: "⟳ ±10"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--genius); color: #fff; font-size: 9px; font-weight: 900; padding: 2px 7px;
  border-radius: var(--r-lg); white-space: nowrap; box-shadow: var(--shadow-sm);
}

/* ============================================================
   HUD flottant façon maquette : barre FINE sur UNE seule ligne, par-dessus le
   plateau (qui prend alors toute la hauteur). Fini la grosse barre du haut.
   ============================================================ */
body.in-game .game-hud {
  position: absolute; top: 0; left: 8px; right: 8px; z-index: 9;
  background: transparent; border: none; box-shadow: none; padding: 0; min-height: 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; pointer-events: none;
}
body.in-game .game-hud > * { pointer-events: auto; }
body.in-game #turnBlock { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
body.in-game .turn-badge {
  font-size: 11.5px; padding: 4px 11px; white-space: nowrap; box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--primary) 24%, var(--surface)); border: 1px solid var(--primary-border);
}
body.in-game .turn-badge .dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
body.in-game .hud-info { display: flex; align-items: center; gap: 6px; overflow: hidden; }
body.in-game .hud-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border-radius: var(--r-lg); font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(8px);
}
body.in-game .hud-pill b { color: var(--accent-2); font-weight: 800; }
body.in-game .hud-pill--draw b { color: var(--warn); }
body.in-game .hud-pill.active { border-color: transparent; box-shadow: 0 0 0 2px var(--primary); }
body.in-game .hud-meta { display: none; }
body.in-game .game-hud #roomDrawerBtn {
  margin-left: auto; padding: 5px 13px; font-size: 12px; flex: none; box-shadow: var(--shadow-sm);
}
/* Le plateau occupe toute la hauteur ; retrait haut pour dégager la barre flottante */
body.in-game .table { padding-top: 40px; }
body.in-game[data-game="the-game"] .center-zone { padding-top: 0; }

/* ============================================================
   LE JEU — REPRODUCTION FIDELE de la maquette ux-design/mockups/the-game.html
   Structure DOM identique emise par renderTheGameBoard.
   ============================================================ */
body.in-game[data-game="the-game"] {
  --asc:#22d3ee; --asc-warm:#67e8f9; --desc:#f59e0b; --desc-warm:#fcd34d; --genius:#7c5cff;
  --e1:var(--shadow-sm); --e2:var(--shadow-md); --e3:var(--shadow-card);
  --num:var(--font); --glass-brd:var(--border); --glass-brd-strong:var(--border-strong);
  --r-card:12px; --r-pill:999px; --fs-label:11px; --dur:.16s; --ease:cubic-bezier(.2,.7,.2,1);
}
body.in-game[data-game="the-game"] .jeu-board{display:grid; grid-template-columns:repeat(4,1fr);
  align-items:center; justify-items:center; gap:12px; padding:4px 8px 2px; min-height:0; position:relative;
  flex:1 1 auto; width:100%; max-width:660px; margin:0 auto}
body.in-game[data-game="the-game"] .jeu-board::before{content:""; position:absolute; top:14%; bottom:16%; left:50%;
  width:1px; background:linear-gradient(180deg,transparent,var(--glass-brd-strong),transparent)}
body.in-game[data-game="the-game"] .pile{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%}
body.in-game[data-game="the-game"] .pile-head{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label);
  font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
body.in-game[data-game="the-game"] .pile-head .dir{font-size:14px; font-weight:900; line-height:1}
body.in-game[data-game="the-game"] .pile.asc  .pile-head .dir, body.in-game[data-game="the-game"] .pile.asc  .pile-head b{color:var(--asc)}
body.in-game[data-game="the-game"] .pile.desc .pile-head .dir, body.in-game[data-game="the-game"] .pile.desc .pile-head b{color:var(--desc)}
body.in-game[data-game="the-game"] .monolith{--w:72px; width:var(--w); height:calc(var(--w)*1.5); border-radius:16px;
  position:relative; display:grid; place-items:center; user-select:none; font-family:var(--num);
  border:1px solid var(--glass-brd-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow:var(--e3); cursor:pointer}
body.in-game[data-game="the-game"] .monolith .val{font-size:calc(var(--w)*.52); font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--text)}
body.in-game[data-game="the-game"] .monolith .idx{position:absolute; top:7px; left:9px; font-size:calc(var(--w)*.2); font-weight:800; line-height:1; color:var(--muted)}
body.in-game[data-game="the-game"] .monolith .idx.br{top:auto; left:auto; bottom:7px; right:9px; transform:rotate(180deg); opacity:.45}
body.in-game[data-game="the-game"] .monolith .beam{position:absolute; left:0; right:0; height:38%; pointer-events:none; opacity:.9}
body.in-game[data-game="the-game"] .pile.asc .monolith{box-shadow:var(--e3), 0 0 30px -6px color-mix(in srgb,var(--asc) 55%,transparent),
  inset 0 -30px 40px -22px color-mix(in srgb,var(--asc) 75%,transparent); border-color:color-mix(in srgb,var(--asc) 45%,var(--glass-brd-strong))}
body.in-game[data-game="the-game"] .pile.asc .monolith .beam{bottom:0; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--asc) 30%,transparent))}
body.in-game[data-game="the-game"] .pile.asc .monolith::before{content:"▲"; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--asc); text-shadow:0 0 10px var(--asc)}
body.in-game[data-game="the-game"] .pile.desc .monolith{box-shadow:var(--e3), 0 0 30px -6px color-mix(in srgb,var(--desc) 55%,transparent),
  inset 0 30px 40px -22px color-mix(in srgb,var(--desc) 75%,transparent); border-color:color-mix(in srgb,var(--desc) 45%,var(--glass-brd-strong))}
body.in-game[data-game="the-game"] .pile.desc .monolith .beam{top:0; background:linear-gradient(0deg,transparent,color-mix(in srgb,var(--desc) 30%,transparent))}
body.in-game[data-game="the-game"] .pile.desc .monolith::before{content:"▼"; position:absolute; top:6px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--desc); text-shadow:0 0 10px var(--desc)}
body.in-game[data-game="the-game"] .monolith.droppable{border-color:transparent;
  box-shadow:var(--e3), 0 0 0 2px var(--genius), 0 0 26px -2px color-mix(in srgb,var(--genius) 60%,transparent)}
body.in-game[data-game="the-game"] .pile-foot{display:flex; flex-direction:column; align-items:center; gap:3px}
body.in-game[data-game="the-game"] .posees{font-size:10px; color:var(--muted-2)}
body.in-game[data-game="the-game"] .hint{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700;
  color:var(--text); background:var(--surface); border:1px solid var(--glass-brd); border-radius:var(--r-pill); padding:2px 9px; white-space:nowrap}
body.in-game[data-game="the-game"] .hint .sep{color:var(--glass-brd-strong)}
body.in-game[data-game="the-game"] .hint .g10{color:var(--genius); font-weight:800}
body.in-game[data-game="the-game"] .hand-head{display:flex; justify-content:space-between; align-items:baseline; padding:0 4px; margin-bottom:1px}
body.in-game[data-game="the-game"] .hand-head .label{font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
body.in-game[data-game="the-game"] .jeu-hand{display:flex; align-items:flex-end; gap:10px}
body.in-game[data-game="the-game"] .jeu-hand .cards{display:flex; gap:9px; padding:14px 4px 6px; overflow-x:auto; overflow-y:visible; flex:1}
body.in-game[data-game="the-game"] .jeu-card{--w:52px; width:var(--w); aspect-ratio:5/7; border-radius:var(--r-card);
  position:relative; background:linear-gradient(180deg,#fff,#eef2f6); color:#0B0F14; box-shadow:var(--e2);
  display:grid; place-items:center; font-family:var(--num); font-weight:800; user-select:none; flex:none; cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
body.in-game[data-game="the-game"] .jeu-card .idx{position:absolute; top:5px; left:7px; font-size:calc(var(--w)*.24); line-height:1; font-weight:800}
body.in-game[data-game="the-game"] .jeu-card .idx.br{top:auto; left:auto; bottom:5px; right:7px; transform:rotate(180deg); opacity:.4}
body.in-game[data-game="the-game"] .jeu-card .big{font-size:calc(var(--w)*.5); line-height:1}
body.in-game[data-game="the-game"] .jeu-card.playable{box-shadow:var(--e2), 0 0 0 2px color-mix(in srgb,var(--ok) 80%,transparent),
  0 0 20px -4px color-mix(in srgb,var(--ok) 55%,transparent); transform:translateY(-7px)}
body.in-game[data-game="the-game"] .jeu-card.playable::after{content:""; position:absolute; top:5px; right:5px; width:10px; height:10px;
  border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 10px var(--ok)}
body.in-game[data-game="the-game"] .jeu-card.unplayable{filter:grayscale(.6) brightness(.82); opacity:.5; cursor:not-allowed; box-shadow:var(--e1)}
body.in-game[data-game="the-game"] .jeu-card.unplayable::after{content:"🔒"; position:absolute; right:4px; bottom:3px; font-size:11px}
body.in-game[data-game="the-game"] .jeu-card.genius{transform:translateY(-15px) rotate(-2deg); border:1px solid var(--genius);
  box-shadow:var(--e2), 0 0 0 2px var(--genius), 0 0 24px -2px color-mix(in srgb,var(--genius) 70%,transparent)}
body.in-game[data-game="the-game"] .jeu-card.genius .g-badge{position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  padding:2px 7px; border-radius:var(--r-pill); background:var(--genius); color:#fff; font-size:9px; font-weight:900; white-space:nowrap; box-shadow:var(--e2)}
body.in-game[data-game="the-game"] .jeu-card.genius .g-sub{position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  font-size:8px; font-weight:800; color:var(--genius); letter-spacing:.02em; white-space:nowrap}
body.in-game[data-game="the-game"] .jeu-card.selected{transform:translateY(-13px)}

/* ============================================================
   Correctif FOND : le plateau .table gardait le dégradé BLANC du thème clair.
   On le rend plat/sombre comme la maquette (le page-game fournit la lueur d'accent).
   ============================================================ */
body.in-game .table {
  background: none;
  border: none;
  box-shadow: none;
}
body.in-game .page-game.active {
  background:
    radial-gradient(120% 80% at 50% -18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    var(--bg);
}
/* Monolithes plus grands, au plus près de la maquette (le fond plat laisse la place). */
body.in-game[data-game="the-game"] .monolith { --w: 82px; }
body.in-game[data-game="the-game"] .jeu-board { gap: 16px; max-width: 720px; }

/* ============================================================
   HUD — pastilles .pill IDENTIQUES à la maquette the-game.html
   ============================================================ */
body.in-game #turnBlock { display:flex; align-items:center; gap:6px; overflow:hidden; flex:1 1 auto; min-width:0; }
body.in-game .game-hud .pill{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  border-radius:999px; font-size:12px; font-weight:700; color:var(--text); background:var(--surface);
  border:1px solid var(--border); white-space:nowrap; box-shadow:var(--shadow-sm)}
body.in-game .game-hud .pill b{color:var(--accent-2); font-weight:800}
body.in-game .game-hud .pill--turn{background:color-mix(in srgb,var(--accent) 24%,var(--surface));
  border-color:var(--border-strong); color:var(--text)}
body.in-game .game-hud .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
body.in-game .game-hud .pill .dot--ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
body.in-game .game-hud .pill--muted{color:var(--muted)}
body.in-game .game-hud .pill--active{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary)}
body.in-game .game-hud .pill--won{background:color-mix(in srgb,var(--ok) 22%,var(--surface)); border-color:transparent}
body.in-game .game-hud .pill--lost{background:color-mix(in srgb,var(--danger) 22%,var(--surface)); border-color:transparent}
body.in-game .game-hud .mini-back{width:12px;height:16px;border-radius:3px;display:inline-block;
  border:1px solid rgba(255,255,255,.25);
  background:repeating-linear-gradient(45deg,#1b2733,#1b2733 4px,#26333f 4px,#26333f 8px)}
/* Salon = bouton ghost avec ☰, aligné à droite */
body.in-game .game-hud #roomDrawerBtn{background:transparent; border:1px solid var(--border); color:var(--text);
  border-radius:999px; height:28px; padding:0 13px; font-size:12px; font-weight:700; margin-left:auto; flex:none}
body.in-game .game-hud #roomDrawerBtn::before{content:"\2630 "}

/* ============================================================
   FIX animation cartes : repos À PLAT ; soulèvement seulement au survol/sélection
   (avant : .playable avait un translateY permanent -> toutes soulevées en continu).
   ============================================================ */
body.in-game[data-game="the-game"] .jeu-card.playable { transform: none; }
body.in-game[data-game="the-game"] .jeu-card.genius { transform: none; }
body.in-game[data-game="the-game"] .jeu-card:hover { transform: translateY(-8px); }
body.in-game[data-game="the-game"] .jeu-card.selected { transform: translateY(-13px); }
body.in-game[data-game="the-game"] .jeu-card.genius:hover,
body.in-game[data-game="the-game"] .jeu-card.genius.selected { transform: translateY(-15px) rotate(-2deg); }

/* ============================================================
   DESKTOP : suit la maquette desktop (HUD in-flow, gros monolithes 150px, cartes 96px)
   ============================================================ */
@media (min-width: 721px) and (min-height: 561px) {
  body.in-game .game-hud { position: static; padding: 2px 2px 6px; }
  body.in-game .game-hud .pill { height: 32px; font-size: 13px; }
  body.in-game .game-hud #roomDrawerBtn { height: 32px; }
  body.in-game .table { padding-top: 0; }
  body.in-game[data-game="the-game"] .jeu-board { gap: 34px; max-width: 1120px; padding: 14px 40px; }
  body.in-game[data-game="the-game"] .monolith { --w: 144px; }
  body.in-game[data-game="the-game"] .pile-head { font-size: 12.5px; }
  body.in-game[data-game="the-game"] .hint { font-size: 12px; }
  body.in-game[data-game="the-game"] .posees { font-size: 11.5px; }
  body.in-game[data-game="the-game"] .jeu-card { --w: 84px; }
  body.in-game[data-game="the-game"] .jeu-hand .cards { gap: 14px; padding: 24px 4px 10px; }
  body.in-game[data-game="the-game"] .hand-head .label { font-size: 12px; }
}

/* ============================================================
   FIX : la topbar claire "abittelPlay" restait visible en JEU sur desktop
   (masquée seulement en mobile) -> bandeau clair moche au-dessus du jeu sombre.
   On la masque en jeu partout, et le plateau prend toute la hauteur.
   ============================================================ */
@media (min-width: 721px) and (min-height: 561px) {
  body.in-game .topbar { display: none; }
  body.in-game .page-game.active { height: calc(100dvh - 14px); min-height: 0; }
}

/* Pile "droppable" (carte sélectionnée) : GARDER la couleur de direction (cyan/ambre)
   et ajouter un liseré violet, au lieu d'écraser toute la pile en violet. */
body.in-game[data-game="the-game"] .monolith.droppable {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
body.in-game[data-game="the-game"] .pile.asc .monolith.droppable {
  box-shadow: var(--shadow-card), 0 0 30px -6px color-mix(in srgb, var(--asc) 55%, transparent),
    inset 0 -30px 42px -22px color-mix(in srgb, var(--asc) 75%, transparent);
}
body.in-game[data-game="the-game"] .pile.desc .monolith.droppable {
  box-shadow: var(--shadow-card), 0 0 30px -6px color-mix(in srgb, var(--desc) 55%, transparent),
    inset 0 30px 42px -22px color-mix(in srgb, var(--desc) 75%, transparent);
}

/* HUD : chiffres en blanc (le tout-cyan faisait criard) */
body.in-game .game-hud .pill b { color: var(--text); }

/* ============================================================
   Bouton de TOUR (façon maquette) dans l'action-dock : gros bouton 2 lignes,
   grisé "Encore N carte" quand on ne peut pas finir, violet "Finir le tour" sinon.
   ============================================================ */
body.in-game .action-dock .turn-btn {
  height: 56px; min-width: 150px; padding: 0 20px; border-radius: 14px;
  font-weight: 800; font-size: 14px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.1; border: 1px solid transparent; box-shadow: var(--shadow-md);
}
body.in-game .action-dock .turn-btn small { font-size: 10px; font-weight: 700; opacity: .82; }
body.in-game .action-dock .turn-btn.disabled {
  background: var(--surface-2); color: var(--muted-2); border-color: var(--border);
  cursor: not-allowed; box-shadow: var(--shadow-sm);
}
body.in-game .action-dock .turn-btn.ready {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #000));
  color: #fff;
}

/* ============================================================
   FIX bouton "Salon" décalé : mise en flex + espace propre entre ☰ et le texte.
   ============================================================ */
body.in-game .game-hud #roomDrawerBtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; height: 28px; padding: 0 14px; font-size: 12px; font-weight: 700;
  margin-left: auto; flex: none; line-height: 1;
}
body.in-game .game-hud #roomDrawerBtn::before { content: "\2630"; font-size: 13px; line-height: 1; }

/* ============================================================
   Bouton de tour DANS la rangée de la main (jeu-hand), à droite des cartes,
   au lieu de l'action-dock flottant (qui chevauchait la main en mobile).
   ============================================================ */
body.in-game[data-game="the-game"] .jeu-hand { align-items: flex-end; gap: 12px; }
body.in-game[data-game="the-game"] .jeu-hand .cards { flex: 1 1 auto; min-width: 0; }
body.in-game .jeu-hand .turn-btn {
  flex: 0 0 auto; align-self: center; height: 56px; min-width: 148px; max-width: 220px;
  padding: 0 20px; border-radius: 14px; font-weight: 800; font-size: 14px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.12; border: 1px solid transparent; text-align: center;
}
body.in-game .jeu-hand .turn-btn small { font-size: 10px; font-weight: 700; opacity: .82; }
body.in-game .jeu-hand .turn-btn.disabled {
  background: var(--surface-2); color: var(--muted-2); border-color: var(--border); cursor: not-allowed;
}
body.in-game .jeu-hand .turn-btn.ready {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #000));
  color: #fff; box-shadow: var(--shadow-md);
}
/* En mobile paysage : bouton un peu plus compact pour laisser de la place aux cartes. */
@media (max-width: 720px), (max-height: 560px) and (orientation: landscape) {
  body.in-game .jeu-hand .turn-btn { height: 48px; min-width: 118px; font-size: 12.5px; padding: 0 12px; }
  body.in-game .jeu-hand .turn-btn small { font-size: 8.5px; }
}

/* ============================================================
   LE JEU — mise en scène du coup de génie ±10 côté PILE (mécanique signature, cf. ux-design/the-game.md
   §5B + ux-design/mockups/the-game.html). Injecté par applyCardSelection() (main.js) sur la pile
   `.monolith.droppable` visée quand la carte sélectionnée retombe EXACTEMENT à contre-sens :
   flèche « ↩ recule · top → val » + sommet fantôme, en plus du liseré violet "droppable" existant.
   ============================================================ */
body.in-game[data-game="the-game"] .pile.target .monolith {
  border-color: transparent;
  box-shadow: var(--e3), 0 0 0 2px var(--genius), 0 0 26px -2px color-mix(in srgb, var(--genius) 60%, transparent);
}
body.in-game[data-game="the-game"] .counter-arrow {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--genius); color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: var(--e2);
}
body.in-game[data-game="the-game"] .ghost-top {
  position: absolute; top: 2px; right: -24px; width: 38px; height: 57px; border-radius: 10px; z-index: 6; pointer-events: none;
  border: 2px dashed var(--genius); background: color-mix(in srgb, var(--genius) 16%, transparent);
  display: grid; place-items: center; color: color-mix(in srgb, var(--genius) 88%, #fff); font-weight: 800;
  font-size: 16px; font-family: var(--num); transform: rotate(6deg); box-shadow: var(--e1);
}
@media (min-width: 721px) and (min-height: 561px) {
  body.in-game[data-game="the-game"] .counter-arrow { top: -32px; font-size: 11.5px; padding: 5px 12px; }
  body.in-game[data-game="the-game"] .ghost-top { width: 58px; height: 87px; right: -36px; font-size: 26px; border-radius: 12px; }
}

/* ============================================================
   BELOTE — reproduction fidèle de ux-design/mockups/belote.html
   Tapis feutré émeraude + liseré or, croix compacte, cartes françaises.
   Tout est scopé body.in-game[data-game="belote-classique"].
   ============================================================ */
body.in-game[data-game="belote-classique"] {
  /* T1-T4 (audit belote-2026-08-15) : valeurs alignées sur ux-design/mockups/belote.html */
  --felt-1:#12724e; --felt-2:#0c5238; --felt-3:#08361f; --felt-line:rgba(255,255,255,.05);
  --gold:#d4af37; --gold-brd:rgba(212,175,55,.55); --gold-soft:rgba(212,175,55,.16);
  --nous-soft:rgba(16,185,129,.18); --nous-brd:rgba(16,185,129,.5);
  --eux-soft:rgba(132,147,196,.18); --eux-brd:rgba(132,147,196,.5);
  --card-red:#e5484d; --card-black:#0b0f14;
  --e1:var(--shadow-sm); --e2:var(--shadow-md); --e3:var(--shadow-card);
  --num:var(--font); --glass-brd:var(--border); --glass-brd-strong:var(--border-strong);
  --on-accent:#06231a; --surface-2:rgba(255,255,255,.08);
  --glow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent), 0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* Tapis feutré sur toute la vue de jeu */
body.in-game[data-game="belote-classique"] .page-game.active,
body.in-game[data-game="belote-classique"] .table {
  background:
    radial-gradient(130% 100% at 50% 120%, rgba(0,0,0,.45), transparent 60%),
    radial-gradient(120% 130% at 50% 42%, var(--felt-1) 0%, var(--felt-2) 46%, var(--felt-3) 100%);
}
body.in-game[data-game="belote-classique"] .table { position: relative; overflow: hidden; color: #eaf5ef; }
/* T6 : texture feutre (trame croisée subtile), sous le liseré or */
body.in-game[data-game="belote-classique"] .table::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background:
    repeating-linear-gradient(90deg,transparent 0 43px,var(--felt-line) 43px 44px),
    repeating-linear-gradient(0deg,transparent 0 43px,var(--felt-line) 43px 44px);
}
/* T5 : liseré or interne (inset/rayon + ombre externe alignés sur la maquette) */
body.in-game[data-game="belote-classique"] .table::after {
  content:""; position:absolute; inset:9px; pointer-events:none; z-index:0; border-radius:16px;
  border:1px solid var(--gold-brd);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 0 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.3);
}

/* HUD chips (barre du haut flottante déjà en place ; on style les chips belote) */
body.in-game[data-game="belote-classique"] .game-hud .chip {
  /* A4 : hauteur/padding alignés sur .chip de la maquette (24px / 0 9px) */
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; background:var(--surface-2); border:1px solid var(--glass-brd); color:#eaf5ef; white-space:nowrap;
}
body.in-game[data-game="belote-classique"] .game-hud .chip b { font-weight:900; }
/* A1 : chip de marque ".brand" en tête du HUD (identité du jeu toujours visible) */
body.in-game[data-game="belote-classique"] .game-hud .chip.belote-brand {
  background:transparent; border:none; padding:0; height:auto; gap:0;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:11px;
  color:color-mix(in srgb,var(--accent-2) 55%,#fff);
}
body.in-game[data-game="belote-classique"] .game-hud .chip.turn { background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 66%,#000)); color:var(--on-accent); border-color:transparent; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent); }
body.in-game[data-game="belote-classique"] .game-hud .chip.turn .dot { width:7px; height:7px; border-radius:50%; background:var(--on-accent); }
body.in-game[data-game="belote-classique"] .game-hud .chip.trump { background:var(--gold-soft); border-color:var(--gold-brd); color:#f4e4b0; }
body.in-game[data-game="belote-classique"] .game-hud .chip.nous { background:var(--nous-soft); border-color:var(--nous-brd); color:#9df0ce; }
body.in-game[data-game="belote-classique"] .game-hud .chip.eux { background:var(--eux-soft); border-color:var(--eux-brd); color:#cdd5f1; }
body.in-game[data-game="belote-classique"] .game-hud .chip.belote { background:linear-gradient(180deg,var(--gold),#b8952b); color:#2a2005; border-color:#e8ce7a; font-weight:900; }
/* Score de PARTIE (cumul des donnes vers 501) : chip de droite, l'info qui décide du match. */
body.in-game[data-game="belote-classique"] .game-hud .chip.match { background:var(--surface-2); border-color:var(--gold-brd); color:#f4e4b0; margin-left:auto; }
body.in-game[data-game="belote-classique"] .game-hud .chip.match .match-target { color:var(--muted); font-weight:700; }
body.in-game[data-game="belote-classique"] .suit-r { color:#ff7b7b; }
body.in-game[data-game="belote-classique"] .suit-b { color:#e7eeff; }
body.in-game[data-game="belote-classique"] .chip.trump .suit-r { color:#e06b4a; }

/* Table : croix compacte (top / left-center-right) */
body.in-game[data-game="belote-classique"] .b-table {
  position:relative; z-index:2; min-height:0; flex:1 1 auto; display:grid;
  grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr;
  grid-template-areas:"top top top" "left center right"; align-items:center; justify-items:center; padding:6px 14px 4px; gap:2px;
}
body.in-game[data-game="belote-classique"] .a-top{grid-area:top}
body.in-game[data-game="belote-classique"] .a-left{grid-area:left;justify-self:start}
body.in-game[data-game="belote-classique"] .a-right{grid-area:right;justify-self:end}
body.in-game[data-game="belote-classique"] .a-center{grid-area:center;align-self:center}

/* Sièges */
body.in-game[data-game="belote-classique"] .pl{display:grid;justify-items:center;gap:4px;min-width:78px}
body.in-game[data-game="belote-classique"] .pl .head{display:flex;align-items:center;gap:7px;padding:3px 11px 3px 3px;border-radius:999px;background:linear-gradient(180deg,rgba(4,20,13,.6),rgba(4,20,13,.35));border:1px solid var(--glass-brd)}
body.in-game[data-game="belote-classique"] .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;border:2px solid rgba(255,255,255,.22);box-shadow:var(--e1)}
body.in-game[data-game="belote-classique"] .pl.nous .av{background:linear-gradient(160deg,#16c08a,#067a55)}
body.in-game[data-game="belote-classique"] .pl.eux .av{background:linear-gradient(160deg,#95a2d2,#4c5a93)}
body.in-game[data-game="belote-classique"] .nm{font-size:12.5px;font-weight:800;color:#eaf5ef}
body.in-game[data-game="belote-classique"] .badges{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
body.in-game[data-game="belote-classique"] .tag{font-size:9px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
body.in-game[data-game="belote-classique"] .tag.nous{background:var(--nous-soft);color:#9df0ce;border:1px solid var(--nous-brd)}
body.in-game[data-game="belote-classique"] .tag.eux{background:var(--eux-soft);color:#cdd5f1;border:1px solid var(--eux-brd)}
body.in-game[data-game="belote-classique"] .badge{font-size:8.5px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
body.in-game[data-game="belote-classique"] .badge.preneur{background:var(--gold-soft);color:#f4e4b0;border:1px solid var(--gold-brd)}
body.in-game[data-game="belote-classique"] .cnt{font-size:10px;color:#afcfc1;font-weight:700}
body.in-game[data-game="belote-classique"] .pl.active .head{border-color:transparent;box-shadow:0 0 0 2px var(--accent),0 0 18px 2px color-mix(in srgb,var(--accent) 60%,transparent)}

/* Éventail de dos */
body.in-game[data-game="belote-classique"] .fan{display:flex;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
body.in-game[data-game="belote-classique"] .fan i{width:19px;height:28px;border-radius:4px;margin-left:-11px;background:repeating-linear-gradient(45deg,#0e7a57 0 4px,#0a6146 4px 8px);border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
body.in-game[data-game="belote-classique"] .fan i:first-child{margin-left:0}

/* Cartes françaises */
body.in-game[data-game="belote-classique"] .card{--w:62px;width:var(--w);aspect-ratio:5/7;border-radius:12px;position:relative;flex:none;display:grid;place-items:center;user-select:none;font-family:var(--font);background:linear-gradient(158deg,#fdfeff,#ebeff4);border:1px solid rgba(10,20,30,.16);box-shadow:var(--e2)}
body.in-game[data-game="belote-classique"] .card .idx{position:absolute;top:5px;left:6px;display:flex;flex-direction:column;align-items:center;line-height:.86;font-size:calc(var(--w)*.24);font-weight:900}
body.in-game[data-game="belote-classique"] .card .idx .u{font-size:calc(var(--w)*.2)}
body.in-game[data-game="belote-classique"] .card .idx.br{top:auto;left:auto;bottom:5px;right:6px;transform:rotate(180deg)}
body.in-game[data-game="belote-classique"] .card .mid{display:flex;flex-direction:column;align-items:center;line-height:.82}
body.in-game[data-game="belote-classique"] .card .mid .r{font-weight:900;font-size:calc(var(--w)*.4)}
body.in-game[data-game="belote-classique"] .card .mid .u{font-size:calc(var(--w)*.34)}
body.in-game[data-game="belote-classique"] .card.red{color:var(--card-red)}
body.in-game[data-game="belote-classique"] .card.black{color:var(--card-black)}
body.in-game[data-game="belote-classique"] .card.trump{border-color:var(--gold);box-shadow:var(--e2),0 0 0 2px var(--gold)}
body.in-game[data-game="belote-classique"] .card.trump .band{position:absolute;top:0;left:0;right:0;height:12px;display:grid;place-items:center;font-size:7px;font-weight:900;letter-spacing:.12em;color:#7a5e12;background:linear-gradient(180deg,var(--gold),#c9a63a);border-radius:12px 12px 0 0}
body.in-game[data-game="belote-classique"] .card.legal{box-shadow:var(--e2),var(--glow);cursor:pointer}
body.in-game[data-game="belote-classique"] .card.legal:hover{transform:translateY(-6px)}
body.in-game[data-game="belote-classique"] .card.illegal{filter:grayscale(.62) brightness(.82);opacity:.5}
body.in-game[data-game="belote-classique"] .card.winner{box-shadow:var(--e2),0 0 0 3px var(--accent-2),0 0 18px 3px color-mix(in srgb,var(--accent-2) 65%,transparent)}
body.in-game[data-game="belote-classique"] .card.mini{--w:44px}
body.in-game[data-game="belote-classique"] .card.big{--w:96px}
body.in-game[data-game="belote-classique"] .card.selected{transform:translateY(-14px);box-shadow:var(--e3),var(--glow)}

/* Pli central */
body.in-game[data-game="belote-classique"] .trick{position:relative;width:152px;height:132px;display:grid;place-items:center}
body.in-game[data-game="belote-classique"] .trick .core{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;text-align:center;line-height:1;background:radial-gradient(circle at 50% 35%,rgba(212,175,55,.22),rgba(4,20,13,.55));border:1px solid var(--gold-brd);color:var(--gold);font-size:20px;font-weight:900;box-shadow:inset 0 0 12px rgba(0,0,0,.4)}
body.in-game[data-game="belote-classique"] .trick .core small{display:block;font-size:6.5px;letter-spacing:.1em;color:#cfe6da;font-weight:800;margin-top:1px}
body.in-game[data-game="belote-classique"] .trick .slot{position:absolute}
body.in-game[data-game="belote-classique"] .trick .n{top:-8px;left:50%;transform:translateX(-50%)}
body.in-game[data-game="belote-classique"] .trick .s{bottom:-8px;left:50%;transform:translateX(-50%)}
body.in-game[data-game="belote-classique"] .trick .w{left:-10px;top:50%;transform:translateY(-50%)}
body.in-game[data-game="belote-classique"] .trick .e{right:-10px;top:50%;transform:translateY(-50%)}
body.in-game[data-game="belote-classique"] .trick .empty{width:44px;aspect-ratio:5/7;border-radius:12px;border:1px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.05);display:grid;place-items:center;font-size:8px;color:#bfd9cc;text-align:center;font-weight:700;line-height:1.1}
body.in-game[data-game="belote-classique"] .trick .lead{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9.5px;color:#bfd9cc;font-weight:700}

/* Dock */
body.in-game[data-game="belote-classique"] .b-dock{position:relative;z-index:5;flex:0 0 auto;background:linear-gradient(180deg,rgba(4,18,12,.55),rgba(4,18,12,.78));border-top:1px solid var(--gold-brd);padding:6px 12px 9px;display:grid;gap:5px}
body.in-game[data-game="belote-classique"] .abar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:0}
body.in-game[data-game="belote-classique"] .abar .lead{font-size:12.5px;font-weight:800;color:#eaf5ef}
body.in-game[data-game="belote-classique"] .abar .spacer{flex:1}
body.in-game[data-game="belote-classique"] .abar .wait{font-size:12px;color:#afcfc1;font-weight:700}
body.in-game[data-game="belote-classique"] .abar .rappel{font-size:10.5px;color:#cfb661;font-weight:700}
body.in-game[data-game="belote-classique"] .hint{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:#f4e4b0;padding:6px 11px;border-radius:8px;background:var(--gold-soft);border:1px solid var(--gold-brd)}
body.in-game[data-game="belote-classique"] .hint.duty{color:#ffd7b0;background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.5)}
body.in-game[data-game="belote-classique"] .btn{min-height:44px;padding:0 16px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid var(--glass-brd);background:var(--surface-2);color:#eaf5ef;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
body.in-game[data-game="belote-classique"] .btn.take{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 66%,#000));color:var(--on-accent);border-color:transparent;box-shadow:var(--e2)}
body.in-game[data-game="belote-classique"] .btn.pass{background:var(--surface-2);color:#eaf5ef;border-color:var(--glass-brd-strong)}
body.in-game[data-game="belote-classique"] .btn.suit{background:linear-gradient(180deg,#fdfeff,#e9edf2);color:#0b0f14;border-color:rgba(10,20,30,.2);min-width:66px;justify-content:center;font-weight:900}
body.in-game[data-game="belote-classique"] .btn.suit .sr{color:var(--card-red);font-size:16px}
body.in-game[data-game="belote-classique"] .btn.suit .sb{color:var(--card-black);font-size:16px}
body.in-game[data-game="belote-classique"] .btn.suit.forbidden{opacity:.42;text-decoration:line-through;cursor:not-allowed;filter:grayscale(.4)}
body.in-game[data-game="belote-classique"] .b-hand{display:flex;justify-content:center;gap:6px;padding:8px 4px 2px;overflow-x:auto;overflow-y:visible}
body.in-game[data-game="belote-classique"] .b-hand .sep{width:10px;flex:none}
/* C1 : carte légale soulevée en permanence dans la main (pas seulement au survol) */
body.in-game[data-game="belote-classique"] .b-hand .card.legal{transform:translateY(-5px)}

/* Toast d'annonce */
body.in-game[data-game="belote-classique"] .toast{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;background:linear-gradient(180deg,#f0d877,var(--gold));color:#2a2005;font-weight:900;font-size:12.5px;border:2px solid #f6e9b8;box-shadow:var(--e3)}

/* Retourne (enchères) au centre : gros libellé */
body.in-game[data-game="belote-classique"] .retourne-label{font-size:8.5px;font-weight:900;letter-spacing:.12em;color:#cfe6da;text-transform:uppercase}
body.in-game[data-game="belote-classique"] .retourne-sub{font-size:10px;color:#bfd9cc;font-weight:700}

/* Encart latéral : masqué par défaut (mobile), révélé en desktop (grille "side"). */
body.in-game[data-game="belote-classique"] .d-side{display:none}

/* Desktop : croix plus grande + encart latéral (dernier pli / journal) */
@media (min-width: 721px) and (min-height: 561px) {
  body.in-game[data-game="belote-classique"] .b-table{
    grid-template-columns:1fr auto 1fr; /* D1 : colonnes équilibrées comme la maquette (au lieu de auto 1fr auto) */
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"top top top" "left center right" "side side side";
    padding:16px 34px 6px;
  }
  body.in-game[data-game="belote-classique"] .trick .empty{width:84px;font-size:11px} /* D2 : slot vide agrandi en desktop */
  body.in-game[data-game="belote-classique"] .av{width:46px;height:46px;font-size:18px} /* D4 */
  body.in-game[data-game="belote-classique"] .nm{font-size:16px} /* D4 */
  body.in-game[data-game="belote-classique"] .fan i{width:34px;height:50px;margin-left:-20px} /* D5 */
  body.in-game[data-game="belote-classique"] .trick{width:300px;height:236px} /* D3 */
  body.in-game[data-game="belote-classique"] .trick .core{width:82px;height:82px;font-size:32px} /* D3 */
  body.in-game[data-game="belote-classique"] .trick .core small{font-size:9px}
  body.in-game[data-game="belote-classique"] .card.mini{--w:64px}
  body.in-game[data-game="belote-classique"] .b-hand .card{--w:92px} /* D6 */
  body.in-game[data-game="belote-classique"] .b-hand .sep{width:18px} /* D8 */
  body.in-game[data-game="belote-classique"] .b-dock{padding:10px 20px 14px} /* D8 */
  /* A5 : chips HUD plus grands en desktop (comme la maquette) */
  body.in-game[data-game="belote-classique"] .game-hud .chip{height:28px;padding:0 12px;font-size:12.5px}
  body.in-game[data-game="belote-classique"] .game-hud .chip.belote-brand{font-size:14px}
  /* Encart latéral desktop */
  body.in-game[data-game="belote-classique"] .d-side{grid-area:side;justify-self:center;display:flex;gap:16px;margin-top:8px}
  body.in-game[data-game="belote-classique"] .d-side .panel{
    background:linear-gradient(180deg,rgba(4,20,13,.5),rgba(4,20,13,.34));
    border:1px solid var(--glass-brd);border-radius:var(--r-md,12px);padding:10px 14px;min-width:210px;
    backdrop-filter:blur(6px);box-shadow:none;
  }
  body.in-game[data-game="belote-classique"] .d-side .panel h4{margin:0 0 7px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#a9c9bc;font-weight:900}
  body.in-game[data-game="belote-classique"] .d-side .panel .log{font-size:12px;color:#dceee5;line-height:1.75}
  body.in-game[data-game="belote-classique"] .d-side .panel .log .g{color:var(--gold);font-weight:800}
  body.in-game[data-game="belote-classique"] .d-side .panel .log .n{color:#7fe3bd;font-weight:800}
}

/* ============================================================
   BELOTE — correctifs post-audit (ux-design/diffs/belote-2026-08-14.md)
   ============================================================ */
/* T1 (BLOQUANT) : .card héritait du générique .card{margin:40px auto} -> reset en scope belote.
   Corrige d'un coup le dock gonflé (242->~104px), la croix étranglée et la main étalée. */
body.in-game[data-game="belote-classique"] .card { margin: 0; }
/* C5 : halo animé sur le siège actif */
body.in-game[data-game="belote-classique"] .pl.active .head { animation: bhalo 1.7s ease infinite; }
@keyframes bhalo {
  0%,100% { box-shadow: 0 0 0 2px var(--accent), 0 0 12px 1px color-mix(in srgb, var(--accent) 45%, transparent); }
  50%     { box-shadow: 0 0 0 2px var(--accent), 0 0 22px 6px color-mix(in srgb, var(--accent) 70%, transparent); }
}
/* C6 : carte maîtresse du pli animée */
body.in-game[data-game="belote-classique"] .card.winner { animation: bwin 1.1s ease infinite; }
@keyframes bwin {
  50% { box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-2), 0 0 26px 7px color-mix(in srgb, var(--accent-2) 85%, transparent); }
}

/* ============================================================
   BELOTE — compaction MOBILE PAYSAGE : la main ne doit pas bloquer la table,
   le pli ne doit pas déborder dans le dock (viewport court ~375px).
   ============================================================ */
@media (max-width: 720px), (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="belote-classique"] .b-table { padding: 2px 10px 0; overflow: hidden; }
  body.in-game[data-game="belote-classique"] .pl { min-width: 64px; gap: 2px; }
  body.in-game[data-game="belote-classique"] .av { width: 24px; height: 24px; font-size: 11px; }
  body.in-game[data-game="belote-classique"] .nm { font-size: 11px; }
  body.in-game[data-game="belote-classique"] .fan i { width: 14px; height: 21px; margin-left: -9px; }
  /* pli central plus petit → tient dans la rangée centrale sans déborder */
  body.in-game[data-game="belote-classique"] .trick { width: 116px; height: 92px; }
  body.in-game[data-game="belote-classique"] .trick .core { width: 38px; height: 38px; font-size: 15px; }
  body.in-game[data-game="belote-classique"] .card.mini { --w: 34px; }
  body.in-game[data-game="belote-classique"] .trick .empty { width: 34px; font-size: 7px; }
  body.in-game[data-game="belote-classique"] .trick .lead { bottom: -14px; font-size: 8.5px; }
  /* dock compact : abar fine + MAIN plus petite (ne bloque plus la vue) */
  body.in-game[data-game="belote-classique"] .b-dock { padding: 3px 10px 5px; gap: 3px; }
  body.in-game[data-game="belote-classique"] .abar { min-height: 0; gap: 6px; }
  body.in-game[data-game="belote-classique"] .abar .lead,
  body.in-game[data-game="belote-classique"] .abar .hint,
  body.in-game[data-game="belote-classique"] .abar .wait { font-size: 11px; }
  body.in-game[data-game="belote-classique"] .b-hand { padding: 4px 4px 2px; gap: 5px; }
  body.in-game[data-game="belote-classique"] .b-hand .card { --w: 46px; }
  body.in-game[data-game="belote-classique"] .card.big { --w: 60px; }
  body.in-game[data-game="belote-classique"] .btn { min-height: 44px; font-size: 12px; padding: 0 12px; }
  body.in-game[data-game="belote-classique"] .btn.suit { min-width: 56px; }
}

/* ============================================================
   BELOTE — correctifs passe 2 (ux-design/diffs/belote-2026-08-14-passe2.md)
   ============================================================ */
/* N1 : les cartes du pli recouvraient le rond ATOUT. Pli un peu plus grand + cartes forcées
   plus petites (le --w:34 de .card.mini n'était pas assez spécifique). */
@media (max-width: 720px), (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="belote-classique"] .trick { width: 134px; height: 112px; }
  body.in-game[data-game="belote-classique"] .trick .card { --w: 30px; }
}
body.in-game[data-game="belote-classique"] .trick .core { z-index: 1; }
body.in-game[data-game="belote-classique"] .trick .slot { z-index: 2; }
/* N4 : symbole d'atout NOIR (♠/♣) en or dans le chip trump du HUD (comme la maquette) */
body.in-game[data-game="belote-classique"] .game-hud .chip.trump .suit-b { color: #f4e4b0; }
/* B1 : retourne REFUSÉE (BIDDING_2) — carte grisée + overlay ⦸ */
body.in-game[data-game="belote-classique"] .retourne-refused { position: relative; display: grid; place-items: center; }
body.in-game[data-game="belote-classique"] .retourne-refused .card { opacity: .5; filter: grayscale(.4); }
body.in-game[data-game="belote-classique"] .retourne-refused .rx { position: absolute; inset: 0; display: grid; place-items: center; font-size: 52px; color: #b91c1c; pointer-events: none; }
/* N3 : chip retourne barré quand refusée */
body.in-game[data-game="belote-classique"] .game-hud .chip.trump.refused { opacity: .6; text-decoration: line-through; }


/* ==== UNO MOTIF (maquette ux-design/mockups/uno.html) ==== */
/* Reproduction fidèle : felt 4 couleurs sur near-black, anneau de sens lumineux, cartes-pilules
   iconiques (ovale central + index de coin doublés d'une forme daltonisme ●■◆▲), pioche + défausse
   au centre avec couleur active EXPLICITE, adversaires en ellipse (viewer ancré en bas), main en arc
   dans un dock bas fixe. DOM émis par renderUnoBoard + HUD de renderGame. Tout est scopé sous
   body.in-game[data-game="uno-classic"] ; les tokens de la maquette sont aliasés ci-dessous. */
body.in-game[data-game="uno-classic"] {
  --uno-red:#ef4444;    --uno-red-d:#b91c1c;
  --uno-blue:#3b82f6;   --uno-blue-d:#1d4ed8;
  --uno-green:#22c55e;  --uno-green-d:#15803d;
  --uno-yellow:#eab308; --uno-yellow-d:#a16207;
  --ink:#0b0f14;
  --accent:#ef4444; --accent-2:#3b82f6; --on-accent:#fff;
  --e1:var(--shadow-sm); --e2:var(--shadow-md); --e3:var(--shadow-card);
  --num:var(--font);
  --r-card:12px; --r-pill:999px; --r-xl:22px;
  --fs-label:11px; --dur:.16s; --ease:cubic-bezier(.2,.7,.2,1);
  --glass-brd:var(--border); --glass-brd-strong:var(--border-strong);
}

/* ---- Plateau : felt + zone de jeu plein cadre (zéro scroll, la main reste sœur du plateau) ---- */
body.in-game[data-game="uno-classic"] .uno-scroll { overflow: hidden; padding: 0; }
/* Layout PAYSAGE (cf. ux-design/mockups/uno-landscape-mobile.html) : bande adversaires en haut +
   table centrale, à la place de l'ancienne table circulaire (sièges en absolute qui s'écrasaient). */
body.in-game[data-game="uno-classic"] .uno-play {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px;
}

/* --- Bande ADVERSAIRES (haut, pleine largeur, défile si beaucoup de joueurs) --- */
body.in-game[data-game="uno-classic"] .uno-opps {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; overflow-x: auto; padding: 1px 2px 3px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
body.in-game[data-game="uno-classic"] .uno-opps::-webkit-scrollbar { height: 6px; }
body.in-game[data-game="uno-classic"] .uno-opps::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

/* --- TABLE centrale : pioche + défausse au centre, pleine largeur --- */
body.in-game[data-game="uno-classic"] .uno-table {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; overflow: hidden;
}
body.in-game[data-game="uno-classic"] .uno-felt {
  position: absolute; inset: 0; z-index: 0; border-radius: 16px;
  background:
    radial-gradient(60% 70% at 15% 30%, color-mix(in srgb, var(--uno-red) 22%, transparent), transparent 60%),
    radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--uno-blue) 20%, transparent), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, #0d141c, #05080b 72%);
}
/* Anneau de sens (signature UNO) au centre de la table + repère orbital cw/ccw */
body.in-game[data-game="uno-classic"] .dir-ring {
  position: absolute; left: 50%; top: 50%; width: 210px; height: 120px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 1;
  background:
    conic-gradient(from 0deg,
      color-mix(in srgb, var(--uno-red) 70%, transparent) 0 25%,
      color-mix(in srgb, var(--uno-blue) 70%, transparent) 25% 50%,
      color-mix(in srgb, var(--uno-green) 70%, transparent) 50% 75%,
      color-mix(in srgb, var(--uno-yellow) 70%, transparent) 75% 100%) border-box;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 10px rgba(0,0,0,.5)); opacity: .55;
}
body.in-game[data-game="uno-classic"] .dir-marker {
  position: absolute; z-index: 6; min-width: 28px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: var(--ink);
  background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 14px rgba(255,255,255,.4);
}
body.in-game[data-game="uno-classic"] .dir-marker.cw  { top: 10%; right: 34%; }
body.in-game[data-game="uno-classic"] .dir-marker.ccw { top: 10%; left: 34%; }

/* ---- Centre : pioche + défausse ---- */
body.in-game[data-game="uno-classic"] .center {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 30px;
}
body.in-game[data-game="uno-classic"] .pile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.in-game[data-game="uno-classic"] .pile-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body.in-game[data-game="uno-classic"] .pile-sub {
  font-size: 10px; color: var(--muted); max-width: 120px; text-align: center; line-height: 1.25;
}
/* « non jouable — tu as un coup » : c'est un ÉTAT (pioche interdite car tu as une carte jouable),
   pas un murmure gris illisible → couleur d'alerte et texte non tronqué. */
body.in-game[data-game="uno-classic"] .pile.draw .pile-sub { color: color-mix(in srgb, var(--accent-2) 70%, #fff); font-weight: 700; }

/* ---- Carte UNO (.uno-card) — pilule colorée iconique ---- */
body.in-game[data-game="uno-classic"] .uno-card {
  --w: 64px; width: var(--w); height: calc(var(--w) * 1.5); border-radius: calc(var(--w) * .16);
  position: relative; display: grid; place-items: center; color: #fff; overflow: hidden; user-select: none; flex: none;
  background: var(--cbg, linear-gradient(155deg, var(--uno-blue), var(--uno-blue-d)));
  box-shadow: var(--e2); border: 2px solid rgba(255,255,255,.16);
}
body.in-game[data-game="uno-classic"] .uno-card::before {
  content: ""; position: absolute; inset: 14% 10%; border-radius: 50% / 44%;
  background: rgba(255,255,255,.9); transform: rotate(-22deg); z-index: 1;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
}
body.in-game[data-game="uno-classic"] .uno-card .val {
  position: relative; z-index: 3; font-family: var(--num); font-weight: 900; line-height: 1;
  font-size: calc(var(--w) * .5); color: var(--cink, var(--uno-blue-d)); text-shadow: 0 2px 0 rgba(0,0,0,.10);
}
body.in-game[data-game="uno-classic"] .uno-card .corner {
  position: absolute; z-index: 4; font-family: var(--num); font-weight: 900; line-height: 1;
  font-size: calc(var(--w) * .22); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
body.in-game[data-game="uno-classic"] .uno-card .corner .cs {
  width: calc(var(--w) * .17); height: calc(var(--w) * .17); background: #fff;
}
body.in-game[data-game="uno-classic"] .uno-card .corner .cs.tri {
  background: none; width: 0; height: 0;
  border-left: calc(var(--w) * .085) solid transparent; border-right: calc(var(--w) * .085) solid transparent;
  border-bottom: calc(var(--w) * .15) solid #fff;
}
body.in-game[data-game="uno-classic"] .uno-card .corner.tl { top: 6%; left: 8%; }
body.in-game[data-game="uno-classic"] .uno-card .corner.br { bottom: 6%; right: 8%; transform: rotate(180deg); }

/* 4 couleurs franches + formes de coin par couleur */
body.in-game[data-game="uno-classic"] .c-red    { --cbg: linear-gradient(155deg, var(--uno-red), var(--uno-red-d));       --cink: var(--uno-red-d); }
body.in-game[data-game="uno-classic"] .c-blue   { --cbg: linear-gradient(155deg, var(--uno-blue), var(--uno-blue-d));     --cink: var(--uno-blue-d); }
body.in-game[data-game="uno-classic"] .c-green  { --cbg: linear-gradient(155deg, var(--uno-green), var(--uno-green-d));   --cink: var(--uno-green-d); }
body.in-game[data-game="uno-classic"] .c-yellow { --cbg: linear-gradient(155deg, var(--uno-yellow), var(--uno-yellow-d)); --cink: var(--uno-yellow-d); }
body.in-game[data-game="uno-classic"] .c-yellow .corner .cs     { background: var(--uno-yellow-d); }
body.in-game[data-game="uno-classic"] .c-yellow .corner .cs.tri { border-bottom-color: var(--uno-yellow-d); }
body.in-game[data-game="uno-classic"] .cs.s-red    { border-radius: 50%; }
body.in-game[data-game="uno-classic"] .cs.s-blue   { border-radius: 2px; }
body.in-game[data-game="uno-classic"] .cs.s-yellow { transform: rotate(45deg); border-radius: 1px; }

/* WILD : ovale central = roue 4 couleurs */
body.in-game[data-game="uno-classic"] .c-wild { --cbg: linear-gradient(155deg, #20283a, #11151f); }
body.in-game[data-game="uno-classic"] .c-wild::before {
  background: conic-gradient(var(--uno-red) 0 90deg, var(--uno-blue) 90deg 180deg, var(--uno-green) 180deg 270deg, var(--uno-yellow) 270deg 360deg);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.85);
}
body.in-game[data-game="uno-classic"] .c-wild .val    { color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.7); }
body.in-game[data-game="uno-classic"] .c-wild .corner { color: #fff; }

/* Dos de carte (pioche) */
body.in-game[data-game="uno-classic"] .c-back {
  background: linear-gradient(150deg, #18202b, #0b0f14); border-color: rgba(255,255,255,.14);
}
body.in-game[data-game="uno-classic"] .c-back::before {
  inset: 12%; border-radius: 12%; transform: none; background: none;
  border: 2px solid rgba(255,255,255,.25);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px);
}
body.in-game[data-game="uno-classic"] .c-back .brand {
  position: relative; z-index: 3; font-weight: 900; font-style: italic; letter-spacing: -.03em;
  font-size: calc(var(--w) * .24); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
body.in-game[data-game="uno-classic"] .c-back .brand small {
  display: block; font-style: normal; font-weight: 700; font-size: calc(var(--w) * .13); color: var(--muted); text-align: center;
}
/* pioche actionnable (glow vert quand DRAW_CARD est légal) */
body.in-game[data-game="uno-classic"] .pile.draw .uno-card { cursor: pointer; }
body.in-game[data-game="uno-classic"] .uno-card.draw-on {
  box-shadow: var(--e2), 0 0 0 3px var(--ok), 0 0 20px color-mix(in srgb, var(--ok) 55%, transparent);
}

/* Défausse : halo de la couleur ACTIVE autour du sommet + pastille redondante dessous */
body.in-game[data-game="uno-classic"] .discard { position: relative; padding: 6px; border-radius: 16px; cursor: pointer; }
body.in-game[data-game="uno-classic"] .discard.ring-red    { box-shadow: 0 0 0 4px var(--uno-red),    0 0 26px color-mix(in srgb, var(--uno-red) 60%, transparent); }
body.in-game[data-game="uno-classic"] .discard.ring-blue   { box-shadow: 0 0 0 4px var(--uno-blue),   0 0 26px color-mix(in srgb, var(--uno-blue) 60%, transparent); }
body.in-game[data-game="uno-classic"] .discard.ring-green  { box-shadow: 0 0 0 4px var(--uno-green),  0 0 26px color-mix(in srgb, var(--uno-green) 60%, transparent); }
body.in-game[data-game="uno-classic"] .discard.ring-yellow { box-shadow: 0 0 0 4px var(--uno-yellow), 0 0 26px color-mix(in srgb, var(--uno-yellow) 60%, transparent); }
body.in-game[data-game="uno-classic"] .discard.droppable,
body.in-game[data-game="uno-classic"] .discard.drag-over { outline: 2px dashed #fff; outline-offset: 4px; }
body.in-game[data-game="uno-classic"] .uno-card.play-pop { animation: uno-pop .5s var(--ease); }
@keyframes uno-pop { 0% { transform: scale(.7) rotate(-6deg); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
/* Carte injouable tapée / pioche illégale : le générique .shake (défini pour .pcard) ne matche pas
   .uno-card — sans cette règle le buzz haptique se déclenche mais rien ne bouge à l'écran
   (ux-design/uno.md §5.1 « shake + vibration » et pitfall « pioche cliquable à tort »). */
body.in-game[data-game="uno-classic"] .uno-card.shake { animation: shake .4s ease; }

/* pastille couleur active sous la défausse : couleur + forme + libellé (jamais la couleur seule) */
body.in-game[data-game="uno-classic"] .active-under {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 900; letter-spacing: .02em; color: #fff; box-shadow: var(--e1);
}
body.in-game[data-game="uno-classic"] .active-under .sh { width: 13px; height: 13px; }

/* ---- Pastilles de couleur active (HUD + sous-défausse) : fond couleur + forme daltonisme ---- */
body.in-game[data-game="uno-classic"] .ac { color: #fff; border-color: transparent; font-weight: 800; }
body.in-game[data-game="uno-classic"] .ac--red,    body.in-game[data-game="uno-classic"] .ac-red    { background: linear-gradient(180deg, var(--uno-red), var(--uno-red-d)); }
body.in-game[data-game="uno-classic"] .ac--blue,   body.in-game[data-game="uno-classic"] .ac-blue   { background: linear-gradient(180deg, var(--uno-blue), var(--uno-blue-d)); }
body.in-game[data-game="uno-classic"] .ac--green,  body.in-game[data-game="uno-classic"] .ac-green  { background: linear-gradient(180deg, var(--uno-green), var(--uno-green-d)); }
body.in-game[data-game="uno-classic"] .ac--yellow, body.in-game[data-game="uno-classic"] .ac-yellow { background: linear-gradient(180deg, var(--uno-yellow), var(--uno-yellow-d)); color: var(--ink); }
/* formes en fond blanc (contraste garanti sur toute couleur) */
body.in-game[data-game="uno-classic"] .sh { background: #fff; display: inline-block; }
body.in-game[data-game="uno-classic"] .sh--red    { border-radius: 50%; }
body.in-game[data-game="uno-classic"] .sh--blue   { border-radius: 3px; }
body.in-game[data-game="uno-classic"] .sh--yellow { transform: rotate(45deg); border-radius: 2px; }
body.in-game[data-game="uno-classic"] .sh--green  { background: none; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid #fff; }
body.in-game[data-game="uno-classic"] .ac-yellow .sh { background: var(--ink); }
body.in-game[data-game="uno-classic"] .ac-yellow .sh--green { border-bottom-color: var(--ink); background: none; }

/* ---- Chip joueur dans la bande haute (avatar + nom + nb cartes + éventail) ---- */
body.in-game[data-game="uno-classic"] .oseat {
  flex: 0 0 auto; min-width: 108px; display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  border-radius: 13px; background: var(--surface); border: 1px solid var(--glass-brd); position: relative;
}
body.in-game[data-game="uno-classic"] .oseat.active { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), 0 0 18px -3px var(--accent); }
body.in-game[data-game="uno-classic"] .oseat.you {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-brd));
}
body.in-game[data-game="uno-classic"] .oav {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  font-weight: 800; font-size: 12px; color: #fff; background: linear-gradient(160deg, #5566aa, #33406b);
}
body.in-game[data-game="uno-classic"] .oseat.active .oav { background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
body.in-game[data-game="uno-classic"] .oseat.you .oav { background: linear-gradient(160deg, var(--accent), var(--accent-2)); }
body.in-game[data-game="uno-classic"] .oinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.in-game[data-game="uno-classic"] .oname { font-size: 12.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 104px; }
body.in-game[data-game="uno-classic"] .ocount { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
body.in-game[data-game="uno-classic"] .cbadge {
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface-2, var(--surface));
  color: var(--text); font-family: var(--num); font-weight: 900; font-size: 12px; display: inline-grid; place-items: center;
}
body.in-game[data-game="uno-classic"] .cbadge.warn { background: var(--warn); color: var(--ink); }
body.in-game[data-game="uno-classic"] .cbadge.crit { background: var(--danger); color: #fff; animation: uno-pulse 1.1s infinite; }
@keyframes uno-pulse { 50% { transform: scale(1.12); } }
body.in-game[data-game="uno-classic"] .turn-tag { font-size: 9px; font-weight: 900; color: #fff; background: color-mix(in srgb, var(--accent) 80%, #000); padding: 1px 6px; border-radius: var(--r-pill); }
body.in-game[data-game="uno-classic"] .ofan { display: flex; flex: 0 0 auto; margin-left: 2px; }
body.in-game[data-game="uno-classic"] .ofan i { width: 9px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, #26324d, #161d2e); border: 1px solid rgba(255,255,255,.12); margin-left: -4px; }
body.in-game[data-game="uno-classic"] .ofan i:first-child { margin-left: 0; }
body.in-game[data-game="uno-classic"] .turn-arrow { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--accent); }
body.in-game[data-game="uno-classic"] .uno-badge {
  position: absolute; top: -8px; right: -6px; font-size: 9px; font-weight: 900; color: #111;
  background: linear-gradient(180deg, #ffd84d, var(--uno-yellow)); border-radius: var(--r-pill); padding: 1px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); transform: rotate(6deg);
}

/* ---- Main (dock bas fixe, jamais rogné, scroll horizontal INTERNE) ---- */
body.in-game[data-game="uno-classic"] .uno-dock {
  position: relative; z-index: 7;
  background: linear-gradient(180deg, rgba(8,12,18,0), rgba(8,12,18,.5) 38%, rgba(8,12,18,.78));
  padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px; border-radius: 0 0 16px 16px;
}
body.in-game[data-game="uno-classic"] .abar { display: flex; align-items: center; gap: 8px; min-height: 20px; }
body.in-game[data-game="uno-classic"] .abar .htitle { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--muted); margin-right: auto; }
body.in-game[data-game="uno-classic"] .abar .htitle b { color: var(--text); }
body.in-game[data-game="uno-classic"] .abar .abar-hint { font-size: 11px; font-weight: 700; color: var(--muted-2); }
body.in-game[data-game="uno-classic"] .hbtn {
  height: 44px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--glass-brd); font-weight: 800; font-size: 13px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); color: var(--text);
  transition: transform var(--dur) var(--ease);
}
body.in-game[data-game="uno-classic"] .hbtn:hover { transform: translateY(-1px); }
body.in-game[data-game="uno-classic"] .hbtn.primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  color: #fff; border-color: transparent; box-shadow: var(--e2); cursor: default;
}
body.in-game[data-game="uno-classic"] .hbtn.warn { background: linear-gradient(180deg, var(--warn), #b45309); color: var(--ink); border-color: transparent; }
body.in-game[data-game="uno-classic"] .hbtn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

body.in-game[data-game="uno-classic"] .uno-hand-wrap { position: relative; }
body.in-game[data-game="uno-classic"] .hand-scroll {
  position: relative; overflow-x: auto; overflow-y: visible; padding: 18px 6px 6px;
}
body.in-game[data-game="uno-classic"] .hand-scroll::-webkit-scrollbar { height: 6px; }
body.in-game[data-game="uno-classic"] .hand-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
body.in-game[data-game="uno-classic"] .hand-row { display: flex; gap: 10px; padding: 0 30px; width: max-content; }
body.in-game[data-game="uno-classic"] .hand-row .uno-card {
  --w: 66px; transform-origin: bottom center; scroll-snap-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* jouable surélevée (glow vert) / injouable grisée / carte piochée marquée */
body.in-game[data-game="uno-classic"] .hand-row .uno-card.playable {
  transform: translateY(-16px); z-index: 2; cursor: pointer;
  box-shadow: var(--e2), 0 0 0 3px var(--ok), 0 0 20px color-mix(in srgb, var(--ok) 45%, transparent);
}
body.in-game[data-game="uno-classic"] .hand-row .uno-card.playable::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent);
}
body.in-game[data-game="uno-classic"] .hand-row .uno-card.playable:hover { transform: translateY(-22px); }
body.in-game[data-game="uno-classic"] .hand-row .uno-card.unplayable { filter: grayscale(.55) brightness(.65); opacity: .7; cursor: not-allowed; }
body.in-game[data-game="uno-classic"] .hand-row .uno-card.selected { transform: translateY(-20px); box-shadow: var(--e3), 0 0 0 3px var(--ring); }
body.in-game[data-game="uno-classic"] .hand-row .uno-card.drawn { outline: 3px dashed var(--text); outline-offset: 3px; }
body.in-game[data-game="uno-classic"] .hand-row .hand-empty { color: var(--muted); font-size: 13px; padding: 10px; }
/* chevrons de débordement */
body.in-game[data-game="uno-classic"] .edge {
  position: absolute; top: 0; bottom: 0; width: 30px; display: grid; place-items: center; color: var(--text); font-size: 20px;
  pointer-events: none; z-index: 4;
}
body.in-game[data-game="uno-classic"] .edge.l { left: 0; background: linear-gradient(90deg, rgba(8,12,18,.7), transparent); }
body.in-game[data-game="uno-classic"] .edge.r { right: 0; background: linear-gradient(270deg, rgba(8,12,18,.7), transparent); }

/* ---- HUD flottant (renderGame) : pilules de la maquette .hud-bar ---- */
body.in-game[data-game="uno-classic"] .game-hud .turn-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 800; color: var(--text); white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 26%, var(--surface)); border: 1px solid var(--glass-brd-strong);
}
body.in-game[data-game="uno-classic"] .game-hud .turn-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--accent); }
body.in-game[data-game="uno-classic"] .game-hud .hchip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--glass-brd);
}
body.in-game[data-game="uno-classic"] .game-hud .hchip.ac { border-color: transparent; color: #fff; font-weight: 800; }
body.in-game[data-game="uno-classic"] .game-hud .hchip.ac.ac-yellow { color: var(--ink); }
body.in-game[data-game="uno-classic"] .game-hud .hchip .sh { width: 15px; height: 15px; }
body.in-game[data-game="uno-classic"] .game-hud .hchip .dir-arrow { font-size: 15px; line-height: 1; }
body.in-game[data-game="uno-classic"] .game-hud .hchip--won  { background: color-mix(in srgb, var(--ok) 24%, var(--surface)); border-color: transparent; }
body.in-game[data-game="uno-classic"] .game-hud .hchip--lost { background: color-mix(in srgb, var(--danger) 24%, var(--surface)); border-color: transparent; }

/* ---- Desktop : plus d'espace, cartes et chips plus grandes ---- */
@media (min-width: 900px) {
  body.in-game[data-game="uno-classic"] .dir-ring { width: 340px; height: 190px; }
  body.in-game[data-game="uno-classic"] .center { gap: 60px; }
  body.in-game[data-game="uno-classic"] .center .uno-card { --w: 104px; }
  body.in-game[data-game="uno-classic"] .hand-row .uno-card { --w: 88px; margin-left: -16px; }
  body.in-game[data-game="uno-classic"] .oseat { min-width: 150px; padding: 7px 12px; }
  body.in-game[data-game="uno-classic"] .oav { width: 42px; height: 42px; font-size: 15px; }
}

/* ---- Mobile paysage compact : bande + table + main dans 412px de haut ---- */
@media (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="uno-classic"] .uno-play { gap: 4px; }
  body.in-game[data-game="uno-classic"] .uno-table { overflow: hidden; }
  body.in-game[data-game="uno-classic"] .center { gap: 20px; }
  body.in-game[data-game="uno-classic"] .center .uno-card { --w: 50px; }
  body.in-game[data-game="uno-classic"] .pile-label { font-size: 8.5px; }
  body.in-game[data-game="uno-classic"] .pile-sub { font-size: 9.5px; max-width: 120px; line-height: 1.2; }
  body.in-game[data-game="uno-classic"] .active-under { font-size: 9px; padding: 2px 7px; }
  body.in-game[data-game="uno-classic"] .dir-ring { width: 172px; height: 100px; }
  /* Chips adversaires compactes */
  body.in-game[data-game="uno-classic"] .oseat { min-width: 98px; padding: 4px 8px; gap: 7px; }
  body.in-game[data-game="uno-classic"] .oav { width: 28px; height: 28px; font-size: 11px; }
  body.in-game[data-game="uno-classic"] .oname { font-size: 11.5px; max-width: 88px; }
  body.in-game[data-game="uno-classic"] .ocount { font-size: 10px; }
  body.in-game[data-game="uno-classic"] .cbadge { min-width: 18px; height: 17px; font-size: 11px; }
  /* Dock compact */
  body.in-game[data-game="uno-classic"] .uno-dock { padding: 2px 10px 5px; gap: 2px; }
  body.in-game[data-game="uno-classic"] .abar { min-height: 0; }
  body.in-game[data-game="uno-classic"] .abar .htitle { font-size: 10px; }
  body.in-game[data-game="uno-classic"] .hand-scroll { padding: 12px 6px 3px; }
  body.in-game[data-game="uno-classic"] .hand-row .uno-card { --w: 62px; margin-left: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  body.in-game[data-game="uno-classic"] .uno-card.play-pop { animation: none; }
  body.in-game[data-game="uno-classic"] .cbadge.crit { animation: none; }
}
/* ==== /UNO MOTIF ==== */

/* ==== MILLE BORNES MOTIF (maquette ux-design/mockups/mille-bornes.html) ==== */
/* Reproduit "à la lettre" la maquette road-trip rétro (dark-first, glass) : odomètre/jauge km,
   feux tricolores, bottes dorées, bande de route pointillée, cartes "panneau", tap-to-target,
   overlay Coup Fourré. Tout est scopé body.in-game[data-game="mille-bornes"] → aucun autre jeu
   n'est touché. Les tokens de la maquette sont aliasés sur ceux (déjà dark) de body.in-game. */

/* --- Alias de tokens (maquette → socle app) + tokens propres au motif --- */
body.in-game[data-game="mille-bornes"] {
  --on-accent: #04140a;
  /* Ces tokens ne sont PAS globaux (:root) : sans redéfinition ici, var(--r-card)/(--dur)/(--ease)
     étaient invalides -> cartes/boutons à coins carrés (rayon 0) et transitions coupées. */
  --r-card: 12px; --r-pill: 999px; --r-lg: 16px; --r-xl: 22px; --fs-label: 11px;
  --dur: .16s; --ease: cubic-bezier(.2,.7,.2,1);
  --num: "SF Mono", ui-monospace, "Segoe UI", tabular-nums, monospace;
  --e1: var(--shadow-sm); --e2: var(--shadow-md); --e3: var(--shadow-card);
  --line: var(--border);
  --tap: 44px; --tap-lg: 56px;
  --glow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
          0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
  --asphalt: #0c1116;
  --mb-dist-bg: linear-gradient(165deg, #1e3a8a, #3b82f6); --mb-dist-ink: #eaf1ff; --mb-dist-br: #60a5fa;
  --mb-haz-bg: linear-gradient(165deg, #7f1d1d, #dc2626);  --mb-haz-ink: #fff1f1; --mb-haz-br: #f87171;
  --mb-rem-bg: linear-gradient(165deg, #166534, #22c55e);  --mb-rem-ink: #eafff2; --mb-rem-br: #4ade80;
  --mb-saf-bg: linear-gradient(165deg, #f59e0b, #fde047);  --mb-saf-ink: #3f2a06; --mb-saf-br: #fbbf24;
}

/* --- Écran : .table sert de conteneur relatif pour l'overlay + le bandeau d'attente --- */
body.in-game[data-game="mille-bornes"] .table { position: relative; }

/* --- Plateau asphalte + bande de route pointillée ambre (séparateur adversaires | moi) --- */
body.in-game[data-game="mille-bornes"] .board--mb {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 8px; padding: 8px;
  border-radius: var(--r-lg); border: 1px solid var(--glass-brd);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    radial-gradient(140% 120% at 0% 0%, rgba(34,197,94,.06), transparent 55%),
    linear-gradient(180deg, var(--asphalt), #090d11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body.in-game[data-game="mille-bornes"] .board--mb::before {
  content: ""; position: absolute; left: calc(300px + 8px); top: 8px; bottom: 8px; width: 4px;
  transform: translateX(-2px); z-index: 1; pointer-events: none; opacity: .55; border-radius: 4px;
  background: repeating-linear-gradient(180deg, var(--accent-2) 0 12px, transparent 12px 26px);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 55%, transparent));
}
body.in-game[data-game="mille-bornes"] .board--mb.dimmed { filter: grayscale(.4) brightness(.72); }
body.in-game[data-game="mille-bornes"] .col-opp,
body.in-game[data-game="mille-bornes"] .col-me { display: flex; flex-direction: column; gap: 6px; min-height: 0; z-index: 2; }
body.in-game[data-game="mille-bornes"] .coltitle {
  font-size: 10px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
  color: var(--muted-2); padding: 0 2px;
}
body.in-game[data-game="mille-bornes"] .coltitle.targeting { color: #fca5a5; }

/* --- Tableau de bord ADVERSAIRE --- */
body.in-game[data-game="mille-bornes"] .dash {
  position: relative; border: 1px solid var(--glass-brd); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--e1);
  padding: 6px 9px; display: grid; gap: 4px;
  transition: box-shadow var(--dur) var(--ease), opacity var(--dur), filter var(--dur);
}
body.in-game[data-game="mille-bornes"] .dash.active { border-color: transparent; box-shadow: var(--glow); }
body.in-game[data-game="mille-bornes"] .dash.drag-over,
body.in-game[data-game="mille-bornes"] .me.drag-over {
  border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.in-game[data-game="mille-bornes"] .dash .head { display: flex; align-items: center; gap: 7px; }
body.in-game[data-game="mille-bornes"] .car {
  width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center;
  font-size: 14px; background: linear-gradient(160deg, #1b2733, #0f171f); border: 1px solid var(--glass-brd);
}
body.in-game[data-game="mille-bornes"] .car.p1 { box-shadow: inset 0 0 0 1px rgba(96,165,250,.5); }
body.in-game[data-game="mille-bornes"] .car.p2 { box-shadow: inset 0 0 0 1px rgba(244,114,182,.5); }
body.in-game[data-game="mille-bornes"] .car.p3 { box-shadow: inset 0 0 0 1px rgba(251,191,36,.5); }
body.in-game[data-game="mille-bornes"] .nm { font-weight: 800; font-size: 13px; line-height: 1; color: var(--text); }

/* Odomètre (lecteur numérique tabulaire) */
body.in-game[data-game="mille-bornes"] .odo {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 7px; border-radius: 6px;
  font-family: var(--num); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em;
  background: rgba(0,0,0,.5); border: 1px solid var(--glass-brd); color: var(--accent);
  text-shadow: 0 0 9px color-mix(in srgb, var(--accent) 60%, transparent);
}
body.in-game[data-game="mille-bornes"] .odo .big { font-size: 14px; }
body.in-game[data-game="mille-bornes"] .odo .u { font-size: 9px; color: var(--muted); text-shadow: none; font-weight: 700; }
body.in-game[data-game="mille-bornes"] .odo .tot { color: var(--muted-2); font-size: 10px; text-shadow: none; }
body.in-game[data-game="mille-bornes"] .odo.near { color: #fde047; text-shadow: 0 0 9px rgba(253,224,71,.6); }

/* Jauge km graduée + drapeau d'arrivée */
body.in-game[data-game="mille-bornes"] .gauge {
  position: relative; height: 9px; border-radius: 999px; background: rgba(0,0,0,.45);
  border: 1px solid var(--glass-brd); overflow: hidden;
}
body.in-game[data-game="mille-bornes"] .gauge > .fill {
  display: block; height: 100%; min-width: 5px; border-radius: 999px;
  background: linear-gradient(90deg, #15803d, var(--accent) 55%, #86efac);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.in-game[data-game="mille-bornes"] .gauge > .ticks {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.16) calc(10% - 1px) 10%);
}
body.in-game[data-game="mille-bornes"] .gauge > .finish {
  position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 / 3px 3px; opacity: .8;
}

/* Ligne d'état + feux tricolores */
body.in-game[data-game="mille-bornes"] .statusrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
body.in-game[data-game="mille-bornes"] .sem {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 3px; border-radius: 6px;
  background: #05080b; border: 1px solid rgba(255,255,255,.14);
}
body.in-game[data-game="mille-bornes"] .sem .lamp { width: 7px; height: 7px; border-radius: 50%; background: #20272e; }
body.in-game[data-game="mille-bornes"] .sem.go .lamp.g { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
body.in-game[data-game="mille-bornes"] .sem.stop .lamp.r { background: var(--danger); box-shadow: 0 0 7px var(--danger); }
body.in-game[data-game="mille-bornes"] .state {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; line-height: 1.2;
  padding: 2px 7px; border-radius: 999px;
}
body.in-game[data-game="mille-bornes"] .state.roll { color: #bbf7d0; background: color-mix(in srgb, var(--ok) 20%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
body.in-game[data-game="mille-bornes"] .state.stop { color: #fecaca; background: color-mix(in srgb, var(--danger) 20%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
body.in-game[data-game="mille-bornes"] .state.haz  { color: #fecdd3; background: color-mix(in srgb, var(--danger) 20%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
body.in-game[data-game="mille-bornes"] .state.lim  { color: #fde3b0; background: color-mix(in srgb, var(--warn) 20%, transparent);   border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }

/* Bottes dorées */
body.in-game[data-game="mille-bornes"] .boots { display: flex; gap: 3px; margin-left: auto; }
body.in-game[data-game="mille-bornes"] .boot {
  width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; font-size: 12px;
  background: linear-gradient(160deg, #fde047, #f59e0b); border: 1px solid #d97706; color: #3f2a06;
  box-shadow: 0 0 8px rgba(245,158,11,.4);
}
body.in-game[data-game="mille-bornes"] .boot.ghost { background: var(--surface); border: 1px dashed var(--glass-brd); color: transparent; box-shadow: none; opacity: .45; }

/* --- Ma zone (droite, plus grande) --- */
body.in-game[data-game="mille-bornes"] .me {
  position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-brd));
  border-radius: var(--r-lg);
  background:
    radial-gradient(420px 150px at 100% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--e2); padding: 10px 13px; display: grid; gap: 8px;
  transition: box-shadow var(--dur) var(--ease);
}
body.in-game[data-game="mille-bornes"] .me.active { box-shadow: var(--e2), var(--glow); }
body.in-game[data-game="mille-bornes"] .me .head { display: flex; align-items: center; gap: 9px; }
body.in-game[data-game="mille-bornes"] .me .car {
  width: 32px; height: 32px; font-size: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 45%, #0f171f), #0f171f);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.in-game[data-game="mille-bornes"] .me .nm { font-size: 15px; }
body.in-game[data-game="mille-bornes"] .me .odo { margin-left: auto; }
body.in-game[data-game="mille-bornes"] .me .odo .big { font-size: 20px; }
body.in-game[data-game="mille-bornes"] .me .gauge { height: 14px; }
body.in-game[data-game="mille-bornes"] .me .metarow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.in-game[data-game="mille-bornes"] .me .lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
body.in-game[data-game="mille-bornes"] .pilesrow { display: inline-flex; align-items: center; gap: 5px; }

/* Emplacement de dépôt "défausse" (drag → défausser) — discret sous ma zone */
body.in-game[data-game="mille-bornes"] .mb-discard-slot {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: flex-start;
  font-size: 11px; font-weight: 800; color: var(--muted); padding: 5px 12px; min-height: 44px; border-radius: var(--r-pill);
  border: 1px dashed var(--glass-brd); background: rgba(0,0,0,.25);
}
body.in-game[data-game="mille-bornes"] .mb-discard-slot.drag-over {
  border-color: transparent; color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 65%, transparent), 0 0 18px color-mix(in srgb, var(--danger) 40%, transparent);
}

/* --- Cartes "panneau" Mille Bornes (dérivent de .pcard, override total du look UNO) --- */
body.in-game[data-game="mille-bornes"] .pcard {
  --w: 64px; width: var(--w); height: auto; aspect-ratio: 5 / 7; border-radius: var(--r-card);
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px; text-align: center; box-shadow: var(--e2); user-select: none; overflow: hidden;
  font-family: var(--font); border: 1px solid var(--glass-brd); color: #0b0f14;
}
body.in-game[data-game="mille-bornes"] .pcard::before { content: none; } /* pas de pastille ovale UNO */
body.in-game[data-game="mille-bornes"] .pcard .pc-ico {
  font-size: calc(var(--w) * .44); line-height: 1; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
body.in-game[data-game="mille-bornes"] .pcard .pc-val {
  font-family: var(--num); font-size: calc(var(--w) * .5); font-weight: 900; line-height: 1; z-index: 2; letter-spacing: -.02em;
}
body.in-game[data-game="mille-bornes"] .pcard .pc-name {
  z-index: 2; margin-top: 2px; max-width: 96%; font-size: 9px; font-weight: 800; line-height: 1.03;
  overflow-wrap: anywhere; opacity: .92; color: inherit; text-shadow: none;
}
body.in-game[data-game="mille-bornes"] .pcard .pc-corner {
  position: absolute; z-index: 2; top: 6%; left: 8%; font-family: var(--num); font-weight: 900;
  font-size: calc(var(--w) * .2); line-height: 1; transform: none; color: inherit;
}
body.in-game[data-game="mille-bornes"] .pcard--mb-distance { background: var(--mb-dist-bg); color: var(--mb-dist-ink); border-color: var(--mb-dist-br); }
body.in-game[data-game="mille-bornes"] .pcard--mb-hazard   { background: var(--mb-haz-bg);  color: var(--mb-haz-ink);  border-color: var(--mb-haz-br); }
body.in-game[data-game="mille-bornes"] .pcard--mb-remedy   { background: var(--mb-rem-bg);  color: var(--mb-rem-ink);  border-color: var(--mb-rem-br); }
body.in-game[data-game="mille-bornes"] .pcard--mb-safety   { background: var(--mb-saf-bg);  color: var(--mb-saf-ink);  border-color: var(--mb-saf-br); }
body.in-game[data-game="mille-bornes"] .pcard--mini { --w: 38px; box-shadow: var(--e1); cursor: default; }
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-name,
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-corner { display: none; }

/* Affordances de carte (double codage : liseré + halo + tag) */
body.in-game[data-game="mille-bornes"] .pcard.playable {
  cursor: pointer; box-shadow: var(--e2), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform var(--dur) var(--ease);
}
body.in-game[data-game="mille-bornes"] .pcard.playable::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 3px; border-radius: 3px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); z-index: 3;
}
body.in-game[data-game="mille-bornes"] .pcard.playable:hover { transform: translateY(-8px); }
body.in-game[data-game="mille-bornes"] .pcard.unplayable { filter: grayscale(.75) brightness(.72); opacity: .55; cursor: not-allowed; }
body.in-game[data-game="mille-bornes"] .pcard.unplayable::before { content: "🔒"; position: absolute; right: 5px; bottom: 4px; font-size: 11px; z-index: 3; }
body.in-game[data-game="mille-bornes"] .pcard.selected {
  transform: translateY(-16px); box-shadow: var(--e3), var(--glow); outline: 2px solid var(--accent); outline-offset: 2px;
}
body.in-game[data-game="mille-bornes"] .pcard .lift-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap;
  font-size: 8.5px; font-weight: 800; padding: 2px 6px; border-radius: 6px; box-shadow: var(--e1);
  background: var(--accent); color: var(--on-accent);
}
body.in-game[data-game="mille-bornes"] .pcard .lift-tag.hostile { background: var(--danger); color: #fff; }

/* --- Mode ciblage (tap-to-target) --- */
body.in-game[data-game="mille-bornes"] .dash.target-eligible {
  cursor: pointer; border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 70%, transparent), 0 0 22px color-mix(in srgb, var(--danger) 45%, transparent);
  animation: mb-tpulse 1.2s infinite;
}
@keyframes mb-tpulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 65%, transparent), 0 0 16px color-mix(in srgb, var(--danger) 35%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 80%, transparent), 0 0 28px color-mix(in srgb, var(--danger) 55%, transparent); }
}
body.in-game[data-game="mille-bornes"] .tgt-badge {
  position: absolute; top: -9px; right: 8px; z-index: 4; display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--danger); color: #fff; box-shadow: var(--e1);
}
body.in-game[data-game="mille-bornes"] .dash.target-inert { opacity: .38; filter: grayscale(.5); }
body.in-game[data-game="mille-bornes"] .dash .noreason {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-md);
  font-size: 10px; font-weight: 800; color: var(--muted); background: rgba(9,13,17,.45);
}

/* --- Dock (chooser au-dessus de la main, main jamais coupée) --- */
body.in-game[data-game="mille-bornes"] .hand-dock.dock {
  position: relative; z-index: 4; padding: 6px 10px 8px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), var(--surface));
  border: 1px solid var(--glass-brd); box-shadow: var(--e2); display: grid; gap: 4px;
}
body.in-game[data-game="mille-bornes"] .chooser {
  min-height: 34px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px;
}
body.in-game[data-game="mille-bornes"] .chooser .prompt { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
body.in-game[data-game="mille-bornes"] .chooser .prompt.attack { color: #fca5a5; }
body.in-game[data-game="mille-bornes"] .chooser .prompt.muted { color: var(--muted); }
body.in-game[data-game="mille-bornes"] .abtn {
  min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--glass-brd);
  background: var(--surface-2); color: var(--text); font-weight: 800; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
body.in-game[data-game="mille-bornes"] .abtn.primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: var(--on-accent); border-color: transparent; box-shadow: var(--e2); }
body.in-game[data-game="mille-bornes"] .abtn.ghost { background: transparent; color: var(--muted); }
body.in-game[data-game="mille-bornes"] .hand {
  display: flex; gap: 8px; padding: 14px 4px 2px; overflow-x: auto; overflow-y: visible;
  align-items: flex-end; justify-content: center; min-height: 88px; scroll-snap-type: x proximity;
}
body.in-game[data-game="mille-bornes"] .hand::-webkit-scrollbar { height: 0; }
body.in-game[data-game="mille-bornes"] .hand .pcard { scroll-snap-align: center; }
body.in-game[data-game="mille-bornes"] .hand .hand-empty { color: var(--muted); font-size: 13px; padding: 12px 6px; }

/* --- HUD : pills de réaction + chiffres tabulaires --- */
body.in-game[data-game="mille-bornes"] .game-hud .pill--warn {
  background: color-mix(in srgb, var(--warn) 26%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: #fde3b0;
}
body.in-game[data-game="mille-bornes"] .game-hud .pill--wait { background: var(--surface); color: var(--muted); }
body.in-game[data-game="mille-bornes"] .game-hud .pill .mono,
body.in-game[data-game="mille-bornes"] .game-hud .pill b.mono { font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--accent-2); }

/* --- Overlay Coup Fourré (cible) --- */
body.in-game[data-game="mille-bornes"] .overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 12px; }
body.in-game[data-game="mille-bornes"] .overlay .scrim { position: absolute; inset: 0; background: rgba(4,8,12,.62); backdrop-filter: blur(4px); }
body.in-game[data-game="mille-bornes"] .cf-card {
  position: relative; z-index: 2; width: min(560px, 94%); border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--glass-brd-strong); box-shadow: var(--e3);
  animation: mb-cfin .28s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes mb-cfin { from { transform: scale(.92) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
body.in-game[data-game="mille-bornes"] .cf-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #fff; background: linear-gradient(160deg, #7f1d1d, #dc2626); }
body.in-game[data-game="mille-bornes"] .cf-top .bolt { font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
body.in-game[data-game="mille-bornes"] .cf-top .t1 { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
body.in-game[data-game="mille-bornes"] .cf-top .t2 { font-size: 12.5px; opacity: .92; margin-top: 2px; }
body.in-game[data-game="mille-bornes"] .cf-body { padding: 16px 18px; display: grid; gap: 12px; }
body.in-game[data-game="mille-bornes"] .cf-vs { display: flex; align-items: center; justify-content: center; gap: 16px; }
body.in-game[data-game="mille-bornes"] .cf-face { display: grid; justify-items: center; gap: 5px; }
body.in-game[data-game="mille-bornes"] .cf-face .lbl { font-size: 11px; font-weight: 700; color: var(--muted); }
body.in-game[data-game="mille-bornes"] .cf-vs .vs { font-size: 22px; font-weight: 900; color: var(--danger); }
body.in-game[data-game="mille-bornes"] .cf-actions { display: grid; gap: 8px; }
body.in-game[data-game="mille-bornes"] .cf-riposte {
  min-height: var(--tap-lg); border-radius: 14px; border: 1px solid #eab308; cursor: pointer;
  background: linear-gradient(160deg, #fde047, #f59e0b); color: #3f2a06; font-weight: 900; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 22px rgba(245,158,11,.45);
}
body.in-game[data-game="mille-bornes"] .cf-riposte .mini { font-size: 12px; font-weight: 800; opacity: .85; }
body.in-game[data-game="mille-bornes"] .cf-decline {
  min-height: var(--tap); border-radius: 12px; border: 1px solid var(--glass-brd); cursor: pointer;
  background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 13px;
}

/* --- Bandeau d'attente (attaquant / autres) --- */
body.in-game[data-game="mille-bornes"] .wait-banner {
  position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 15;
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; padding: 8px 16px; border-radius: 999px;
  background: rgba(9,13,17,.9); color: #eafff5; border: 1px solid var(--glass-brd); box-shadow: var(--e2);
}
body.in-game[data-game="mille-bornes"] .wait-banner .spin { display: inline-block; animation: mb-spin 1.4s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }

/* --- Desktop : cartes de main plus grandes, dock centré (≥ 900px de large) --- */
@media (min-width: 900px) and (min-height: 600px) {
  body.in-game[data-game="mille-bornes"] .hand { justify-content: center; gap: 12px; min-height: 120px; padding-top: 16px; }
  body.in-game[data-game="mille-bornes"] .hand .pcard { --w: 84px; }
  body.in-game[data-game="mille-bornes"] .chooser { justify-content: center; font-size: 13px; }
  body.in-game[data-game="mille-bornes"] .board--mb { grid-template-columns: minmax(0, 340px) 1fr; gap: 12px; padding: 12px; }
  body.in-game[data-game="mille-bornes"] .board--mb::before { left: calc(340px + 12px); }
}

/* --- Compaction mobile paysage : la main jamais coupée, plateau lisible sans scroll --- */
@media (max-width: 720px), (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="mille-bornes"] .board--mb { padding: 6px; gap: 6px; }
  body.in-game[data-game="mille-bornes"] .col-opp { gap: 5px; }
  body.in-game[data-game="mille-bornes"] .dash { padding: 5px 9px; gap: 3px; }
  body.in-game[data-game="mille-bornes"] .dash .gauge { height: 8px; }
  /* Main volontairement compacte : le HUD flottant mange déjà le haut du plateau, la zone de
     cartes rend ici la hauteur nécessaire pour que route + tableaux de bord tiennent sans scroll. */
  body.in-game[data-game="mille-bornes"] .hand { min-height: 70px; padding-top: 8px; }
  body.in-game[data-game="mille-bornes"] .hand .pcard { --w: 50px; }
  /* Nom de carte : évite la coupure mid-mot de "Prioritaire" à cette largeur (mockup = 64px). */
  body.in-game[data-game="mille-bornes"] .hand .pcard .pc-name { font-size: 8px; overflow-wrap: normal; hyphens: none; }
  body.in-game[data-game="mille-bornes"] .hand-dock.dock { padding-bottom: 6px; }
}

/* --- Très étroit (portrait) : on empile adversaires puis moi, on masque la bande de route --- */
@media (max-width: 620px) {
  body.in-game[data-game="mille-bornes"] .board--mb { grid-template-columns: 1fr; }
  body.in-game[data-game="mille-bornes"] .board--mb::before { display: none; }
}
/* ==== FIN MILLE BORNES MOTIF ==== */

/* ==== TRIO MOTIF (maquette ux-design/mockups/trio.html) ==== */
/* Bloc entierement scope body.in-game[data-game="trio-classic"] : reproduit la maquette
   « deduction neon » (spotlight de revelation, grille memoire, chiffres qui glow, couleur
   deterministe par valeur teinte HSL=(valeur-1)*30deg). Additif, ne touche aucun autre jeu.
   Le DOM emis par renderTrioBoard/renderGame reutilise les noms de classes de la maquette. */

/* Ame de Trio : accent magenta + tokens dores propres a la carte-cle 7.7.7. */
body.in-game[data-game="trio-classic"] {
  --accent: #d946ef; --accent-2: #22d3ee; --on-accent: #0b0f14;
  --seven: #f5c24b; --seven-2: #fde68a;
}
body.in-game[data-game="trio-classic"] .page-game.active {
  background: radial-gradient(1100px 520px at 50% -22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(120% 80% at 50% -20%, var(--bg-2), var(--bg) 62%);
}

/* ---- HUD (thud) : dans #turnBlock, sur une ligne compacte ---- */
body.in-game[data-game="trio-classic"] .game-hud #turnBlock { flex: 1 1 auto; min-width: 0; }
body.in-game[data-game="trio-classic"] .thud {
  display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%;
}
body.in-game[data-game="trio-classic"] .thud .turn { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.in-game[data-game="trio-classic"] .thud .turn .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 26%, transparent), 0 0 10px var(--accent-2);
}
body.in-game[data-game="trio-classic"] .thud .turn b { font-size: 13.5px; white-space: nowrap; }
body.in-game[data-game="trio-classic"] .thud .turn .hint {
  font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.in-game[data-game="trio-classic"] .thud .spacer { flex: 1; }

/* Puce doree « valeur cherchee » (HUD + tete du spotlight). */
body.in-game[data-game="trio-classic"] .seek {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800;
  color: var(--seven-2); background: color-mix(in srgb, var(--seven) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--seven) 55%, transparent); border-radius: 999px;
  padding: 3px 10px 3px 8px; white-space: nowrap;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seven) 14%, transparent);
}
body.in-game[data-game="trio-classic"] .seek .v {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px;
  background: linear-gradient(180deg, var(--seven-2), var(--seven)); color: #3b2400;
  font-weight: 900; font-size: 12.5px; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 10px color-mix(in srgb, var(--seven) 60%, transparent);
}
body.in-game[data-game="trio-classic"] .trios {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--text);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
body.in-game[data-game="trio-classic"] .trios b { font-variant-numeric: tabular-nums; }

/* ---- BOARD : rail joueurs | scene de jeu ---- */
body.in-game[data-game="trio-classic"] .tboard {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 208px 1fr; gap: 8px;
}
body.in-game[data-game="trio-classic"] .rail {
  border: 1px solid var(--border); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, var(--surface), transparent); min-height: 0; overflow-y: auto;
}
/* Scrollbar VISIBLE : le rail défile déjà, mais l'overlay Chromium la cache → l'utilisateur ne sait
   pas que les lignes joueur (et leurs boutons de ciblage) continuent sous la ligne de flottaison. */
body.in-game[data-game="trio-classic"] .rail::-webkit-scrollbar { width: 6px; }
body.in-game[data-game="trio-classic"] .rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-2) 60%, transparent); border-radius: 3px; }
body.in-game[data-game="trio-classic"] .rail { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent-2) 60%, transparent) transparent; }
body.in-game[data-game="trio-classic"] .rail-title {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-2); padding: 0 2px 1px;
}

/* Ligne joueur compacte (1 ligne / joueur). */
body.in-game[data-game="trio-classic"] .pl {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); min-height: 46px; flex-wrap: wrap;
  flex-shrink: 0; /* ne jamais compresser une ligne : les hotspots (2e ligne) déborderaient sur la ligne suivante */
  transition: box-shadow .16s ease, transform .16s ease;
}
body.in-game[data-game="trio-classic"] .pl.active {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent-2), 0 0 16px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
body.in-game[data-game="trio-classic"] .pl.me { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
body.in-game[data-game="trio-classic"] .pl .av {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 12.5px; color: #fff;
}
body.in-game[data-game="trio-classic"] .pl.active .av { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 55%, transparent); }
body.in-game[data-game="trio-classic"] .pl .who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
body.in-game[data-game="trio-classic"] .pl .nm { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.in-game[data-game="trio-classic"] .pl .sub { font-size: 10.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
body.in-game[data-game="trio-classic"] .pl .caret { font-size: 12px; color: var(--accent-2); flex: none; }
body.in-game[data-game="trio-classic"] .xof { font-size: 10px; font-weight: 900; color: var(--accent-2); font-variant-numeric: tabular-nums; }
body.in-game[data-game="trio-classic"] .trophies { display: flex; gap: 3px; flex-wrap: wrap; }
body.in-game[data-game="trio-classic"] .tr {
  font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 6px; letter-spacing: .02em;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
body.in-game[data-game="trio-classic"] .tr.seven {
  background: linear-gradient(90deg, var(--seven-2), var(--seven)); border-color: var(--seven); color: #3b2400;
  box-shadow: 0 0 8px color-mix(in srgb, var(--seven) 45%, transparent);
}
body.in-game[data-game="trio-classic"] .tr.done {
  background: color-mix(in srgb, var(--ok) 22%, transparent); border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: #c7f9d8;
}

/* Hotspots de ciblage (basse / haute) dans la ligne joueur. */
body.in-game[data-game="trio-classic"] .pl .hotspots { display: flex; gap: 5px; flex-basis: 100%; margin-top: 2px; }
body.in-game[data-game="trio-classic"] .hot {
  flex: 1; text-align: center; font-size: 11px; font-weight: 800; color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 8px; padding: 6px 4px; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
body.in-game[data-game="trio-classic"] .hot:hover { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
body.in-game[data-game="trio-classic"] .hot.dis { opacity: .35; cursor: not-allowed; }

/* ---- Scene de jeu (spotlight + fosse) ---- */
body.in-game[data-game="trio-classic"] .play {
  border: 1px solid var(--border); border-radius: 16px; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px; padding: 8px; position: relative;
  background: radial-gradient(600px 260px at 50% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface), transparent);
}

/* Spotlight de revelation. */
body.in-game[data-game="trio-classic"] .reveal {
  position: relative; border: 1px solid var(--border-strong); border-radius: 12px; padding: 7px 10px 9px;
  box-shadow: var(--shadow-sm); overflow: hidden; flex: none;
  background: radial-gradient(420px 200px at 50% -30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%), var(--surface);
}
body.in-game[data-game="trio-classic"] .reveal.matchpair {
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
  background: radial-gradient(420px 200px at 50% -30%, color-mix(in srgb, var(--ok) 24%, transparent), transparent 60%), var(--surface);
}
body.in-game[data-game="trio-classic"] .reveal.failed {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  background: radial-gradient(420px 200px at 50% -30%, color-mix(in srgb, var(--danger) 22%, transparent), transparent 60%), var(--surface);
  animation: trioRevealShake .4s ease;
}
body.in-game[data-game="trio-classic"] .reveal.trio {
  border-color: var(--seven);
  background: radial-gradient(460px 220px at 50% -30%, color-mix(in srgb, var(--seven) 30%, transparent), transparent 60%), var(--surface);
  box-shadow: 0 0 24px color-mix(in srgb, var(--seven) 30%, transparent);
}
@keyframes trioRevealShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
body.in-game[data-game="trio-classic"] .reveal-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
body.in-game[data-game="trio-classic"] .reveal-head .lbl,
body.in-game[data-game="trio-classic"] .pit-head .lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
body.in-game[data-game="trio-classic"] .reveal-head .spacer { flex: 1; }
body.in-game[data-game="trio-classic"] .reveal-count { font-size: 10px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
body.in-game[data-game="trio-classic"] .judge { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
body.in-game[data-game="trio-classic"] .judge.ok { background: color-mix(in srgb, var(--ok) 22%, transparent); color: #c7f9d8; border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); }
body.in-game[data-game="trio-classic"] .judge.bad { background: color-mix(in srgb, var(--danger) 22%, transparent); color: #ffd4d4; border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); }
body.in-game[data-game="trio-classic"] .judge.win { background: linear-gradient(90deg, var(--seven-2), var(--seven)); color: #3b2400; border: 1px solid var(--seven); }

body.in-game[data-game="trio-classic"] .slots { display: flex; gap: 12px; justify-content: center; align-items: flex-start; }
body.in-game[data-game="trio-classic"] .slot { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
body.in-game[data-game="trio-classic"] .slot .origin { font-size: 10px; color: var(--muted); text-align: center; max-width: 108px; line-height: 1.2; white-space: nowrap; }
body.in-game[data-game="trio-classic"] .slot .origin b { color: var(--text); }
body.in-game[data-game="trio-classic"] .ghost {
  width: 56px; height: 78px; border-radius: 12px; border: 2px dashed var(--border-strong);
  display: grid; place-items: center; color: var(--muted-2); font-size: 10.5px; text-align: center;
  line-height: 1.25; background: var(--surface); padding: 6px; overflow: hidden;
}
body.in-game[data-game="trio-classic"] .ghost.next {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Fosse : grille memoire, dos neutres a positions stables. */
body.in-game[data-game="trio-classic"] .pit {
  border: 1px solid var(--border); border-radius: 12px; padding: 6px 9px; min-height: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 5px; background: var(--surface);
}
body.in-game[data-game="trio-classic"] .pit-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body.in-game[data-game="trio-classic"] .pit-head .cue { font-size: 10px; color: var(--muted); }
body.in-game[data-game="trio-classic"] .pit-grid { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; align-content: center; flex: 1; }

/* ---- CARTE A VALEUR (vcard) : chiffre geant qui glow, teinte par valeur (--h) ---- */
body.in-game[data-game="trio-classic"] .vcard {
  --w: 56px; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .2);
  position: relative; flex: none; font-variant-numeric: tabular-nums; user-select: none;
  background: radial-gradient(120% 90% at 50% 8%, hsl(var(--h) 85% 26%), hsl(var(--h) 80% 13%) 72%);
  border: 1px solid hsl(var(--h) 90% 60% / .55);
  box-shadow: var(--shadow-md), 0 0 16px hsl(var(--h) 90% 55% / .35);
  display: grid; place-items: center;
}
body.in-game[data-game="trio-classic"] .vcard::before {
  content: ""; position: absolute; inset: 6% 7%; border-radius: calc(var(--w) * .14);
  border: 1.5px solid hsl(var(--h) 90% 70% / .35); background: none; transform: none;
}
body.in-game[data-game="trio-classic"] .vcard .big {
  position: relative; font-size: calc(var(--w) * .6); font-weight: 900; line-height: 1; color: #fff;
  text-shadow: 0 0 12px hsl(var(--h) 95% 62% / .9), 0 2px 4px rgba(0, 0, 0, .75);
}
body.in-game[data-game="trio-classic"] .vcard .cn {
  position: absolute; font-size: calc(var(--w) * .22); font-weight: 900; color: hsl(var(--h) 95% 78%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
body.in-game[data-game="trio-classic"] .vcard .cn.tl { top: 5%; left: 9%; }
body.in-game[data-game="trio-classic"] .vcard .cn.br { bottom: 5%; right: 9%; transform: rotate(180deg); }
body.in-game[data-game="trio-classic"] .vcard.mini { --w: 42px; }
body.in-game[data-game="trio-classic"] .pit-grid .vcard { --w: 50px; }
/* La 7 : carte-cle (halo dore, etoile). */
body.in-game[data-game="trio-classic"] .vcard.seven {
  border-color: var(--seven);
  box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--seven) 60%, transparent), 0 0 20px color-mix(in srgb, var(--seven) 50%, transparent);
}
body.in-game[data-game="trio-classic"] .vcard.seven::after {
  content: "\2605"; position: absolute; top: 3%; right: 7%; font-size: calc(var(--w) * .2); color: var(--seven-2);
  text-shadow: 0 0 8px var(--seven);
}
/* Jugements sur la carte. */
body.in-game[data-game="trio-classic"] .vcard.match {
  box-shadow: var(--shadow-md), 0 0 0 2px var(--ok), 0 0 18px color-mix(in srgb, var(--ok) 55%, transparent);
}
body.in-game[data-game="trio-classic"] .vcard.fail {
  background: radial-gradient(120% 90% at 50% 8%, #7f1d2b, #4a0f18 72%) !important; border-color: var(--danger) !important;
  box-shadow: var(--shadow-md), 0 0 0 2px var(--danger), 0 0 18px color-mix(in srgb, var(--danger) 55%, transparent) !important;
}
body.in-game[data-game="trio-classic"] .vcard.fail .big { text-shadow: 0 0 12px color-mix(in srgb, var(--danger) 80%, transparent), 0 2px 4px rgba(0, 0, 0, .7); }
body.in-game[data-game="trio-classic"] .vcard.dim { filter: saturate(.4) brightness(.82); opacity: .6; }

/* Dos de fosse : neutre (aucune fuite), numero de slot stable. */
body.in-game[data-game="trio-classic"] .back {
  --w: 50px; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .2); flex: none; position: relative;
  background: repeating-linear-gradient(45deg, #18222d 0 7px, #141c25 7px 14px);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
body.in-game[data-game="trio-classic"] .back::before {
  content: ""; position: absolute; inset: 15%; border-radius: calc(var(--w) * .12); border: 1.5px dashed rgba(255, 255, 255, .12);
}
body.in-game[data-game="trio-classic"] .back .slotn {
  position: absolute; top: 5%; left: 8%; font-size: 10.5px; font-weight: 800; color: var(--muted);
  background: rgba(0, 0, 0, .4); border-radius: 5px; padding: 0 5px; font-variant-numeric: tabular-nums;
}
body.in-game[data-game="trio-classic"] .back.live {
  cursor: pointer; border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-sm);
}
body.in-game[data-game="trio-classic"] .back.live:hover, body.in-game[data-game="trio-classic"] .back.live:focus-visible {
  outline: none; transform: translateY(-3px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.in-game[data-game="trio-classic"] .back.live::after {
  content: "reveler"; position: absolute; bottom: 6%; left: 0; right: 0; text-align: center;
  font-size: 9px; color: var(--accent); letter-spacing: .05em;
}

/* ---- DOCK : ma main + action (hors zone scrollable) ---- */
body.in-game[data-game="trio-classic"] .tdock {
  border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(180deg, var(--surface), transparent); backdrop-filter: blur(6px);
  padding: 8px 12px 10px; display: flex; align-items: center; gap: 12px;
}
body.in-game[data-game="trio-classic"] .mine-lbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2);
  writing-mode: vertical-rl; transform: rotate(180deg); align-self: stretch; display: flex; align-items: center; padding: 2px 0; flex: none;
}
body.in-game[data-game="trio-classic"] .mine {
  display: flex; gap: 7px; align-items: flex-end; flex: 1; justify-content: center; padding-top: 14px;
  overflow-x: auto; overflow-y: visible;
}
body.in-game[data-game="trio-classic"] .hand-empty { color: var(--muted); font-size: 12px; align-self: center; }

/* Main : extremes cliquables / milieu inerte. */
body.in-game[data-game="trio-classic"] .hcard { position: relative; }
body.in-game[data-game="trio-classic"] .hcard.edge { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
body.in-game[data-game="trio-classic"] .hcard.edge:hover { transform: translateY(-9px); }
body.in-game[data-game="trio-classic"] .hcard.edge {
  box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.in-game[data-game="trio-classic"] .hcard.edge.seven {
  box-shadow: var(--shadow-md), 0 0 0 2px var(--seven), 0 0 16px color-mix(in srgb, var(--seven) 50%, transparent);
}
body.in-game[data-game="trio-classic"] .hcard.edge::after {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: #fff;
  border-radius: 6px; padding: 1px 6px; white-space: nowrap; box-shadow: var(--shadow-sm);
}
body.in-game[data-game="trio-classic"] .hcard.low::after { content: "\2193 basse"; }
body.in-game[data-game="trio-classic"] .hcard.high::after { content: "\2191 haute"; }
body.in-game[data-game="trio-classic"] .hcard.inert { filter: saturate(.3) brightness(.78); opacity: .55; cursor: not-allowed; }

/* Action contextuelle du dock. */
body.in-game[data-game="trio-classic"] .act { display: flex; flex-direction: column; gap: 5px; align-items: stretch; min-width: 158px; flex: none; }
body.in-game[data-game="trio-classic"] .btn-resolve {
  border: 0; border-radius: 12px; padding: 0 14px; min-height: 44px; font-size: 13px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; box-shadow: var(--shadow-md);
}
body.in-game[data-game="trio-classic"] .btn-resolve.trio { background: linear-gradient(90deg, var(--seven), var(--ok)); color: #161000; }
body.in-game[data-game="trio-classic"] .btn-resolve.fail { background: linear-gradient(90deg, #fb7185, var(--danger)); }
body.in-game[data-game="trio-classic"] .btn-resolve.ghosted {
  background: var(--surface-2); color: var(--muted-2); box-shadow: none; border: 1px dashed var(--border-strong); cursor: default;
}
body.in-game[data-game="trio-classic"] .act .note { font-size: 10px; color: var(--muted-2); text-align: center; line-height: 1.3; }

/* ---- Desktop : rail plus large, cartes plus grandes (cf. mille-bornes, meme convention) ---- */
@media (min-width: 900px) and (min-height: 600px) {
  body.in-game[data-game="trio-classic"] .tboard { grid-template-columns: 232px 1fr; }
  body.in-game[data-game="trio-classic"] .pl { min-height: 50px; }
  body.in-game[data-game="trio-classic"] .vcard { --w: 64px; }
  body.in-game[data-game="trio-classic"] .pit-grid .vcard { --w: 56px; }
  body.in-game[data-game="trio-classic"] .back { --w: 56px; }
  body.in-game[data-game="trio-classic"] .ghost { width: 64px; height: 90px; }
  body.in-game[data-game="trio-classic"] .mine .vcard.mini { --w: 52px; }
}

/* ---- Responsive : phones etroits / paysage court ---- */
@media (max-width: 640px) {
  body.in-game[data-game="trio-classic"] .tboard { grid-template-columns: 150px 1fr; }
  body.in-game[data-game="trio-classic"] .pl .hotspots { gap: 4px; }
  body.in-game[data-game="trio-classic"] .hot { font-size: 10px; padding: 5px 2px; min-height: 44px; }
  body.in-game[data-game="trio-classic"] .vcard { --w: 50px; }
  body.in-game[data-game="trio-classic"] .ghost { width: 50px; height: 70px; }
}
@media (max-width: 460px) {
  /* Tres etroit : le rail passe au-dessus de la scene, en defilement horizontal. */
  body.in-game[data-game="trio-classic"] .tboard { grid-template-columns: 1fr; }
  body.in-game[data-game="trio-classic"] .rail { flex-direction: row; overflow-x: auto; align-items: stretch; }
  body.in-game[data-game="trio-classic"] .rail-title { display: none; }
  body.in-game[data-game="trio-classic"] .pl { min-width: 168px; flex: none; }
  body.in-game[data-game="trio-classic"] .mine-lbl { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="trio-classic"] .tdock { padding: 6px 10px 8px; gap: 8px; }
  body.in-game[data-game="trio-classic"] .mine { padding-top: 12px; }
  body.in-game[data-game="trio-classic"] .act { min-width: 140px; }
  /* Compacte les lignes joueur pour faire tenir 3–4 joueurs (avec leurs boutons ↓Basse/↑Haute)
     sans dépendre d'un scroll caché ; les hotspots gardent ≥44px (cible tactile). */
  body.in-game[data-game="trio-classic"] .rail { gap: 4px; padding: 6px; }
  body.in-game[data-game="trio-classic"] .pl { min-height: 40px; padding: 4px 7px; gap: 6px; }
  body.in-game[data-game="trio-classic"] .pl .av { width: 26px; height: 26px; font-size: 11px; }
  body.in-game[data-game="trio-classic"] .pl .nm { font-size: 12px; }
  body.in-game[data-game="trio-classic"] .pl .hotspots { margin-top: 1px; }
}
/* ==== FIN TRIO MOTIF ==== */

/* ============================================================
   Accueil (dark-first) — suit ux-design/mockups/home.html
   Même socle sombre que les plateaux (body.in-game), accent = vert de
   marque : on entre en partie sans rupture de thème. Tout est scopé
   body.home (posé par renderPages quand la vue est "browse").
   ============================================================ */
body.home {
  --bg: #0b0f14; --bg-2: #0e141b;
  --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.08);
  --overlay: #141b23; --overlay-2: #0c1117;
  --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18);
  --text: #eaf0f6; --muted: #9aa7b4; --muted-2: #6b7986;
  --primary: #10b981; --primary-strong: #0b8f65;
  --primary-soft: rgba(16,185,129,.16); --primary-border: rgba(16,185,129,.42);
  --ring: rgba(16,185,129,.45);
  --ok: #22c55e; --ok-soft: rgba(34,197,94,.16); --danger: #ef4444; --warn: #f59e0b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 8px 22px rgba(0,0,0,.5);
  --shadow-card: 0 16px 44px rgba(0,0,0,.55);
  background: radial-gradient(120% 90% at 50% -10%, #0e141b, #0b0f14 62%);
}
body.home .topbar {
  background: rgba(11, 15, 20, .72);
  border-bottom-color: var(--border);
}
body.home #status { background: var(--surface); border-color: var(--border); }

/* Accent par jeu (l'âme) — miroir de body.in-game[data-game=…] */
.g-thegame     { --g: #7c5cff; --g2: #22d3ee; }
.g-millebornes { --g: #22c55e; --g2: #f59e0b; }
.g-uno         { --g: #ef4444; --g2: #3b82f6; }
.g-trio        { --g: #d946ef; --g2: #22d3ee; }
.g-belote      { --g: #10b981; --g2: #d4af37; }
.g-yahtzee     { --g: #e3a33b; --g2: #b5533f; }
.g-papayoo     { --g: #e8552d; --g2: #c8a15a; }
.g-generic     { --g: #64748b; --g2: #94a3b8; }

/* Skins immersifs par jeu (--skin) : un fond qui rappelle le plateau, réutilisé par la salle
   d'attente (.wr) et les cartes de salon (.room). Dark-first, autonome (couleurs figées).
   --skin-brd : liseré optionnel (or belote / laiton pirate). */
.g-uno {
  --skin:
    radial-gradient(75% 60% at 12% 8%, rgba(239, 68, 68, .34), transparent 55%),
    radial-gradient(75% 60% at 88% 10%, rgba(59, 130, 246, .28), transparent 55%),
    radial-gradient(70% 60% at 15% 100%, rgba(34, 197, 94, .20), transparent 55%),
    radial-gradient(70% 60% at 92% 100%, rgba(234, 179, 8, .18), transparent 55%),
    linear-gradient(160deg, #140609, #0b0f14 68%);
}
.g-thegame {
  /* Identité home « rouge / os » (voir .g-thegame plus bas, généré par sync_mockup.py). */
  --skin:
    radial-gradient(72% 60% at 20% 0%, rgba(225, 29, 47, .30), transparent 56%),
    radial-gradient(66% 60% at 84% 108%, rgba(214, 202, 186, .12), transparent 55%),
    linear-gradient(168deg, #1a0b0d, #0b0f14 72%);
}
.g-millebornes {
  --skin:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 204, 0, .24) 34px 54px, transparent 54px 88px) 0 50% / 100% 6px no-repeat,
    radial-gradient(95% 75% at 50% -12%, rgba(20, 168, 90, .30), transparent 60%),
    linear-gradient(180deg, #0b1a12, #0b0f14 72%);
}
.g-belote {
  --skin:
    radial-gradient(130% 120% at 50% 118%, rgba(0, 0, 0, .42), transparent 58%),
    radial-gradient(120% 130% at 50% 40%, #128a5f 0%, #0a5238 48%, #052a1c 100%);
  --skin-brd: rgba(212, 175, 55, .42);
}
.g-trio {
  --skin:
    radial-gradient(58% 55% at 50% -6%, rgba(217, 70, 239, .36), transparent 58%),
    radial-gradient(70% 62% at 50% 122%, rgba(34, 211, 238, .16), transparent 55%),
    linear-gradient(180deg, #160a1c, #0b0f14 70%);
}
.g-yahtzee {
  --skin:
    repeating-linear-gradient(90deg, rgba(227, 163, 59, .07) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(0deg, rgba(227, 163, 59, .07) 0 26px, transparent 26px 52px),
    radial-gradient(100% 82% at 50% -10%, rgba(227, 163, 59, .18), transparent 60%),
    linear-gradient(180deg, #1a140c, #0b0f14 72%);
}
.g-skullking {
  --skin:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 74px),
    radial-gradient(62% 55% at 50% 16%, rgba(217, 164, 65, .18), transparent 70%),
    linear-gradient(180deg, #16100c, #0c0a0b 58%, #0b0f14);
  --skin-brd: rgba(217, 164, 65, .34);
}
/* Papayoo : kraft sombre + fibres d'allumettes + lueur phosphore (âme « structures en allumettes »). */
.g-papayoo {
  --skin:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(200, 161, 90, .06) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(200, 161, 90, .06) 39px 40px),
    radial-gradient(70% 60% at 50% 8%, rgba(232, 85, 45, .22), transparent 62%),
    linear-gradient(180deg, #2a2016, #1b130b 52%, #100b06);
  --skin-brd: rgba(200, 161, 90, .38);
}
.g-codenom {
  --skin:
    radial-gradient(130% 82% at 50% -18%, rgba(224, 168, 46, .18), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px) 0 0 / 8px 8px,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #161109, #0c0a07);
}
/* Grand Patron : le commit du jeu a oublié l'accent home (.g-grandpatron) — on le pose ici en
   plus du skin « open space » (moquette + bleu corporate / laiton). */
.g-grandpatron {
  --g: #3b6ef5; --g2: #f5b841;
  --skin:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 34px),
    radial-gradient(95% 75% at 50% -12%, rgba(59, 110, 245, .26), transparent 60%),
    linear-gradient(180deg, #0e1626, #0b0f14 72%);
}
/* Rami : le commit du jeu n'a pas posé l'accent home (.g-rami) — ajouté ici + skin « nappe du
   dimanche » (carreaux vichy rouges sur bois chaud, comme le plateau). */
.g-rami {
  --g: #e4572e; --g2: #f2a541;
  --skin:
    repeating-linear-gradient(0deg, rgba(228, 87, 46, .15) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(90deg, rgba(228, 87, 46, .15) 0 26px, transparent 26px 52px),
    radial-gradient(100% 82% at 50% -10%, rgba(242, 165, 65, .16), transparent 60%),
    radial-gradient(120% 130% at 50% 40%, #2a1a15, #130c0a 100%);
}
/* Château Fort : accent or / rouge héraldique + skin « pierre nocturne » (appareil de pierre +
   lueur de torche dorée), en écho au plateau du jeu. Thème la tuile de lobby ET la salle d'attente
   (.wr.g-chateaufort via --g/--g2/--skin/--skin-brd). */
.g-chateaufort {
  --g: #d4af37; --g2: #8b2e2e;
  --skin:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 58px),
    radial-gradient(100% 82% at 50% -12%, rgba(212, 175, 55, .20), transparent 60%),
    radial-gradient(120% 130% at 50% 45%, #23303b, #0e141a 100%);
  --skin-brd: rgba(212, 175, 55, .34);
}
/* Le ciel de Jo : accent bleu ciel / violet + skin « ciel nocturne » (dégradé profond + fines
   étoiles), en écho au plateau du jeu. */
.g-cieldejo {
  --g: #38bdf8; --g2: #a78bfa;
  --skin:
    radial-gradient(1.4px 1.4px at 22% 30%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 22%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 70%, rgba(167, 139, 250, .6), transparent 60%),
    radial-gradient(100% 82% at 50% -12%, rgba(56, 189, 248, .18), transparent 60%),
    radial-gradient(120% 130% at 50% 45%, #132038, #070b12 100%);
  --skin-brd: rgba(56, 189, 248, .32);
}
/* T'as vraiment que ça à faire ?! : accent néon vert/magenta + skin « donjon pixel » (pierre
   near-black + fin dallage), en écho au plateau du jeu. */
.g-quecaafaire {
  --g: #3df07a; --g2: #f44fe0;
  --skin:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 16px),
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(61, 240, 122, .5), transparent 60%),
    radial-gradient(1.3px 1.3px at 76% 66%, rgba(244, 79, 224, .45), transparent 60%),
    radial-gradient(100% 82% at 50% -12%, rgba(61, 240, 122, .16), transparent 60%),
    linear-gradient(180deg, #12161d, #070a0f 100%);
  --skin-brd: rgba(61, 240, 122, .3);
}
/* Menteur ! : DA FORÊT tropicale + perroquets — accent vert jungle + orange ara. */
.g-menteur {
  --g: #34d399; --g2: #f97316;
  --skin:
    radial-gradient(1.5px 1.5px at 24% 30%, rgba(134, 239, 172, .5), transparent 60%),
    radial-gradient(1.3px 1.3px at 72% 22%, rgba(134, 239, 172, .4), transparent 60%),
    radial-gradient(1.4px 1.4px at 52% 68%, rgba(52, 211, 153, .5), transparent 60%),
    radial-gradient(100% 82% at 50% -12%, rgba(52, 211, 153, .2), transparent 60%),
    linear-gradient(180deg, #0e241b, #050f0a 100%);
  --skin-brd: rgba(52, 211, 153, .32);
}
/* Canabis (Hanabi coop) : DA FESTIVAL JAPONAIS (matsuri) — accent rose/violet + skin « nuit indigo »
   (dégradé profond + étoiles + lueur de gerbe), en écho au plateau du jeu. */
.g-canabis {
  --g: #ff5470; --g2: #8b7cf6;
  --skin:
    radial-gradient(1.4px 1.4px at 20% 28%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 20%, rgba(255, 84, 112, .6), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 66%, rgba(139, 124, 246, .6), transparent 60%),
    radial-gradient(100% 82% at 50% -12%, rgba(255, 84, 112, .18), transparent 60%),
    linear-gradient(180deg, #1a1e44, #080a1c 100%);
  --skin-brd: rgba(255, 84, 112, .32);
}
/* L'Équipage : DA The Crew — nuit spatiale bleu profond + halo cyan (planète), astronautes. */
.g-equipage {
  --g: #22d3ee; --g2: #5b8cff;
  --skin:
    radial-gradient(1.4px 1.4px at 22% 30%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 22%, rgba(180, 220, 255, .45), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 70%, rgba(34, 211, 238, .55), transparent 60%),
    radial-gradient(100% 82% at 50% -12%, rgba(34, 211, 238, .2), transparent 60%),
    radial-gradient(120% 130% at 50% 45%, #0a1730, #05101f 100%);
  --skin-brd: rgba(56, 160, 230, .32);
}
/* Faïence : DA atelier d'azulejos — accent cobalt + or, skin « céramique nuit » (dégradé profond +
   fines craquelures cobalt/or), en écho au plateau du jeu. */
.g-faience {
  --g: #2e6be6; --g2: #e8a33d;
  --skin:
    radial-gradient(1.3px 1.3px at 20% 28%, rgba(120, 160, 240, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 20%, rgba(232, 163, 61, .45), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 68%, rgba(120, 160, 240, .45), transparent 60%),
    radial-gradient(100% 82% at 50% -12%, rgba(46, 107, 230, .2), transparent 60%),
    radial-gradient(120% 130% at 50% 45%, #101725, #080c14 100%);
  --skin-brd: rgba(46, 107, 230, .32);
}
/* L'amour est dans la lettre : DA « cœur et noir » — accent rose cœur sur fond noir profond
   (manquait, la tuile tombait en fond noir sans couleur). */
.g-lettreamour {
  --g: #e5397d; --g2: #8b0e2e;
  --skin:
    radial-gradient(1.3px 1.3px at 26% 32%, rgba(229, 57, 125, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 24%, rgba(229, 57, 125, .4), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 70%, rgba(139, 14, 46, .55), transparent 60%),
    radial-gradient(100% 82% at 50% -12%, rgba(229, 57, 125, .22), transparent 60%),
    radial-gradient(120% 130% at 50% 45%, #1a0510, #0a0207 100%);
  --skin-brd: rgba(229, 57, 125, .34);
}
.g-generic {
  --skin:
    radial-gradient(100% 80% at 50% -10%, color-mix(in srgb, var(--g) 22%, transparent), transparent 60%),
    linear-gradient(180deg, #0e141b, #0b0f14);
}

/* ---- Landing (déconnecté) : le produit se montre ---- */
.home-landing {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 22px 4px;
}
.home-landing h1 { font-size: 44px; line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.03em; }
.home-landing h1 em { font-style: normal; color: var(--primary); }
.home-landing .lede { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0 0 24px; max-width: 46ch; }
.home-cta { min-height: 56px; padding: 0 26px; font-size: 16px; border-radius: 999px; box-shadow: var(--shadow-md); }
.home-proof { display: flex; gap: 26px; margin-top: 26px; color: var(--muted); font-size: 13px; }
.home-proof b { display: block; color: var(--text); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Éventail de covers */
/* Les covers sont en position absolue : leurs décalages sont calibrés pour tenir dans la colonne de
   droite de la landing (≈560px à 1200px de large) — au-delà, la page passe en une seule colonne. */
.home-fan { position: relative; height: 340px; display: grid; place-items: center; }
.home-fan .cover { position: absolute; width: 168px; height: 236px; }
/* Éventail à 6 covers (un cover par jeu du catalogue) : rotations et décalages symétriques, la
   paire centrale légèrement agrandie pour garder un point focal. */
.home-fan .cover:nth-child(1) { transform: rotate(-20deg) translate(-186px, 20px); }
.home-fan .cover:nth-child(2) { transform: rotate(-12deg) translate(-112px, -2px); }
.home-fan .cover:nth-child(3) { transform: rotate(-4deg) translate(-38px, -18px) scale(1.04); z-index: 3; }
.home-fan .cover:nth-child(4) { transform: rotate(4deg) translate(38px, -18px) scale(1.04); z-index: 3; }
.home-fan .cover:nth-child(5) { transform: rotate(12deg) translate(112px, -2px); }
.home-fan .cover:nth-child(6) { transform: rotate(20deg) translate(186px, 20px); }

.cover {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, color-mix(in srgb, var(--g) 34%, #0b0f14), #0b0f14 70%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px;
}
.cover::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 8%, color-mix(in srgb, var(--g) 40%, transparent), transparent 62%);
}
.cover__art { position: absolute; inset: 0; display: grid; place-items: center; }
.cover__name { position: relative; font-weight: 800; font-size: 15px; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.cover__sub { position: relative; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-top: 3px; }

/* ---- Art de cover, en CSS pur (aucune image à charger) ---- */
.art { display: block; }
.art-thegame { display: flex; gap: 7px; align-items: flex-end; }
.art-thegame i {
  width: 22px; border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 800;
  color: #04121a; text-align: center; padding-top: 4px;
}
.art-thegame i:nth-child(1) { height: 58px; background: linear-gradient(180deg, #22d3ee, #0e7490); }
.art-thegame i:nth-child(2) { height: 76px; background: linear-gradient(180deg, #22d3ee, #0e7490); }
.art-thegame i:nth-child(3) { height: 46px; background: linear-gradient(180deg, #f59e0b, #b45309); }
.art-thegame i:nth-child(4) { height: 66px; background: linear-gradient(180deg, #f59e0b, #b45309); }

.art-mb { position: relative; width: 120px; height: 120px; }
.art-mb .road {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 64px; height: 76%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  border-left: 2px solid rgba(255,255,255,.14);
  border-right: 2px solid rgba(255,255,255,.14);
}
.art-mb .road::after {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #f59e0b 0 12px, transparent 12px 24px);
}
.art-mb .km {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%);
  font-weight: 800; font-size: 26px; color: #fff; text-shadow: 0 2px 12px #000; font-variant-numeric: tabular-nums;
}

.art-uno {
  width: 96px; height: 116px; border-radius: 50%; transform: rotate(-18deg); position: relative;
  background: conic-gradient(#ef4444 0 25%, #3b82f6 0 50%, #eab308 0 75%, #22c55e 0);
  box-shadow: 0 0 30px rgba(239,68,68,.35);
}
.art-uno::after {
  content: "U"; position: absolute; inset: 16px; border-radius: 50%; background: #0b0f14; color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 30px; transform: rotate(18deg);
}

.art-trio { display: flex; gap: 8px; }
.art-trio i {
  width: 34px; height: 46px; border-radius: 7px; background: #f7fafc; color: #0b0f14; font-style: normal;
  display: grid; place-items: center; font-weight: 800; font-size: 22px;
  box-shadow: 0 0 22px color-mix(in srgb, #d946ef 55%, transparent);
}
.art-trio i:nth-child(2) { transform: translateY(-8px); }

/* Yahtzee : deux dés ivoire à pips gravés (grille 3×3, aucune image) */
.art-yahtzee { display: flex; gap: 10px; align-items: center; }
.art-yahtzee .art-die {
  width: 46px; height: 46px; border-radius: 10px; padding: 6px; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  background: linear-gradient(160deg, #f7f1e3, #d9cfb8);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 -3px 0 rgba(42,33,24,.16), inset 0 1px 0 rgba(255,255,255,.9);
  transform: rotate(-8deg);
}
.art-yahtzee .art-die--2 { transform: rotate(10deg) translateY(6px); }
.art-yahtzee .art-die i {
  width: 7px; height: 7px; border-radius: 50%; align-self: center; justify-self: center;
  background: radial-gradient(circle at 35% 30%, #55483a, #2a2118 70%);
}

.art-belote { display: flex; gap: 10px; font-size: 34px; }
.art-belote i { font-style: normal; }
.art-belote .r { color: #e5484d; }
.art-belote .b { color: #f7fafc; }

.art-generic { font-size: 42px; }

/* ---- Hub (connecté) : 2 colonnes, jeux à gauche, salons à droite ---- */
body.home .hub-head { margin-bottom: 16px; }
body.home #browseGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}
body.home .home-col { min-width: 0; }
body.home .home-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
body.home .home-refresh { align-self: stretch; min-height: 44px; border: 1px solid var(--border); }

.sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sec-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.sec-count { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.sec-spacer { flex: 1; }
.home-live {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
}
.home-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px var(--ok); }

/* ---- Filtres du lobby : recherche + catégories + nombre de joueurs ----
   Utile dès qu'il y a beaucoup de jeux : on retrouve un jeu par nom, par famille, ou par « on est N ».
   Accent du hub = --primary (vert de marque). Barre statique (voir index.html) pour garder le focus. */
.lobby-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lobby-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px;
}
.lobby-search:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--primary-soft); }
.lobby-search .ls-ico { opacity: .8; }
.lobby-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 14px; outline: none; }
.lobby-search input::placeholder { color: var(--muted-2); }
.lobby-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.lobby-cats::-webkit-scrollbar { height: 6px; }
.lobby-cats::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }
.lobby-fchip {
  white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 8px 13px; min-height: 36px; font-weight: 700; font-size: 12.5px; cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
}
.lobby-fchip:hover { color: var(--text); }
.lobby-fchip.on {
  background: color-mix(in srgb, var(--primary) 24%, var(--surface)); color: #fff;
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.lobby-fchip .lf-n { opacity: .55; font-variant-numeric: tabular-nums; }
.lobby-players { display: flex; gap: 6px; align-items: center; color: var(--muted-2); font-size: 12px; flex-wrap: wrap; }
.lobby-players .lp-lbl { font-weight: 700; margin-right: 2px; }
.lobby-players .lp {
  min-width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-weight: 800; cursor: pointer; font-size: 12.5px;
}
.lobby-players .lp[data-players="0"] { width: auto; padding: 0 12px; }
.lobby-players .lp.on {
  background: color-mix(in srgb, var(--primary) 26%, var(--surface)); color: #fff;
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.lobby-count { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 10px; font-variant-numeric: tabular-nums; }

/* ---- Tuiles de jeu : la cover EST le bouton ---- */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.game-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, color-mix(in srgb, var(--g) 32%, #0b0f14), #0b0f14 72%);
  box-shadow: var(--shadow-md);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.game-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(85% 70% at 50% 6%, color-mix(in srgb, var(--g) 42%, transparent), transparent 60%);
}
.game-tile:hover { background: linear-gradient(165deg, color-mix(in srgb, var(--g) 32%, #0b0f14), #0b0f14 72%); }
.game-tile:not([disabled]):hover,
.game-tile:not([disabled]):focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), 0 0 0 2px color-mix(in srgb, var(--g) 60%, transparent);
}
.game-tile[disabled] { cursor: not-allowed; opacity: 0.75; }
.game-tile__art { position: absolute; inset: 0; display: grid; place-items: center; transform: scale(0.7); }
.game-tile__foot {
  position: absolute; inset: auto 0 0 0;
  padding: 10px 12px;
  display: block;
  background: linear-gradient(180deg, transparent, rgba(4,8,12,.86) 55%);
}
.game-tile__foot b { font-size: 14px; line-height: 1.15; display: block; }
.tile-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tile-live {
  position: absolute; top: 9px; left: 9px; height: 24px; padding: 0 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  background: rgba(4,8,12,.6); border: 1px solid var(--border); backdrop-filter: blur(6px);
}
.tile-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px var(--ok); }
/* La description passe dans le voile de survol : elle ne pousse plus les salons sous le fold. */
.game-tile__hover {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; gap: 10px;
  padding: 14px;
  opacity: 0;
  background: linear-gradient(180deg, rgba(4,8,12,.4), rgba(4,8,12,.85));
  transition: opacity 0.16s ease;
}
.game-tile:hover .game-tile__hover,
.game-tile:focus-visible .game-tile__hover { opacity: 1; }
.tile-desc {
  font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-cta {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, var(--g), color-mix(in srgb, var(--g) 65%, #000));
  box-shadow: var(--shadow-md);
}
.tile-cta--off { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* ---- Salons ouverts : liste de cartes (le tableau ne tenait pas en colonne étroite) ---- */
.rooms { display: flex; flex-direction: column; gap: 10px; }
.room {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px 10px 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.room__bar { align-self: stretch; background: linear-gradient(180deg, var(--g), var(--g2)); }
.room__main { min-width: 0; }
.room__name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.room__sub { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.room__seats { font-variant-numeric: tabular-nums; }
.room__game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room button { min-height: 44px; }
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--g) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
}
.tag--live { background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.45); color: #fde68a; }
.tag--full { background: var(--surface); border-color: var(--border); color: var(--muted); }
/* Sièges : les places libres sont montrées en pointillés (forme + texte, pas la couleur seule). */
.seat-stack { display: inline-flex; }
.seat-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: var(--text);
  background: #223040; border: 2px solid #0e141b; margin-left: -7px;
}
.seat-dot:first-child { margin-left: 0; }
.seat-dot--free { background: transparent; border: 2px dashed rgba(255,255,255,.22); color: var(--muted-2); }

body.home .empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  line-height: 1.5;
  font-size: 13px;
}

/* ---- Modale « Créer un salon » : contexte du jeu + sélecteur de joueurs ---- */
.create-room-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.create-room-head h3 { margin: 0; }
.create-room-head p { margin: 2px 0 0; font-size: 13px; }
.create-room-cover {
  flex: 0 0 auto; width: 52px; height: 70px; border-radius: 10px; position: relative; overflow: hidden;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
  background: linear-gradient(165deg, color-mix(in srgb, var(--g, var(--primary)) 40%, #0b0f14), #0b0f14 72%);
  border: 1px solid var(--border);
}
.create-room-cover .art { transform: scale(0.38); }
.stepper { display: flex; gap: 8px; flex-wrap: wrap; }
.stepper .step {
  flex: 1 1 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stepper .step:hover { background: var(--surface-2); }
.stepper .step.on {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  box-shadow: 0 0 0 2px var(--ring);
}
.stepper .step.off,
.stepper .step[disabled] { opacity: 0.3; cursor: not-allowed; }
.stepper .step.off:hover { background: var(--surface); }
/* Voile plus dense sur le hub sombre (le fond opaque de la carte vient de --overlay). */
body.home .modal-backdrop {
  background: rgba(4, 8, 12, .78);
  backdrop-filter: blur(6px);
}

/* ---- Tablette / petit desktop : une seule colonne (la landing y gagne toute la largeur) ---- */
@media (max-width: 1100px) {
  .home-landing { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .home-landing h1 { font-size: 32px; }
  .home-fan { height: 300px; }
  .home-fan .cover { width: 150px; height: 212px; }
  .home-fan .cover:nth-child(1) { transform: rotate(-20deg) translate(-170px, 18px); }
  .home-fan .cover:nth-child(2) { transform: rotate(-12deg) translate(-102px, -2px); }
  .home-fan .cover:nth-child(3) { transform: rotate(-4deg) translate(-34px, -16px) scale(1.03); }
  .home-fan .cover:nth-child(4) { transform: rotate(4deg) translate(34px, -16px) scale(1.03); }
  .home-fan .cover:nth-child(5) { transform: rotate(12deg) translate(102px, -2px); }
  .home-fan .cover:nth-child(6) { transform: rotate(20deg) translate(170px, 18px); }
}
@media (max-width: 900px) {
  body.home #browseGrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Mobile paysage (cible du test Pixel 9, 915×412) : zéro défilement vertical ----
   Deux colonnes pour exploiter la largeur, rail de jeux à défilement horizontal, salons à droite. */
@media (max-height: 560px) and (orientation: landscape) {
  body.home { overflow: hidden; }
  body.home .app-shell {
    max-width: 100%;
    height: calc(100dvh - 52px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px 12px;
  }
  body.home #browseIntro { margin-bottom: 8px; }
  body.home #pageBrowse.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  body.home #browseGrid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 290px; gap: 10px; align-items: stretch; }
  body.home .home-col { display: flex; flex-direction: column; min-height: 0; }
  /* #gamesBlock (rendu par renderLobby) doit relayer la hauteur de la colonne au rail. */
  body.home .home-col > #gamesBlock { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body.home .hub-head { margin-bottom: 6px; }
  body.home .hub-head h1 { font-size: 19px; }
  body.home .hub-head p { font-size: 12px; margin: 0; }
  body.home .sec-head { margin-bottom: 6px; }

  /* Filtres compacts : recherche + nombre de joueurs sur une ligne, catégories qui défilent dessous. */
  body.home .lobby-controls { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
  body.home .lobby-search { flex: 1 1 200px; padding: 8px 12px; }
  body.home .lobby-search input { font-size: 13px; }
  body.home .lobby-players { order: 2; flex: 0 0 auto; }
  body.home .lobby-cats { order: 3; flex: 1 1 100%; }
  body.home .lobby-count { margin-bottom: 6px; }

  /* À 20 jeux, un rail horizontal serait interminable : grille DENSE à défilement VERTICAL, qui remplit
     la hauteur restante de la colonne et scrolle sous les filtres (eux restent en tête). */
  body.home .games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    padding-right: 2px;
  }
  body.home .game-tile-wrap { max-height: none; }
  body.home .game-tile { aspect-ratio: 16 / 10; }
  body.home .game-tile__art { transform: scale(0.5); }
  body.home .game-tile__foot { padding: 8px 10px; }
  body.home .game-tile__foot b { font-size: 12px; }
  body.home .tile-meta { font-size: 10px; }
  body.home .tile-desc { -webkit-line-clamp: 2; font-size: 11px; }

  body.home .home-panel { min-height: 0; padding: 10px; gap: 8px; }
  body.home .home-panel > #roomsBlock { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body.home .rooms { min-height: 0; overflow-y: auto; gap: 8px; }
  body.home .room { padding: 7px 8px 7px 0; gap: 9px; }
  body.home .room__name { font-size: 12.5px; }
  body.home .room__sub { font-size: 11px; }
  body.home .home-refresh { min-height: 40px; font-size: 12.5px; }

  /* Landing : tout tient dans les 412px, plus de page à ~3 écrans de haut. */
  .home-landing { grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 0; align-items: center; }
  .home-landing h1 { font-size: 26px; margin-bottom: 8px; }
  .home-landing .lede { font-size: 12.5px; margin-bottom: 12px; }
  .home-proof { margin-top: 12px; gap: 16px; font-size: 11px; }
  .home-proof b { font-size: 16px; }
  .home-fan { height: 240px; }
  .home-fan .cover { width: 124px; height: 174px; padding: 8px; }
  .home-fan .cover:nth-child(1) { transform: rotate(-20deg) translate(-134px, 16px); }
  .home-fan .cover:nth-child(2) { transform: rotate(-12deg) translate(-80px, -2px); }
  .home-fan .cover:nth-child(3) { transform: rotate(-4deg) translate(-27px, -13px) scale(1.03); }
  .home-fan .cover:nth-child(4) { transform: rotate(4deg) translate(27px, -13px) scale(1.03); }
  .home-fan .cover:nth-child(5) { transform: rotate(12deg) translate(80px, -2px); }
  .home-fan .cover:nth-child(6) { transform: rotate(20deg) translate(134px, 16px); }
  .home-fan .cover__art { transform: scale(0.7); }
  .cover__name { font-size: 11.5px; }
  .cover__sub { font-size: 9px; }

  /* ---- Modales : tenir dans les ~412px de haut, sinon défiler dans la carte ---- */
  .modal-backdrop { padding: 8px; }
  .modal-card {
    padding: 14px 16px;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .modal-card h3 { font-size: 17px; margin-bottom: 4px; }

  /* « Créer un salon » : plus large et sur deux colonnes — la hauteur est la ressource rare,
     pas la largeur. Le bouton de validation reste sur toute la largeur, sous les champs. */
  .modal-card--form { width: min(620px, 96vw); }
  .modal-card--form form.grid {
    padding: 10px 12px;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .modal-card--form form.grid > .check,
  .modal-card--form form.grid > button[type="submit"] { grid-column: 1 / -1; }
  .modal-card--form form button[type="submit"] { margin-top: 0; }
  .create-room-head { gap: 10px; }
  .create-room-cover { width: 38px; height: 51px; font-size: 22px; }
  .create-room-cover .art { transform: scale(0.28); }
  .create-room-head p { font-size: 12px; }
  .stepper { gap: 6px; }
  .stepper .step { flex-basis: 40px; min-width: 40px; min-height: 40px; }
}

/* ============================================================
   Jeu de dés au nom trop compliqué (Yahtzee) — « comme chez mamie »
   Reproduit ux-design/mockups/yahtzee.html : nappe vichy, bois verni, napperon au
   crochet, carnet de score en papier jauni, dés ivoire à pips gravés.
   Tout est scopé body.in-game[data-game="yahtzee"] (aucun impact sur les autres jeux) ;
   les classes sont préfixées .yz- pour ne croiser aucune règle globale.
   ============================================================ */
body.in-game[data-game="yahtzee"] {
  --paper: #eadcb8; --paper-2: #dfcea4; --paper-line: rgba(42, 33, 24, .14);
  --ink: #2a2118; --ink-soft: #6e5c44;
  --wood-1: #6b4a2e; --wood-2: #3a2717;
  --vichy: rgba(227, 163, 59, .055); --vichy-2: rgba(181, 83, 63, .05);
  --ivory: #f7f1e3; --ivory-2: #d9cfb8; --pip: #2a2118; --lace: rgba(255, 255, 255, .16);
  --on-accent: #241c14;
}

/* --- La table de mamie : nappe vichy (opacité <= .08) + liseré bois verni --- */
body.in-game[data-game="yahtzee"] .table {
  position: relative;
  background:
    repeating-linear-gradient(90deg, var(--vichy) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(0deg, var(--vichy) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(90deg, var(--vichy-2) 0 13px, transparent 13px 26px),
    radial-gradient(130% 100% at 50% 120%, rgba(0, 0, 0, .45), transparent 62%),
    linear-gradient(180deg, #141017, #0c0a0d 60%, #0b0f14);
  border: 2px solid transparent;
  border-image: linear-gradient(160deg, var(--wood-1), var(--wood-2) 45%, var(--wood-1)) 1;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .4);
}
body.in-game[data-game="yahtzee"] .yz-scroll { overflow: hidden; }

/* --- Ossature du plateau : carnet + rail joueurs --- */
body.in-game[data-game="yahtzee"] .yz-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

/* --- Le carnet (mobile) : papier jauni quadrillé --- */
body.in-game[data-game="yahtzee"] .yz-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px;
  border-radius: var(--r-lg);
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, var(--paper-line) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--paper-line) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(42, 33, 24, .18), inset 0 0 30px rgba(112, 86, 48, .22);
}
body.in-game[data-game="yahtzee"] .yz-pad-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 2px 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
body.in-game[data-game="yahtzee"] .yz-tabs { display: flex; gap: 4px; }
body.in-game[data-game="yahtzee"] .yz-tab {
  min-height: 24px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  border: 1px solid rgba(42, 33, 24, .22); background: rgba(42, 33, 24, .06); color: var(--ink-soft);
  cursor: pointer;
}
body.in-game[data-game="yahtzee"] .yz-tab.on { background: var(--accent); border-color: transparent; color: var(--on-accent); }

/* Grille 3 x 5 : 13 catégories + BONUS + TOTAL, remplissage PAR COLONNE */
body.in-game[data-game="yahtzee"] .yz-grid15 {
  display: grid;
  grid-template-rows: repeat(5, minmax(44px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}
body.in-game[data-game="yahtzee"] .yz-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 10px; min-height: 44px; border-radius: 8px;
  background: rgba(255, 255, 255, .34); border: 1px solid rgba(42, 33, 24, .2);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="yahtzee"] .yz-lbl { display: flex; align-items: center; gap: 5px; }
body.in-game[data-game="yahtzee"] .yz-val {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; gap: 6px;
}
body.in-game[data-game="yahtzee"] .yz-pips { display: inline-flex; gap: 1.5px; }
body.in-game[data-game="yahtzee"] .yz-pips i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--ink); }
/* Remplie : papier plein + coche */
body.in-game[data-game="yahtzee"] .yz-cell.filled {
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 -2px 0 rgba(42, 33, 24, .1);
}
body.in-game[data-game="yahtzee"] .yz-cell.filled .yz-val::after {
  content: "✓"; font-size: 9px; color: var(--ink-soft);
}
/* Libre + potentiel > 0 : bordure « crayon » + valeur italique préfixée + */
body.in-game[data-game="yahtzee"] .yz-cell.free {
  background: rgba(255, 255, 255, .2); border-style: dashed; cursor: pointer;
}
body.in-game[data-game="yahtzee"] .yz-cell.free .yz-val { font-style: italic; font-weight: 700; opacity: .78; color: var(--ink-soft); }
body.in-game[data-game="yahtzee"] .yz-cell.free .yz-val::before { content: "+"; }
body.in-game[data-game="yahtzee"] .yz-cell.free:hover,
body.in-game[data-game="yahtzee"] .yz-cell.free:focus-visible {
  transform: translateY(-1px); box-shadow: 0 0 0 2px var(--accent); outline: none;
}
/* Libre + potentiel = 0 : valeur barrée + croix + pastille « barrer » */
body.in-game[data-game="yahtzee"] .yz-cell.zero .yz-val {
  font-style: normal; text-decoration: line-through; color: color-mix(in srgb, var(--danger) 55%, var(--ink-soft));
}
body.in-game[data-game="yahtzee"] .yz-cell.zero .yz-val::before { content: "✗ "; text-decoration: none; }
body.in-game[data-game="yahtzee"] .yz-cell.zero .yz-lbl::after {
  content: "barrer"; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--danger) 60%, var(--ink-soft));
  border: 1px solid currentColor; border-radius: 999px; padding: 0 5px;
}
/* Pas encore lancé / lecture seule */
body.in-game[data-game="yahtzee"] .yz-cell.idle { opacity: .52; border-style: dashed; }
body.in-game[data-game="yahtzee"] .yz-cell.locked { cursor: default; filter: grayscale(.3); }
/* Tuiles d'info : BONUS (jauge) + TOTAL (encre pleine) */
body.in-game[data-game="yahtzee"] .yz-cell.info {
  background: linear-gradient(180deg, rgba(227, 163, 59, .34), rgba(227, 163, 59, .18));
  border-color: rgba(42, 33, 24, .3);
}
body.in-game[data-game="yahtzee"] .yz-cell.total {
  background: linear-gradient(180deg, rgba(42, 33, 24, .86), rgba(42, 33, 24, .72));
  color: var(--paper); border-color: rgba(0, 0, 0, .4);
}
body.in-game[data-game="yahtzee"] .yz-cell.total .yz-val { font-size: 17px; color: #fff; }
body.in-game[data-game="yahtzee"] .yz-gauge {
  width: 40px; height: 5px; border-radius: 999px; background: rgba(42, 33, 24, .22); overflow: hidden;
}
body.in-game[data-game="yahtzee"] .yz-gauge span { display: block; height: 100%; background: var(--ink); border-radius: 999px; }

/* --- Rail joueurs + jauge de bonus --- */
body.in-game[data-game="yahtzee"] .yz-rail { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
body.in-game[data-game="yahtzee"] .yz-seat {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; min-height: 44px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-align: left; cursor: pointer;
}
body.in-game[data-game="yahtzee"] .yz-seat.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.in-game[data-game="yahtzee"] .yz-seat.shown { border-color: var(--border-strong); }
body.in-game[data-game="yahtzee"] .yz-seat.active .yz-name::before { content: "▸ "; color: var(--accent); }
body.in-game[data-game="yahtzee"] .yz-seat .yz-av {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 12px; color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
body.in-game[data-game="yahtzee"] .yz-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
body.in-game[data-game="yahtzee"] .yz-name { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.in-game[data-game="yahtzee"] .yz-sub { font-size: 10px; color: var(--muted); font-weight: 700; }
body.in-game[data-game="yahtzee"] .yz-score { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 16px; }
body.in-game[data-game="yahtzee"] .yz-bonus-box {
  margin-top: auto; padding: 8px 9px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; color: var(--muted);
}
body.in-game[data-game="yahtzee"] .yz-bonus-box .yz-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
body.in-game[data-game="yahtzee"] .yz-bonus-box .yz-row--ok { color: var(--ok); margin: 5px 0 0; }
body.in-game[data-game="yahtzee"] .yz-bonus-box b { color: var(--text); font-variant-numeric: tabular-nums; font-size: 12px; }
body.in-game[data-game="yahtzee"] .yz-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; }
body.in-game[data-game="yahtzee"] .yz-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* --- Dock : napperon au crochet + 5 dés + bouton primaire --- */
body.in-game[data-game="yahtzee"] .yz-dock { display: flex; align-items: flex-end; gap: 12px; }
body.in-game[data-game="yahtzee"] .yz-doily {
  position: relative; flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 14px;
  padding: 12px 16px 10px; border-radius: 20px; min-height: 0;
  background:
    radial-gradient(circle at 7px 7px, var(--lace) 1.5px, transparent 2.2px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px dashed rgba(255, 255, 255, .18);
}
body.in-game[data-game="yahtzee"] .yz-doily::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: -5px; height: 10px; pointer-events: none;
  background: radial-gradient(circle at 6px 5px, rgba(255, 255, 255, .13) 4.5px, transparent 5px) 0 0 / 12px 10px;
}
/* Étiquette à DROITE du napperon : à gauche, les dés gardés (remontés de 12px) passaient devant. */
body.in-game[data-game="yahtzee"] .yz-doily-label {
  position: absolute; right: 14px; top: -8px; padding: 0 6px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); background: #0c0a0d;
}

/* Le dé : ivoire, pips gravés en grille 3x3 (la forme porte la valeur) */
body.in-game[data-game="yahtzee"] .yz-die {
  --d: 60px; width: var(--d); height: var(--d); flex: 0 0 auto; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 8px; border-radius: 13px; user-select: none;
  background: linear-gradient(160deg, var(--ivory) 0%, var(--ivory-2) 100%);
  box-shadow: var(--shadow-md), inset 0 -3px 0 rgba(42, 33, 24, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="yahtzee"] .yz-die[role="button"] { cursor: pointer; }
body.in-game[data-game="yahtzee"] .yz-die i {
  width: 9px; height: 9px; border-radius: 50%; align-self: center; justify-self: center;
  background: radial-gradient(circle at 35% 30%, #55483a, var(--pip) 70%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
}
body.in-game[data-game="yahtzee"] .yz-die .p1, .art-yahtzee .art-die .p1 { grid-area: 1 / 1; }
body.in-game[data-game="yahtzee"] .yz-die .p2, .art-yahtzee .art-die .p2 { grid-area: 1 / 2; }
body.in-game[data-game="yahtzee"] .yz-die .p3, .art-yahtzee .art-die .p3 { grid-area: 1 / 3; }
body.in-game[data-game="yahtzee"] .yz-die .p4, .art-yahtzee .art-die .p4 { grid-area: 2 / 1; }
body.in-game[data-game="yahtzee"] .yz-die .p5, .art-yahtzee .art-die .p5 { grid-area: 2 / 2; }
body.in-game[data-game="yahtzee"] .yz-die .p6, .art-yahtzee .art-die .p6 { grid-area: 2 / 3; }
body.in-game[data-game="yahtzee"] .yz-die .p7, .art-yahtzee .art-die .p7 { grid-area: 3 / 1; }
body.in-game[data-game="yahtzee"] .yz-die .p8, .art-yahtzee .art-die .p8 { grid-area: 3 / 2; }
body.in-game[data-game="yahtzee"] .yz-die .p9, .art-yahtzee .art-die .p9 { grid-area: 3 / 3; }
/* Gardé : remonté sur le napperon + liseré accent + épingle + libellé GARDÉ (triple codage) */
body.in-game[data-game="yahtzee"] .yz-die.held {
  transform: translateY(-12px);
  box-shadow: var(--shadow-card), 0 0 0 2px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.in-game[data-game="yahtzee"] .yz-die.held::before {
  content: "📌"; position: absolute; top: -9px; right: -6px; font-size: 13px; transform: rotate(12deg);
}
body.in-game[data-game="yahtzee"] .yz-die.held::after {
  content: "GARDÉ"; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: var(--accent); white-space: nowrap;
}
/* Pas encore lancé : translucide, pips fantômes */
body.in-game[data-game="yahtzee"] .yz-die.ghost {
  background: linear-gradient(160deg, rgba(247, 241, 227, .2), rgba(217, 207, 184, .14));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
body.in-game[data-game="yahtzee"] .yz-die.ghost i { background: rgba(42, 33, 24, .22); box-shadow: none; }
/* Verrouillé (3e lancer atteint) / lecture seule (tour adverse) */
body.in-game[data-game="yahtzee"] .yz-die.locked:not(.held)::after {
  content: "🔒"; position: absolute; right: 4px; bottom: 2px; font-size: 10px; opacity: .5;
}
body.in-game[data-game="yahtzee"] .yz-die.ro { opacity: .84; }

/* Bouton primaire contextuel (zone de pouce, bas-droite) */
body.in-game[data-game="yahtzee"] .yz-dock-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
body.in-game[data-game="yahtzee"] .yz-roll {
  min-height: 56px; min-width: 190px; padding: 0 20px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-weight: 800; font-size: 15px; letter-spacing: .02em; border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #000));
  color: var(--on-accent); box-shadow: var(--shadow-md);
}
body.in-game[data-game="yahtzee"] .yz-roll small {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .74;
}
body.in-game[data-game="yahtzee"] .yz-roll.pulse { animation: yz-pulse 1.8s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes yz-pulse {
  0%, 100% { box-shadow: var(--shadow-md); }
  50% { box-shadow: var(--shadow-md), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
}
body.in-game[data-game="yahtzee"] .yz-roll.off {
  background: var(--surface-2); color: var(--muted); border-color: var(--border); box-shadow: none; cursor: not-allowed;
}
body.in-game[data-game="yahtzee"] .yz-roll.wait {
  background: transparent; border-color: var(--border); color: var(--muted); box-shadow: none; cursor: default;
}
body.in-game[data-game="yahtzee"] .yz-spin {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--muted-2); border-top-color: transparent;
  display: inline-block; margin-right: 6px; vertical-align: -1px; animation: yz-spin 1s linear infinite;
}
@keyframes yz-spin { to { transform: rotate(360deg); } }
body.in-game[data-game="yahtzee"] .yz-release {
  min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 13px;
  background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer;
}

/* Gobelet + consigne : desktop seulement (la hauteur est trop précieuse en paysage) */
body.in-game[data-game="yahtzee"] .yz-cupline { display: none; }
body.in-game[data-game="yahtzee"] .yz-cup { width: 74px; height: 74px; flex: 0 0 auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
body.in-game[data-game="yahtzee"] .yz-cuptext { font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.4; }
body.in-game[data-game="yahtzee"] .yz-cuptext b { color: var(--text); font-size: 13px; }

/* --- Modale « barrer » (rendue dans le plateau, au-dessus de tout) --- */
body.in-game[data-game="yahtzee"] .yz-backdrop {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(4, 8, 12, .58); backdrop-filter: blur(3px);
}
body.in-game[data-game="yahtzee"] .yz-modal {
  min-width: 300px; max-width: 420px; padding: 18px; border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow-card);
}
body.in-game[data-game="yahtzee"] .yz-modal h3 { margin: 0 0 6px; font-size: 16px; }
body.in-game[data-game="yahtzee"] .yz-modal h3 span { color: var(--accent); }
body.in-game[data-game="yahtzee"] .yz-modal p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
body.in-game[data-game="yahtzee"] .yz-modal-row { display: flex; gap: 8px; justify-content: flex-end; }
body.in-game[data-game="yahtzee"] .yz-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
body.in-game[data-game="yahtzee"] .yz-btn.ghost { background: transparent; }
body.in-game[data-game="yahtzee"] .yz-btn.danger {
  background: color-mix(in srgb, var(--danger) 30%, var(--surface)); border-color: transparent; color: #fff;
}

/* --- HUD (rendu dans #turnBlock) --- */
body.in-game[data-game="yahtzee"] .yz-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
}
body.in-game[data-game="yahtzee"] .yz-chip b { font-variant-numeric: tabular-nums; }
body.in-game[data-game="yahtzee"] .yz-chip--turn {
  background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border-color: var(--border-strong);
}
body.in-game[data-game="yahtzee"] .yz-chip--wait { color: var(--muted); }
body.in-game[data-game="yahtzee"] .yz-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
body.in-game[data-game="yahtzee"] .yz-dot--wait { background: var(--muted-2); box-shadow: none; }
body.in-game[data-game="yahtzee"] .yz-rolls { display: inline-flex; align-items: center; gap: 4px; }
body.in-game[data-game="yahtzee"] .yz-rolls i {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); background: transparent;
}
body.in-game[data-game="yahtzee"] .yz-rolls i.on {
  background: var(--accent); box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 70%, transparent);
}
body.in-game[data-game="yahtzee"] .yz-badge-evt {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #000));
  box-shadow: var(--shadow-md);
}

/* --- Le vrai carnet (desktop) : lignes = catégories, colonnes = joueurs --- */
body.in-game[data-game="yahtzee"] .yz-sheet { display: none; }
body.in-game[data-game="yahtzee"] .yz-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
body.in-game[data-game="yahtzee"] .yz-table th,
body.in-game[data-game="yahtzee"] .yz-table td {
  padding: 0 8px; height: 31px; text-align: right; font-weight: 700;
  border-bottom: 1px solid rgba(42, 33, 24, .16);
}
body.in-game[data-game="yahtzee"] .yz-table th.cat,
body.in-game[data-game="yahtzee"] .yz-table td.cat { text-align: left; width: 232px; font-weight: 800; }
body.in-game[data-game="yahtzee"] .yz-table thead th {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px solid rgba(42, 33, 24, .34); height: 28px;
}
body.in-game[data-game="yahtzee"] .yz-table td { font-variant-numeric: tabular-nums; font-size: 14px; }
body.in-game[data-game="yahtzee"] .yz-table .me-col { background: rgba(227, 163, 59, .2); }
body.in-game[data-game="yahtzee"] .yz-table tr.sec td {
  background: rgba(42, 33, 24, .1); font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); height: 24px; text-align: left;
}
body.in-game[data-game="yahtzee"] .yz-table tr.sum td { background: rgba(42, 33, 24, .09); font-weight: 800; }
body.in-game[data-game="yahtzee"] .yz-table tr.grand td { background: rgba(42, 33, 24, .86); color: #fff; height: 36px; }
body.in-game[data-game="yahtzee"] .yz-table tr.grand td.cat { color: var(--paper); }
body.in-game[data-game="yahtzee"] .yz-table td.pen { font-style: italic; color: var(--ink-soft); opacity: .82; }
body.in-game[data-game="yahtzee"] .yz-table td.pen::before { content: "+"; }
body.in-game[data-game="yahtzee"] .yz-table td.pen.nul {
  font-style: normal; text-decoration: line-through; color: color-mix(in srgb, var(--danger) 58%, var(--ink-soft));
}
body.in-game[data-game="yahtzee"] .yz-table td.pen.nul::before { content: "✗ "; }
body.in-game[data-game="yahtzee"] .yz-table td.pick { cursor: pointer; }
body.in-game[data-game="yahtzee"] .yz-table td.pick:hover,
body.in-game[data-game="yahtzee"] .yz-table td.pick:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }

/* --- Mobile paysage : on compacte pour garder 3 zones sans le moindre scroll --- */
@media (max-height: 560px) and (orientation: landscape) {
  /* padding-top : réservé au HUD flottant (body.in-game .game-hud est en position:absolute en
     paysage, top 6px + 28px de haut = 34px) — sans ça, l'en-tête du carnet et ses onglets passent
     SOUS les pastilles du HUD. 34px au lieu des 40px génériques : les 6px récupérés sont ce qui
     permet de tenir les tuiles à 44px ET les dés à 60px comme la maquette. */
  body.in-game[data-game="yahtzee"] .table { padding: 34px 7px 6px; gap: 6px; }
  body.in-game[data-game="yahtzee"] .yz-pad-head { padding-bottom: 3px; font-size: 9.5px; }
  body.in-game[data-game="yahtzee"] .yz-tab { height: 22px; min-height: 22px; }
  /* Sur un Pixel 9 en paysage (915×412), la tuile mesure 44 × 218 px comme la maquette.
     Sur un écran encore plus court elle rétrécit jusqu'à 34px, mais reste très large. */
  /* gouttière 4px au lieu des 6px de la maquette : ce sont ces 10px qui font passer les tuiles
     de 43 à 44px de haut. Compromis assumé — la cible tactile prime sur la gouttière. */
  body.in-game[data-game="yahtzee"] .yz-grid15 { grid-template-rows: repeat(5, minmax(34px, 1fr)); gap: 4px; }
  body.in-game[data-game="yahtzee"] .yz-cell { min-height: 34px; }
  body.in-game[data-game="yahtzee"] .yz-bonus-box { padding: 6px 8px; }
  /* Napperon : padding vertical réduit pour loger les dés de 60px sans manger le carnet. */
  body.in-game[data-game="yahtzee"] .yz-doily { padding: 8px 16px 6px; gap: 8px; }
}

/* --- Desktop : carnet complet à gauche, plateau de dés en colonne droite --- */
@media (min-width: 1024px) and (min-height: 620px) {
  body.in-game[data-game="yahtzee"] .table {
    display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 16px; align-items: stretch;
  }
  body.in-game[data-game="yahtzee"] .yz-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; }
  body.in-game[data-game="yahtzee"] .yz-pad { display: none; }
  body.in-game[data-game="yahtzee"] .yz-sheet {
    display: block; order: 2; position: relative; padding: 14px 16px; border-radius: var(--r-lg); color: var(--ink);
    background:
      repeating-linear-gradient(0deg, var(--paper-line) 0 1px, transparent 1px 26px),
      linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(42, 33, 24, .2);
    overflow: auto;
  }
  body.in-game[data-game="yahtzee"] .yz-sheet h4 { margin: 0 0 2px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
  body.in-game[data-game="yahtzee"] .yz-hint {
    margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  }
  body.in-game[data-game="yahtzee"] .yz-rail { order: 1; flex-direction: row; align-items: stretch; gap: 8px; }
  body.in-game[data-game="yahtzee"] .yz-seat { flex: 1 1 150px; }
  body.in-game[data-game="yahtzee"] .yz-bonus-box { margin-top: 0; flex: 1 1 180px; }
  /* Le dock devient la colonne droite : gobelet + consigne, napperon, boutons.
     margin-top:auto vient de .hand-dock (utile en colonne flex) : en grille il empêcherait
     l'étirement sur toute la hauteur, on le neutralise. */
  body.in-game[data-game="yahtzee"] .yz-dock { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 0; }
  body.in-game[data-game="yahtzee"] .yz-cupline { display: flex; align-items: center; gap: 12px; }
  /* margin auto : le napperon se centre dans la colonne au lieu de laisser un grand vide sous lui. */
  body.in-game[data-game="yahtzee"] .yz-doily {
    flex: 0 0 auto; justify-content: center; min-height: 132px; padding: 20px 18px 16px; margin: auto 0;
  }
  /* 5 dés + 4 gouttières doivent tenir sur UNE ligne dans la colonne (sinon le napperon casse
     en deux rangées et on ne lit plus « gardés vs relançables ») : 5×80 + 4×8 = 432 ≤ 444. */
  body.in-game[data-game="yahtzee"] .yz-die { --d: 80px; border-radius: 16px; padding: 10px; }
  body.in-game[data-game="yahtzee"] .yz-die i { width: 11px; height: 11px; }
  body.in-game[data-game="yahtzee"] .yz-doily { gap: 8px; }
  body.in-game[data-game="yahtzee"] .yz-table td.cat,
  body.in-game[data-game="yahtzee"] .yz-table th.cat { width: 206px; }
  /* Le carnet complet (19 lignes) doit tenir sans scroll interne en 1280×800. */
  body.in-game[data-game="yahtzee"] .yz-table th,
  body.in-game[data-game="yahtzee"] .yz-table td { height: 28px; }
  body.in-game[data-game="yahtzee"] .yz-table tr.grand td { height: 32px; }
  body.in-game[data-game="yahtzee"] .yz-dock-actions { margin-top: auto; justify-content: flex-end; }
  body.in-game[data-game="yahtzee"] .yz-roll { min-width: 240px; }
}

/* --- Modale de fin de partie : classement + ex aequo --- */
.yz-result { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.yz-result__headline { font-size: 17px; font-weight: 800; text-align: center; }
.yz-result__headline.won { color: #e3a33b; }
.yz-result__headline.lost { color: var(--muted); }
.yz-exaequo {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, #e3a33b 24%, var(--surface, rgba(255,255,255,.06)));
  border: 1px solid var(--border-strong, rgba(255,255,255,.18));
}
.yz-podium { display: flex; gap: 8px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
/* Marches de hauteurs différentes, comme la maquette (1er 126px, 2e 100px, 3e et suivants 86px). */
.yz-step {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  min-width: 96px; height: 86px; padding: 8px 10px;
  border-radius: 12px 12px 0 0; background: var(--surface, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(255,255,255,.1)); border-bottom: none;
}
.yz-podium > .yz-step:nth-child(2) { height: 100px; }
.yz-step.first { background: color-mix(in srgb, #e3a33b 22%, var(--surface, rgba(255,255,255,.06))); height: 126px; }
.yz-step .yz-rk { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.yz-step .yz-av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(180deg, #e3a33b, #b5533f); color: #241c14;
}
.yz-step .yz-nm { font-size: 11.5px; font-weight: 800; }
.yz-step .yz-sc { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 800; }
.yz-res-grid { display: flex; flex-direction: column; width: 100%; gap: 2px; margin-top: 4px; }
.yz-res-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 6px;
  padding: 5px 8px; border-radius: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right;
}
.yz-res-row > :first-child { text-align: left; font-weight: 700; }
.yz-res-row--head { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.yz-res-row:nth-child(even) { background: var(--surface, rgba(255,255,255,.05)); }
.yz-res-tot { font-weight: 800; }

/* Mouvement réduit : pas de roulement, pas de pulsation. */
@media (prefers-reduced-motion: reduce) {
  body.in-game[data-game="yahtzee"] .yz-roll.pulse { animation: none; }
  body.in-game[data-game="yahtzee"] .yz-spin { animation: none; }
  body.in-game[data-game="yahtzee"] .yz-die,
  body.in-game[data-game="yahtzee"] .yz-cell { transition: none; }
}

/* ============================================================
   Le Roi de l'Os (Skull King) — thème PIRATE
   Reproduit ux-design/mockups/skull-king.html : pont de navire en lattes, cordage en
   liseré, halo de lanterne, cartes parchemin et personnages en carte sombre gravée.
   Tout est scopé body.in-game[data-game="skull-king"] ; classes préfixées .sk-.
   ============================================================ */
body.in-game[data-game="skull-king"] { --primary: #d9a441; --accent: #d9a441; --accent-2: #14b8a6; }
body.in-game[data-game="skull-king"] {
  --on-accent: #1a1208;
  --parch: #efe3c6; --parch-2: #ddcba2; --ink: #241a12; --ink-soft: #6b5638;
  --wood-1: #3b2a1e; --wood-2: #241811; --wood-line: rgba(0, 0, 0, .35);
  --rope: rgba(217, 164, 65, .42);
  --parrot: #22a45d; --chest: #d8a31a; --map: #8b5cf6;
  --char-1: #221a12; --char-2: #120e0a;
}

/* --- Le pont : lattes + halo de lanterne + cordage --- */
body.in-game[data-game="skull-king"] .table {
  position: relative;
  background:
    repeating-linear-gradient(90deg, var(--wood-line) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(90deg, rgba(217, 164, 65, .05) 0 1px, transparent 1px 26px),
    radial-gradient(60% 55% at 50% 34%, rgba(217, 164, 65, .14), transparent 70%),
    radial-gradient(130% 100% at 50% 120%, rgba(0, 0, 0, .5), transparent 62%),
    linear-gradient(180deg, #16100c, #0c0a0b 60%, #0b0f14);
  border: 2px dashed var(--rope);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .42);
}
body.in-game[data-game="skull-king"] .sk-scroll { overflow: hidden; }

/* --- Ossature : centre + rail équipage --- */
body.in-game[data-game="skull-king"] .sk-board {
  display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 10px; height: 100%; min-height: 0;
}
body.in-game[data-game="skull-king"] .sk-center {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; min-height: 0;
}
body.in-game[data-game="skull-king"] .sk-empty { color: var(--muted); font-size: 12px; font-weight: 700; }

/* --- La carte : parchemin (couleurs) / sombre gravée (personnages) --- */
body.in-game[data-game="skull-king"] .sk-card {
  --w: 60px; width: var(--w); aspect-ratio: 5 / 7; border-radius: 12px; position: relative; flex: 0 0 auto;
  display: grid; place-items: center; user-select: none; font-variant-numeric: tabular-nums; font-weight: 800;
  background: linear-gradient(168deg, var(--parch), var(--parch-2)); color: var(--ink);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(36, 26, 18, .22);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="skull-king"] .sk-idx {
  position: absolute; top: 4px; left: 5px; font-size: calc(var(--w) * .22); line-height: 1;
  display: flex; flex-direction: column; align-items: center;
}
body.in-game[data-game="skull-king"] .sk-ic { font-size: calc(var(--w) * .17); }
body.in-game[data-game="skull-king"] .sk-big { font-size: calc(var(--w) * .46); line-height: 1; }
body.in-game[data-game="skull-king"] .sk-foot {
  position: absolute; bottom: 4px; right: 5px; font-size: calc(var(--w) * .2); transform: rotate(180deg);
}
/* familles : couleur + icône (double codage daltonisme) */
body.in-game[data-game="skull-king"] .sk-card--parrot { box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--parrot) 55%, transparent); }
body.in-game[data-game="skull-king"] .sk-card--chest { box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--chest) 55%, transparent); }
body.in-game[data-game="skull-king"] .sk-card--map { box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--map) 55%, transparent); }
body.in-game[data-game="skull-king"] .sk-card--parrot .sk-big,
body.in-game[data-game="skull-king"] .sk-card--parrot .sk-idx { color: color-mix(in srgb, var(--parrot) 78%, var(--ink)); }
body.in-game[data-game="skull-king"] .sk-card--chest .sk-big,
body.in-game[data-game="skull-king"] .sk-card--chest .sk-idx { color: color-mix(in srgb, #9a6f06 88%, var(--ink)); }
body.in-game[data-game="skull-king"] .sk-card--map .sk-big,
body.in-game[data-game="skull-king"] .sk-card--map .sk-idx { color: color-mix(in srgb, var(--map) 72%, var(--ink)); }
/* atout noir : carte sombre à liseré or, mention ATOUT */
body.in-game[data-game="skull-king"] .sk-card--jolly {
  background: linear-gradient(168deg, #20262e, #12161c); color: #f3e7cb;
  box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.in-game[data-game="skull-king"] .sk-card--jolly .sk-big,
body.in-game[data-game="skull-king"] .sk-card--jolly .sk-idx { color: #f3e7cb; }
body.in-game[data-game="skull-king"] .sk-card--jolly::before {
  content: "ATOUT"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 14px);
  font-size: 7px; letter-spacing: .14em; color: color-mix(in srgb, var(--accent) 80%, transparent);
}
/* personnages : carte sombre gravée */
body.in-game[data-game="skull-king"] .sk-card--char {
  background: linear-gradient(168deg, var(--char-1), var(--char-2)); color: #f3e7cb;
  box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.in-game[data-game="skull-king"] .sk-glyph { font-size: calc(var(--w) * .44); line-height: 1; }
body.in-game[data-game="skull-king"] .sk-name {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
  font-size: calc(var(--w) * .13); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 85%, #fff);
}
body.in-game[data-game="skull-king"] .sk-card--king {
  box-shadow: var(--shadow-md), inset 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
body.in-game[data-game="skull-king"] .sk-card--mermaid {
  box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
body.in-game[data-game="skull-king"] .sk-card--mermaid .sk-name { color: color-mix(in srgb, var(--accent-2) 85%, #fff); }
body.in-game[data-game="skull-king"] .sk-card--escape { background: linear-gradient(168deg, #2a2f36, #171b21); }
body.in-game[data-game="skull-king"] .sk-card--escape .sk-name { color: var(--muted); }
/* badge de mode de la Tigresse, visible sur la carte posée */
body.in-game[data-game="skull-king"] .sk-mode {
  position: absolute; top: -8px; right: -6px; height: 18px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm);
}
/* états de la main */
body.in-game[data-game="skull-king"] .sk-card.playable {
  cursor: pointer;
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
body.in-game[data-game="skull-king"] .sk-card.playable:hover { transform: translateY(-8px); }
body.in-game[data-game="skull-king"] .sk-card.locked { filter: grayscale(.85) brightness(.62); opacity: .6; cursor: not-allowed; }
body.in-game[data-game="skull-king"] .sk-card.locked::after {
  content: "🔒"; position: absolute; right: 4px; bottom: 3px; font-size: 11px; filter: none;
}
body.in-game[data-game="skull-king"] .sk-card--mini { --w: 34px; }
body.in-game[data-game="skull-king"] .sk-card--mini.sk-card--jolly::before { content: none; }
body.in-game[data-game="skull-king"] .sk-card--mini .sk-name,
body.in-game[data-game="skull-king"] .sk-card--mini .sk-idx,
body.in-game[data-game="skull-king"] .sk-card--mini .sk-foot { display: none; }

/* --- Bandeau de révélation collective des annonces (début de phase de pli) --- */
body.in-game[data-game="skull-king"] .sk-reveal {
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  padding: 8px 16px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
body.in-game[data-game="skull-king"] .sk-reveal__txt {
  padding: 5px 16px; border-radius: 999px; font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000));
  box-shadow: var(--shadow-md);
}
body.in-game[data-game="skull-king"] .sk-reveal__sub { font-size: 10.5px; font-weight: 700; color: var(--muted); }
body.in-game[data-game="skull-king"] .sk-reveal__sub b { color: var(--text); font-variant-numeric: tabular-nums; }
body.in-game[data-game="skull-king"] .sk-reveal__bids { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* --- Le pli : ordre de jeu + étoile de carte maîtresse --- */
body.in-game[data-game="skull-king"] .sk-trick-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}
body.in-game[data-game="skull-king"] .sk-trick {
  display: flex; gap: 8px; align-items: flex-end; justify-content: center; flex-wrap: nowrap; padding: 0 10px;
}
body.in-game[data-game="skull-king"] .sk-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* Taille des cartes du pli : pilotée en CSS (et pas en style inline) pour que les media queries
   desktop/paysage puissent l'emporter. `--dense` = 5 ou 6 joueurs, on rétrécit plutôt que de
   passer sur deux lignes. */
body.in-game[data-game="skull-king"] .sk-trick .sk-card { --w: 60px; }
body.in-game[data-game="skull-king"] .sk-trick--dense .sk-card { --w: 52px; }
body.in-game[data-game="skull-king"] .sk-played-by {
  font-size: 9.5px; font-weight: 800; color: var(--muted); white-space: nowrap;
  max-width: 72px; overflow: hidden; text-overflow: ellipsis;
}
body.in-game[data-game="skull-king"] .sk-ord {
  position: absolute; top: -7px; left: -6px; z-index: 3; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--muted);
}
body.in-game[data-game="skull-king"] .sk-slot.win .sk-ord { background: var(--accent); color: var(--on-accent); border-color: transparent; }
body.in-game[data-game="skull-king"] .sk-slot.win::after {
  content: "⭐"; position: absolute; top: -14px; right: -8px; font-size: 15px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent));
}
body.in-game[data-game="skull-king"] .sk-slot.win .sk-card {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* --- Encart « dernier pli » --- */
body.in-game[data-game="skull-king"] .sk-last-trick {
  display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); font-size: 10.5px; font-weight: 700; color: var(--muted);
}
body.in-game[data-game="skull-king"] .sk-mini-row { display: flex; gap: 3px; }
body.in-game[data-game="skull-king"] .sk-last-trick b { color: var(--text); }
body.in-game[data-game="skull-king"] .sk-bonus { color: var(--accent); font-variant-numeric: tabular-nums; }

/* --- Événements spectaculaires (Kraken, Baleine) --- */
body.in-game[data-game="skull-king"] .sk-event {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px;
}
body.in-game[data-game="skull-king"] .sk-event__txt {
  padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow-card);
}
body.in-game[data-game="skull-king"] .sk-event__sub { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center; }
body.in-game[data-game="skull-king"] .sk-event--kraken .sk-event__txt {
  background: linear-gradient(180deg, #123b36, #07211e); color: #7fe9da;
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
}
body.in-game[data-game="skull-king"] .sk-event--whale .sk-event__txt {
  background: linear-gradient(180deg, #e8eef2, #bfcbd4); color: #12202a;
}

/* --- Rail équipage : annonce / plis + 4 états de contrat --- */
body.in-game[data-game="skull-king"] .sk-crew { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
body.in-game[data-game="skull-king"] .sk-crew-head {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); padding: 0 2px;
}
body.in-game[data-game="skull-king"] .sk-seat {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; min-height: 44px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
}
body.in-game[data-game="skull-king"] .sk-seat.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.in-game[data-game="skull-king"] .sk-seat.active .sk-nm::before { content: "▸ "; color: var(--accent); }
body.in-game[data-game="skull-king"] .sk-av {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 11px; color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
body.in-game[data-game="skull-king"] .sk-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
body.in-game[data-game="skull-king"] .sk-nm { font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.in-game[data-game="skull-king"] .sk-sc { font-size: 9.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
body.in-game[data-game="skull-king"] .sk-contract {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); background: var(--surface-2);
}
body.in-game[data-game="skull-king"] .sk-st { font-size: 10px; }
body.in-game[data-game="skull-king"] .sk-contract--road { color: var(--muted); }
body.in-game[data-game="skull-king"] .sk-contract--met {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface)); border-color: transparent; color: #f6ecd6;
}
body.in-game[data-game="skull-king"] .sk-contract--lost {
  background: color-mix(in srgb, var(--danger) 24%, var(--surface)); border-color: transparent;
  color: #ffd9d9; text-decoration: line-through;
}
body.in-game[data-game="skull-king"] .sk-contract--zero {
  border-style: dashed; border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
  color: color-mix(in srgb, var(--accent-2) 85%, #fff);
}
body.in-game[data-game="skull-king"] .sk-ally {
  display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; color: #f6ecd6;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
}

/* --- Enchères --- */
body.in-game[data-game="skull-king"] .sk-bid-panel {
  display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: center; height: 100%;
}
body.in-game[data-game="skull-king"] .sk-bid-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
body.in-game[data-game="skull-king"] .sk-bid-sub { font-size: 10.5px; color: var(--muted); font-weight: 700; }
body.in-game[data-game="skull-king"] .sk-bid-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
body.in-game[data-game="skull-king"] .sk-bid {
  min-width: 56px; height: 56px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-variant-numeric: tabular-nums; font-weight: 800;
  font-size: 20px; cursor: pointer; display: grid; place-items: center;
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="skull-king"] .sk-bid:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
body.in-game[data-game="skull-king"] .sk-bid.on {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  color: var(--on-accent); border-color: transparent; box-shadow: var(--shadow-md);
}
body.in-game[data-game="skull-king"] .sk-bid.locked { position: relative; cursor: default; }
body.in-game[data-game="skull-king"] .sk-bid.locked::after { content: "🔒"; position: absolute; top: 2px; right: 4px; font-size: 10px; }
body.in-game[data-game="skull-king"] .sk-bid.off { opacity: .4; cursor: not-allowed; }
body.in-game[data-game="skull-king"] .sk-bidders { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
body.in-game[data-game="skull-king"] .sk-bidder {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
body.in-game[data-game="skull-king"] .sk-bidder.done {
  color: #f6ecd6; background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
body.in-game[data-game="skull-king"] .sk-v { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--accent); }

/* --- Dock : consigne + main --- */
body.in-game[data-game="skull-king"] .sk-dock { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
body.in-game[data-game="skull-king"] .sk-hint {
  display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 0 4px;
}
body.in-game[data-game="skull-king"] .sk-hint b { color: var(--text); }
body.in-game[data-game="skull-king"] .sk-must {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 18%, var(--surface)); border: 1px solid var(--border); color: #d7f5f0;
}
body.in-game[data-game="skull-king"] .sk-hand {
  display: flex; gap: 7px; align-items: flex-end; overflow-x: auto; padding: 10px 4px 4px; scroll-snap-type: x proximity;
}
body.in-game[data-game="skull-king"] .sk-hand .sk-card { scroll-snap-align: center; }

/* --- HUD --- */
body.in-game[data-game="skull-king"] .sk-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
body.in-game[data-game="skull-king"] .sk-chip b { font-variant-numeric: tabular-nums; }
body.in-game[data-game="skull-king"] .sk-chip--turn {
  background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border-color: var(--border-strong);
}
body.in-game[data-game="skull-king"] .sk-chip--wait { color: var(--muted); }
body.in-game[data-game="skull-king"] .sk-chip--contract {
  background: color-mix(in srgb, var(--accent-2) 20%, var(--surface)); border-color: var(--border-strong);
}
body.in-game[data-game="skull-king"] .sk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
body.in-game[data-game="skull-king"] .sk-dot--wait { background: var(--muted-2); box-shadow: none; }

/* --- Modales du plateau (Tigresse, décompte de manche) --- */
body.in-game[data-game="skull-king"] .sk-backdrop {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(4, 8, 12, .58); backdrop-filter: blur(3px);
}
body.in-game[data-game="skull-king"] .sk-modal {
  min-width: 300px; max-width: 460px; padding: 18px; border-radius: var(--r-lg); text-align: center;
  background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow-card);
}
body.in-game[data-game="skull-king"] .sk-modal h3 { margin: 0 0 6px; font-size: 16px; }
body.in-game[data-game="skull-king"] .sk-modal p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
body.in-game[data-game="skull-king"] .sk-choice-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
body.in-game[data-game="skull-king"] .sk-choice {
  min-height: 56px; min-width: 150px; padding: 10px 14px; border-radius: var(--r-lg); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
body.in-game[data-game="skull-king"] .sk-choice:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
body.in-game[data-game="skull-king"] .sk-choice .sk-t { font-size: 14px; font-weight: 800; }
body.in-game[data-game="skull-king"] .sk-choice .sk-d { font-size: 10.5px; color: var(--muted); font-weight: 700; max-width: 150px; }
body.in-game[data-game="skull-king"] .sk-choice--pirate { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
body.in-game[data-game="skull-king"] .sk-choice--escape { background: color-mix(in srgb, var(--muted-2) 18%, var(--surface-2)); }
body.in-game[data-game="skull-king"] .sk-modal-row { display: flex; gap: 8px; justify-content: center; }
body.in-game[data-game="skull-king"] .sk-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
body.in-game[data-game="skull-king"] .sk-btn.ghost { background: transparent; }
body.in-game[data-game="skull-king"] .sk-btn.primary {
  min-height: 52px; padding: 0 22px; border-color: transparent; color: var(--on-accent); font-weight: 800;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: var(--shadow-md);
}

/* --- Décompte de fin de manche : feuille de parchemin --- */
body.in-game[data-game="skull-king"] .sk-recap {
  width: min(660px, 92%); border-radius: var(--r-lg); overflow: hidden; color: var(--ink);
  background: linear-gradient(168deg, var(--parch), var(--parch-2)); box-shadow: var(--shadow-card);
}
body.in-game[data-game="skull-king"] .sk-recap h4 {
  margin: 0; padding: 9px 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(36, 26, 18, .14); border-bottom: 1px solid rgba(36, 26, 18, .2);
}
body.in-game[data-game="skull-king"] .sk-sheet { width: 100%; border-collapse: collapse; font-size: 12px; }
body.in-game[data-game="skull-king"] .sk-sheet th,
body.in-game[data-game="skull-king"] .sk-sheet td {
  padding: 0 8px; height: 27px; text-align: right; font-weight: 700;
  border-bottom: 1px solid rgba(36, 26, 18, .14); font-variant-numeric: tabular-nums;
}
body.in-game[data-game="skull-king"] .sk-sheet th {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px solid rgba(36, 26, 18, .3);
}
body.in-game[data-game="skull-king"] .sk-sheet th.who3,
body.in-game[data-game="skull-king"] .sk-sheet td.who3 { text-align: left; font-weight: 800; }
body.in-game[data-game="skull-king"] .sk-sheet tr.me { background: rgba(217, 164, 65, .26); }
body.in-game[data-game="skull-king"] .sk-sheet td.neg { color: #9b2c2c; }
body.in-game[data-game="skull-king"] .sk-sheet td.pos { color: #1f6b3a; }
body.in-game[data-game="skull-king"] .sk-recap-actions { display: flex; justify-content: center; padding: 10px; }

/* --- Mobile paysage : on compacte pour tenir sans scroll --- */
@media (max-height: 560px) and (orientation: landscape) {
  /* padding-top 34px : hauteur réelle du HUD flottant (top 6 + 28). Écrire le padding en
     raccourci ici écraserait le padding-top global de .table et ferait passer le plateau
     sous les pastilles du HUD. */
  body.in-game[data-game="skull-king"] .table { padding: 34px 7px 6px; gap: 6px; }
  /* Largeurs de la maquette : rail 208px, gouttière 10px. */
  body.in-game[data-game="skull-king"] .sk-board { grid-template-columns: minmax(0, 1fr) 208px; gap: 10px; }
  body.in-game[data-game="skull-king"] .sk-card { --w: 64px; }
  body.in-game[data-game="skull-king"] .sk-trick .sk-card { --w: 56px; }
  body.in-game[data-game="skull-king"] .sk-trick--dense .sk-card { --w: 50px; }
  body.in-game[data-game="skull-king"] .sk-hand { padding: 8px 4px 2px; gap: 7px; }
  /* Sièges pleine taille (valeur de la maquette) jusqu'à 4 joueurs ; à partir de 5 le rail se
     compacte, sinon le dernier siège passait sous le dock. Ils ne sont pas cliquables ici, la
     règle des 44px de cible tactile ne s'applique donc pas. `overflow-y` = garde-fou. */
  body.in-game[data-game="skull-king"] .sk-crew { gap: 5px; overflow-y: auto; }
  body.in-game[data-game="skull-king"] .sk-seat { min-height: 44px; padding: 5px 8px; }
  /* 6 joueurs : 14 (titre) + 6×32 + 5×3 = 221px, dans les ~228px du rail une fois la main
     remontée à la taille de la maquette (64px). */
  body.in-game[data-game="skull-king"] .sk-crew--dense { gap: 3px; }
  body.in-game[data-game="skull-king"] .sk-crew--dense .sk-seat { min-height: 32px; padding: 2px 7px; }
  body.in-game[data-game="skull-king"] .sk-av { width: 24px; height: 24px; font-size: 10px; }
  /* 56px même en paysage : c'est la cible « action primaire » du design system, et le panneau
     d'enchères a la place (titre + rangée + sous-titre + annonceurs ≈ 118px sur 242 dispo). */
  body.in-game[data-game="skull-king"] .sk-bid { min-width: 56px; height: 56px; font-size: 19px; }
  body.in-game[data-game="skull-king"] .sk-recap { width: min(600px, 96%); }
  body.in-game[data-game="skull-king"] .sk-sheet th,
  body.in-game[data-game="skull-king"] .sk-sheet td { height: 24px; }
}

/* --- Desktop : plus d'air, cartes plus grandes --- */
@media (min-width: 1024px) and (min-height: 620px) {
  body.in-game[data-game="skull-king"] .sk-board { grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
  body.in-game[data-game="skull-king"] .sk-center { gap: 14px; }
  body.in-game[data-game="skull-king"] .sk-trick .sk-card { --w: 92px; }
  body.in-game[data-game="skull-king"] .sk-trick--dense .sk-card { --w: 78px; }
  body.in-game[data-game="skull-king"] .sk-hand .sk-card { --w: 76px; }
  body.in-game[data-game="skull-king"] .sk-seat { min-height: 48px; }
  body.in-game[data-game="skull-king"] .sk-bid { min-width: 60px; height: 60px; }
}

/* --- Fin de partie : podium + ex aequo (hors plateau, dans la modale de résultat) --- */
.sk-result { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sk-result__headline { font-size: 17px; font-weight: 800; text-align: center; }
.sk-result__headline.won { color: #d9a441; }
.sk-result__headline.lost { color: var(--muted); }
.sk-exaequo {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, #d9a441 24%, var(--surface, rgba(255, 255, 255, .06)));
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .18));
}
.sk-podium { display: flex; gap: 8px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.sk-step {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  min-width: 104px; height: 86px; padding: 8px 10px; border-radius: 12px 12px 0 0;
  background: var(--surface, rgba(255, 255, 255, .06));
  border: 1px solid var(--border, rgba(255, 255, 255, .1)); border-bottom: none;
}
.sk-podium > .sk-step:nth-child(2) { height: 100px; }
.sk-step.first { background: color-mix(in srgb, #d9a441 22%, var(--surface, rgba(255, 255, 255, .06))); height: 126px; }
.sk-step .sk-rk { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sk-step .sk-av2 {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(180deg, #d9a441, #14b8a6); color: #1a1208;
}
.sk-step .sk-nm2 { font-size: 11.5px; font-weight: 800; }
.sk-step .sk-sc2 { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 800; }
/* 4e joueur et au-delà : liste compacte sous le podium (sinon les marches passaient à la ligne) */
.sk-rest { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 2px; }
.sk-rest__row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--surface, rgba(255, 255, 255, .05));
}
.sk-rest__score { font-variant-numeric: tabular-nums; font-weight: 800; }

/* --- Cover d'accueil : crâne + sabres croisés --- */
.g-skullking { --g: #d9a441; --g2: #14b8a6; }
.art-skullking { position: relative; display: flex; align-items: center; justify-content: center; }
.art-skullking .skull { font-size: 44px; font-style: normal; filter: drop-shadow(0 0 14px rgba(217, 164, 65, .5)); }
.art-skullking .sabre { font-size: 26px; font-style: normal; position: absolute; opacity: .85; }
.art-skullking .sabre.l { transform: translateX(-26px) rotate(-24deg); }
.art-skullking .sabre.r { transform: translateX(26px) rotate(24deg) scaleX(-1); }

/* --- Cover d'accueil « Le code du nom » : loupe d'inspecteur + les deux brigades --- */
.g-codenom { --g: #e0a82e; --g2: #5b6b7a; }
.art-codenom { position: relative; display: flex; align-items: center; justify-content: center; }
.art-codenom .mag { font-size: 44px; font-style: normal; filter: drop-shadow(0 0 14px rgba(224, 168, 46, .5)); }
.art-codenom .s { font-size: 16px; font-style: normal; position: absolute; line-height: 1; }
.art-codenom .s.red { color: #e4483d; transform: translate(-24px, -16px); }
.art-codenom .s.blue { color: #3e7bd6; transform: translate(24px, 18px); }

/* Mouvement réduit : plus d'élévation animée sur les cartes. */
@media (prefers-reduced-motion: reduce) {
  body.in-game[data-game="skull-king"] .sk-card,
  body.in-game[data-game="skull-king"] .sk-bid { transition: none; }
  body.in-game[data-game="skull-king"] .sk-card.playable:hover { transform: none; }
}

/* ============================================================
   LE JEU — RESKIN « OSSUAIRE » : noir & rouge sang, crânes.
   Surcouche posée APRÈS toutes les règles the-game plus haut : elle ne touche
   qu'aux couleurs/textures, jamais aux dimensions ni aux positions (la mise en
   page paysage/desktop réglée plus haut reste valable telle quelle).
   Lisibilité : montante = ROUGE, descendante = OS (blanc cassé) — le sens reste
   aussi porté par ▲/▼ et le libellé, jamais par la seule couleur.
   ============================================================ */
body.in-game[data-game="the-game"] {
  --bg: #050406; --bg-2: #0a0708;
  --primary: #e11d2f; --primary-strong: #9c1020;
  --primary-soft: rgba(225,29,47,.18); --primary-border: rgba(225,29,47,.5);
  --ring: rgba(225,29,47,.45);
  --accent: #e11d2f; --accent-2: #ff6b6b; --on-accent: #17070a;
  --asc: #ff3b3b; --asc-warm: #ff8a8a;      /* montante : sang frais */
  --desc: #d6caba; --desc-warm: #f1e8db;    /* descendante : os */
  --genius: #ff2d55;
  --surface: rgba(255,72,72,.055); --surface-2: rgba(255,72,72,.1);
  --border: rgba(255,90,90,.16); --border-strong: rgba(255,90,90,.34);
  --glass-brd: var(--border); --glass-brd-strong: var(--border-strong);
  --text: #efe3e3; --muted: #ab9291; --muted-2: #7c6162;
  --overlay: #140a0c; --overlay-2: #0a0507;
  --shadow-md: 0 8px 22px rgba(0,0,0,.72);
  --shadow-card: 0 18px 46px rgba(0,0,0,.8);
  /* Crâne réutilisé partout (masque : la couleur vient de background-color). */
  --skull: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23fff' d='M32 3C17.6 3 6 13.9 6 27.4c0 7.6 3.6 13 8.6 16.6V52c0 3 2.4 5.4 5.4 5.4h5.2v-6.2h3.6v6.2h6.4v-6.2h3.6v6.2h5.2c3 0 5.4-2.4 5.4-5.4v-8c5-3.6 8.6-9 8.6-16.6C58 13.9 46.4 3 32 3z'/%3E%3Cellipse cx='21.5' cy='28' rx='7.5' ry='8.6' fill='%23000'/%3E%3Cellipse cx='42.5' cy='28' rx='7.5' ry='8.6' fill='%23000'/%3E%3Cpath d='M32 34.5l-4.6 9.2h9.2z' fill='%23000'/%3E%3C/svg%3E");
}

/* --- Le caveau : noir profond, brume rouge, vignette, grain --- */
body.in-game[data-game="the-game"] { background: #050406; }
body.in-game[data-game="the-game"] .page-game.active {
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(225,29,47,.22), transparent 62%),
    radial-gradient(90% 60% at 50% 118%, rgba(120,8,18,.28), transparent 60%),
    radial-gradient(140% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.72) 100%),
    repeating-linear-gradient(107deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    #050406;
}

/* --- Crâne géant en filigrane derrière les piles --- */
body.in-game[data-game="the-game"] .jeu-board::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: min(52vh, 340px); height: min(52vh, 340px);
  background-color: #ff2a2a;
  -webkit-mask: var(--skull) center / contain no-repeat;
  mask: var(--skull) center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
  animation: tg-breathe 7s ease-in-out infinite;
}
body.in-game[data-game="the-game"] .jeu-board::before {
  background: linear-gradient(180deg, transparent, rgba(255,60,60,.35), transparent);
}
body.in-game[data-game="the-game"] .pile { z-index: 1; }
@keyframes tg-breathe {
  0%, 100% { opacity: .05; transform: scale(1); }
  50% { opacity: .1; transform: scale(1.03); }
}

/* --- Monolithes = stèles : pierre noire, veines rouges, crâne gravé --- */
body.in-game[data-game="the-game"] .monolith {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(64deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #141013, #08060a);
  border-color: rgba(255,90,90,.28);
}
body.in-game[data-game="the-game"] .monolith .val {
  color: #f5eaea;
  text-shadow: 0 0 18px rgba(225,29,47,.55), 0 2px 0 rgba(0,0,0,.6);
}
body.in-game[data-game="the-game"] .monolith .idx { color: rgba(255,140,140,.72); }
/* Crâne gravé, centré sur toute la stèle (::after est libre ici : la flèche ▲/▼
   des règles plus haut utilise ::before). Les chiffres repassent au-dessus. */
body.in-game[data-game="the-game"] .monolith::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 92%; height: 92%;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  -webkit-mask: var(--skull) center / contain no-repeat;
  mask: var(--skull) center / contain no-repeat;
  opacity: .13;
  pointer-events: none;
  z-index: 1;
}
body.in-game[data-game="the-game"] .monolith > .val,
body.in-game[data-game="the-game"] .monolith > .idx { position: relative; z-index: 2; }
body.in-game[data-game="the-game"] .pile.asc .monolith { color: var(--asc); }
body.in-game[data-game="the-game"] .pile.desc .monolith { color: var(--desc); }
/* La pile ascendante saigne par le bas, la descendante blanchit par le haut. */
body.in-game[data-game="the-game"] .pile.asc .monolith {
  box-shadow: var(--shadow-card), 0 0 34px -6px rgba(255,59,59,.62),
    inset 0 -30px 44px -20px rgba(255,59,59,.6);
}
body.in-game[data-game="the-game"] .pile.desc .monolith {
  box-shadow: var(--shadow-card), 0 0 30px -8px rgba(214,202,186,.4),
    inset 0 30px 44px -22px rgba(214,202,186,.42);
}
body.in-game[data-game="the-game"] .pile-head { color: var(--muted); }
body.in-game[data-game="the-game"] .hint {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,90,90,.2);
}
body.in-game[data-game="the-game"] .hint .g10 { color: var(--genius); }
body.in-game[data-game="the-game"] .hint .g10::before { content: "\2620 "; }

/* --- Cartes en main : ossements gravés d'encre noire --- */
body.in-game[data-game="the-game"] .jeu-card {
  background:
    repeating-linear-gradient(84deg, rgba(90,60,55,.08) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #ece4d6, #c9bcaa);
  color: #1a0d0f;
  border: 1px solid rgba(80,40,40,.3);
}
body.in-game[data-game="the-game"] .jeu-card .idx { color: #5b2b2b; }
/* Jouable : halo d'os (le vert du thème générique jurait avec le caveau). */
body.in-game[data-game="the-game"] .jeu-card.playable {
  box-shadow: var(--shadow-md), 0 0 0 2px rgba(241,232,219,.85), 0 0 22px -4px rgba(241,232,219,.5);
}
body.in-game[data-game="the-game"] .jeu-card.playable::after {
  background: #f1e8db;
  box-shadow: 0 0 0 3px rgba(20,10,12,.75), 0 0 10px rgba(241,232,219,.9);
}
/* Injouable : la carte est morte — crâne au lieu du cadenas. */
body.in-game[data-game="the-game"] .jeu-card.unplayable {
  filter: grayscale(.75) brightness(.6) sepia(.25);
  opacity: .55;
}
body.in-game[data-game="the-game"] .jeu-card.unplayable::after {
  content: "\2620";
  color: #2a1013;
  opacity: .85;
  font-size: 12px;
}
/* Coup de génie : la carte saigne. */
body.in-game[data-game="the-game"] .jeu-card.genius {
  border-color: var(--genius);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--genius), 0 0 26px -2px rgba(255,45,85,.75);
  animation: tg-pulse 2.4s ease-in-out infinite;
}
body.in-game[data-game="the-game"] .jeu-card.genius .g-badge {
  background: linear-gradient(180deg, #ff2d55, #8d0b1c);
  color: #fff;
}
body.in-game[data-game="the-game"] .jeu-card.genius .g-badge::before { content: "\2620 "; }
body.in-game[data-game="the-game"] .jeu-card.genius .g-sub { color: #8d0b1c; }
@keyframes tg-pulse {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 2px var(--genius), 0 0 20px -4px rgba(255,45,85,.6); }
  50% { box-shadow: var(--shadow-md), 0 0 0 2px var(--genius), 0 0 34px 0 rgba(255,45,85,.9); }
}

/* --- HUD & boutons : laque noire, liseré sang --- */
body.in-game[data-game="the-game"] .game-hud .pill {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,90,90,.22);
}
body.in-game[data-game="the-game"] .game-hud .pill--turn {
  background: linear-gradient(180deg, rgba(225,29,47,.5), rgba(120,8,18,.5));
  border-color: rgba(255,90,90,.55);
}
body.in-game[data-game="the-game"] .game-hud .mini-back {
  border-color: rgba(255,90,90,.3);
  background: repeating-linear-gradient(45deg, #1a0e11, #1a0e11 4px, #2a1216 4px, #2a1216 8px);
}
body.in-game[data-game="the-game"] .jeu-hand .turn-btn.ready {
  background: linear-gradient(180deg, #e11d2f, #6d0a16);
  color: #fff;
  box-shadow: var(--shadow-md), 0 0 22px -6px rgba(225,29,47,.85);
}
body.in-game[data-game="the-game"] .jeu-hand .turn-btn.ready::before { content: "\2620 "; }
body.in-game[data-game="the-game"] .hand-head .label { color: var(--muted); letter-spacing: .1em; }

/* Mouvement réduit : le caveau cesse de respirer et de battre. */
@media (prefers-reduced-motion: reduce) {
  body.in-game[data-game="the-game"] .jeu-board::after,
  body.in-game[data-game="the-game"] .jeu-card.genius { animation: none; }
}

/* Le halo "cible du coup de génie" (.pile.target, cf. règle plus haut dans ce fichier, injectée par
   applyCardSelection() dans main.js) doit primer sur le halo directionnel asc/desc ci-dessus : même
   spécificité (pile+classe+monolith), donc on la réaffirme APRÈS pour gagner la cascade. */
body.in-game[data-game="the-game"] .pile.target .monolith {
  border-color: transparent;
  box-shadow: var(--shadow-card), 0 0 0 2px var(--genius), 0 0 28px -2px rgba(255,45,85,.7);
}

/* --- Accueil : la tuile et la cover suivent la même identité (rouge / os) --- */
.g-thegame { --g: #e11d2f; --g2: #d6caba; }
.hero-cover.thegame { background: linear-gradient(120deg, #0a0708, #e11d2f 140%); }
.art-thegame i:nth-child(1),
.art-thegame i:nth-child(2) { background: linear-gradient(180deg, #ff3b3b, #6d0a16); }
.art-thegame i:nth-child(3),
.art-thegame i:nth-child(4) { background: linear-gradient(180deg, #ece4d6, #9c9082); }

/* MB-SOUL-START (bloc régénéré par sync_mockup.py — ne pas éditer à la main) */
/* ============================================================
   1 000 000 MÈTRES — GRAND JOUR, STYLE DESSIN ANIMÉ
   Le jeu quitte le thème sombre commun : ciel bleu, soleil, collines, et une vraie route
   bordée d'herbe et de buissons sur laquelle roulent les voitures. Couleurs du VRAI jeu
   (rouge = mauvais, vert = bon, cartes crème, panneaux routiers français), traits épais et
   ombres franches façon jouet.
   Placée en FIN de fichier : prime sur la section Mille Bornes précédente à spécificité égale,
   sans la réécrire. Tout est scopé body.in-game[data-game="mille-bornes"] : les autres jeux
   restent en sombre, aucun risque de régression.
   ============================================================ */
body.in-game[data-game="mille-bornes"] {
  /* --- Palette du jeu réel (signalisation française) --- */
  --mb-red: #e11d2e;
  --mb-red-deep: #a30f1d;
  --mb-green: #14a85a;
  --mb-green-deep: #0a7a40;
  --mb-blue: #1b4ea0;
  --mb-yellow: #ffcc00;
  --mb-amber: #ff8a00;
  --mb-paper: #fffdf5;        /* crème des cartes */
  --mb-paper-2: #f2e7cd;
  --mb-ink: #17252e;          /* le trait, façon dessin animé */
  /* --- Décor --- */
  --sky: #7ecbff;
  --sky-2: #b9e7ff;
  --grass: #74d84f;
  --grass-2: #46b447;
  --asphalt: #6f7a86;
  --asphalt-2: #5c6672;

  /* --- On repasse TOUS les jetons de la coque en clair (le reste de l'app suit tout seul) --- */
  --bg: var(--sky); --bg-2: var(--sky-2);
  --surface: #ffffff; --surface-2: #f4faff;
  --border: rgba(23, 37, 46, .22); --border-strong: rgba(23, 37, 46, .45);
  --glass-brd: var(--border); --glass-brd-strong: var(--border-strong);
  --text: #17252e; --muted: #55707f; --muted-2: #8297a3;
  --primary: var(--mb-green); --primary-strong: var(--mb-green-deep);
  --primary-soft: #dcf6e6; --primary-border: #7fd7a6; --ring: rgba(20,168,90,.4);
  --ok: var(--mb-green); --ok-soft: #dcf6e6; --danger: var(--mb-red); --warn: var(--mb-amber);
  --accent: var(--mb-green); --accent-2: var(--mb-yellow); --on-accent: #ffffff;
  /* Ombres franches (pas de flou diffus) : c'est ce qui donne le côté jouet */
  --shadow-sm: 0 2px 0 rgba(23,37,46,.14);
  --shadow-md: 0 4px 0 rgba(23,37,46,.18);
  --shadow-card: 0 8px 22px rgba(23,37,46,.28);
  --e1: var(--shadow-sm); --e2: var(--shadow-md); --e3: var(--shadow-card);
  --glow: 0 0 0 3px var(--mb-yellow), 0 6px 0 rgba(23,37,46,.18);

  /* Typo « panneau » : DIN sur Windows (Bahnschrift) / macOS (DIN Alternate), sinon condensée */
  --mb-display: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Haettenschweiler", Impact, var(--font);
  --lane-h: 15px;
}

/* ---------- LE DÉCOR : ciel, soleil, nuages, collines ---------- */
body.in-game[data-game="mille-bornes"] {
  background:
    /* soleil + halo */
    radial-gradient(circle at 88% 12%, #fff3a8 0 3.2%, rgba(255,243,168,.55) 3.2% 5%, transparent 5.2%),
    /* nuages (trois bouffées rondes chacun) */
    radial-gradient(26px 26px at 14% 16%, #fff 98%, transparent 100%),
    radial-gradient(34px 34px at 18% 14%, #fff 98%, transparent 100%),
    radial-gradient(24px 24px at 22% 17%, #fff 98%, transparent 100%),
    radial-gradient(20px 20px at 62% 9%, #fff 98%, transparent 100%),
    radial-gradient(28px 28px at 66% 7%, #fff 98%, transparent 100%),
    radial-gradient(18px 18px at 70% 10%, #fff 98%, transparent 100%),
    /* collines au fond */
    radial-gradient(60% 26% at 12% 100%, var(--grass-2) 0 99%, transparent 100%),
    radial-gradient(70% 30% at 78% 100%, var(--grass-2) 0 99%, transparent 100%),
    radial-gradient(90% 34% at 50% 104%, var(--grass) 0 99%, transparent 100%),
    /* ciel */
    linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 62%, #e8f8d8 100%);
  background-attachment: fixed;
  color: var(--text);
}
/* La coque sombre posait un voile violet/noir par-dessus : on le retire. */
body.in-game[data-game="mille-bornes"] .page-game.active { background: none; }
/* Le raccourci `padding` écrasait le `padding-top: 40px` que `body.in-game .table` réserve au
   HUD flottant (barre absolue à `top: 6px`) : la barre retombait sur le plateau. On garde donc
   ce retrait haut ici, et on ne le relâche qu'au format desktop, où le HUD repasse dans le flux. */
body.in-game[data-game="mille-bornes"] .table {
  background: none; border: 0; box-shadow: none; padding: 40px 0 0;
}
@media (min-width: 721px) and (min-height: 561px) {
  body.in-game[data-game="mille-bornes"] .table { padding-top: 8px; }
}

/* ---------- LE PLATEAU = UNE SCÈNE DE ROUTE ----------
   Bande de ciel avec nuages et soleil en haut, herbe fleurie et buissons en bas, bitume au
   milieu : le plateau n'est plus un cadre, c'est le paysage qu'on traverse.
   `--verge` pilote À LA FOIS la hauteur des bandes et le rembourrage, pour qu'un décor plus
   fin (mobile paysage) rende sa place au jeu sans désaligner le dessin. */
body.in-game[data-game="mille-bornes"] .board--mb {
  --verge: 30px;
  background:
    /* soleil dans la bande de ciel */
    radial-gradient(circle at calc(100% - 46px) calc(var(--verge) * .5), #ffe14d 0 11px, rgba(255,225,77,.45) 11px 15px, transparent 16px),
    /* deux nuages */
    radial-gradient(11px 11px at 64px calc(var(--verge) * .55), #fff 98%, transparent 100%),
    radial-gradient(15px 15px at 82px calc(var(--verge) * .45), #fff 98%, transparent 100%),
    radial-gradient(10px 11px at 100px calc(var(--verge) * .6), #fff 98%, transparent 100%),
    radial-gradient(10px 10px at 300px calc(var(--verge) * .6), #fff 98%, transparent 100%),
    radial-gradient(14px 14px at 318px calc(var(--verge) * .5), #fff 98%, transparent 100%),
    radial-gradient(9px 9px at 334px calc(var(--verge) * .62), #fff 98%, transparent 100%),
    /* le ciel */
    linear-gradient(180deg, #9fdcff 0 var(--verge), transparent var(--verge)),
    /* petites fleurs dans l'herbe du bas */
    radial-gradient(2.5px 2.5px at 22px calc(100% - 7px), #fff6a8 96%, transparent 100%) 0 100% / 41px var(--verge) repeat-x,
    /* buissons du bas */
    radial-gradient(11px 11px at 40px calc(100% - 12px), var(--grass-2) 96%, transparent 100%) 0 100% / 58px var(--verge) repeat-x,
    /* herbe du bas */
    linear-gradient(0deg, var(--grass) 0 var(--verge), transparent var(--verge)),
    /* lignes de rive blanches */
    linear-gradient(0deg, transparent var(--verge), #fdfefe var(--verge) calc(var(--verge) + 4px), transparent calc(var(--verge) + 4px)),
    linear-gradient(180deg, transparent var(--verge), #fdfefe var(--verge) calc(var(--verge) + 4px), transparent calc(var(--verge) + 4px)),
    /* bitume */
    linear-gradient(180deg, var(--asphalt), var(--asphalt-2));
  border: 3px solid var(--mb-ink);
  border-radius: 22px;
  box-shadow: 0 6px 0 rgba(23,37,46,.22);
  padding: calc(var(--verge) + 6px) 10px;
}
/* Bande médiane blanche qui DÉFILE : la route avance sous les joueurs. */
body.in-game[data-game="mille-bornes"] .board--mb::before {
  width: 8px; opacity: 1; border-radius: 0;
  top: calc(var(--verge) + 6px); bottom: calc(var(--verge) + 6px);
  background: repeating-linear-gradient(180deg, #fdfefe 0 18px, transparent 18px 36px);
  filter: none;
  animation: mb-road 1.6s linear infinite;
}
@keyframes mb-road { to { background-position: 0 36px; } }
body.in-game[data-game="mille-bornes"] .board--mb.dimmed { filter: saturate(.5) brightness(.85); }

/* ---------- Tableaux de bord = panneaux blancs posés sur la route ---------- */
body.in-game[data-game="mille-bornes"] .dash,
body.in-game[data-game="mille-bornes"] .me {
  background: #ffffff;
  border: 2.5px solid var(--mb-ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(23,37,46,.28);
}
body.in-game[data-game="mille-bornes"] .me {
  background: linear-gradient(180deg, #ffffff 0 62%, #eafbe9);
  align-content: start; gap: 6px; padding: 9px 12px;
  /* ma zone ne se comprime pas : les cartes posées sur moi ne doivent jamais être rognées */
  flex: 0 0 auto;
}
body.in-game[data-game="mille-bornes"] .dash.active,
body.in-game[data-game="mille-bornes"] .me.active {
  border-color: var(--mb-green);
  box-shadow: 0 4px 0 var(--mb-green-deep), 0 0 0 4px rgba(20,168,90,.22);
}
body.in-game[data-game="mille-bornes"] .col-opp,
body.in-game[data-game="mille-bornes"] .col-me { gap: 5px; }
body.in-game[data-game="mille-bornes"] .coltitle {
  font-family: var(--mb-display); letter-spacing: .14em; line-height: 1.1;
  color: #ffffff; text-shadow: 0 1px 2px rgba(23,37,46,.55);
}
body.in-game[data-game="mille-bornes"] .coltitle.targeting { color: #ffe3e3; }
/* Deux lignes seulement : identité (feu + nom + panneaux + odomètre) puis la voie. */
body.in-game[data-game="mille-bornes"] .dash { gap: 5px; padding: 6px 9px; }
/* Une seule ligne, jamais deux : si la place manque, ce sont les puces qui s'ellipsent, pas la
   hauteur du tableau de bord qui double (le budget vertical du paysage court est déjà tenu). */
body.in-game[data-game="mille-bornes"] .dash .head { gap: 6px; flex-wrap: nowrap; }
/* `min-width: 0` partout sur la chaîne : sans ça, une ligne d'identité en `nowrap` impose sa
   largeur minimale au tableau de bord, qui déborde alors de sa colonne de grille et passe
   par-dessus ma zone. Ici c'est le nom qui cède (ellipse), jamais la mise en page. */
body.in-game[data-game="mille-bornes"] .dash,
body.in-game[data-game="mille-bornes"] .me,
body.in-game[data-game="mille-bornes"] .dash .head,
body.in-game[data-game="mille-bornes"] .me .head { min-width: 0; }
body.in-game[data-game="mille-bornes"] .nm {
  font-family: var(--mb-display); letter-spacing: .02em; font-size: 14px; color: var(--mb-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11ch;
  flex: 0 1 auto; min-width: 3ch;
}
body.in-game[data-game="mille-bornes"] .me .nm { font-size: 16px; }

/* ---------- Odomètre mécanique (compteur à cylindres) ---------- */
body.in-game[data-game="mille-bornes"] .odo {
  background: #17252e;
  border: 2px solid var(--mb-ink); border-radius: 6px; padding: 2px 7px;
  color: #fdfefe; font-family: var(--mb-display); text-shadow: none;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}
body.in-game[data-game="mille-bornes"] .odo .big { letter-spacing: .14em; font-size: 15px; color: #fff; }
body.in-game[data-game="mille-bornes"] .me .odo .big { font-size: 22px; }
body.in-game[data-game="mille-bornes"] .odo .u,
body.in-game[data-game="mille-bornes"] .odo .tot { color: #9fb3bf; }
/* Chez les adversaires, l'objectif (/1000) est du bruit : il est déjà dans le HUD, et ces pixels
   servent à afficher en entier la carte qu'ils subissent. Ma zone, elle, le garde. */
body.in-game[data-game="mille-bornes"] .dash .odo .tot { display: none; }
body.in-game[data-game="mille-bornes"] .odo.near { color: var(--mb-yellow); text-shadow: none; }
body.in-game[data-game="mille-bornes"] .odo.near .big { color: var(--mb-yellow); }

/* ---------- La jauge est une VOIE : bitume, marquage, bornes, damier, voiture ---------- */
body.in-game[data-game="mille-bornes"] .gauge {
  height: var(--lane-h); border-radius: 999px; overflow: visible;
  background:
    repeating-linear-gradient(90deg, #fdfefe 0 7px, transparent 7px 17px) center / 100% 2px no-repeat,
    linear-gradient(180deg, #77828f, #626c78);
  border: 2px solid var(--mb-ink);
  box-shadow: none;
}
/* Distance parcourue = route déjà avalée, en vert */
body.in-game[data-game="mille-bornes"] .gauge > .fill {
  border-radius: 999px 0 0 999px;
  background: linear-gradient(180deg, #37d27a, var(--mb-green));
  box-shadow: none;
}
/* Bornes tous les 100 m */
body.in-game[data-game="mille-bornes"] .gauge > .ticks {
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(255,255,255,.55) calc(10% - 2px) 10%);
}
body.in-game[data-game="mille-bornes"] .gauge > .finish { width: 9px; opacity: 1; box-shadow: none; }
/* LA voiture : posée sur sa distance, elle glisse quand le joueur avance */
body.in-game[data-game="mille-bornes"] .lane-car {
  position: absolute; top: 50%; transform: translate(-50%, -55%); z-index: 3;
  font-size: calc(var(--lane-h) * 1.15); line-height: 1; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(23,37,46,.5));
  transition: left .55s cubic-bezier(.2,.7,.2,1);
}
body.in-game[data-game="mille-bornes"] .me .gauge { --lane-h: 20px; }

/* ---------- Vrai feu tricolore vertical (3 lampes) ----------
   Il prend la place de la vignette voiture dans l'en-tête du tableau de bord : l'état du joueur
   se lit comme un vrai feu, et ça ne coûte pas une ligne de plus (la voiture, elle, roule sur la voie). */
body.in-game[data-game="mille-bornes"] .sem {
  flex: none; flex-direction: column; gap: 2px; padding: 3px; border-radius: 5px;
  background: #2b3a45; border: 2px solid var(--mb-ink); box-shadow: none;
}
body.in-game[data-game="mille-bornes"] .sem .lamp { width: 7px; height: 7px; background: #55666f; }
body.in-game[data-game="mille-bornes"] .me .sem .lamp { width: 8px; height: 8px; }
body.in-game[data-game="mille-bornes"] .sem.go   .lamp.g { background: #2bee8b; box-shadow: 0 0 7px #2bee8b; }
body.in-game[data-game="mille-bornes"] .sem.warn .lamp.o { background: var(--mb-amber); box-shadow: 0 0 7px var(--mb-amber); }
body.in-game[data-game="mille-bornes"] .sem.stop .lamp.r { background: #ff4d5e; box-shadow: 0 0 7px #ff4d5e; }

/* Étiquettes d'état : pastilles pleines, lisibles sur blanc */
body.in-game[data-game="mille-bornes"] .state {
  font-family: var(--mb-display); letter-spacing: .04em; border-width: 2px; border-style: solid;
}
body.in-game[data-game="mille-bornes"] .state.roll { color: #0a5c34; background: #d8f8e5; border-color: #5fd08f; }
body.in-game[data-game="mille-bornes"] .state.stop,
body.in-game[data-game="mille-bornes"] .state.haz  { color: #90101d; background: #ffe0e3; border-color: #f2828d; }
body.in-game[data-game="mille-bornes"] .state.lim  { color: #8a4a00; background: #ffeccc; border-color: #ffb454; }

/* Ordre de passage : la colonne se lit de haut en bas dans l'ordre du tour de table, et chaque
   tableau de bord porte son rang. Le moteur tourne toujours dans le même sens, donc ce rang est
   une promesse fiable (« Suivant » joue bien juste après). */
body.in-game[data-game="mille-bornes"] .rank {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mb-display); font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  color: #55707f; background: #eef4f8; border: 2px solid #cfdde6;
}
body.in-game[data-game="mille-bornes"] .rank sup { font-size: .8em; line-height: 0; }
body.in-game[data-game="mille-bornes"] .rank.now {
  color: #fff; background: var(--mb-green); border-color: var(--mb-green-deep);
}
body.in-game[data-game="mille-bornes"] .rank.reacting {
  color: var(--mb-ink); background: var(--mb-yellow); border-color: #d9a900;
}
/* Le prochain à jouer est signalé, sans voler la vedette à celui qui a la main. */
body.in-game[data-game="mille-bornes"] .rank.next {
  color: #0a5c34; background: #d8f8e5; border-color: #5fd08f;
}
body.in-game[data-game="mille-bornes"] .me .rank { font-size: 10.5px; padding: 3px 9px; }

/* Ce qui a été posé sur un adversaire, sur la ligne d'identité : icône de la carte + son nom
   (savoir QUI subit QUOI est l'information de jeu la plus utile du plateau). */
body.in-game[data-game="mille-bornes"] .sgns {
  display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow: hidden;
}
body.in-game[data-game="mille-bornes"] .dash .state {
  font-size: 10.5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
/* l'odomètre garde sa largeur : c'est le chiffre qu'on lit en premier */
body.in-game[data-game="mille-bornes"] .odo { flex: none; }
body.in-game[data-game="mille-bornes"] .dash .boots { margin-left: 0; }

/* Ma route : les cartes réellement posées sur moi, avec leur intitulé de pile */
body.in-game[data-game="mille-bornes"] .tablerow {
  display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
}
body.in-game[data-game="mille-bornes"] .tablerow .lbl {
  font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-family: var(--mb-display); align-self: center;
}
/* `align-items: start` : sans ça, l'item de grille s'étire en hauteur et la carte s'allonge. */
body.in-game[data-game="mille-bornes"] .slot { display: grid; justify-items: center; align-items: start; gap: 1px; }
/* Assez grandes pour être lues, assez petites pour tenir sous la voie en mobile paysage */
body.in-game[data-game="mille-bornes"] .tablerow .pcard--mini { --w: 30px; }
body.in-game[data-game="mille-bornes"] .slot-lbl {
  font-size: 9px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em;
}
/* Le blocage en clair : la carte subie ET le remède à jouer */
body.in-game[data-game="mille-bornes"] .blocked {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; font-family: var(--mb-display); letter-spacing: .03em;
  color: #90101d; background: #ffe0e3; border: 2px solid #f2828d;
}
body.in-game[data-game="mille-bornes"] .blocked b { color: #5e0a13; font-weight: 700; }

/* Bottes = pastilles jaune priorité */
body.in-game[data-game="mille-bornes"] .dash .boot { width: 17px; height: 17px; font-size: 10px; border-radius: 4px; }
body.in-game[data-game="mille-bornes"] .boot {
  background: linear-gradient(160deg, #ffe680, var(--mb-yellow));
  border: 2px solid var(--mb-ink); color: var(--mb-ink); border-radius: 5px;
  box-shadow: none;
}
body.in-game[data-game="mille-bornes"] .boot.ghost { background: #eef4f8; border-style: dashed; border-color: #cfdde6; }

/* ============================================================
   LES CARTES — panneaux routiers sur papier crème (le vrai deck)
   Face crème, bandeau de famille en haut, panneau au centre
   (disque cerclé rouge/vert = danger/remède, losange jaune = botte),
   nom en cartouche plein en bas.
   ============================================================ */
body.in-game[data-game="mille-bornes"] .pcard {
  --fam: #6b7986; --fam-ink: #fff;
  padding: calc(var(--w) * .1) 3px calc(var(--w) * .22);
  border: 2px solid var(--mb-ink); border-radius: calc(var(--w) * .13);
  color: var(--mb-ink);
  background:
    linear-gradient(var(--fam), var(--fam)) top / 100% calc(var(--w) * .09) no-repeat,
    linear-gradient(180deg, var(--mb-paper), var(--mb-paper-2));
  box-shadow: 0 4px 0 rgba(23,37,46,.3);
}
body.in-game[data-game="mille-bornes"] .pcard--mb-distance { --fam: var(--mb-blue); }
body.in-game[data-game="mille-bornes"] .pcard--mb-hazard   { --fam: var(--mb-red); }
body.in-game[data-game="mille-bornes"] .pcard--mb-remedy   { --fam: var(--mb-green); }
body.in-game[data-game="mille-bornes"] .pcard--mb-safety   { --fam: var(--mb-yellow); --fam-ink: #3d2f00; }
/* Botte : bandes vertes en diagonale dans les coins, comme sur les cartes d'origine */
body.in-game[data-game="mille-bornes"] .pcard--mb-safety {
  background:
    linear-gradient(135deg, var(--mb-green) 0 9%, transparent 9%),
    linear-gradient(-45deg, var(--mb-green) 0 9%, transparent 9%),
    linear-gradient(var(--fam), var(--fam)) top / 100% calc(var(--w) * .09) no-repeat,
    linear-gradient(180deg, #fffaea, #f7edd2);
}

/* Cartouche de nom en bas, aux couleurs de la famille */
body.in-game[data-game="mille-bornes"] .pcard .pc-name {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none;
  padding: calc(var(--w) * .04) 2px calc(var(--w) * .05);
  background: var(--fam); color: var(--fam-ink);
  font-family: var(--mb-display); font-size: calc(var(--w) * .125); font-weight: 700;
  letter-spacing: 0; text-transform: uppercase; opacity: 1;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}

/* Le panneau central : disque blanc cerclé (dangers/remèdes) */
body.in-game[data-game="mille-bornes"] .pcard .pc-sign {
  position: relative; display: grid; place-items: center; overflow: hidden; z-index: 2;
  width: calc(var(--w) * .58); height: calc(var(--w) * .58); border-radius: 50%;
  background: #fff; border: calc(var(--w) * .075) solid var(--fam);
  box-shadow: 0 2px 0 rgba(23,37,46,.25);
}
body.in-game[data-game="mille-bornes"] .pcard .pc-sign .pc-ico {
  font-size: calc(var(--w) * .28); filter: none; line-height: 1;
}
body.in-game[data-game="mille-bornes"] .pcard .pc-num {
  font-family: var(--mb-display); font-weight: 700; font-size: calc(var(--w) * .3);
  color: var(--mb-ink); line-height: 1; letter-spacing: -.02em;
}
/* Botte : losange jaune de priorité (panneau français), icône redressée */
body.in-game[data-game="mille-bornes"] .pcard--mb-safety .pc-sign {
  border-radius: calc(var(--w) * .07); transform: rotate(45deg); overflow: visible;
  background: linear-gradient(160deg, #ffe680, var(--mb-yellow)); border-color: var(--mb-ink);
  border-width: calc(var(--w) * .035); width: calc(var(--w) * .5); height: calc(var(--w) * .5);
}
body.in-game[data-game="mille-bornes"] .pcard--mb-safety .pc-sign > * { transform: rotate(-45deg); }
/* Feux : le disque devient la LENTILLE du feu (verre plein + reflet), pas un pictogramme */
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="RED_LIGHT"] .pc-sign,
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="GREEN_LIGHT"] .pc-sign {
  border-color: var(--mb-ink); border-width: calc(var(--w) * .05);
}
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="RED_LIGHT"] .pc-sign {
  background: radial-gradient(circle at 34% 28%, #ff9aa2, var(--mb-red) 62%, var(--mb-red-deep));
}
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="GREEN_LIGHT"] .pc-sign {
  background: radial-gradient(circle at 34% 28%, #96ffc6, var(--mb-green) 62%, var(--mb-green-deep));
}
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="RED_LIGHT"] .pc-ico,
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="GREEN_LIGHT"] .pc-ico { display: none; }

/* Fin de limitation : disque barré de noir, comme le vrai panneau */
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="END_LIMIT"] .pc-sign { border-color: var(--mb-ink); }
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="END_LIMIT"] .pc-sign::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--mb-ink) 3px 5px); opacity: .8;
}
body.in-game[data-game="mille-bornes"] .pcard[data-mb-rank="END_LIMIT"] .pc-num { color: #7b8a93; }

/* Carte BORNES : chiffre géant bleu, borne kilométrique et faune du vrai jeu */
body.in-game[data-game="mille-bornes"] .pcard--mb-distance .pc-val {
  font-family: var(--mb-display); font-size: calc(var(--w) * .56); color: var(--mb-blue);
  letter-spacing: -.03em; font-weight: 700;
}
/* Le chiffre en coin ferait doublon avec le chiffre géant, et il se cognerait à la pastille
   « jouable » : la borne + le grand nombre suffisent à lire la carte. */
body.in-game[data-game="mille-bornes"] .pcard--mb-distance .pc-corner { display: none; }
body.in-game[data-game="mille-bornes"] .pcard .pc-cap {
  position: absolute; z-index: 2; top: calc(var(--w) * .15); right: calc(var(--w) * .1);
  width: calc(var(--w) * .13); height: calc(var(--w) * .21);
  border-radius: calc(var(--w) * .07) calc(var(--w) * .07) 1px 1px;
  background: linear-gradient(180deg, var(--mb-red) 0 40%, #fff 40%);
  border: 1.5px solid var(--mb-ink);
}
body.in-game[data-game="mille-bornes"] .pcard .pc-fauna {
  position: absolute; z-index: 2; left: calc(var(--w) * .08); bottom: calc(var(--w) * .26);
  font-size: calc(var(--w) * .16); opacity: .8;
}

/* Mini-cartes (cartes posées, défausse) : que le panneau */
body.in-game[data-game="mille-bornes"] .pcard--mini { padding: 2px; box-shadow: 0 2px 0 rgba(23,37,46,.28); }
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-cap,
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-fauna { display: none; }
/* Taille en % de --w (jamais en % de la carte, qui est en 5/7 : le disque deviendrait un ovale) */
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-sign {
  width: calc(var(--w) * .64); height: calc(var(--w) * .64); border-width: calc(var(--w) * .08);
}
body.in-game[data-game="mille-bornes"] .pcard--mini.pcard--mb-safety .pc-sign {
  width: calc(var(--w) * .56); height: calc(var(--w) * .56); border-width: calc(var(--w) * .05);
}
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-sign .pc-ico { font-size: calc(var(--w) * .32); }
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-num { font-size: calc(var(--w) * .34); }
body.in-game[data-game="mille-bornes"] .pcard--mini .pc-val { font-size: calc(var(--w) * .48); }

/* ---------- Affordances : jouable = pastille verte, injouable = grisé ---------- */
body.in-game[data-game="mille-bornes"] .pcard.playable {
  box-shadow: 0 4px 0 var(--mb-green-deep), 0 0 0 3px var(--mb-green);
}
body.in-game[data-game="mille-bornes"] .pcard.playable::after {
  content: ""; right: auto; left: calc(var(--w) * .07); top: calc(var(--w) * .07); bottom: auto;
  width: calc(var(--w) * .14); height: calc(var(--w) * .14); border-radius: 50%;
  background: var(--mb-green); border: 2px solid #fff; box-shadow: none;
}
body.in-game[data-game="mille-bornes"] .pcard.playable:hover { transform: translateY(-10px) rotate(-1deg); }
body.in-game[data-game="mille-bornes"] .pcard.unplayable { filter: grayscale(.7) brightness(.96); opacity: .6; }
body.in-game[data-game="mille-bornes"] .pcard.selected {
  box-shadow: 0 8px 0 #b58f00, 0 0 0 4px var(--mb-yellow);
  outline: none;
}
body.in-game[data-game="mille-bornes"] .pcard .lift-tag {
  font-family: var(--mb-display); letter-spacing: .04em;
  background: var(--mb-green); color: #fff; border: 2px solid var(--mb-ink); box-shadow: none;
}
body.in-game[data-game="mille-bornes"] .pcard .lift-tag.hostile { background: var(--mb-red); }

/* Pas d'animation d'entrée sur les cartes de la main : `render()` réécrit le `innerHTML` de la
   main à CHAQUE mise à jour d'état, donc une animation d'apparition (ex. distribution en
   cascade avec `backwards`) se rejouait à chaque action — les cartes disparaissaient puis
   revenaient. Une vraie animation de distribution demanderait de réconcilier le DOM au lieu de
   le reconstruire ; en attendant, la main reste stable. */

/* ---------- Dock : ma main, sur un bandeau ensoleillé ---------- */
body.in-game[data-game="mille-bornes"] .hand-dock.dock {
  background: linear-gradient(180deg, #fffdf3, #ffeec9);
  border: 3px solid var(--mb-ink); border-radius: 20px;
  box-shadow: 0 5px 0 rgba(23,37,46,.25);
}
body.in-game[data-game="mille-bornes"] .chooser .prompt {
  font-family: var(--mb-display); letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px;
  color: var(--mb-ink);
}
body.in-game[data-game="mille-bornes"] .chooser .prompt.attack { color: #b4121f; }
body.in-game[data-game="mille-bornes"] .chooser .prompt.muted { color: #6c8494; }
body.in-game[data-game="mille-bornes"] .abtn {
  font-family: var(--mb-display); letter-spacing: .04em;
  background: #fff; color: var(--mb-ink); border: 2px solid var(--mb-ink); box-shadow: 0 3px 0 rgba(23,37,46,.25);
}
body.in-game[data-game="mille-bornes"] .abtn.primary {
  background: var(--mb-green); color: #fff; border-color: var(--mb-green-deep);
  box-shadow: 0 3px 0 var(--mb-green-deep);
}
body.in-game[data-game="mille-bornes"] .abtn.ghost { background: transparent; box-shadow: none; color: #55707f; }
body.in-game[data-game="mille-bornes"] .hand .hand-empty { color: var(--muted); }
/* Emplacement de défausse */
body.in-game[data-game="mille-bornes"] .mb-discard-slot {
  background: rgba(255,255,255,.85); border: 2px dashed var(--mb-ink); color: #55707f;
}

/* ---------- HUD : pastilles blanches cerclées ---------- */
body.in-game[data-game="mille-bornes"] .game-hud {
  background: rgba(255,255,255,.9); border: 2.5px solid var(--mb-ink); border-radius: 18px;
  box-shadow: 0 4px 0 rgba(23,37,46,.2);
}
body.in-game[data-game="mille-bornes"] .game-hud .pill,
body.in-game[data-game="mille-bornes"] .turn-badge {
  background: #fff; border: 2px solid var(--mb-ink); color: var(--mb-ink); box-shadow: none;
}
body.in-game[data-game="mille-bornes"] .turn-badge.is-mine {
  background: var(--mb-green); color: #fff; border-color: var(--mb-green-deep);
}
body.in-game[data-game="mille-bornes"] .turn-badge.is-mine strong { color: #fff; }
body.in-game[data-game="mille-bornes"] .game-hud .pill .mono,
body.in-game[data-game="mille-bornes"] .game-hud .pill b.mono { color: var(--mb-blue); }

/* Coup Fourré : rouge signalisation + riposte jaune priorité */
body.in-game[data-game="mille-bornes"] .overlay .scrim { background: rgba(23,37,46,.45); }
body.in-game[data-game="mille-bornes"] .cf-card { background: #fffdf5; border: 3px solid var(--mb-ink); }
body.in-game[data-game="mille-bornes"] .cf-top { background: linear-gradient(160deg, var(--mb-red), var(--mb-red-deep)); }
body.in-game[data-game="mille-bornes"] .cf-top .t1 { font-family: var(--mb-display); letter-spacing: .03em; }
body.in-game[data-game="mille-bornes"] .cf-riposte {
  background: linear-gradient(160deg, #ffe066, var(--mb-yellow)); border: 3px solid var(--mb-ink); color: var(--mb-ink);
  font-family: var(--mb-display); letter-spacing: .05em; box-shadow: 0 5px 0 #b58f00;
}
body.in-game[data-game="mille-bornes"] .cf-decline { background: #fff; border: 2px solid var(--mb-ink); color: #55707f; }
body.in-game[data-game="mille-bornes"] .cf-vs .vs { color: var(--mb-red); }
body.in-game[data-game="mille-bornes"] .wait-banner {
  background: #fff; color: var(--mb-ink); border: 2.5px solid var(--mb-ink); box-shadow: 0 4px 0 rgba(23,37,46,.2);
}

/* Ciblage : rouge signalisation */
body.in-game[data-game="mille-bornes"] .tgt-badge {
  background: var(--mb-red); color: #fff; border: 2px solid var(--mb-ink);
  font-family: var(--mb-display); letter-spacing: .04em;
}
body.in-game[data-game="mille-bornes"] .dash.target-eligible {
  border-color: var(--mb-red);
  box-shadow: 0 4px 0 var(--mb-red-deep), 0 0 0 4px rgba(225,29,46,.25);
  animation: mb-tpulse 1.2s infinite;
}
body.in-game[data-game="mille-bornes"] .dash.target-inert { opacity: .5; filter: grayscale(.6); }
body.in-game[data-game="mille-bornes"] .dash .noreason {
  background: rgba(255,255,255,.75); color: #55707f; border-radius: 14px;
}

/* ---------- Desktop : on occupe la route au lieu de tasser tout en haut ---------- */
@media (min-width: 1024px) and (min-height: 620px) {
  body.in-game[data-game="mille-bornes"] { --lane-h: 24px; }
  body.in-game[data-game="mille-bornes"] .me .gauge { --lane-h: 30px; }
  /* Les intitulés de colonne restent ÉPINGLÉS EN HAUT, seuls les tableaux de bord se centrent :
     les marges auto sur le premier et le dernier tableau font le centrage sans embarquer le
     titre — et si ça déborde, une marge auto retombe à 0, donc on repart du haut sans rogner
     (ce que `justify-content: center` ne garantit pas). */
  body.in-game[data-game="mille-bornes"] .col-opp,
  body.in-game[data-game="mille-bornes"] .col-me { justify-content: flex-start; gap: 8px; }
  /* `:first-of-type` ne marcherait pas : le titre est un div lui aussi, donc le « premier div »
     c'est lui. On vise le tableau de bord qui SUIT le titre. */
  body.in-game[data-game="mille-bornes"] .col-opp .coltitle + .dash { margin-top: auto; }
  body.in-game[data-game="mille-bornes"] .col-opp .dash:last-child { margin-bottom: auto; }
  /* devant un adversaire, la carte parle d'elle-même : pas besoin du nom de la pile */
  body.in-game[data-game="mille-bornes"] .dash .slot-lbl { display: none; }
  /* colonne adverse un peu plus large : rang + nom + carte subie tiennent sur une ligne */
  body.in-game[data-game="mille-bornes"] .board--mb { grid-template-columns: minmax(0, 392px) 1fr; }
  body.in-game[data-game="mille-bornes"] .board--mb::before { left: calc(392px + 12px); }
  body.in-game[data-game="mille-bornes"] .board--mb { --verge: 26px; }
  body.in-game[data-game="mille-bornes"] .dash { padding: 6px 14px; gap: 5px; }
  body.in-game[data-game="mille-bornes"] .dash .state { font-size: 12px; padding: 3px 9px; }
  body.in-game[data-game="mille-bornes"] .nm { font-size: 17px; max-width: 16ch; }
  body.in-game[data-game="mille-bornes"] .odo .big { font-size: 19px; }
  body.in-game[data-game="mille-bornes"] .me .odo .big { font-size: 30px; }
  /* ma zone occupe toute sa colonne : sinon un grand vide de bitume traîne sous elle */
  body.in-game[data-game="mille-bornes"] .col-me .me { flex: 1 1 auto; padding: 16px 20px; gap: 12px; }
  body.in-game[data-game="mille-bornes"] .tablerow .pcard--mini { --w: 34px; }
  body.in-game[data-game="mille-bornes"] .me .tablerow .pcard--mini { --w: 52px; }
  body.in-game[data-game="mille-bornes"] .dash .boot,
  body.in-game[data-game="mille-bornes"] .boot { width: 22px; height: 22px; font-size: 13px; }
}

/* ---------- Compaction mobile (la voie et les cartes rétrécissent, rien n'est coupé) ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="mille-bornes"] { --lane-h: 11px; }
  /* En paysage court, chaque pixel compte : les intitulés de colonne ne servent qu'en ciblage. */
  body.in-game[data-game="mille-bornes"] .coltitle:not(.targeting) { display: none; }
  body.in-game[data-game="mille-bornes"] .board--mb { --verge: 15px; padding: 18px 8px; }
  body.in-game[data-game="mille-bornes"] .chooser { min-height: 28px; }
  /* le rang reste lisible mais rend sa largeur au nom + à la carte subie */
  body.in-game[data-game="mille-bornes"] .dash .rank { font-size: 9px; padding: 1px 4px; letter-spacing: .01em; }
  body.in-game[data-game="mille-bornes"] .nm { max-width: 8ch; }
  body.in-game[data-game="mille-bornes"] .dash .head { gap: 4px; }
  body.in-game[data-game="mille-bornes"] .dash .boot { width: 15px; height: 15px; font-size: 9px; }
  body.in-game[data-game="mille-bornes"] .tablerow .pcard--mini { --w: 26px; }
  body.in-game[data-game="mille-bornes"] .me { padding: 7px 10px; gap: 5px; }
  /* les cartes posées devant les ADVERSAIRES passent à la trappe ici : leurs puces d'état
     disent déjà ce qu'ils subissent, et la hauteur manque. Ma zone, elle, les garde. */
  body.in-game[data-game="mille-bornes"] .dash .tablerow { display: none; }
  body.in-game[data-game="mille-bornes"] .me .gauge { --lane-h: 15px; }
  body.in-game[data-game="mille-bornes"] .odo .big { font-size: 13px; }
  body.in-game[data-game="mille-bornes"] .me .odo .big { font-size: 18px; }
  body.in-game[data-game="mille-bornes"] .sem .lamp { width: 6px; height: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  body.in-game[data-game="mille-bornes"] .board--mb::before,
  body.in-game[data-game="mille-bornes"] .hand .pcard,
  body.in-game[data-game="mille-bornes"] .dash.target-eligible { animation: none; }
  body.in-game[data-game="mille-bornes"] .lane-car { transition: none; }
}

/* ============================================================
   LE CODE DU NOM (code_du_nom) — motif « inspecteur cheap »
   Reproduit ux-design/mockups/code-du-nom.html. Classes prefixees cn-.
   Deux vues d'un meme ecran selon le role (chef teinte / agent gris).
   ============================================================ */
body.in-game[data-game="code_du_nom"] {
  --red:#e4483d; --red-ink:#3a0c0a; --blue:#3e7bd6; --blue-ink:#0a1b38;
  --manila:#e7d6a8; --manila-2:#d6be83; --manila-ink:#3a2e16; --assassin:#14171c;
  --cn-type:"Courier New",ui-monospace,"Cascadia Code",monospace;
}
/* Bureau de prive : liege + halftone journal + vignette. */
body.in-game[data-game="code_du_nom"] {
  background:
    radial-gradient(130% 80% at 50% -18%, rgba(224,168,46,.14), transparent 60%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 55%),
    radial-gradient(rgba(255,255,255,.022) 1px, transparent 1.4px) 0 0/8px 8px,
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,#161109,#0c0a07);
}
body.in-game[data-game="code_du_nom"] .page-game.active {
  background:
    radial-gradient(130% 70% at 50% -14%, rgba(224,168,46,.12), transparent 60%),
    radial-gradient(rgba(255,255,255,.02) 1px, transparent 1.4px) 0 0/8px 8px;
}

/* Formes de double codage (identites) */
body.in-game[data-game="code_du_nom"] .shape { display:inline-block; width:13px; height:13px; flex:none; }
body.in-game[data-game="code_du_nom"] .shape--red { border-radius:50%; background:var(--red); }
body.in-game[data-game="code_du_nom"] .shape--blue { border-radius:2px; background:var(--blue); }
body.in-game[data-game="code_du_nom"] .shape--neutral { border-radius:50%; background:var(--manila-2); box-shadow:inset 0 0 0 2px var(--manila-ink); }

/* -------- HUD (#turnBlock) -------- */
body.in-game[data-game="code_du_nom"] .cn-chip {
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px;
  font-size:11px; font-weight:700; color:var(--text); white-space:nowrap;
  background:var(--surface); border:1px solid var(--border); backdrop-filter:blur(8px); box-shadow:var(--shadow-sm);
}
body.in-game[data-game="code_du_nom"] .cn-chip--turn { background:color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color:var(--border-strong); }
body.in-game[data-game="code_du_nom"] .cn-chip--role { color:var(--muted); }
body.in-game[data-game="code_du_nom"] .cn-chip--role b { color:var(--text); }
body.in-game[data-game="code_du_nom"] .cn-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
body.in-game[data-game="code_du_nom"] .cn-dot--wait { background:var(--muted-2); box-shadow:none; }
body.in-game[data-game="code_du_nom"] .cn-score { display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; font-weight:800; }
body.in-game[data-game="code_du_nom"] .cn-score .s-red, body.in-game[data-game="code_du_nom"] .cn-score .s-blue { display:inline-flex; align-items:center; gap:4px; }
body.in-game[data-game="code_du_nom"] .cn-sep { color:var(--muted-2); }
body.in-game[data-game="code_du_nom"] .cn-clue {
  display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 12px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 26%, var(--surface)); border:1px solid var(--border-strong);
  backdrop-filter:blur(8px); box-shadow:var(--shadow-sm); font-size:11px; font-weight:800; color:var(--text); white-space:nowrap;
}
body.in-game[data-game="code_du_nom"] .cn-clue .word { font-family:var(--cn-type); font-size:13px; letter-spacing:.04em; color:var(--accent); }
body.in-game[data-game="code_du_nom"] .cn-clue .x { font-variant-numeric:tabular-nums; font-weight:900; }
body.in-game[data-game="code_du_nom"] .cn-clue .rest { color:var(--muted); font-weight:700; }

/* -------- Plateau : la grille 5x5 -------- */
body.in-game[data-game="code_du_nom"] .cn-scroll { padding:2px; }
body.in-game[data-game="code_du_nom"] .cn-grid {
  display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:6px;
  flex:1 1 auto; min-height:0; width:100%;
}
body.in-game[data-game="code_du_nom"] .cn-word {
  position:relative; border-radius:8px; display:grid; place-items:center; text-align:center;
  padding:2px 6px; overflow:hidden; user-select:none; min-height:44px;
  font-family:var(--cn-type); font-weight:700; text-transform:uppercase;
  font-size:clamp(9px,1.55vw,13px); letter-spacing:.02em; line-height:1.05;
  color:var(--manila-ink); border:1px solid rgba(0,0,0,.35); box-shadow:var(--shadow-sm);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#efe0b8,#dcc488);
}
/* Tache de cafe (detail cheap du mockup) — coin superieur droit, sous le texte. */
body.in-game[data-game="code_du_nom"] .cn-word::after {
  content:""; position:absolute; width:20px; height:20px; right:-6px; top:-6px; border-radius:50%;
  border:2px solid rgba(90,60,20,.16); background:radial-gradient(circle,transparent 55%,rgba(90,60,20,.08) 60%); z-index:1;
}
body.in-game[data-game="code_du_nom"] .cn-word.revealed::after { display:none; }
body.in-game[data-game="code_du_nom"] .cn-word .w { position:relative; z-index:2; word-break:break-word; }
body.in-game[data-game="code_du_nom"] .cn-word .no { position:absolute; bottom:2px; right:5px; font-size:8px; font-weight:800; opacity:.5; z-index:2; }
body.in-game[data-game="code_du_nom"] .cn-word .clip {
  position:absolute; top:-2px; left:7px; width:9px; height:15px; z-index:3;
  border:2px solid rgba(120,120,130,.7); border-bottom:none; border-radius:5px 5px 0 0;
}
body.in-game[data-game="code_du_nom"] .cn-word .mk { position:absolute; top:4px; left:6px; z-index:3; }
body.in-game[data-game="code_du_nom"] .cn-word .cn-skull { position:absolute; top:3px; left:5px; font-size:11px; z-index:3; }

/* Vue chef : cases teintees par identite */
body.in-game[data-game="code_du_nom"] .cn-word.k-red {
  border-color:var(--red); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--red) 85%,transparent), var(--shadow-sm);
  background:linear-gradient(180deg,color-mix(in srgb,var(--red) 16%,#efe0b8),color-mix(in srgb,var(--red) 26%,#dcc488));
}
body.in-game[data-game="code_du_nom"] .cn-word.k-blue {
  border-color:var(--blue); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--blue) 85%,transparent), var(--shadow-sm);
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 16%,#efe0b8),color-mix(in srgb,var(--blue) 26%,#dcc488));
}
body.in-game[data-game="code_du_nom"] .cn-word.k-neutral {
  border-color:color-mix(in srgb,var(--manila-ink) 55%,transparent);
  background:linear-gradient(180deg,#e7d6a8,#cdb073);
}
body.in-game[data-game="code_du_nom"] .cn-word.k-assassin {
  color:#ede6d6; border-color:#000; box-shadow:inset 0 0 0 2px #000, var(--shadow-md);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 8px),
    linear-gradient(180deg,#24272c,#0e1013);
}
body.in-game[data-game="code_du_nom"] .cn-word.k-assassin .no { color:#ede6d6; }

/* Etat tappable (agent, mon tour) + pre-selection loupe */
body.in-game[data-game="code_du_nom"] .cn-word.guessable {
  cursor:pointer;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 80%,transparent), 0 0 16px -3px color-mix(in srgb,var(--accent) 60%,transparent), var(--shadow-sm);
}
body.in-game[data-game="code_du_nom"] .cn-word.guessable:hover { transform:translateY(-2px); }
body.in-game[data-game="code_du_nom"] .cn-word.aiming {
  box-shadow:0 0 0 3px var(--accent), 0 0 22px -2px var(--accent), var(--shadow-md);
}
body.in-game[data-game="code_du_nom"] .cn-word.aiming::before {
  content:"\1F50E"; position:absolute; z-index:4; font-size:20px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

/* Revelee : tampon caoutchouc */
body.in-game[data-game="code_du_nom"] .cn-word.revealed { cursor:default; }
body.in-game[data-game="code_du_nom"] .cn-word.revealed .w { opacity:.28; }
body.in-game[data-game="code_du_nom"] .cn-stamp {
  position:absolute; z-index:5; font-family:var(--cn-type); font-weight:900; text-transform:uppercase;
  letter-spacing:.05em; padding:1px 6px; border:2px solid currentColor; border-radius:3px; transform:rotate(-9deg);
  font-size:clamp(8px,1.25vw,11px); white-space:nowrap; box-shadow:0 1px 0 rgba(0,0,0,.15); opacity:.92;
}
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-red { background:linear-gradient(180deg,color-mix(in srgb,var(--red) 40%,#efe0b8),color-mix(in srgb,var(--red) 55%,#c9a15e)); }
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-blue { background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 40%,#efe0b8),color-mix(in srgb,var(--blue) 55%,#c9a15e)); }
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-red .cn-stamp { color:var(--red-ink); border-color:var(--red); }
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-blue .cn-stamp { color:var(--blue-ink); border-color:var(--blue); }
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-neutral { background:linear-gradient(180deg,#c9b486,#ad9663); }
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-neutral .cn-stamp { color:#4a3a18; border-color:#4a3a18; }
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-assassin {
  background:repeating-linear-gradient(45deg, rgba(228,72,61,.16) 0 5px, transparent 5px 10px), linear-gradient(180deg,#1a1d22,#08090c);
}
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-assassin .cn-stamp { color:#ff6b57; border-color:#ff6b57; transform:rotate(-4deg); }
body.in-game[data-game="code_du_nom"] .cn-word.revealed.k-assassin .w { color:#ede6d6; }

/* -------- Console de role (dock) -------- */
body.in-game[data-game="code_du_nom"] .cn-dock { padding-top:2px; }
body.in-game[data-game="code_du_nom"] .cn-console {
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; min-height:60px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--border);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05);
}
body.in-game[data-game="code_du_nom"] .role-chip {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; flex:none;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}
body.in-game[data-game="code_du_nom"] .cn-hint { flex:1 1 auto; font-size:12.5px; color:var(--muted); line-height:1.35; }
body.in-game[data-game="code_du_nom"] .cn-hint b { color:var(--text); }
body.in-game[data-game="code_du_nom"] .cn-input {
  flex:1 1 auto; min-width:0; height:44px; padding:0 14px; border-radius:999px;
  background:#f0e6c9; color:#2a2110; font-family:var(--cn-type); font-weight:700; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase; border:1px solid rgba(0,0,0,.3); box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
}
body.in-game[data-game="code_du_nom"] .cn-input::placeholder { color:#9a855a; text-transform:none; }
body.in-game[data-game="code_du_nom"] .cn-stepper {
  display:inline-flex; align-items:center; gap:2px; flex:none; padding:3px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
}
body.in-game[data-game="code_du_nom"] .cn-stepper button {
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  font-size:20px; font-weight:900; color:var(--text); background:var(--surface-2);
}
body.in-game[data-game="code_du_nom"] .cn-stepbox { min-width:38px; text-align:center; }
body.in-game[data-game="code_du_nom"] .cn-stepbox .val { font-variant-numeric:tabular-nums; font-weight:800; font-size:18px; }
body.in-game[data-game="code_du_nom"] .cn-stepbox .lab { font-size:9px; color:var(--muted-2); font-weight:700; text-transform:uppercase; }

/* Boutons primaires/secondaires de la console (independants des .btn de l'app) */
body.in-game[data-game="code_du_nom"] .cn-transmit,
body.in-game[data-game="code_du_nom"] .cn-start {
  flex:none; min-height:52px; padding:0 18px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-weight:800; font-size:14px; color:var(--on-accent);
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000)); box-shadow:var(--shadow-md);
}
body.in-game[data-game="code_du_nom"] .cn-stop {
  flex:none; min-height:52px; min-width:150px; padding:0 18px; border-radius:999px; cursor:pointer;
  font-weight:800; font-size:14px; color:var(--text);
  background:color-mix(in srgb,var(--ok) 24%,var(--surface)); border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
}
body.in-game[data-game="code_du_nom"] .cn-transmit[disabled],
body.in-game[data-game="code_du_nom"] .cn-start[disabled],
body.in-game[data-game="code_du_nom"] .cn-stop[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; }
body.in-game[data-game="code_du_nom"] .cn-console--setup { justify-content:space-between; }

/* -------- SETUP : affectation des brigades -------- */
body.in-game[data-game="code_du_nom"] .cn-setup {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; flex:1 1 auto; min-height:0;
}
body.in-game[data-game="code_du_nom"] .cn-team {
  position:relative; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,#e7d6a8,#cfb578); color:var(--manila-ink); box-shadow:var(--shadow-md);
  border:1px solid rgba(0,0,0,.3);
}
/* Onglet de dossier manille (detail cheap du mockup) */
body.in-game[data-game="code_du_nom"] .cn-team::before {
  content:""; position:absolute; top:-9px; left:18px; width:64px; height:14px; border-radius:4px 4px 0 0;
  background:#cfb578; border:1px solid rgba(0,0,0,.25); border-bottom:none;
}
body.in-game[data-game="code_du_nom"] .cn-team.red { box-shadow:var(--shadow-md), inset 0 0 0 2px color-mix(in srgb,var(--red) 60%,transparent); }
body.in-game[data-game="code_du_nom"] .cn-team.blue { box-shadow:var(--shadow-md), inset 0 0 0 2px color-mix(in srgb,var(--blue) 60%,transparent); }
body.in-game[data-game="code_du_nom"] .cn-team h3 {
  margin:0; font-family:var(--cn-type); font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:6px;
}
body.in-game[data-game="code_du_nom"] .cn-team.red h3 { color:#8a1712; }
body.in-game[data-game="code_du_nom"] .cn-team.blue h3 { color:#123a78; }
body.in-game[data-game="code_du_nom"] .cn-slot {
  background:rgba(255,255,255,.35); border:1.5px dashed rgba(0,0,0,.35); border-radius:8px;
  padding:7px 9px; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; min-height:40px;
}
body.in-game[data-game="code_du_nom"] .cn-slot.filled { border-style:solid; background:rgba(255,255,255,.55); }
body.in-game[data-game="code_du_nom"] .cn-slot .tag { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
body.in-game[data-game="code_du_nom"] .cn-slot .cn-ok { margin-left:auto; }
body.in-game[data-game="code_du_nom"] .cn-vacant { opacity:.6; font-style:italic; font-weight:600; }
body.in-game[data-game="code_du_nom"] .cn-aglabel { font-size:9px; font-weight:900; text-transform:uppercase; opacity:.7; margin:2px 0 4px; }
body.in-game[data-game="code_du_nom"] .cn-agents { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
body.in-game[data-game="code_du_nom"] .cn-token {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:800;
  background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.25); color:var(--manila-ink);
}
body.in-game[data-game="code_du_nom"] .cn-token.me { background:#2a2110; color:#f0e6c9; }
body.in-game[data-game="code_du_nom"] .cn-join { margin-top:auto; display:flex; gap:6px; flex-wrap:wrap; }
body.in-game[data-game="code_du_nom"] .cn-jbtn {
  min-height:40px; padding:0 12px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-size:12.5px; font-weight:800; background:rgba(42,33,16,.92); color:#f0e6c9;
}
body.in-game[data-game="code_du_nom"] .cn-jbtn[disabled] { opacity:.45; cursor:not-allowed; }

/* -------- Fin de partie (modale) -------- */
.cn-result { display:flex; flex-direction:column; align-items:center; gap:12px; }
.cn-result .cn-endstamp {
  font-family:"Courier New",ui-monospace,monospace; font-weight:900; text-transform:uppercase; letter-spacing:.07em;
  border:3px solid currentColor; border-radius:6px; padding:8px 20px; transform:rotate(-4deg); display:inline-block;
  font-size:20px; box-shadow:0 2px 0 rgba(0,0,0,.2);
}
.cn-result .cn-endstamp.red { color:#e4483d; }
.cn-result .cn-endstamp.blue { color:#3e7bd6; }
.cn-result .cn-endstamp.lost { color:#ff6b57; }
.cn-result .cn-result__sub { font-size:13px; color:var(--muted,#9aa7b4); text-align:center; }

/* Mobile paysage : compacte un peu la grille et la console */
@media (max-width:915px) and (orientation:landscape) {
  body.in-game[data-game="code_du_nom"] .cn-word { min-height:38px; }
  body.in-game[data-game="code_du_nom"] .cn-console { min-height:54px; }
  body.in-game[data-game="code_du_nom"] .cn-transmit,
  body.in-game[data-game="code_du_nom"] .cn-start,
  body.in-game[data-game="code_du_nom"] .cn-stop { min-height:46px; }
}
@media (prefers-reduced-motion:reduce) {
  body.in-game[data-game="code_du_nom"] .cn-word.guessable:hover { transform:none; }
}

/* -------- Zone de jeu : grille + panneau lateral (desktop) --------
   Styles du panneau definis inconditionnellement ; seule sa VISIBILITE est
   gatee par le viewport (masque en mobile paysage <1000px, visible desktop). */
body.in-game[data-game="code_du_nom"] .cn-play { display:flex; gap:12px; height:100%; min-height:0; }
body.in-game[data-game="code_du_nom"] .cn-play .cn-grid { flex:1 1 auto; }
body.in-game[data-game="code_du_nom"] .cn-aside { display:none; flex-direction:column; gap:10px; flex:0 0 250px; min-height:0; }
@media (min-width:1000px) {
  body.in-game[data-game="code_du_nom"] .cn-aside { display:flex; }
}
body.in-game[data-game="code_du_nom"] .cn-roster {
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:9px 12px; box-shadow:var(--shadow-sm);
}
body.in-game[data-game="code_du_nom"] .cn-roster.active { box-shadow:var(--shadow-sm), 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent); }
body.in-game[data-game="code_du_nom"] .cn-roster-h {
  display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:12px;
}
body.in-game[data-game="code_du_nom"] .cn-roster.red .cn-roster-h { color:var(--red); }
body.in-game[data-game="code_du_nom"] .cn-roster.blue .cn-roster-h { color:var(--blue); }
body.in-game[data-game="code_du_nom"] .cn-roster-h > span:first-child { display:inline-flex; align-items:center; gap:6px; }
body.in-game[data-game="code_du_nom"] .cn-rem { font-variant-numeric:tabular-nums; color:var(--text); }
body.in-game[data-game="code_du_nom"] .cn-roster-b { font-size:11.5px; color:var(--muted); margin-top:4px; }

/* Journal des indices : tableau de liege a ficelle rouge */
body.in-game[data-game="code_du_nom"] .cn-journal {
  flex:1 1 auto; min-height:0; overflow:hidden; position:relative; border-radius:12px; padding:12px;
  border:1px solid rgba(0,0,0,.4); box-shadow:var(--shadow-md), inset 0 0 40px rgba(0,0,0,.35);
  background:
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.4px) 0 0/7px 7px,
    linear-gradient(180deg,#7a5a32,#5e4525);
}
body.in-game[data-game="code_du_nom"] .cn-journal-h {
  font-family:var(--cn-type); font-weight:900; font-size:11px; letter-spacing:.05em; color:#f0e6c9; opacity:.9;
}
body.in-game[data-game="code_du_nom"] .cn-journal-b { margin-top:8px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
body.in-game[data-game="code_du_nom"] .cn-ticket {
  background:#efe0b8; color:#2a2110; border-radius:4px; padding:5px 8px; font-family:var(--cn-type);
  font-size:12px; font-weight:700; box-shadow:var(--shadow-sm); border-left:3px solid rgba(0,0,0,.3);
}
body.in-game[data-game="code_du_nom"] .cn-ticket:nth-child(odd) { transform:rotate(-.8deg); }
body.in-game[data-game="code_du_nom"] .cn-ticket:nth-child(even) { transform:rotate(.7deg); }
body.in-game[data-game="code_du_nom"] .cn-ticket.red { border-left-color:var(--red); }
body.in-game[data-game="code_du_nom"] .cn-ticket.blue { border-left-color:var(--blue); }
body.in-game[data-game="code_du_nom"] .cn-ticket.empty { background:rgba(255,255,255,.12); color:#f0e6c9; font-style:italic; transform:none; box-shadow:none; border-left-color:transparent; }

/* ============================================================
   Lecteur de règles (modale à défilement)
   Ouvrable du lobby (tuile), de la salle d'attente et du HUD en
   partie. Dark-first et autonome (couleurs figées, jamais tributaire
   du thème clair/sombre) ; l'accent change par jeu via
   .rules-backdrop[data-game="…"]. Contenu : js/rules.js.
   ============================================================ */

/* --- Boutons d'ouverture (tuile + salle d'attente) --- */
.rules-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: #eaf0f6; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.rules-open::before { content: "📖"; font-size: 13px; line-height: 1; }
.rules-open:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .12); }

/* Bouton « Règles » posé en coin de la tuile — FRÈRE de la tuile (jamais imbriqué). */
.game-tile-wrap { position: relative; }
.game-tile-wrap > .game-tile { width: 100%; display: block; }
.tile-rules {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  height: 28px; padding: 0 11px; font-size: 11.5px;
  background: rgba(4, 8, 12, .62); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}
.tile-rules::before { font-size: 12px; }
@media (hover: hover) {
  /* Discret au repos, franc au survol de la tuile ou de lui-même (souris) ; toujours visible au tactile. */
  .game-tile-wrap .tile-rules { opacity: .55; }
  .game-tile-wrap:hover .tile-rules,
  .game-tile-wrap:focus-within .tile-rules,
  .tile-rules:hover { opacity: 1; }
}

/* --- Bouton « ? » du HUD en partie --- */
.hud-rules-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  font-size: 15px; font-weight: 800; line-height: 1; flex: none;
}
body.in-game .game-hud #rulesHudBtn {
  margin-left: auto; box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  border: 1px solid var(--primary-border);
}
/* Le bouton Salon suit le « ? » à droite (au lieu de son propre margin-left:auto). */
body.in-game .game-hud #roomDrawerBtn { margin-left: 6px; }

/* --- Accent par jeu (surcharge la valeur par défaut) --- */
.rules-backdrop { --rules-accent: #7c5cff; --rules-accent-2: #22d3ee; }
.rules-backdrop[data-game="uno-classic"]      { --rules-accent: #ef4444; --rules-accent-2: #3b82f6; }
.rules-backdrop[data-game="the-game"]         { --rules-accent: #7c5cff; --rules-accent-2: #22d3ee; }
.rules-backdrop[data-game="mille-bornes"]     { --rules-accent: #14a85a; --rules-accent-2: #ffcc00; }
.rules-backdrop[data-game="belote-classique"] { --rules-accent: #10b981; --rules-accent-2: #d4af37; }
.rules-backdrop[data-game="trio-classic"]     { --rules-accent: #d946ef; --rules-accent-2: #22d3ee; }
.rules-backdrop[data-game="yahtzee"]          { --rules-accent: #e3a33b; --rules-accent-2: #b5533f; }
.rules-backdrop[data-game="skull-king"]       { --rules-accent: #d9a441; --rules-accent-2: #14b8a6; }

/* --- Fond & feuille --- */
.rules-backdrop {
  z-index: 120;
  background: rgba(4, 8, 12, .62);
  backdrop-filter: blur(4px);
  align-items: center;
}
.rules-sheet {
  position: relative;
  width: min(560px, 94vw);
  max-height: min(88vh, 88dvh);
  display: flex; flex-direction: column;
  color: #eaf0f6;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--rules-accent) 20%, transparent), transparent 62%),
    linear-gradient(180deg, #12171f, #0b0f14 70%);
  border: 1px solid color-mix(in srgb, var(--rules-accent) 30%, rgba(255, 255, 255, .14));
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  animation: rules-pop .18s cubic-bezier(.2, .7, .2, 1);
}
@keyframes rules-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- En-tête (art + titres + fermeture) --- */
.rules-sheet__head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rules-accent) 12%, transparent), transparent);
}
.rules-sheet__art {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; overflow: hidden;
  font-size: 26px; line-height: 1;
  background: color-mix(in srgb, var(--rules-accent) 20%, #0b0f14);
  border: 1px solid color-mix(in srgb, var(--rules-accent) 40%, transparent);
}
.rules-sheet__titles { flex: 1 1 auto; min-width: 0; }
.rules-sheet__name { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.15; color: #f4f8fc; }
.rules-sheet__facts {
  display: block; margin-top: 3px; font-size: 12px; font-weight: 600;
  color: #9aa7b4; font-variant-numeric: tabular-nums;
}
.rules-sheet__close {
  flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  color: #eaf0f6; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .16s ease;
}
.rules-sheet__close:hover { background: rgba(255, 255, 255, .14); }

/* --- Corps défilant --- */
.rules-sheet__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 20px; text-align: left;
}
.rules-tagline {
  margin: 0 0 16px; font-size: 14.5px; font-weight: 700; line-height: 1.4;
  color: color-mix(in srgb, var(--rules-accent-2) 55%, #eaf0f6);
}
.rules-block { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.rules-block:first-of-type { border-top: none; padding-top: 0; }
.rules-block__title {
  margin: 0 0 8px; display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rules-accent) 60%, #eaf0f6);
}
.rules-block__icon {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 14px;
  background: color-mix(in srgb, var(--rules-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rules-accent) 30%, transparent);
}
.rules-block__body { font-size: 14px; line-height: 1.55; color: #d7dee6; }
.rules-block__body p { margin: 0 0 8px; }
.rules-block__body p:last-child { margin-bottom: 0; }
.rules-block__body strong { color: #f4f8fc; font-weight: 800; }
.rules-block__body em { color: color-mix(in srgb, var(--rules-accent-2) 60%, #eaf0f6); font-style: normal; font-weight: 700; }
.rules-block__body ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.rules-block__body li { position: relative; padding-left: 18px; }
.rules-block__body li::before {
  content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rules-accent); box-shadow: 0 0 7px color-mix(in srgb, var(--rules-accent) 60%, transparent);
}

/* --- Mobile / petits écrans : bottom-sheet plein largeur --- */
@media (max-width: 560px) {
  .rules-backdrop { align-items: flex-end; padding: 0; }
  .rules-sheet {
    width: 100%; max-width: 100%; max-height: 90dvh;
    border-radius: 20px 20px 0 0;
    animation: rules-slide-up .2s cubic-bezier(.2, .7, .2, 1);
  }
}
@keyframes rules-slide-up { from { transform: translateY(100%); } to { transform: none; } }

/* Paysage bas (téléphone en jeu) : la feuille reste dans l'écran et défile. */
@media (max-height: 460px) {
  .rules-sheet { max-height: 94dvh; }
  .rules-sheet__head { padding: 11px 14px; }
  .rules-sheet__art { width: 42px; height: 42px; font-size: 21px; }
  .rules-sheet__name { font-size: 16px; }
  .rules-sheet__body { padding: 12px 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rules-sheet { animation: none; }
}

/* ============================================================
   LE GRAND PATRON (Président) — reproduit ux-design/mockups/grand_patron.html.
   Tout est scopé body.in-game[data-game="grand_patron"] ; classes préfixées .gp- (+ .fcard).
   Ame « open space corporate » : bleu #3B6EF5 / laiton #F5B841, dalles de moquette, sous-main,
   organigramme de badges de poste. Cartes françaises classiques (la carte 2 = liseré laiton).
   ============================================================ */
body.in-game[data-game="grand_patron"] { --primary: #3b6ef5; --accent: #3b6ef5; --accent-2: #f5b841; }
body.in-game[data-game="grand_patron"] {
  --on-accent: #08101f;
  --brass: #f5b841; --brass-ink: #3a2a06;
  --carpet: rgba(255, 255, 255, .05);
  --card-red: #e5484d; --card-ink: #0b0f14;
  --gp-face-1: #ffffff; --gp-face-2: #eef2f6;
}

/* --- L'open space : dalles + liseré laiton + halo néon --- */
body.in-game[data-game="grand_patron"] .table {
  position: relative;
  background:
    repeating-linear-gradient(0deg, var(--carpet) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--carpet) 0 1px, transparent 1px 44px),
    radial-gradient(58% 52% at 50% 34%, rgba(59, 110, 245, .15), transparent 70%),
    radial-gradient(130% 100% at 50% 120%, rgba(0, 0, 0, .5), transparent 62%),
    linear-gradient(180deg, #0c1220, #0b0f16 60%, #0b0f14);
  border: 1.5px solid color-mix(in srgb, var(--brass) 30%, transparent);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .42);
}

/* --- Ossature : centre (sous-main) + organigramme --- */
body.in-game[data-game="grand_patron"] .gp-board {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 214px; gap: 10px;
}
body.in-game[data-game="grand_patron"] .gp-center {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; min-height: 0;
}
body.in-game[data-game="grand_patron"] .gp-empty { color: var(--muted); font-size: 12px; font-weight: 700; }

/* --- Sous-main (desk pad) --- */
body.in-game[data-game="grand_patron"] .gp-deskpad {
  position: relative; width: 100%; max-width: 520px; padding: 12px 16px 14px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--surface));
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.in-game[data-game="grand_patron"] .gp-deskpad::before {
  content: ""; position: absolute; inset: 6px; border-radius: 12px; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--brass) 34%, transparent);
}
body.in-game[data-game="grand_patron"] .gp-pad-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
body.in-game[data-game="grand_patron"] .gp-combo { display: flex; gap: 8px; align-items: flex-end; justify-content: center; }
body.in-game[data-game="grand_patron"] .gp-combo--empty { opacity: .5; }
body.in-game[data-game="grand_patron"] .gp-combo-by { font-size: 10.5px; font-weight: 700; color: var(--muted); }
body.in-game[data-game="grand_patron"] .gp-combo-by b { color: var(--text); }
body.in-game[data-game="grand_patron"] .gp-history {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
body.in-game[data-game="grand_patron"] .gp-hstep {
  display: inline-flex; gap: 1px; align-items: center; padding: 2px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}
body.in-game[data-game="grand_patron"] .gp-hstep.beat { opacity: .55; }
body.in-game[data-game="grand_patron"] .gp-hsep { opacity: .5; }
body.in-game[data-game="grand_patron"] .gp-s { font-size: .82em; }

/* --- La carte française --- */
body.in-game[data-game="grand_patron"] .fcard {
  --w: 60px; width: var(--w); aspect-ratio: 5 / 7; border-radius: 12px; position: relative; flex: 0 0 auto;
  display: grid; place-items: center; user-select: none; font-variant-numeric: tabular-nums; font-weight: 800;
  background: linear-gradient(180deg, var(--gp-face-1), var(--gp-face-2)); color: var(--card-ink);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(11, 15, 20, .08);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="grand_patron"] .fcard--red { color: var(--card-red); }
body.in-game[data-game="grand_patron"] .gp-idx {
  position: absolute; top: 4px; left: 6px; font-size: calc(var(--w) * .28); line-height: .9;
  display: flex; flex-direction: column; align-items: center;
}
body.in-game[data-game="grand_patron"] .gp-big { font-size: calc(var(--w) * .6); line-height: 1; }
body.in-game[data-game="grand_patron"] .gp-foot {
  position: absolute; bottom: 4px; right: 6px; font-size: calc(var(--w) * .28); line-height: .9;
  display: flex; flex-direction: column; align-items: center; transform: rotate(180deg);
}
body.in-game[data-game="grand_patron"] .fcard--two {
  box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--brass) 78%, transparent);
}
body.in-game[data-game="grand_patron"] .fcard--two::before {
  content: "\26A0"; position: absolute; top: 3px; right: 5px; font-size: 10px;
}
body.in-game[data-game="grand_patron"] .fcard.card--back {
  background: repeating-linear-gradient(45deg, #1b2733, #1b2733 6px, #22303d 6px, #22303d 12px);
  color: transparent; box-shadow: var(--shadow-md);
}
body.in-game[data-game="grand_patron"] .fcard.playable {
  cursor: pointer;
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
body.in-game[data-game="grand_patron"] .fcard.playable:hover { transform: translateY(-8px); }
body.in-game[data-game="grand_patron"] .fcard.selected {
  transform: translateY(-16px);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 48%, transparent);
}
body.in-game[data-game="grand_patron"] .fcard.selected::after {
  content: "\2713"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  background: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
body.in-game[data-game="grand_patron"] .fcard.locked {
  filter: grayscale(.85) brightness(.62); opacity: .6; cursor: not-allowed;
}
body.in-game[data-game="grand_patron"] .fcard.locked::after {
  content: "\1F512"; position: absolute; right: 4px; bottom: 3px; font-size: 11px; filter: none;
}

/* --- Organigramme (rail des sièges) --- */
body.in-game[data-game="grand_patron"] .gp-org {
  display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow-y: auto;
}
body.in-game[data-game="grand_patron"] .gp-org-head {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 2px;
}
body.in-game[data-game="grand_patron"] .gp-seat {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 12px; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border);
}
body.in-game[data-game="grand_patron"] .gp-seat.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.in-game[data-game="grand_patron"] .gp-seat.active .gp-nm::before { content: "\25B8 "; color: var(--accent); }
body.in-game[data-game="grand_patron"] .gp-seat.passed { opacity: .55; }
body.in-game[data-game="grand_patron"] .gp-seat.out { background: color-mix(in srgb, var(--brass) 8%, var(--surface)); }
body.in-game[data-game="grand_patron"] .gp-av {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 11px; color: #08101f;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
body.in-game[data-game="grand_patron"] .gp-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
body.in-game[data-game="grand_patron"] .gp-nm { font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.in-game[data-game="grand_patron"] .gp-sc { font-size: 9.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
body.in-game[data-game="grand_patron"] .gp-count {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
  border: 1px solid var(--border); background: var(--surface-2);
}
body.in-game[data-game="grand_patron"] .gp-count .gp-st { font-size: 10px; color: var(--muted); }

/* --- Badge de poste (double codage texte + icône) --- */
body.in-game[data-game="grand_patron"] .gp-post {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; white-space: nowrap; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted);
}
body.in-game[data-game="grand_patron"] .gp-post--pdg {
  background: linear-gradient(180deg, var(--brass), color-mix(in srgb, var(--brass) 66%, #000));
  color: var(--brass-ink); border-color: transparent;
}
body.in-game[data-game="grand_patron"] .gp-post--vp {
  background: color-mix(in srgb, var(--brass) 30%, var(--surface));
  border-color: color-mix(in srgb, var(--brass) 50%, transparent); color: #fbe7c0;
}
body.in-game[data-game="grand_patron"] .gp-post--mid { color: var(--muted); }
body.in-game[data-game="grand_patron"] .gp-post--stag { background: color-mix(in srgb, var(--muted) 22%, var(--surface)); color: #c6d0da; }
body.in-game[data-game="grand_patron"] .gp-post--demoted {
  background: color-mix(in srgb, #ef4444 24%, var(--surface)); border-color: transparent; color: #ffd9d9; text-decoration: line-through;
}

/* --- Dock : consigne + main + actions --- */
body.in-game[data-game="grand_patron"] .gp-dock { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
body.in-game[data-game="grand_patron"] .gp-hint { font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 0 4px; }
body.in-game[data-game="grand_patron"] .gp-hint b { color: var(--text); }
body.in-game[data-game="grand_patron"] .gp-hand-row { display: flex; align-items: flex-end; gap: 10px; }
body.in-game[data-game="grand_patron"] .gp-hand {
  display: flex; gap: 7px; align-items: flex-end; overflow-x: auto; padding: 14px 4px 6px;
  scroll-snap-type: x proximity; flex: 1; min-width: 0;
}
body.in-game[data-game="grand_patron"] .gp-hand .fcard { scroll-snap-align: center; }
body.in-game[data-game="grand_patron"] .gp-dock-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; padding-bottom: 2px; }
body.in-game[data-game="grand_patron"] .gp-sel-count { font-size: 10.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.in-game[data-game="grand_patron"] .gp-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="grand_patron"] .gp-btn:hover { transform: translateY(-1px); }
body.in-game[data-game="grand_patron"] .gp-btn.primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  color: #fff; border-color: transparent; box-shadow: var(--shadow-md);
}
body.in-game[data-game="grand_patron"] .gp-btn.ghost { background: transparent; }
body.in-game[data-game="grand_patron"] .gp-btn--play, body.in-game[data-game="grand_patron"] .gp-btn--pass { min-height: 56px; }
body.in-game[data-game="grand_patron"] .gp-btn--play { min-width: 132px; }
body.in-game[data-game="grand_patron"] .gp-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Échange (note de service) --- */
body.in-game[data-game="grand_patron"] .gp-exchange {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 560px;
}
body.in-game[data-game="grand_patron"] .gp-memo {
  border-radius: 16px; padding: 12px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 10%, var(--surface-2)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--brass) 34%, transparent); box-shadow: var(--shadow-md);
}
body.in-game[data-game="grand_patron"] .gp-memo--down { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
body.in-game[data-game="grand_patron"] .gp-memo h4 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--brass) 82%, var(--text)); display: flex; align-items: center; gap: 8px;
}
body.in-game[data-game="grand_patron"] .gp-memo--down h4 { color: color-mix(in srgb, var(--accent) 82%, var(--text)); }
body.in-game[data-game="grand_patron"] .gp-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.in-game[data-game="grand_patron"] .gp-dir { font-size: 11.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
body.in-game[data-game="grand_patron"] .gp-dir b { color: var(--text); }
body.in-game[data-game="grand_patron"] .gp-arrow { font-size: 16px; }
body.in-game[data-game="grand_patron"] .gp-arrow.up { color: var(--brass); }
body.in-game[data-game="grand_patron"] .gp-arrow.down { color: var(--accent); }

/* --- Décompte de fin de manche + résultat --- */
body.in-game[data-game="grand_patron"] .gp-backdrop {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(4, 8, 12, .6); backdrop-filter: blur(3px);
}
body.in-game[data-game="grand_patron"] .gp-recap {
  width: 100%; max-width: 460px; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid color-mix(in srgb, #fff 18%, transparent); box-shadow: var(--shadow-lg);
}
body.in-game[data-game="grand_patron"] .gp-recap h4 {
  margin: 0; padding: 10px 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
body.in-game[data-game="grand_patron"] .gp-org-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border);
}
body.in-game[data-game="grand_patron"] .gp-org-row.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
body.in-game[data-game="grand_patron"] .gp-rk { width: 22px; text-align: center; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
body.in-game[data-game="grand_patron"] .gp-nm3 { flex: 1; font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.in-game[data-game="grand_patron"] .gp-pts { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
body.in-game[data-game="grand_patron"] .gp-pts .gp-cum { color: var(--muted); font-size: 11px; margin-left: 8px; }
body.in-game[data-game="grand_patron"] .gp-plus { color: #22c55e; }
body.in-game[data-game="grand_patron"] .gp-recap-actions { padding: 12px; display: flex; justify-content: center; }
body.in-game[data-game="grand_patron"] .gp-result { display: flex; flex-direction: column; align-items: center; gap: 12px; }
body.in-game[data-game="grand_patron"] .gp-result__headline { font-size: 17px; font-weight: 800; }
body.in-game[data-game="grand_patron"] .gp-result__headline.won { color: var(--brass); }
body.in-game[data-game="grand_patron"] .gp-result__headline.lost { color: var(--muted); }
body.in-game[data-game="grand_patron"] .gp-exaequo {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border: 1px solid var(--border);
}
body.in-game[data-game="grand_patron"] .gp-recap--final { max-width: 380px; }

/* --- HUD (chips dans #turnBlock) --- */
body.in-game[data-game="grand_patron"] #turnBlock { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.in-game[data-game="grand_patron"] .gp-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
body.in-game[data-game="grand_patron"] .gp-chip b { font-variant-numeric: tabular-nums; }
body.in-game[data-game="grand_patron"] .gp-chip--turn { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border-color: color-mix(in srgb, #fff 18%, transparent); }
body.in-game[data-game="grand_patron"] .gp-chip--must { background: color-mix(in srgb, var(--accent-2) 20%, var(--surface)); border-color: color-mix(in srgb, #fff 18%, transparent); color: #fbe9c7; }
body.in-game[data-game="grand_patron"] .gp-chip--won { background: color-mix(in srgb, var(--brass) 26%, var(--surface)); }
body.in-game[data-game="grand_patron"] .gp-chip--lost { background: color-mix(in srgb, var(--muted) 24%, var(--surface)); }
body.in-game[data-game="grand_patron"] .gp-chip .gp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* --- Tuile de cover (art) --- */
.art-grandpatron { position: relative; display: grid; place-items: center; }
.art-grandpatron .crown { font-size: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.art-grandpatron .badge { position: absolute; right: 14px; bottom: 10px; font-size: 20px; opacity: .9; }

/* --- Densité à 5+ joueurs + paysage compact --- */
body.in-game[data-game="grand_patron"] .gp-org--dense .gp-seat { min-height: 38px; padding: 4px 6px; }
body.in-game[data-game="grand_patron"] .gp-org--dense .gp-post { font-size: 9px; }
@media (max-width: 820px) {
  body.in-game[data-game="grand_patron"] .gp-board { grid-template-columns: minmax(0, 1fr) 168px; }
  body.in-game[data-game="grand_patron"] .fcard { --w: 52px; }
}

/* --- Desktop : sous-main + organigramme respirent (suit ux-design/mockups/grand_patron.html
   §DESKTOP : .d-center .fcard{--w:88px}, .d-hand .fcard{--w:70px}, .d-board sidebar 320px). --- */
@media (min-width: 721px) and (min-height: 561px) {
  body.in-game[data-game="grand_patron"] .gp-board { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
  body.in-game[data-game="grand_patron"] .gp-center .fcard { --w: 88px; }
  body.in-game[data-game="grand_patron"] .gp-deskpad { max-width: 600px; padding: 16px 20px 18px; }
  body.in-game[data-game="grand_patron"] .gp-seat { min-height: 48px; }
  body.in-game[data-game="grand_patron"] .gp-dock .fcard { --w: 70px; }
  body.in-game[data-game="grand_patron"] .gp-hand { padding: 18px 6px 10px; gap: 10px; }
}

/* --- Compaction paysage court (téléphone couché) : cf. mémoire responsive-phone-paysage —
   un phone couché (~915×412) est large ET court, la media query max-width ci-dessus ne se
   déclenche donc jamais dans ce cas ; on cible la HAUTEUR pour tenir sans scroll. --- */
@media (max-height: 460px) {
  body.in-game[data-game="grand_patron"] .gp-board { grid-template-columns: minmax(0, 1fr) 150px; gap: 6px; }
  body.in-game[data-game="grand_patron"] .fcard { --w: 50px; }
  body.in-game[data-game="grand_patron"] .gp-deskpad { padding: 8px 12px 10px; gap: 5px; }
  body.in-game[data-game="grand_patron"] .gp-history { font-size: 9px; gap: 5px; }
  body.in-game[data-game="grand_patron"] .gp-org { gap: 3px; }
  body.in-game[data-game="grand_patron"] .gp-seat { min-height: 34px; padding: 3px 6px; gap: 5px; }
  body.in-game[data-game="grand_patron"] .gp-org--dense .gp-seat { min-height: 30px; padding: 2px 5px; }
  body.in-game[data-game="grand_patron"] .gp-av { width: 20px; height: 20px; font-size: 9px; }
  body.in-game[data-game="grand_patron"] .gp-nm { font-size: 10px; }
  body.in-game[data-game="grand_patron"] .gp-sc { font-size: 8.5px; }
  body.in-game[data-game="grand_patron"] .gp-post { font-size: 8.5px; height: 17px; padding: 0 6px; }
  body.in-game[data-game="grand_patron"] .gp-count { font-size: 10px; height: 19px; padding: 0 6px; }
  body.in-game[data-game="grand_patron"] .gp-hand { padding-top: 11px; }
}

/* ============================================================
   RAMI — reproduit ux-design/mockups/rami.html.
   Tout est scopé body.in-game[data-game="rami"] ; classes préfixées .ra-.
   Ame « table du dimanche » : nappe VICHY rouge sur bois chaud sombre, accent tomate
   #E4572E / abricot #F2A541. Cartes françaises lisibles, jokers distincts (etoile + JOKER).
   ============================================================ */
body.in-game[data-game="rami"] { --primary: #e4572e; --accent: #e4572e; --accent-2: #f2a541; }
body.in-game[data-game="rami"] {
  --on-accent: #1a0a05;
  --cloth-1: #2a1a15; --cloth-2: #1c1210; --cloth-3: #130c0a;
  --cloth-red: rgba(228, 87, 46, .15); --cloth-line: rgba(255, 255, 255, .045);
  --wood-brd: rgba(242, 165, 65, .42);
  --card-red: #e5484d; --card-ink: #0b0f14;
  --ra-face-1: #ffffff; --ra-face-2: #eef2f6;
  --valid: #34d399; --valid-soft: rgba(52, 211, 153, .16); --valid-brd: rgba(52, 211, 153, .5);
  --invalid: #f87171; --invalid-soft: rgba(248, 113, 113, .15); --invalid-brd: rgba(248, 113, 113, .5);
}

/* --- La nappe vichy (bois chaud + carreaux rouges translucides croisés) --- */
body.in-game[data-game="rami"] .table {
  position: relative;
  background:
    repeating-linear-gradient(0deg, var(--cloth-red) 0 34px, transparent 34px 68px),
    repeating-linear-gradient(90deg, var(--cloth-red) 0 34px, transparent 34px 68px),
    repeating-linear-gradient(0deg, transparent 0 67px, var(--cloth-line) 67px 68px),
    repeating-linear-gradient(90deg, transparent 0 67px, var(--cloth-line) 67px 68px),
    radial-gradient(120% 130% at 50% 40%, var(--cloth-1) 0%, var(--cloth-2) 48%, var(--cloth-3) 100%);
  border: 1.5px solid var(--wood-brd);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .45);
}

/* --- Ossature du plateau --- */
body.in-game[data-game="rami"] .ra-board {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}

/* --- Sièges adverses (réduit : nombre de cartes en main) --- */
body.in-game[data-game="rami"] .ra-seats {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; flex: 0 0 auto;
}
body.in-game[data-game="rami"] .ra-seat {
  display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px;
  min-height: 40px; background: linear-gradient(180deg, rgba(20, 10, 7, .6), rgba(20, 10, 7, .34));
  border: 1px solid var(--border);
}
body.in-game[data-game="rami"] .ra-seat.active {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.in-game[data-game="rami"] .ra-av {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 11px; color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-2)); border: 2px solid rgba(255, 255, 255, .2);
}
body.in-game[data-game="rami"] .ra-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body.in-game[data-game="rami"] .ra-nm { font-size: 11.5px; font-weight: 800; color: #f3e7df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
body.in-game[data-game="rami"] .ra-sc { font-size: 9.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
body.in-game[data-game="rami"] .ra-hc {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #d9c7bc;
  font-variant-numeric: tabular-nums;
}
body.in-game[data-game="rami"] .ra-miniback {
  width: 13px; height: 18px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .28);
  background: repeating-linear-gradient(45deg, #3a2620 0 3px, #4a3128 3px 6px);
}
body.in-game[data-game="rami"] .ra-seats--dense .ra-seat { padding: 3px 8px 3px 3px; min-height: 34px; }

/* --- Centre : pioche + défausse --- */
body.in-game[data-game="rami"] .ra-center { display: flex; gap: 26px; justify-content: center; align-items: flex-start; flex: 0 0 auto; }
body.in-game[data-game="rami"] .ra-pile { display: grid; justify-items: center; gap: 4px; }
body.in-game[data-game="rami"] .ra-plabel {
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #d9c7bc;
}
body.in-game[data-game="rami"] .ra-stackwrap { position: relative; }
body.in-game[data-game="rami"] .ra-count-badge {
  position: absolute; right: -7px; top: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: #1a0a05; background: var(--accent-2); box-shadow: var(--shadow-sm); z-index: 3;
}
body.in-game[data-game="rami"] .ra-pile.hot .ra-stackwrap {
  cursor: pointer; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: raPulse 1.5s cubic-bezier(.2, .7, .2, 1) infinite;
}
@keyframes raPulse {
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 30px 6px color-mix(in srgb, var(--accent) 65%, transparent); }
}
body.in-game[data-game="rami"] .ra-pile.cold .ra-card { filter: brightness(.9) saturate(.85); opacity: .82; }

/* --- La carte française (ou joker) --- */
body.in-game[data-game="rami"] .ra-card {
  --w: 58px; width: var(--w); aspect-ratio: 5 / 7; border-radius: 12px; position: relative; flex: 0 0 auto;
  display: grid; place-items: center; user-select: none; font-variant-numeric: tabular-nums; font-weight: 800;
  background: linear-gradient(180deg, var(--ra-face-1), var(--ra-face-2)); color: var(--card-ink);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(11, 15, 20, .08);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
/* Tailles par contexte (pile centrale / meld posé), APRÈS la règle .ra-card de base ci-dessus pour
   gagner l'égalité de spécificité (même nombre de classes) par l'ordre des règles — pilotées en CSS
   (pas de style inline) pour pouvoir grossir en desktop via la media query plus bas. */
body.in-game[data-game="rami"] .ra-card--pile { --w: 60px; }
body.in-game[data-game="rami"] .ra-card--meld { --w: 44px; }
body.in-game[data-game="rami"] .ra-card--red { color: var(--card-red); }
body.in-game[data-game="rami"] .ra-idx {
  position: absolute; top: 4px; left: 6px; font-size: calc(var(--w) * .26); line-height: .9;
  display: flex; flex-direction: column; align-items: center;
}
body.in-game[data-game="rami"] .ra-big { font-size: calc(var(--w) * .5); line-height: 1; }
body.in-game[data-game="rami"] .ra-foot {
  position: absolute; bottom: 4px; right: 6px; font-size: calc(var(--w) * .26); line-height: .9;
  display: flex; flex-direction: column; align-items: center; transform: rotate(180deg);
}
body.in-game[data-game="rami"] .ra-s { font-size: .82em; }
body.in-game[data-game="rami"] .ra-card--back {
  background: repeating-linear-gradient(45deg, #3a2620, #3a2620 6px, #4a3128 6px, #4a3128 12px);
  color: transparent; box-shadow: var(--shadow-md);
}
body.in-game[data-game="rami"] .ra-card--empty {
  background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .28); box-shadow: none;
}
/* Joker : double codage (etoile + mot), jamais reconnu à la seule couleur */
body.in-game[data-game="rami"] .ra-card--joker {
  background: linear-gradient(158deg, #fff3ea, #ffe1c7); color: #8a3b12;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.in-game[data-game="rami"] .ra-card--joker .ra-star { font-size: calc(var(--w) * .5); line-height: 1; color: var(--accent); }
body.in-game[data-game="rami"] .ra-jlabel {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
  font-size: calc(var(--w) * .15); font-weight: 900; letter-spacing: .08em; color: #8a3b12;
}
body.in-game[data-game="rami"] .ra-as {
  position: absolute; top: 4px; right: 5px; font-size: calc(var(--w) * .2); font-weight: 900; color: #8a3b12;
}
/* États dans la main */
body.in-game[data-game="rami"] .ra-card.playable {
  cursor: pointer;
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
body.in-game[data-game="rami"] .ra-card.playable:hover { transform: translateY(-6px); }
body.in-game[data-game="rami"] .ra-card.sel {
  transform: translateY(-16px);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 48%, transparent);
}
body.in-game[data-game="rami"] .ra-card .ra-check {
  position: absolute; top: -9px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--accent); box-shadow: var(--shadow-sm);
}
body.in-game[data-game="rami"] .ra-hand .ra-card:not(.playable):not(.sel) { cursor: pointer; }
/* Main en phase PIOCHE : non sélectionnable mais on doit la LIRE clairement pour planifier — un
   voile léger suffit (avant : opacity .5 + grayscale = main fantôme qui semblait cassée). */
body.in-game[data-game="rami"] .ra-card.dim { filter: grayscale(.2) brightness(.96); opacity: .85; }

/* --- Combinaisons posées (melds) --- */
body.in-game[data-game="rami"] .ra-melds {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-content: flex-start; justify-content: center;
  padding: 4px; flex: 1 1 auto; min-height: 0;
}
body.in-game[data-game="rami"] .ra-melds--empty {
  color: var(--muted); font-size: 12px; font-weight: 700; align-items: center; justify-content: center;
}
body.in-game[data-game="rami"] .ra-meld {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 9px 6px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--border);
}
body.in-game[data-game="rami"] .ra-mlabel {
  display: flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: #d9c7bc;
}
body.in-game[data-game="rami"] .ra-kind { padding: 1px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
body.in-game[data-game="rami"] .ra-mcards { display: flex; }
body.in-game[data-game="rami"] .ra-meld--suite .ra-mcards .ra-card { margin-left: -16px; }
body.in-game[data-game="rami"] .ra-meld--suite .ra-mcards .ra-card:first-child { margin-left: 0; }
body.in-game[data-game="rami"] .ra-meld--set .ra-mcards .ra-card { margin-left: -20px; }
body.in-game[data-game="rami"] .ra-meld--set .ra-mcards .ra-card:first-child { margin-left: 0; }
body.in-game[data-game="rami"] .ra-meld.completable {
  cursor: pointer; border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.in-game[data-game="rami"] .ra-drop {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 9px; font-weight: 900; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* --- Dock : panier (tray) + main + actions --- */
body.in-game[data-game="rami"] .ra-dock { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
body.in-game[data-game="rami"] .ra-tray {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-height: 30px; padding: 0 4px;
}
body.in-game[data-game="rami"] .ra-prompt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
body.in-game[data-game="rami"] .ra-prompt b { color: var(--text); }
body.in-game[data-game="rami"] .ra-verdict {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px;
}
body.in-game[data-game="rami"] .ra-verdict.ok { background: var(--valid-soft); border: 1px solid var(--valid-brd); color: #a7f3d0; }
body.in-game[data-game="rami"] .ra-verdict.no { background: var(--invalid-soft); border: 1px solid var(--invalid-brd); color: #fecaca; }
body.in-game[data-game="rami"] .ra-verdict.one { background: color-mix(in srgb, var(--accent-2) 20%, var(--surface)); border: 1px solid var(--border); color: #fbe9c7; }
body.in-game[data-game="rami"] .ra-selchips { display: flex; gap: 4px; }
body.in-game[data-game="rami"] .ra-selchip {
  font-weight: 900; font-size: 12px; padding: 3px 8px; border-radius: 8px; background: #fdfeff; color: #0b0f14;
  border: 1px solid rgba(10, 20, 30, .18); font-variant-numeric: tabular-nums;
}
body.in-game[data-game="rami"] .ra-selchip.red { color: var(--card-red); }
body.in-game[data-game="rami"] .ra-hand-row { display: flex; align-items: flex-end; gap: 10px; }
body.in-game[data-game="rami"] .ra-hand {
  display: flex; gap: 7px; align-items: flex-end; overflow-x: auto; padding: 16px 4px 6px;
  scroll-snap-type: x proximity; flex: 1; min-width: 0;
}
body.in-game[data-game="rami"] .ra-hand .ra-card { scroll-snap-align: center; }
body.in-game[data-game="rami"] .ra-empty { color: var(--muted); font-size: 12px; font-weight: 700; padding: 16px 4px; }
body.in-game[data-game="rami"] .ra-dock-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; padding-bottom: 2px; }
body.in-game[data-game="rami"] .ra-btn {
  min-height: 56px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="rami"] .ra-btn:hover { transform: translateY(-1px); }
body.in-game[data-game="rami"] .ra-btn.lay {
  background: linear-gradient(180deg, var(--valid), #0f9d6b); color: #04160f; border-color: transparent; box-shadow: var(--shadow-md);
}
body.in-game[data-game="rami"] .ra-btn.discard {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #000)); color: #fff; border-color: transparent; box-shadow: var(--shadow-md);
}
body.in-game[data-game="rami"] .ra-btn.primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: #fff; border-color: transparent; box-shadow: var(--shadow-md);
}
body.in-game[data-game="rami"] .ra-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- HUD (chips dans #turnBlock) --- */
body.in-game[data-game="rami"] #turnBlock { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.in-game[data-game="rami"] .ra-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
body.in-game[data-game="rami"] .ra-chip b { font-variant-numeric: tabular-nums; }
body.in-game[data-game="rami"] .ra-chip--turn {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #000)); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
}
body.in-game[data-game="rami"] .ra-chip--turn.wait {
  background: var(--surface); color: #d9c7bc; box-shadow: none;
}
body.in-game[data-game="rami"] .ra-chip--turn .ra-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
body.in-game[data-game="rami"] .ra-chip--turn.wait .ra-dot { background: var(--muted); box-shadow: none; animation: raBlink 1.3s infinite; }
@keyframes raBlink { 50% { opacity: .3; } }
body.in-game[data-game="rami"] .ra-chip--won { background: color-mix(in srgb, var(--valid) 26%, var(--surface)); }
body.in-game[data-game="rami"] .ra-chip--lost { background: color-mix(in srgb, var(--muted) 24%, var(--surface)); }

/* --- Décompte de fin de manche + résultat --- */
body.in-game[data-game="rami"] .ra-backdrop {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(4, 8, 12, .6); backdrop-filter: blur(3px);
}
body.in-game[data-game="rami"] .ra-recap {
  width: 100%; max-width: 440px; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid color-mix(in srgb, #fff 18%, transparent); box-shadow: var(--shadow-lg);
}
body.in-game[data-game="rami"] .ra-recap h4 {
  margin: 0; padding: 10px 14px; font-size: 13px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); border-bottom: 1px solid var(--border);
}
body.in-game[data-game="rami"] .ra-recap-note { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
body.in-game[data-game="rami"] .ra-recap-note b { color: var(--text); }
body.in-game[data-game="rami"] .ra-recap-head, body.in-game[data-game="rami"] .ra-recap-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--border);
}
body.in-game[data-game="rami"] .ra-recap-head { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
body.in-game[data-game="rami"] .ra-recap-row.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
body.in-game[data-game="rami"] .ra-recap-row.out .ra-rnm, body.in-game[data-game="rami"] .ra-recap-row.out .ra-rhand { color: var(--valid); }
body.in-game[data-game="rami"] .ra-rk { width: 20px; text-align: center; font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }
body.in-game[data-game="rami"] .ra-rnm { flex: 1; font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.in-game[data-game="rami"] .ra-rhand { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
body.in-game[data-game="rami"] .ra-rtotal { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent-2); min-width: 34px; text-align: right; }
body.in-game[data-game="rami"] .ra-recap-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
body.in-game[data-game="rami"] .ra-recap-hint { font-size: 11px; color: var(--muted); font-weight: 700; }
body.in-game[data-game="rami"] .ra-result { display: flex; flex-direction: column; align-items: center; gap: 12px; }
body.in-game[data-game="rami"] .ra-result__headline { font-size: 17px; font-weight: 800; }
body.in-game[data-game="rami"] .ra-result__headline.won { color: var(--accent-2); }
body.in-game[data-game="rami"] .ra-result__headline.lost { color: var(--muted); }
body.in-game[data-game="rami"] .ra-exaequo {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border: 1px solid var(--border);
}
body.in-game[data-game="rami"] .ra-recap--final { max-width: 380px; }

/* --- Cover (tuile de sélection de jeu) --- */
.art-rami { position: relative; display: grid; place-items: center; }
.art-rami .fan { font-size: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.art-rami .badge { position: absolute; right: 14px; bottom: 10px; font-size: 20px; opacity: .9; }

/* --- Desktop large : table plus spacieuse, cartes/melds étalés et agrandis (reproduit le
   panneau "3 · Desktop" de la maquette : .d-hand/.d-melds/.d-table) — même convention que
   Mille Bornes/Trio (cartes de main agrandies au-delà de 900×600). --- */
@media (min-width: 900px) and (min-height: 600px) {
  body.in-game[data-game="rami"] .ra-hand .ra-card { --w: 82px; }
  body.in-game[data-game="rami"] .ra-card--meld { --w: 62px; }
  body.in-game[data-game="rami"] .ra-card--pile { --w: 92px; }
  body.in-game[data-game="rami"] .ra-center { gap: 36px; }
  body.in-game[data-game="rami"] .ra-seats { gap: 12px; }
  body.in-game[data-game="rami"] .ra-melds { gap: 14px 18px; }
  body.in-game[data-game="rami"] .ra-hand { gap: 10px; }
}

/* --- Paysage compact --- */
@media (max-width: 820px) {
  body.in-game[data-game="rami"] .ra-card { --w: 52px; }
  body.in-game[data-game="rami"] .ra-meld .ra-card { --w: 42px; }
  /* La pile (pioche/défausse) reste lisible même en compact — comportement inchangé
     (avant ce refactor elle était fixée en style inline, donc déjà immunisée contre ce bloc). */
  body.in-game[data-game="rami"] .ra-card--pile { --w: 60px; }
}

/* ============================================================
   Lobbys aux couleurs du jeu
   La salle d'attente (.wr) et les cartes de salon (.room) portent
   le motif immersif du jeu (var --skin, défini par .g-<cover>) et
   son accent. Voir renderWaitingRoom / renderLobby (render.js) et
   le bloc « Skins immersifs par jeu » plus haut.
   ============================================================ */

/* ---- Cartes de salon (liste « Salons ouverts », page home) ---- */
.room {
  position: relative;
  background: var(--skin, var(--surface-2));
  border: 1px solid var(--skin-brd, rgba(255, 255, 255, .12));
  color: #eaf0f6;
}
.room .room__name { color: #f4f8fc; }
.room .room__sub,
.room .room__game { color: rgba(234, 240, 246, .74); }
.room .room__bar {
  /* Barre d'accent : bord net entre la lame et le motif. */
  box-shadow: 1px 0 0 rgba(0, 0, 0, .35);
}

/* ---- Salle d'attente : TOUT le fond prend le motif du jeu ---- */
/* Le conteneur porte la classe .g-<cover> (donc --skin) et remplit la page ; la carte flotte dessus.
   padding-top : dégage la bande du toast-stack (fixé à top:12px) — la topbar est masquée en jeu. */
.waiting-room {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 46px 14px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--skin, transparent);
}
/* La carte : panneau de verre sombre flottant sur le motif (blur → le motif transparaît). */
.wr {
  position: relative;
  width: min(760px, 100%);
  flex: none;
  background: rgba(6, 10, 16, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--skin-brd, rgba(255, 255, 255, .14));
  border-radius: 22px;
  padding: 22px;
  color: #eaf0f6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .5);
}
/* En-tête : art (emoji) + nom du jeu */
.wr-ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wr-art {
  flex: none; width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; font-size: 28px; line-height: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--skin-brd, rgba(255, 255, 255, .16));
}
.wr .wr-title { color: #f4f8fc; }
.wr .muted { color: #9aa7b4; }
.wr .hand-head .label { color: #9aa7b4; }

/* Cartes joueur : verre sombre, l'état « prêt » prend l'accent du jeu (--g, via .wr.g-<cover> —
   le body n'a PAS de data-game en salle d'attente, on ne dépend donc pas de --accent/--primary). */
.wr .wr-player {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #eaf0f6;
}
.wr .wr-player__name { color: #f4f8fc; }
.wr .wr-player__state { color: #9aa7b4; }
.wr .wr-player.ready {
  border-color: color-mix(in srgb, var(--g, var(--ok)) 60%, transparent);
  background: color-mix(in srgb, var(--g, var(--ok)) 18%, rgba(255, 255, 255, .04));
}
.wr .wr-player.ready .wr-player__state {
  color: color-mix(in srgb, var(--g2, var(--g, var(--ok))) 78%, #eaf0f6);
}
.wr .avatar {
  background: linear-gradient(180deg, var(--g, var(--primary)), var(--g2, var(--g, var(--primary))));
  color: #0b0f14;
}

/* Boutons de l'en-tête + « Je suis prêt » : uniformisés en verre sombre / accent du jeu. */
.wr .wr-head .secondary,
.wr .wr-leave {
  background: rgba(255, 255, 255, .08);
  color: #eaf0f6;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: none;
}
.wr .wr-leave { color: #9aa7b4; }
.wr .wr-head .secondary:hover,
.wr .wr-leave:hover { background: rgba(255, 255, 255, .14); color: #eaf0f6; }
.wr .wr-cta {
  background: linear-gradient(180deg, var(--g, var(--primary)), color-mix(in srgb, var(--g, var(--primary)) 68%, #000));
  border: 1px solid transparent; color: #fff;
}
.wr .wr-cta.secondary {
  background: rgba(255, 255, 255, .08); color: #eaf0f6; border: 1px solid rgba(255, 255, 255, .16);
}

@media (max-width: 560px) {
  .wr { padding: 16px; border-radius: 18px; }
  .wr-art { width: 46px; height: 46px; font-size: 24px; }
}

/* ============================================================
   CHÂTEAU FORT (Citadelles) — reproduit ux-design/mockups/chateau_fort.html.
   Scopé body.in-game[data-game="chateau_fort"] ; classes préfixées .cf-.
   Âme « médiéval bâtisseur » : pierre nocturne + parchemin, or blason #D4AF37 /
   rouge héraldique #8B2E2E. 5 couleurs de quartier double-codées (couleur + forme).
   ============================================================ */
body.in-game[data-game="chateau_fort"] {
  --primary: #d4af37; --accent: #d4af37; --accent-2: #8b2e2e; --on-accent: #1a130a;
  --stone-1: #26313b; --stone-2: #171f27; --stone-3: #0e141a;
  --gold-brd: rgba(212, 175, 55, .5);
  --parch: #efe2c2; --parch-2: #dcc79a; --parch-ink: #3a2a12; --parch-brd: rgba(120, 80, 20, .5);
  --noble: #e9c46a; --relig: #5b8def; --trade: #4fb477; --milit: #d0554f; --wonder: #a874e0;
}
body.in-game[data-game="chateau_fort"] .q-noble { --c: var(--noble); }
body.in-game[data-game="chateau_fort"] .q-religious { --c: var(--relig); }
body.in-game[data-game="chateau_fort"] .q-trade { --c: var(--trade); }
body.in-game[data-game="chateau_fort"] .q-military { --c: var(--milit); }
body.in-game[data-game="chateau_fort"] .q-wonder { --c: var(--wonder); }

/* --- La pierre : dalles nocturnes + liseré or --- */
body.in-game[data-game="chateau_fort"] .table {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(212, 175, 55, .10), transparent 55%),
    radial-gradient(120% 130% at 50% 45%, var(--stone-1) 0%, var(--stone-2) 52%, var(--stone-3) 100%);
  border: 1px solid var(--gold-brd);
  box-shadow: inset 0 0 44px rgba(0, 0, 0, .45);
}

/* --- Ossature du plateau (scroll interne, main jamais coupée) --- */
body.in-game[data-game="chateau_fort"] .cf-board {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: safe center; gap: 10px;
}
/* En phase TURNS c'est .cf-stage (flex:1) qui remplit ; ce centrage ne joue donc que sur la phase
   DRAFT (contenu court : sièges + écartés) pour ne pas laisser un grand vide sous les cartes. */
/* Bloc de jeu (sièges + ma cité) centré sous la frise : équilibre le vide de « table » en
   début de partie plutôt que de tout laisser sous la cité. */
body.in-game[data-game="chateau_fort"] .cf-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}

/* --- Frise des rangs 1->8 (colonne vertébrale de la phase TURNS) --- */
body.in-game[data-game="chateau_fort"] .cf-rail {
  display: flex; gap: 4px; align-items: flex-start; justify-content: center;
  flex-wrap: nowrap; overflow-x: auto; padding: 2px 4px; flex: 0 0 auto;
}
body.in-game[data-game="chateau_fort"] .cf-rnode {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px;
}
body.in-game[data-game="chateau_fort"] .cf-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--surface-2); border: 1px solid var(--border); color: #cbbba3;
}
body.in-game[data-game="chateau_fort"] .cf-num .cf-emb { font-size: 14px; }
body.in-game[data-game="chateau_fort"] .cf-rn {
  font-size: 8.5px; font-weight: 800; color: #b7a98e; white-space: nowrap;
}
body.in-game[data-game="chateau_fort"] .cf-rnode.done { opacity: .5; }
body.in-game[data-game="chateau_fort"] .cf-rnode.cur .cf-num {
  background: linear-gradient(180deg, var(--accent), #a9821f); color: #241a06; border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.in-game[data-game="chateau_fort"] .cf-rnode.cur .cf-rn { color: var(--accent); font-weight: 900; }
body.in-game[data-game="chateau_fort"] .cf-rnode.killed .cf-num {
  background: color-mix(in srgb, var(--danger) 32%, var(--surface)); color: #fca5a5;
  border-color: transparent; text-decoration: line-through;
}
body.in-game[data-game="chateau_fort"] .cf-rnode.killed .cf-rn { color: #f0a29c; }

/* --- Sièges adverses (cité en réduit) --- */
body.in-game[data-game="chateau_fort"] .cf-seats {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; flex: 0 0 auto;
}
body.in-game[data-game="chateau_fort"] .cf-pl {
  display: flex; flex-direction: column; gap: 3px; padding: 5px 8px; border-radius: var(--r-md);
  min-width: 120px; max-width: 170px;
  background: linear-gradient(180deg, rgba(10, 14, 20, .6), rgba(10, 14, 20, .34));
  border: 1px solid var(--border);
}
body.in-game[data-game="chateau_fort"] .cf-pl.active {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
}
body.in-game[data-game="chateau_fort"] .cf-top { display: flex; align-items: center; gap: 6px; }
body.in-game[data-game="chateau_fort"] .cf-av {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 10.5px; color: #fff; border: 2px solid rgba(255, 255, 255, .18);
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
}
body.in-game[data-game="chateau_fort"] .cf-nm {
  font-size: 11.5px; font-weight: 800; color: #f1e7d6; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 78px;
}
body.in-game[data-game="chateau_fort"] .cf-crown { font-size: 12px; filter: drop-shadow(0 0 4px rgba(212, 175, 55, .7)); }
body.in-game[data-game="chateau_fort"] .cf-g {
  margin-left: auto; font-size: 10.5px; font-weight: 900; color: #f3e4b8; font-variant-numeric: tabular-nums;
}
body.in-game[data-game="chateau_fort"] .cf-mcity { display: flex; gap: 2px; flex-wrap: wrap; }
body.in-game[data-game="chateau_fort"] .cf-mt {
  width: 12px; height: 16px; border-radius: 3px; background: var(--c, #666);
  border: 1px solid rgba(0, 0, 0, .35); display: grid; place-items: center;
  font-size: 8px; line-height: 1; color: rgba(0, 0, 0, .55); font-weight: 900;
}
body.in-game[data-game="chateau_fort"] .cf-count { font-size: 9.5px; font-weight: 800; color: #b7a98e; }
body.in-game[data-game="chateau_fort"] .cf-role {
  display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: #e7d9be;
}
body.in-game[data-game="chateau_fort"] .cf-role.secret { color: #9a8c72; }
body.in-game[data-game="chateau_fort"] .cf-role.killed { color: #fca5a5; border-color: rgba(248, 113, 113, .5); }
body.in-game[data-game="chateau_fort"] .cf-seats.dense .cf-pl { min-width: 104px; padding: 4px 6px; }

/* --- Ma cité : rangée de quartiers construits --- */
body.in-game[data-game="chateau_fort"] .cf-mine { display: flex; flex-direction: column; gap: 4px; }
body.in-game[data-game="chateau_fort"] .cf-lab {
  font-size: 10px; font-weight: 800; color: #b7a98e; text-transform: uppercase; letter-spacing: .05em;
}
body.in-game[data-game="chateau_fort"] .cf-goal { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }
body.in-game[data-game="chateau_fort"] .cf-city { display: flex; gap: 5px; align-items: flex-end; flex-wrap: wrap; }
body.in-game[data-game="chateau_fort"] .cf-qt {
  position: relative; width: 48px; height: 60px; border-radius: 8px; padding: 5px; flex: none;
  display: flex; flex-direction: column; justify-content: space-between; color: #12181e;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, color-mix(in srgb, var(--c) 62%, #1a222b) 100%);
  border: 1px solid color-mix(in srgb, var(--c) 45%, #000); box-shadow: var(--shadow-sm);
}
body.in-game[data-game="chateau_fort"] .cf-qt .cf-cost { font-weight: 900; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
body.in-game[data-game="chateau_fort"] .cf-qt .cf-shp { position: absolute; top: 4px; right: 5px; font-size: 11px; color: rgba(0, 0, 0, .55); }
body.in-game[data-game="chateau_fort"] .cf-qt .cf-qn { font-size: 8px; font-weight: 900; line-height: 1; color: rgba(0, 0, 0, .72); }
body.in-game[data-game="chateau_fort"] .cf-qt.slot {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 6px, transparent 6px 12px);
  border: 1px dashed var(--border); color: var(--muted); align-items: center; justify-content: center;
}
body.in-game[data-game="chateau_fort"] .cf-qt.slot .cf-ph { font-size: 16px; opacity: .5; }

/* --- Centre de la phase SELECTION (rappel écartés) --- */
body.in-game[data-game="chateau_fort"] .cf-selcenter { display: flex; justify-content: center; padding: 6px; }
body.in-game[data-game="chateau_fort"] .cf-draftinfo { text-align: center; }
body.in-game[data-game="chateau_fort"] .cf-hors {
  font-size: 11px; font-weight: 900; color: #b7a98e; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
body.in-game[data-game="chateau_fort"] .cf-gonewrap { display: flex; gap: 8px; align-items: center; justify-content: center; }
body.in-game[data-game="chateau_fort"] .cf-hint { font-size: 9.5px; color: #9a8c72; margin-top: 5px; font-weight: 700; }
body.in-game[data-game="chateau_fort"] .cf-none { font-size: 11px; color: var(--muted); }

/* --- Cartes personnage (pool + écartés + dos) --- */
body.in-game[data-game="chateau_fort"] .cf-pool { display: flex; gap: 8px; padding: 8px 4px 2px; overflow-x: auto; }
body.in-game[data-game="chateau_fort"] .cf-char {
  --w: 80px; flex: none; width: var(--w); aspect-ratio: 5 / 7; border-radius: 11px; position: relative;
  padding: 5px 4px 4px; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, var(--parch), var(--parch-2)); color: var(--parch-ink);
  border: 1px solid var(--parch-brd); box-shadow: var(--shadow-md); user-select: none;
}
body.in-game[data-game="chateau_fort"] .cf-char .cf-rk {
  position: absolute; top: 3px; left: 6px; font-weight: 900; font-size: calc(var(--w) * .22); color: #7a5a1e; font-variant-numeric: tabular-nums;
}
body.in-game[data-game="chateau_fort"] .cf-char .cf-emb { font-size: calc(var(--w) * .42); margin-top: calc(var(--w) * .16); line-height: 1; }
body.in-game[data-game="chateau_fort"] .cf-char .cf-cn { margin-top: auto; font-weight: 900; font-size: calc(var(--w) * .145); text-align: center; line-height: 1; }
body.in-game[data-game="chateau_fort"] .cf-char .cf-pw { font-size: calc(var(--w) * .115); color: #6b5024; text-align: center; line-height: 1.02; font-weight: 700; margin-top: 2px; }
body.in-game[data-game="chateau_fort"] .cf-char.pick { cursor: pointer; box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
body.in-game[data-game="chateau_fort"] .cf-char.pick:hover { transform: translateY(-3px); }
body.in-game[data-game="chateau_fort"] .cf-char.sel { transform: translateY(-12px); outline: 2px solid var(--accent); }
body.in-game[data-game="chateau_fort"] .cf-char.gone { filter: grayscale(.85) brightness(.72); opacity: .6; position: relative; }
/* Écarté face visible (maquette) : libellé rouge en bas de carte, en plus du grisé (double codage). */
/* « écarté » : TAMPON centré et lisible (avant : label au ras du bas qui chevauchait le nom et le
   pouvoir de la carte). Un chip incliné, distinct, posé au centre de la carte grisée. */
body.in-game[data-game="chateau_fort"] .cf-char .cf-goneflag {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg);
  padding: 2px 9px; border-radius: 6px; background: rgba(204, 51, 85, .92); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5); white-space: nowrap;
}
/* Le nom/pouvoir sous le tampon sont estompés pour ne plus créer d'ambiguïté de lecture. */
body.in-game[data-game="chateau_fort"] .cf-char.gone .cf-cn,
body.in-game[data-game="chateau_fort"] .cf-char.gone .cf-pw { opacity: .3; }
body.in-game[data-game="chateau_fort"] .cf-char.back {
  background: repeating-linear-gradient(45deg, #2c2113, #2c2113 6px, #38290f 6px, #38290f 12px);
  border: 1px solid var(--gold-brd); display: grid; place-items: center;
}
body.in-game[data-game="chateau_fort"] .cf-char.back .cf-crest { color: var(--accent); font-size: calc(var(--w) * .42); }

/* --- Dock : tray (étapes) + main / actions --- */
body.in-game[data-game="chateau_fort"] .cf-dock {
  background: linear-gradient(180deg, rgba(8, 11, 16, .5), rgba(8, 11, 16, .78));
  border-top: 1px solid var(--gold-brd); padding: 6px 12px 9px; display: grid; gap: 5px;
}
body.in-game[data-game="chateau_fort"] .cf-tray { display: flex; align-items: center; gap: 9px; min-height: 28px; flex-wrap: wrap; }
body.in-game[data-game="chateau_fort"] .cf-prompt { font-size: 12.5px; font-weight: 800; color: #f1e7d6; }
body.in-game[data-game="chateau_fort"] .cf-steps { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: #9a8c72; flex-wrap: wrap; }
body.in-game[data-game="chateau_fort"] .cf-st { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
body.in-game[data-game="chateau_fort"] .cf-st.on { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: var(--gold-brd); color: #f3e4b8; }
body.in-game[data-game="chateau_fort"] .cf-st.done { color: var(--ok, #22c55e); }
body.in-game[data-game="chateau_fort"] .cf-arw { color: var(--muted); }

body.in-game[data-game="chateau_fort"] .cf-hand-row { display: flex; align-items: flex-end; gap: 10px; }
body.in-game[data-game="chateau_fort"] .cf-hand { display: flex; gap: 8px; padding: 6px 2px 2px; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
body.in-game[data-game="chateau_fort"] .cf-empty { font-size: 12px; color: var(--muted); padding: 12px; }
body.in-game[data-game="chateau_fort"] .cf-dcard {
  --w: 62px; flex: none; width: var(--w); aspect-ratio: 5 / 7; border-radius: 10px; position: relative;
  padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, var(--parch), var(--parch-2)); color: var(--parch-ink);
  border: 1px solid color-mix(in srgb, var(--c) 55%, var(--parch-brd)); box-shadow: var(--shadow-md); user-select: none;
}
body.in-game[data-game="chateau_fort"] .cf-dcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 10px 10px 0 0; background: var(--c);
}
body.in-game[data-game="chateau_fort"] .cf-dcard .cf-cost {
  position: absolute; top: 8px; left: 6px; font-weight: 900; font-size: 15px; color: #3a2a12; font-variant-numeric: tabular-nums;
}
body.in-game[data-game="chateau_fort"] .cf-dcard .cf-shp { font-size: calc(var(--w) * .4); color: color-mix(in srgb, var(--c) 78%, #3a2a12); line-height: 1; }
body.in-game[data-game="chateau_fort"] .cf-dcard .cf-nm { font-size: calc(var(--w) * .145); font-weight: 900; text-align: center; line-height: 1; }
body.in-game[data-game="chateau_fort"] .cf-dcard.build { cursor: pointer; box-shadow: var(--shadow-md), 0 0 0 2px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
body.in-game[data-game="chateau_fort"] .cf-dcard.build:hover { transform: translateY(-3px); }
body.in-game[data-game="chateau_fort"] .cf-dcard.dim { filter: grayscale(.5) brightness(.85); opacity: .62; position: relative; }
/* Non constructible maintenant (trop cher ou quota de construction atteint) : double codage
   grisé + coût rouge + cadenas (maquette : "quartier trop cher = grisé + prix rouge"). */
body.in-game[data-game="chateau_fort"] .cf-dcard.dim .cf-cost { color: var(--danger, #ef4444); }
body.in-game[data-game="chateau_fort"] .cf-dcard.dim::after {
  content: "🔒"; position: absolute; right: 5px; bottom: 4px; font-size: 11px;
}

body.in-game[data-game="chateau_fort"] .cf-dock-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
body.in-game[data-game="chateau_fort"] .cf-power-tray { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 340px; }
body.in-game[data-game="chateau_fort"] .cf-btn {
  min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: #f1e7d6;
}
body.in-game[data-game="chateau_fort"] .cf-btn:hover { transform: translateY(-1px); }
body.in-game[data-game="chateau_fort"] .cf-btn.income { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 64%, #000)); color: #241a06; border-color: transparent; }
body.in-game[data-game="chateau_fort"] .cf-btn.power { background: color-mix(in srgb, var(--accent-2) 42%, var(--surface)); border-color: transparent; color: #f6d9d0; min-height: 40px; font-size: 12px; }
body.in-game[data-game="chateau_fort"] .cf-btn.end { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 64%, #000)); color: #241a06; border-color: transparent; }

/* --- HUD (chips dans #turnBlock) --- */
body.in-game[data-game="chateau_fort"] #turnBlock { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.in-game[data-game="chateau_fort"] .cf-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; background: var(--surface-2); border: 1px solid var(--border); color: #f1e7d6;
}
body.in-game[data-game="chateau_fort"] .cf-chip b { font-weight: 900; font-variant-numeric: tabular-nums; }
body.in-game[data-game="chateau_fort"] .cf-chip.phase { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000)); color: #241a06; border-color: transparent; }
body.in-game[data-game="chateau_fort"] .cf-chip.phase.wait { background: var(--surface); color: #cbbba3; }
body.in-game[data-game="chateau_fort"] .cf-chip.phase .cf-dot { width: 7px; height: 7px; border-radius: 50%; background: #241a06; }
body.in-game[data-game="chateau_fort"] .cf-chip.phase.wait .cf-dot { background: var(--muted); }
body.in-game[data-game="chateau_fort"] .cf-chip.gold { background: linear-gradient(180deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .10)); border-color: var(--gold-brd); color: #f3e4b8; }
body.in-game[data-game="chateau_fort"] .cf-chip.won { background: color-mix(in srgb, var(--ok, #22c55e) 26%, var(--surface)); color: #86efac; }
body.in-game[data-game="chateau_fort"] .cf-chip.lost { background: color-mix(in srgb, var(--danger) 26%, var(--surface)); color: #fca5a5; }

/* --- Modale de fin (décompte) — non scopée (le body peut avoir quitté in-game) --- */
.cf-score { min-width: 300px; }
.cf-score h3 { margin: 0 0 3px; font-size: 17px; }
.cf-score .note { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.cf-score table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-score th { text-align: right; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.cf-score th.name { text-align: left; }
.cf-score td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }
.cf-score td.name { text-align: left; font-weight: 800; }
.cf-score td.total { font-weight: 900; color: #d4af37; }
.cf-score tr.win td { color: #f3e4b8; }
.cf-score .pos { display: inline-block; width: 16px; color: var(--muted); font-weight: 900; }

/* --- Cover lobby --- */
.art-chateaufort { display: grid; place-items: center; position: relative; font-size: 30px; }
.art-chateaufort .crown { position: absolute; top: -2px; right: 6px; font-size: 16px; }

/* --- Responsive : mobile paysage, cartes/tuiles plus compactes --- */
@media (max-width: 720px) {
  body.in-game[data-game="chateau_fort"] .cf-char { --w: 66px; }
  body.in-game[data-game="chateau_fort"] .cf-dcard { --w: 54px; }
  body.in-game[data-game="chateau_fort"] .cf-qt { width: 42px; height: 54px; }
  body.in-game[data-game="chateau_fort"] .cf-pl { min-width: 96px; }
}

/* --- Château Fort v2 : modale de revenu, popover de ciblage, boutons merveille --- */
body.in-game[data-game="chateau_fort"] .cf-backdrop,
body.in-game[data-game="chateau_fort"] .cf-pop-back {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(4, 8, 12, .55); backdrop-filter: blur(2px);
}
body.in-game[data-game="chateau_fort"] .cf-modal {
  min-width: 280px; max-width: 90%; padding: 18px; border-radius: 18px;
  background: var(--bg-2, #0e141b); border: 1px solid var(--gold-brd); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
body.in-game[data-game="chateau_fort"] .cf-modal-t { font-size: 15px; font-weight: 900; color: #f1e7d6; margin-bottom: 3px; }
body.in-game[data-game="chateau_fort"] .cf-modal-d { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
body.in-game[data-game="chateau_fort"] .cf-income { display: flex; gap: 12px; justify-content: center; }
body.in-game[data-game="chateau_fort"] .cf-inc {
  flex: 1; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; border-radius: 14px; cursor: pointer; background: var(--surface);
  border: 1px solid var(--border); color: #f1e7d6;
}
body.in-game[data-game="chateau_fort"] .cf-inc:hover { border-color: var(--gold-brd); }
body.in-game[data-game="chateau_fort"] .cf-inc-big { font-size: 26px; line-height: 1; }
body.in-game[data-game="chateau_fort"] .cf-inc-lbl { font-size: 13px; font-weight: 900; }

body.in-game[data-game="chateau_fort"] .cf-pop {
  min-width: 240px; max-width: 92%; max-height: 80%; overflow-y: auto; padding: 12px; border-radius: 14px;
  background: var(--bg-2, #0e141b); border: 1px solid var(--gold-brd); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 6px;
}
body.in-game[data-game="chateau_fort"] .cf-pop-h { font-size: 12px; font-weight: 900; color: #f1e7d6; margin-bottom: 2px; }
body.in-game[data-game="chateau_fort"] .cf-pop-row {
  min-height: 40px; padding: 0 12px; border-radius: 10px; text-align: left; font-size: 13px; font-weight: 800;
  cursor: pointer; background: color-mix(in srgb, var(--accent-2) 30%, var(--surface));
  border: 1px solid var(--border); color: #f6d9d0;
}
body.in-game[data-game="chateau_fort"] .cf-pop-row:hover { border-color: var(--gold-brd); }
body.in-game[data-game="chateau_fort"] .cf-pop-x {
  min-height: 40px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  color: #cbbba3; font-weight: 800; cursor: pointer; margin-top: 4px;
}
body.in-game[data-game="chateau_fort"] .cf-btn.wonder {
  background: color-mix(in srgb, var(--wonder) 34%, var(--surface)); border-color: transparent;
  color: #efe0ff; min-height: 40px; font-size: 12px;
}

/* --- Château Fort : PHONE PAYSAGE (large mais court). La media query max-width ne se déclenche
   jamais en paysage (924×412 > 720) ; on cible donc la HAUTEUR courte pour compacter tout le
   plateau et tenir SANS scroll. --- */
@media (max-height: 520px) {
  body.in-game[data-game="chateau_fort"] .cf-board { gap: 5px; }
  body.in-game[data-game="chateau_fort"] .cf-stage { gap: 6px; }
  /* Frise des rangs plus compacte */
  body.in-game[data-game="chateau_fort"] .cf-rail { gap: 3px; padding: 0 2px; }
  body.in-game[data-game="chateau_fort"] .cf-rnode { min-width: 32px; }
  body.in-game[data-game="chateau_fort"] .cf-num { width: 22px; height: 22px; font-size: 11px; }
  body.in-game[data-game="chateau_fort"] .cf-num .cf-emb { font-size: 12px; }
  body.in-game[data-game="chateau_fort"] .cf-rn { font-size: 7.5px; }
  /* Sièges adverses plus serrés */
  body.in-game[data-game="chateau_fort"] .cf-seats { gap: 6px; }
  body.in-game[data-game="chateau_fort"] .cf-pl { min-width: 88px; padding: 3px 6px; gap: 2px; }
  body.in-game[data-game="chateau_fort"] .cf-av { width: 20px; height: 20px; font-size: 9px; }
  body.in-game[data-game="chateau_fort"] .cf-nm { font-size: 10.5px; max-width: 66px; }
  body.in-game[data-game="chateau_fort"] .cf-mt { width: 10px; height: 13px; font-size: 7px; }
  body.in-game[data-game="chateau_fort"] .cf-count, body.in-game[data-game="chateau_fort"] .cf-role { font-size: 8.5px; }
  /* Ma cité : tuiles réduites */
  body.in-game[data-game="chateau_fort"] .cf-lab { font-size: 9px; }
  body.in-game[data-game="chateau_fort"] .cf-city { gap: 4px; }
  body.in-game[data-game="chateau_fort"] .cf-qt { width: 38px; height: 48px; padding: 3px 4px; }
  body.in-game[data-game="chateau_fort"] .cf-qt .cf-cost { font-size: 12px; }
  body.in-game[data-game="chateau_fort"] .cf-qt .cf-qn { font-size: 7px; }
  /* Pool de personnages (phase SELECTION) réduit */
  body.in-game[data-game="chateau_fort"] .cf-char { --w: 58px; }
  body.in-game[data-game="chateau_fort"] .cf-pool { gap: 6px; padding: 4px 2px 0; }
  /* Dock plus court : main + barre d'action */
  body.in-game[data-game="chateau_fort"] .cf-dock { padding: 4px 10px 6px; gap: 3px; }
  body.in-game[data-game="chateau_fort"] .cf-tray { min-height: 20px; gap: 6px; }
  body.in-game[data-game="chateau_fort"] .cf-hand { padding: 3px 2px 0; gap: 6px; }
  body.in-game[data-game="chateau_fort"] .cf-dcard { --w: 46px; }
  body.in-game[data-game="chateau_fort"] .cf-hand-row { gap: 8px; }
  body.in-game[data-game="chateau_fort"] .cf-btn { min-height: 38px; font-size: 12px; padding: 0 11px; }
  body.in-game[data-game="chateau_fort"] .cf-btn.power,
  body.in-game[data-game="chateau_fort"] .cf-btn.wonder,
  body.in-game[data-game="chateau_fort"] .cf-btn.end { min-height: 34px; font-size: 11px; }
}

/* ============================================================
   CHÂTEAU FORT — habillage « château fort » (port de la maquette) :
   emblème fortin en filigrane dans le vide du plateau, parapet crénelé
   sur le dock, quartiers de cité rendus comme des bâtiments fortifiés
   (merlons sur le toit).
   ============================================================ */

/* Plateau aligné en haut (comme la maquette) : le vide sous la cité accueille l'emblème. */
body.in-game[data-game="chateau_fort"] .cf-stage { justify-content: flex-start; }

/* Emblème fortin (silhouette de château crénelé) en filigrane au centre-bas du plateau. */
body.in-game[data-game="chateau_fort"] .cf-board {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20160%20120%27%3E%3Cg%20opacity%3D%270.4%27%3E%3Cg%20fill%3D%27%23d4af37%27%3E%3Crect%20x%3D%2716%27%20y%3D%2746%27%20width%3D%2730%27%20height%3D%2762%27%2F%3E%3Crect%20x%3D%27114%27%20y%3D%2746%27%20width%3D%2730%27%20height%3D%2762%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%2730%27%20width%3D%2756%27%20height%3D%2778%27%2F%3E%3Crect%20x%3D%2716%27%20y%3D%2740%27%20width%3D%277%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2727%27%20y%3D%2740%27%20width%3D%277%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2738%27%20y%3D%2740%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%27114%27%20y%3D%2740%27%20width%3D%277%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%27125%27%20y%3D%2740%27%20width%3D%277%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%27136%27%20y%3D%2740%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%2724%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2764%27%20y%3D%2724%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2776%27%20y%3D%2724%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2788%27%20y%3D%2724%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%27100%27%20y%3D%2724%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2779%27%20y%3D%274%27%20width%3D%272%27%20height%3D%2722%27%2F%3E%3Cpath%20d%3D%27M81%207%20l16%205%20-16%205%20z%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%230b1016%27%3E%3Cpath%20d%3D%27M66%20108%20v-26%20a14%2014%200%200%201%2028%200%20v26%20z%27%2F%3E%3Crect%20x%3D%2726%27%20y%3D%2762%27%20width%3D%2710%27%20height%3D%2714%27%20rx%3D%273%27%2F%3E%3Crect%20x%3D%27124%27%20y%3D%2762%27%20width%3D%2710%27%20height%3D%2714%27%20rx%3D%273%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center 72% / 168px auto no-repeat;
}

/* Parapet crénelé au-dessus du dock : on tient sa main derrière le rempart. */
body.in-game[data-game="chateau_fort"] .cf-dock { position: relative; }
body.in-game[data-game="chateau_fort"] .cf-dock::before {
  content: ""; position: absolute; top: -7px; left: 0; right: 0; height: 7px; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--stone-1) 96%, #000) 0 22px, transparent 22px 42px);
  filter: drop-shadow(0 -1px 0 var(--gold-brd));
}

/* Quartiers construits = petits bâtiments fortifiés : base + merlons (créneaux) sur le toit. */
body.in-game[data-game="chateau_fort"] .cf-qt {
  border-radius: 3px 3px 8px 8px; overflow: visible; margin-top: 5px;
}
body.in-game[data-game="chateau_fort"] .cf-qt::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: -5px; height: 5px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 52%, #000) 0 6px, transparent 6px 10px);
}
body.in-game[data-game="chateau_fort"] .cf-qt.slot { border-radius: 8px; }
body.in-game[data-game="chateau_fort"] .cf-qt.slot::before { display: none; }

/* Phone paysage : pas de place pour un filigrane, on le masque (le plateau est déjà rempli). */
@media (max-height: 520px) {
  body.in-game[data-game="chateau_fort"] .cf-board { background-image: none; }
  body.in-game[data-game="chateau_fort"] .cf-qt { margin-top: 5px; }
}

/* Château Fort : pastille « mon rôle » au HUD (look parchemin, comme ta carte personnage). */
body.in-game[data-game="chateau_fort"] .cf-chip.role {
  background: linear-gradient(180deg, var(--parch, #efe2c2), var(--parch-2, #dcc79a));
  color: var(--parch-ink, #3a2a12); border-color: var(--parch-brd, rgba(120, 80, 20, .5));
  font-weight: 800;
}
body.in-game[data-game="chateau_fort"] .cf-chip.role b { color: #241a06; }

/* ============================================================
   LE CIEL DE JO (Skyjo-like) — reproduit ux-design/mockups/ciel_de_jo.html.
   Tout est scopé body.in-game[data-game="ciel_de_jo"] ; classes préfixées .cdj-.
   Âme « chiffres colorés » sous un ciel nocturne : accent bleu ciel #38BDF8 /
   violet #A78BFA. La couleur ne fait que RENFORCER la valeur (le chiffre reste
   la vérité, double codage, daltonisme-safe). Zéro scroll, cibles ≥44px.
   ============================================================ */
body.in-game[data-game="ciel_de_jo"] { --primary: #38bdf8; --accent: #38bdf8; --accent-2: #a78bfa; --on-accent: #04121c; }
body.in-game[data-game="ciel_de_jo"] {
  --v-neg-1: #4f46e5; --v-neg-2: #3730a3;
  --v-zero-1: #22d3ee; --v-zero-2: #0e7490;
  --v-lo-1: #22c55e; --v-lo-2: #15803d;
  --v-mid-1: #f59e0b; --v-mid-2: #b45309;
  --v-hi-1: #ef4444; --v-hi-2: #991b1b;
}

/* --- Ciel nocturne : fond neutre profond + fines etoiles (dans le fond, pas de pseudo) --- */
body.in-game[data-game="ciel_de_jo"] .table {
  position: relative;
  background:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 16%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 62%, rgba(255, 255, 255, .32), transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 82%, rgba(255, 255, 255, .38), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 58%, rgba(255, 255, 255, .3), transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 40%, rgba(167, 139, 250, .6), transparent 60%),
    radial-gradient(120% 90% at 50% -10%, rgba(56, 189, 248, .12), transparent 55%),
    radial-gradient(130% 120% at 50% 60%, #0c1220 0%, #0a0f1a 55%, #070b12 100%);
  border: 1px solid rgba(56, 189, 248, .22);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .5);
}

/* --- Ossature du plateau (adverses en haut, tas au centre) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-board {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
body.in-game[data-game="ciel_de_jo"] .cdj-opps {
  display: flex; gap: 8px; justify-content: center; align-items: flex-start;
  flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}
body.in-game[data-game="ciel_de_jo"] .cdj-center {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 22px;
}

/* --- Carte de grille (le composant central) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-gc {
  --w: 44px; width: var(--w); aspect-ratio: 5 / 7; border-radius: 10px; position: relative;
  display: grid; place-items: center; font-family: var(--num, ui-monospace, monospace); font-weight: 800;
  font-variant-numeric: tabular-nums; user-select: none; color: #06121a;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .45));
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s;
}
body.in-game[data-game="ciel_de_jo"] .cdj-gc .n { font-size: calc(var(--w) * .6); line-height: 1; letter-spacing: -.02em; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.t-neg { background: linear-gradient(180deg, var(--v-neg-1), var(--v-neg-2)); color: #eef; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.t-zero { background: linear-gradient(180deg, var(--v-zero-1), var(--v-zero-2)); color: #04222b; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.t-lo { background: linear-gradient(180deg, var(--v-lo-1), var(--v-lo-2)); color: #04210f; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.t-mid { background: linear-gradient(180deg, var(--v-mid-1), var(--v-mid-2)); color: #241300; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.t-hi { background: linear-gradient(180deg, var(--v-hi-1), var(--v-hi-2)); color: #ffecec; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.back {
  color: transparent; border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(1.4px 1.4px at 30% 32%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 60%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.3px 1.3px at 50% 78%, rgba(167, 139, 250, .8), transparent 60%),
    linear-gradient(180deg, #132038, #0b1424);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .45)), inset 0 0 12px rgba(0, 0, 0, .5);
}
body.in-game[data-game="ciel_de_jo"] .cdj-gc.empty {
  background: transparent; border: 1.5px dashed rgba(255, 255, 255, .16); box-shadow: none;
}
body.in-game[data-game="ciel_de_jo"] .cdj-gc.target {
  cursor: pointer;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-gc.target:hover { transform: translateY(-3px); }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.flip-target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 70%, transparent), 0 0 18px color-mix(in srgb, var(--accent-2) 50%, transparent); }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.dim { filter: grayscale(.5) brightness(.7); opacity: .5; }

/* --- MA grille 4x3 : colonnes groupees (column-gap > row-gap) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-mygrid {
  display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: repeat(3, auto);
  column-gap: 12px; row-gap: 5px; justify-content: center;
}
body.in-game[data-game="ciel_de_jo"] .cdj-mygrid.mini { column-gap: 3px; row-gap: 2px; }
body.in-game[data-game="ciel_de_jo"] .cdj-mygrid.mini .cdj-gc { --w: 15px; border-radius: 3px; border-width: .5px; }
body.in-game[data-game="ciel_de_jo"] .cdj-mygrid.mini .cdj-gc .n { font-size: 10px; }

/* --- Mini-grille adverse --- */
body.in-game[data-game="ciel_de_jo"] .cdj-opp {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); min-width: 0; flex: 0 0 auto;
}
body.in-game[data-game="ciel_de_jo"] .cdj-opp.active {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-who { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: var(--text); max-width: 100%; }
body.in-game[data-game="ciel_de_jo"] .cdj-av {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800;
  color: var(--on-accent); background: linear-gradient(160deg, var(--accent), var(--accent-2));
}
body.in-game[data-game="ciel_de_jo"] .cdj-sc { font-family: var(--num, ui-monospace, monospace); color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }
body.in-game[data-game="ciel_de_jo"] .cdj-flag { font-size: 11px; }

/* --- Tas central (pioche / defausse) + carte tenue --- */
body.in-game[data-game="ciel_de_jo"] .cdj-pilewrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.in-game[data-game="ciel_de_jo"] .cdj-pile { --w: 56px; }
body.in-game[data-game="ciel_de_jo"] .cdj-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
body.in-game[data-game="ciel_de_jo"] .cdj-cnt { font-family: var(--num, ui-monospace, monospace); font-size: 10px; color: var(--muted-2, var(--muted)); }
body.in-game[data-game="ciel_de_jo"] .cdj-held { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.in-game[data-game="ciel_de_jo"] .cdj-held .cdj-gc { --w: 52px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 26px rgba(0, 0, 0, .5); }
body.in-game[data-game="ciel_de_jo"] .cdj-held-lab {
  font-size: 11px; font-weight: 800; color: var(--text); background: var(--surface-2, var(--surface));
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
body.in-game[data-game="ciel_de_jo"] .cdj-arrow { font-size: 20px; color: var(--accent); opacity: .85; }

/* --- Bandeau « dernier tour » --- */
body.in-game[data-game="ciel_de_jo"] .cdj-lastlap {
  flex: 0 0 auto; align-self: center; display: flex; align-items: center; gap: 10px; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: #04121c; background: linear-gradient(180deg, #f59e0b, #b45309);
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .45));
}
body.in-game[data-game="ciel_de_jo"] .cdj-lastlap .n { font-family: var(--num, ui-monospace, monospace); background: rgba(0, 0, 0, .18); border-radius: 999px; padding: 1px 8px; }

/* --- MA grille (zone joueur) : consigne + grille 4×3 + bouton flip --- */
body.in-game[data-game="ciel_de_jo"] .cdj-mine { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
body.in-game[data-game="ciel_de_jo"] .cdj-prompt { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
body.in-game[data-game="ciel_de_jo"] .cdj-gridwrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.in-game[data-game="ciel_de_jo"] .cdj-tot { font-family: var(--num, ui-monospace, monospace); font-size: 12px; font-weight: 800; color: var(--muted); }
body.in-game[data-game="ciel_de_jo"] .cdj-tot b { color: var(--text); }
body.in-game[data-game="ciel_de_jo"] .cdj-dock-actions { position: absolute; right: 10px; bottom: 6px; display: flex; gap: 8px; }
body.in-game[data-game="ciel_de_jo"] .cdj-btn {
  min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--text);
}
body.in-game[data-game="ciel_de_jo"] .cdj-btn.ghost { background: transparent; }
body.in-game[data-game="ciel_de_jo"] .cdj-btn.primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  color: var(--on-accent); border-color: transparent;
}
body.in-game[data-game="ciel_de_jo"] .cdj-mono { font-family: var(--num, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
body.in-game[data-game="ciel_de_jo"] .game-hud .pill--lastlap { background: color-mix(in srgb, var(--warn, #f59e0b) 30%, var(--surface)); border-color: transparent; }

/* --- Modale de decompte de manche --- */
body.in-game[data-game="ciel_de_jo"] .cdj-recap-backdrop {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(4, 8, 12, .62); backdrop-filter: blur(3px);
}
body.in-game[data-game="ciel_de_jo"] .cdj-recap {
  width: min(540px, 92%); padding: 16px 18px; border-radius: 20px; background: var(--bg-2, #0e141b);
  border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
body.in-game[data-game="ciel_de_jo"] .cdj-recap__title { margin: 0 0 4px; font-size: 16px; }
body.in-game[data-game="ciel_de_jo"] .cdj-recap__sub { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
body.in-game[data-game="ciel_de_jo"] .cdj-recap__rows { display: flex; flex-direction: column; gap: 8px; }
body.in-game[data-game="ciel_de_jo"] .cdj-recap-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
}
body.in-game[data-game="ciel_de_jo"] .cdj-recap-row.lead { border-color: color-mix(in srgb, var(--ok, #22c55e) 55%, transparent); }
body.in-game[data-game="ciel_de_jo"] .cdj-recap-row.me { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
body.in-game[data-game="ciel_de_jo"] .cdj-rk { font-family: var(--num, ui-monospace, monospace); font-weight: 800; color: var(--muted); }
body.in-game[data-game="ciel_de_jo"] .cdj-rnm { font-weight: 800; display: flex; align-items: center; gap: 6px; min-width: 0; }
body.in-game[data-game="ciel_de_jo"] .cdj-rbar { height: 8px; width: 90px; border-radius: 999px; background: var(--surface-2, var(--surface)); overflow: hidden; position: relative; }
body.in-game[data-game="ciel_de_jo"] .cdj-rbar > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
body.in-game[data-game="ciel_de_jo"] .cdj-rraw { font-family: var(--num, ui-monospace, monospace); font-weight: 800; text-align: right; min-width: 36px; color: var(--muted); }
body.in-game[data-game="ciel_de_jo"] .cdj-rtotal { font-family: var(--num, ui-monospace, monospace); font-weight: 900; text-align: right; min-width: 44px; }
body.in-game[data-game="ciel_de_jo"] .cdj-x2 {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 900; color: #241300;
  background: var(--warn, #f59e0b); border-radius: 999px; padding: 2px 7px;
}
body.in-game[data-game="ciel_de_jo"] .cdj-pen {
  display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; color: #fff;
  background: var(--danger, #ef4444); border-radius: 999px; padding: 2px 7px; margin-left: 4px;
}
body.in-game[data-game="ciel_de_jo"] .cdj-recap__foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* --- Modale de fin de partie (#gameResultMessage) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-result { display: flex; flex-direction: column; gap: 12px; }
body.in-game[data-game="ciel_de_jo"] .cdj-result__headline { font-size: 18px; font-weight: 900; }
body.in-game[data-game="ciel_de_jo"] .cdj-result__headline.won { color: var(--ok, #22c55e); }
body.in-game[data-game="ciel_de_jo"] .cdj-result__headline.lost { color: var(--danger, #ef4444); }
body.in-game[data-game="ciel_de_jo"] .cdj-recap__rows--final { gap: 8px; }

/* --- Cover / art de tuile --- */
.art-cieldejo { display: flex; gap: 4px; align-items: center; justify-content: center; }
.art-cieldejo .d { font-weight: 900; font-size: 18px; border-radius: 5px; padding: 4px 7px; color: #06121a; font-variant-numeric: tabular-nums; }
.art-cieldejo .d.neg { background: linear-gradient(180deg, #4f46e5, #3730a3); color: #eef; }
.art-cieldejo .d.mid { background: linear-gradient(180deg, #f59e0b, #b45309); color: #241300; }
.art-cieldejo .d.hi { background: linear-gradient(180deg, #ef4444, #991b1b); color: #ffecec; }

/* --- Desktop : plus d air, grilles et cartes agrandies --- */
@media (min-width: 721px) and (min-height: 561px) {
  body.in-game[data-game="ciel_de_jo"] .cdj-mygrid { column-gap: 16px; row-gap: 8px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-mygrid .cdj-gc { --w: 68px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-pile { --w: 84px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-held .cdj-gc { --w: 72px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-mygrid.mini .cdj-gc { --w: 20px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-center { gap: 40px; }
}

/* --- Phone paysage (large + court) : découpage en 3 COLONNES (on exploite la LARGEUR) ---
   Un phone couché est large (~924) et court (~412) : empiler adversaires / tas / grille en hauteur ne
   tient pas. On passe donc .cdj-board en RANGÉE : pioche/défausse à GAUCHE, MA grille au CENTRE
   (grande, elle a toute la hauteur), adversaires en COLONNE à DROITE. Choix utilisateur (2026-08-16). */
@media (max-height: 520px) {
  body.in-game[data-game="ciel_de_jo"] .cdj-board {
    flex-direction: row; align-items: stretch; justify-content: center; gap: 12px; padding: 2px 8px;
  }
  /* Tas centraux : colonne à gauche (pioche au-dessus de la défausse, + carte tenue). */
  body.in-game[data-game="ciel_de_jo"] .cdj-center {
    order: 1; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; align-self: center;
  }
  body.in-game[data-game="ciel_de_jo"] .cdj-pile { --w: 46px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-held { flex-direction: row; align-items: center; gap: 6px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-held .cdj-gc { --w: 46px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-arrow { display: none; }
  /* MA grille : colonne centrale, la vedette — elle a maintenant toute la hauteur. */
  body.in-game[data-game="ciel_de_jo"] .cdj-mine { order: 2; flex: 1 1 auto; align-self: center; }
  body.in-game[data-game="ciel_de_jo"] .cdj-mygrid .cdj-gc { --w: 46px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-mygrid { column-gap: 12px; row-gap: 6px; }
  /* Adversaires : colonne à droite, empilés (scroll interne au-delà de ce qui tient). */
  body.in-game[data-game="ciel_de_jo"] .cdj-opps {
    order: 3; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 5px;
    overflow-y: auto; overflow-x: hidden; align-self: stretch; padding: 2px 0;
  }
  body.in-game[data-game="ciel_de_jo"] .cdj-opp { padding: 3px 6px; gap: 3px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-who { font-size: 9.5px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-mygrid.mini .cdj-gc { --w: 12px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-mygrid.mini .cdj-gc .n { font-size: 8px; }
  /* Le grand bandeau « dernier tour » est masqué en paysage : la pastille du HUD suffit. */
  body.in-game[data-game="ciel_de_jo"] .cdj-lastlap { display: none; }
  body.in-game[data-game="ciel_de_jo"] .cdj-prompt { font-size: 10.5px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-dock-actions { position: static; margin-top: 2px; }
  /* Mode Action : en paysage court, c'est .cdj-play (et non .cdj-board, passé en block) qui porte la
     RANGÉE 3 colonnes. Les enfants (.cdj-center / .cdj-mine / .cdj-opps) héritent des règles ci-dessus.
     Marge gauche pour dégager l'onglet vertical « Cartes action ». */
  body.in-game[data-game="ciel_de_jo"] .cdj-actionmode .cdj-play {
    flex-direction: row; align-items: stretch; justify-content: center; gap: 12px; padding: 2px 8px 2px 40px;
  }
}

/* ---- Le ciel de Jo — MODE ACTION (Skyjo Action) : marché, main, ciblage, réactions ---- */
body.in-game[data-game="ciel_de_jo"] .cdj-gc.t-star {
  background: linear-gradient(180deg, #ffe27a, #f4b73d); color: #3a2600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 12px color-mix(in srgb, #ffd766 55%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-star { color: #6a4a00; }
body.in-game[data-game="ciel_de_jo"] .cdj-actionbar {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: stretch;
  margin: 6px auto; max-width: 760px; width: 100%;
}
body.in-game[data-game="ciel_de_jo"] .cdj-amarket,
body.in-game[data-game="ciel_de_jo"] .cdj-ahand {
  flex: 1 1 330px; min-width: 240px;
  background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, .02));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 12px; padding: 8px 10px;
}
body.in-game[data-game="ciel_de_jo"] .cdj-a-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: color-mix(in srgb, var(--accent) 65%, #fff); margin-bottom: 6px;
}
body.in-game[data-game="ciel_de_jo"] .cdj-arow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.in-game[data-game="ciel_de_jo"] .cdj-acard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 66px; min-height: 62px; padding: 6px 4px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, #23304e, #182135);
  border: 1px solid rgba(255, 255, 255, .14); color: #eaf0ff; font-size: 10px; user-select: none;
  transition: transform .12s ease;
}
body.in-game[data-game="ciel_de_jo"] .cdj-acard .cdj-a-ic { font-size: 20px; line-height: 1; }
body.in-game[data-game="ciel_de_jo"] .cdj-acard .cdj-a-nm { font-size: 9.5px; line-height: 1.05; opacity: .9; }
body.in-game[data-game="ciel_de_jo"] .cdj-acard.back { background: linear-gradient(180deg, #1b2440, #111a2e); color: #6f7ea8; }
body.in-game[data-game="ciel_de_jo"] .cdj-acard.playable,
body.in-game[data-game="ciel_de_jo"] .cdj-acard.target {
  cursor: pointer; border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 4px 14px rgba(0, 0, 0, .4);
}
body.in-game[data-game="ciel_de_jo"] .cdj-acard.playable:hover,
body.in-game[data-game="ciel_de_jo"] .cdj-acard.target:hover { transform: translateY(-3px); }
body.in-game[data-game="ciel_de_jo"] .cdj-acard.defense { opacity: .7; border-style: dashed; }
body.in-game[data-game="ciel_de_jo"] .cdj-a-empty { color: #7c88a8; font-size: 11px; font-style: italic; }
body.in-game[data-game="ciel_de_jo"] .cdj-a-deck,
body.in-game[data-game="ciel_de_jo"] .cdj-a-deckbtn { font-size: 11px; color: #9fb0d8; }
body.in-game[data-game="ciel_de_jo"] .cdj-a-badge {
  font-size: 10px; margin-left: 6px; padding: 1px 5px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #cdd8f4;
}
body.in-game[data-game="ciel_de_jo"] .cdj-actctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center;
  margin: 4px auto 2px; max-width: 720px; padding: 7px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, rgba(0, 0, 0, .25));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 13px; color: #eaf0ff;
}
body.in-game[data-game="ciel_de_jo"] .cdj-actctl.react {
  background: color-mix(in srgb, #e5484d 22%, rgba(0, 0, 0, .3));
  border-color: color-mix(in srgb, #e5484d 55%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-actctl.targeting {
  background: color-mix(in srgb, var(--accent-2) 20%, rgba(0, 0, 0, .3));
  border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-actctl.star {
  background: color-mix(in srgb, #f5c542 20%, rgba(0, 0, 0, .3));
  border-color: color-mix(in srgb, #f5c542 55%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-actctl-ic { font-size: 18px; }
body.in-game[data-game="ciel_de_jo"] .cdj-keeprow { display: flex; gap: 8px; }
body.in-game[data-game="ciel_de_jo"] .cdj-keep { --w: 46px; cursor: pointer; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.pick {
  cursor: pointer;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 75%, transparent), 0 0 16px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-gc.pick:hover { transform: translateY(-2px); }
body.in-game[data-game="ciel_de_jo"] .cdj-opp.picktarget {
  cursor: pointer; border-radius: 8px;
  outline: 2px dashed color-mix(in srgb, var(--accent-2) 60%, transparent); outline-offset: 2px;
}

/* Bug #7 : défausse des cartes action (3e panneau, plus étroit que marché/main). */
body.in-game[data-game="ciel_de_jo"] .cdj-actionbar { max-width: 1000px; }
body.in-game[data-game="ciel_de_jo"] .cdj-adiscard {
  flex: 1 1 200px; min-width: 160px;
  background: color-mix(in srgb, var(--accent-2) 7%, rgba(255, 255, 255, .02));
  border: 1px solid color-mix(in srgb, var(--accent-2) 22%, transparent);
  border-radius: 12px; padding: 8px 10px;
}

/* Bug #3 : cartes action des adversaires visibles en chips compactes (icône seule). */
body.in-game[data-game="ciel_de_jo"] .cdj-opp-hand {
  display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 3px; min-height: 18px;
}
body.in-game[data-game="ciel_de_jo"] .cdj-achip {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 12px;
  background: linear-gradient(180deg, #23304e, #182135); border: 1px solid rgba(255, 255, 255, .14);
}
body.in-game[data-game="ciel_de_jo"] .cdj-opp-hand.stealing .cdj-achip.target {
  cursor: pointer; border-color: color-mix(in srgb, #e5484d 75%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #e5484d 55%, transparent), 0 0 10px color-mix(in srgb, #e5484d 45%, transparent);
}
body.in-game[data-game="ciel_de_jo"] .cdj-opp-hand.stealing .cdj-achip.target:hover { transform: translateY(-2px); }
body.in-game[data-game="ciel_de_jo"] .cdj-opp-hand-empty { color: #6b7986; font-size: 10px; }

/* Bug #2 : ordonner les cartes défaussées d'une ligne/colonne. */
body.in-game[data-game="ciel_de_jo"] .cdj-ordrow {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; width: 100%;
}
body.in-game[data-game="ciel_de_jo"] .cdj-ord-remain,
body.in-game[data-game="ciel_de_jo"] .cdj-ord-stack { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-ord { --w: 38px; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-ord.target { cursor: pointer; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-ord.target:hover { transform: translateY(-2px); }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-ord.picked { opacity: .9; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 75%, transparent); }
body.in-game[data-game="ciel_de_jo"] .cdj-ord-rank { font-weight: 800; font-size: 11px; color: var(--accent-2); margin: 0 4px 0 2px; }
body.in-game[data-game="ciel_de_jo"] .cdj-ord-sep,
body.in-game[data-game="ciel_de_jo"] .cdj-ord-top { color: #9aa7b4; font-size: 11px; font-weight: 700; }
body.in-game[data-game="ciel_de_jo"] .cdj-a-cnt { font-family: var(--num, monospace); font-weight: 800; font-size: 12px; color: #cdd8f4; }

/* Officiel : bouton × pour DÉFAUSSER une carte action (défausse proactive de la Défense = tour bonus). */
body.in-game[data-game="ciel_de_jo"] .cdj-hand-card { position: relative; display: inline-block; }
body.in-game[data-game="ciel_de_jo"] .cdj-a-discard {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); background: color-mix(in srgb, var(--danger, #ef4444) 70%, #000);
  color: #fff; font-weight: 900; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; z-index: 2;
}
body.in-game[data-game="ciel_de_jo"] .cdj-a-discard:hover { transform: scale(1.12); }

/* Bug #5 : aperçu « Révélation » — carte face cachée dévoilée quelques secondes, surlignée + pulsation. */
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-peeked {
  outline: 2px solid color-mix(in srgb, var(--accent-2) 85%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 16px color-mix(in srgb, var(--accent-2) 60%, transparent);
  animation: cdj-peek-pulse 1.1s ease-in-out infinite;
}
@keyframes cdj-peek-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* ============================================================================
   Le ciel de Jo — MODE ACTION : refonte UX (panneau latéral + drawer + modales)
   ========================================================================= */
/* Le plateau mode Action est un conteneur positionné : gamewrap (panneau + jeu) + onglet + modales. */
body.in-game[data-game="ciel_de_jo"] .cdj-board.cdj-actionmode {
  display: block; position: relative; padding: 0; overflow: visible;
}
body.in-game[data-game="ciel_de_jo"] .cdj-gamewrap { display: flex; height: 100%; min-height: 0; }
/* Le plateau (hors cartes action, désormais dans le panneau) réutilise EXACTEMENT la mise en page
   d'origine : colonne en desktop/portrait, et RANGÉE 3 colonnes en paysage court (tas à gauche, MA
   grille au centre, adversaires à DROITE) — cf. le @media (max-height:520px) plus bas. */
body.in-game[data-game="ciel_de_jo"] .cdj-play {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 6px 10px; overflow: hidden;
}

/* --- Panneau (contenu commun docké/drawer) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-panel {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow-y: auto; overflow-x: hidden;
  background: color-mix(in srgb, var(--accent) 6%, rgba(8, 12, 20, .72)); border-right: 1px solid var(--glass-brd);
}
body.in-game[data-game="ciel_de_jo"] .cdj-panel .cdj-actionbar { flex-direction: column; max-width: none; margin: 0; gap: 6px; width: 100%; }
body.in-game[data-game="ciel_de_jo"] .cdj-panel .cdj-amarket,
body.in-game[data-game="ciel_de_jo"] .cdj-panel .cdj-adiscard,
body.in-game[data-game="ciel_de_jo"] .cdj-panel .cdj-ahand { flex: 0 0 auto; min-width: 0; }
body.in-game[data-game="ciel_de_jo"] .cdj-panel-h {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: color-mix(in srgb, var(--accent) 70%, #fff);
}
body.in-game[data-game="ciel_de_jo"] .cdj-panel-close {
  margin-left: auto; width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--glass-brd);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 800;
}
body.in-game[data-game="ciel_de_jo"] .cdj-take-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
body.in-game[data-game="ciel_de_jo"] .cdj-take-hint { font-size: 11px; color: var(--text); }

/* --- Onglet d'ouverture + backdrop (drawer mobile) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-drawer-tab {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 14; display: none;
  flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--accent) 24%, rgba(8, 12, 20, .88)); border: 1px solid var(--glass-brd-strong);
  border-left: none; color: #fff; font-size: 15px; cursor: pointer; box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .45));
}
body.in-game[data-game="ciel_de_jo"] .cdj-drawer-tab.alert { animation: cdj-tab-pulse 1.4s ease-in-out infinite; }
@keyframes cdj-tab-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn, #f59e0b) 50%, transparent); } }
body.in-game[data-game="ciel_de_jo"] .cdj-drawer-ic { font-size: 16px; }
body.in-game[data-game="ciel_de_jo"] .cdj-drawer-lab { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #cdd8f4; }
body.in-game[data-game="ciel_de_jo"] .cdj-drawer-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: 9px; font-weight: 900; display: grid; place-items: center;
}
body.in-game[data-game="ciel_de_jo"] .cdj-drawer-badge.alert { background: var(--warn, #f59e0b); color: #241300; }
body.in-game[data-game="ciel_de_jo"] .cdj-panel-backdrop { position: absolute; inset: 0; z-index: 12; background: rgba(4, 8, 14, .5); }
body.in-game[data-game="ciel_de_jo"] .cdj-mobile-only { display: none; }

/* --- Adversaire cliquable (ouvre la modale) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-opp { cursor: pointer; }
body.in-game[data-game="ciel_de_jo"] .cdj-opp.picktarget { outline: 2px dashed color-mix(in srgb, var(--accent-2) 60%, transparent); outline-offset: 2px; border-radius: 12px; }
body.in-game[data-game="ciel_de_jo"] .cdj-expand { font-size: 8.5px; color: var(--muted-2, #6b7986); }

/* --- Modales (détail joueur / ordre de défausse) --- */
body.in-game[data-game="ciel_de_jo"] .cdj-modal-back { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(4, 8, 14, .62); }
body.in-game[data-game="ciel_de_jo"] .cdj-modal {
  position: relative; width: min(560px, 88%); max-height: 92%; overflow: auto; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--glass-brd-strong); background: linear-gradient(180deg, #0e1626, #0a0f1a); box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, .55));
}
body.in-game[data-game="ciel_de_jo"] .cdj-modal-h { margin: 0 0 2px; font-size: 16px; }
body.in-game[data-game="ciel_de_jo"] .cdj-modal-sub { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
body.in-game[data-game="ciel_de_jo"] .cdj-modal-foot { margin-top: 14px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
body.in-game[data-game="ciel_de_jo"] .cdj-mclose { position: absolute; top: 10px; right: 12px; }
body.in-game[data-game="ciel_de_jo"] .cdj-oppbig { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
body.in-game[data-game="ciel_de_jo"] .cdj-oppbig .cdj-mygrid .cdj-gc { --w: 48px; }
body.in-game[data-game="ciel_de_jo"] .cdj-oppside { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
body.in-game[data-game="ciel_de_jo"] .cdj-oppcards { display: flex; flex-wrap: wrap; gap: 6px; }

body.in-game[data-game="ciel_de_jo"] .cdj-ordrow { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 6px 0; }
body.in-game[data-game="ciel_de_jo"] .cdj-ordcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.in-game[data-game="ciel_de_jo"] .cdj-ord-h { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
body.in-game[data-game="ciel_de_jo"] .cdj-ord-remain, body.in-game[data-game="ciel_de_jo"] .cdj-ord-stack { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-ord { --w: 50px; }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-ord.target { cursor: pointer; box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .45)), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
body.in-game[data-game="ciel_de_jo"] .cdj-gc.cdj-ord.picked { opacity: .92; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 75%, transparent); }
body.in-game[data-game="ciel_de_jo"] .cdj-ord-rank { font-weight: 900; font-size: 12px; color: var(--accent-2); }
body.in-game[data-game="ciel_de_jo"] .cdj-ord-sep { color: var(--muted); }
body.in-game[data-game="ciel_de_jo"] .cdj-ord-top { font-size: 10px; font-weight: 800; color: var(--accent-2); text-transform: uppercase; }
body.in-game[data-game="ciel_de_jo"] .cdj-btn.disabled { opacity: .45; pointer-events: none; }

/* DÉFAUT desktop : panneau DOCKÉ, onglet/backdrop/close cachés. */
@media (min-width: 900px) and (min-height: 561px) {
  body.in-game[data-game="ciel_de_jo"] .cdj-panel { flex: 0 0 240px; }
  body.in-game[data-game="ciel_de_jo"] .cdj-drawer-tab,
  body.in-game[data-game="ciel_de_jo"] .cdj-panel-backdrop,
  body.in-game[data-game="ciel_de_jo"] .cdj-panel-close { display: none; }
}
/* MOBILE (portrait ≤899) ou PAYSAGE COURT : panneau = DRAWER off-canvas. */
@media (max-width: 899px), (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="ciel_de_jo"] .cdj-panel {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 13; width: 232px; transform: translateX(-100%);
    transition: transform .2s cubic-bezier(.2, .7, .2, 1); box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, .55));
  }
  body.in-game[data-game="ciel_de_jo"] .cdj-board.cdj-panel-open .cdj-panel { transform: translateX(0); }
  body.in-game[data-game="ciel_de_jo"] .cdj-drawer-tab { display: flex; }
  body.in-game[data-game="ciel_de_jo"] .cdj-board.cdj-panel-open .cdj-drawer-tab { display: none; }
  body.in-game[data-game="ciel_de_jo"] .cdj-mobile-only { display: inline-flex; }
}

/* Réglages de salon multiples (ex. Le ciel de Jo : seuil + mode Action) : groupes en colonne. */
#createRoomSettings.settings-multi { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#createRoomSettings .setting-grp { display: flex; flex-direction: column; gap: 4px; }
#createRoomSettings .setting-lbl { font-size: 12px; font-weight: 600; opacity: .85; }
#createRoomSettings .setting-grp .setting-help { font-size: 11px; }

/* ============================================================================
   LE TAROT — thème « tarot mystique » (violet arcane + dorure). Reproduit
   ux-design/mockups/tarot.html. Tout est scopé body.in-game[data-game="tarot"].
   ========================================================================= */
body.in-game[data-game="tarot"] {
  --gold: #e8c468; --gold-2: #b98f2e;
  --trump-1: #3a2260; --trump-2: #26123f;
  --lead: #e8c468;
  --sky-1: #160b29; --sky-2: #0e0819; --sky-3: #070510;
  --card-red: #e5484d;
  color: #eaf0f6;
}
/* Fond nocturne étoilé (motif du jeu) */
body.in-game[data-game="tarot"] .table {
  position: relative; overflow: hidden; color: #eaf5ef;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    radial-gradient(130% 120% at 50% 55%, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%);
}
body.in-game[data-game="tarot"] .table::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .6;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,235,190,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 68%, rgba(232,196,104,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 82%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 60%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 30%, rgba(255,255,255,.4), transparent 60%);
}
body.in-game[data-game="tarot"] .table > * { position: relative; z-index: 1; }

/* HUD chips */
body.in-game[data-game="tarot"] .game-hud .chip { font-weight: 700; }
body.in-game[data-game="tarot"] .game-hud .chip.turn { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #000)); color: #fff; border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent); }
body.in-game[data-game="tarot"] .game-hud .chip.turn .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
body.in-game[data-game="tarot"] .game-hud .chip.gold { background: color-mix(in srgb, var(--gold) 20%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: #f4e4b0; }
body.in-game[data-game="tarot"] .game-hud .chip.won { background: color-mix(in srgb, var(--ok) 26%, transparent); color: #b8f5cf; border-color: transparent; }
body.in-game[data-game="tarot"] .game-hud .chip.lost { background: color-mix(in srgb, var(--danger) 26%, transparent); color: #ffc3c3; border-color: transparent; }
body.in-game[data-game="tarot"] .suit-r { color: #ff7b7b; }
body.in-game[data-game="tarot"] .suit-b { color: #e7eeff; }
body.in-game[data-game="tarot"] .mono { font-variant-numeric: tabular-nums; }

/* --- Cartes tarot --- */
body.in-game[data-game="tarot"] .t-card {
  --w: 46px; width: var(--w); aspect-ratio: 5/7; border-radius: 12px; position: relative; flex: 0 0 auto;
  background: linear-gradient(180deg, #fff, #eef2f6); color: #0b0f14;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  display: grid; place-items: center; font-weight: 800; user-select: none;
  font-family: "SF Mono", ui-monospace, "Segoe UI", tabular-nums, sans-serif;
}
body.in-game[data-game="tarot"] .t-card .idx { position: absolute; top: 3px; left: 4px; font-size: calc(var(--w) * .26); line-height: 1; font-weight: 900; display: flex; flex-direction: column; align-items: center; gap: 1px; }
body.in-game[data-game="tarot"] .t-card .idx .s { font-size: calc(var(--w) * .24); }
body.in-game[data-game="tarot"] .t-card .big { font-size: calc(var(--w) * .52); line-height: 1; }
body.in-game[data-game="tarot"] .t-card.red { color: var(--card-red); }
body.in-game[data-game="tarot"] .t-card.black { color: #0b0f14; }
body.in-game[data-game="tarot"] .t-card.trump { background: linear-gradient(180deg, var(--trump-1), var(--trump-2)); color: #f3e9ff; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
body.in-game[data-game="tarot"] .t-card.trump .idx { color: var(--gold); }
body.in-game[data-game="tarot"] .t-card.trump .big { color: var(--gold); text-shadow: 0 1px 6px rgba(232,196,104,.35); font-size: calc(var(--w) * .44); }
body.in-game[data-game="tarot"] .t-card .atlab { position: absolute; bottom: 3px; right: 4px; font-size: calc(var(--w) * .14); letter-spacing: .04em; color: color-mix(in srgb, var(--gold) 80%, #fff); opacity: .85; white-space: nowrap; }
body.in-game[data-game="tarot"] .t-card.excuse { background: radial-gradient(120% 120% at 50% 20%, #4a2d78, #1c1030); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
body.in-game[data-game="tarot"] .t-card .exlab { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: calc(var(--w) * .15); color: color-mix(in srgb, var(--gold) 85%, #fff); letter-spacing: .05em; }
body.in-game[data-game="tarot"] .t-card .bout { position: absolute; top: 2px; right: 3px; font-size: calc(var(--w) * .26); color: var(--gold); text-shadow: 0 0 6px rgba(232,196,104,.6); line-height: 1; }
body.in-game[data-game="tarot"] .t-card.playable { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent); cursor: pointer; }
body.in-game[data-game="tarot"] .t-card.selected { transform: translateY(-14px); box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 2px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent); cursor: pointer; }
body.in-game[data-game="tarot"] .t-card.disabled { filter: grayscale(.75) brightness(.72); opacity: .5; }
body.in-game[data-game="tarot"] .t-card.disabled::after { content: "🔒"; position: absolute; right: 3px; bottom: 2px; font-size: calc(var(--w) * .22); }
body.in-game[data-game="tarot"] .t-card.lead { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px var(--lead), 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent); }
body.in-game[data-game="tarot"] .t-card.mini { --w: 40px; }
/* Cartes du tapis de pli ("t-played") : le tapis est le composant signature de la maquette, ses
   cartes doivent être PLUS grandes que la main (46px), pas plus petites (elles utilisaient --w:40px
   comme les icônes miniatures du chien, ce qui inversait la hiérarchie visuelle voulue). */
body.in-game[data-game="tarot"] .t-card.played { --w: 58px; }

/* --- Plateau : mat central + rail --- */
body.in-game[data-game="tarot"] .t-table { flex: 1 1 auto; min-height: 0; display: flex; }
body.in-game[data-game="tarot"] .t-board { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr minmax(150px, 210px); gap: 10px; }
body.in-game[data-game="tarot"] .t-mat {
  position: relative; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(90% 90% at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(130% 120% at 50% 50%, var(--sky-1), var(--sky-3));
  border: 1px solid rgba(255,255,255,.10);
}
body.in-game[data-game="tarot"] .t-mat::before {
  content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; pointer-events: none; opacity: .45;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(232,196,104,.28) 9deg 10deg, transparent 11deg 20deg, rgba(232,196,104,.12) 21deg 22deg, transparent 23deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 35% 60%, transparent 62%);
  mask: radial-gradient(circle, transparent 34%, #000 35% 60%, transparent 62%);
}
body.in-game[data-game="tarot"] .t-played { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 8px; }
body.in-game[data-game="tarot"] .t-play { display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.in-game[data-game="tarot"] .t-play .who { font-size: 11px; font-weight: 700; color: var(--muted); }
body.in-game[data-game="tarot"] .t-play .who.lead-who { color: var(--gold); }
body.in-game[data-game="tarot"] .t-slot-empty { --w: 58px; width: var(--w); aspect-ratio: 5/7; border-radius: 12px; border: 1px dashed rgba(255,255,255,.18); display: grid; place-items: center; color: var(--muted-2, #6b7986); font-size: 10px; }
body.in-game[data-game="tarot"] .t-leadtag { position: absolute; left: 10px; bottom: 8px; z-index: 3; font-size: 11px; font-weight: 800; color: #160a22; background: linear-gradient(180deg, var(--gold), var(--gold-2)); border-radius: 999px; padding: 3px 10px; }

/* Prompts (enchère / appel / chien) */
body.in-game[data-game="tarot"] .t-mat .t-prompt-box, body.in-game[data-game="tarot"] .t-board > .t-prompt-box { grid-column: 1; }
body.in-game[data-game="tarot"] .t-prompt-box { align-self: center; justify-self: center; max-width: 300px; text-align: center; color: var(--muted); font-size: 12px; padding: 14px; }
body.in-game[data-game="tarot"] .t-prompt-title { font-size: 15px; color: var(--gold); font-weight: 800; margin-bottom: 6px; }
body.in-game[data-game="tarot"] .t-chien { display: flex; gap: 5px; justify-content: center; margin: 8px 0; }

/* Rail des sièges */
body.in-game[data-game="tarot"] .t-rail { display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0; }
body.in-game[data-game="tarot"] .t-seat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); min-height: 44px; }
body.in-game[data-game="tarot"] .t-seat.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); border-color: transparent; }
body.in-game[data-game="tarot"] .t-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #160a22; background: linear-gradient(180deg, var(--accent), var(--accent-2)); font-size: 13px; }
body.in-game[data-game="tarot"] .t-nm { font-weight: 700; font-size: 12px; }
body.in-game[data-game="tarot"] .t-spacer { flex: 1; }
body.in-game[data-game="tarot"] .t-badge { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.10); color: var(--muted); white-space: nowrap; }
body.in-game[data-game="tarot"] .t-badge.take { background: color-mix(in srgb, var(--gold) 22%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); }
body.in-game[data-game="tarot"] .t-badge.ally { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: transparent; color: #f3e9ff; }
body.in-game[data-game="tarot"] .t-badge.pass { opacity: .6; }
body.in-game[data-game="tarot"] .t-badge.bid { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: transparent; color: #f3e9ff; }

/* --- Dock (main + barre d'action) --- */
body.in-game[data-game="tarot"] .t-dock { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
body.in-game[data-game="tarot"] .t-abar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 4px; min-height: 40px; }
body.in-game[data-game="tarot"] .t-abar .lead { font-size: 12px; color: var(--muted); }
body.in-game[data-game="tarot"] .t-abar .hint { font-size: 13px; font-weight: 700; }
body.in-game[data-game="tarot"] .t-abar .wait { font-size: 12px; color: var(--muted); }
body.in-game[data-game="tarot"] .t-abar b { color: #f4e4b0; }
body.in-game[data-game="tarot"] .t-bid, body.in-game[data-game="tarot"] .t-send {
  min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 13px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.075); color: var(--text, #eaf0f6);
}
body.in-game[data-game="tarot"] .t-bid .mult { font-size: 10px; color: var(--muted); font-weight: 700; }
body.in-game[data-game="tarot"] .t-bid .sr { color: #ff7b7b; }
body.in-game[data-game="tarot"] .t-bid .sb { color: #e7eeff; }
body.in-game[data-game="tarot"] .t-bid.pass { background: transparent; }
body.in-game[data-game="tarot"] .t-bid:not(.locked):hover, body.in-game[data-game="tarot"] .t-send:not(.locked):hover { transform: translateY(-1px); }
body.in-game[data-game="tarot"] .t-bid.locked { opacity: .42; filter: grayscale(.6); cursor: not-allowed; }
body.in-game[data-game="tarot"] .t-send { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #160a22; border-color: transparent; }
body.in-game[data-game="tarot"] .t-send.locked { opacity: .42; filter: grayscale(.6); cursor: not-allowed; }
body.in-game[data-game="tarot"] .t-hand { display: flex; gap: 5px; padding: 14px 6px 8px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; }
body.in-game[data-game="tarot"] .t-hand .t-card { scroll-snap-align: center; }
body.in-game[data-game="tarot"] .t-grp { flex: 0 0 auto; width: 8px; }
body.in-game[data-game="tarot"] .t-grp.wide { width: 14px; border-left: 1px dashed rgba(232,196,104,.25); }
body.in-game[data-game="tarot"] .hand-empty { color: var(--muted); font-size: 13px; padding: 12px; }

/* Modale d'appel du roi (overlay sur le plateau) */
body.in-game[data-game="tarot"] .t-backdrop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(4, 6, 12, .62); backdrop-filter: blur(3px); }
body.in-game[data-game="tarot"] .t-modal { min-width: 300px; max-width: 92%; padding: 18px; border-radius: 20px; text-align: center; background: var(--bg-2, #0e0819); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
body.in-game[data-game="tarot"] .t-modal__title { font-size: 15px; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
body.in-game[data-game="tarot"] .t-modal__sub { color: var(--muted); font-size: 12px; margin: 0 0 14px; }
body.in-game[data-game="tarot"] .t-modal__note { color: var(--muted-2, #6b7986); font-size: 11px; margin: 12px 0 0; }
body.in-game[data-game="tarot"] .t-kings { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
body.in-game[data-game="tarot"] .t-king { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 10px 14px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); color: var(--text, #eaf0f6); font-weight: 800; }
body.in-game[data-game="tarot"] .t-king:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
body.in-game[data-game="tarot"] .t-king__suit { font-size: 22px; line-height: 1; }
body.in-game[data-game="tarot"] .t-king__suit.sr { color: #ff7b7b; }
body.in-game[data-game="tarot"] .t-king__suit.sb { color: #e7eeff; }
body.in-game[data-game="tarot"] .t-king__lbl { font-size: 12px; }

/* --- Décompte (modale de fin) --- */
.t-res { display: block; }
.t-res__headline { display: block; font-size: 20px; font-weight: 900; text-align: center; margin-bottom: 4px; }
.t-res__headline.won { color: #22c55e; } .t-res__headline.lost { color: #ef4444; }
.t-res__contract { display: block; text-align: center; color: var(--muted, #9aa7b4); font-size: 13px; margin-bottom: 6px; }
.t-res__bandeau { display: block; text-align: center; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.t-res__bandeau.ok { color: #22c55e; } .t-res__bandeau.bad { color: #ef4444; }
.t-res__grid { display: block; margin: 0 auto 10px; max-width: 420px; }
.t-res__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.t-res__row .mono { font-variant-numeric: tabular-nums; font-weight: 800; }
.t-res__row .ok { color: #22c55e; } .t-res__row .bad { color: #ef4444; }
.t-res__row--total { font-weight: 800; border-bottom: 0; }
.t-res__gains-label { display: block; text-align: center; color: var(--muted, #9aa7b4); font-size: 11px; margin-bottom: 6px; }
.t-res__gains { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.t-gain { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.t-gain.pos { color: #22c55e; border-color: color-mix(in srgb, #22c55e 35%, transparent); }
.t-gain.neg { color: #ef4444; border-color: color-mix(in srgb, #ef4444 30%, transparent); }

/* --- Cover d'accueil (tuile lobby) --- */
.g-tarot { --primary: #9d4edd; --accent: #9d4edd; --accent-2: #e8c468; }
.art-tarot { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(120% 120% at 50% 30%, #2a1748, #120a20); overflow: hidden; }
.art-tarot .orb { font-size: 30px; filter: drop-shadow(0 0 8px rgba(157,78,221,.6)); }
.art-tarot .r { position: absolute; left: 18%; top: 24%; color: #e5484d; font-size: 18px; }
.art-tarot .b { position: absolute; right: 18%; bottom: 22%; color: #e7eeff; font-size: 18px; }
.art-tarot .star { position: absolute; right: 22%; top: 26%; color: #e8c468; font-size: 16px; text-shadow: 0 0 8px rgba(232,196,104,.7); }

/* --- Responsive : desktop large, plus d'air — reproduit la section "5 · Desktop 1280×800" de la
   maquette (main 66px, tapis 82px), au lieu de garder partout le gabarit compact mobile. --- */
@media (min-width: 1100px) {
  body.in-game[data-game="tarot"] .t-hand .t-card { --w: 66px; }
  body.in-game[data-game="tarot"] .t-played .t-card.played { --w: 82px; }
  body.in-game[data-game="tarot"] .t-slot-empty { --w: 82px; }
}

/* --- Responsive : téléphone en paysage (large + court) --- */
@media (max-height: 480px) {
  body.in-game[data-game="tarot"] .t-board { grid-template-columns: 1fr minmax(128px, 170px); gap: 8px; }
  body.in-game[data-game="tarot"] .t-card { --w: 40px; }
  body.in-game[data-game="tarot"] .t-card.played { --w: 48px; }
  body.in-game[data-game="tarot"] .t-slot-empty { --w: 48px; }
  body.in-game[data-game="tarot"] .t-hand { padding: 10px 6px 6px; }
  body.in-game[data-game="tarot"] .t-seat { padding: 4px 6px; min-height: 40px; }
  body.in-game[data-game="tarot"] .t-av { width: 26px; height: 26px; font-size: 12px; }
  body.in-game[data-game="tarot"] .t-abar { min-height: 36px; }
  body.in-game[data-game="tarot"] .t-bid, body.in-game[data-game="tarot"] .t-send { min-height: 40px; padding: 0 12px; font-size: 12px; }
}

/* ============================================================
   L'AMOUR EST DANS LA LETTRE (Love Letter) — reproduit
   ux-design/mockups/lettre_amour.html. Âme « cœur et noir ».
   Tout scopé body.in-game[data-game="lettre_amour"].
   ============================================================ */
body.in-game[data-game="lettre_amour"] {
  --paper:#f7ecef; --paper-2:#ead7de; --ink:#3a0a18; --ink-2:#7a1030;
  --heart:#e5397d; --heart-deep:#8b0e2e;
  --la-e2:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --la-e3:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  --la-glow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent), 0 0 22px color-mix(in srgb,var(--accent) 48%,transparent);
}
/* Fond « nuit rouge » du plateau (porté par .la-board, toujours présent) */
.la-board { display:flex; flex-direction:column; height:100%; min-height:0; gap:6px; padding:6px 8px 8px; position:relative;
  background:
    radial-gradient(120% 80% at 50% -12%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 52%),
    radial-gradient(130% 120% at 50% 70%, #140309 0%, #0c0206 55%, #060103 100%);
  border-radius:14px; }

/* Bouton Journal — panneau OPTIONNEL, flottant en haut à droite (ne prend pas de place au plateau) */
.la-journalbtn { position:absolute; top:6px; right:8px; z-index:14; display:inline-flex; align-items:center; gap:6px;
  min-height:30px; padding:0 12px; border-radius:999px; font-weight:800; font-size:12px; cursor:pointer;
  color:var(--text); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.la-journalbtn:hover { background:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06)); border-color:transparent; }
.la-jbadge { min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:9px; font-weight:900; display:grid; place-items:center; }

/* Adversaires EN GRAND : rangée pleine largeur en haut, occupe la hauteur disponible */
.la-opps { flex:1 1 auto; min-height:0; display:flex; gap:8px; justify-content:center; align-items:stretch; }

/* ---- Carte-personnage ---- */
.la-lcard { --w:84px; width:var(--w); aspect-ratio:5/7; border-radius:12px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; user-select:none;
  background:linear-gradient(168deg,var(--paper),var(--paper-2)); color:var(--ink);
  box-shadow:var(--la-e2); border:1px solid rgba(139,14,46,.28); overflow:hidden;
  transition:transform .16s var(--ease,cubic-bezier(.2,.7,.2,1)), box-shadow .16s ease; }
.la-lcard::before { content:""; position:absolute; inset:4px; border-radius:8px; border:1px solid rgba(139,14,46,.22); pointer-events:none; }
.la-lcard .la-idx { position:absolute; top:4px; left:5px; width:calc(var(--w)*.34); height:calc(var(--w)*.34);
  display:grid; place-items:center; font-weight:900; font-size:calc(var(--w)*.24); color:#fff;
  background:radial-gradient(circle at 40% 35%,var(--accent),var(--heart-deep)); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.la-lcard .la-ico { font-size:calc(var(--w)*.42); line-height:1; margin-top:calc(var(--w)*.1); }
.la-lcard .la-nm { font-size:calc(var(--w)*.135); font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-2); text-align:center; line-height:1.05; padding:0 2px; }
.la-lcard.back { background:radial-gradient(60% 45% at 50% 42%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 70%), linear-gradient(168deg,#1b0710,#0b0205);
  color:transparent; border-color:rgba(229,57,125,.22); }
.la-lcard.back::before { border-color:rgba(229,57,125,.18); }
.la-lcard.back::after { content:"♥"; position:absolute; inset:0; display:grid; place-items:center; font-size:calc(var(--w)*.4); color:color-mix(in srgb,var(--accent) 55%,transparent); }
.la-lcard.mini { --w:22px; border-radius:4px; }
.la-lcard.mini::before { inset:2px; border-radius:3px; }
.la-lcard.mini .la-idx { width:12px; height:12px; font-size:8px; top:1px; left:1px; }
.la-lcard.sm { --w:30px; }
.la-lcard.big { --w:96px; }
/* Carte JOUÉE d'un adversaire : petite mais LISIBLE (valeur + personnage, sans nom) */
.la-lcard.med { --w:40px; border-radius:8px; gap:0; }
.la-lcard.med::before { inset:2px; border-radius:6px; }
.la-lcard.med .la-idx { width:16px; height:16px; font-size:9px; top:2px; left:2px; }
.la-lcard.med .la-ico { font-size:20px; margin-top:9px; }
.la-lcard.med .la-nm { display:none; }
.la-lcard.playable { box-shadow:var(--la-e2), var(--la-glow); cursor:pointer; }
.la-lcard.selected { transform:translateY(-16px); box-shadow:var(--la-e3), var(--la-glow); z-index:4; }
.la-lcard.dimmed { opacity:.4; }
.la-lcard.disabled { filter:grayscale(.6) brightness(.82); opacity:.55; }
.la-lcard.disabled::after { content:"🔒"; position:absolute; right:5px; bottom:4px; font-size:13px; color:#000; }

/* ---- Siège adversaire (GRAND) ---- */
.la-opp { display:flex; flex-direction:column; gap:6px; padding:9px 11px; border-radius:14px; flex:1 1 0; min-width:0; max-width:340px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.10); overflow:hidden; }
.la-opp.active { box-shadow:var(--la-glow); border-color:transparent; }
.la-opp.target { cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.4), var(--la-glow); border-color:transparent; }
.la-opp.out { opacity:.5; filter:grayscale(.55); }
.la-who { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--text); }
.la-who .la-av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; flex:0 0 auto; }
.la-who .la-nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.la-hearts-wrap { margin-left:auto; flex:0 0 auto; }
.la-hearts { display:inline-flex; align-items:center; gap:2px; color:var(--accent); font-size:13px; font-weight:800; }
.la-hearts .la-num { color:var(--muted); }
.la-tgt { flex:0 0 auto; font-size:11px; font-weight:900; color:var(--accent); white-space:nowrap; }
/* Cartes jouées de l'adversaire (l'info clé, bien lisible) */
.la-plays { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:4px; }
.la-plays-lab { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2,#6b7986); }
.la-plays-row { display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start; }
.la-plays-none { font-size:11px; color:var(--muted-2,#6b7986); }
.la-seat-hand { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted); }
.la-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; flex:0 0 auto; }
.la-badge.prot { color:#bfe3ff; background:color-mix(in srgb,#3b82f6 26%,transparent); border:1px solid color-mix(in srgb,#3b82f6 40%,transparent); }
.la-badge.dead { color:#ffc9c9; background:color-mix(in srgb,#ef4444 26%,transparent); border:1px solid color-mix(in srgb,#ef4444 40%,transparent); }

/* ---- Enveloppe centrale (pioche) ---- */
.la-pilewrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.la-envelope { --w:80px; width:var(--w); aspect-ratio:5/7; border-radius:12px; position:relative;
  background:linear-gradient(165deg,#1b0710,#120309); border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.1));
  box-shadow:var(--la-e2); display:grid; place-items:center; overflow:hidden; }
.la-envelope::before { content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 46%,color-mix(in srgb,var(--accent) 22%,transparent) 47%,transparent 48%),
    linear-gradient(225deg,transparent 46%,color-mix(in srgb,var(--accent) 22%,transparent) 47%,transparent 48%); }
.la-envelope .la-seal { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:18px;
  background:radial-gradient(circle at 40% 35%,var(--accent),var(--heart-deep)); color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.4); }
.la-lab { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.la-cnt { font-size:11px; color:var(--muted-2, #6b7986); }
.la-burn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 8px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.la-burn { flex-direction:row; align-items:center; }
.la-burn-lab { font-size:9.5px; font-weight:800; text-transform:uppercase; color:var(--muted); margin-right:2px; }

/* ---- Journal (panneau optionnel) : drawer droite + timeline à pastilles ---- */
.la-jbackdrop { position:absolute; inset:0; z-index:30; background:rgba(6,2,5,.5); }
.la-jdrawer { position:absolute; right:0; top:0; bottom:0; z-index:31; width:min(300px,82%); display:flex; flex-direction:column; gap:5px;
  padding:10px 12px; background:linear-gradient(180deg,#1a0710,#100309); border-left:1px solid rgba(255,255,255,.18); box-shadow:var(--la-e3);
  animation:la-jslide .18s var(--ease,cubic-bezier(.2,.7,.2,1)); }
@keyframes la-jslide { from { transform:translateX(20px); opacity:0; } to { transform:none; opacity:1; } }
.la-jhead { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--text); }
.la-jclose { margin-left:auto; }
.la-jfeed { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.la-jline { display:flex; align-items:center; gap:9px; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.05); }
.la-jbadge-ic { flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:14px;
  background:radial-gradient(circle at 40% 35%, color-mix(in srgb,var(--accent) 45%,#000), #160309);
  box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.la-jbadge-ic.prot { background:radial-gradient(circle at 40% 35%, #3b82f6, #0b2a5e); }
.la-jbadge-ic.dead { background:radial-gradient(circle at 40% 35%, #ef4444, #5e0b0b); }
.la-jtx { font-size:12px; color:var(--text); }
.la-jline.new { background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:8px; border-bottom-color:transparent; }
.la-jempty { padding:16px 4px; font-size:12px; color:var(--muted); text-align:center; }

/* ---- Bas de plateau : pioche (gauche) + MA main (centre) ---- */
.la-mine { flex:0 0 auto; display:flex; align-items:flex-end; justify-content:center; gap:16px; }
.la-handwrap { display:flex; flex-direction:column; align-items:center; gap:5px; }
.la-prompt { font-size:12px; font-weight:800; color:var(--muted); }
.la-help { display:flex; align-items:center; gap:8px; max-width:440px; padding:5px 11px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); font-size:11px; color:var(--muted); }
.la-help b { color:var(--text); }
.la-help .la-he { font-size:16px; flex:0 0 auto; }
.la-targetbar { display:flex; align-items:center; justify-content:center; gap:8px; padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.16);
  font-size:12px; font-weight:800; color:var(--text); }
.la-hand { display:flex; gap:12px; justify-content:center; align-items:flex-end; padding:6px 6px 2px; }
.la-hint { font-size:11px; font-weight:700; color:var(--accent); }

/* ---- Boutons ---- */
.la-btn { min-height:44px; padding:0 16px; border-radius:999px; font-weight:800; font-size:13px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:var(--text); }
.la-btn.primary { background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000)); color:#fff; border-color:transparent; box-shadow:var(--la-e2); }
.la-btn.ghost { background:transparent; }
.la-btn.sm { min-height:30px; padding:0 10px; font-size:11px; }

/* ---- Popover de devinette (Garde) ---- */
.la-guesspop { position:absolute; left:50%; bottom:120px; transform:translateX(-50%); z-index:16;
  padding:10px; border-radius:16px; background:#160409; border:1px solid rgba(255,255,255,.18); box-shadow:var(--la-e3); }
.la-guesspop__cap { display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  font-size:11px; color:var(--muted); font-weight:800; margin-bottom:8px; }
.la-guesspop__grid { display:grid; grid-template-columns:repeat(4,auto); gap:6px; }
.la-gopt { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:58px; min-height:52px; padding:6px 4px;
  border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); cursor:pointer;
  font-size:10px; font-weight:800; color:var(--text); }
.la-gopt:hover { background:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.05)); border-color:transparent; }
.la-gopt .la-e { font-size:18px; }
.la-gopt .la-v { color:var(--muted); }

/* ---- Modales (fin de manche, reveal privé) ---- */
.la-modal-backdrop { position:absolute; inset:0; background:rgba(6,1,3,.66); backdrop-filter:blur(3px);
  display:grid; place-items:center; z-index:20; padding:12px; }
.la-modal { min-width:280px; max-width:min(560px,94%); max-height:94%; overflow:auto; padding:18px; border-radius:22px;
  background:#0e0206; border:1px solid rgba(255,255,255,.18); box-shadow:var(--la-e3); }
.la-modal__title { margin:0 0 4px; font-size:16px; color:var(--text); }
.la-modal__sub { margin:0 0 12px; font-size:12px; color:var(--muted); }
.la-modal__foot { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.la-reveal-grid { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.la-reveal-row { display:flex; align-items:center; gap:8px; }
.la-reveal-who { min-width:70px; font-size:12px; font-weight:800; color:var(--text); }
.la-reveal-row .la-lcard { --w:44px; }
.la-reveal-solo { display:flex; flex-direction:column; align-items:center; gap:6px; }
.la-reveal-note { font-size:12px; color:var(--muted); max-width:160px; text-align:center; }
.la-reveal-duel { display:flex; align-items:center; justify-content:center; gap:16px; padding:6px 0; }
.la-vs { font-size:14px; font-weight:900; color:var(--accent); }
.la-recap__rows { display:flex; flex-direction:column; gap:8px; }
.la-recap-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:8px 10px;
  border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.la-recap-row.lead { border-color:color-mix(in srgb,var(--accent) 60%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent); }
.la-recap-row .la-rnm { font-weight:800; color:var(--text); }
.la-recap-row .la-rhearts { color:var(--accent); font-size:14px; }
.la-recap-row .la-rtotal { font-weight:900; color:var(--text); min-width:52px; text-align:right; }

/* ---- Résultat de fin de partie (dans #gameResultMessage) ---- */
.la-result { display:flex; flex-direction:column; gap:12px; }
.la-result__headline { font-size:17px; font-weight:900; }
.la-result__headline.won { color:var(--accent); }
.la-result__headline.lost { color:var(--muted); }
.la-recap__rows--final { gap:6px; }

/* ---- Cover art (tuile lobby / landing) ---- */
.art-lettreamour { position:relative; display:grid; place-items:center; }
.art-lettreamour .env { font-size:30px; }
.art-lettreamour .heart { position:absolute; right:18%; bottom:14%; font-size:18px; }

/* ---- Compaction phone paysage (large + court) : cf. note « responsive = max-height » ---- */
@media (max-height:520px) {
  /* Phone paysage (large + court) : ma main reste grande et lisible, les sièges adverses se
     compactent un peu (typo/avatar) mais gardent des cartes jouées lisibles (med). */
  .la-board { gap:5px; padding:5px 8px 6px; }
  .la-lcard { --w:78px; }
  .la-lcard .la-nm { font-size:11px; }
  .la-lcard.med { --w:36px; }
  .la-lcard.med .la-ico { font-size:18px; margin-top:8px; }
  .la-hand { gap:9px; padding:4px 6px 0; }
  .la-who { font-size:12.5px; gap:6px; }
  .la-who .la-av { width:26px; height:26px; font-size:11px; }
  .la-opp { padding:7px 9px; gap:4px; }
  .la-seat-hand { font-size:9.5px; }
  .la-envelope { --w:52px; }
  .la-envelope .la-seal { width:22px; height:22px; font-size:13px; }
  .la-lab { font-size:9px; }
  .la-cnt { font-size:9px; }
  .la-mine { gap:12px; }
  .la-prompt { font-size:11px; }
  .la-help { font-size:10.5px; padding:4px 9px; }
}

/* ---- Desktop : plus d'air, cartes plus grandes, sièges adverses larges ---- */
@media (min-width:1100px) {
  .la-board { padding:14px 24px 12px; gap:12px; }
  .la-opps { gap:16px; }
  .la-opp { max-width:none; padding:12px 14px; gap:8px; }
  .la-who { font-size:16px; }
  .la-who .la-av { width:34px; height:34px; font-size:13px; }
  .la-lcard { --w:120px; }
  .la-lcard.med { --w:56px; }
  .la-lcard.med .la-ico { font-size:26px; margin-top:12px; }
  .la-lcard.med .la-idx { width:20px; height:20px; font-size:11px; }
  .la-envelope { --w:80px; }
  .la-envelope .la-seal { width:32px; height:32px; font-size:17px; }
  .la-lcard.sm { --w:38px; }
  .la-mine { gap:24px; }
  .la-hand { gap:18px; }
}

/* ============================================================
   T'AS VRAIMENT QUE ÇA À FAIRE ?! (RTRG solo) — reproduit
   ux-design/mockups/que_ca_a_faire.html. Tout scopé
   body.in-game[data-game="que_ca_a_faire"] ; classes .qcf-.
   Âme pixel roguelike néon : vert #3DF07A / magenta #F44FE0 sur
   near-black. Double codage (couleur + chiffre + hauteur de jauge).
   Zéro scroll, cibles ≥44px (cases ≥56px). Solo, grille 3×3.
   ============================================================ */
body.in-game[data-game="que_ca_a_faire"] {
  --primary: #3df07a; --accent: #3df07a; --accent-2: #f44fe0; --on-accent: #04160b;
  --qcf-dmg: #ff4d4d; --qcf-dmg2: #7f1d1d;
  --qcf-ammo: #ffb020; --qcf-ammo2: #8a5a06;
  --qcf-loot: #ffd447; --qcf-loot2: #8a6a00;
  --qcf-nrj: #31e6e0; --qcf-nrj2: #0b6b69;
  --qcf-f1: #7dd3fc; --qcf-f2: #c084fc; --qcf-f3: #fb7185;
  --qcf-brd: rgba(255, 255, 255, .16);
}
/* Sol de pierre pixel : fond + fin dallage (on ne touche PAS au padding de .table). */
body.in-game[data-game="que_ca_a_faire"] .table {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 16px 16px,
    radial-gradient(120% 80% at 50% -10%, rgba(61, 240, 122, .10), transparent 55%),
    linear-gradient(180deg, #12161d, #0c1016 60%, #070a0f);
  image-rendering: pixelated;
}

/* --- Board 3 colonnes (jauges | grille | journal), zéro scroll --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-board {
  position: relative; display: flex; flex-direction: row; gap: 14px;
  height: 100%; min-height: 0; align-items: stretch; justify-content: center; padding: 4px 6px;
}
body.in-game[data-game="que_ca_a_faire"] .qcf-col-gauges { flex: 0 0 auto; width: 200px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
body.in-game[data-game="que_ca_a_faire"] .qcf-col-grid { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
body.in-game[data-game="que_ca_a_faire"] .qcf-col-log { flex: 0 0 auto; width: 210px; display: flex; flex-direction: column; min-height: 0; }

/* --- Jauges pixel --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-gauge { display: flex; flex-direction: column; gap: 4px; }
body.in-game[data-game="que_ca_a_faire"] .qcf-g-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
body.in-game[data-game="que_ca_a_faire"] .qcf-g-name { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
body.in-game[data-game="que_ca_a_faire"] .qcf-g-val { font-family: var(--num, ui-monospace, monospace); font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
body.in-game[data-game="que_ca_a_faire"] .qcf-bar { display: flex; gap: 2px; height: 15px; }
body.in-game[data-game="que_ca_a_faire"] .qcf-seg { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
body.in-game[data-game="que_ca_a_faire"] .qcf-gauge.dmg .qcf-seg.on { background: linear-gradient(180deg, var(--qcf-dmg), var(--qcf-dmg2)); box-shadow: 0 0 6px color-mix(in srgb, var(--qcf-dmg) 60%, transparent); }
body.in-game[data-game="que_ca_a_faire"] .qcf-gauge.ammo .qcf-seg.on { background: linear-gradient(180deg, var(--qcf-ammo), var(--qcf-ammo2)); box-shadow: 0 0 6px color-mix(in srgb, var(--qcf-ammo) 55%, transparent); }
body.in-game[data-game="que_ca_a_faire"] .qcf-gauge.loot .qcf-seg.on { background: linear-gradient(180deg, var(--qcf-loot), var(--qcf-loot2)); box-shadow: 0 0 6px color-mix(in srgb, var(--qcf-loot) 55%, transparent); }
body.in-game[data-game="que_ca_a_faire"] .qcf-gauge.nrj .qcf-seg.on { background: linear-gradient(180deg, var(--qcf-nrj), var(--qcf-nrj2)); box-shadow: 0 0 6px color-mix(in srgb, var(--qcf-nrj) 55%, transparent); }

/* --- Marge de survie --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-margin {
  margin-top: 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--qcf-brd);
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--muted);
}
body.in-game[data-game="que_ca_a_faire"] .qcf-m-val { font-family: var(--num, ui-monospace, monospace); font-size: 16px; font-weight: 900; color: var(--ok, #22c55e); font-variant-numeric: tabular-nums; }
body.in-game[data-game="que_ca_a_faire"] .qcf-margin.danger { background: color-mix(in srgb, var(--danger, #ef4444) 22%, transparent); border-color: transparent; color: #ffd9d9; animation: qcfDanger 1s infinite; }
body.in-game[data-game="que_ca_a_faire"] .qcf-margin.danger .qcf-m-val { color: #ffb3b3; }
@keyframes qcfDanger { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .35), 0 0 18px rgba(239, 68, 68, .4); } }

/* --- Grille 3×3 pixel-donjon --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-dgrid {
  --cw: clamp(56px, 12vh, 104px);
  display: grid; grid-template-columns: repeat(3, var(--cw)); grid-template-rows: repeat(3, var(--cw));
  gap: 7px; padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, #1b222d, #10151c);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5), inset 0 0 22px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .45);
}
body.in-game[data-game="que_ca_a_faire"] .qcf-cell {
  position: relative; border-radius: 6px; display: grid; place-items: center; user-select: none;
  background: linear-gradient(180deg, #1a212b, #131922);
  box-shadow: inset 0 0 0 1px var(--qcf-brd), inset 0 -4px 0 rgba(0, 0, 0, .35), inset 0 3px 0 rgba(255, 255, 255, .05);
  font-size: calc(var(--cw) * .44); line-height: 1;
}
body.in-game[data-game="que_ca_a_faire"] .qcf-cell.exit {
  background: repeating-linear-gradient(45deg, #12341f, #12341f 6px, #0e2a19 6px, #0e2a19 12px);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 0 16px rgba(61, 240, 122, .22);
}
body.in-game[data-game="que_ca_a_faire"] .qcf-exit-lab { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .08em; color: var(--accent); text-shadow: 0 1px 0 #000; }
body.in-game[data-game="que_ca_a_faire"] .qcf-sprite { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
body.in-game[data-game="que_ca_a_faire"] .qcf-hero { position: relative; z-index: 3; }
body.in-game[data-game="que_ca_a_faire"] .qcf-foe { position: absolute; z-index: 2; }
body.in-game[data-game="que_ca_a_faire"] .qcf-loot { position: absolute; z-index: 1; font-size: calc(var(--cw) * .3); left: 6px; bottom: 6px; }
body.in-game[data-game="que_ca_a_faire"] .qcf-badge-f {
  position: absolute; top: 2px; right: 3px; z-index: 4; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; font-family: var(--num, ui-monospace, monospace); font-size: 10px; font-weight: 900;
  color: #08120a; box-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 8px rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums;
}
body.in-game[data-game="que_ca_a_faire"] .qcf-badge-f.f1 { background: var(--qcf-f1); }
body.in-game[data-game="que_ca_a_faire"] .qcf-badge-f.f2 { background: var(--qcf-f2); }
body.in-game[data-game="que_ca_a_faire"] .qcf-badge-f.f3 { background: var(--qcf-f3); color: #1a0606; }
body.in-game[data-game="que_ca_a_faire"] .qcf-badge-t { position: absolute; bottom: 2px; left: 3px; z-index: 4; font-family: var(--num, ui-monospace, monospace); font-size: 10px; font-weight: 900; color: var(--qcf-loot); text-shadow: 0 1px 0 #000, 0 0 6px rgba(255, 212, 71, .5); }
body.in-game[data-game="que_ca_a_faire"] .qcf-cell.reach { cursor: pointer; box-shadow: inset 0 0 0 1px var(--qcf-brd), inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
body.in-game[data-game="que_ca_a_faire"] .qcf-cell.target { cursor: pointer; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); z-index: 25; }
body.in-game[data-game="que_ca_a_faire"] .qcf-grid-cap { font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .03em; text-align: center; }

/* --- Popover d'actions (enfant de la case sélectionnée) --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30;
  min-width: 156px; padding: 6px; border-radius: 12px; background: var(--bg-2, #0e141b);
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 4px;
}
/* Ancrage intelligent (case au bord → jamais tronqué, cf. ux-design/que_ca_a_faire.md « risques »
   et ux-design/mockups/que_ca_a_faire.html .act-pop.left) : rangée du haut → ouvre vers le bas ;
   colonne gauche/droite → aligne sur le bord de la case au lieu de déborder des deux côtés. */
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop.below { bottom: auto; top: calc(100% + 8px); }
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop.anchor-left { left: 0; transform: none; }
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop.anchor-right { left: auto; right: 0; transform: none; }
/* Pointe reliant le popover à sa case (élément clé de la maquette, cf. .act-pop::after). */
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop::after {
  content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  background: var(--bg-2, #0e141b); border-right: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18);
  bottom: -5px; transform: rotate(45deg);
}
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop.below::after {
  bottom: auto; top: -5px; border-right: 0; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .18); border-top: 1px solid rgba(255, 255, 255, .18);
}
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop.anchor-left::after { left: 18px; margin-left: 0; }
body.in-game[data-game="que_ca_a_faire"] .qcf-actpop.anchor-right::after { left: auto; right: 18px; margin-left: 0; }
body.in-game[data-game="que_ca_a_faire"] .qcf-a-title { font-size: 9.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2, var(--muted)); padding: 2px 4px; }
body.in-game[data-game="que_ca_a_faire"] .qcf-actitem {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 10px;
  border-radius: 8px; background: rgba(255, 255, 255, .075); border: 1px solid var(--qcf-brd); cursor: pointer;
  font-size: 12.5px; font-weight: 800; color: var(--text); font-family: inherit;
}
body.in-game[data-game="que_ca_a_faire"] .qcf-actitem:hover { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); }
body.in-game[data-game="que_ca_a_faire"] .qcf-actitem.go { background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, .075)); }
body.in-game[data-game="que_ca_a_faire"] .qcf-cost { font-family: var(--num, ui-monospace, monospace); font-size: 11px; font-weight: 800; color: var(--muted); }
body.in-game[data-game="que_ca_a_faire"] .qcf-cost.dmg { color: var(--qcf-dmg); }
body.in-game[data-game="que_ca_a_faire"] .qcf-cost.ammo { color: var(--qcf-ammo); }
body.in-game[data-game="que_ca_a_faire"] .qcf-cost.nrj { color: var(--qcf-nrj); }
body.in-game[data-game="que_ca_a_faire"] .qcf-popbackdrop { position: absolute; inset: 0; z-index: 10; }

/* --- Barre d'actions bas-droite (Repos / Sortir) --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-abtn {
  min-height: 44px; padding: 0 15px; border-radius: 999px; font-weight: 800; font-size: 13px; font-family: inherit;
  border: 1px solid var(--qcf-brd); background: rgba(255, 255, 255, .075); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
body.in-game[data-game="que_ca_a_faire"] .qcf-abtn.primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: var(--on-accent); border-color: transparent; }
body.in-game[data-game="que_ca_a_faire"] .qcf-abtn[disabled] { opacity: .45; cursor: not-allowed; }
body.in-game[data-game="que_ca_a_faire"] .qcf-abtn .k { font-family: var(--num, ui-monospace, monospace); font-size: 10px; color: var(--muted); font-weight: 800; }
body.in-game[data-game="que_ca_a_faire"] .qcf-abtn.primary .k { color: color-mix(in srgb, var(--on-accent) 70%, var(--accent)); }

/* --- Journal --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-journal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--qcf-brd); overflow: hidden; }
body.in-game[data-game="que_ca_a_faire"] .qcf-j-title { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2, var(--muted)); }
body.in-game[data-game="que_ca_a_faire"] .qcf-log-line { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; line-height: 1.3; color: var(--text); }
body.in-game[data-game="que_ca_a_faire"] .qcf-log-line .qcf-ic { flex: 0 0 auto; }
body.in-game[data-game="que_ca_a_faire"] .qcf-log-line.spawn { color: #dcc7ff; }
body.in-game[data-game="que_ca_a_faire"] .qcf-log-line.atk { color: #ffc9c9; }
body.in-game[data-game="que_ca_a_faire"] .qcf-log-line.loot { color: #ffe9a8; }
body.in-game[data-game="que_ca_a_faire"] .qcf-log-line.info { color: var(--muted); }
body.in-game[data-game="que_ca_a_faire"] .qcf-mini-legend { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10px; color: var(--muted-2, var(--muted)); }

/* --- HUD pastilles d'actions --- */
body.in-game[data-game="que_ca_a_faire"] .qcf-pips { letter-spacing: 2px; margin-left: 2px; }

/* --- Modale de fin (dans #gameResultMessage) --- */
.qcf-result { text-align: center; }
.qcf-end-ico { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.qcf-end-title { font-size: 20px; font-weight: 900; letter-spacing: .03em; margin-bottom: 4px; }
.qcf-end-title.won { color: #3df07a; }
.qcf-end-title.lost { color: #ef4444; }
.qcf-end-sub { font-size: 12.5px; color: var(--muted, #9aa7b4); margin-bottom: 12px; }
.qcf-end-stats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qcf-end-stat { font-family: var(--num, ui-monospace, monospace); font-size: 12px; font-weight: 800; color: var(--text, #eaf0f6); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 5px 11px; }

/* --- Cover art (tuile de jeu) — NON scopé --- */
.art-quecaafaire { display: flex; gap: 5px; align-items: center; justify-content: center; font-size: 20px; }
.art-quecaafaire .loot { font-size: 15px; opacity: .95; }

/* --- Compaction paysage court (~412px de haut) : @media max-height, PAS max-width --- */
@media (max-height: 460px) {
  body.in-game[data-game="que_ca_a_faire"] .qcf-board { gap: 10px; padding: 2px 4px; }
  body.in-game[data-game="que_ca_a_faire"] .qcf-col-gauges { width: 170px; gap: 7px; }
  body.in-game[data-game="que_ca_a_faire"] .qcf-col-log { width: 180px; }
  body.in-game[data-game="que_ca_a_faire"] .qcf-dgrid { --cw: clamp(56px, 26vh, 84px); gap: 6px; padding: 6px; }
  body.in-game[data-game="que_ca_a_faire"] .qcf-bar { height: 12px; }
  body.in-game[data-game="que_ca_a_faire"] .qcf-g-name { font-size: 10px; }
}

/* ============================================================
   MENTEUR ! (Perudo / des menteurs) — reproduit ux-design/mockups/menteur.html.
   Tout est scope body.in-game[data-game="menteur"] ; classes prefixees .mn-.
   Ame FORET TROPICALE + PERROQUETS : canopee sombre en glass, feuillage, trouees
   de lumiere (accent vert jungle #34D399 / orange ara #F97316 — remplace l'ancien
   habillage "saloon western" #E0A458/#B23A3A, cf. ux-design/menteur.md "Note DA
   post-creation"). Les DES sont blancs a pips noirs (source de verite) ; la
   couleur ne code jamais une valeur (double codage). Zero scroll, cibles >=44px,
   dock jamais coupe.
   ============================================================ */
body.in-game[data-game="menteur"] { --primary: #34d399; --accent: #34d399; --accent-2: #f97316; --on-accent: #04211a; }

/* --- Skin comptoir en bois patine + vignette chaude --- */
/* Skin FORÊT tropicale : profondeur en glass (dans l'esprit de la famille), fines feuilles + trouées
   de lumière dans la canopée, pas de motif lourd. */
body.in-game[data-game="menteur"] .table {
  position: relative;
  background:
    radial-gradient(1.6px 1.6px at 16% 24%, rgba(134, 239, 172, .45), transparent 60%),
    radial-gradient(1.3px 1.3px at 74% 18%, rgba(134, 239, 172, .38), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 66%, rgba(52, 211, 153, .40), transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 60%, rgba(134, 239, 172, .30), transparent 60%),
    radial-gradient(90% 70% at 18% -8%, rgba(52, 211, 153, .16), transparent 58%),
    radial-gradient(80% 60% at 88% 8%, rgba(249, 115, 22, .10), transparent 60%),
    radial-gradient(130% 120% at 50% 60%, #0e241b 0%, #08170f 58%, #050f0a 100%);
  border: 1px solid rgba(52, 211, 153, .22);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .5);
}

/* --- Ossature : gobelets à gauche · CENTRE (enchère + réglage puis BARRE D'ACTIONS) · dock bas --- */
body.in-game[data-game="menteur"] .mn-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
body.in-game[data-game="menteur"] .mn-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; gap: 10px; align-items: stretch; }
body.in-game[data-game="menteur"] .mn-gobs { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-width: 200px; padding-right: 2px; }
/* Colonne centrale : réglage en haut (comptoir + sélecteur côte à côte), actions en grand dessous. */
body.in-game[data-game="menteur"] .mn-center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; }
body.in-game[data-game="menteur"] .mn-stage { width: 100%; display: flex; gap: 14px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
body.in-game[data-game="menteur"] .mn-mid { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
body.in-game[data-game="menteur"] .mn-dock { flex: 0 0 auto; }
body.in-game[data-game="menteur"] .mn-mono { font-family: var(--num, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* --- DE blanc a pips noirs (source de verite) --- */
body.in-game[data-game="menteur"] .mn-die {
  --w: 34px; --pip: #16191f; width: var(--w); height: var(--w); border-radius: 22%; position: relative;
  display: inline-block; flex: 0 0 auto; background-color: #f4f6f8; background-repeat: no-repeat;
  background-position: center; background-size: 100% 100%; border: 1px solid rgba(0, 0, 0, .22);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), inset 0 -3px 4px rgba(0, 0, 0, .2), inset 0 3px 3px rgba(255, 255, 255, .85);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s;
}
body.in-game[data-game="menteur"] .mn-die.f1 { background-image: radial-gradient(circle at 50% 50%, var(--pip) 0 11%, transparent 12%); }
body.in-game[data-game="menteur"] .mn-die.f2 { background-image:
  radial-gradient(circle at 30% 30%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 70% 70%, var(--pip) 0 11%, transparent 12%); }
body.in-game[data-game="menteur"] .mn-die.f3 { background-image:
  radial-gradient(circle at 28% 28%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 50% 50%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 72% 72%, var(--pip) 0 11%, transparent 12%); }
body.in-game[data-game="menteur"] .mn-die.f4 { background-image:
  radial-gradient(circle at 30% 30%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 70% 30%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 30% 70%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 70% 70%, var(--pip) 0 11%, transparent 12%); }
body.in-game[data-game="menteur"] .mn-die.f5 { background-image:
  radial-gradient(circle at 28% 28%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 72% 28%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 50% 50%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 28% 72%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 72% 72%, var(--pip) 0 11%, transparent 12%); }
body.in-game[data-game="menteur"] .mn-die.f6 { background-image:
  radial-gradient(circle at 30% 24%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 30% 50%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 30% 76%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 70% 24%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 70% 50%, var(--pip) 0 11%, transparent 12%),
  radial-gradient(circle at 70% 76%, var(--pip) 0 11%, transparent 12%); }
/* Paco = le 1 joker : lisere dore + etoile (double codage, pas la seule couleur) */
body.in-game[data-game="menteur"] .mn-die.paco {
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 2px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 -3px 4px rgba(0, 0, 0, .18);
}
body.in-game[data-game="menteur"] .mn-die.paco::after { content: "\2605"; position: absolute; top: -8px; right: -6px; font-size: 12px; color: var(--accent); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* Le 1 = Paco : plus de pip, un perroquet 🦜 centré (la DA « perroquets »). */
body.in-game[data-game="menteur"] .mn-die.paco-face { background-image: none; display: inline-grid; place-items: center; }
body.in-game[data-game="menteur"] .mn-die.paco-face .mn-paco-bird { font-size: calc(var(--w) * .6); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
body.in-game[data-game="menteur"] .mn-die.counted { box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 2px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); }
body.in-game[data-game="menteur"] .mn-die.dim { filter: grayscale(.35) brightness(.82); opacity: .6; }
body.in-game[data-game="menteur"] .mn-die--xs { --w: 20px; }

/* --- Gobelet adverse ferme (etain) + effectif --- */
body.in-game[data-game="menteur"] .mn-gob { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); flex: 0 0 auto; }
body.in-game[data-game="menteur"] .mn-gob.me { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
body.in-game[data-game="menteur"] .mn-gob.active { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent); }
body.in-game[data-game="menteur"] .mn-gob.out { filter: grayscale(.95) brightness(.55); opacity: .55; }
/* Le gobelet devient un PERROQUET perché (DA forêt) : roundel feuillu + emoji 🦜 ; le nombre de dés
   cachés reste lu par les pastilles à côté. Classe .mn-cup conservée (le DOM/tests ne bougent pas). */
body.in-game[data-game="menteur"] .mn-cup {
  width: 40px; height: 44px; position: relative; flex: 0 0 auto; border-radius: 14px 14px 12px 12px;
  display: grid; place-items: center;
  background: radial-gradient(120% 100% at 50% 15%, color-mix(in srgb, var(--accent) 34%, #0e241b), #0b1c15);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 2px 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
body.in-game[data-game="menteur"] .mn-cup::before { content: "🌿"; position: absolute; left: -4px; top: -6px; font-size: 12px; transform: rotate(-18deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
body.in-game[data-game="menteur"] .mn-parrot { font-size: 22px; line-height: 1; }
body.in-game[data-game="menteur"] .mn-cup.out { filter: grayscale(1) brightness(.7); }
body.in-game[data-game="menteur"] .mn-cup.out .mn-parrot { opacity: .5; }
body.in-game[data-game="menteur"] .mn-gob-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.in-game[data-game="menteur"] .mn-who { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--text); }
body.in-game[data-game="menteur"] .mn-av { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: var(--on-accent); background: linear-gradient(160deg, var(--accent), var(--accent-2)); flex: 0 0 auto; }
body.in-game[data-game="menteur"] .mn-dots { display: flex; gap: 3px; }
body.in-game[data-game="menteur"] .mn-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 70%, transparent); }
body.in-game[data-game="menteur"] .mn-dots i.off { background: var(--muted-2, var(--muted)); box-shadow: none; opacity: .45; }
body.in-game[data-game="menteur"] .mn-tag { font-size: 9.5px; font-weight: 800; color: #fff; background: var(--accent-2); border-radius: 999px; padding: 1px 7px; }
body.in-game[data-game="menteur"] .mn-gob.active .mn-tag { background: var(--accent); color: var(--on-accent); }
body.in-game[data-game="menteur"] .mn-tag--bid { background: var(--surface-2, var(--surface)); color: var(--muted); border: 1px solid var(--border); }
body.in-game[data-game="menteur"] .mn-x { color: var(--danger, #ef4444); font-weight: 900; }

/* --- LE COMPTOIR : l'enchere quantite x valeur sur cuir --- */
body.in-game[data-game="menteur"] .mn-mat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 24px; border-radius: 22px; max-width: 100%; min-width: 0;
  background: radial-gradient(120% 120% at 50% 15%, color-mix(in srgb, var(--accent) 12%, var(--surface-2, var(--surface))), rgba(6, 22, 15, .55));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 1px 0 color-mix(in srgb, var(--accent) 14%, transparent);
  backdrop-filter: blur(6px);
}
body.in-game[data-game="menteur"] .mn-mat.empty { border-style: dashed; }
body.in-game[data-game="menteur"] .mn-cap-lbl { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
body.in-game[data-game="menteur"] .mn-bid { display: flex; align-items: center; gap: 14px; }
body.in-game[data-game="menteur"] .mn-qty { font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 48px; line-height: .9; color: var(--text); font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
body.in-game[data-game="menteur"] .mn-mult { font-size: 22px; color: var(--muted); font-weight: 800; }
body.in-game[data-game="menteur"] .mn-bid .mn-die { --w: 60px; }
body.in-game[data-game="menteur"] .mn-bid-sub { font-size: 11px; color: var(--muted); text-align: center; }
body.in-game[data-game="menteur"] .mn-joker { color: var(--accent); font-weight: 800; }
body.in-game[data-game="menteur"] .mn-nowild { color: var(--muted-2, var(--muted)); font-weight: 800; }
body.in-game[data-game="menteur"] .mn-bid-by { font-size: 11px; color: var(--muted); max-width: 100%; overflow-wrap: anywhere; text-align: center; }
body.in-game[data-game="menteur"] .mn-bid-by b { color: var(--text); }
body.in-game[data-game="menteur"] .mn-ph { font-size: 13px; color: var(--muted); font-weight: 800; text-align: center; }

/* --- Selecteur d'enchere (stepper + 6 faces) --- */
body.in-game[data-game="menteur"] .mn-selector { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); min-width: 232px; max-width: 320px; }
body.in-game[data-game="menteur"] .mn-sel-lbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
body.in-game[data-game="menteur"] .mn-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.in-game[data-game="menteur"] .mn-stepper button { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; font-weight: 900; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--text); cursor: pointer; }
body.in-game[data-game="menteur"] .mn-stepper button:disabled { opacity: .4; cursor: not-allowed; }
body.in-game[data-game="menteur"] .mn-val { font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 26px; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
body.in-game[data-game="menteur"] .mn-faces { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
body.in-game[data-game="menteur"] .mn-faces .mn-die { --w: 44px; cursor: pointer; }
body.in-game[data-game="menteur"] .mn-faces .mn-die.sel { box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-3px); }
body.in-game[data-game="menteur"] .mn-faces .mn-die.locked { filter: grayscale(.85) brightness(.5); opacity: .45; cursor: not-allowed; }
body.in-game[data-game="menteur"] .mn-faces .mn-die.locked::before { content: "\1F512"; position: absolute; right: -3px; bottom: -5px; font-size: 11px; filter: none; }
body.in-game[data-game="menteur"] .mn-preview { font-size: 11.5px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.in-game[data-game="menteur"] .mn-ok { color: var(--ok, #22c55e); font-weight: 800; }
/* ★ BARRE D'ACTIONS AU CENTRE : grands boutons pleine largeur, sous l'enchère (bien visibles).
   Code couleur clair : orange = doute, or = pari exact, vert = relance/ouverture. */
body.in-game[data-game="menteur"] .mn-actions { display: flex; gap: 12px; width: 100%; max-width: 640px; justify-content: center; flex-wrap: wrap; }
/* flex:1 pour équilibrer 3 boutons, mais max-width borne un bouton SEUL (ouverture) : il reste compact
   et centré au lieu de s'étirer bêtement sur toute la ligne. */
body.in-game[data-game="menteur"] .mn-abtn { flex: 1 1 0; min-width: 150px; max-width: 250px; min-height: 56px; padding: 6px 16px; border-radius: 16px; font-weight: 900; font-size: 16px; cursor: pointer; border: 1px solid transparent; box-shadow: var(--e2, 0 6px 18px rgba(0,0,0,.45)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.05; }
body.in-game[data-game="menteur"] .mn-abtn .mn-abtn-k { font-size: 10px; font-weight: 800; letter-spacing: .04em; opacity: .85; }
body.in-game[data-game="menteur"] .mn-abtn.dudo { background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 62%, #000)); color: #fff; }
body.in-game[data-game="menteur"] .mn-abtn.exact { background: linear-gradient(180deg, #e0b64a, #b7862a); color: #241a08; }
body.in-game[data-game="menteur"] .mn-abtn.raise { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #000)); color: var(--on-accent); }
/* .mn-btn conservé pour le bouton « Continuer » de la révélation. */
body.in-game[data-game="menteur"] .mn-btn { min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 14px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--text); }
body.in-game[data-game="menteur"] .mn-btn.primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: var(--on-accent); border-color: transparent; }
body.in-game[data-game="menteur"] .mn-rest { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 480px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px dashed var(--border); }
body.in-game[data-game="menteur"] .mn-rest-ic { font-size: 24px; }

/* --- Dock bas : MES des ouverts (jamais coupe) --- */
body.in-game[data-game="menteur"] .mn-mydice { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2, var(--surface))), rgba(6, 22, 15, .5)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
body.in-game[data-game="menteur"] .mn-mydice-lbl { font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
body.in-game[data-game="menteur"] .mn-mydice-row { display: flex; gap: 10px; flex: 1; justify-content: center; align-items: center; min-height: 46px; }
body.in-game[data-game="menteur"] .mn-mydice-row .mn-die { --w: 52px; }
body.in-game[data-game="menteur"] .mn-mydice-cnt { font-family: var(--num, ui-monospace, monospace); font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
body.in-game[data-game="menteur"] .mn-mydice-cnt b { color: var(--text); }
body.in-game[data-game="menteur"] .mn-mydice-empty { color: var(--muted); font-weight: 800; font-size: 13px; }

/* --- Bandeau Palifico --- */
body.in-game[data-game="menteur"] .mn-palifico {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 12; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), #a9741f); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

/* --- Revelation du doute (modale sur le plateau) --- */
body.in-game[data-game="menteur"] .mn-reveal-backdrop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(4, 8, 12, .62); backdrop-filter: blur(3px); }
body.in-game[data-game="menteur"] .mn-reveal { width: min(640px, 94%); max-height: 94%; overflow: hidden; padding: 16px 18px; border-radius: 20px; background: var(--bg-2, #0e141b); border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); display: flex; flex-direction: column; }
body.in-game[data-game="menteur"] .mn-reveal__title { margin: 0 0 4px; font-size: 16px; flex: 0 0 auto; }
body.in-game[data-game="menteur"] .mn-reveal__sub { margin: 0 0 10px; font-size: 12px; color: var(--muted); flex: 0 0 auto; }
/* Seule cette zone défile en cas de débordement (nombreux joueurs / mobile paysage bas) : le titre
   et le pied (bouton "Continuer") restent TOUJOURS visibles, jamais poussés hors cadre. */
body.in-game[data-game="menteur"] .mn-reveal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 2px; margin: 0 -2px; }
body.in-game[data-game="menteur"] .mn-reveal__rows { display: flex; flex-direction: column; gap: 6px; }
body.in-game[data-game="menteur"] .mn-reveal-row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
body.in-game[data-game="menteur"] .mn-reveal-row.loser { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent); }
body.in-game[data-game="menteur"] .mn-reveal-row .mn-who { min-width: 92px; }
body.in-game[data-game="menteur"] .mn-dset { display: flex; gap: 7px; flex-wrap: wrap; }
body.in-game[data-game="menteur"] .mn-dset .mn-die { --w: 32px; }
body.in-game[data-game="menteur"] .mn-tally { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0; flex: 0 0 auto; }
body.in-game[data-game="menteur"] .mn-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px; border-radius: 12px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); }
body.in-game[data-game="menteur"] .mn-box .k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
body.in-game[data-game="menteur"] .mn-box .v { font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 28px; font-variant-numeric: tabular-nums; }
body.in-game[data-game="menteur"] .mn-box.count .v { color: var(--accent); }
body.in-game[data-game="menteur"] .mn-vs { font-size: 16px; font-weight: 900; color: var(--muted); }
body.in-game[data-game="menteur"] .mn-verdict { text-align: center; font-weight: 800; font-size: 14px; margin-bottom: 10px; flex: 0 0 auto; }
body.in-game[data-game="menteur"] .mn-verdict.false { color: var(--accent-2); }
body.in-game[data-game="menteur"] .mn-verdict.true { color: var(--ok, #22c55e); }
body.in-game[data-game="menteur"] .mn-reveal__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; padding-top: 10px; }
body.in-game[data-game="menteur"] .mn-rank { margin-left: auto; font-family: var(--num, ui-monospace, monospace); font-weight: 800; color: var(--muted); }
body.in-game[data-game="menteur"] .pill--palifico { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); border-color: transparent; color: var(--text); }

/* Révélation en PAYSAGE (téléphone couché, court) : le tally « compté vs annoncé » et le verdict
   sont déjà hors du scroll (toujours visibles) ; on compacte en plus les lignes de dés pour qu'avec
   4–6 joueurs tout tienne sans que les rangées mangent la hauteur. */
@media (max-height: 520px) {
  body.in-game[data-game="menteur"] .mn-reveal { max-height: 96%; padding: 10px 14px; }
  body.in-game[data-game="menteur"] .mn-reveal__title { font-size: 14px; }
  body.in-game[data-game="menteur"] .mn-reveal__sub { margin-bottom: 6px; font-size: 11px; }
  body.in-game[data-game="menteur"] .mn-reveal__rows { gap: 4px; }
  body.in-game[data-game="menteur"] .mn-reveal-row { padding: 4px 8px; gap: 8px; }
  body.in-game[data-game="menteur"] .mn-reveal-row .mn-who { min-width: 74px; font-size: 12px; }
  body.in-game[data-game="menteur"] .mn-dset { gap: 5px; }
  body.in-game[data-game="menteur"] .mn-dset .mn-die { --w: 22px; }
  body.in-game[data-game="menteur"] .mn-tally { gap: 12px; margin: 6px 0; }
  body.in-game[data-game="menteur"] .mn-box { padding: 4px 12px; }
  body.in-game[data-game="menteur"] .mn-box .v { font-size: 20px; }
  body.in-game[data-game="menteur"] .mn-verdict { font-size: 13px; margin-bottom: 6px; }
  body.in-game[data-game="menteur"] .mn-reveal__foot { padding-top: 6px; }
  /* Plateau paysage court : compacte enchère + réglage pour garder la barre d'actions visible. */
  body.in-game[data-game="menteur"] .mn-center { gap: 8px; }
  body.in-game[data-game="menteur"] .mn-stage { gap: 10px; }
  body.in-game[data-game="menteur"] .mn-mat { padding: 9px 16px; gap: 3px; }
  body.in-game[data-game="menteur"] .mn-qty { font-size: 34px; }
  body.in-game[data-game="menteur"] .mn-bid { gap: 10px; }
  body.in-game[data-game="menteur"] .mn-bid .mn-die { --w: 44px; }
  body.in-game[data-game="menteur"] .mn-selector { padding: 8px 9px; gap: 5px; min-width: 208px; }
  body.in-game[data-game="menteur"] .mn-stepper button { width: 38px; height: 38px; font-size: 20px; }
  body.in-game[data-game="menteur"] .mn-val { font-size: 22px; }
  body.in-game[data-game="menteur"] .mn-faces .mn-die { --w: 36px; }
  body.in-game[data-game="menteur"] .mn-abtn { min-height: 50px; font-size: 15px; }
  body.in-game[data-game="menteur"] .mn-mydice-row .mn-die { --w: 44px; }
}

/* --- Cover / art de tuile --- */
.art-menteur { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; }
.art-menteur .art-parrot { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.art-menteur .art-die { --pip: #16191f; width: 22px; height: 22px; border-radius: 22%; background-color: #f4f6f8; background-repeat: no-repeat; background-size: 100% 100%; border: 1px solid rgba(0, 0, 0, .25); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .2); }
.art-menteur .art-die.f5 { background-image:
  radial-gradient(circle at 28% 28%, var(--pip) 0 12%, transparent 13%),
  radial-gradient(circle at 72% 28%, var(--pip) 0 12%, transparent 13%),
  radial-gradient(circle at 50% 50%, var(--pip) 0 12%, transparent 13%),
  radial-gradient(circle at 28% 72%, var(--pip) 0 12%, transparent 13%),
  radial-gradient(circle at 72% 72%, var(--pip) 0 12%, transparent 13%); }
.art-menteur .art-die.f2 { background-image:
  radial-gradient(circle at 30% 30%, var(--pip) 0 12%, transparent 13%),
  radial-gradient(circle at 70% 70%, var(--pip) 0 12%, transparent 13%); }

/* --- Modale de fin de partie (#gameResultMessage) : NON scopee data-game (le body
       peut perdre data-game au nettoyage de la room), classes .mn- sans collision. --- */
.mn-result { display: flex; flex-direction: column; gap: 12px; }
.mn-result__headline { font-size: 18px; font-weight: 900; }
.mn-result__headline.won { color: var(--ok, #22c55e); }
.mn-result__headline.lost { color: var(--danger, #ef4444); }
.mn-result .mn-reveal__rows { display: flex; flex-direction: column; gap: 6px; }
.mn-result .mn-reveal-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.mn-result .mn-who { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.mn-result .mn-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #04211a; background: linear-gradient(160deg, #34d399, #f97316); }
.mn-result .mn-rank { margin-left: auto; font-family: var(--num, ui-monospace, monospace); font-weight: 800; color: var(--muted); }

/* --- Desktop/large : plus d'air, comptoir et dés agrandis. Seuil relevé à 1000px : en dessous, un
   paysage « moyen » (téléphone haut ~561-620px, tablette étroite) garderait des colonnes trop larges
   (act 340 + gobs 270) et le panneau droit débordait/était coupé. --- */
@media (min-width: 1000px) and (min-height: 561px) {
  body.in-game[data-game="menteur"] .mn-gobs { max-width: 270px; gap: 8px; }
  body.in-game[data-game="menteur"] .mn-act { width: 340px; }
  body.in-game[data-game="menteur"] .mn-bid .mn-die { --w: 90px; }
  body.in-game[data-game="menteur"] .mn-qty { font-size: 76px; }
  body.in-game[data-game="menteur"] .mn-mydice-row .mn-die { --w: 58px; }
  body.in-game[data-game="menteur"] .mn-faces .mn-die { --w: 44px; }
  body.in-game[data-game="menteur"] .mn-cup { width: 46px; height: 52px; }
  body.in-game[data-game="menteur"] .mn-mat { padding: 22px 40px; }
}

/* --- Phone paysage (large + court) : on serre pour tenir sur ~412px de haut sans scroll --- */
@media (max-height: 520px) {
  body.in-game[data-game="menteur"] .mn-main { gap: 8px; }
  body.in-game[data-game="menteur"] .mn-gobs { max-width: 188px; gap: 5px; }
  body.in-game[data-game="menteur"] .mn-act { width: 196px; }
  body.in-game[data-game="menteur"] .mn-gob { padding: 4px 7px; gap: 7px; }
  body.in-game[data-game="menteur"] .mn-cup { width: 32px; height: 38px; }
  body.in-game[data-game="menteur"] .mn-bid .mn-die { --w: 50px; }
  body.in-game[data-game="menteur"] .mn-qty { font-size: 40px; }
  body.in-game[data-game="menteur"] .mn-mat { padding: 10px 16px; }
  body.in-game[data-game="menteur"] .mn-mydice { padding: 6px 10px; }
  body.in-game[data-game="menteur"] .mn-mydice-row { min-height: 40px; }
  body.in-game[data-game="menteur"] .mn-mydice-row .mn-die { --w: 40px; }
  /* Sélecteur d'enchère compacté pour que les 3 boutons (Menteur ! / Exactement / Relancer)
     tiennent dans ~412px de haut sans être coupés par le dock. La colonne peut scroller en
     dernier recours (écrans encore plus courts) pour que Relancer reste toujours atteignable. */
  body.in-game[data-game="menteur"] .mn-act { align-items: stretch; justify-content: flex-start; overflow-y: auto; }
  body.in-game[data-game="menteur"] .mn-selector { padding: 6px; gap: 5px; }
  body.in-game[data-game="menteur"] .mn-sel-lbl { font-size: 9px; }
  body.in-game[data-game="menteur"] .mn-faces { gap: 5px; }
  body.in-game[data-game="menteur"] .mn-faces .mn-die { --w: 34px; }
  body.in-game[data-game="menteur"] .mn-stepper button { width: 40px; height: 40px; font-size: 20px; }
  body.in-game[data-game="menteur"] .mn-val { font-size: 22px; }
  body.in-game[data-game="menteur"] .mn-preview { font-size: 10.5px; }
  body.in-game[data-game="menteur"] .mn-act-row { gap: 6px; }
  body.in-game[data-game="menteur"] .mn-btn { min-height: 40px; font-size: 12.5px; }
  body.in-game[data-game="menteur"] .mn-act-row .mn-btn.primary { font-size: 13px; }
  /* Boutons d'action épinglés en bas de la colonne : si le sélecteur dépasse la hauteur dispo,
     ce sont les dés/labels qui défilent, jamais les boutons (Menteur ! / Exactement / Relancer). */
  body.in-game[data-game="menteur"] .mn-act-row {
    position: sticky; bottom: 0; z-index: 1; background: var(--surface); padding-top: 6px;
    box-shadow: 0 -8px 10px -6px var(--surface);
  }
}

/* ============================================================
   CANABIS (Hanabi coopératif) — reproduit ux-design/mockups/canabis.html.
   Scopé body.in-game[data-game="canabis"] ; classes préfixées .cnb-.
   Âme FESTIVAL JAPONAIS (matsuri) : nuit indigo, lanternes, feux d'artifice.
   Accent rose/violet (décor) ; les 5 familles gardent des couleurs standard +
   une FORME (daltonisme). Main INVERSÉE : mes dos annotés en dock, mains des
   coéquipiers en clair à gauche. Zéro scroll, cibles >=44px.
   ============================================================ */
body.in-game[data-game="canabis"] {
  --primary: #ff5470; --accent: #ff5470; --accent-2: #8b7cf6; --on-accent: #1a0510;
  --cnb-red: #e5484d; --cnb-yellow: #f5b841; --cnb-green: #22c55e; --cnb-blue: #3b82f6; --cnb-white: #edf2f8;
}

/* --- Skin NUIT MATSURI : indigo profond + gerbes + poussière d'étoiles --- */
body.in-game[data-game="canabis"] .table {
  position: relative;
  background:
    radial-gradient(1.5px 1.5px at 14% 18%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 12%, color-mix(in srgb, var(--accent) 80%, white), transparent 60%),
    radial-gradient(1.4px 1.4px at 40% 9%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 20%, color-mix(in srgb, var(--accent-2) 80%, white), transparent 60%),
    radial-gradient(60% 40% at 22% 6%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(50% 36% at 78% 4%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 60%),
    linear-gradient(180deg, #1a1e44 0%, #0f1230 52%, #080a1c 100%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 26%, transparent);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .5);
}

/* --- Ossature : 3 colonnes (coéquipiers · tableau commun · actions) + dock bas --- */
body.in-game[data-game="canabis"] .cnb-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
body.in-game[data-game="canabis"] .cnb-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; gap: 10px; align-items: stretch; }
body.in-game[data-game="canabis"] .cnb-mates { flex: 0 0 auto; width: 270px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 2px; }
body.in-game[data-game="canabis"] .cnb-mid { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
body.in-game[data-game="canabis"] .cnb-act { flex: 0 0 auto; width: 196px; display: flex; align-items: center; justify-content: center; }
body.in-game[data-game="canabis"] .cnb-dock { flex: 0 0 auto; position: relative; }
body.in-game[data-game="canabis"] .cnb-mono { font-family: var(--num, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* --- HUD pills spécifiques --- */
body.in-game[data-game="canabis"] .cnb-hpill.lant { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
body.in-game[data-game="canabis"] .cnb-hpill.fuse { background: color-mix(in srgb, var(--danger, #ef4444) 20%, var(--surface)); }
body.in-game[data-game="canabis"] .cnb-hpill.final { background: color-mix(in srgb, var(--accent-2) 26%, var(--surface)); border-color: transparent; }

/* --- Coéquipier (siège + main EN CLAIR) --- */
body.in-game[data-game="canabis"] .cnb-mate { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
body.in-game[data-game="canabis"] .cnb-mate.active { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent); }
body.in-game[data-game="canabis"] .cnb-mate.clickable { cursor: pointer; }
body.in-game[data-game="canabis"] .cnb-mate.clickable:hover { transform: translateY(-1px); }
body.in-game[data-game="canabis"] .cnb-mate.target { box-shadow: 0 0 0 2px var(--accent-2), 0 0 16px color-mix(in srgb, var(--accent-2) 55%, transparent); border-color: transparent; }
body.in-game[data-game="canabis"] .cnb-who { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: var(--text); }
body.in-game[data-game="canabis"] .cnb-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--accent), var(--accent-2)); flex: 0 0 auto; }
body.in-game[data-game="canabis"] .cnb-tag { margin-left: auto; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; }
body.in-game[data-game="canabis"] .cnb-tag.ghost { background: var(--surface-2, var(--surface)); color: var(--muted); border: 1px solid var(--border); }
body.in-game[data-game="canabis"] .cnb-hand-row { display: flex; gap: 5px; flex-wrap: wrap; }

/* --- Carte visible (couleur + chiffre + forme daltonisme) --- */
body.in-game[data-game="canabis"] .cnb-hcard {
  --w: 42px; width: var(--w); height: calc(var(--w) * 1.34); border-radius: 9px; position: relative;
  display: grid; place-items: center; font-weight: 900; color: #0b0f14; flex: 0 0 auto;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4); border: 1px solid rgba(0, 0, 0, .25);
}
body.in-game[data-game="canabis"] .cnb-hcard.mini { --w: 22px; border-radius: 5px; }
body.in-game[data-game="canabis"] .cnb-hcard .cnb-big { font-family: var(--num, ui-monospace, monospace); font-size: calc(var(--w) * .58); line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
body.in-game[data-game="canabis"] .cnb-hcard .cnb-shp { position: absolute; top: 2px; left: 4px; font-size: calc(var(--w) * .26); line-height: 1; }
body.in-game[data-game="canabis"] .cnb-hcard .cnb-known { position: absolute; right: 2px; bottom: 1px; font-size: 10px; }
body.in-game[data-game="canabis"] .cnb-hcard.c-red { background: linear-gradient(180deg, #ff7a7e, var(--cnb-red)); }
body.in-game[data-game="canabis"] .cnb-hcard.c-yellow { background: linear-gradient(180deg, #ffd873, var(--cnb-yellow)); }
body.in-game[data-game="canabis"] .cnb-hcard.c-green { background: linear-gradient(180deg, #6ee7a0, var(--cnb-green)); }
body.in-game[data-game="canabis"] .cnb-hcard.c-blue { background: linear-gradient(180deg, #7fb0ff, var(--cnb-blue)); }
body.in-game[data-game="canabis"] .cnb-hcard.c-white { background: linear-gradient(180deg, #ffffff, #d7dee8); border-color: #94a0ad; }

/* --- Tableau commun : 5 feux + ressources + défausse --- */
body.in-game[data-game="canabis"] .cnb-commons {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 20px;
  background: radial-gradient(120% 120% at 50% 10%, color-mix(in srgb, var(--accent) 10%, var(--surface-2, var(--surface))), rgba(8, 10, 28, .55));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
body.in-game[data-game="canabis"] .cnb-cap { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
body.in-game[data-game="canabis"] .cnb-fireworks { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
body.in-game[data-game="canabis"] .cnb-fw { display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.in-game[data-game="canabis"] .cnb-fw .cnb-stack {
  --w: 46px; width: var(--w); height: calc(var(--w) * 1.34); border-radius: 10px; display: grid; place-items: center; position: relative;
  font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 24px; color: #0b0f14; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); border: 1px solid rgba(0, 0, 0, .28);
}
body.in-game[data-game="canabis"] .cnb-fw.mini .cnb-stack { --w: 30px; font-size: 15px; border-radius: 6px; }
body.in-game[data-game="canabis"] .cnb-fw.empty .cnb-stack { background: var(--surface); border: 1px dashed var(--border); color: var(--muted-2, var(--muted)); font-size: 13px; box-shadow: none; }
body.in-game[data-game="canabis"] .cnb-fw.c-red:not(.empty) .cnb-stack { background: linear-gradient(180deg, #ff7a7e, var(--cnb-red)); }
body.in-game[data-game="canabis"] .cnb-fw.c-yellow:not(.empty) .cnb-stack { background: linear-gradient(180deg, #ffd873, var(--cnb-yellow)); }
body.in-game[data-game="canabis"] .cnb-fw.c-green:not(.empty) .cnb-stack { background: linear-gradient(180deg, #6ee7a0, var(--cnb-green)); }
body.in-game[data-game="canabis"] .cnb-fw.c-blue:not(.empty) .cnb-stack { background: linear-gradient(180deg, #7fb0ff, var(--cnb-blue)); }
body.in-game[data-game="canabis"] .cnb-fw.c-white:not(.empty) .cnb-stack { background: linear-gradient(180deg, #ffffff, #d7dee8); border-color: #94a0ad; }
body.in-game[data-game="canabis"] .cnb-fw.done .cnb-stack { box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); }
body.in-game[data-game="canabis"] .cnb-fw .cnb-burst { position: absolute; top: -18px; font-size: 18px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
body.in-game[data-game="canabis"] .cnb-fw .cnb-fwlbl { font-size: 9.5px; font-weight: 800; color: var(--muted); display: flex; align-items: center; gap: 3px; }
body.in-game[data-game="canabis"] .cnb-fw .cnb-shp { font-size: 11px; }

body.in-game[data-game="canabis"] .cnb-tokens { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
body.in-game[data-game="canabis"] .cnb-tok, body.in-game[data-game="canabis"] .cnb-discard {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
body.in-game[data-game="canabis"] .cnb-tok.lant { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
body.in-game[data-game="canabis"] .cnb-tok.fuse { background: color-mix(in srgb, var(--danger, #ef4444) 16%, var(--surface)); }
body.in-game[data-game="canabis"] .cnb-discard { cursor: default; color: var(--muted); }
body.in-game[data-game="canabis"] .cnb-dotset { display: inline-flex; gap: 3px; }
body.in-game[data-game="canabis"] .cnb-dotset i { width: 9px; height: 9px; border-radius: 50%; }
body.in-game[data-game="canabis"] .cnb-dotset i.lant-on { background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent); }
body.in-game[data-game="canabis"] .cnb-dotset i.lant-off { background: var(--muted-2, var(--muted)); opacity: .4; }
body.in-game[data-game="canabis"] .cnb-dotset i.fuse-on { background: var(--danger, #ef4444); box-shadow: 0 0 6px color-mix(in srgb, var(--danger, #ef4444) 70%, transparent); }
body.in-game[data-game="canabis"] .cnb-dotset i.fuse-off { background: var(--muted-2, var(--muted)); opacity: .4; }
body.in-game[data-game="canabis"] .cnb-dmini { display: inline-flex; gap: 2px; }
body.in-game[data-game="canabis"] .cnb-dmini b { display: inline-grid; place-items: center; width: 16px; height: 21px; border-radius: 4px; font-family: var(--num, ui-monospace, monospace); font-size: 10px; font-weight: 900; color: #0b0f14; }
body.in-game[data-game="canabis"] .cnb-dmini b.c-red { background: var(--cnb-red); }
body.in-game[data-game="canabis"] .cnb-dmini b.c-yellow { background: var(--cnb-yellow); }
body.in-game[data-game="canabis"] .cnb-dmini b.c-green { background: var(--cnb-green); }
body.in-game[data-game="canabis"] .cnb-dmini b.c-blue { background: var(--cnb-blue); }
body.in-game[data-game="canabis"] .cnb-dmini b.c-white { background: var(--cnb-white); color: #333; }

/* --- Colonne actions : repos / guidage / sélecteur d'indice --- */
body.in-game[data-game="canabis"] .cnb-rest, body.in-game[data-game="canabis"] .cnb-guide {
  display: flex; flex-direction: column; gap: 8px; justify-content: center; width: 100%; padding: 12px; border-radius: 16px;
  background: var(--surface); border: 1px dashed var(--border); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center;
}
body.in-game[data-game="canabis"] .cnb-rest__ic { font-size: 22px; }
body.in-game[data-game="canabis"] .cnb-guide { text-align: left; }
body.in-game[data-game="canabis"] .cnb-guide__row { display: flex; gap: 8px; align-items: flex-start; }
body.in-game[data-game="canabis"] .cnb-guide__ic { font-size: 15px; }
body.in-game[data-game="canabis"] .cnb-cluepop { width: 100%; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
body.in-game[data-game="canabis"] .cnb-cluepop__to { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
body.in-game[data-game="canabis"] .cnb-cluepop__to b { color: var(--accent); }
body.in-game[data-game="canabis"] .cnb-cluepop__lbl { font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 6px 0 5px; }
body.in-game[data-game="canabis"] .cnb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
body.in-game[data-game="canabis"] .cnb-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 8px;
  border-radius: 12px; font-weight: 900; font-family: var(--num, ui-monospace, monospace); font-size: 15px;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
body.in-game[data-game="canabis"] .cnb-chip.col { color: #0b0f14; }
body.in-game[data-game="canabis"] .cnb-chip.col.c-red { background: var(--cnb-red); }
body.in-game[data-game="canabis"] .cnb-chip.col.c-yellow { background: var(--cnb-yellow); }
body.in-game[data-game="canabis"] .cnb-chip.col.c-green { background: var(--cnb-green); }
body.in-game[data-game="canabis"] .cnb-chip.col.c-blue { background: var(--cnb-blue); }
body.in-game[data-game="canabis"] .cnb-chip.col.c-white { background: var(--cnb-white); border-color: #94a0ad; }
body.in-game[data-game="canabis"] .cnb-chip:hover { transform: translateY(-2px); }
body.in-game[data-game="canabis"] .cnb-chip.off { filter: grayscale(.85) brightness(.55); opacity: .4; cursor: not-allowed; position: relative; }
body.in-game[data-game="canabis"] .cnb-chip.off::after { content: "🔒"; position: absolute; right: -3px; bottom: -4px; font-size: 10px; filter: none; }

/* --- Dock : ma main de DOS annotés + prompt + popover Jouer/Défausser --- */
body.in-game[data-game="canabis"] .cnb-prompt { font-size: 11.5px; font-weight: 800; color: var(--muted); text-align: center; margin-bottom: 4px; }
body.in-game[data-game="canabis"] .cnb-hand {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2, var(--surface))), rgba(8, 10, 28, .5));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
}
body.in-game[data-game="canabis"] .cnb-hand-lbl { font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); flex: 0 0 auto; max-width: 90px; }
body.in-game[data-game="canabis"] .cnb-slots { display: flex; gap: 12px; flex: 1; justify-content: center; }
body.in-game[data-game="canabis"] .cnb-slot {
  --w: 50px; width: var(--w); height: calc(var(--w) * 1.34); border-radius: 10px; position: relative; cursor: pointer;
  background: repeating-linear-gradient(45deg, #1b1f45, #1b1f45 6px, #252a67 6px, #252a67 12px);
  border: 1px solid var(--glass-brd-strong, rgba(255, 255, 255, .18)); box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: hidden; flex: 0 0 auto;
}
body.in-game[data-game="canabis"] .cnb-slot::before { content: "\2749"; position: absolute; top: 5px; left: 0; right: 0; text-align: center; font-size: 15px; color: color-mix(in srgb, var(--accent) 50%, transparent); opacity: .6; }
body.in-game[data-game="canabis"] .cnb-slot.selected { transform: translateY(-8px); box-shadow: 0 12px 26px rgba(0, 0, 0, .5), 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); }
body.in-game[data-game="canabis"] .cnb-slot.dimmed { filter: grayscale(.4) brightness(.8); opacity: .6; }
body.in-game[data-game="canabis"] .cnb-knows { width: 100%; display: flex; gap: 3px; justify-content: center; padding: 3px; background: rgba(6, 8, 20, .72); }
body.in-game[data-game="canabis"] .cnb-kc { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 900; color: #0b0f14; border: 1px solid rgba(0, 0, 0, .3); }
body.in-game[data-game="canabis"] .cnb-kc.c-red { background: var(--cnb-red); }
body.in-game[data-game="canabis"] .cnb-kc.c-yellow { background: var(--cnb-yellow); }
body.in-game[data-game="canabis"] .cnb-kc.c-green { background: var(--cnb-green); }
body.in-game[data-game="canabis"] .cnb-kc.c-blue { background: var(--cnb-blue); }
body.in-game[data-game="canabis"] .cnb-kc.c-white { background: var(--cnb-white); border-color: #94a0ad; }
body.in-game[data-game="canabis"] .cnb-kr { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 5px; font-family: var(--num, ui-monospace, monospace); font-size: 11px; font-weight: 900; color: var(--text); background: var(--surface-2, var(--surface)); border: 1px solid var(--glass-brd-strong, rgba(255, 255, 255, .18)); }
body.in-game[data-game="canabis"] .cnb-unk { display: inline-grid; place-items: center; min-width: 18px; height: 18px; font-size: 11px; font-weight: 800; color: var(--muted-2, var(--muted)); }

body.in-game[data-game="canabis"] .cnb-playpop {
  position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 8; width: 210px;
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--bg-2, #0e141b);
  border: 1px solid var(--glass-brd-strong, rgba(255, 255, 255, .18)); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
body.in-game[data-game="canabis"] .cnb-playpop__know { font-size: 11px; color: var(--muted); font-weight: 800; text-align: center; }
body.in-game[data-game="canabis"] .cnb-playpop__know b { color: var(--text); }
body.in-game[data-game="canabis"] .cnb-playpop__row { display: flex; gap: 8px; }
body.in-game[data-game="canabis"] .cnb-btn {
  min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--text); flex: 1;
}
body.in-game[data-game="canabis"] .cnb-btn.primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: #fff; border-color: transparent; }
body.in-game[data-game="canabis"] .cnb-btn.ghost { background: transparent; flex: 0 0 auto; min-height: 32px; }
body.in-game[data-game="canabis"] .cnb-btn.sm { font-size: 12px; }
body.in-game[data-game="canabis"] .cnb-btn.disabled, body.in-game[data-game="canabis"] .cnb-btn[disabled] { filter: grayscale(.7) brightness(.7); opacity: .5; cursor: not-allowed; }

/* --- Modale de fin (coopérative) --- */
body.in-game[data-game="canabis"] .cnb-result, .cnb-result { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cnb-result__head { font-size: 18px; font-weight: 900; }
.cnb-result__head.won { color: #ff5470; }
.cnb-result__head.lost { color: #ef4444; }
.cnb-result__score { font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 30px; }
.cnb-result__apr { font-size: 13px; font-weight: 800; color: var(--muted); }
.cnb-endfw { display: flex; gap: 8px; }

/* Modale de fin (rendue dans #gameResultMessage) : LE JEU, coopératif — même écran pour tous
   (cf. ux-design/mockups/the-game.html §"États clés" WIN/LOSE). Classes en dehors de
   body.in-game[data-game="the-game"] : la room/session est supprimée en fin de partie, donc
   data-game peut déjà être retombé à "" quand la modale reste ouverte (comme .qcf-end-*/.cnb-result). */
.tg-end { text-align: center; }
.tg-end-ico { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.tg-end-title { font-size: 20px; font-weight: 900; letter-spacing: .03em; margin-bottom: 4px; }
.tg-end-title.won { color: #3df07a; }
.tg-end-title.lost { color: #ef4444; }
.tg-end-sub { font-size: 12.5px; color: var(--muted, #9aa7b4); }

/* Modale de fin (rendue dans #gameResultMessage) : UNO, manche unique, premier à 0 carte gagne.
   Classes en dehors de body.in-game[data-game="uno-classic"] pour la même raison que .tg-end-*
   ci-dessus (room/session déjà supprimée quand la modale reste ouverte). */
.uno-end { text-align: center; }
.uno-end-title { font-size: 19px; font-weight: 900; letter-spacing: .02em; margin-bottom: 6px; }
.uno-end-title.won { color: #3df07a; }
.uno-end-title.lost { color: #ef4444; }
.uno-end-sub { font-size: 12.5px; color: var(--muted, #9aa7b4); }

/* --- Art de cover (landing / catalogue) : gerbes de feu au-dessus d'une lanterne --- */
.art-canabis { position: relative; display: flex; align-items: center; justify-content: center; }
.art-canabis .fw2 { font-size: 40px; transform: translate(-6px, -18px) rotate(-8deg); filter: drop-shadow(0 0 10px rgba(255, 84, 112, .5)); }
.art-canabis .fw { font-size: 54px; transform: translateY(-6px); filter: drop-shadow(0 0 14px rgba(139, 124, 246, .5)); z-index: 1; }
.art-canabis .lantern { font-size: 40px; transform: translate(8px, 16px) rotate(6deg); }

/* --- Compaction téléphone paysage (large + court) : rien ne déborde en hauteur --- */
@media (max-height: 460px) {
  body.in-game[data-game="canabis"] .cnb-hcard { --w: 36px; }
  body.in-game[data-game="canabis"] .cnb-fw .cnb-stack { --w: 40px; font-size: 20px; }
  body.in-game[data-game="canabis"] .cnb-slot { --w: 44px; }
  body.in-game[data-game="canabis"] .cnb-commons { padding: 10px 14px; gap: 8px; }
  body.in-game[data-game="canabis"] .cnb-playpop { bottom: 70px; }
}
/* --- Colonnes latérales plus étroites sur paysage ÉTROIT (indépendant de la hauteur) : sinon, sur
   un téléphone dont le paysage est haut (~461-560px) mais pas large, les colonnes larges (mates 270 +
   act 196) poussaient le panneau droit (indice / actions) hors du cadre → coupé. --- */
@media (max-width: 940px) {
  body.in-game[data-game="canabis"] .cnb-mates { width: 234px; }
  body.in-game[data-game="canabis"] .cnb-act { width: 174px; }
}

/* ============================================================
   L'EQUIPAGE (The Crew coop) — reproduit ux-design/mockups/equipage.html.
   Classes prefixees .eqp-. Ame cockpit spatial : accent violet #A855F7 /
   cyan hublot #22D3EE, 4 couleurs a double codage forme (carre/triangle/losange/rond)
   + fusees. 3 colonnes (Objectifs / Hublot / Equipage) + dock. Coop : WON/LOST commun.
   La palette est posee sur .eqp-wrap ET .eqp-result pour que la modale de fin
   garde les memes couleurs. Cibles >=44px, zero scroll.
   ============================================================ */
.eqp-wrap, .eqp-result {
  /* Univers The Crew : bleu spatial profond + halo cyan (comme la boîte), pas de violet. */
  --accent: #22d3ee; --accent-2: #5b8cff; --on-accent: #04121c;
  --eqp-blue: #3b82f6; --eqp-green: #22c55e; --eqp-yellow: #eab308; --eqp-pink: #ec4899; --eqp-gold: #e8c468;
  --eqp-brd: rgba(120,180,255,.16); --eqp-brd2: rgba(120,180,255,.30);
  --eqp-surf: rgba(120,180,255,.06); --eqp-surf2: rgba(120,180,255,.11);
  --eqp-txt: #eaf2fb; --eqp-muted: #9ab0c6; --eqp-muted2: #6a7f94;
}

body.in-game[data-game="equipage"] .table {
  /* Nuit spatiale profonde de la boîte : navy bleu + halo cyan (planète), étoiles froides. */
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 82% 62%, rgba(180,220,255,.55), transparent),
    radial-gradient(1px 1px at 33% 74%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 73% 34%, rgba(34,211,238,.55), transparent),
    radial-gradient(120% 70% at 50% -12%, rgba(34,211,238,.20), transparent 62%),
    radial-gradient(90% 60% at 50% 118%, rgba(91,140,255,.16), transparent 60%),
    radial-gradient(130% 120% at 50% 55%, #0a1730 0%, #06101f 55%, #04070f 100%);
  border: 1px solid rgba(56,160,230,.28);
  box-shadow: inset 0 0 46px rgba(0,0,0,.55);
  color: var(--eqp-txt);
}

.eqp-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; color: var(--eqp-txt); }
.eqp-board { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 148px 1fr 158px; gap: 8px; }
.eqp-dock { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }

.eqp-col-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--eqp-muted2); display: flex; align-items: center; gap: 6px; padding: 0 2px 2px; }
.eqp-cnt { margin-left: auto; color: var(--accent-2); font-variant-numeric: tabular-nums; }

.eqp-mission, .eqp-crew { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 2px; }

.eqp-obj { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 12px; background: var(--eqp-surf); border: 1px solid var(--eqp-brd); font-size: 11px; }
.eqp-obj.mine { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 14%, var(--eqp-surf)); }
.eqp-obj.done { opacity: .68; }
.eqp-obj.inplay { box-shadow: 0 0 0 2px var(--eqp-gold), 0 0 14px -3px color-mix(in srgb, var(--eqp-gold) 70%, transparent); }
.eqp-arrow { color: var(--eqp-muted2); }
.eqp-who { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--on-accent); flex: none; }
.eqp-mine-tag { font-size: 8.5px; font-weight: 800; color: var(--accent-2); letter-spacing: .04em; }
.eqp-st { margin-left: auto; font-size: 13px; }
.eqp-st.ok { color: var(--eqp-green); } .eqp-st.ko { color: var(--eqp-pink); } .eqp-st.todo { color: var(--eqp-yellow); }

.eqp-mini { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 6px; background: linear-gradient(180deg, #fff, #eef2f6); color: #0b0f14; font-weight: 800; font-size: 11px; flex: none; }
.eqp-mini.blue { color: var(--eqp-blue); } .eqp-mini.green { color: var(--eqp-green); } .eqp-mini.yellow { color: var(--eqp-yellow); } .eqp-mini.pink { color: var(--eqp-pink); }
.eqp-mini.rocket { background: linear-gradient(180deg, #1a1030, #0d0820); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.eqp-mini .eqp-pip { font-size: 10px; }

.eqp-suit { font-weight: 800; }
.eqp-suit.blue { color: var(--eqp-blue); } .eqp-suit.green { color: var(--eqp-green); } .eqp-suit.yellow { color: var(--eqp-yellow); } .eqp-suit.pink { color: var(--eqp-pink); } .eqp-suit.rocket { color: var(--accent-2); }

.eqp-hublot { position: relative; min-height: 0; }
.eqp-console { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; border: 1px solid var(--eqp-brd2); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); box-shadow: inset 0 0 30px -8px var(--accent), 0 0 30px -12px var(--accent-2); display: grid; place-items: center; text-align: center; padding: 6px; }
.eqp-demande { font-size: 10px; color: var(--eqp-muted); line-height: 1.3; }
.eqp-lead { margin-top: 3px; font-size: 10px; font-weight: 800; color: var(--eqp-gold); }
.eqp-played { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eqp-name { font-size: 9px; color: var(--eqp-muted); font-weight: 700; white-space: nowrap; }
.eqp-slot { width: 42px; aspect-ratio: 5/7; border-radius: 12px; border: 1.5px dashed var(--eqp-brd2); display: grid; place-items: center; color: var(--eqp-muted2); font-size: 9px; background: var(--eqp-surf); }
.eqp-slot.live { color: var(--accent-2); border-color: var(--accent-2); }
.eqp-hublot .eqp-card { --w: 44px; }

.eqp-mate { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 12px; background: var(--eqp-surf); border: 1px solid var(--eqp-brd); }
.eqp-mate.active { box-shadow: 0 0 0 2px var(--accent), 0 0 16px -4px color-mix(in srgb, var(--accent) 60%, transparent); border-color: transparent; }
.eqp-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--on-accent); flex: none; }
.eqp-metac { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.eqp-nm { font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 3px; }
.eqp-sub { font-size: 9.5px; color: var(--eqp-muted); }
.eqp-cap { font-size: 11px; }
.eqp-rt { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.eqp-stt { font-size: 12px; }
.eqp-stt.act { color: var(--accent-2); }
.eqp-sig { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; color: var(--eqp-muted); }
.eqp-sig.none { color: var(--eqp-muted2); }
.eqp-mk { font-weight: 900; color: var(--accent-2); }

.eqp-card { --w: 52px; width: var(--w); aspect-ratio: 5/7; border-radius: 12px; position: relative; background: linear-gradient(180deg, #fff, #eef2f6); color: #0b0f14; box-shadow: 0 6px 18px rgba(0,0,0,.45); display: grid; place-items: center; font-weight: 800; user-select: none; flex: none; transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s cubic-bezier(.2,.7,.2,1); }
.eqp-card .eqp-idx { position: absolute; top: 3px; left: 5px; font-size: calc(var(--w) * .26); line-height: 1; }
.eqp-card .eqp-pip { position: absolute; top: 4px; right: 5px; font-size: calc(var(--w) * .24); line-height: 1; }
.eqp-card .eqp-big { font-size: calc(var(--w) * .5); line-height: 1; }
.eqp-card.blue { color: var(--eqp-blue); } .eqp-card.green { color: var(--eqp-green); } .eqp-card.yellow { color: var(--eqp-yellow); } .eqp-card.pink { color: var(--eqp-pink); }
.eqp-card.rocket { background: linear-gradient(180deg, #1c1240, #0c0820); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 16px -5px var(--accent); }
.eqp-card.rocket .eqp-idx { color: var(--accent); }
.eqp-card.leadwin { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px var(--accent-2), 0 0 16px -3px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.eqp-card.target { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px var(--eqp-gold), 0 0 18px -3px color-mix(in srgb, var(--eqp-gold) 70%, transparent); }

.eqp-hand-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; gap: 8px; min-height: 40px; }
.eqp-hlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--eqp-muted); flex: 0 0 auto; }
.eqp-rule { font-size: 11px; font-weight: 800; color: var(--eqp-gold); flex: 1 1 auto; text-align: right; min-width: 0; }
.eqp-hand { display: flex; align-items: flex-end; gap: 8px; padding: 16px 14px 6px; overflow-x: auto; overflow-y: visible; }
.eqp-hand .eqp-card { --w: 56px; }
.eqp-card.playable { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px var(--accent), 0 0 18px -4px color-mix(in srgb, var(--accent) 55%, transparent); cursor: pointer; transform: translateY(-8px); }
.eqp-card.playable.target { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px var(--eqp-gold), 0 0 18px -4px color-mix(in srgb, var(--eqp-gold) 65%, transparent); }
/* Non jouable ce pli (mauvaise couleur) : on doit quand même LIRE la carte pour planifier → voile
   léger + cadenas (avant : opacity .5 = valeurs/enseignes illisibles sur fond sombre). */
.eqp-card.unplayable { filter: grayscale(.25) brightness(.92); opacity: .82; cursor: not-allowed; }
.eqp-card.unplayable::after { content: "\1F512"; position: absolute; right: 4px; bottom: 3px; font-size: 11px; }
.eqp-card.comm { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px var(--accent-2), 0 0 16px -3px color-mix(in srgb, var(--accent-2) 60%, transparent); cursor: pointer; }
.eqp-card.comm.selected { transform: translateY(-8px); box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 3px var(--accent-2), 0 0 22px -2px var(--accent-2); }
.eqp-card.dim { filter: grayscale(.5) brightness(.7); opacity: .42; }
.eqp-marker { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--accent-2); color: var(--on-accent); font-size: 9px; font-weight: 900; line-height: 1; padding: 1px 5px; border-radius: 999px; white-space: nowrap; }
.eqp-empty-hand { color: var(--eqp-muted2); padding: 12px; }
.eqp-radio { flex: none; height: var(--tap, 44px); min-width: 104px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 12px; cursor: pointer; background: var(--eqp-surf2); color: var(--eqp-txt); border: 1px solid var(--eqp-brd2); }
.eqp-radio.armed { background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 60%, #000)); color: var(--on-accent); border-color: transparent; }
.eqp-radio.spent { opacity: .45; cursor: not-allowed; }

.eqp-pop-backdrop { position: absolute; inset: 0; background: rgba(4,8,12,.5); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 30; }
.eqp-pop { min-width: 230px; padding: 12px; border-radius: 16px; background: #0e141b; border: 1px solid var(--eqp-brd2); box-shadow: 0 18px 50px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 8px; }
.eqp-pop-lab { font-size: 12px; color: var(--eqp-muted); }
.eqp-pop-row { display: flex; align-items: center; gap: 8px; }
.eqp-pop-txt { font-size: 13px; font-weight: 800; }
.eqp-pop-q { font-size: 11px; font-weight: 700; color: var(--accent-2); }
.eqp-pop-btns { display: flex; gap: 6px; justify-content: flex-end; }
.eqp-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 1px solid var(--eqp-brd); background: var(--eqp-surf2); color: var(--eqp-txt); cursor: pointer; }
.eqp-btn.primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: var(--on-accent); border-color: transparent; }

.eqp-result { text-align: center; padding: 6px; }
.eqp-res-title { font-size: 18px; font-weight: 900; letter-spacing: .02em; }
.eqp-result.won .eqp-res-title { color: var(--eqp-green); }
.eqp-result.lost .eqp-res-title { color: #fca5a5; }
.eqp-res-reason { font-size: 13px; color: var(--eqp-muted); margin: 6px 0 12px; line-height: 1.5; }
.eqp-res-tasks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.eqp-res-task { display: inline-flex; align-items: center; gap: 4px; }

@media (min-width: 1100px) {
  .eqp-board { grid-template-columns: 280px 1fr 300px; gap: 16px; }
  .eqp-console { width: 190px; height: 190px; }
  .eqp-hublot .eqp-card { --w: 72px; }
  .eqp-hand .eqp-card { --w: 84px; }
  .eqp-slot { width: 72px; }
  .eqp-obj, .eqp-mate { font-size: 13px; padding: 9px 11px; }
  .eqp-av { width: 40px; height: 40px; font-size: 13px; }
  .eqp-radio { height: var(--tap-lg, 56px); min-width: 120px; }
}

/* Cover art lobby — equipage : fusee (atout) + les 4 enseignes a double codage forme. */
.art-equipage { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; }
.art-equipage .rocket { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(34, 211, 238, .55)); }
.art-equipage .s { font-size: 16px; font-weight: 900; line-height: 1; text-shadow: 0 0 8px currentColor; }
.art-equipage .s.b { color: #3b82f6; }
.art-equipage .s.g { color: #22c55e; }
.art-equipage .s.y { color: #eab308; }
.art-equipage .s.p { color: #ec4899; }

/* ============================================================
   FAÏENCE (Azul-like) — reproduit ux-design/mockups/faience.html.
   Scopé body.in-game[data-game="faience"] ; classes préfixées .fa-.
   Âme « atelier d'azulejos » : accent cobalt #2E6BE6 / or #E8A33D.
   5 émaux, chacun un MOTIF propre (double codage). Board 3 colonnes
   en paysage (offre · MON plateau · adversaires), zéro scroll.
   ============================================================ */
body.in-game[data-game="faience"] { --primary: #2e6be6; --accent: #2e6be6; --accent-2: #e8a33d; --on-accent: #06101f; }

/* --- Atelier nuit : fond profond + fines craquelures céramiques --- */
body.in-game[data-game="faience"] .table {
  position: relative;
  background:
    radial-gradient(1.3px 1.3px at 16% 26%, rgba(120,160,240,.16), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 18%, rgba(232,163,61,.13), transparent 60%),
    radial-gradient(1.4px 1.4px at 40% 74%, rgba(120,160,240,.12), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 66%, rgba(232,163,61,.12), transparent 60%),
    radial-gradient(120% 90% at 50% -10%, rgba(46,107,230,.14), transparent 55%),
    radial-gradient(130% 120% at 50% 60%, #101725 0%, #0b111c 55%, #080c14 100%);
  border: 1px solid rgba(46,107,230,.22);
  box-shadow: inset 0 0 46px rgba(0,0,0,.5);
}

/* --- Ossature : board en 3 COLONNES (offre · MON plateau · adversaires), desktop ET paysage,
   pour tenir sans scroll aussi bien en 1280×800 qu'en 924×412 (un plateau perso Azul est haut). --- */
body.in-game[data-game="faience"] .fa-board {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: row; gap: 12px; align-items: stretch; justify-content: center;
}
body.in-game[data-game="faience"] .fa-defs { position: absolute; width: 0; height: 0; }
body.in-game[data-game="faience"] .fa-offer { order: 0; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
body.in-game[data-game="faience"] .fa-mid { order: 1; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
body.in-game[data-game="faience"] .fa-opps { order: 2; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; justify-content: center; overflow-y: auto; }
body.in-game[data-game="faience"] .fa-colhead { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #9aa7b4); }

/* --- Carreau émaillé (.fa-tile) : émail = couleur + MOTIF --- */
body.in-game[data-game="faience"] .fa-tile {
  --tw: 26px; width: var(--tw); height: var(--tw); border-radius: 6px; position: relative;
  display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.16); flex: none;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s, opacity .16s;
}
body.in-game[data-game="faience"] .fa-tile .fa-mtf { width: 66%; height: 66%; display: block; color: currentColor; }
body.in-game[data-game="faience"] .fa-tile.e-bleu  { background: linear-gradient(180deg, #3b79f0, #2e6be6); color: rgba(255,255,255,.94); }
body.in-game[data-game="faience"] .fa-tile.e-jaune { background: linear-gradient(180deg, #f0b451, #e8a33d); color: rgba(58,36,0,.82); }
body.in-game[data-game="faience"] .fa-tile.e-rouge { background: linear-gradient(180deg, #e0644c, #d6533c); color: rgba(255,241,237,.96); }
body.in-game[data-game="faience"] .fa-tile.e-noir  { background: linear-gradient(180deg, #28375a, #1e2a44); color: rgba(176,198,236,.94); border-color: rgba(150,175,220,.38); }
body.in-game[data-game="faience"] .fa-tile.e-blanc { background: linear-gradient(180deg, #f2f4f9, #e7eaf0); color: #2e6be6; border-color: rgba(20,40,80,.2); }
body.in-game[data-game="faience"] .fa-tile.pick { cursor: pointer; }
body.in-game[data-game="faience"] .fa-tile.pick:hover { transform: translateY(-2px); }
body.in-game[data-game="faience"] .fa-tile.sel { transform: translateY(-4px) scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent); z-index: 2; }
body.in-game[data-game="faience"] .fa-tile.dim { opacity: .42; }
body.in-game[data-game="faience"] .fa-tile.mini { --tw: 12px; border-radius: 3px; }

/* --- Case vide / fantôme (fresque) --- */
body.in-game[data-game="faience"] .fa-cell {
  --tw: 26px; width: var(--tw); height: var(--tw); border-radius: 6px;
  border: 1.5px dashed rgba(255,255,255,.15); background: rgba(255,255,255,.02);
  display: grid; place-items: center; flex: none;
}
body.in-game[data-game="faience"] .fa-cell.ghost { background: transparent; }
body.in-game[data-game="faience"] .fa-cell.ghost .fa-mtf { width: 58%; height: 58%; opacity: .3; }
body.in-game[data-game="faience"] .fa-cell.ghost.e-bleu  { color: #4c86f2; }
body.in-game[data-game="faience"] .fa-cell.ghost.e-jaune { color: #e8a33d; }
body.in-game[data-game="faience"] .fa-cell.ghost.e-rouge { color: #dd6a54; }
body.in-game[data-game="faience"] .fa-cell.ghost.e-noir  { color: #6e86bc; }
body.in-game[data-game="faience"] .fa-cell.ghost.e-blanc { color: #b8c2d6; }

/* --- MON plateau : lignes de motif accolées à la fresque + plancher --- */
body.in-game[data-game="faience"] .fa-myboard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border-radius: 16px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
}
body.in-game[data-game="faience"] .fa-myhead { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between; }
body.in-game[data-game="faience"] .fa-myhead .fa-nm { font-size: 11px; font-weight: 800; color: var(--text, #eaf0f6); }
body.in-game[data-game="faience"] .fa-myhead .fa-sc { font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 14px; }
body.in-game[data-game="faience"] .fa-myhead .fa-sc b { color: var(--accent-2); }
body.in-game[data-game="faience"] .fa-prompt { font-size: 11px; font-weight: 700; color: var(--muted, #9aa7b4); }
body.in-game[data-game="faience"] .fa-board-core { display: flex; align-items: center; gap: 10px; }
body.in-game[data-game="faience"] .fa-plines { display: flex; flex-direction: column; gap: 4px; }
body.in-game[data-game="faience"] .fa-pline { display: flex; justify-content: flex-end; gap: 4px; padding: 2px; border-radius: 8px; transition: box-shadow .16s; align-items: center; }
body.in-game[data-game="faience"] .fa-pline.legal { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); cursor: pointer; }
body.in-game[data-game="faience"] .fa-pline.illegal { opacity: .5; }
body.in-game[data-game="faience"] .fa-pline.illegal::after { content: "\1F512"; font-size: 12px; margin-left: 2px; }
body.in-game[data-game="faience"] .fa-hint { font-size: 9.5px; font-weight: 800; color: var(--accent); font-family: var(--num, ui-monospace, monospace); margin-left: 4px; white-space: nowrap; }
body.in-game[data-game="faience"] .fa-walldiv { width: 2px; align-self: stretch; border-radius: 2px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent); }
body.in-game[data-game="faience"] .fa-wall { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.18); }
body.in-game[data-game="faience"] .fa-wall.mini { gap: 2px; padding: 2px; }

/* --- Ligne de plancher --- */
body.in-game[data-game="faience"] .fa-floor { display: flex; gap: 4px; align-items: center; margin-top: 2px; padding: 3px; border-radius: 8px; }
body.in-game[data-game="faience"] .fa-floor.legal { cursor: pointer; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
body.in-game[data-game="faience"] .fa-floor-lbl { font-size: 9.5px; font-weight: 800; color: var(--muted, #9aa7b4); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
body.in-game[data-game="faience"] .fa-fc { position: relative; --tw: 24px; width: var(--tw); height: var(--tw); border-radius: 6px; border: 1.5px dashed rgba(214,83,60,.3); background: rgba(214,83,60,.06); display: grid; place-items: center; flex: none; }
body.in-game[data-game="faience"] .fa-fc.filled { border-style: solid; border-color: transparent; }
body.in-game[data-game="faience"] .fa-fc .fa-pen { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 8.5px; font-weight: 800; color: var(--muted-2, #6b7986); font-family: var(--num, ui-monospace, monospace); }
body.in-game[data-game="faience"] .fa-fc.first .fa-fp { font-weight: 900; color: #e8a33d; }
body.in-game[data-game="faience"] .fa-floor.mini { margin-top: 0; padding: 0; gap: 2px; }
body.in-game[data-game="faience"] .fa-floor.mini .fa-fc.mini.first { --tw: 12px; font-size: 9px; border-radius: 3px; display: grid; place-items: center; color: var(--accent-2); }
body.in-game[data-game="faience"] .fa-floor-empty { font-size: 9px; color: var(--muted-2, #6b7986); }

/* --- Jeton premier joueur --- */
body.in-game[data-game="faience"] .fa-fptoken { --tw: 24px; width: var(--tw); height: var(--tw); border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: linear-gradient(180deg, #f5d98a, #e8a33d); color: #3a2400; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 10px color-mix(in srgb, var(--accent-2) 60%, transparent); border: 1px solid rgba(255,255,255,.4); flex: none; }

/* --- OFFRE : fabriques + centre --- */
body.in-game[data-game="faience"] .fa-factories { display: grid; grid-template-columns: repeat(2, auto); gap: 8px; justify-content: center; }
body.in-game[data-game="faience"] .fa-factory { display: grid; grid-template-columns: repeat(2, auto); gap: 3px; padding: 6px; border-radius: 50%; background: radial-gradient(120% 120% at 50% 25%, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
body.in-game[data-game="faience"] .fa-factory.empty { opacity: .28; }
body.in-game[data-game="faience"] .fa-center { display: flex; flex-wrap: wrap; gap: 4px; max-width: 190px; justify-content: center; align-items: center; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.1); }
body.in-game[data-game="faience"] .fa-cplab { width: 100%; text-align: center; font-size: 9.5px; font-weight: 800; color: var(--muted, #9aa7b4); text-transform: uppercase; letter-spacing: .05em; }
body.in-game[data-game="faience"] .fa-center-empty { font-size: 10px; color: var(--muted-2, #6b7986); }

/* --- Barre d'action (Poser au sol / Annuler) --- */
body.in-game[data-game="faience"] .fa-actbar { display: flex; gap: 8px; justify-content: center; }
body.in-game[data-game="faience"] .fa-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.075); color: var(--text, #eaf0f6); cursor: pointer; }
body.in-game[data-game="faience"] .fa-btn.floor { background: color-mix(in srgb, #d6533c 24%, rgba(255,255,255,.045)); border-color: transparent; }
body.in-game[data-game="faience"] .fa-btn.ghost { background: transparent; }

/* --- Plateaux adverses en réduit --- */
body.in-game[data-game="faience"] .fa-opp { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); }
body.in-game[data-game="faience"] .fa-opp.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); border-color: transparent; }
body.in-game[data-game="faience"] .fa-who { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: var(--text, #eaf0f6); }
body.in-game[data-game="faience"] .fa-osc { font-family: var(--num, ui-monospace, monospace); color: var(--accent-2); font-weight: 900; margin-left: auto; }
body.in-game[data-game="faience"] .fa-mini-core { display: flex; gap: 5px; align-items: center; }
body.in-game[data-game="faience"] .fa-plines.mini { gap: 2px; }
body.in-game[data-game="faience"] .fa-plines.mini .fa-pline { gap: 2px; padding: 0; }
body.in-game[data-game="faience"] .fa-plines.mini .fa-cell { --tw: 11px; border-radius: 3px; border-width: 1px; }

/* --- Avatar (partagé board/récap/résultat) --- */
.fa-av { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; background: linear-gradient(180deg, #2e6be6, #e8a33d); color: #fff; }
.fa-mono { font-family: var(--num, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* --- Récap de carrelage (modale d'élévation) --- */
.fa-recap-backdrop { position: absolute; inset: 0; background: rgba(4,8,12,.6); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 30; }
.fa-recap { min-width: 300px; max-width: 92%; padding: 18px; border-radius: 20px; background: #0b111c; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.fa-recap__title { margin: 0 0 4px; font-size: 16px; }
.fa-recap__sub { margin: 0 0 12px; font-size: 12px; color: #9aa7b4; }
.fa-recap__rows { display: flex; flex-direction: column; gap: 8px; }
.fa-recap-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); }
.fa-recap-row.me { border-color: color-mix(in srgb, #2e6be6 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #2e6be6 35%, transparent); }
.fa-recap-row .fa-rnm { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.fa-rdelta { display: flex; gap: 6px; align-items: center; font-family: var(--num, ui-monospace, monospace); font-weight: 800; font-size: 12px; }
.fa-rdelta .fa-gain { color: #22c55e; }
.fa-rdelta .fa-loss { color: #ef4444; }
.fa-rnet { font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 14px; }
.fa-recap__foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.fa-btn.primary { min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 1px solid transparent; background: linear-gradient(180deg, #2e6be6, #1f4bb0); color: #fff; cursor: pointer; }

/* --- Modale de fin de partie (décompte final) --- */
.fa-result { padding: 4px; }
.fa-result__title { margin: 0 0 4px; font-size: 18px; font-weight: 900; }
.fa-result__sub { margin: 0 0 14px; font-size: 12px; color: #9aa7b4; line-height: 1.5; }
.fa-result__rows { display: flex; flex-direction: column; gap: 8px; }
.fa-score-row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); }
.fa-score-row.lead { border-color: color-mix(in srgb, #22c55e 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #22c55e 40%, transparent); }
.fa-srk { font-weight: 900; min-width: 20px; text-align: center; }
.fa-snm { display: flex; align-items: center; gap: 8px; font-weight: 800; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.075); overflow: hidden; position: relative; min-width: 60px; }
.fa-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #2e6be6, #e8a33d); }
.fa-bon { display: flex; gap: 5px; justify-content: flex-end; font-size: 10px; font-weight: 800; font-family: var(--num, ui-monospace, monospace); color: #9aa7b4; flex-wrap: wrap; }
.fa-bon span { background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 1px 6px; }
.fa-stot { font-family: var(--num, ui-monospace, monospace); font-weight: 900; font-size: 16px; min-width: 40px; text-align: right; }

/* --- Paysage téléphone : board en 3 COLONNES (offre · MON plateau · adversaires) --- */
@media (max-height: 560px) and (orientation: landscape) {
  body.in-game[data-game="faience"] .fa-board { flex-direction: row; gap: 10px; align-items: stretch; justify-content: center; }
  body.in-game[data-game="faience"] .fa-offer { order: 0; flex: 0 0 auto; justify-content: center; }
  body.in-game[data-game="faience"] .fa-mid { order: 1; flex: 1 1 auto; justify-content: center; }
  body.in-game[data-game="faience"] .fa-opps { order: 2; flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; overflow-y: auto; justify-content: center; }
  body.in-game[data-game="faience"] .fa-tile, body.in-game[data-game="faience"] .fa-cell { --tw: 22px; }
  body.in-game[data-game="faience"] .fa-fc { --tw: 20px; }
  body.in-game[data-game="faience"] .fa-center { max-width: 128px; }
}

/* --- Desktop large : composition de la maquette (adversaires haut · fabriques centre · MON plateau bas).
   Le plateau tient sans scroll car les fabriques passent en grille 3×3 (basses) et MON plateau est une
   bande horizontale (lignes de motif accolées à la fresque). --- */
@media (min-width: 1100px) {
  body.in-game[data-game="faience"] .fa-board { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  body.in-game[data-game="faience"] .fa-opps { order: 0; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  body.in-game[data-game="faience"] .fa-offer { order: 1; }
  body.in-game[data-game="faience"] .fa-mid { order: 2; }
  body.in-game[data-game="faience"] .fa-tile, body.in-game[data-game="faience"] .fa-cell { --tw: 28px; }
  body.in-game[data-game="faience"] .fa-fc { --tw: 24px; }
  body.in-game[data-game="faience"] .fa-factories { grid-template-columns: repeat(3, auto); gap: 6px; }
  /* Adversaires compacts (mini fresque) pour laisser la hauteur à MON plateau. */
  body.in-game[data-game="faience"] .fa-opps .fa-tile.mini, body.in-game[data-game="faience"] .fa-opps .fa-cell { --tw: 11px; }
  body.in-game[data-game="faience"] .fa-myboard { padding: 8px; gap: 4px; }
}

/* --- Cover art lobby : quatre carreaux émaillés (azulejos) --- */
.art-faience { position: relative; display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; }
.art-faience .fa-t { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; }
.art-faience .fa-t.t-b { background: linear-gradient(180deg, #3b79f0, #2e6be6); }
.art-faience .fa-t.t-y { background: linear-gradient(180deg, #f0b451, #e8a33d); color: #3a2400; }
.art-faience .fa-t.t-w { background: linear-gradient(180deg, #f2f4f9, #e7eaf0); color: #2e6be6; }
.art-faience .fa-t.t-r { background: linear-gradient(180deg, #e0644c, #d6533c); }

/* --- Faïence : animation de carrelage (migration des carreaux vers la fresque + « +N » flottant) --- */
body.in-game[data-game="faience"] .fa-wcell { position: relative; display: inline-grid; place-items: center; }
body.in-game[data-game="faience"] .fa-tile.placed.fresh { animation: fa-drop-in .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fa-drop-in {
  0% { transform: translateX(-26px) scale(.55); opacity: 0; }
  60% { transform: translateX(0) scale(1.14); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
body.in-game[data-game="faience"] .fa-plus {
  position: absolute; top: -13px; left: 50%; transform: translate(-50%, 0);
  font-family: var(--num, ui-monospace, monospace); font-variant-numeric: tabular-nums;
  font-weight: 900; font-size: 12px; color: #34d17a; text-shadow: 0 1px 2px rgba(0,0,0,.65);
  pointer-events: none; opacity: 0; z-index: 3;
  animation: fa-float 1.15s ease-out .28s forwards;
}
@keyframes fa-float {
  0% { opacity: 0; transform: translate(-50%, 0); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}

/* --- Bannière de carrelage NON bloquante (haut du plateau) --- */
body.in-game[data-game="faience"] .fa-tiling-banner {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 12;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: var(--text, #eaf0f6);
  background: color-mix(in srgb, #2e6be6 26%, #0b111c); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: fa-banner-in .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fa-banner-in { 0% { opacity: 0; transform: translate(-50%, -8px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
body.in-game[data-game="faience"] .fa-tiling-banner .fa-tb-ico { font-size: 14px; }
body.in-game[data-game="faience"] .fa-tiling-banner .fa-gain { color: #34d17a; font-family: var(--num, ui-monospace, monospace); }
body.in-game[data-game="faience"] .fa-tiling-banner .fa-loss { color: #ef6b6b; font-family: var(--num, ui-monospace, monospace); }
body.in-game[data-game="faience"] .fa-tiling-banner b { font-family: var(--num, ui-monospace, monospace); }
body.in-game[data-game="faience"] .fa-tb-x { margin-left: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.12); color: var(--text, #eaf0f6); font-size: 11px; line-height: 1; display: grid; place-items: center; }

/* ============================================================
   LE DÎNER DE CON' (Papayoo) — reproduit ux-design/mockups/papayoo.html.
   Tout est scopé body.in-game[data-game="papayoo"] ; classes préfixées .pay-.
   Âme « structures en allumettes » : kraft sombre + tête d'allumette phosphore.
   ============================================================ */
body.in-game[data-game="papayoo"] { --primary: #e8552d; --accent: #e8552d; --accent-2: #c8a15a; }
body.in-game[data-game="papayoo"] {
  --on-accent: #1a0e06;
  --kr-1: #2a2016; --kr-2: #1b130b; --kr-3: #100b06;
  --match: #c8a15a; --match-line: rgba(200, 161, 90, .06); --match-brd: rgba(200, 161, 90, .42);
  --carton: #f4ebd8; --carton-2: #e7dac0; --pink: #f3e9d6;
  --suit-red: #c62828; --suit-black: #1a140c;
  --payoo: #d2461f; --payoo-soft: rgba(232, 85, 45, .14); --payoo-brd: rgba(232, 85, 45, .5);
  --pdanger-soft: rgba(198, 40, 40, .16); --pdanger-brd: rgba(198, 40, 40, .6);
}

/* --- La table : kraft + fibres d'allumettes + liseré bois + Tour Eiffel en filigrane --- */
body.in-game[data-game="papayoo"] .table {
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, var(--match-line) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--match-line) 39px 40px),
    radial-gradient(120% 130% at 50% 40%, var(--kr-1) 0%, var(--kr-2) 48%, var(--kr-3) 100%);
  border: 1px solid var(--match-brd);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .4);
}
body.in-game[data-game="papayoo"] .pay-scroll { overflow: hidden; }

/* --- Ossature : convives (haut) + centre + rail --- */
body.in-game[data-game="papayoo"] .pay-board {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 168px;
  grid-template-areas: "seats seats" "center rail"; grid-template-rows: auto minmax(0, 1fr);
  gap: 8px; height: 100%; min-height: 0;
}
body.in-game[data-game="papayoo"] .pay-board::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09;
  background: center 46% / auto 76% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 196'%3E%3Cg fill='none' stroke='%23c8a15a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M50 6 L34 150 M50 6 L66 150 M43 70 L57 70 M40 110 L60 110 M34 150 L66 150 M42 40 L58 40 M44 70 L40 110 M56 70 L60 110 M41 110 L34 150 M59 110 L66 150 M46 40 L43 70 M54 40 L57 70 M40 150 L46 190 M60 150 L54 190 M46 190 L54 190'/%3E%3C/g%3E%3Ccircle cx='50' cy='6' r='4' fill='%23e8552d'/%3E%3C/svg%3E");
}
body.in-game[data-game="papayoo"] .pay-board > * { position: relative; z-index: 1; }
body.in-game[data-game="papayoo"] .pay-seats { grid-area: seats; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
body.in-game[data-game="papayoo"] .pay-center {
  grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 0;
}
body.in-game[data-game="papayoo"] .pay-empty { color: var(--muted); font-size: 12px; font-weight: 700; }

/* --- Sièges des convives (haut) --- */
body.in-game[data-game="papayoo"] .pay-pl {
  display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(16, 11, 6, .6), rgba(16, 11, 6, .34)); border: 1px solid var(--glass-brd, rgba(255,255,255,.1));
}
body.in-game[data-game="papayoo"] .pay-av {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  font-size: 11px; color: #1a0e06; border: 2px solid rgba(255, 255, 255, .22);
  background: linear-gradient(160deg, var(--accent-2), #9c7a3c); flex: 0 0 auto;
}
body.in-game[data-game="papayoo"] .pay-nm { font-size: 12px; font-weight: 800; color: var(--pink); }
body.in-game[data-game="papayoo"] .pay-st { font-size: 10px; font-weight: 800; color: #c9b790; }
body.in-game[data-game="papayoo"] .pay-pl.done .pay-st, body.in-game[data-game="papayoo"] .pay-st.ok { color: #8fe0a8; }
body.in-game[data-game="papayoo"] .pay-dcount {
  font-size: 9px; font-weight: 800; color: #c9b790; background: var(--surface, rgba(255,255,255,.05));
  border: 1px solid var(--match-brd); border-radius: 999px; padding: 1px 6px;
}
body.in-game[data-game="papayoo"] .pay-pl.active {
  border-color: transparent; box-shadow: 0 0 0 2px var(--accent), 0 0 18px 2px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: pay-halo 1.7s cubic-bezier(.2, .7, .2, 1) infinite;
}
@keyframes pay-halo {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 12px 1px color-mix(in srgb, var(--accent) 42%, transparent); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 22px 6px color-mix(in srgb, var(--accent) 66%, transparent); }
}

/* --- Phase ÉCART (centre) --- */
body.in-game[data-game="papayoo"] .pay-pass { display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 560px; }
body.in-game[data-game="papayoo"] .pay-pass-lead { font-size: 14px; font-weight: 900; color: #f6edd9; }
body.in-game[data-game="papayoo"] .pay-pass-lead .to { color: var(--accent-2); }
body.in-game[data-game="papayoo"] .pay-pass-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: #efddb6;
  padding: 4px 12px; border-radius: 999px; background: var(--payoo-soft); border: 1px solid var(--match-brd);
}
body.in-game[data-game="papayoo"] .pay-pass-arrow .a { font-size: 18px; color: var(--accent); animation: pay-slide 1.3s ease infinite; }
@keyframes pay-slide { 0%, 100% { transform: translateX(2px); } 50% { transform: translateX(-4px); } }
body.in-game[data-game="papayoo"] .pay-pass-done { font-size: 12px; font-weight: 800; color: #8fe0a8; }
body.in-game[data-game="papayoo"] .pay-flags {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 540px;
  background: linear-gradient(180deg, rgba(16, 11, 6, .5), rgba(16, 11, 6, .3)); border: 1px solid var(--glass-brd, rgba(255,255,255,.1));
  border-radius: 12px; padding: 6px 10px;
}
body.in-game[data-game="papayoo"] .pay-flag { font-size: 11px; font-weight: 800; color: #c9b790; }
body.in-game[data-game="papayoo"] .pay-flag.ok { color: #8fe0a8; }
body.in-game[data-game="papayoo"] .pay-flag.me { color: #f6c48a; }

/* --- Phase PLI (centre) --- */
body.in-game[data-game="papayoo"] .pay-play { display: grid; justify-items: center; gap: 8px; align-content: center; }
body.in-game[data-game="papayoo"] .pay-imposed { font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #c9b790; }
body.in-game[data-game="papayoo"] .pay-imposed b { color: #f6edd9; }
body.in-game[data-game="papayoo"] .pay-trickrow { display: flex; align-items: flex-end; gap: 8px; justify-content: center; }
body.in-game[data-game="papayoo"] .pay-tc { display: grid; justify-items: center; gap: 3px; }
body.in-game[data-game="papayoo"] .pay-ord {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 900;
  background: var(--surface-2, rgba(255,255,255,.08)); border: 1px solid var(--glass-brd, rgba(255,255,255,.1)); color: #efddb6;
}
body.in-game[data-game="papayoo"] .pay-who { font-size: 9.5px; font-weight: 800; color: #c9b790; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.in-game[data-game="papayoo"] .pay-tc.win .pay-who { color: #ffb57a; }
/* Places pas encore jouées du pli : carte fantôme en pointillé (double-codage : forme + texte, pas une couleur) */
body.in-game[data-game="papayoo"] .pay-card--ghost {
  display: grid; place-items: center; background: rgba(200, 161, 90, .05); border: 1px dashed rgba(200, 161, 90, .4);
  box-shadow: none; color: #c9b790;
}
body.in-game[data-game="papayoo"] .pay-ghost-lbl { font-size: 8px; font-weight: 700; line-height: 1.15; text-align: center; padding: 0 3px; }
body.in-game[data-game="papayoo"] .pay-tc--ghost .pay-who { opacity: .8; }
/* Bandeau du coup marquant : le Papayoo (40 pts) vient d'être ramassé — persiste jusqu'au pli suivant */
body.in-game[data-game="papayoo"] .pay-event {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #e23b2a, #a81e15); color: #fff; border: 2px solid #f6b4a8;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,.55)); text-align: center;
}
body.in-game[data-game="papayoo"] .pay-event__txt { font-weight: 900; font-size: 12.5px; }
body.in-game[data-game="papayoo"] .pay-event__sub { font-size: 10px; font-weight: 700; opacity: .92; }
body.in-game[data-game="papayoo"] .pay-last {
  display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; color: #c9b790;
  padding: 4px 10px; border-radius: 999px; background: var(--surface, rgba(255,255,255,.05)); border: 1px solid var(--glass-brd, rgba(255,255,255,.1));
}
body.in-game[data-game="papayoo"] .pay-mini-row { display: inline-flex; gap: 4px; }
body.in-game[data-game="papayoo"] .pay-last b { color: #ffb57a; }
body.in-game[data-game="papayoo"] .pay-pts-tag { font-weight: 900; color: #c9b790; }
body.in-game[data-game="papayoo"] .pay-pts-tag.hot { color: #ff8a7a; }

/* --- Rail des convives (fardeau) --- */
body.in-game[data-game="papayoo"] .pay-rail {
  grid-area: rail; align-self: stretch; display: flex; flex-direction: column; gap: 5px; min-width: 150px; overflow-y: auto;
  background: linear-gradient(180deg, rgba(16, 11, 6, .5), rgba(16, 11, 6, .3)); border: 1px solid var(--glass-brd, rgba(255,255,255,.1));
  border-radius: 12px; padding: 7px 9px;
}
body.in-game[data-game="papayoo"] .pay-rail-head {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #c9b790; font-weight: 900;
  display: flex; justify-content: space-between; gap: 6px;
}
body.in-game[data-game="papayoo"] .pay-rail-head span { color: #8fbf9a; font-weight: 800; text-transform: none; letter-spacing: 0; }
body.in-game[data-game="papayoo"] .pay-rr {
  display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 8px;
  background: var(--surface, rgba(255,255,255,.05)); border: 1px solid transparent;
}
body.in-game[data-game="papayoo"] .pay-rr .pay-av { width: 22px; height: 22px; font-size: 10px; }
body.in-game[data-game="papayoo"] .pay-rr .pay-nm { flex: 1; font-size: 11.5px; }
body.in-game[data-game="papayoo"] .pay-score { font-weight: 900; font-size: 13px; color: var(--pink); font-variant-numeric: tabular-nums; }
body.in-game[data-game="papayoo"] .pay-bdg { font-size: 9px; font-weight: 900; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
body.in-game[data-game="papayoo"] .pay-rr.best { border-color: var(--match-brd); background: var(--payoo-soft); }
body.in-game[data-game="papayoo"] .pay-rr.best .pay-bdg { background: var(--accent); color: #fff; }
body.in-game[data-game="papayoo"] .pay-rr.best .pay-score { color: #ffb57a; }
body.in-game[data-game="papayoo"] .pay-rr.con { border-color: var(--pdanger-brd); }
body.in-game[data-game="papayoo"] .pay-rr.con .pay-bdg { background: var(--pdanger-soft); color: #ffb3a6; border: 1px solid var(--pdanger-brd); }
body.in-game[data-game="papayoo"] .pay-rr.con .pay-score { color: #ff8a7a; }
body.in-game[data-game="papayoo"] .pay-rr.me { outline: 1px dashed rgba(200, 161, 90, .5); }
body.in-game[data-game="papayoo"] .pay-rr.active { box-shadow: 0 0 0 2px var(--accent); }
body.in-game[data-game="papayoo"] .pay-rail--dense .pay-rr { padding: 2px 5px; }

/* --- La carte --- */
body.in-game[data-game="papayoo"] .pay-card {
  --w: 58px; width: var(--w); aspect-ratio: 5 / 7; border-radius: 12px; position: relative; flex: 0 0 auto;
  display: grid; place-items: center; user-select: none; font-variant-numeric: tabular-nums; font-weight: 800;
  background: linear-gradient(158deg, var(--carton), var(--carton-2)); color: var(--suit-black);
  border: 1px solid rgba(60, 40, 15, .22); box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.45));
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s cubic-bezier(.2, .7, .2, 1);
}
body.in-game[data-game="papayoo"] .pay-card--red { color: var(--suit-red); }
body.in-game[data-game="papayoo"] .pay-card--black { color: var(--suit-black); }
body.in-game[data-game="papayoo"] .pay-idx {
  position: absolute; top: 4px; left: 5px; font-size: calc(var(--w) * .24); line-height: .86;
  display: flex; flex-direction: column; align-items: center;
}
body.in-game[data-game="papayoo"] .pay-idx i { font-style: normal; font-size: calc(var(--w) * .2); }
body.in-game[data-game="papayoo"] .pay-idx--br { top: auto; left: auto; bottom: 4px; right: 5px; transform: rotate(180deg); }
body.in-game[data-game="papayoo"] .pay-mid { display: flex; flex-direction: column; align-items: center; line-height: .82; }
body.in-game[data-game="papayoo"] .pay-mid b { font-weight: 900; font-size: calc(var(--w) * .42); }
body.in-game[data-game="papayoo"] .pay-mid i { font-style: normal; font-size: calc(var(--w) * .34); }
/* Payoo : carton phosphore, valeur = points */
body.in-game[data-game="papayoo"] .pay-card--payoo {
  background: linear-gradient(160deg, #fff3e4, #fce0c3); border-color: var(--payoo-brd); color: var(--payoo);
}
body.in-game[data-game="papayoo"] .pay-flame { position: absolute; top: 4px; right: 6px; font-size: calc(var(--w) * .22); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
body.in-game[data-game="papayoo"] .pay-pts { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: calc(var(--w) * .15); font-weight: 900; letter-spacing: .04em; color: #9a3412; }
/* Papayoo : bandeau flamme 40 + halo danger */
body.in-game[data-game="papayoo"] .pay-card--papayoo {
  border-color: var(--pdanger-brd);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.45)), 0 0 0 2px var(--pdanger-brd), 0 0 16px 2px color-mix(in srgb, #c62828 55%, transparent);
}
body.in-game[data-game="papayoo"] .pay-band {
  position: absolute; top: 0; left: 0; right: 0; height: 14px; display: grid; place-items: center;
  font-size: 8px; font-weight: 900; letter-spacing: .06em; color: #fff;
  background: linear-gradient(180deg, #e23b2a, #b0231a); border-radius: 12px 12px 0 0;
}
body.in-game[data-game="papayoo"] .pay-star { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); z-index: 2; }
body.in-game[data-game="papayoo"] .pay-chk { position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: var(--accent); border: 2px solid #fff; z-index: 2; }
/* états */
body.in-game[data-game="papayoo"] .pay-card.legal, body.in-game[data-game="papayoo"] .pay-card.pay-pick { cursor: pointer; box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.45)), 0 0 0 2px var(--accent), 0 0 16px 2px color-mix(in srgb, var(--accent) 45%, transparent); }
body.in-game[data-game="papayoo"] .pay-card.legal { transform: translateY(-5px); }
body.in-game[data-game="papayoo"] .pay-card.illegal, body.in-game[data-game="papayoo"] .pay-card.locked { filter: grayscale(.6) brightness(.82); opacity: .5; }
body.in-game[data-game="papayoo"] .pay-card.illegal::after { content: "🔒"; position: absolute; right: 4px; bottom: 3px; font-size: 11px; }
body.in-game[data-game="papayoo"] .pay-card.sel { transform: translateY(-16px); box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,.55)), 0 0 0 2px var(--accent), 0 0 20px 3px color-mix(in srgb, var(--accent) 55%, transparent); }
body.in-game[data-game="papayoo"] .pay-card--mini { --w: 44px; }

/* --- Dock : consigne + main --- */
body.in-game[data-game="papayoo"] .pay-dock {
  background: linear-gradient(180deg, rgba(14, 10, 5, .55), rgba(14, 10, 5, .8));
  border-top: 1px solid var(--match-brd); padding: 6px 12px 9px; display: grid; gap: 5px;
}
body.in-game[data-game="papayoo"] .pay-consigne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.in-game[data-game="papayoo"] .pay-hint { font-size: 12px; font-weight: 700; color: #efddb6; }
body.in-game[data-game="papayoo"] .pay-hint b { color: #f6edd9; }
body.in-game[data-game="papayoo"] .pay-must { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #ffd7b0; padding: 5px 11px; border-radius: 8px; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .5); }
body.in-game[data-game="papayoo"] .pay-free { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #efddb6; padding: 5px 11px; border-radius: 8px; background: var(--payoo-soft); border: 1px solid var(--match-brd); }
body.in-game[data-game="papayoo"] .pay-dock-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
body.in-game[data-game="papayoo"] .pay-sel-count { font-weight: 900; font-size: 13px; color: #f6c48a; font-variant-numeric: tabular-nums; }
body.in-game[data-game="papayoo"] .pay-btn {
  min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 900; font-size: 14px; cursor: pointer;
  border: 1px solid var(--glass-brd, rgba(255,255,255,.1)); background: var(--surface-2, rgba(255,255,255,.08)); color: #f3e9d6;
}
body.in-game[data-game="papayoo"] .pay-btn.primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #000)); color: #fff; border-color: transparent; box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.45)); }
body.in-game[data-game="papayoo"] .pay-btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
body.in-game[data-game="papayoo"] .pay-hand { display: flex; justify-content: center; gap: 6px; padding: 14px 4px 4px; overflow-x: auto; overflow-y: visible; }

/* --- Décompte de manche (overlay) --- */
body.in-game[data-game="papayoo"] .pay-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 12, .55); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 30; }
body.in-game[data-game="papayoo"] .pay-recap { min-width: 300px; max-width: 560px; padding: 16px 18px; border-radius: 20px; background: var(--kr-2); border: 1px solid var(--match-brd); box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,.55)); }
body.in-game[data-game="papayoo"] .pay-recap h4 { margin: 0 0 10px; font-size: 15px; color: #f6edd9; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
body.in-game[data-game="papayoo"] .pay-recap-sum { font-size: 11px; color: #ff8a7a; font-weight: 800; }
body.in-game[data-game="papayoo"] .pay-sheet { width: 100%; border-collapse: collapse; font-size: 12.5px; }
body.in-game[data-game="papayoo"] .pay-sheet th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #c9b790; font-weight: 900; text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--match-brd); }
body.in-game[data-game="papayoo"] .pay-sheet th.who3 { text-align: left; }
body.in-game[data-game="papayoo"] .pay-sheet td { padding: 6px 8px; text-align: right; font-weight: 800; color: #ede0c8; border-bottom: 1px solid rgba(200, 161, 90, .14); font-variant-numeric: tabular-nums; }
body.in-game[data-game="papayoo"] .pay-sheet td.who3 { text-align: left; }
body.in-game[data-game="papayoo"] .pay-sheet td.sum { color: #ffb57a; font-weight: 900; }
body.in-game[data-game="papayoo"] .pay-sheet tr.me td { background: var(--payoo-soft); }
body.in-game[data-game="papayoo"] .pay-recap-actions { margin-top: 12px; display: flex; justify-content: flex-end; }

/* --- HUD (turnBlock) --- */
body.in-game[data-game="papayoo"] #turnBlock { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.in-game[data-game="papayoo"] .pay-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--surface-2, rgba(255,255,255,.08)); border: 1px solid var(--glass-brd, rgba(255,255,255,.1)); color: #f3e9d6;
}
body.in-game[data-game="papayoo"] .pay-chip b { font-weight: 900; }
body.in-game[data-game="papayoo"] .pay-chip--turn { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #000)); color: #fff; border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); }
body.in-game[data-game="papayoo"] .pay-chip--papayoo { background: var(--pdanger-soft); border-color: var(--pdanger-brd); color: #ffc9c0; font-weight: 900; }
body.in-game[data-game="papayoo"] .pay-chip--load { background: var(--payoo-soft); border-color: var(--payoo-brd); color: #ffd3b8; }
body.in-game[data-game="papayoo"] .pay-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
body.in-game[data-game="papayoo"] .pay-dot--wait { background: var(--accent-2); }
body.in-game[data-game="papayoo"] .pay-sr { color: #ff8a7a; }
body.in-game[data-game="papayoo"] .pay-sb { color: #efe6d2; }

/* --- Modale de fin : podium inversé + « le con » --- */
body.in-game[data-game="papayoo"] .pay-result, .pay-result { display: grid; justify-items: center; gap: 12px; }
.pay-result__headline { font-size: 17px; font-weight: 900; text-align: center; }
.pay-result__headline.won { color: #ffb57a; }
.pay-result__headline.lost { color: #c9b790; }
.pay-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pay-step { display: grid; justify-items: center; gap: 3px; padding: 10px 10px 8px; border-radius: 12px 12px 0 0; min-width: 84px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(16,11,6,.4)); border: 1px solid rgba(255,255,255,.1); }
.pay-step.first { background: linear-gradient(180deg, #e8552d, #9c3a1c); border-color: transparent; }
.pay-rk { font-size: 12px; font-weight: 900; }
.pay-av2 { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #1a0e06; background: linear-gradient(160deg, #c8a15a, #9c7a3c); }
.pay-step.first .pay-av2 { background: linear-gradient(160deg, #ffc7a8, #e8552d); color: #fff; }
.pay-nm2 { font-size: 12px; font-weight: 800; }
.pay-sc2 { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pay-con-line { font-size: 12.5px; font-weight: 700; color: #ff8a7a; }

/* --- Cover art lobby : tête d'allumette enflammée (Payoo) au-dessus des 4 couleurs classiques --- */
.art-papayoo { position: relative; display: grid; place-items: center; gap: 4px; }
.art-papayoo .flame { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 12px rgba(232, 85, 45, .65)); }
.art-papayoo .suits { display: flex; gap: 7px; }
.art-papayoo .suits i { font-style: normal; font-size: 17px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.art-papayoo .suits .b { color: #efe6d2; }
.art-papayoo .suits .r { color: #e5646a; }

/* --- Compaction paysage court (téléphone couché) : cf. mémoire responsive-phone-paysage --- */
@media (max-height: 460px) {
  body.in-game[data-game="papayoo"] .pay-board { grid-template-columns: minmax(0, 1fr) 150px; }
  body.in-game[data-game="papayoo"] .pay-card { --w: 50px; }
  body.in-game[data-game="papayoo"] .pay-card--mini { --w: 40px; }
  body.in-game[data-game="papayoo"] .pay-hand { padding-top: 12px; }
  body.in-game[data-game="papayoo"] .pay-trickrow.pay-trickrow--dense .pay-card--mini { --w: 34px; }
}

/* ============================================================
   Annonce plein écran « À TON TOUR » (tous les jeux)
   Projetée par main.js (maybeFlashTurn) au moment PRÉCIS où le tour bascule vers le joueur.
   Non interactive, brève (~1,5 s), teintée par l'accent du jeu (var(--accent)).
   ============================================================ */
.turn-flash {
  position: fixed;
  inset: 0;
  z-index: 60; /* au-dessus du plateau, sous les modales (toasts/résultats) */
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.turn-flash.show {
  visibility: visible;
  animation: turn-flash-veil 1.55s ease-out forwards;
}
/* Voile radial teinté accent : attire l'œil au centre sans masquer le plateau. */
.turn-flash.show::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 50%, color-mix(in srgb, var(--accent, #10b981) 30%, transparent), transparent 70%);
}
.turn-flash__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 34px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent, #10b981) 22%, rgba(6, 12, 18, .82));
  border: 1.5px solid color-mix(in srgb, var(--accent, #10b981) 70%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent, #10b981) 24%, transparent),
    0 14px 44px rgba(0, 0, 0, .5),
    0 0 40px color-mix(in srgb, var(--accent, #10b981) 45%, transparent);
  transform: scale(.7);
  opacity: 0;
}
.turn-flash.show .turn-flash__card {
  animation: turn-flash-pop 1.55s cubic-bezier(.16, 1, .3, 1) forwards;
}
.turn-flash__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-2, #eaf0f6) 70%, #fff);
}
.turn-flash__title {
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
@keyframes turn-flash-veil {
  0% { opacity: 0; }
  14% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes turn-flash-pop {
  0% { transform: scale(.7); opacity: 0; }
  16% { transform: scale(1.06); opacity: 1; }
  28% { transform: scale(1); opacity: 1; }
  74% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.96); opacity: 0; }
}

/* Pli figé (jeux de plis) : léger halo doré pendant les ~2,5 s où l'on RETIENT le dernier pli
   complet à l'écran (le temps de bien voir la dernière carte posée) avant le pli suivant. */
.t-mat.trick-held,
.trick.trick-held {
  animation: trick-held-glow 2.5s ease-out;
}
@keyframes trick-held-glow {
  0% { filter: drop-shadow(0 0 0 transparent); }
  12% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-2, #e8c468) 60%, transparent)); }
  85% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-2, #e8c468) 45%, transparent)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .turn-flash.show,
  .turn-flash.show .turn-flash__card { animation: none; }
  .turn-flash.show { opacity: 0; visibility: hidden; } /* pas de flash animé : on n'affiche rien */
  .t-mat.trick-held,
  .trick.trick-held { animation: none; }
}