/*
  Participant : sobre par doctrine. Le spectacle est sur le grand écran, ici on répond
  d'une main sans réfléchir à l'interface. Aucune animation lourde, aucune image, aucune
  police téléchargée : la page doit s'ouvrir sur une 4G de sous-sol.

  Les couleurs arrivent du thème à l'exécution (variables --c-*), avec un repli sobre
  au cas où le thème n'aurait pas encore été reçu.
*/

:root {
  --c-fond: #0A0807;
  --c-surface: #140F0D;
  --c-bordure: #241C18;
  --c-equipeA: #C1121F;
  --c-equipeB: #F2B233;
  --c-accent: #2EC4B6;
  --c-textePrimaire: #F6EBD8;
  --c-texteSecondaire: #C9BCAF;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--c-fond);
  color: var(--c-textePrimaire);
  font: 500 17px/1.4 system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
  user-select: none;
}

#app {
  min-height: 100%;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.ecran { flex: 1; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.ecran[hidden] { display: none; }

.consigne { margin: 0; text-align: center; color: var(--c-texteSecondaire); font-size: 19px; }
.grand { margin: 0; text-align: center; font-size: 30px; font-weight: 700; line-height: 1.15; }
.ailleurs { margin: 0; text-align: center; color: var(--c-texteSecondaire); font-size: 15px; }
.rappel-equipe { margin: 0; text-align: center; font-size: 15px; color: var(--c-texteSecondaire); letter-spacing: .06em; text-transform: uppercase; }
.scores { margin: 0; text-align: center; color: var(--c-texteSecondaire); font-size: 16px; }

/* Choix d'équipe : deux cibles énormes, on ne se trompe pas de table. */
.equipes { display: flex; flex-direction: column; gap: 16px; }
.equipe {
  border: 0; border-radius: 20px; padding: 34px 20px;
  font: 800 30px/1 system-ui, sans-serif; color: #140F0D;
  cursor: pointer;
}
.equipe[data-equipe="A"] { background: var(--c-equipeA); color: #F6EBD8; }
.equipe[data-equipe="B"] { background: var(--c-equipeB); }
.equipe:active { transform: translateY(2px); }

/* En-tête de la manche : discret, il ne doit pas voler l'attention à l'écran. */
.entete {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-texteSecondaire);
}

/*
  Les lettres seules, pleine largeur, hauteur généreuse : on répond au pouce, debout,
  sans lire. La cible fait au moins 64 px de haut.
*/
.choix { display: flex; flex-direction: column; gap: 14px; }
.choix-bouton {
  border: 3px solid var(--c-bordure);
  background: var(--c-surface);
  color: var(--c-textePrimaire);
  border-radius: 18px;
  padding: 22px;
  min-height: 76px;
  font: 800 40px/1 system-ui, sans-serif;
  cursor: pointer;
}
.choix-bouton:active { transform: translateY(2px); }
.choix-bouton.choisi { background: var(--c-accent); border-color: var(--c-accent); color: #0A0807; }

.etat-envoi { margin: 0; text-align: center; color: var(--c-accent); font-weight: 700; }
.etat-envoi[hidden] { display: none; }

/* Retour sobre : jamais de score individuel, il n'existe pas. */
.verdict { margin: 0; text-align: center; font-size: 32px; font-weight: 800; }
.verdict.juste { color: var(--c-accent); }
.verdict.faux { color: var(--c-texteSecondaire); }

/* Buzzer capitaine : un seul bouton, tout l'écran, aucune ambiguïté. */
#buzzer {
  flex: 1; width: 100%;
  border: 5px solid var(--c-bordure);
  border-radius: 28px;
  background: var(--c-equipeA);
  color: var(--c-textePrimaire);
  font: 800 34px/1.1 system-ui, sans-serif;
  cursor: pointer;
}
#buzzer:active { transform: scale(.98); }

.lien {
  margin: 12px 0 0; text-align: center; font-size: 13px;
  color: var(--c-texteSecondaire); opacity: .7;
}
.lien[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---------------------------------------------------------------- */
/* Page d'accueil du sous-domaine : un champ, rien d'autre           */
/* ---------------------------------------------------------------- */

#accueil {
  min-height: 100%;
  padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 28px; justify-content: center;
}
#accueil header { text-align: center; }
#accueil .titre { margin: 0; font: 800 40px/1.05 system-ui, sans-serif; }
#accueil .sous-titre { margin: 6px 0 0; font: 500 17px/1.3 system-ui, sans-serif; color: var(--c-texteSecondaire); }

#forme { display: flex; flex-direction: column; gap: 14px; }
.consigne { text-align: center; }

/*
  Le champ de clé : très gros, très espacé, en chiffres tabulaires. On lit sa saisie d'un
  coup d'œil pour la comparer à l'écran, à dix mètres, sans lunettes.
*/
#cle {
  width: 100%; padding: 20px 12px;
  border: 3px solid var(--c-bordure); border-radius: 18px;
  background: var(--c-surface); color: var(--c-textePrimaire);
  font: 800 42px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .22em; text-align: center; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
#cle:focus { outline: none; border-color: var(--c-accent); }

.aide { margin: 0; text-align: center; font-size: 14px; color: var(--c-texteTertiaire, #A2968A); }

#valider {
  border: 0; border-radius: 18px; padding: 22px;
  background: var(--c-accent); color: #0A0807;
  font: 800 22px/1 system-ui, sans-serif; cursor: pointer;
}
#valider:active { transform: translateY(2px); }

.erreur {
  margin: 0; text-align: center; padding: 12px; border-radius: 12px;
  background: var(--c-equipeA); color: var(--c-textePrimaire);
  font: 600 15px/1.3 system-ui, sans-serif;
}
.erreur[hidden] { display: none; }

.mention { margin: 0; text-align: center; font-size: 12px; color: var(--c-texteTertiaire, #A2968A); opacity: .8; }

/*
 * Profil Barnum. Le texte est long et doit se lire d'une traite sur un téléphone tenu à
 * bout de bras : on lui donne de l'air et une taille confortable, quitte à faire défiler.
 */
#ecran-barnum { justify-content: flex-start; overflow-y: auto; padding: 20px 18px 32px; }
#ecran-barnum h2 { font-size: 20px; margin: 0 0 14px; text-align: center; }
#ecran-barnum .profil {
  font-size: 17px; line-height: 1.5; margin: 0 0 20px;
  color: var(--c-textePrimaire);
}
#ecran-barnum .consigne {
  font-size: 18px; font-weight: 700; margin: 0 0 14px; text-align: center;
}
.barnum-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.barnum-choix .choix-bouton { font-size: 22px; min-height: 76px; }
#ecran-barnum .merci {
  margin: 16px 0 0; text-align: center; font-size: 16px; color: var(--c-accent);
}