#historique-permanent .histo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 0;
  table-layout: fixed;
}
/* Barre commune (css/games.css) aux couleurs du chronomètre */
.tc-jeu {
  --mg-jeu-largeur: 844px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(255, 215, 0, 0.2), transparent 55%),
    linear-gradient(120deg, #111, #333);
  --mgb-accent: #ffd700;
  --mgb-titre: linear-gradient(100deg, #ffd700, #ffffff);
  --mg-fs-fond: #f4f4f6;
  --mg-bulle-fond: #222;
}

.tc-jeu.mg-fs #chrono-digital {
  font-size: min(40px, 4.2vw, 5vh);
}

/* Style du chrono digital */
#chrono-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 20px 0;
}
#chrono-digital {
  /* Toutes les tailles du chrono sont en em : il se réduit sur petit écran */
  font-size: min(24px, 4.2vw);
  background: #e6e6e6;
  border: 0.375em solid #222;
  border-radius: 1.375em;
  padding: 1.75em 2.75em;
  display: flex;
  gap: 0.625em;
  box-shadow: 0 0.125em 1.125em #000a, 0 0 0 0.5em #111 inset;
}
.digit {
  display: inline-block;
  width: 2.375em;
  height: 4.25em;
  margin: 0 0.125em;
  position: relative;
  background: #bdbdbd;
  border-radius: 0.5em;
  box-shadow: 0 0 0.5em #8884 inset, 0 0 0 0.125em #8882;
}
.digit.special {
  background: none;
  width: 1.125em;
  height: 4.25em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: none;
}
/* Segments */
.seg {
  position: absolute;
  background: #222;
  opacity: 0.13;
  border-radius: 0.1875em;
  transition: opacity 0.15s;
}
.seg.on {
  background: #222;
  opacity: 0.92;
  box-shadow: 0 0 0.5em #ffd70099, 0 0 0.125em #fff8;
}
.seg0 {
  top: 0.25em;
  left: 0.4375em;
  width: 1.5em;
  height: 0.4375em;
}
.seg1 {
  top: 0.5em;
  right: 0.1875em;
  width: 0.4375em;
  height: 1.5em;
}
.seg2 {
  bottom: 0.5em;
  right: 0.1875em;
  width: 0.4375em;
  height: 1.5em;
}
.seg3 {
  bottom: 0.25em;
  left: 0.4375em;
  width: 1.5em;
  height: 0.4375em;
}
.seg4 {
  bottom: 0.5em;
  left: 0.1875em;
  width: 0.4375em;
  height: 1.5em;
}
.seg5 {
  top: 0.5em;
  left: 0.1875em;
  width: 0.4375em;
  height: 1.5em;
}
.seg6 {
  top: 1.9375em;
  left: 0.4375em;
  width: 1.5em;
  height: 0.4375em;
}

/* Deux points (:) */
.colon-dot {
  display: block;
  width: 0.5em;
  height: 0.5em;
  background: #222;
  border-radius: 50%;
  opacity: 0.7;
}
.colon-dot.top {
  margin-bottom: 0.5em;
}
.colon-dot.bot {
  margin-top: 0.5em;
}
.dot {
  display: block;
  width: 0.625em;
  height: 0.625em;
  background: #222;
  border-radius: 50%;
  margin: 3em auto 0 auto;
  opacity: 0.7;
}

/* Instructions sous le chrono */
#instructions {
  margin: 18px auto 0 auto;
  background: #333;
  border-radius: 12px;
  box-shadow: 0 2px 12px #0008;
  text-align: center;
  font-size: 1.15em;
  width: 100%;
  max-width: 600px;
  min-height: 150px;
  box-sizing: border-box;
  padding: 14px 16px;
  color: #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.instructions-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
#instructions b {
  color: #ffd700;
  font-weight: bold;
}
.objectif-info,
.ecart-info,
.pause-info {
  margin-bottom: 0;
}
.pause-info {
  margin-top: 12px;
  font-size: 0.95em;
  color: #888;
}

#historique-permanent {
  margin: 18px auto 0 auto;
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 2px 12px #0008;
  padding: 18px 0 12px 0;
  text-align: center;
  font-size: 1.15em;
  width: unset;
  min-width: unset;
  max-width: unset;
  display: block;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  padding: 15px 30px;
}

/* ---------- Chrono masqué : les chiffres s'éteignent, les deux-points
   clignotent pour montrer qu'il tourne toujours ---------- */
#chrono-digital.masque .seg.on {
  opacity: 0.13;
  box-shadow: none;
}
#chrono-digital.masque .colon-dot,
#chrono-digital.masque .dot {
  animation: chrono-clignote 1s steps(2) infinite;
}
@keyframes chrono-clignote {
  50% {
    opacity: 0.1;
  }
}

/* ---------- Appréciations ---------- */
/* Mode hard : rappel sur sa propre ligne */
.hard-info {
  margin-top: 8px;
  font-size: 0.85em;
  font-weight: bold;
  color: #ff8a80;
}
.appreciation {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
  color: #fff;
  animation: chrono-pop 0.35s ease;
}
@keyframes chrono-pop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
}
.appreciation.couronne {
  background: linear-gradient(135deg, #fff1a8, #ffd700 45%, #e0a800);
  color: #5a4200;
  box-shadow: 0 0 12px #ffd70099;
}
.appreciation.parfait {
  background: #1faa59;
}
.appreciation.excellent {
  background: #4cbf6b;
}
.appreciation.bien {
  background: #8bc34a;
}
.appreciation.moyen {
  background: #f0a500;
}
.appreciation.bof {
  background: #e67e22;
}
.appreciation.rate {
  background: #d9443a;
}
/* Pastille de couleur dans l'historique */
.pastille {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
/* Écart de 0.00s : une couronne au lieu de la pastille */
.pastille.couronne {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  vertical-align: 0;
}
.pastille.couronne::before {
  content: "👑";
}
.pastille.parfait {
  background: #1faa59;
}
.pastille.excellent {
  background: #4cbf6b;
}
.pastille.bien {
  background: #8bc34a;
}
.pastille.moyen {
  background: #f0a500;
}
.pastille.bof {
  background: #e67e22;
}
.pastille.rate {
  background: #d9443a;
}
.rang {
  margin: 6px 0;
  font-size: 1.2em;
  color: #ffd700;
}
.nouveau-record {
  margin-top: 6px;
  font-weight: bold;
  color: #ffd700;
  animation: chrono-pop 0.5s ease;
}

/* ---------- Petits écrans ---------- */
@media (max-width: 600px) {
  #instructions {
    font-size: 1em;
  }
  #historique-permanent {
    font-size: 0.95em;
    padding: 12px 10px;
  }
}

/* ---------- Choix du niveau ---------- */
/* Choix du niveau, dans la barre commune */
.choix-niveau {
  display: flex;
  justify-content: center;
  gap: 0;
  width: max-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 3px;
}
.choix-niveau button {
  border: none;
  background: none;
  color: #bbb;
  font: inherit;
  font-weight: bold;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.choix-niveau button:hover {
  color: #fff;
}
.choix-niveau button.actif {
  background: #ffd700;
  color: #222;
}
.choix-niveau button[data-niveau="hard"].actif {
  background: #d9443a;
  color: #fff;
}

/* ---------- Barre de progression : un segment par manche ---------- */
.chrono-segments {
  display: flex;
  gap: 5px;
  width: 100%;
  max-width: 600px;
  margin: 18px auto 0;
}
.chrono-segments span {
  position: relative;
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: #d6d6de;
  transition:
    background 0.3s,
    transform 0.3s;
}
.chrono-segments span.actif {
  background: #9a9aa8;
  transform: scaleY(1.4);
}
/* Écart de 0.00s : segment doré surmonté d'une couronne */
.chrono-segments span.couronne {
  background: linear-gradient(90deg, #ffe066, #ffd700, #e0a800);
  box-shadow: 0 0 8px #ffd700aa;
}
.chrono-segments span.couronne::after {
  content: "👑";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  line-height: 1;
}
.chrono-segments span.parfait {
  background: #1faa59;
}
.chrono-segments span.excellent {
  background: #4cbf6b;
}
.chrono-segments span.bien {
  background: #8bc34a;
}
.chrono-segments span.moyen {
  background: #f0a500;
}
.chrono-segments span.bof {
  background: #e67e22;
}
.chrono-segments span.rate {
  background: #d9443a;
}

/* ---------- Records (un par niveau) ---------- */
/* Records, dans la barre commune */
.records {
  display: flex;
  gap: 18px;
  font-size: 0.95em;
  color: var(--mgb-doux);
}
.records .rec::before {
  content: "🏆 ";
}
/* Le site colore tous les <b> : ici ils suivent le texte */
.records .rec b {
  color: inherit;
}
.records .rec.actif {
  color: var(--mgb-texte);
}
.records .rec.actif b {
  color: #ffd700;
}
.records .rec.battu {
  animation: chrono-record-battu 0.6s ease 3;
}
@keyframes chrono-record-battu {
  50% {
    transform: scale(1.15);
  }
}
.records .rec {
  display: inline-block;
}