/* Jass — feuille unique. Jetons, accueil, salon, table (tâche 11), pop-ups (tâche 12).
   Direction : le tapis de jass du café de village. Feutre vert bouteille, bois chaud, crème des cartes, or discret,
   et l'ardoise où l'on marque à la craie. Pas de gris bureautique. */

:root {
  --vert-tapis: #0F3D2E;
  --vert-tapis-sombre: #0A2A20;
  --vert-tapis-clair: #175341;
  --bois: #5B3A1E;
  --bois-clair: #8A5A2B;
  --bois-sombre: #3A2412;
  --creme: #F4EBD8;
  --creme-sombre: #E4D7BC;
  --or: #D8A21C;
  --or-clair: #F1C65A;
  --rouge: #B3261E;
  --encre: #1C1A17;
  --encre-douce: #4A443B;
  --ardoise: #262B2A;
  --ardoise-bord: #3B4240;
  --craie: #ECEAE2;

  --duree-pose: 250ms;
  --duree-distribution: 120ms;
  --duree-pli: 900ms;
  --duree-ramasse: 350ms;
  --duree-popup: 150ms;

  --police-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --police-texte: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --police-chiffres: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --carte-l: 72px;
  --ombre-carte: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--police-texte);
  color: var(--creme);
  background: var(--vert-tapis);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input { font: inherit; }
.ecran { position: fixed; inset: 0; overflow: auto; }
.ecran[hidden] { display: none; }
[hidden] { display: none !important; }

/* Le feutre : dégradé radial, trame très fine, vignettage, bord de bois. */
.feutre, #ecran-accueil, #ecran-salon, #tapis {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, var(--vert-tapis-clair) 0%, var(--vert-tapis) 55%, var(--vert-tapis-sombre) 100%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .55);
}

/* ── Typographie commune ─────────────────────────────────────────────── */
.marque {
  font-family: var(--police-titre);
  font-variation-settings: 'opsz' 144, 'SOFT' 60;
  font-weight: 700;
  font-size: clamp(64px, 12vw, 112px);
  line-height: .9;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--creme);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.sous-titre { margin: 10px 0 0; font-size: 17px; color: var(--creme-sombre); }
.titre-ecran { font-family: var(--police-titre); font-weight: 600; font-size: 28px; margin: 0 0 14px; letter-spacing: -.01em; }

/* ── Boutons et champs ────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 0; cursor: pointer;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-weight: 600; font-size: 16px; letter-spacing: .01em;
  background: var(--creme-sombre); color: var(--encre);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 2px 0 rgba(0, 0, 0, .25);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}
.btn:hover { background: var(--creme); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 0 rgba(0, 0, 0, .25); }
.btn:focus-visible, input:focus-visible, .salon-siege:focus-visible, .lien:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; }
.btn-primaire { background: var(--or); color: var(--encre); }
.btn-primaire:hover { background: var(--or-clair); }
.btn-discret { background: transparent; color: var(--creme); box-shadow: 0 0 0 1.5px rgba(244, 235, 216, .45) inset; }
.btn-discret:hover { background: rgba(244, 235, 216, .1); }
.btn[disabled] { opacity: .5; cursor: default; }
.lien { background: none; border: 0; padding: 0; color: var(--creme-sombre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien:hover { color: var(--creme); }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ-libelle { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-douce); }
input[type="text"] {
  min-height: 48px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid #CBBB9A; background: #FFFCF4; color: var(--encre);
  font-size: 17px;
}
input[type="text"]::placeholder { color: #A89A7E; }
.message { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(179, 38, 30, .14); color: #7A1612; font-weight: 500; }
#ecran-salon .message { background: rgba(179, 38, 30, .35); color: var(--creme); }

/* ── Accueil ──────────────────────────────────────────────────────────── */
#ecran-accueil { display: grid; place-items: center; padding: 24px 16px; }
.accueil-cadre { width: min(100%, 460px); display: flex; flex-direction: column; gap: 26px; }
.accueil-tete { text-align: center; }

/* La carte d'entrée : une grande carte à jouer posée sur le feutre, index « J » dans les coins. */
.carte-entree {
  position: relative;
  background: linear-gradient(180deg, #FBF6EA 0%, var(--creme) 100%);
  color: var(--encre);
  border-radius: 18px;
  padding: 30px 28px 26px;
  box-shadow: var(--ombre-carte), 0 0 0 1px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: 22px;
}
.carte-entree .coin {
  position: absolute; font-family: var(--police-titre); font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--rouge); opacity: .85; user-select: none;
}
.carte-entree .coin-haut { top: 10px; left: 12px; }
.carte-entree .coin-bas { bottom: 10px; right: 12px; transform: rotate(180deg); }
.actions-entree { display: grid; gap: 6px; }
.actions-entree .btn { width: 100%; }
.actions-entree .btn + .actions-note { margin-bottom: 8px; }
.actions-note { font-size: 13px; color: var(--encre-douce); padding: 0 4px; }
.rejoindre { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding-top: 18px; border-top: 1px dashed #CBBB9A; }
.champ-code input { font-family: var(--police-chiffres); font-size: 26px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.accueil-pied { text-align: center; font-size: 14px; color: var(--creme-sombre); }
.accueil-pied p { margin: 6px 0; }

/* Le tableau des parties, sur l'ardoise. */
.tableau { width: 100%; justify-items: stretch; text-align: left; padding: 16px 18px 14px; gap: 10px; }
.tableau h2, .tableau h3 { margin: 0; font-weight: 600; }
.tableau h3 { margin-top: 8px; }
.tableau ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tableau .partie { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(236, 234, 226, .18); font-size: 13px; }
.tableau .partie:last-child { border-bottom: 0; }
.partie-date { font-family: var(--police-chiffres); font-size: 12px; letter-spacing: .04em; opacity: .7; white-space: nowrap; }
.partie-contre { font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .1em; }
.partie-donnes { font-size: 11px; opacity: .6; white-space: nowrap; }
.equipe { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.equipe-noms { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipe-score { font-family: var(--police-chiffres); font-size: 18px; }
.equipe.gagnante .equipe-score { color: var(--or-clair); }
.equipe.gagnante .equipe-noms { font-weight: 600; }
.tableau-joueurs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tableau-joueurs li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 2px 0; }
.joueur-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-bilan { font-family: var(--police-chiffres); font-size: 15px; opacity: .85; }
@media (max-width: 520px) {
  .tableau .partie { grid-template-columns: 1fr 1fr; }
  .partie-date { grid-column: 1 / -1; }
  .partie-contre { display: none; }
  .partie-donnes { grid-column: 1 / -1; }
}

/* ── Salon ────────────────────────────────────────────────────────────── */
#ecran-salon { display: grid; place-items: center; padding: 24px 16px; }
.salon-cadre { width: min(100%, 520px); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.salon-tete { width: 100%; }

/* L'ardoise : le tableau où l'on marque à la craie. */
.ardoise {
  background: linear-gradient(180deg, #2B3130, var(--ardoise));
  border: 6px solid var(--bois);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--bois-sombre), 0 6px 16px rgba(0, 0, 0, .4), inset 0 0 40px rgba(0, 0, 0, .35);
  color: var(--craie);
  padding: 14px 18px 16px;
  display: grid; gap: 6px; justify-items: center;
}
.ardoise-libelle { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.ardoise-code-valeur { font-family: var(--police-chiffres); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: .28em; padding-left: .28em; text-shadow: 0 0 6px rgba(236, 234, 226, .35); }
.btn-ardoise { min-height: 40px; padding: 0 16px; font-size: 14px; background: rgba(236, 234, 226, .14); color: var(--craie); box-shadow: 0 0 0 1px rgba(236, 234, 226, .35) inset; }
.btn-ardoise:hover { background: rgba(236, 234, 226, .24); }
.ardoise-note { font-size: 13px; min-height: 18px; opacity: .85; }

.salon-table { position: relative; width: min(100%, 360px); aspect-ratio: 1; }
.salon-tapis {
  position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--vert-tapis-clair), var(--vert-tapis-sombre));
  box-shadow: 0 0 0 10px var(--bois), 0 0 0 11px var(--bois-sombre), 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 30px rgba(0, 0, 0, .4);
}
.salon-siege {
  position: absolute; width: 104px; min-height: 64px; padding: 8px 6px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--creme); color: var(--encre);
  box-shadow: var(--ombre-carte);
  display: grid; gap: 2px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.salon-siege:hover { transform: translateY(-2px); }
.salon-siege.ia { background: var(--creme-sombre); color: var(--encre-douce); }
.salon-siege.choisi { box-shadow: 0 0 0 3px var(--or), var(--ombre-carte); }
.salon-siege.moi .siege-role::after { content: ' · vous'; }
.salon-siege[data-siege="2"] { top: 0; left: 50%; transform: translateX(-50%); }
.salon-siege[data-siege="2"]:hover { transform: translate(-50%, -2px); }
.salon-siege[data-siege="0"] { bottom: 0; left: 50%; transform: translateX(-50%); }
.salon-siege[data-siege="0"]:hover { transform: translate(-50%, -2px); }
.salon-siege[data-siege="1"] { left: 0; top: 50%; transform: translateY(-50%); }
.salon-siege[data-siege="1"]:hover { transform: translateY(calc(-50% - 2px)); }
.salon-siege[data-siege="3"] { right: 0; top: 50%; transform: translateY(-50%); }
.salon-siege[data-siege="3"]:hover { transform: translateY(calc(-50% - 2px)); }
.siege-nom { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siege-role { font-size: 12px; color: var(--encre-douce); }
.salon-conseil { margin: 0; font-size: 14px; color: var(--creme-sombre); max-width: 380px; }
.salon-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 420px) {
  .carte-entree { padding: 26px 18px 22px; }
  .rejoindre { grid-template-columns: 1fr; }
  .salon-siege { width: 92px; }
}

/* ── Table de jeu ─────────────────────────────────────────────────────── */
#ecran-table { overflow: hidden; }
#tapis {
  position: absolute; inset: 0;
  border: 10px solid var(--bois);
  box-shadow:
    inset 0 0 0 2px var(--bois-sombre),
    inset 0 0 140px rgba(0, 0, 0, .6);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}
#tapis::before {   /* liseré du bord de bois */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.zone-cartes { position: absolute; inset: 0; pointer-events: none; }

/* Les cartes : éléments en absolu, déplacés par transform. */
.carte {
  position: absolute; left: 0; top: 0;
  width: var(--carte-l); aspect-ratio: 169.075 / 244.64;
  pointer-events: auto; cursor: default;
  transform-origin: 50% 50%;
  border-radius: 7% / 4.9%;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .35), 0 6px 10px rgba(0, 0, 0, .25);
  transition: transform var(--duree-pose) cubic-bezier(.2, .7, .2, 1), box-shadow 150ms ease;
  touch-action: none;
  will-change: transform;
}
.carte.sans-transition { transition: none !important; }
.carte svg { display: block; width: 100%; height: 100%; }
.carte-svg use { pointer-events: none; }
.carte-svg .face { fill: #FBF6EA; stroke: #CFC2A6; stroke-width: 1.5; }
.carte-svg.dos .dos-fond { fill: #7A2D22; }
.carte-svg.dos .dos-motif { fill: #93382A; }
.carte-svg.dos .dos-cadre { fill: none; stroke: #F4EBD8; stroke-width: 2.5; }
.carte.en-main { cursor: grab; }
.carte.saisie { cursor: grabbing; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.carte.en-main.jouable { box-shadow: 0 0 0 2px rgba(241, 198, 90, .95), 0 0 14px rgba(241, 198, 90, .8), 0 6px 10px rgba(0, 0, 0, .3); }
.mon-tour .carte.en-main.jouable:hover { translate: 0 -10px; }
.carte.gagnante { box-shadow: 0 0 0 2px var(--or-clair), 0 0 16px rgba(241, 198, 90, 1), 0 6px 10px rgba(0, 0, 0, .3); }
.carte.ramassee { transition: transform var(--duree-ramasse) cubic-bezier(.4, 0, .8, .6); }
.verrou .carte.en-main { pointer-events: none; }

/* Sièges : médaillon, nom, pile de plis, bulle. */
.siege { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; pointer-events: none; }
.siege.pos-bas { left: 50%; bottom: calc(var(--carte-l) * 1.6 + 18px); transform: translateX(-50%); flex-direction: row; width: auto; gap: 10px; left: 14px; transform: none; bottom: 14px; align-items: flex-end; }
.siege.pos-haut { left: 50%; top: calc(var(--carte-l) * 1.25 + 8px); transform: translateX(-50%); }
.siege.pos-gauche { left: calc(var(--carte-l) * 1.5 + 30px); top: 50%; transform: translateY(-50%); align-items: flex-start; }
.siege.pos-droite { right: calc(var(--carte-l) * 1.5 + 30px); top: 50%; transform: translateY(-50%); align-items: flex-end; }
.medaillon {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FBF6EA, var(--creme-sombre));
  color: var(--encre); display: grid; place-items: center;
  font-family: var(--police-titre); font-weight: 700; font-size: 20px;
  box-shadow: 0 0 0 3px var(--bois), 0 0 0 4px var(--bois-sombre), 0 4px 10px rgba(0, 0, 0, .45);
  transition: box-shadow 200ms ease;
}
.siege.actif .medaillon { box-shadow: 0 0 0 3px var(--or), 0 0 0 5px rgba(216, 162, 28, .35), 0 0 18px rgba(241, 198, 90, .7); animation: pulser 1.4s ease-in-out infinite; }
@keyframes pulser { 50% { box-shadow: 0 0 0 3px var(--or-clair), 0 0 0 7px rgba(216, 162, 28, .2), 0 0 24px rgba(241, 198, 90, .9); } }
.siege.ia .medaillon { background: radial-gradient(circle at 35% 30%, #E6DCC6, #C9BB9C); }
.siege.absent .medaillon { opacity: .55; }
.jeton-d {
  position: absolute; right: -8px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--or); color: var(--encre); font: 700 11px/20px var(--police-chiffres); text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5); display: none;
}
.siege.donneur .jeton-d { display: block; }
.siege-nom { font-size: 13px; font-weight: 600; color: var(--creme); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siege.equipe-nous .siege-nom::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--or); margin-right: 5px; vertical-align: 1px; }
.plis-pile {
  width: 26px; height: 34px; border-radius: 3px; background: #7A2D22; border: 1.5px solid var(--creme);
  box-shadow: 2px 2px 0 #5c2119, 4px 4px 0 #4a1a13, 0 4px 8px rgba(0, 0, 0, .4);
  display: grid; place-items: center; color: var(--creme); font: 700 13px var(--police-chiffres);
  transition: opacity 200ms ease;
}
.plis-pile.vide { opacity: 0; }
.bulle {
  position: absolute; max-width: 200px; padding: 7px 11px; border-radius: 12px;
  background: var(--creme); color: var(--encre); font-size: 13px; line-height: 1.25; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(6px); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none;
  white-space: normal; text-align: center; z-index: 80;
}
.bulle.visible { opacity: 1; transform: translateY(0); }
.pos-haut .bulle { top: 100%; margin-top: 6px; left: 50%; translate: -50% 0; }
.pos-bas .bulle { bottom: 100%; margin-bottom: 8px; left: 0; }
.pos-gauche .bulle { left: 100%; margin-left: 8px; top: 0; }
.pos-droite .bulle { right: 100%; margin-right: 8px; top: 0; }

/* L'ardoise des scores, en haut au centre. */
.bandeau {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  padding: 8px 14px 10px; min-width: 300px; gap: 4px; z-index: 70;
  grid-template-columns: auto 1fr; align-items: center; justify-items: stretch;
  pointer-events: none;
}
.atout-badge { display: flex; align-items: center; gap: 6px; padding-right: 14px; border-right: 1px solid rgba(236, 234, 226, .25); font-weight: 600; font-size: 14px; }
.atout-symbole svg { width: 22px; height: 22px; display: block; }
.atout-symbole svg.rouge path { fill: #F08A7E; }
.atout-symbole svg.noire path { fill: var(--craie); }
.atout-facteur { font-family: var(--police-chiffres); font-size: 18px; color: var(--or-clair); }
.scores { display: flex; gap: 18px; justify-content: space-around; padding-left: 14px; }
.score { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.score-nom { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; grid-column: 1 / -1; }
.score-valeur { font-family: var(--police-chiffres); font-weight: 700; font-size: 30px; line-height: 1; text-shadow: 0 0 6px rgba(236, 234, 226, .3); }
.score-donne { font-family: var(--police-chiffres); font-size: 15px; color: var(--or-clair); min-width: 2ch; }
.jauge { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 2px; background: rgba(236, 234, 226, .15); overflow: visible; margin-top: 4px; }
.jauge i { position: absolute; top: 0; height: 100%; border-radius: 2px; transition: width 400ms ease; }
.jauge-nous { left: 0; background: var(--or); }
.jauge-eux { right: 0; background: #C9BBA0; opacity: .7; }
.jauge-cible { position: absolute; right: 0; top: 6px; font: 600 9px var(--police-chiffres); opacity: .55; letter-spacing: .1em; }

.tour-indicateur {
  position: absolute; top: 112px; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: var(--creme-sombre); opacity: .9; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.tour-indicateur.moi { color: var(--or-clair); font-weight: 600; }

/* Boutons de coin. */
.coins { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 75; }
.coin-btn {
  appearance: none; border: 0; cursor: pointer; min-width: 44px; min-height: 36px; padding: 0 10px; border-radius: 10px;
  background: rgba(10, 42, 32, .7); color: var(--creme); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(244, 235, 216, .3);
}
.coin-btn:hover { background: rgba(244, 235, 216, .16); }
.coin-btn.muet { opacity: .6; text-decoration: line-through; }

/* Étiquettes de points et signal. */
.etiquette {
  position: absolute; transform: translate(-50%, -50%); z-index: 90; pointer-events: none;
  padding: 4px 10px; border-radius: 10px; background: var(--or); color: var(--encre);
  font: 700 15px var(--police-chiffres); box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
  transition: left 800ms cubic-bezier(.3, 0, .3, 1), top 800ms cubic-bezier(.3, 0, .3, 1), opacity 300ms ease 500ms, transform 800ms ease;
}
.etiquette.vol { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.signal {
  position: absolute; left: 50%; bottom: calc(var(--carte-l) * 1.75 + 30px); transform: translateX(-50%) translateY(8px);
  padding: 8px 14px; border-radius: 10px; background: rgba(28, 26, 23, .85); color: var(--creme); font-size: 13px;
  opacity: 0; transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; z-index: 95;
}
.signal.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Téléphone : portrait d'abord. */
@media (max-width: 640px) {
  :root { --carte-l: 58px; }
  #tapis { border-width: 6px; }
  .bandeau { min-width: 0; width: calc(100% - 24px); padding: 6px 10px 8px; top: 6px; }
  .score-valeur { font-size: 24px; }
  .atout-badge { font-size: 12px; padding-right: 8px; }
  .atout-symbole svg { width: 18px; height: 18px; }
  .tour-indicateur { top: 96px; font-size: 12px; }
  .siege { width: 90px; }
  .siege.pos-gauche { left: 8px; top: 38%; }
  .siege.pos-droite { right: 8px; top: 38%; }
  .siege.pos-haut { top: calc(var(--carte-l) * 1.15 + 4px); }
  .medaillon { width: 36px; height: 36px; font-size: 16px; }
  .siege-nom { font-size: 11px; max-width: 90px; }
  .coins { right: 8px; bottom: calc(var(--carte-l) * 1.9 + 8px); flex-direction: column; }
  .coin-btn { min-height: 32px; font-size: 11px; }
  .siege.pos-bas { bottom: calc(var(--carte-l) * 1.9 + 8px); left: 8px; }
  .bulle { max-width: 150px; font-size: 12px; }
}
@media (max-width: 640px) and (orientation: landscape) {
  :root { --carte-l: 52px; }
  .siege.pos-bas { bottom: 8px; }
  .coins { bottom: 8px; flex-direction: row; }
}
@media (min-width: 1200px) { :root { --carte-l: 84px; } }

/* ── Pop-ups ──────────────────────────────────────────────────────────── */
.popup-fond {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 42, 32, .62); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--duree-popup) ease;
}
.popup-fond.visible { opacity: 1; }
.popup {
  width: min(100%, 440px); max-height: calc(100vh - 32px); overflow: auto;
  background: linear-gradient(180deg, #FBF6EA, var(--creme)); color: var(--encre);
  border-radius: 18px; padding: 22px 22px 18px;
  box-shadow: var(--ombre-carte), 0 0 0 1px rgba(0, 0, 0, .2);
  transform: scale(.96); transition: transform var(--duree-popup) ease;
}
.popup-fond.visible .popup { transform: scale(1); }
.popup-titre { font-family: var(--police-titre); font-weight: 600; font-size: 24px; margin: 0 0 14px; letter-spacing: -.01em; }
.popup-corps { font-size: 15px; line-height: 1.4; }
.popup-texte { margin: 0; }
.popup-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.btn-discret-clair { background: transparent; color: var(--encre); box-shadow: 0 0 0 1.5px rgba(28, 26, 23, .3) inset; }
.btn-discret-clair:hover { background: rgba(28, 26, 23, .06); }

.tuiles-atout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tuile-atout {
  appearance: none; border: 0; cursor: pointer; border-radius: 14px; padding: 12px 6px 10px;
  background: #FFFCF4; box-shadow: 0 0 0 1.5px #D9CDB2 inset, 0 2px 0 rgba(0, 0, 0, .12);
  display: grid; justify-items: center; gap: 4px; color: var(--encre); min-height: 96px;
  transition: transform 80ms ease, box-shadow 120ms ease;
}
.tuile-atout:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--or) inset, 0 4px 10px rgba(0, 0, 0, .18); }
.tuile-atout:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; }
.tuile-atout svg { width: 38px; height: 38px; }
.tuile-atout svg.rouge path { fill: var(--rouge); }
.tuile-atout svg.noire path { fill: var(--encre); }
.tuile-atout .fleche { font-size: 30px; line-height: 38px; height: 38px; color: var(--bois-clair); }
.tuile-nom { font-weight: 600; font-size: 14px; }
.tuile-facteur { font-family: var(--police-chiffres); font-weight: 700; font-size: 18px; color: var(--bois-clair); }
.popup-atout .popup-actions { justify-content: center; }
.btn-chibrer { min-width: 160px; }

.liste-annonces, .annonces-montrees { display: grid; gap: 10px; }
.annonce-ligne { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(28, 26, 23, .05); cursor: pointer; }
.annonces-montrees .annonce-ligne { grid-template-columns: 1fr; cursor: default; }
.annonce-ligne input { width: 20px; height: 20px; accent-color: var(--vert-tapis); }
.annonce-libelle b { font-family: var(--police-chiffres); font-size: 18px; margin-left: 4px; }
.mini-cartes { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.mini-carte { width: 34px; display: inline-block; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.mini-carte svg { display: block; width: 100%; height: auto; }
.annonce-total { margin: 4px 0 0; text-align: right; font-family: var(--police-chiffres); font-weight: 700; font-size: 20px; color: var(--vert-tapis); }

.table-compte { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-compte th, .table-compte td { padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(28, 26, 23, .1); }
.table-compte th:first-child, .table-compte td:first-child { text-align: left; }
.table-compte th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.table-compte td { font-family: var(--police-chiffres); font-size: 18px; }
.table-compte td:first-child { font-family: var(--police-texte); font-size: 14px; }
.ligne-facteur td { color: var(--bois-clair); }
.ligne-total td { font-weight: 700; font-size: 22px; border-bottom: 0; }
.table-donnes { margin-top: 14px; }
.table-donnes td { font-size: 15px; }

.fin-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-score { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(28, 26, 23, .05); }
.fin-score span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); }
.fin-score b { font-family: var(--police-chiffres); font-size: 36px; line-height: 1; }
.fin-score.gagnant { background: rgba(216, 162, 28, .22); box-shadow: 0 0 0 2px var(--or) inset; }
.fin-gagne .popup-titre { color: var(--vert-tapis); }
.fin-perdu .popup-titre { color: var(--rouge); }
.fin-note { margin: 12px 0 0; font-size: 13px; color: var(--encre-douce); }

.liste-reactions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.liste-reactions .btn { width: 100%; }

.popup-aide h3 { font-family: var(--police-titre); font-weight: 600; font-size: 17px; margin: 14px 0 4px; }
.popup-aide h3:first-child { margin-top: 0; }
.popup-aide p { margin: 0; }
.popup-aide .credit { margin-top: 14px; font-size: 12px; color: var(--encre-douce); }
.popup-aide .credit a { color: inherit; }

@media (max-width: 420px) {
  .popup { padding: 18px 16px 14px; }
  .tuiles-atout { gap: 8px; }
  .tuile-atout { min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree-pose: 1ms; --duree-distribution: 1ms; --duree-ramasse: 1ms; --duree-popup: 1ms; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}