/* ============================================================
   Registre TERRAIN — l'ecran consulte pendant que le joueur lance.
   Transpose de la maquette 01.

   Les couleurs sortent de la rampe --ammo-*, qui ne change pas avec le theme : la
   charte impose que ce registre reste sombre y compris en theme clair. C'est une
   regle, pas un oubli — un fond clair ne se lit pas a deux metres dans un garage.

   Deux principes tiennent toute la feuille :

   1. La silhouette ne bouge jamais. Les cinq bandes — bandeau, mesure, cible,
      flechettes, barre — sont presentes dans les quatre etats. Rien n'apparait ni ne
      disparait, sinon le joueur devrait relocaliser l'information a chaque coup
      d'oeil, et il n'en donne que trois secondes.
   2. Un seul objet domine a la fois. Hors saisie le grand nombre domine et la cible
      confirme ; en saisie le nombre se replie et la cible prend la place. C'est
      l'attribut data-etat pose sur .ecran qui bascule les deux regimes.
   ============================================================ */

html, body.terrain {
  height: 100%;
}

body.terrain {
  margin: 0;
  background: var(--ammo-2);
  color: var(--ammo-8);
  font-family: var(--f-ui);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Le telephone est pose, pas tenu : rien ne doit pouvoir defiler par megarde. */
  overscroll-behavior: none;
}

.ecran {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  /* Encoches et barre de geste des telephones recents. */
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* ---------- Bandeau ---------- */
.t-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--u4) var(--u4) var(--u3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ammo-6);
  border-bottom: 2px solid var(--ammo-3);
}
.t-head b { color: var(--ammo-7); font-weight: 400; }
.t-head a { color: var(--ammo-6); text-decoration: none; }
/* La zone de contact, pas l'apparence : ces liens font 18 px de haut et se visent au
   pouce sur un telephone pose a deux metres. Le padding s'annule en marge negative,
   le bandeau garde donc sa hauteur et l'alignement sur la ligne de base ne bouge pas.
   Sur /partie ce lien est la seule sortie une fois l'application installee. */
.t-head a { padding: var(--u2) 0; margin: calc(-1 * var(--u2)) 0; }
.t-head a:focus-visible { outline: 2px solid var(--ammo-7); outline-offset: 3px; }

/* ---------- L'avertissement de client perime ----------
   Sous le bandeau, au-dessus de tout le reste, parce qu'il invalide ce qui suit : un
   client perime mesure encore, mais ce qu'il mesure n'entre dans aucune analyse.

   Il disparait quand il est vide, et c'est le CSS qui le decide a partir du texte —
   le JavaScript se contente d'ecrire le libelle que le serveur lui donne, comme pour
   les six autres champs. La silhouette de l'ecran ne depend donc pas de la version du
   binaire installe : dans le cas normal, cette ligne n'existe simplement pas. */
.t-alerte {
  margin: 0;
  padding: var(--u3) var(--u4);
  background: var(--ammo-4);
  color: var(--ammo-8);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ammo-7);
}
.t-alerte:empty { display: none; }

/* ---------- La mesure ----------
   Trois emplacements de nature fixe : une etiquette, un grand nombre, une ligne de
   commentaire. Ce qu'on y met depend de l'etat, la structure jamais. */
.t-mesure { padding: var(--u6) var(--u4) var(--u4); }

.t-lb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ammo-6);
  margin: 0 0 var(--u2);
}
.t-hero {
  font-family: var(--f-perf);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 7rem;
  line-height: .8;
  color: var(--ammo-8);
  font-variant-numeric: tabular-nums;
  margin: 0;
  letter-spacing: -0.01em;
}
.t-hero small { font-size: .28em; color: var(--ammo-7); letter-spacing: 0; }

.t-ligne {
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--ammo-7);
  margin: var(--u3) 0 0;
  min-height: 1.6em;
}
/* Le carre de la charte, en pseudo-element : la ligne reste ainsi un emplacement de
   texte pur, que le JavaScript remplit sans toucher a sa decoration. */
.t-ligne::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--u2);
  background: var(--ammo-7);
}
/* Vide, elle garde sa place : la masquer ferait remonter la cible d'une ligne. */
.t-ligne:empty { visibility: hidden; }

/* ---------- La cible ----------
   Elle prend toute la hauteur qui reste, ce qui est exactement le point : c'est elle
   qui occupe le creux qu'il y avait entre la mesure et les flechettes. Le SVG se met
   a l'echelle de la boite, il n'y a aucune taille en pixels a maintenir. */
.t-cible {
  /* Base zero, et non « auto » : sinon la boite prend pour taille de depart la
     hauteur intrinseque du SVG, la hauteur en pourcentage de celui-ci ne se resout
     plus, et sur un ecran de 640 px la page deborde de soixante-cinq pixels. Avec une
     base nulle, la boite vaut exactement la place qui reste, et le SVG s'y loge. */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  /* Colonne, et non rangee : c'est ce qui met le SVG sur l'axe principal, donc sous
     le controle du flex plutot que d'un pourcentage. Voir ci-dessous. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--u2) var(--u4);
}

/* La hauteur de la cible est donnee par le flex, jamais par un pourcentage.
   `height: 100%` demandait au navigateur de resoudre un pourcentage contre une
   hauteur qui vient elle-meme du flex, a travers des boites qui n'ont pas de hauteur
   ecrite (.ecran est en min-height, section et .t-cible sont des elements flexibles).
   WebKit refuse cette resolution : il rendait alors le SVG a son ratio intrinseque,
   donc carre et large comme sa boite, et la cible debordait par le haut sur la ligne
   de commentaire et par le bas sur les trois flechettes. C'est ce qu'on voyait sur
   /partie, ou l'imbrication compte un niveau de plus que sur le terrain.

   Base nulle et min-height nul, comme .t-cible elle-meme : sans le second, la taille
   minimale automatique d'un element remplace vaut sa hauteur intrinseque — le carre —
   et le SVG refuserait de retrecir sous elle. preserveAspectRatio garde la cible
   ronde et centree dans la boite ainsi obtenue. */
svg.cible {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: 380px;
  display: block;
  touch-action: manipulation;
}

/* Hors saisie la cible ne fait que confirmer ce qui est deja note : elle reste
   lisible mais ne reclame ni le regard ni le doigt. */
.ecran:not([data-etat="saisie"]) .secteur { pointer-events: none; }
/* Rien a viser tant qu'aucune flechette n'est arrivee, et rien non plus quand la
   seance precedente est close : la cible s'eteint dans les deux cas. */
[data-etat="attente"] svg.cible,
[data-etat="close"] svg.cible { opacity: .45; }
[data-etat="saisie"] .secteur { cursor: pointer; }

.cible .zone { stroke: var(--ammo-1); stroke-width: 1; }
.cible .secteur.sombre .zone { fill: var(--ammo-2); }
.cible .secteur.clair  .zone { fill: var(--ammo-8); }
.cible .anneau { fill: var(--ammo-6); pointer-events: none; }
.cible .bull .zone { fill: var(--ammo-6); }
.cible .bullseye { fill: var(--ammo-4); stroke: var(--ammo-1); stroke-width: 1; pointer-events: none; }
.cible .numero {
  fill: var(--ammo-6);
  font-family: var(--f-mono);
  font-size: 15px;
  text-anchor: middle;
  pointer-events: none;
}

/* Secteur choisi. Aucune couleur de la rampe ne tranche a la fois sur le sombre et
   sur le clair des secteurs voisins ; on eteint donc le reste de la cible plutot que
   de chercher une teinte impossible. Le signal se lit a deux metres. */
.cible.a-choisi .secteur:not(.choisi) { opacity: .28; }
.cible .secteur.choisi .zone { fill: var(--ammo-7); }
.cible .secteur.choisi .numero { fill: var(--ammo-8); }

/* Le carre blanc qui apparaissait au clic etait l'anneau de focus par defaut du
   navigateur : il epouse la boite englobante du chemin, donc un rectangle, arrondi
   qui plus est, alors que la charte les interdit. On le remplace par un contour qui
   suit la forme du secteur, et qui ne sort qu'au clavier. */
.cible .secteur:focus { outline: none; }
.cible .secteur:focus-visible .zone { stroke: var(--ammo-8); stroke-width: 4; }

/* Le repere pose sur chaque flechette notee. Les trois existent toujours dans le
   HTML ; « pose » est ce qui les montre. */
.cible .impact { display: none; }
.cible .impact.pose { display: block; }
.cible .impact rect { fill: var(--ammo-7); stroke: var(--ammo-1); stroke-width: 2; }
.cible .impact text {
  fill: var(--ammo-1);
  font-family: var(--f-mono);
  font-size: 11px;
  text-anchor: middle;
  pointer-events: none;
}

/* ---------- Les trois flechettes ---------- */
.t-flechettes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 var(--u4);
}
.dart {
  background: var(--ammo-3);
  padding: var(--u3) var(--u2);
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dart.vide { background: transparent; box-shadow: inset 0 0 0 2px var(--ammo-3); }
.dart.courante { background: var(--ammo-4); box-shadow: inset 0 0 0 2px var(--ammo-7); }
.dart .n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ammo-6);
  text-transform: uppercase;
}
.dart.courante .n { color: var(--ammo-7); }
.dart .v {
  font-family: var(--f-perf);
  font-stretch: condensed;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ammo-8);
  font-variant-numeric: tabular-nums;
}
.dart.vide .v { color: var(--ammo-5); }
.dart .s {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ammo-7);
  letter-spacing: .08em;
  /* Garde exactement sa ligne, avec ou sans score : la hauteur reservee doit valoir
     l'interligne au pixel pres, sinon la rangee monte de trois pixels entre l'etat
     « en cours » et l'etat « notee ». */
  line-height: 1.3;
  min-height: 1.3em;
}

/* ---------- La barre du bas ----------
   Un seul emplacement, deux contenus qui s'y relaient : le message hors saisie, les
   quatre multiplicateurs pendant. Meme hauteur, meme position — entrer en saisie ne
   decale rien a l'ecran. */
.t-barre { margin-top: var(--u4); min-height: 64px; }

.t-cta {
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: .04em;
  font-weight: 700;
  background: var(--ammo-3);
  color: var(--ammo-6);
  margin: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--u4);
}

.mult-row { display: none; grid-template-columns: repeat(4, 1fr); gap: 2px; }
[data-etat="saisie"] .t-cta { display: none; }
[data-etat="saisie"] .mult-row { display: grid; }

.mult {
  min-height: 64px;
  border: 0;
  cursor: pointer;
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .05em;
  font-weight: 600;
  background: var(--ammo-3);
  color: var(--ammo-8);
}
.mult:disabled { color: var(--ammo-5); cursor: default; }
/* Arme : un secteur est choisi, cet appui-la enregistre la flechette. */
.mult.arme { background: var(--ammo-4); box-shadow: inset 0 0 0 2px var(--ammo-7); }
.mult:focus-visible { outline: 3px solid var(--ammo-7); outline-offset: -4px; }

.t-erreur {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
  color: var(--ammo-2);
  background: var(--ammo-7);
  padding: var(--u2);
  margin: 2px 0 0;
}
.t-erreur[hidden] { display: none; }

/* ---------- Regimes de taille ----------
   En saisie, le grand nombre cede la vedette a la cible : c'est elle qu'on vise. */
[data-etat="saisie"] .t-hero { font-size: 3.4rem; }
[data-etat="saisie"] .t-mesure { padding-top: var(--u4); padding-bottom: var(--u2); }

/* Ecrans courts : le chiffre heros cede en premier, il reste lisible bien avant que
   les cibles tactiles ne deviennent trop petites. */
@media (max-height: 720px) {
  .t-hero { font-size: 5rem; }
  [data-etat="saisie"] .t-hero { font-size: 2.6rem; }
  .t-mesure { padding: var(--u4) var(--u4) var(--u3); }
  .dart { min-height: 66px; }
}

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