/**
 * Maya v2 — La planche de bord commune des machines du Promptoir (s202)
 *
 * Retour de Laurent, 31/07/2026 : « les touches sur téléphones n'ont pas
 * changé ». C'était vrai : la grammaire commune n'avait touché que le
 * clavier, et sur un téléphone il n'y a pas de clavier. Sa règle, écrite
 * de sa main il y a une semaine : « deux boutons à marteler en alternance
 * doivent être AUX DEUX BORDS (un pouce chacun), jamais côte à côte ».
 *
 * D'où cette disposition, la même sur toutes les machines qui martèlent :
 *
 *      ┌──────────── l'écran = l'ACTION principale ────────────┐
 *      └───────────────────────────────────────────────────────┘
 *        ◀ (pouce gauche)   [ ▲▼ · secondaire ]   ▶ (pouce droit)
 *
 * Deux exceptions ASSUMÉES, dites dans le mode d'emploi de chaque
 * machine : la théière (on braque d'un pouce pendant que l'autre tient le
 * gaz) et la Vallée (une vraie croix à quatre directions, on marche en
 * diagonale). Y appliquer les bords rendrait le jeu injouable — la règle
 * vaut pour le MARTÈLEMENT, pas pour la conduite.
 *
 * Chaque machine garde ses couleurs : elle règle --sc-fond, --sc-encre et
 * --sc-relief dans son propre <style>, ce fichier ne fait que les places
 * et les tailles.
 */

.sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0 0.2rem;
}

/* la colonne du milieu : l'axe vertical, l'action secondaire, les
   sélecteurs — tout ce qui n'est pas martelé */
.sc-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;          /* s202b : les sélecteurs ne collent plus à l'action */
  flex: 1 1 auto;
  min-width: 0;
}
.sc-mid-row { display: flex; gap: 0.45rem; align-items: center; justify-content: center; }

.sc-btn {
  border: none;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  color: var(--sc-encre, #e8d9b8);
  background: var(--sc-relief, radial-gradient(circle at 35% 30%, #6b2d22, #47170f 70%));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.25);
  font-weight: 700;
}
.sc-btn:active { transform: translateY(2px); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); }
/* s202b — retour de Laurent : « les boutons servant à rien en jeu
   devraient être invisibles ». Il a raison : un bouton mort attire le
   pouce. Mais on ne l'ENLÈVE pas du flux, sinon tous les autres se
   déplacent en pleine partie et on perd ses repères — il devient
   invisible EN GARDANT SA PLACE (et `visibility: hidden` le rend
   intouchable, contrairement à un simple grisé). */
.sc-off { visibility: hidden; }
.sc-btn:disabled { opacity: 0.32; cursor: default; }
.sc-btn:disabled:active { transform: none; }

/* les deux pouces : gros, ronds, aux extrémités */
.sc-btn--edge {
  width: 74px; height: 74px; border-radius: 50%;
  font-size: 1.6rem; flex: 0 0 auto;
}
/* l'axe vertical et l'action secondaire : plus petits, au centre */
.sc-btn--mid {
  min-width: 54px; height: 46px; border-radius: 12px;
  font-size: 1.05rem; padding: 0 0.6rem;
}
/* l'action principale au centre : ronde, elle ne se confond pas avec les
   sélecteurs posés au-dessus. s202c — arbitrage de Laurent sur maquette :
   « les boutons game a/b ont la bonne taille dans B ; si on applique cette
   taille dans A, on peut grossir le bouton A » — la place rendue par les
   cartouches passe donc dans l'action. */
.sc-btn--action {
  width: 78px; height: 78px; border-radius: 50%;
  font-size: 1.5rem;
}
/* les CARTOUCHES (GAME A / GAME B) : on ne les touche qu'entre deux
   parties — petites, discrètes, elles ne volent pas la place de l'action.
   À ne pas confondre avec .sc-btn--label, qui porte l'action principale
   des autres machines (PÉDALE, VITESSE, TIR, DROP). */
.sc-btn--cartouche {
  min-width: 68px; height: 34px; border-radius: 999px;
  font-size: 0.64rem; letter-spacing: 0.07em; padding: 0 0.6rem;
}
.sc-btn--label {
  min-width: 84px; height: 44px; border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.08em; padding: 0 0.8rem;
}

/* le rappel de ce que fait l'écran, juste sous la vitre : le geste ne se
   devine pas, il s'écrit (3e règle d'ergonomie de Laurent) */
.sc-hint {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--sc-encre, #e8d9b8);
  opacity: 0.85;
  margin-top: 0.5rem;
}

@media (max-width: 480px) {
  .sc-btn--edge { width: 84px; height: 84px; font-size: 1.8rem; }
  .sc-btn--mid { min-width: 50px; height: 44px; }
  .sc-row { gap: 0.3rem; }
}
/* écran étroit : on garde les bords, on resserre le milieu */
@media (max-width: 360px) {
  .sc-btn--edge { width: 74px; height: 74px; }
  .sc-btn--action { width: 70px; height: 70px; font-size: 1.35rem; }
  .sc-btn--cartouche { min-width: 60px; font-size: 0.6rem; }
  .sc-btn--label { min-width: 70px; font-size: 0.66rem; }
}