/* Réglages → Commandes (commandes.js) : touches du clavier et de la manette, schéma de la manette en direct.
   Mêmes cadres de la ROM que le reste, tailles en multiples de 8. */
.cmd-modal .cmd-box { width: min(760px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background-color: #0a1230; background-clip: padding-box; }
/* Le titre, l'état de la manette et les onglets restent en place ; seule la liste défile. */
.cmd-modal .cmd-liste { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding-right: 4px; }
.cmd-onglets { gap: 8px; margin: 8px 0 4px; }
.cmd-onglet.on { border-image-source: url('assets/ui/cadres/cadre1_yellow_fin.png'); color: #ffe27a; }
.cmd-liste { display: flex; flex-direction: column; gap: 2px; }
.cmd-cat { font-size: 16px; letter-spacing: 1px; margin: 8px 0 2px; }
.cmd-note { font-size: 16px; margin: 2px 0; }
.cmd-ligne { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; border-bottom: 1px solid rgba(127,166,239,.15); }
.cmd-nom { flex: 1; font-size: 16px; }
.cmd-k { min-width: 136px; font-size: 16px; padding: 0 8px 0 20px; }
.cmd-k.attend { border-image-source: url('assets/ui/cadres/cadre1_or_fin.png'); color: var(--gold); animation: cmdClign .5s steps(2) infinite; }
@keyframes cmdClign { 50% { filter: brightness(1.5); } }
.cmd-kt { display: inline-block; min-width: 24px; padding: 0 6px; margin: 0 2px; text-align: center; font-size: 16px; line-height: 24px;
  background: #050a1e; border: 2px solid var(--line-in); border-bottom-width: 4px; border-radius: 4px; color: var(--txt); }
.cmd-pt { display: inline-block; min-width: 24px; padding: 0 6px; margin: 0 2px; text-align: center; font-size: 16px; line-height: 24px;
  background: #2a3550; border: 2px solid #9aa8c8; border-radius: 12px; color: #fff; }
.cmd-pb { display: inline-flex; align-items: center; margin: 0 2px; }
.cmd-vide { color: var(--dim); }
.cmd-val { min-width: 64px; text-align: center; font-size: 16px; }
.cmd-bas { margin-top: 8px; gap: 8px; }
.cmd-aide { font-size: 16px; text-align: center; }
.cmd-resume { font-size: 16px; display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.cmd-resume > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* Manette en direct */
.cmd-etat { margin: 8px 0; }
.cmd-sans { font-size: 16px; padding: 8px; border: 2px dashed var(--line); border-radius: 6px; }
.cmd-direct { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cmd-info { flex: 1; min-width: 200px; font-size: 16px; }
.cmd-manette { position: relative; width: 264px; height: 136px; flex: none; border-radius: 40px 40px 64px 64px;
  background: #16224a; box-shadow: inset 0 0 0 2px #101018, inset 0 0 0 4px var(--line), inset 0 -8px 0 rgba(0,0,0,.25); }
.cmd-manette .cmd-b { position: absolute; display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; font-size: 16px;
  border-radius: 12px; transition: transform .05s; }
.cmd-manette .cmd-b.on { transform: scale(1.25); filter: brightness(1.6) drop-shadow(0 0 4px var(--gold)); }
.cmd-manette .cmd-b .cmd-pt, .cmd-manette .cmd-b .cmd-pb { margin: 0; }
.cmd-manette .lt { left: 24px; top: -8px; } .cmd-manette .lb { left: 64px; top: -8px; }
.cmd-manette .rb { right: 64px; top: -8px; } .cmd-manette .rt { right: 24px; top: -8px; }
.cmd-manette .sel { left: 100px; top: 32px; } .cmd-manette .sta { right: 96px; top: 32px; }
.cmd-faces { position: absolute; right: 16px; top: 24px; width: 72px; height: 72px; }
.cmd-faces .f3 { left: 24px; top: 0; } .cmd-faces .f2 { left: 0; top: 24px; } .cmd-faces .f1 { right: 0; top: 24px; } .cmd-faces .f0 { left: 24px; bottom: 0; }
.cmd-croix { position: absolute; left: 24px; top: 72px; width: 56px; height: 56px; }
.cmd-croix .cmd-b { background: #050a1e; border: 2px solid var(--line-in); border-radius: 4px; width: 20px; min-width: 20px; height: 20px; font-size: 16px; line-height: 16px; }
.cmd-croix .h { left: 18px; top: 0; } .cmd-croix .bs { left: 18px; bottom: 0; } .cmd-croix .g { left: 0; top: 18px; } .cmd-croix .d { right: 0; top: 18px; }
.cmd-stick { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #050a1e; box-shadow: inset 0 0 0 2px var(--line-in); }
.cmd-stick.sg { left: 32px; top: 24px; } .cmd-stick.sd { right: 96px; top: 76px; }
.cmd-stick i { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--line-hi); }