/* Game boards of the subjects (js/jeux.js, js/plateau_*.js): choice of the game, maze,
   ladders, races. Uses the variables of css/jeu.css. */

/* ---------- choice of the game ---------- */
.plt-ecran { flex: 1; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 16px; }
.plt-ecran h2 { margin: 0; font-size: 2rem; }
.plt-choix-liste { display: grid; grid-template-columns: repeat(5, minmax(130px, 200px)); gap: 16px 18px; }
.plt-choix-liste:not(.trois) .plt-nom { font-size: 1.2rem; }
.plt-choix-liste.trois { grid-template-columns: repeat(3, minmax(150px, 250px)); }
.plt-choix { position: relative; display: grid; gap: 10px; justify-items: center; padding: 14px 14px 18px; border-radius: var(--rayon); }
.plt-choix svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.plt-nom { font-size: 1.45rem; font-weight: 700; }
.plt-choix.dernier { outline: 4px solid var(--jaune); }
.plt-etoile { position: absolute; top: -12px; right: 10px; background: var(--jaune); color: var(--texte); font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
@media (max-width: 800px) { .plt-choix-liste, .plt-choix-liste.trois { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }

/* ---------- common to the boards ---------- */
.exo-plateau svg { width: 100%; height: auto; display: block; user-select: none; }
.lab-entete { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; min-height: 34px; }
.lab-pas { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 3px solid var(--c); font-weight: 600; opacity: .6; background: #fff; }
.lab-pas.actif { opacity: 1; background: color-mix(in srgb, var(--c) 14%, white); }
.lab-pas b { color: var(--c); font-size: 1.2em; }
.plt-bulle { font-size: 22px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 4px; animation: plt-monte 1.3s ease-out forwards; pointer-events: none; }
@keyframes plt-monte { from { transform: translateY(8px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
.mini { pointer-events: none; }
.mini-nom text { font-family: inherit; }

/* ---------- maze ---------- */
.lab-cible { cursor: pointer; }
.lab-cible rect { fill: color-mix(in srgb, var(--c) 22%, transparent); stroke: var(--c); stroke-width: 3; stroke-dasharray: 7 5; animation: lab-lueur 1.2s ease-in-out infinite alternate; }
.lab-cible:hover rect { fill: color-mix(in srgb, var(--c) 40%, transparent); }
.lab-cible text { fill: var(--c); pointer-events: none; }
@keyframes lab-lueur { from { opacity: .55; } to { opacity: 1; } }
.lab-drapeau { transform-box: fill-box; transform-origin: left center; animation: lab-flotte 1.6s ease-in-out infinite alternate; }
@keyframes lab-flotte { from { transform: scaleX(1); } to { transform: scaleX(.82); } }

/* ---------- ladders ---------- */
.ech-erreurs { display: inline-flex; gap: 3px; margin-left: 4px; }
.ech-erreurs i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--mauvais); background: #fff; }
.ech-erreurs i.plein { background: var(--mauvais); }

/* ---------- races: the board on top, the question below ---------- */
.exo-corps.plt-course { grid-template-columns: 1fr; max-width: 1150px; margin: 0 auto; width: 100%; gap: 12px; padding-top: 12px; }
.plt-course .exo-plateau { padding: 6px 8px 8px; }
.plt-course .exo-plateau svg { max-height: 36vh; border-radius: 14px; }
.plt-course .exo-question { min-height: 280px; }
.cou-vitesse { display: inline-block; width: 80px; height: 10px; border-radius: 999px; background: #eee6da; overflow: hidden; margin-left: 4px; }
.cou-vitesse i { display: block; height: 100%; background: linear-gradient(90deg, var(--jaune), var(--bon)); border-radius: 999px; transition: width .2s; }
.cou-depart { font-size: 72px; font-weight: 800; fill: #fff; stroke: #2d2a3e; stroke-width: 3px; paint-order: stroke; }
.cou-vague { animation: cou-vague 3s linear infinite; }
@keyframes cou-vague { from { transform: translateX(0); } to { transform: translateX(60px); } }

/* ---------- ateliers (rodeo, firefighter, carpenter, lumberjack, fiber): the board on top, like the races ---------- */
.exo-corps:is(.plt-rodeo, .plt-pompier, .plt-menuisier, .plt-bucheron, .plt-fibre, :has(> .exo-plateau svg.atl)) { grid-template-columns: 1fr; max-width: 1150px; margin: 0 auto; width: 100%; gap: 12px; padding-top: 12px; }
:is(.plt-rodeo, .plt-pompier, .plt-menuisier, .plt-bucheron, .plt-fibre, :has(> .exo-plateau svg.atl)) .exo-plateau { padding: 6px 8px 8px; }
:is(.plt-rodeo, .plt-pompier, .plt-menuisier, .plt-bucheron, .plt-fibre, :has(> .exo-plateau svg.atl)) .exo-plateau svg { max-height: 36vh; border-radius: 14px; overflow: hidden; }
:is(.plt-rodeo, .plt-pompier, .plt-menuisier, .plt-bucheron, .plt-fibre, :has(> .exo-plateau svg.atl)) .exo-question { min-height: 280px; }
.atl-barre { display: inline-block; width: 70px; height: 10px; border-radius: 999px; background: #eee6da; overflow: hidden; }
.atl-barre i { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.atl-oups { flex: 1; display: grid; place-items: center; }
.atl-oups p { font-size: 1.6rem; font-weight: 700; color: var(--c, var(--mauvais)); margin: 0; animation: atl-oups .3s ease-out; }
@keyframes atl-oups { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.atl-cadre { fill: none; stroke: transparent; stroke-width: 5; transition: stroke .3s; }
.atl-cadre.actif { stroke: var(--c); }
.r-poussiere { fill: #d9c3a0; animation: r-poussiere .8s ease-out forwards; pointer-events: none; transform-box: fill-box; transform-origin: center; }
@keyframes r-poussiere { from { opacity: .8; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(-14px, -8px) scale(1.8); } }
.atl-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: atl-flamme .45s ease-in-out infinite alternate; }
@keyframes atl-flamme { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.9, 1.12) skewX(4deg); } }
.atl-fumee { animation: atl-fumee 2.6s linear infinite; }
@keyframes atl-fumee { from { transform: translate(0, 0) scale(.6); opacity: .75; } to { transform: translate(10px, -70px) scale(1.7); opacity: 0; } }
.atl-jet { stroke-dasharray: 9 7; animation: atl-jet .35s linear infinite; }
@keyframes atl-jet { to { stroke-dashoffset: -16; } }
.atl-copeau { animation: atl-copeau .7s ease-out forwards; pointer-events: none; }
@keyframes atl-copeau { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
.atl-apparait { animation: atl-apparait .4s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes atl-apparait { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.exo-plateau svg.atl { width: min(100%, 120vh); max-height: none; height: auto; margin: 0 auto; }
.atl-fumee { transform-box: fill-box; transform-origin: center; }
.atl-copeau { transform-box: fill-box; transform-origin: center; }

/* ---------- choice of the game in sections (Aventures, Métiers, Sports) ---------- */
.plt-sections { align-content: start; gap: 10px; }
.plt-section { width: min(1180px, 100%); }
.plt-section h3 { margin: 6px 0 8px; font-size: 1.3rem; color: var(--texte-doux, #6b5e55); }
.plt-sections .plt-choix-liste { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.plt-sections .plt-choix { padding: 8px 8px 10px; gap: 6px; }
.plt-sections .plt-nom { font-size: 1.02rem; }
.plt-sections .plt-etoile { font-size: .72rem; top: -10px; }

/* ---------- match boards (js/plateau_match.js) ---------- */
.mt-score b { font-size: 1.15rem; margin: 0 4px; }
.mt-points, .mt-fautes { display: inline-flex; gap: 3px; }
.mt-points i, .mt-fautes i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c); display: inline-block; }
.mt-points i.ok { background: var(--c); }
.mt-fautes i { border-color: #e5534b; border-radius: 3px; width: 10px; height: 10px; }
.mt-fautes i.non { background: #e5534b; }