/* ============================================================
   Partie de 301 / 501 entre amis.

   Cette feuille ne decrit que ce que le terrain n'a pas : les reglages, le tableau
   des scores et les quelques boutons propres au jeu. La cible, les trois flechettes,
   la barre de multiplicateurs et le grand nombre viennent tels quels de terrain.css,
   qui est charge avant celle-ci.

   Meme rampe --ammo-*, meme regle : ce registre reste sombre dans les deux themes.
   Un ecran pose sur une table de bar se lit de loin et de biais.
   ============================================================ */

/* Les trois panneaux occupent chacun toute la hauteur, a tour de role : la page ne
   defile pas, et la silhouette d'un panneau ne depend pas de celle du precedent. */
.ecran.jeu > section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ecran.jeu [hidden] { display: none; }

/* ---------- Blocs de reglage ---------- */
.j-bloc { padding: var(--u6) var(--u4) 0; }

.j-liste { list-style: none; margin: 0; padding: 0; }

.j-joueur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--u3);
  padding: var(--u3) 0;
  border-bottom: 2px solid var(--ammo-3);
  font-size: 20px;
}

.j-retirer {
  background: none;
  border: 0;
  padding: var(--u2) 0 var(--u2) var(--u3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ammo-5);
  cursor: pointer;
}
.j-retirer:hover { color: var(--ammo-7); }

.j-ajout { display: flex; gap: 2px; margin-top: var(--u4); }

/* L'etiquette existe pour les lecteurs d'ecran ; a l'oeil, le champ se passe de
   titre — il n'y en a qu'un, et il porte deja son invite. */
.j-invisible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.j-nom {
  flex: 1;
  min-width: 0;
  background: var(--ammo-1);
  border: 2px solid var(--ammo-3);
  color: var(--ammo-8);
  font-family: var(--f-ui);
  font-size: 18px;
  padding: var(--u3);
}
.j-nom::placeholder { color: var(--ammo-5); }
.j-nom:focus-visible { outline: none; border-color: var(--ammo-7); }

/* ---------- Boutons ---------- */
.j-btn {
  background: var(--ammo-3);
  border: 0;
  color: var(--ammo-8);
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 18px;
  padding: var(--u3) var(--u6);
  cursor: pointer;
}
.j-btn:disabled { color: var(--ammo-5); background: var(--ammo-2); cursor: default; }
.j-btn:focus-visible { outline: 3px solid var(--ammo-7); outline-offset: -4px; }

.j-primaire { background: var(--ammo-4); box-shadow: inset 0 0 0 2px var(--ammo-7); }
.j-primaire:disabled { box-shadow: inset 0 0 0 2px var(--ammo-3); }

.j-discret {
  background: none;
  box-shadow: inset 0 0 0 2px var(--ammo-3);
  color: var(--ammo-6);
  font-size: 15px;
}
.j-discret:disabled { box-shadow: inset 0 0 0 2px var(--ammo-3); background: none; }

.j-lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ammo-6);
  cursor: pointer;
}
.j-lien:focus-visible { outline: 2px solid var(--ammo-7); outline-offset: 3px; }

/* Deux choix cote a cote, jamais plus : 301 ou 501, simple ou double. */
.j-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.j-opt {
  background: var(--ammo-1);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--ammo-3);
  color: var(--ammo-6);
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  padding: var(--u3);
  cursor: pointer;
}
.j-opt.actif { background: var(--ammo-4); color: var(--ammo-8); box-shadow: inset 0 0 0 2px var(--ammo-7); }
.j-opt:focus-visible { outline: 3px solid var(--ammo-7); outline-offset: -4px; }

/* La barre du bas est poussee en fin de panneau : le pouce la trouve au meme
   endroit dans les trois panneaux. */
.j-bas {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--u2);
  padding: var(--u6) var(--u4) var(--u4);
}
.j-bas .j-btn { width: 100%; }

/* ---------- Le tableau des scores ----------
   Il se consulte du coin de l'oeil, sans etre lu : le nom en petit, le reste en
   chiffres alignes, et le joueur courant marque par le carre plein de la charte. */
.j-tableau {
  list-style: none;
  margin: 0;
  padding: var(--u3) var(--u4) 0;
  display: grid;
  gap: 2px;
}

/* A partir de trois joueurs, deux colonnes. Six lignes empilees prenaient 329 px sur
   un telephone qui en offre 745 : la cible tombait a sept pixels de haut et l'ecran
   devenait inutilisable au moment precis ou il sert. Deux colonnes ramenent six
   joueurs a trois lignes, et la cible retrouve sa place.
   C'est le nombre de joueurs qui commande, pas la largeur de l'ecran : le CSS le lit
   sur la liste rendue, le JavaScript continue de ne poser que des lignes. */
.j-tableau:has(.j-rang:nth-child(3)) { grid-template-columns: 1fr 1fr; }

.j-rang {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--u3);
  padding: var(--u2) var(--u3);
  background: var(--ammo-1);
  color: var(--ammo-6);
}

.j-rang.courant { background: var(--ammo-4); color: var(--ammo-8); }

.j-rang-nom {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le carre plein, comme .t-ligne : le seul ornement de la charte. */
.j-rang.courant .j-rang-nom::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--u2);
  background: var(--ammo-7);
}

.j-rang-reste {
  font-family: var(--f-perf);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---------- La volee ----------
   Le terrain met l'angle en grand et le score en petit ; ici c'est l'inverse, la
   flechette n'a pas d'autre mesure que ce qu'elle vaut. */
.jeu-cours .dart .v {
  font-family: var(--f-perf);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 26px;
  color: var(--ammo-8);
}
.jeu-cours .dart.vide .v { color: var(--ammo-5); }

.jeu-cours .dart .s {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ammo-6);
}

/* La barre de multiplicateurs est toujours en saisie ici : la partie ne connait
   pas d'autre etat, contrairement au terrain. */
.jeu-cours .mult-row { display: grid; }

.j-annuler-row { padding: 2px var(--u4) var(--u4); }
.j-annuler-row .j-btn { width: 100%; }

/* ---------- Fin de partie ---------- */
.j-fin { justify-content: center; padding: var(--u8) var(--u4); }
.j-fin .t-hero { font-size: clamp(3rem, 18vw, 6rem); }
.j-fin .j-bas { padding-left: 0; padding-right: 0; }

@media (max-width: 380px) {
  .j-rang-reste { font-size: 19px; }
  .j-opt { font-size: 17px; }
}

/* ---------- Ecrans courts ----------
   Sous 700 px de hauteur utile — un petit telephone, barres du navigateur deduites —
   les six bandes ne tiennent plus : la cible tombait a soixante-quatre pixels a deux
   joueurs, et a seize a six. Une cible qu'on ne peut plus toucher ne sert a rien,
   alors que c'est le seul objet de l'ecran qui recoive le doigt.

   C'est donc le grand nombre qui cede. Sur le terrain il est seul a porter la mesure,
   mais ici le tableau dit deja a qui c'est le tour — le carre plein — et combien il
   lui reste : le hero repete. La ligne, elle, reste en place, parce qu'elle seule
   annonce le bust et la sortie au double.

   La silhouette ne bouge pas pour autant : elle est fixee par la taille de l'ecran,
   pas par l'etat du jeu. Sur un telephone donne, elle ne change jamais en cours de
   partie — c'est ce que la regle du terrain demande. */
@media (max-height: 700px) {
  .jeu-cours .t-mesure .t-lb,
  .jeu-cours .t-mesure .t-hero { display: none; }
  .jeu-cours .t-mesure { padding: var(--u3) var(--u4); }
  /* Le tableau se resserre aussi : a cette taille l'ecran se tient en main, il ne se
     lit plus a deux metres, et la hauteur gagnee va a la cible. */
  .j-rang { padding: var(--u1) var(--u3); }
  .j-rang-reste { font-size: 18px; }
  .j-annuler-row .j-btn { padding-top: var(--u2); padding-bottom: var(--u2); }
}