/*
 * Yam's — pages de jeu (solo, à plusieurs, défi du jour, en ligne).
 *
 * Le socle (fond, carte #app, boutons, overlay, classement) vient du CSS
 * partagé css/jeu.css, servi par proxies/css-jeu.php et chargé AVANT ce
 * fichier. Ici : l'écran de réglages, la piste des dés, la feuille de marque,
 * le journal, le salon en ligne.
 *
 * Perf : pas de backdrop-filter, pas de box-shadow animé en boucle, pas de
 * position: fixed décoratif. Les animations passent par transform et opacity.
 */

:root {
  --ym-or: #f2c94c;
  --ym-tapis: #145a3c;
  --ym-ivoire: #fbf6ea;
  --ym-point: #1d3b2c;
}

.cache { display: none !important; }

#app { text-align: left; }
#app h1 { text-align: center; margin: 4px 0 8px; }

/* ================= ÉCRAN DE RÉGLAGES ================= */

.setup-intro {
  color: var(--texte-doux);
  margin: 0 0 22px;
  line-height: 1.6;
  text-align: center;
}

.setup-bloc { margin-bottom: 22px; }

.setup-bloc h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-light);
  margin: 0 0 10px;
}

.setup-note {
  margin: 8px 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--texte-doux);
}
.setup-note a, .setup-message a { color: var(--color-light); }

.choix-groupe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.choix-compact { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }

.choix { display: block; cursor: pointer; position: relative; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }

.choix-corps {
  display: block;
  height: 100%;
  /* Cible tactile large : les réglages doivent rester confortables au doigt. */
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  background: var(--surface-2);
  transition: border-color 0.15s, background-color 0.15s;
}

.choix-corps strong { display: block; color: var(--texte); font-size: 1rem; margin-bottom: 2px; }
.choix-corps small { display: block; color: var(--texte-doux); font-size: 0.8rem; line-height: 1.45; }

.choix:hover .choix-corps { border-color: var(--color-light); }
.choix input:focus-visible + .choix-corps { outline: 2px solid var(--color-light); outline-offset: 2px; }
.choix input:checked + .choix-corps { border-color: var(--ym-or); background: color-mix(in srgb, var(--ym-or) 12%, var(--surface-2)); }
.choix input:checked + .choix-corps strong { color: var(--ym-or); }

.btn-lancer {
  display: flex;
  width: 100%;
  max-width: 340px;
  min-height: 50px;
  margin: 6px auto 8px;
  font-size: 1.05rem;
}

.setup-message {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line-forte);
  border-left: 3px solid var(--ym-or);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--texte);
  line-height: 1.55;
}
.setup-message[hidden] { display: none; }

.reprise {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--ym-or); border-radius: 8px;
  background: color-mix(in srgb, var(--ym-or) 10%, var(--surface-2));
}
.reprise[hidden] { display: none; }
.reprise p { margin: 0; color: var(--texte); }

.serie-info { text-align: center; margin: 0 0 22px; }

.setup-aide { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; }
.setup-aide h2 { font-size: 1rem; color: #f0f3f6; margin: 0 0 10px; }

.ym-details { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); margin-bottom: 8px; }
.ym-details summary { cursor: pointer; padding: 11px 14px; font-weight: 700; color: var(--texte); min-height: 44px; }
.ym-details summary:focus-visible { outline: 2px solid var(--color-light); outline-offset: -2px; }
.ym-details ul { margin: 0; padding: 0 14px 12px 32px; color: var(--texte-doux); line-height: 1.6; font-size: 0.9rem; }
.ym-details li { margin-bottom: 6px; }
.ym-details strong { color: var(--texte); }

.stats-perso { margin: 0 0 22px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.stats-perso h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-light); margin: 0 0 8px; }
.stats-perso p { margin: 0; color: var(--texte-doux); font-size: 0.88rem; line-height: 1.6; }
.stats-perso a { color: var(--color-light); }

.actions-centrees { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0 6px; }

/* ================= OVERLAY DE FIN ================= */

.overlay { overflow-y: auto; align-items: flex-start; }
.overlay.visible { align-items: center; }

.overlay-carte {
  width: min(480px, 100%);
  margin: auto;
  background: var(--surface-1);
  border: 1px solid var(--line-forte);
  border-radius: 12px;
  padding: 24px 22px;
  text-align: center;
}
.overlay-carte h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.5rem; color: #f0f3f6; }
.overlay-carte.fin-victoire { border-color: var(--ym-or); }
.overlay-carte.fin-victoire h2 { color: var(--ym-or); }
.overlay-carte.fin-victoire h2::before { content: '🏆 '; }
.overlay-carte > p { margin: 0 0 16px; color: var(--texte-doux); line-height: 1.6; }

.fin-stats { margin: 0 0 14px; }
.stat-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--texte-doux);
  text-align: left;
}
.stat-ligne strong { color: var(--texte); font-variant-numeric: tabular-nums; text-align: right; }
.stat-ligne.stat-moi span { color: var(--texte); font-weight: 700; }

.fin-bilan p, .fin-revanche p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.55; color: var(--texte); }
.fin-bilan a { color: var(--color-light); font-weight: 600; white-space: nowrap; }
.fin-revanche { margin: 0 0 12px; color: var(--texte-doux); font-size: 0.88rem; }

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

/* ================= EN LIGNE ================= */

.etat-connexion {
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--line-forte); border-radius: 6px;
  background: var(--surface-2); color: var(--texte); text-align: center; font-size: 0.9rem;
}
.etat-connexion[hidden] { display: none; }

.champ-pseudo { margin-bottom: 22px; }
.champ-pseudo label { display: block; margin-bottom: 6px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-light); font-weight: 700; }
.champ-pseudo input, .controle-ligne input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-forte);
  background: var(--surface-2);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
}
.champ-pseudo input { max-width: 320px; }

.lobby-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 22px; }
.lobby-actions .btn { flex: 1 1 200px; min-height: 50px; }

.lobby-rejoindre { border-top: 1px solid var(--line); padding-top: 18px; }
.lobby-rejoindre label { display: block; margin-bottom: 8px; color: var(--texte-doux); font-size: 0.9rem; }
.controle-ligne { display: flex; gap: 10px; }
.controle-ligne input { flex: 1; min-width: 0; font-size: 1.1rem; letter-spacing: 0.25em; text-transform: uppercase; }

.lobby-erreur { color: #f0a0a0; min-height: 1.3em; margin: 10px 0 0; font-size: 0.88rem; }
.note-invite { color: var(--texte-doux); font-size: 0.85rem; line-height: 1.6; }

#vue-salon { text-align: center; }
#vue-salon h2 { font-family: var(--font-display); color: #f0f3f6; margin: 6px 0 4px; }
.salon-format { color: var(--texte-doux); font-size: 0.9rem; margin: 0 0 14px; }

.salon-code-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 16px;
}
.salon-code-bloc strong {
  font-size: 2rem;
  letter-spacing: 0.3em;
  color: var(--ym-or);
}

.salon-joueurs { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 420px; text-align: left; }
.salon-joueurs li {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.salon-joueurs .salon-place-libre { color: var(--texte-faible); border-style: dashed; }

.salon-options { margin: 0 0 14px; }
.salon-options label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--texte);
  font-size: 0.9rem;
  cursor: pointer;
}
.salon-decompte { color: var(--texte-doux); font-size: 0.9rem; line-height: 1.55; margin: 0 0 14px; }

/* ================= DÉFI DU JOUR ================= */

.etat-defi { text-align: center; color: var(--texte); margin: 0 0 14px; line-height: 1.55; }
.defi-avertissement { text-align: center; color: var(--texte-faible); font-size: 0.82rem; margin: 0 0 8px; }
.classement-titre { font-family: var(--font-display); font-size: 1.15rem; color: #f0f3f6; margin: 0 0 12px; }
.lb-echec { color: #d07070; font-weight: 800; }

/* ================= RÉGLAGES PROPRES AU YAM'S ================= */

.ym-noms { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ym-nom-joueur { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--texte-doux); }
.ym-nom-joueur[hidden] { display: none; }
.ym-nom-joueur input {
  min-height: 44px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line-forte); background: var(--surface-2); color: var(--texte);
  font: inherit; font-size: 1rem;
}
.ym-nom-joueur input:focus-visible { outline: 2px solid var(--color-light); outline-offset: 1px; }
.ym-si-adversaires[hidden] { display: none; }

.ym-btn-son-setup, .ym-opt-son {
  min-height: 36px; min-width: 40px; padding: 6px 11px;
  border: 1px solid var(--line-forte); border-radius: 8px;
  background: var(--surface-2); color: var(--texte-doux); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.ym-btn-son-setup[aria-pressed="true"], .ym-opt-son[aria-pressed="true"] { border-color: var(--color-light); color: var(--texte); }

/* ================= LA TABLE ================= */

/* Pendant la partie, la carte s'élargit : la feuille de quatre joueurs tient à côté des dés. */
body.yams-en-jeu #app { max-width: 1120px; }

.ym-scene {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  grid-template-areas: "piste feuille" "panneau feuille";
  gap: 16px;
  align-items: start;
}
.ym-piste { grid-area: piste; }
.ym-feuille-zone { grid-area: feuille; min-width: 0; }
.ym-panneau { grid-area: panneau; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* La piste : un tapis vert, comme sur une vraie table de jeu. */
.ym-piste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ym-tapis) 60%, #000);
  background: var(--ym-tapis);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ym-tour {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #e6f3eb;
  min-height: 1.3em;
}
.ym-tour.ym-tour-moi { color: var(--ym-or); }

.ym-des { display: flex; justify-content: center; gap: 8px; padding-top: 6px; }

/*
 * Un dé est un bouton : l'état « gardé » se lit sur le dé lui-même (soulevé,
 * contour doré, mention sous le dé), jamais en recolorant la piste.
 * Les points sont des dégradés radiaux posés à leur place : aucune image.
 */
.ym-de {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 11px;
  border: 2px solid #c9bfa6;
  background-color: var(--ym-ivoire);
  background-repeat: no-repeat;
  background-size: 22% 22%;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 3px 0 #b7ab8e;
}
.ym-de:disabled { cursor: default; }
.ym-de[data-face=""] { background-image: none; opacity: 0.35; box-shadow: none; }
.ym-de-face, .ym-de-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ym-de[data-face="1"] { background-image: radial-gradient(circle, var(--ym-point) 45%, transparent 47%); background-position: 50% 50%; }
.ym-de[data-face="2"] {
  background-image: radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%);
  background-position: 20% 20%, 80% 80%;
}
.ym-de[data-face="3"] {
  background-image: radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%);
  background-position: 20% 20%, 50% 50%, 80% 80%;
}
.ym-de[data-face="4"] {
  background-image: radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%);
  background-position: 20% 20%, 80% 20%, 20% 80%, 80% 80%;
}
.ym-de[data-face="5"] {
  background-image: radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%);
  background-position: 20% 20%, 80% 20%, 50% 50%, 20% 80%, 80% 80%;
}
.ym-de[data-face="6"] {
  background-image: radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%), radial-gradient(circle, var(--ym-point) 45%, transparent 47%);
  background-position: 20% 18%, 80% 18%, 20% 50%, 80% 50%, 20% 82%, 80% 82%;
}

.ym-de:not(:disabled):hover { border-color: var(--ym-or); }
.ym-de:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ym-de.garde { transform: translateY(-8px); border-color: var(--ym-or); box-shadow: 0 3px 0 #a8862b; }
.ym-de.garde::after {
  content: 'gardé';
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ym-or);
  text-transform: uppercase;
}

.ym-de.roule { animation: ym-de-roule 0.4s ease-in-out; }
@keyframes ym-de-roule {
  0%   { transform: rotate(0deg) scale(1); }
  40%  { transform: rotate(160deg) scale(1.12); }
  75%  { transform: rotate(300deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}

.ym-des.ym-fete .ym-de { animation: ym-fete 0.9s ease-in-out; }
.ym-des.ym-fete .ym-de:nth-child(2) { animation-delay: 0.07s; }
.ym-des.ym-fete .ym-de:nth-child(3) { animation-delay: 0.14s; }
.ym-des.ym-fete .ym-de:nth-child(4) { animation-delay: 0.21s; }
.ym-des.ym-fete .ym-de:nth-child(5) { animation-delay: 0.28s; }
@keyframes ym-fete {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-16px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-5px); }
}

.ym-aide-garde { margin: 10px 0 0; text-align: center; font-size: 0.78rem; color: #cfe6d8; }
.ym-aide-garde[hidden] { visibility: hidden; display: block; }

.ym-commandes { display: flex; justify-content: center; }
.ym-btn-lancer {
  width: 100%;
  min-height: 50px;
  font-size: 1rem;
  background: color-mix(in srgb, var(--ym-tapis) 70%, #000);
  border-color: rgba(255, 255, 255, 0.18);
  color: #b9d3c4;
}
.ym-btn-lancer.pret { background: var(--ym-or); border-color: var(--ym-or); color: #2a2208; }
.ym-btn-lancer.pret:hover { background: #f6d877; }

.ym-chrono { margin: 0; text-align: center; font-size: 0.85rem; font-weight: 700; color: #cfe6d8; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.ym-chrono.urgent { color: #ffb4b4; }

/* ================= LA FEUILLE DE MARQUE ================= */

/* Elle défile sur elle-même sur un écran étroit, jamais la page. */
.ym-feuille-defile { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line-forte); background: var(--surface-1); }

.ym-feuille { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ym-legende { caption-side: bottom; padding: 8px 10px; text-align: left; font-size: 0.76rem; color: var(--texte-faible); }

.ym-feuille th, .ym-feuille td { padding: 0 8px; height: 34px; border-bottom: 1px solid var(--line); text-align: center; }
.ym-feuille thead th { height: auto; padding: 8px; font-size: 0.8rem; color: var(--texte-doux); vertical-align: bottom; }
.ym-feuille tbody th { text-align: left; font-weight: 600; color: var(--texte); white-space: nowrap; position: sticky; left: 0; background: var(--surface-1); z-index: 1; }
.ym-feuille .ym-col-case { text-align: left; position: sticky; left: 0; background: var(--surface-1); z-index: 1; }

.ym-col-joueur { min-width: 76px; }
.ym-tete-nom { display: block; max-width: 120px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte); font-weight: 700; }
.ym-tete-ia { display: block; font-size: 0.68rem; font-weight: 600; color: var(--texte-faible); }
.ym-col-joueur.ym-au-trait { box-shadow: inset 0 -3px 0 var(--ym-or); }
.ym-col-joueur.ym-au-trait .ym-tete-nom { color: var(--ym-or); }
.ym-col-joueur.ym-absent .ym-tete-nom { opacity: 0.55; }

.ym-feuille td.ym-col-trait { background: color-mix(in srgb, var(--ym-or) 5%, transparent); }
.ym-feuille td.ym-rempli { color: var(--texte); font-weight: 700; }
.ym-feuille td.ym-barre { color: var(--texte-faible); }

.ym-sous-total th, .ym-sous-total td { color: var(--texte-doux); font-size: 0.82rem; background: var(--surface-0); }
.ym-sous-total th { background: var(--surface-0); }
.ym-debut-bas th, .ym-debut-bas td { border-top: 2px solid var(--line-forte); }
.ym-total th, .ym-total td { font-size: 1rem; font-weight: 800; color: #f0f3f6; border-bottom: 0; height: 40px; background: var(--surface-2); }
.ym-total th { background: var(--surface-2); }

/* Les cases que le joueur peut remplir : le score proposé, à toucher. */
.ym-proposer {
  width: 100%;
  min-width: 44px;
  min-height: 30px;
  padding: 2px 6px;
  border: 1px dashed var(--ym-or);
  border-radius: 6px;
  background: transparent;
  color: var(--ym-or);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ym-proposer:hover:not(:disabled), .ym-proposer:focus-visible { background: color-mix(in srgb, var(--ym-or) 18%, transparent); outline: none; }
.ym-proposer.ym-proposer-zero { border-color: var(--line-forte); color: var(--texte-faible); }
.ym-proposer.ym-proposer-zero:hover:not(:disabled) { background: var(--surface-2); color: var(--texte-doux); }
.ym-proposer:disabled { cursor: default; opacity: 0.5; }

.ym-feuille td.ym-flash { animation: ym-flash 1.2s ease-out; }
@keyframes ym-flash {
  0% { background: color-mix(in srgb, var(--ym-or) 45%, transparent); }
  100% { background: transparent; }
}

/* ================= JOURNAL ET OPTIONS ================= */

.ym-journal {
  height: 128px;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-0);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--texte-doux);
}
.ym-journal p { margin: 0 0 3px; }
.ym-journal p:last-child { color: var(--texte); }
.ym-journal .ym-journal-alerte { color: #f0a0a0; }
.ym-journal .ym-journal-fort { color: var(--ym-or); font-weight: 700; }
.ym-journal:empty::before { content: 'Les lancers de la partie s\'afficheront ici.'; color: var(--texte-faible); }

.ym-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ym-opt-vitesse { display: inline-flex; }
.ym-opt-vitesse button {
  min-height: 36px; padding: 6px 11px;
  border: 1px solid var(--line-forte); background: var(--surface-2); color: var(--texte-doux);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.ym-opt-vitesse button:first-child { border-radius: 8px 0 0 8px; }
.ym-opt-vitesse button:last-child { border-radius: 0 8px 8px 0; }
.ym-opt-vitesse button + button { border-left: 0; }
.ym-opt-vitesse button.actif { background: color-mix(in srgb, var(--ym-or) 18%, var(--surface-2)); color: var(--texte); }
.ym-opt-son:focus-visible, .ym-opt-vitesse button:focus-visible { outline: 2px solid var(--color-light); outline-offset: 1px; }

.ym-regle-jouee summary { font-size: 0.86rem; min-height: 40px; padding: 9px 12px; }
.ym-regle-jouee .table-defilante { padding: 0 10px 10px; }

.ym-aide-clavier { margin: 0; font-size: 0.76rem; line-height: 1.45; color: var(--texte-faible); text-align: center; }
@media (hover: none) and (pointer: coarse) {
  .ym-aide-clavier { display: none; }
}

.ym-actions-jeu { display: flex; flex-wrap: wrap; gap: 8px; }
.ym-actions-jeu .btn { flex: 1 1 auto; font-size: 0.84rem; }

/* Tableaux des règles (barème) : défilent sur eux-mêmes, jamais la page. */
.table-defilante { overflow-x: auto; }
.table-regles { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table-regles th, .table-regles td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--texte-doux); }
.table-regles thead th { color: var(--color-light); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.table-regles tbody th { color: #f0f3f6; white-space: nowrap; }

/* ================= RESPONSIVE ================= */

/* Téléphone et tablette debout : les dés en haut, la feuille dessous, le journal à la fin. */
@media (max-width: 860px) {
  .ym-scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "piste" "feuille" "panneau"; gap: 10px; }
  body.yams-en-jeu { padding-left: 6px; padding-right: 6px; }
  body.yams-en-jeu #app { padding: 12px 8px 14px; }
  body.yams-en-jeu .jeu-banner { margin: -12px -8px 8px; padding: 8px 12px 10px; }
  body.yams-en-jeu .banner-deco { display: none; }
  .ym-piste { padding: 10px 8px 12px; gap: 8px; position: sticky; top: 0; z-index: 3; }
  .ym-de { width: 48px; height: 48px; border-radius: 10px; }
  .ym-journal { height: 92px; }
  .ym-feuille { font-size: 0.84rem; }
  .ym-feuille th, .ym-feuille td { padding: 0 5px; height: 32px; }
  .ym-col-joueur { min-width: 60px; }
  .ym-tete-nom { max-width: 80px; }
}

@media (max-width: 380px) {
  .ym-de { width: 42px; height: 42px; }
  .ym-des { gap: 6px; }
}

/* ===== Aides de l'entraînement : conseil de l'ordinateur, annulation ===== */
.ym-entrainement { margin-top: 10px; display: grid; gap: 8px; }
.ym-entr-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ym-entr-boutons .btn { min-height: 44px; padding: 6px 10px; font-size: 0.86rem; }
.ym-entr-auto { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.82rem; color: #cfe6d8; cursor: pointer; }
.ym-entr-auto input { width: 18px; height: 18px; accent-color: var(--ym-or); }
.ym-conseil {
  padding: 10px 12px;
  border: 1px solid #7dd3fc;
  border-radius: 10px;
  background: rgba(8, 47, 73, 0.55);
  font-size: 0.86rem;
  line-height: 1.45;
}
.ym-conseil p { margin: 0; }
.ym-conseil-texte { font-weight: 700; color: #f0f9ff; }
.ym-conseil-ton { margin-top: 6px !important; color: var(--ym-or); }
.ym-conseil-autres { margin: 6px 0 0; padding-left: 18px; color: #cbd5e1; font-size: 0.8rem; }
/* Les dés et la case que conseille l'ordinateur : un liseré bleu, distinct de l'or des dés gardés. */
.ym-de.ym-de-conseil { outline: 3px dashed #7dd3fc; outline-offset: 3px; }
.ym-proposer.ym-proposer-conseil { border: 2px solid #7dd3fc; background: rgba(125, 211, 252, 0.18); color: #f0f9ff; }

@media (max-width: 860px) {
  /* La piste reste collée en haut de l'écran : le conseil y reste court. */
  .ym-entrainement { margin-top: 4px; gap: 6px; }
  .ym-entr-boutons .btn { min-height: 38px; font-size: 0.8rem; }
  .ym-conseil { padding: 7px 9px; font-size: 0.8rem; }
  .ym-conseil-autres { display: none; }
}

/*
 * Les deux blocs partagés en gouttière sont visibles sur l'écran de réglages et
 * en fin de partie, masqués pendant la partie.
 */
body.yams-en-jeu .bandeau-infos-wrap,
body.yams-en-jeu .bloc-jeux-une-wrap {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ym-de.roule, .ym-des.ym-fete .ym-de, .ym-feuille td.ym-flash { animation: none; }
  .ym-de { transition: none; }
}