/* Les crans de qualite et les cadences rondes, pour la ville ET pour l'arene.
 *
 * Cette feuille est partagee parce que le panneau l'est : les deux pages
 * montrent les memes quatre crans et les memes quatre cadences, et deux copies
 * de ces regles auraient diverge a la premiere retouche — c'est exactement le
 * defaut que les deux cles de stockage avaient deja produit sur le reglage
 * lui-meme (voir `src/engine/reglagesVideo.js`).
 *
 * Elle ne porte que ce qui est commun. Le cadre autour — panneau de verre en
 * ville, carnet en arene — reste a chaque page, parce que c'est la seule chose
 * qui doive ressembler au lieu ou on se trouve.
 *
 * Le cran actif se lit a la bordure ET au fond, jamais a la seule couleur du
 * texte : un ecran mal calibre ou un joueur daltonien les confondrait. */

.cadence-crans{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:6px 0 4px}
.cadence-cran{display:grid;gap:2px;padding:7px 4px;color:#bdeef7;background:rgba(94,215,238,.06);border:1px solid rgba(103,222,244,.18);cursor:pointer;text-align:center}
.cadence-cran b{font-size:7px;font-weight:800;letter-spacing:.07em}
.cadence-cran small{color:#6f8d97;font-size:5px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.cadence-cran:hover{background:rgba(94,215,238,.13);border-color:rgba(103,222,244,.34)}
.cadence-cran.actif{color:#0b1b22;background:#7ee9bd;border-color:#7ee9bd}
.cadence-cran.actif small{color:#0b1b22;opacity:.72}

/* L'arene n'a pas la classe `.option-note` du hub : le releve mesure et la
   note de bas de panneau y prennent leur mise en forme ici, sans emprunter une
   regle qui appartient a l'autre page. */
#video-content .option-note{margin:8px 0 10px;color:#7f9aa4;font-size:6px;line-height:1.7;letter-spacing:.05em}
#video-content .cadence-cran b{font-size:9px}
#video-content .cadence-cran small{font-size:7px}