/* ===========================================================
   PARCOURS LIBERTIN — plateau en serpentin, nuit étoilée
   =========================================================== */
body.parcours-lib {
  --theme: #e0436b;
  --theme-2: #b05cff;
  --or: #f2c46d;
  --panneau: rgba(18, 10, 24, 0.92);
  background: #0f0a14;
}
.nuit {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 10%, rgba(176, 92, 255, 0.2), transparent 70%),
    radial-gradient(60% 40% at 80% 90%, rgba(224, 67, 107, 0.2), transparent 70%),
    #0f0a14;
}
.affiche { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }

.ecran.jeu { gap: 8px; }
.plateau {
  --lignes: 8;
  flex: 1 1 auto; min-height: 140px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(44px, 1fr); gap: 4px;
  padding: 6px; border-radius: 18px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08);
}
.case {
  --c: #444;
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 10px; background: color-mix(in srgb, var(--c) 38%, #120a18); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  font-size: 1rem;
}
.case.ch2 { box-shadow: inset 0 0 0 1px rgba(255, 138, 92, 0.35); }
.case.ch3 { box-shadow: inset 0 0 10px rgba(255, 46, 77, 0.45); }
.case i { font-style: normal; }
.case b { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.case.t-depart, .case.t-arrivee { --c: var(--or); }
.pions { position: absolute; inset: auto 2px 2px 2px; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.pion {
  width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; font-size: 0.55rem; font-weight: 800; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.pion.actif { width: 19px; height: 19px; font-size: 0.65rem; box-shadow: 0 0 8px var(--c), 0 0 0 2px var(--c); z-index: 2; }

.tableau {
  flex: none; display: flex; flex-direction: column; gap: 10px; justify-content: center; max-height: 50dvh;
  padding: 14px; border-radius: 22px; background: var(--panneau); border: 1px solid rgba(242, 196, 109, 0.25); overflow-y: auto;
}
.t-titre { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); text-align: center; }
.t-titre:empty { display: none; }
.t-texte { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 5.2vw, 1.5rem); line-height: 1.25; text-align: center; color: #fff; }
.t-texte:empty { display: none; }
.t-actions { display: grid; gap: 8px; }
.t-actions.deux { grid-template-columns: 1fr 1fr; }
.t-actions:empty { display: none; }
.t-actions .btn { margin: 0; }

.fin { justify-content: safe center; gap: 12px; overflow-y: auto; text-align: center; }
.fin h2 { font-family: var(--serif); font-size: clamp(1.8rem, 8vw, 2.4rem); margin: 0; }
.palmares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 400px; align-self: center; }
.palmares li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border-left: 4px solid var(--c); text-align: left; }
.palmares span { color: var(--muted); font-size: 0.85rem; }
.fin .btn-chrono { max-width: 400px; align-self: center; }
.fin .actions-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 400px; align-self: center; }
.fin .actions-fin .btn { margin: 0; }