/* La Taverne · une partie à l'écran (lot E, contrat SPEC §4.7 : jeu.js).
   ──────────────────────────────────────────────────────────────────────────
   La scène est TOUJOURS sombre (une table à la chandelle), quel que soit le
   thème des menus : cette feuille ne lit donc aucun `data-theme`. Ce qu'elle
   dessine :

   · deux plaques de score en parchemin (l'adversaire en haut, moi en bas),
     avec la jauge de l'objectif et la manche en cours ;
   · la table (TaverneTable la dessine dans .jeu-table), et ce qui se pose
     dessus sans rien pousser : la réplique de l'adversaire, l'annonce, le
     conseil ;
   · la puce de combinaison et les actions, à hauteur FIXE (la table ne doit
     jamais changer de taille au milieu d'un tour : elle se remesurerait) ;
   · les couches : passage du téléphone, attente d'un duel, pause,
     confirmation, fin (le parchemin de victoire ou de défaite).

   Disposition : une colonne au téléphone en portrait (tout tient sans
   défilement, de 320 × 568 à 430 × 932) ; deux colonnes (plaques et actions
   à gauche, table à droite) sur un téléphone couché et à partir de 900 px.

   Doctrine : transform et opacity seulement en mouvement (et jamais en
   boucle), « moins de mouvement » est la règle `:root[data-anim="off"] *` de
   style.css (aucune media query de mouvement ici), champs et boutons à 44 px
   au doigt, zones sûres sur tout ce qui touche un bord, et le bloc
   `(hover: none)` EN FIN de feuille (une media query n'ajoute aucune
   priorité : seul l'ordre tranche). */

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 1 · LES JETONS DE LA SCÈNE (repliés sur ceux de style.css)
   └────────────────────────────────────────────────────────────────────────── */

.jeu {
  --tv-j-fond: var(--tv-scene-bg, #120d09);
  --tv-j-ink: var(--tv-scene-ink, #f3e6cf);
  --tv-j-ink-2: var(--tv-scene-ink-2, #cdb995);
  --tv-j-ink-3: #a8946f;
  --tv-j-ligne: rgba(243, 230, 207, .14);
  --tv-j-ligne-2: rgba(243, 230, 207, .3);
  --tv-j-carte: #1d1510;
  --tv-j-cuivre: var(--tv-scene-accent, #e8a35b);
  --tv-j-or: var(--tv-selection, #e8b75c);
  --tv-j-sur-cuivre: #1a120a;
  --tv-j-rouge: #f2a48f;
  --tv-j-rouge-plein: #b3341f;
  --tv-j-vert: #a9d39a;
  --tv-j-parchemin: var(--tv-parchemin, #eadcc0);
  --tv-j-parchemin-ink: var(--tv-parchemin-ink, #2b2016);
  --tv-j-parchemin-ink-2: var(--tv-parchemin-ink-2, #5a4835);
  --tv-j-parchemin-accent: #8c4615;
  --tv-j-titre: var(--tv-titre, 'IM Fell English', Georgia, serif);
  --tv-j-titre-sc: var(--tv-titre-sc, 'IM Fell English SC', 'IM Fell English', Georgia, serif);
  --tv-j-ui: var(--tv-ui, 'Inter Tight', system-ui, -apple-system, sans-serif);
  --tv-j-haut: var(--tv-zone-haut, 0px);
  --tv-j-bas: var(--tv-zone-bas, 0px);
  --tv-j-gauche: var(--tv-zone-gauche, 0px);
  --tv-j-droite: var(--tv-zone-droite, 0px);
  --tv-j-sortie: cubic-bezier(.2, .7, .2, 1);

  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(255, 176, 82, .07), rgba(255, 176, 82, 0) 60%),
    var(--tv-j-fond);
  color: var(--tv-j-ink);
  font-family: var(--tv-j-ui);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.jeu button { font-family: inherit; }

/* Les parades [hidden] : toute règle qui pose un `display` bat l'attribut. */
.jeu [hidden],
.jeu-couche[hidden],
.jeu-bulle[hidden],
.jeu-annonce[hidden],
.jeu-conseil[hidden],
.jeu-actions[hidden],
.jeu-attente-tour[hidden],
.jeu-btn[hidden],
.jeu-fin-trophees[hidden] { display: none !important; }

/* La voix de la table, pour le lecteur d'écran seulement. */
.jeu-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 2 · LE PLATEAU : une colonne au téléphone
   └────────────────────────────────────────────────────────────────────────── */

.jeu-plateau {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(150px, 1fr) auto auto;
  grid-template-areas:
    "barre"
    "lui"
    "table"
    "moi"
    "cmd";
  padding-left: var(--tv-j-gauche);
  padding-right: var(--tv-j-droite);
}

/* ── La barre : pause, titre, son ─────────────────────────────────────── */
.jeu-barre {
  grid-area: barre;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: var(--tv-j-haut) 6px 0;
}
.jeu-titre { min-width: 0; text-align: center; }
.jeu-titre-nom,
.jeu-titre-sous {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jeu-titre-nom {
  font: 650 16px/1.15 var(--tv-j-ui);
  letter-spacing: -.01em;
  color: var(--tv-j-ink);
}
.jeu-titre-sous {
  margin-top: 1px;
  font: 500 11.5px/1.2 var(--tv-j-ui);
  letter-spacing: .02em;
  color: var(--tv-j-ink-2);
}

.jeu-ico {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tv-j-ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--tv-dur-xs, 140ms) var(--tv-j-sortie), opacity var(--tv-dur-xs, 140ms) linear;
}
.jeu-ico .ico { width: 22px; height: 22px; }
.jeu-ico:active { transform: scale(.92); }
.jeu-ico:focus-visible {
  outline: 2px solid var(--tv-j-cuivre);
  outline-offset: -2px;
}
.jeu-ico-petit { width: 36px; height: 36px; }
.jeu-ico-petit .ico { width: 18px; height: 18px; }

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 3 · LES PLAQUES DE SCORE (une carte sombre, encre claire)
   └────────────────────────────────────────────────────────────────────────── */

.plaque {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "blason tete"
    "blason chiffres"
    "jauge jauge";
  column-gap: 10px;
  row-gap: 2px;
  margin: 4px 10px;
  padding: 10px 14px 11px 12px;
  border-radius: 18px;
  /* Les encres de la plaque : claires sur la carte sombre (les jetons
     « parchemin » ne désignent plus ici que le rôle : encre, encre 2, accent). */
  --tv-j-parchemin-ink: var(--tv-j-ink);
  --tv-j-parchemin-ink-2: var(--tv-j-ink-2);
  --tv-j-parchemin-accent: var(--tv-j-cuivre);
  background: var(--tv-j-carte);
  color: var(--tv-j-parchemin-ink);
  box-shadow: inset 0 0 0 1px var(--tv-j-ligne);
}
.plaque-lui { grid-area: lui; }
.plaque-moi { grid-area: moi; }

/* L'anneau du tour : posé, jamais animé en boucle. */
.plaque::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  box-shadow: 0 0 0 2px var(--tv-j-cuivre), 0 0 18px -2px rgba(232, 163, 91, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tv-dur-s, 240ms) var(--tv-j-sortie);
}
.plaque.is-tour::after { opacity: 1; }
.plaque.is-gagne::after {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--tv-j-or), 0 0 24px 0 rgba(232, 183, 92, .6);
}

.plaque-tete {
  grid-area: tete;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.plaque-blason {
  grid-area: blason;
  align-self: center;
  display: grid;
}
.blason-plaque { --b: 38px; }
.plaque-nom {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 650 16px/1.2 var(--tv-j-ui);
  letter-spacing: -.015em;
  color: var(--tv-j-parchemin-ink);
}
.plaque-titre {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tv-j-parchemin-ink-2);
}
.plaque-etat {
  flex: none;
  font: 600 12px/1 var(--tv-j-ui);
  color: var(--tv-j-parchemin-accent);
}
.plaque-etat:empty { display: none; }

.plaque-chiffres {
  grid-area: chiffres;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-width: 0;
  margin: 0;
}
.plaque-case { min-width: 0; }
.plaque-case dt {
  font: 500 11.5px/1.2 var(--tv-j-ui);
  color: var(--tv-j-parchemin-ink-2);
}
.plaque-case dd {
  margin: 0;
  white-space: nowrap;
  font: 600 16px/1.15 var(--tv-j-ui);
  font-variant-numeric: tabular-nums;
  color: var(--tv-j-parchemin-ink);
}
.plaque-total dd { font-size: 21px; line-height: 1.05; }
.plaque-n { font-variant-numeric: tabular-nums; }
.plaque-sur {
  margin-left: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tv-j-parchemin-ink-2);
}
.plaque-sel dd { color: var(--tv-j-parchemin-accent); }

/* La jauge : le total (plein), et ce que vaudrait la manche (clair). */
.plaque-jauge {
  grid-area: jauge;
  position: relative;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(243, 230, 207, .12);
}
.plaque-jauge-manche,
.plaque-jauge-plein {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform var(--tv-dur-m, 420ms) var(--tv-j-sortie);
}
.plaque-jauge-manche { background: rgba(200, 120, 50, .5); }
.plaque-jauge-plein { background: var(--tv-j-parchemin-accent); }
.plaque.is-gagne .plaque-jauge-plein { background: var(--tv-j-or); }

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 4 · LA TABLE, et ce qui se pose dessus
   └────────────────────────────────────────────────────────────────────────── */

/* Le focus silencieux (tabindex -1, posé par script) ne se dessine pas. */
.jeu-table:focus { outline: none; }
.jeu-table {
  grid-area: table;
  position: relative;
  min-width: 0;
  min-height: 150px;
  margin: 4px 0;
  overflow: hidden;
  background: var(--tv-bois-2, #2b1a0f);
}

/* La réplique de l'adversaire : une bulle en haut de la table. Centrée par
   les marges, jamais par un transform (l'entrée animée le remplacerait). */
.jeu-bulle {
  position: absolute;
  z-index: 4;
  inset: 10px 12px auto;
  margin-inline: auto;
  width: fit-content;
  max-width: min(360px, calc(100% - 24px));
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 14px 10px 9px;
  border-radius: 18px;
  --tv-j-parchemin-ink-2: var(--tv-j-ink-2);
  background: rgba(18, 13, 9, .8);
  color: var(--tv-j-ink);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .85);
  pointer-events: none;
}
.blason-bulle { --b: 28px; }

/* Le portrait gravé d'un adversaire (TaverneApp.medaillon, dessiné par
   style.css) : en jeu, le cadrage se resserre sur le visage (le médaillon
   montre aussi le buste, qu'un rond de 30 px réduit à rien), et les ronds de
   la bulle et de la fin grandissent un peu (un visage se lit moins vite
   qu'un emblème) ; à peine dans les petites tailles, où la carte de fin doit
   tenir sans défiler. La plaque garde la taille des blasons : les deux
   plaques restent alignées. */
.jeu .blason.a-portrait .blason-portrait {
  transform: scale(1.22);
  transform-origin: 55% 42%;
}
.blason-bulle.a-portrait { --b: 38px; }
.jeu-fin-replique .blason.a-portrait { --b: 46px; }
.jeu-bulle-texte {
  margin: 0;
  font: 500 14.5px/1.38 var(--tv-j-ui);
}
.jeu-bulle-nom {
  display: block;
  font: 600 12px/1.3 var(--tv-j-ui);
  color: var(--tv-j-parchemin-ink-2);
}
.jeu-bulle-texte q { quotes: "«\00a0" "\00a0»"; }

/* L'annonce : un mot au milieu de la table, puis il s'efface. */
.jeu-annonce {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-width: calc(100% - 32px);
  padding: 8px 18px 10px;
  border-radius: 999px;
  background: rgba(18, 13, 9, .78);
  font: 700 24px/1.15 var(--tv-j-ui);
  letter-spacing: -.02em;
  text-align: center;
  color: var(--tv-j-ink);
  pointer-events: none;
}
.jeu-annonce[data-ton="err"] { color: var(--tv-j-rouge); }
.jeu-annonce[data-ton="ok"] { color: var(--tv-j-or); }

/* Le conseil de la chandelle : en bas de la table, refermable. */
.jeu-conseil {
  position: absolute;
  z-index: 5;
  inset: auto 10px 10px;
  margin-inline: auto;
  width: fit-content;
  max-width: min(460px, calc(100% - 20px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 12px;
  border-radius: 14px;
  background: rgba(29, 21, 16, .94);
  border: 1px solid var(--tv-j-ligne-2);
  color: var(--tv-j-ink);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9);
}
.jeu-conseil-ico { width: 20px; height: 20px; color: var(--tv-j-cuivre); }
.jeu-conseil-texte { margin: 0; font: 500 13.5px/1.38 var(--tv-j-ui); }
/* Sur une table basse, le conseil recouvrirait des dés à toucher : il se
   pose alors SUR la plaque de l'adversaire (son score attend, mes dés non),
   la couvre entière, et déborde au besoin sur le haut de la table, où la
   rangée de l'adversaire est vide pendant mon tour. Hors du flux : la table
   ne change pas de taille au milieu d'un tour. */
.jeu-conseil.jeu-conseil-plaque {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  min-height: 100%;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 12px;
  background: var(--tv-j-carte);
}

/* La table plate (le module 3D manque) : la partie reste jouable. */
.jeu-plate {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, rgba(0, 0, 0, 0) 2px 92px),
    var(--tv-bois-1, #3d2717);
}
.jeu-plate-rangee { display: flex; flex-wrap: wrap; gap: 8px; min-height: 26px; }
.jeu-plate-groupe { display: flex; gap: 3px; }
.jeu-plate-des {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 10px;
}
.jeu-plate-de {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.jeu-plate-de.is-choisi { border-color: var(--tv-j-or); background: rgba(232, 183, 92, .16); }
.jeu-plate-de.is-terni { opacity: .45; }
.jeu-de-plat rect { fill: #e7d3aa; stroke: #b99a66; stroke-width: 3; }
.jeu-de-plat circle { fill: #2a1c10; }

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 5 · LES COMMANDES : la puce, puis les actions
   └────────────────────────────────────────────────────────────────────────── */

.jeu-commandes {
  grid-area: cmd;
  display: grid;
  grid-template-areas: "puce" "act";
  gap: 7px;
  padding: 4px 10px max(10px, var(--tv-j-bas));
}

/* La puce : deux lignes au plus, hauteur fixe (rien ne bouge en dessous). */
.jeu-puce {
  grid-area: puce;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  overflow: hidden;
  text-align: center;
  font: 500 13px/1.3 var(--tv-j-ui);
  color: var(--tv-j-ink-2);
}
.jeu-puce[data-ton="ok"] {
  color: var(--tv-j-ink);
  font-weight: 600;
}
.jeu-puce[data-ton="err"] { color: var(--tv-j-rouge); }
.jeu-puce[data-ton="aide"] { color: var(--tv-j-ink-3); }

.jeu-actions {
  grid-area: act;
  display: grid;
  grid-template-columns: 54px minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
.jeu-actions[data-boutons="2"] { grid-template-columns: 54px minmax(0, 1fr); }

.jeu-attente-tour {
  grid-area: act;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  padding: 0 10px;
  text-align: center;
  font: 500 13.5px/1.35 var(--tv-j-ui);
  color: var(--tv-j-ink-2);
}

/* ── Les boutons de la scène ──────────────────────────────────────────── */
.jeu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--tv-j-ink);
  font: 600 15.5px/1.15 var(--tv-j-ui);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: transform var(--tv-dur-xs, 140ms) var(--tv-j-sortie), opacity var(--tv-dur-xs, 140ms) linear;
}
.jeu-btn .ico { width: 22px; height: 22px; }
.jeu-btn:active:not([disabled]) { transform: scale(.97); }
.jeu-btn:focus-visible { outline: 2px solid var(--tv-j-or); outline-offset: 2px; }
.jeu-btn[disabled] { opacity: .4; cursor: default; }

.jeu-btn-col {
  display: grid;
  min-width: 0;
}
.jeu-btn-texte,
.jeu-btn-sous {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jeu-btn-sous {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  opacity: .82;
}

.jeu-btn-principal {
  background: var(--tv-j-cuivre);
  color: var(--tv-j-sur-cuivre);
  box-shadow: inset 0 1px 0 rgba(255, 238, 210, .5), 0 10px 22px -14px rgba(232, 163, 91, .9);
}
.jeu-btn-principal .ico { stroke-width: 1.9; }
.ico-plein { fill: currentColor; stroke: none; }
.jeu-btn-principal.is-gagner {
  background: var(--tv-j-or);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, .6), 0 0 0 2px rgba(232, 183, 92, .35), 0 12px 26px -14px rgba(232, 183, 92, 1);
}
/* L'appui long : le bouton s'enfonce le temps que le gobelet tremble. */
.jeu-btn-principal.is-secoue { transform: scale(.96); }

.jeu-btn-encaisser {
  justify-content: flex-start;
  border-color: var(--tv-j-ligne-2);
  background: rgba(243, 230, 207, .06);
}
.jeu-btn-encaisser .jeu-btn-col { justify-items: start; }
.jeu-btn-encaisser .jeu-btn-sous {
  font-size: 13.5px;
  font-weight: 600;
  opacity: 1;
  color: var(--tv-j-or);
}

.jeu-btn-conseil {
  padding: 0;
  border-color: var(--tv-j-ligne);
  color: var(--tv-j-cuivre);
}
.jeu-btn-conseil .ico { width: 24px; height: 24px; }

.jeu-btn-second {
  border-color: var(--tv-j-ligne-2);
  color: var(--tv-j-ink);
}
.jeu-btn-danger {
  background: var(--tv-j-rouge-plein);
  color: #fff;
}
.jeu-btn-large { width: 100%; }
.jeu.is-occupe .jeu-btn-principal,
.jeu.is-occupe .jeu-btn-encaisser { cursor: progress; }

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 6 · LES COUCHES : passage, attente, pause, confirmation, fin
   └────────────────────────────────────────────────────────────────────────── */

.jeu-couche {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(16px + var(--tv-j-haut))
    calc(16px + var(--tv-j-droite))
    calc(16px + var(--tv-j-bas))
    calc(16px + var(--tv-j-gauche));
  background: rgba(10, 7, 5, .8);
}
/* Centrée quand elle tient, défilable quand elle ne tient pas. */
.jeu-couche > * { margin: auto; }
.jeu-passage { background: rgba(12, 9, 6, .96); }
.jeu-attente { background: rgba(12, 9, 6, .9); }
.jeu-fin {
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(255, 176, 82, .12), rgba(255, 176, 82, 0) 70%),
    rgba(10, 7, 5, .86);
}

.jeu-carte {
  width: 100%;
  max-width: 400px;
  padding: 26px 20px 20px;
  border-radius: 22px;
  background: var(--tv-j-carte);
  color: var(--tv-j-ink);
  text-align: center;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .8);
}
.jeu-carte-titre {
  margin: 0 0 8px;
  font: 700 26px/1.15 var(--tv-j-ui);
  letter-spacing: -.025em;
}
.jeu-carte-sous {
  margin: 0 0 18px;
  font: 400 14.5px/1.45 var(--tv-j-ui);
  color: var(--tv-j-ink-2);
}
.jeu-carte-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.jeu-carte-actions .jeu-btn,
.jeu-attente-carte .jeu-btn { justify-content: center; text-align: center; }
.jeu-attente-carte .jeu-btn { width: 100%; }
.jeu-attente-carte .jeu-btn + .jeu-btn { margin-top: 4px; }
/* Un geste second, dit en lien : retirer son défi ouvert. */
.jeu-btn-lien {
  min-height: 44px;
  border-color: transparent;
  color: var(--tv-j-rouge);
  font-weight: 500;
}
.jeu-btn-lien .ico { width: 18px; height: 18px; }

/* ── Le passage du téléphone ──────────────────────────────────────────── */
.jeu-passage-carte {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-top: 28px;
}
.blason-passage { --b: 76px; }
.jeu-passage-titre {
  margin: 4px 0 0;
  font: 700 28px/1.15 var(--tv-j-ui);
  letter-spacing: -.025em;
}
.jeu-passage-sous {
  margin: 0;
  font: 400 15px/1.45 var(--tv-j-ui);
  color: var(--tv-j-ink-2);
}
.jeu-passage-carte .jeu-btn { justify-content: center; margin-top: 8px; }
.jeu-passage-note {
  margin: 0;
  font: 400 12.5px/1.4 var(--tv-j-ui);
  color: var(--tv-j-ink-3);
}

/* ── L'attente d'un duel ──────────────────────────────────────────────── */
.jeu-attente-carte { display: grid; gap: 6px; }
.jeu-attente-lien {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(243, 230, 207, .07);
  font: 500 13px/1.4 var(--tv-mono, ui-monospace, monospace);
  color: var(--tv-j-ink);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

/* ── Le menu de la pause ──────────────────────────────────────────────── */
.jeu-menu {
  display: grid;
  margin-top: 4px;
  border-top: 1px solid var(--tv-j-ligne);
  text-align: left;
}
.jeu-menu-btn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  min-height: 54px;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--tv-j-ligne);
  background: transparent;
  color: var(--tv-j-ink);
  font: 500 15.5px/1.25 var(--tv-j-ui);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jeu-menu-btn .ico { width: 21px; height: 21px; color: var(--tv-j-ink-2); }
.jeu-menu-btn:focus-visible { outline: 2px solid var(--tv-j-or); outline-offset: -2px; border-radius: 8px; }
.jeu-menu-btn:active { opacity: .75; }
.jeu-menu-note {
  grid-column: 2;
  margin-top: 2px;
  font: 400 12.5px/1.35 var(--tv-j-ui);
  color: var(--tv-j-ink-3);
}
.jeu-menu-danger,
.jeu-menu-danger .ico { color: var(--tv-j-rouge); }

/* ── La fin : une carte sombre (la classe garde son nom : les tests et
   scene.js la visent) ───────────────────────────────────────────────── */
.jeu-parchemin {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 30px 22px 22px;
  border-radius: 24px;
  /* Les encres de la carte : claires sur le fond sombre. */
  --tv-j-parchemin-ink: var(--tv-j-ink);
  --tv-j-parchemin-ink-2: var(--tv-j-ink-2);
  --tv-j-parchemin-accent: var(--tv-j-cuivre);
  background: var(--tv-j-carte);
  color: var(--tv-j-parchemin-ink);
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--tv-j-ligne), 0 36px 80px -30px rgba(0, 0, 0, .95);
}
.jeu-fin-sur {
  margin: 0;
  font: 500 13.5px/1.3 var(--tv-j-ui);
  color: var(--tv-j-parchemin-ink-2);
}
.jeu-fin-titre {
  margin: 6px 0 2px;
  font: 800 42px/1.05 var(--tv-j-ui);
  letter-spacing: -.035em;
  color: var(--tv-j-parchemin-ink);
}
.jeu-parchemin[data-issue="victoire"] .jeu-fin-titre { color: var(--tv-j-or); }
.jeu-fin-score {
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.jeu-fin-n { font: 600 32px/1.1 var(--tv-j-ui); }
.jeu-fin-a { font: 500 18px/1 var(--tv-j-ui); color: var(--tv-j-parchemin-ink-2); }
.jeu-fin-qui {
  margin: 0 0 14px;
  font: 400 14px/1.45 var(--tv-j-ui);
  color: var(--tv-j-parchemin-ink-2);
}

.jeu-fin-replique {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(243, 230, 207, .07);
  text-align: left;
}
.jeu-fin-replique blockquote {
  margin: 0;
  font: 500 15px/1.4 var(--tv-j-ui);
}
.jeu-fin-replique figcaption {
  margin-top: 3px;
  font: 600 12px/1.3 var(--tv-j-ui);
  color: var(--tv-j-parchemin-ink-2);
}

/* Le dé gagné, révélé en 3D. */
.jeu-fin-de {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 6px 14px 6px 6px;
  border-radius: 18px;
  background: radial-gradient(70% 90% at 20% 50%, rgba(61, 39, 23, .9), rgba(43, 26, 15, .8));
  color: var(--tv-j-ink);
  text-align: left;
}
.jeu-fin-de-3d {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
}
.jeu-fin-de-3d .tv-apercu { min-height: 0; }
.jeu-fin-de-texte { min-width: 0; }
.jeu-fin-de-titre,
.jeu-fin-de-nom,
.jeu-fin-de-note { margin: 0; }
.jeu-fin-de-titre { font: 600 12px/1.3 var(--tv-j-ui); color: var(--tv-j-ink-2); }
.jeu-fin-de-nom { margin-top: 2px; font: 700 20px/1.15 var(--tv-j-ui); letter-spacing: -.02em; color: var(--tv-j-or); }
.jeu-fin-de-note { margin-top: 4px; font: 400 12.5px/1.35 var(--tv-j-ui); color: var(--tv-j-ink-2); }

.jeu-fin-elo {
  margin: 0 0 12px;
  font: 600 14px/1.3 var(--tv-j-ui);
  color: var(--tv-j-parchemin-accent);
}

.jeu-fin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 8px;
  margin: 0 0 12px;
  padding: 12px 0 0;
  border-top: 1px solid var(--tv-j-ligne);
}
.jeu-fin-stats dt {
  font: 500 11.5px/1.25 var(--tv-j-ui);
  color: var(--tv-j-parchemin-ink-2);
}
.jeu-fin-stats dd {
  margin: 2px 0 0;
  font: 600 18px/1.15 var(--tv-j-ui);
  font-variant-numeric: tabular-nums;
}
.jeu-fin-note {
  margin: -4px 0 12px;
  font: 400 12px/1.35 var(--tv-j-ui);
  color: var(--tv-j-parchemin-ink-2);
}

.jeu-fin-trophees {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.jeu-fin-trophee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 13.5px/1.3 var(--tv-j-ui);
  color: var(--tv-j-parchemin-accent);
}
.jeu-fin-trophee .ico { width: 18px; height: 18px; }

.jeu-fin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.jeu-fin-actions .jeu-btn { justify-content: center; text-align: center; }
.jeu-fin-actions .jeu-btn-principal { grid-column: 1 / -1; }
.jeu-parchemin .jeu-btn:focus-visible { outline-color: var(--tv-j-cuivre); }

/* Trois boutons sur un téléphone : le dé du bouton principal cède sa place
   au risque de la relance, qui est l'information du moment. */
@media (max-width: 459px) {
  .jeu-actions[data-boutons="3"] .jeu-btn-principal > .ico { display: none; }
}

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 7 · LES PETITS ÉCRANS : 320 × 568 doit tenir sans défiler
   └────────────────────────────────────────────────────────────────────────── */

@media (max-width: 359px), (max-height: 640px) {
  .jeu-barre { min-height: 44px; }
  .plaque { margin: 3px 8px; padding: 6px 10px 7px 8px; column-gap: 8px; }
  .blason-plaque { --b: 32px; }
  .plaque-nom { font-size: 15.5px; }
  .plaque-total dd { font-size: 19px; }
  .plaque-case dd { font-size: 15px; }
  .plaque-chiffres { gap: 11px; }
  .plaque-jauge { margin-top: 4px; height: 4px; }
  .jeu-table { margin: 3px 0; }
  .jeu-commandes { gap: 5px; padding-top: 2px; }
  .jeu-puce { height: 34px; font-size: 12.5px; }
  .jeu-btn { min-height: 52px; }
  .jeu-attente-tour { min-height: 52px; }
  .jeu-actions { grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; }
  .jeu-actions[data-boutons="2"] { grid-template-columns: 48px minmax(0, 1fr); }
  .jeu-btn-principal { padding: 0 10px; gap: 8px; }
  .jeu-btn-encaisser { padding: 0 10px; }
  .jeu-fin-titre { font-size: 36px; }
  .jeu-parchemin { padding: 24px 16px 18px; }
  .jeu-fin-replique .blason.a-portrait { --b: 38px; }
}

@media (max-width: 359px) {
  .plaque-sur { display: block; margin: 0; font-size: 10.5px; line-height: 1.1; }
  .plaque-total dd { line-height: 1; }
  .jeu-btn-texte { font-size: 14.5px; }
  .jeu-btn-sous { font-size: 11.5px; }
  .jeu-fin-stats dd { font-size: 16px; }
}

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 8 · DEUX COLONNES : téléphone couché, puis grands écrans
   └────────────────────────────────────────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 540px) {
  .jeu-plateau {
    grid-template-columns: minmax(280px, 40%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "barre table"
      "lui table"
      ". table"
      "moi table"
      "cmd table";
  }
  .jeu-barre { min-height: 44px; padding-top: max(2px, var(--tv-j-haut)); }
  .jeu-titre-sous { display: none; }
  .plaque { margin: 3px 8px; padding: 6px 10px 7px 8px; }
  .blason-plaque { --b: 30px; }
  .plaque-nom { font-size: 15px; }
  .plaque-total dd { font-size: 18px; }
  .plaque-case dd { font-size: 14.5px; }
  .plaque-jauge { margin-top: 4px; height: 4px; }
  .jeu-table {
    margin: max(6px, var(--tv-j-haut)) 0 max(6px, var(--tv-j-bas)) 4px;
    border-radius: var(--tv-rayon-l, 14px);
  }
  .jeu-commandes { padding: 2px 8px max(8px, var(--tv-j-bas)); gap: 4px; }
  .jeu-puce { height: 34px; font-size: 12.5px; }
  .jeu-btn { min-height: 50px; }
  .jeu-attente-tour { min-height: 50px; }
  .jeu-actions { grid-template-columns: 46px minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; }
  .jeu-actions[data-boutons="2"] { grid-template-columns: 46px minmax(0, 1fr); }
  .jeu-btn-principal { padding: 0 10px; gap: 8px; }
  .jeu-btn-encaisser { padding: 0 10px; }
  /* La colonne est étroite (l'encoche mange un bord) : le dé du bouton cède
     sa place au libellé et au risque, qui sont l'information du moment. */
  .jeu-actions .jeu-btn-principal > .ico { display: none; }
  .jeu-actions .jeu-btn-texte { font-size: 14.5px; }
  /* Le menu de la pause tient en deux colonnes plutôt que de défiler. */
  .jeu-menu-carte { max-width: 580px; padding: 18px 18px 14px; }
  .jeu-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .jeu-menu-btn:nth-child(odd):last-child { grid-column: 1 / -1; }
  .jeu-carte-titre { font-size: 25px; }
  .jeu-carte-sous { margin-bottom: 12px; }
  /* Le parchemin de fin s'élargit au lieu de s'allonger. */
  .jeu-parchemin { max-width: 660px; padding: 16px 22px 14px; }
  .jeu-fin-titre { margin: 2px 0 0; font-size: 34px; }
  .jeu-fin-n { font-size: 26px; }
  .jeu-fin-qui { margin-bottom: 8px; }
  .jeu-fin-replique { margin-bottom: 8px; padding: 6px 10px; }
  .jeu-fin-de { margin-bottom: 8px; }
  .jeu-fin-de-3d { width: 92px; height: 92px; }
  .jeu-fin-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 8px; padding-top: 8px; }
  .jeu-fin-stats dd { font-size: 16px; }
  .jeu-fin-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jeu-fin-actions .jeu-btn-principal { grid-column: auto; }
}

@media (min-width: 900px) and (min-height: 541px) {
  /* Les deux plaques et les commandes font un seul panneau, centré dans la
     colonne : un vide de 360 px entre l'adversaire et moi donnait un écran
     inachevé. */
  .jeu-plateau {
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "barre table"
      ". table"
      "lui table"
      "moi table"
      "cmd table"
      ". table";
    padding: 0 calc(18px + var(--tv-j-droite)) 0 calc(10px + var(--tv-j-gauche));
  }
  .jeu-barre { padding-top: calc(10px + var(--tv-j-haut)); }
  .plaque { margin: 8px 10px; padding: 12px 16px 12px 12px; }
  .blason-plaque { --b: 44px; }
  .blason-bulle.a-portrait { --b: 44px; }
  .plaque-nom { font-size: 19px; }
  .jeu-table {
    margin: calc(18px + var(--tv-j-haut)) 0 calc(18px + var(--tv-j-bas)) 8px;
    border-radius: var(--tv-rayon-l, 14px);
    box-shadow: inset 0 0 0 1px rgba(243, 230, 207, .08), 0 30px 60px -30px rgba(0, 0, 0, .9);
  }
  .jeu-commandes { padding: 8px 10px max(18px, var(--tv-j-bas)); gap: 10px; }
  .jeu-puce { height: 42px; font-size: 14px; }
  .jeu-btn { min-height: 58px; }
}

/* ┌──────────────────────────────────────────────────────────────────────────
   │ 9 · LE CONFORT TACTILE (EN FIN de feuille : seul l'ordre tranche)
   └────────────────────────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .jeu-ico:hover { color: var(--tv-j-ink); }
  .jeu-menu-btn:hover { background: rgba(243, 230, 207, .05); }
  .jeu-btn-second:hover,
  .jeu-btn-encaisser:hover:not([disabled]),
  .jeu-btn-conseil:hover:not([disabled]) { border-color: rgba(243, 230, 207, .5); }
  .jeu-parchemin .jeu-btn-second:hover { border-color: rgba(43, 32, 22, .6); }
}

/* Sur un écran sans survol, un état « survolé » colle après le tap : on le
   neutralise, et les cibles gardent leurs 44 px. */
@media (hover: none) {
  .jeu-ico:hover { color: var(--tv-j-ink-2); }
  .jeu-menu-btn:hover { background: transparent; }
  .jeu-btn-second:hover { border-color: var(--tv-j-ligne-2); }
  .jeu-parchemin .jeu-btn-second:hover { border-color: rgba(43, 32, 22, .38); }
  .jeu-ico-petit { width: 44px; height: 44px; }
}